/*
 * Add-listing page (page-add-listing.php). Adds to main.css; GeoDirectory's
 * form controls keep their own markup and get a column and steps to sit in.
 */

.own-addl__inner { max-width: 880px; margin: 0 auto; padding-block: var(--own-space-8) var(--own-space-16); padding-left: var(--own-gutter); padding-right: var(--own-gutter); }
.own-addl__header { max-width: 60ch; margin-bottom: var(--own-space-6); }
.own-addl__title { margin: 0 0 var(--own-space-3); font-size: 2.25rem; font-weight: var(--own-weight-heading); color: var(--own-color-primary); }
.own-addl__lead { margin: 0; font-size: 1.0625rem; color: var(--own-color-text-2); }

/* Find your business on Google */
.own-gstart { display: grid; gap: var(--own-space-3); padding: var(--own-space-6); margin-bottom: var(--own-space-6); background: var(--own-color-accent-tint); border: 1px solid color-mix(in srgb, var(--own-color-accent) 25%, transparent); border-radius: var(--own-radius-lg); }
.own-gstart__text h2 { margin: 0 0 var(--own-space-1); font-size: 1.25rem; color: var(--own-color-primary); }
.own-gstart__text p { margin: 0; color: var(--own-color-text-2); font-size: .95rem; }
.own-gstart__field { display: block; }
.own-gstart__input { width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 1.05rem; font-family: inherit; border: 1px solid var(--own-color-border-input); border-radius: var(--own-radius); background: #fff; }
.own-gstart__input:focus { outline: none; border-color: var(--own-color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--own-color-accent) 18%, transparent); }
.own-gstart__status { margin: 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; color: var(--own-color-success); }
.own-gstart__status:empty { display: none; }
.own-gstart__skip { margin: 0; font-size: .85rem; color: var(--own-color-muted); }
.pac-container { font-family: var(--own-font-sans); border-radius: var(--own-radius); box-shadow: var(--own-shadow-float); }

/* Steps */
.own-steps-wrap { display: grid; gap: var(--own-space-6); }
.own-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--own-space-2); }
.own-progress li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--own-radius); background: var(--own-color-surface-muted); color: var(--own-color-muted); font-size: .85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; min-width: 0; }
.own-progress li.is-active { background: var(--own-color-surface); border-color: var(--own-color-accent); color: var(--own-color-primary); }
.own-progress li.is-done { color: var(--own-color-success); }
.own-progress__num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--own-color-border); color: var(--own-color-text-2); font-size: .75rem; font-weight: 600; }
.own-progress li.is-active .own-progress__num { background: var(--own-color-accent); color: #fff; }
.own-progress li.is-done .own-progress__num { background: var(--own-color-success); color: #fff; }
.own-progress__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.own-steps-wrap .own-step { display: none; padding: var(--own-space-6); background: var(--own-color-surface); border: 1px solid var(--own-color-border); border-radius: var(--own-radius-lg); box-shadow: var(--own-shadow-card); }
.own-steps-wrap .own-step.is-active { display: block; }
/* .bsui section in ayecode-ui-compatibility.css is (0,1,1) and beat a bare
   .own-step, so every step showed at once. Both rules are scoped to the
   wrapper to win on specificity. */
.own-step.has-error { border-color: var(--own-color-featured); }
.own-step__title { margin: 0 0 var(--own-space-5); font-size: 1.35rem; font-weight: var(--own-weight-heading); color: var(--own-color-primary); }
.own-step__body { display: grid; gap: var(--own-space-2); }
.own-step__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--own-space-3); margin-top: var(--own-space-6); padding-top: var(--own-space-5); border-top: 1px solid var(--own-color-border); flex-wrap: wrap; }
.own-step__nav .own-btn { margin: 0; }
.own-step__next, .own-step__submit { margin-left: auto !important; }
.own-step__msg { flex-basis: 100%; margin: 0; font-size: .9rem; color: var(--own-color-featured); }
.own-hidden-row { display: none !important; }

/* GeoDirectory rows inside a step */
.own-step .geodir_form_row, .own-step .form-group { margin-bottom: var(--own-space-3); }
.own-step label, .own-step .form-label { font-weight: 500; color: var(--own-color-primary); font-size: .95rem; }
.own-step .text-muted, .own-step .form-text { color: var(--own-color-muted) !important; font-size: .85rem; }
.own-step .form-control, .own-step .custom-select, .own-step select { border-color: var(--own-color-border-input) !important; border-radius: var(--own-radius) !important; font-family: inherit; }
.own-step .form-control:focus { border-color: var(--own-color-accent) !important; box-shadow: none !important; }

/* Package choice as cards */
.own-step [data-rule-key="package_id"] .form-check, .own-step [data-argument="package_id"] .form-check { padding: 12px 14px 12px 40px; margin-bottom: 8px; border: 1px solid var(--own-color-border); border-radius: var(--own-radius); }
.own-step [data-rule-key="package_id"] .form-check:has(:checked), .own-step [data-argument="package_id"] .form-check:has(:checked) { border-color: var(--own-color-accent); background: var(--own-color-accent-tint); }

