/* =============================================================================
   asc-auth.css: login / register tab switcher.

   Printed at wp_head 114, after asc-ui.css (110), which owns .asc-auth-tabs and
   is not edited here because another session has it.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   The active pill fills its half of the track

   Measured before: track 502x47, gold pill 241x35, leaving a 6px dead band above
   and below it (5px of track padding plus the 1px border). The pill read as a
   small lozenge floating inside a larger empty capsule rather than as a
   segmented control.

   Dropping the track's padding and the inter-tab gap lets each tab own exactly
   half the track, so the gold runs edge to edge and the only thing between it
   and the outside is the track's own 1px hairline. Both share border-radius
   50rem at the same height, so the pill's cap nests inside the track's curve
   instead of cutting across it.
   -------------------------------------------------------------------------- */
.asc-ui .asc-auth-tabs {
	padding: 0;
	gap: 0;
}

/* The tabs now supply the control's height themselves, so the vertical padding
   moves here from the track: 11px of tab padding plus 5px of track padding
   becomes 16px on the tab. Measured, that holds the switcher at the 47px it was
   before, so nothing below it shifts. */
.asc-ui .asc-auth-tab {
	padding: 16px 18px;
}

/* -----------------------------------------------------------------------------
   "Remember me" sits on the checkbox's line

   Two things were stacking it underneath. asc-ui.css already declares
   .asc-check as inline-flex, but the label measured display:block, so a
   broader form rule was winning it; and the label contains THREE <br> tags,
   which wpautop injects into the shortcode output on this Elementor page.
   Even a flex label cannot save a layout with hard line breaks inside it.

   The label is restated as a flex row here, and the stray breaks are taken out
   of flow. !important is needed on the display because the competing rule is
   `.woocommerce-form-login label { display: block !important }` in the
   Customizer blob; it is scoped to .asc-check so the real field labels above
   still stack as that rule intends. The <br> tags are
   left in the markup rather than stripped in PHP, because they come from
   wpautop running over the whole page and suppressing that globally would
   change every other shortcode on the site.
   -------------------------------------------------------------------------- */
.asc-ui .asc-remrow .asc-check {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	line-height: 1.2;
}

.asc-ui .asc-remrow .asc-check br {
	display: none;
}

/* -----------------------------------------------------------------------------
   Checked state: white box, black tick

   accent-color was #c9a961, so ticking the box filled it gold and Chrome drew a
   white tick on it, which on this near-black card read as a bare floating
   check. White accent keeps the box white in both states and lets the browser
   pick the contrasting dark tick. !important because the blob's
   `.woocommerce-form-login input[type="checkbox"]` rule carries it too.
   -------------------------------------------------------------------------- */
.asc-ui .asc-remrow .asc-check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	transition: box-shadow .16s ease;
}

/* The tick is a background image rather than accent-color or an ::after.
   accent-color: #fff was tried first and does not do what it looks like it
   should here: the page carries color-scheme dark, so the control still painted
   a white tick on a transparent box instead of a white box with a dark tick.
   Drawing it explicitly is the only way to guarantee the two colours asked for,
   and unlike a pseudo-element it does not depend on how a browser treats
   generated content inside a replaced element. */
.asc-ui .asc-remrow .asc-check input[type="checkbox"]:checked {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E");
}

.asc-ui .asc-remrow .asc-check input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--asc-gold-soft);
}