/**
 * StarzMeet — claim popup chrome (pairs with inc/claim-popup.php).
 *
 * Fixes what the theme ships on the "Claiming your business Listing" modal.
 * Measured before changing anything (390x844, logged in):
 *
 *  - CLOSE. The markup is `<a class="md-close"><i class="fa fa-close"></i></a>`.
 *    The anchor collapses to 0x0 because the icon inside it is absolutely
 *    positioned, so the tap target is the icon alone: 30x30, theme orange
 *    #dd9933, at top:-9px right:-9px. On mobile the modal is full-bleed at
 *    top:0, so a -9px offset puts a third of the only close control OFF-SCREEN
 *    — hence "not visible enough". It is also off-brand and below the ~44px
 *    minimum touch target.
 *
 *  - SUBMIT. height:38px + padding:13px 20px + line-height:38px on the same
 *    box-sizing:border-box input. That leaves 12px of content box for a 38px
 *    line, so the label is pushed past the bottom edge and clipped — the
 *    "text is not centered" report. Fixing line-height alone is not enough:
 *    the fixed height has to go too, or a wrapped label clips again.
 *
 * Scoped to `.planclaim-page-popup` throughout so no other ListingPro modal
 * (sign-in, map, share) is touched.
 */

/* ---------------------------------------------------------------------------
 * Close control
 * ------------------------------------------------------------------------- */

/* Promote the anchor itself into the button: it is what carries the click
   handler, so making it the 44px target means the whole circle closes rather
   than just the glyph inside it.
   `sticky`, paired with the DOM move in inc/claim-popup.php. Both alternatives
   were tried and measured:
     - in-flow (theme default): the anchor is the LAST child of .md-content, so
       it renders at the BOTTOM of the form (y=649) — sticky cannot pull an
       element up past its own position, hence the move;
     - `fixed`: the popup carries a transform, so it resolves against the popup
       box, not the viewport. That box is not always on-screen — at 390x640 the
       button landed at y=-13, clipped exactly like the bug being fixed.
   Sticky against the popup's own scroll container is stable at every height. */
/* `overflow:hidden` on .md-content makes IT the nearest scrollport, so a sticky
   child sticks to a box that never scrolls and rides away with the content
   (measured: close at y=-23 after 33px of scroll). Releasing it hands the
   scrollport back to the popup, which is what actually scrolls. Verified the
   card keeps its height and nothing spills — the form's floats are cleared by
   the theme's own clearfix, not by this overflow. */
.planclaim-page-popup .md-content {
	overflow: visible !important;
}

.planclaim-page-popup .md-close {
	position: sticky !important;
	top: 10px;
	float: right;
	z-index: 20;
	width: 44px !important;      /* theme ships 32px; must outrank it */
	height: 44px !important;
	/* Negative bottom margin: the button overlays the heading row instead of
	   pushing the whole form down by its own height. */
	margin: 10px 10px -44px 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #E0DBF2;
	box-shadow: 0 2px 12px rgba(30, 35, 56, .20);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.planclaim-page-popup .md-close:hover,
.planclaim-page-popup .md-close:focus-visible {
	background: #F3F0FF;
	border-color: #7C3AED;
}

.planclaim-page-popup .md-close:focus-visible {
	outline: 2px solid #7C3AED;
	outline-offset: 2px;
}

/* Undo the theme's absolute orange chip and leave a plain glyph in the circle. */
.planclaim-page-popup .md-close .fa-close,
.planclaim-page-popup .md-close .fa {
	position: static !important;
	top: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	color: #2E2A45 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

/* The full-screen backdrop carries .md-close too, so the button styling above
   would turn it into a 44px circle. Exempt it — it is a backdrop, not a button.
   (Its visibility is handled in inc/modal-chrome.php, which knows when a modal
   is open.) */
.md-overlay.md-close {
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
}

/* ---------------------------------------------------------------------------
 * Heading
 * ------------------------------------------------------------------------- */

/* "Claiming your business Listing" is 354px wide starting at x=18, and the close
   now occupies x=336..380 — so the title ran underneath it. Reserve the corner. */
.planclaim-page-popup .claim-details h2,
.planclaim-page-popup .claim-details h3 {
	padding-right: 56px;
}

/* ---------------------------------------------------------------------------
 * Submit button
 * ------------------------------------------------------------------------- */

.planclaim-page-popup input[type="submit"],
.planclaim-page-popup .lp-review-btn {
	height: auto !important;        /* was 38px, smaller than its own padding+line */
	min-height: 52px;               /* comfortable target, and room for two lines */
	line-height: 1.3 !important;
	padding: 14px 20px !important;
	white-space: normal !important; /* was `pre`: a long label could not wrap */
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center !important;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
}

/* A disabled submit should read as disabled — the theme renders it identically
   to the live one, so the form looks broken rather than incomplete. */
.planclaim-page-popup input[type="submit"][disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Mobile sheet
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Full-bleed sheet: keep the close clear of the notch / status bar. */
	.planclaim-page-popup .md-close {
		top: calc(10px + env(safe-area-inset-top)) !important;
	}

	/* The white card is only as tall as the form (639px of an 844px screen), and
	   the theme's backdrop never becomes visible, so the listing page showed
	   through undimmed below it and the sheet read as half-open. Filling the
	   screen is the standard mobile pattern and needs no stacking-context games:
	   the popup is already full-bleed and scrollable, so the card just has to
	   reach the bottom. */
	.planclaim-page-popup .md-content {
		min-height: 100vh;
		background: #fff;
	}

	/* Give the last control room above the bottom edge — with the page chrome
	   now hidden while the modal is open (inc/modal-chrome.php) there is nothing
	   below it, so the button sat flush against the screen edge. */
	.planclaim-page-popup .claimform-box,
	.planclaim-page-popup form {
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}

	/* 16px minimum on inputs, else iOS Safari zooms the page on focus and the
	   sheet is left scrolled sideways. */
	.planclaim-page-popup input[type="text"],
	.planclaim-page-popup input[type="email"],
	.planclaim-page-popup input[type="tel"],
	.planclaim-page-popup input[type="password"],
	.planclaim-page-popup textarea,
	.planclaim-page-popup select {
		font-size: 16px;
	}
}