/* Submit row */
#geodir-add-listing-submit.own-step__submit { margin: 0 !important; padding: 0 !important; display: flex; gap: var(--own-space-2); }
#geodir-add-listing-submit.own-step__submit button { appearance: none; -webkit-appearance: none; padding: 13px 22px; border: 0; border-radius: var(--own-radius); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; cursor: pointer; font-family: inherit; }
#geodir-add-listing-submit.own-step__submit .btn-primary, #geodir-add-listing-submit.own-step__submit button[type="submit"] { background: var(--own-color-accent) !important; color: #fff !important; }
#geodir-add-listing-submit.own-step__submit .btn-secondary, #geodir-add-listing-submit.own-step__submit .btn-outline-primary { background: transparent !important; color: var(--own-color-primary) !important; border: 1.5px solid var(--own-color-primary) !important; }

@media (max-width: 767px) {
	.own-progress { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
	.own-step { padding: var(--own-space-4); }
	.own-addl__title { font-size: 1.75rem; }
}

/*
 * The preview panel.
 *
 * Two columns from 1200px: the form keeps its readable width, the preview
 * sticks beside it. Below that the screen cannot hold both, and a shrunken
 * preview on a phone is worse than none, so it is hidden and the "See your
 * listing" link at the end of the form does the job instead.
 */
.own-addl__cols { display: grid; gap: var(--own-space-6); }

@media (min-width: 1280px) {
	/* The page is 880px of readable form on its own. With the preview beside
	   it the container has to grow, or the form ends up at 340px and the step
	   chips collapse to bare numbers. */
	.own-addl__inner { max-width: 1440px; }

	.own-addl__cols {
		grid-template-columns: minmax(0, 1fr) 460px;
		align-items: start;
	}

	.own-addl__header,
	.own-gstart { max-width: 880px; }
}

@media (max-width: 1279px) {
	.own-addl__preview { display: none; }
}

.own-preview {
	position: sticky;
	top: var(--own-space-5);
	padding: var(--own-space-4);
	background: var(--own-color-surface);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius-lg);
	box-shadow: var(--own-shadow-card);
}

.own-preview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--own-space-3);
}

.own-preview__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: var(--own-weight-heading);
	color: var(--own-color-primary);
}

/* Scoped to .own-preview on purpose: Elementor's global kit stylesheet
   (post-56713.css) carries `.elementor-kit-56713 button { background: #383838 }`
   at (0,1,1) and paints every bare button on the site dark. It goes when
   Elementor does; until then a bare .own-preview__refresh loses to it. */
.own-preview .own-preview__refresh {
	padding: 6px 12px;
	font: inherit;
	font-size: .85rem;
	color: var(--own-color-accent);
	background: var(--own-color-surface);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius);
	cursor: pointer;
}

.own-preview .own-preview__refresh:hover { background: var(--own-color-surface-muted); }
.own-preview .own-preview__refresh[disabled] { opacity: .5; cursor: default; }

.own-preview__note {
	margin: var(--own-space-2) 0 var(--own-space-3);
	font-size: .8rem;
	color: var(--own-color-muted);
}

/*
 * The frame is laid out at desktop width and scaled down, so the vendor sees
 * the desktop listing rather than the phone one a 520px iframe would render.
 * 1280 x 0.375 = 480, which leaves the panel padding either side.
 */
.own-preview {
	/* One place to change how big the shrunken page is. The iframe is laid
	   out at --own-preview-w and scaled, so 1280px of desktop page fits a
	   420px column. */
	--own-preview-w: 1280px;
	--own-preview-scale: .328;
	--own-preview-h: 660px;
}

.own-preview__frame {
	width: 100%;
	height: var(--own-preview-h);
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--own-color-surface-muted);
	border: 1px solid var(--own-color-border);
	border-radius: var(--own-radius);
}

/*
 * A transformed element still occupies its untransformed size, so scaling the
 * iframe alone would leave the scroll container three times too tall and
 * mostly empty. This box is given the SCALED height by the script, and the
 * iframe is drawn inside it.
 */
.own-preview__scale {
	position: relative;
	width: 100%;
	height: calc(var(--own-preview-h) - 2px);
}

.own-preview__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--own-preview-w);
	height: 1200px;
	border: 0;
	transform: scale(var(--own-preview-scale));
	transform-origin: 0 0;
}

.own-preview__status {
	margin: var(--own-space-2) 0 0;
	min-height: 1.2em;
	font-size: .8rem;
	color: var(--own-color-muted);
}

.own-preview.is-loading .own-preview__frame { opacity: .55; }

/* The "see your listing" link under the form, for narrow screens and for
   anyone who would rather look at it full size. */
.own-addl__seelisting {
	display: inline-block;
	margin-top: var(--own-space-4);
	font-size: .9rem;
}