/* ==========================================================================
   CodeOrder auth modal — app-style bottom-sheet skin (THEME override).

   The modal markup, logic and base styles ship with the CodeOrder plugin
   (CheckoutAuthModalApp.vue). Here we only restyle it into a bottom sheet
   that slides up from the bottom, like a native mobile app.

   `body` prefixes raise specificity above the plugin's runtime-injected
   <style>, so this wins regardless of stylesheet load order. We only touch
   layout/animation — colours stay driven by the plugin's --co-* variables.
   ========================================================================== */

/* Force the modal to cover the whole viewport, then anchor the dialog to the
   bottom. The plugin's shared `.co-portal` class carries a centred max-width
   layout; without resetting it the scrim only dims a centred band. */
body .co-checkout-auth-modal {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100svh;
	margin: 0;
	padding: 0;
	align-items: flex-end;
	justify-content: center;
}

/* Full-viewport dark scrim (fixed so it never inherits a parent width
   constraint). Plain semi-transparent fill — no backdrop-filter blur, which
   is expensive to composite on lower-end devices. */
body .co-checkout-auth-modal__backdrop {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	background: rgba(6, 12, 22, 0.62);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* The sheet: bottom-anchored, content height, rounded top corners. */
body .co-checkout-auth-modal__dialog {
	flex: 0 0 auto;
	width: min(520px, 100%);
	min-height: 0;
	height: auto;
	max-height: 92svh;
	margin: 0 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 24px 24px 0 0;
	box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.38);
	padding-top: 20px; /* leaves room for the grab handle */
}

/* Grab handle. */
body .co-checkout-auth-modal__dialog::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	height: 4px;
	border-radius: 999px;
	/* The plugin's token is --co-text-main; fall back to the theme's own ink so
	   the handle stays visible in dark mode instead of dark-on-dark. */
	background: color-mix(in srgb, var(--co-text-main, var(--ink)) 22%, transparent);
	z-index: 6;
}

/* Collapse the marketing split layout into a single compact auth card. */
body .co-checkout-auth-modal .co-auth-shell {
	grid-template-columns: 1fr;
	min-height: 0;
}
body .co-checkout-auth-modal .co-auth-hero {
	display: none;
}
body .co-checkout-auth-modal .co-auth-card {
	min-height: 0;
	justify-content: flex-start;
	padding: 8px clamp(20px, 5vw, 34px) calc(26px + env(safe-area-inset-bottom, 0px));
}
body .co-checkout-auth-modal .co-auth-form,
body .co-checkout-auth-modal .co-auth-empty {
	width: 100%;
}

/* Close button — top-right corner of the sheet. */
body .co-checkout-auth-modal__close {
	top: 14px;
	right: 14px;
}

/* Slide up from the bottom on every breakpoint (overrides the desktop 32px). */
body .co-checkout-auth-fade-enter-from .co-checkout-auth-modal__dialog,
body .co-checkout-auth-fade-leave-to .co-checkout-auth-modal__dialog {
	transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
	body .co-checkout-auth-fade-enter-from .co-checkout-auth-modal__dialog,
	body .co-checkout-auth-fade-leave-to .co-checkout-auth-modal__dialog {
		transform: none;
	}
}