/* ==========================================================================
   Kidoclassic Mall, custom /login page (sign in + register)
   --------------------------------------------------------------------------
   Self-contained. The design tokens below are copied from the theme's
   global.css so this module never imports the theme file, yet every colour,
   radius, shadow and font matches the store exactly. Scoped under .kc-login so
   nothing here can bleed onto another page.

   This is a high-trust moment: a centered card on a soft blush field, warm and
   effortless, styled to feel like the brand rather than a sterile form. Fields
   match the checkout page exactly (same border, radius and magenta focus).

   Mobile first: the base rules are the phone layout (works at 375px); the media
   queries at the bottom widen it for tablet and desktop.
   ========================================================================== */

.kc-login {
	/* Brand palette (from global.css :root) */
	--kido-magenta: #C4186C;
	--kido-magenta-deep: #A8125B;
	--kido-magenta-deeper: #7E1450;
	--kido-magenta-wash: #FBE2EE;
	--kido-magenta-tint: #FDF1F6;

	--kido-pink: #FF6EB4;
	--kido-pink-soft: #FFE6F1;
	--kido-pink-bright: #F24D9E;

	--kido-maroon: #2B1A20;
	--kido-blush: #F7DCE8;

	--kido-crimson: #8B0038;
	--kido-crimson-soft: #F7DAE4;

	--kido-bg: #FDF8FA;
	--kido-surface: #FFFFFF;
	--kido-surface-2: #F8EEF3;
	--kido-surface-3: #F0E2E9;
	--kido-ink: #2B1A20;
	--kido-ink-2: #5A464E;
	--kido-muted: #8C7B83;
	--kido-border: #F0E2E9;
	--kido-border-strong: #E2CFD8;

	--kido-green: #1F7A4D;
	--kido-green-soft: #E3F3EA;

	--kido-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--kido-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--kido-r-xs: 6px;
	--kido-r-sm: 10px;
	--kido-r-md: 16px;
	--kido-r-lg: 24px;
	--kido-r-pill: 999px;

	--kido-shadow-xs: 0 1px 2px rgba(43, 26, 32, 0.06);
	--kido-shadow-sm: 0 2px 10px rgba(43, 26, 32, 0.08);
	--kido-shadow-md: 0 10px 28px rgba(43, 26, 32, 0.10);
	--kido-shadow-lg: 0 20px 52px rgba(43, 26, 32, 0.14);

	--kido-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kido-t-fast: 0.16s var(--kido-ease);
	--kido-t: 0.26s var(--kido-ease);

	--kido-container: 1240px;
	--kido-gutter: 18px;

	/* A soft blush field, warmed with two faint brand washes. */
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 8% 0%, var(--kido-pink-soft) 0%, transparent 42%),
		radial-gradient(120% 90% at 100% 100%, var(--kido-magenta-wash) 0%, transparent 46%),
		var(--kido-bg);
	padding: 48px 0 64px;
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Decorative petals, soft and blurred, behind the card. Hot pink is the
   brand's signature and only ever decoration, never an action.
   -------------------------------------------------------------------------- */

.kc-login__petal {
	position: absolute;
	border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
	filter: blur(6px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}
.kc-login__petal--1 {
	width: 180px;
	height: 180px;
	top: -40px;
	left: -50px;
	background: radial-gradient(circle at 35% 35%, var(--kido-pink) 0%, var(--kido-pink-soft) 70%);
}
.kc-login__petal--2 {
	width: 240px;
	height: 240px;
	right: -80px;
	bottom: -90px;
	background: radial-gradient(circle at 35% 35%, var(--kido-magenta-wash) 0%, transparent 72%);
	opacity: 0.7;
}

.kc-login__wrap {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.kc-login__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: var(--kido-surface);
	border: 1px solid var(--kido-border);
	border-radius: var(--kido-r-lg);
	box-shadow: var(--kido-shadow-lg);
	padding: 30px 22px 28px;
	overflow: hidden;
}

/* A single brand petal-dot on the top corner, the same motif as the navbar
   logo badge, so the card reads as part of the store. */
.kc-login__dot {
	position: absolute;
	top: -34px;
	right: -34px;
	width: 96px;
	height: 96px;
	border-radius: var(--kido-r-pill);
	background: radial-gradient(circle at 32% 32%, var(--kido-pink) 0%, var(--kido-magenta) 78%);
	opacity: 0.14;
	pointer-events: none;
}

/* Brand ------------------------------------------------------------------- */

.kc-login__brand {
	text-align: center;
	margin-bottom: 22px;
}
.kc-login__logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--kido-magenta);
	margin-bottom: 18px;
}
.kc-login__logo-badge {
	height: 56px;
	width: auto;
	flex: 0 0 auto;
}
.kc-login__logo-badge svg { width: 100%; height: 100%; }
.kc-login__logo-text {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: 22px;
	line-height: 1;
	color: var(--kido-ink);
	letter-spacing: -0.01em;
}
.kc-login__logo-text em { font-style: italic; color: var(--kido-magenta); }

.kc-login__welcome {
	font-family: var(--kido-display);
	font-weight: 900;
	font-size: clamp(26px, 7vw, 32px);
	line-height: 1.1;
	color: var(--kido-ink);
	margin: 0 0 6px;
}
.kc-login__sub {
	margin: 0;
	color: var(--kido-ink-2);
	font-size: 14.5px;
	line-height: 1.5;
}

/* Tabs -------------------------------------------------------------------- */

