/* Hype Quick Login — styled with the HYPE design system tokens from rey-child/style.css */

.hql-wrap{
	max-width:440px;
	margin:clamp(24px, 4vw, 48px) auto;
	padding:clamp(24px, 3vw, 40px);
	background:var(--bg, #FFFFFF);
	border:1px solid var(--border, rgba(0,0,0,0.06));
	border-radius:var(--radius-card, 12px);
	box-shadow:var(--shadow-card, 0 4px 24px rgba(0,0,0,0.08));
	font-family:var(--font-body, 'Inter', -apple-system, sans-serif);
	color:var(--text, #1a1a2e);
}

.hql-heading{
	font-family:var(--font-display, 'Plus Jakarta Sans', -apple-system, sans-serif);
	color:var(--navy, #0B1D2E);
	font-weight:700;
	margin:0 0 20px;
	line-height:1.2;
}

.hql-label{
	display:block;
	font-family:var(--font-body, 'Inter', sans-serif);
	font-size:14px;
	font-weight:600;
	color:var(--navy, #0B1D2E);
	margin-bottom:8px;
}

.hql-input{
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:14px 16px;
	font-family:var(--font-body, 'Inter', sans-serif);
	font-size:16px;
	color:var(--text, #1a1a2e);
	background:var(--bg, #FFFFFF);
	border:1px solid var(--border-input, rgba(0,0,0,0.12));
	border-radius:var(--radius-card, 12px);
	transition:border-color .18s ease, box-shadow .18s ease;
}
.hql-input::placeholder{ color:var(--text-light, #6a6a7a); }
.hql-input:hover{ border-color:var(--border-accent, rgba(59,181,232,0.3)); }
.hql-input:focus{
	outline:none;
	border-color:var(--blue, #3BB5E8);
	box-shadow:0 0 0 3px rgba(59,181,232,0.18);
}

.hql-help{
	margin:10px 0 0;
	font-size:13px;
	line-height:1.5;
	color:var(--text-light, #6a6a7a);
}

/* Primary CTA — visual styling lives on the theme's .cta class.
   We only set layout details specific to this form. */
.hql-btn.cta{
	width:100%;
	margin-top:16px;
}
.hql-btn:disabled{
	opacity:.55;
	cursor:not-allowed;
}

/* Sent confirmation line */
.hql-sent{
	margin:0 0 18px;
	padding:12px 14px;
	font-size:14px;
	line-height:1.5;
	color:var(--navy, #0B1D2E);
	background:var(--blue-tint, #edf8fc);
	border:1px solid var(--border-blue-tint, rgba(59,181,232,0.1));
	border-radius:var(--radius-card, 12px);
}
.hql-sent strong{ color:var(--blue-text, #1A8FBA); }

/* 6-digit slot row */
.hql-slots{
	display:grid;
	grid-template-columns:repeat(var(--hql-slots, 6), 1fr);
	gap:clamp(6px, 1.5vw, 10px);
	margin:6px 0 4px;
}
.hql-slot{
	width:100%;
	aspect-ratio:1 / 1.15;
	box-sizing:border-box;
	text-align:center;
	font-family:var(--font-display, 'Plus Jakarta Sans', sans-serif);
	font-size:clamp(22px, 4vw, 28px);
	font-weight:700;
	font-variant-numeric:tabular-nums;
	color:var(--navy, #0B1D2E);
	background:var(--cream, #FDFAF5);
	border:1.5px solid var(--border-input, rgba(0,0,0,0.12));
	border-radius:var(--radius-card, 12px);
	caret-color:var(--blue, #3BB5E8);
	transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .15s ease;
}
.hql-slot:hover{ border-color:var(--border-accent, rgba(59,181,232,0.3)); }
.hql-slot:focus{
	outline:none;
	background:#fff;
	border-color:var(--blue, #3BB5E8);
	box-shadow:0 0 0 3px rgba(59,181,232,0.20);
}
.hql-slot.is-filled{
	background:#fff;
	border-color:var(--blue-dark, #2A8BB5);
}
.hql-wrap.is-error .hql-slot{
	border-color:var(--red-soft, #e74c3c);
	background:var(--error-bg, #fef2f2);
	animation:hql-shake .35s ease;
}
@keyframes hql-shake{
	0%,100%{ transform:translateX(0); }
	25%{ transform:translateX(-4px); }
	50%{ transform:translateX(4px); }
	75%{ transform:translateX(-2px); }
}

.hql-slots-label{ margin-top:4px; }

.hql-message{
	min-height:1.25em;
	margin:12px 0 0;
	font-size:13px;
	line-height:1.5;
	color:var(--text-sec, #4a4a5a);
}
.hql-message.hql-error{ color:var(--error-dark, #b91c1c); }
.hql-message.hql-success{ color:var(--success-dark, #1a7a42); }
.hql-message.hql-info{ color:var(--text-sec, #4a4a5a); }

.hql-row{
	display:flex;
	justify-content:space-between;
	gap:12px;
	margin-top:16px;
	flex-wrap:wrap;
}
.hql-link{
	background:none;
	border:0;
	padding:0;
	font-family:var(--font-body, 'Inter', sans-serif);
	font-size:13px;
	font-weight:600;
	color:var(--blue-text, #1A8FBA);
	cursor:pointer;
	text-decoration:none;
}
.hql-link:hover{ text-decoration:underline; }
.hql-link:disabled{ color:var(--text-light, #6a6a7a); cursor:not-allowed; text-decoration:none; }

.hql-loggedin{ text-align:center; }

/* Social login row */
.hql-social{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:0 0 4px;
}
.hql-social-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	box-sizing:border-box;
	padding:12px 16px;
	font-family:var(--font-body, 'Inter', sans-serif);
	font-size:15px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	border-radius:var(--radius-card, 12px);
	border:1px solid var(--border-input, rgba(0,0,0,0.12));
	background:#fff;
	color:var(--navy, #0B1D2E);
	transition:border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.hql-social-btn:hover{
	border-color:var(--border-accent, rgba(59,181,232,0.4));
	box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.hql-social-btn:active{ transform:translateY(1px); }
.hql-social-icon{ flex:0 0 auto; }
.hql-social-facebook{ /* Use brand color subtly via icon; keep button neutral for legibility */ }
.hql-social-google{ }
.hql-social-tiktok{ }

.hql-divider{
	display:flex;
	align-items:center;
	gap:12px;
	margin:18px 0 8px;
	color:var(--text-light, #6a6a7a);
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:0.08em;
}
.hql-divider::before,
.hql-divider::after{
	content:"";
	flex:1;
	height:1px;
	background:var(--border, rgba(0,0,0,0.08));
}

/* Hide social row + divider once user is entering the OTP code */
.hql-wrap.hql-code-active .hql-social,
.hql-wrap.hql-code-active .hql-divider{
	display:none;
}

@media (max-width: 380px){
	.hql-slot{ font-size:22px; }
	.hql-slots{ gap:6px; }
}