.kc-login__tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	margin-bottom: 20px;
	background: var(--kido-surface-2);
	border-radius: var(--kido-r-pill);
}
.kc-login__tab {
	position: relative;
	z-index: 1;
	border: none;
	background: transparent;
	padding: 11px 8px;
	border-radius: var(--kido-r-pill);
	font-family: var(--kido-body);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--kido-ink-2);
	cursor: pointer;
	transition: color var(--kido-t-fast);
}
.kc-login__tab[aria-selected="true"] { color: #fff; }
.kc-login__tab-slider {
	position: absolute;
	z-index: 0;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: var(--kido-r-pill);
	background: var(--kido-magenta);
	box-shadow: var(--kido-shadow-sm);
	transition: transform var(--kido-t);
}
.kc-login[data-active="register"] .kc-login__tab-slider { transform: translateX(100%); }

/* Shared inline alert ----------------------------------------------------- */

.kc-login__alert {
	margin-bottom: 16px;
	padding: 12px 15px;
	border-radius: var(--kido-r-sm);
	font-size: 14px;
	line-height: 1.5;
	background: var(--kido-crimson-soft);
	color: var(--kido-crimson);
	border: 1px solid rgba(139, 0, 56, 0.14);
}
.kc-login__alert[data-tone="success"] {
	background: var(--kido-green-soft);
	color: var(--kido-green);
	border-color: rgba(31, 122, 77, 0.16);
}
.kc-login__alert-link {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Forms ------------------------------------------------------------------- */

.kc-login__form[hidden] { display: none; }

.kc-field { margin-bottom: 15px; }
.kc-field-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.kc-field__labelrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.kc-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--kido-ink);
}
.kc-field__wrap { position: relative; }

/* Fields, matched to the checkout page exactly. */
.kc-field input {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	border: 1.5px solid var(--kido-border);
	border-radius: var(--kido-r-sm);
	background: var(--kido-bg);
	font-family: var(--kido-body);
	font-size: 15px;
	color: var(--kido-ink);
	transition: border-color var(--kido-t-fast), box-shadow var(--kido-t-fast), background var(--kido-t-fast);
}
.kc-field__wrap--pw input { padding-right: 50px; }
.kc-field input::placeholder { color: var(--kido-muted); opacity: 1; }
.kc-field input:focus {
	outline: none;
	background: var(--kido-magenta-tint);
	border-color: var(--kido-magenta);
	box-shadow: 0 0 0 3px var(--kido-magenta-wash);
}

/* Invalid field: crimson border and a short reason beneath it. */
.kc-field.is-invalid input {
	border-color: var(--kido-crimson);
	background: var(--kido-crimson-soft);
}
.kc-field.is-invalid input:focus {
	box-shadow: 0 0 0 3px rgba(139, 0, 56, 0.12);
}
.kc-field__error {
	display: block;
	min-height: 0;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--kido-crimson);
}
.kc-field:not(.is-invalid) .kc-field__error { display: none; }

/* Show / hide password eye */
.kc-pw-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--kido-muted);
	border-radius: var(--kido-r-sm);
	cursor: pointer;
	transition: color var(--kido-t-fast), background var(--kido-t-fast);
}
.kc-pw-toggle:hover { color: var(--kido-magenta); background: var(--kido-magenta-wash); }
.kc-pw-toggle__eye-off { display: none; }
.kc-pw-toggle[aria-pressed="true"] { color: var(--kido-magenta); }
.kc-pw-toggle[aria-pressed="true"] .kc-pw-toggle__eye { display: none; }
.kc-pw-toggle[aria-pressed="true"] .kc-pw-toggle__eye-off { display: block; }

/* Remember me + forgot row */
.kc-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 18px;
}

/* Custom checkbox in the brand style */
.kc-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: 14px;
	color: var(--kido-ink-2);
	user-select: none;
}
.kc-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.kc-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 1.5px solid var(--kido-border-strong);
	border-radius: var(--kido-r-xs);
	background: var(--kido-surface);
	color: #fff;
	transition: background var(--kido-t-fast), border-color var(--kido-t-fast);
}
.kc-check__box svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--kido-t-fast); }
.kc-check input:checked + .kc-check__box {
	background: var(--kido-magenta);
	border-color: var(--kido-magenta);
}
.kc-check input:checked + .kc-check__box svg { opacity: 1; }
.kc-check input:focus-visible + .kc-check__box {
	outline: 2px solid var(--kido-magenta);
	outline-offset: 2px;
}

.kc-login__forgot {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--kido-magenta);
}
.kc-login__forgot:hover { color: var(--kido-magenta-deeper); }

/* Submit button (built on the global .kido-btn--primary pill) */
.kc-login__submit {
	position: relative;
	min-height: 54px;
	font-size: 16px;
}
.kc-login__submit.is-loading { color: transparent; pointer-events: none; }
.kc-login__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: kc-login-spin 0.7s linear infinite;
}
.kc-login__submit.is-loading .kc-login__spinner { opacity: 1; }

@keyframes kc-login-spin {
	to { transform: rotate(360deg); }
}

/* Below-form copy */
.kc-login__fineprint {
	margin: 12px 0 0;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--kido-muted);
}
.kc-login__switch {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--kido-ink-2);
}
.kc-login__link {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--kido-magenta);
	cursor: pointer;
}
.kc-login__link:hover { color: var(--kido-magenta-deeper); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive: tablet and up
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
	.kc-login { --kido-gutter: 24px; padding: 64px 0 80px; }
	.kc-login__card { padding: 38px 40px 34px; }
	.kc-field-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.kc-login__welcome { font-size: 32px; }
}