/* ==========================================================================
   AI Padhai Auth — Maximalist UI (v2.0.0)
   Design rules: rich gradients, layered soft shadows, decorative blobs,
   playful bold type, saturated accent colors, generous rounded corners,
   confetti-style flourishes. Page background stays transparent — all the
   decoration lives on the form card itself.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
	--aip-ink:#241436;
	--aip-purple:#7C3AED;
	--aip-purple-dark:#5B21B6;
	--aip-pink:#FB6F92;
	--aip-orange:#FF9F45;
	--aip-yellow:#FFD23F;
	--aip-green:#2DD4A7;
	--aip-blue:#4C8DFF;
	--aip-red:#FF5768;
	--aip-white:#ffffff;
	--aip-cream:#FFF9F0;
	--aip-font-display:'Fredoka',sans-serif;
	--aip-font-body:'Poppins',sans-serif;
}

.aipadhai-auth-wrapper{
	background:transparent !important;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	padding:clamp(16px, 4vw, 40px) clamp(10px, 3vw, 16px);
	box-sizing:border-box;
	font-family:var(--aip-font-body);
	position:relative;
}

/* ---------------- The card itself: this is where all the maximalism lives ---------------- */

.aipadhai-brutal-card{
	width:100%;
	max-width:540px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255,210,63,0.35), transparent 45%),
		radial-gradient(circle at 0% 100%, rgba(76,141,255,0.25), transparent 45%),
		var(--aip-white);
	border:3px solid var(--aip-ink);
	border-radius:32px;
	box-shadow:
		0 2px 0 var(--aip-ink),
		0 14px 0 -4px rgba(124,58,237,0.18),
		0 24px 48px -12px rgba(36,20,54,0.35),
		10px 10px 0 var(--aip-yellow),
		18px 18px 0 var(--aip-pink);
	padding:clamp(24px, 4vw, 40px) clamp(18px, 4vw, 34px);
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
	margin:0 6px;
	transition:max-width .2s ease;
}

/* Forms with many fields (registration / forced profile-completion /
   profile settings) get a wider card and a 2-column field grid on tablet
   and desktop, while staying single-column and full-width on mobile. */
@media (min-width:760px){
	.aipadhai-brutal-card:has([data-step="3"]),
	.aipadhai-brutal-card:has([data-step="complete-profile"]),
	.aipadhai-brutal-card:has([data-step="profile-settings"]){
		max-width:760px;
	}
	.aipadhai-step[data-step="3"],
	.aipadhai-step[data-step="complete-profile"],
	.aipadhai-step[data-step="profile-settings"]{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:24px;
		align-items:start;
	}
	.aipadhai-step[data-step="3"] > .aipadhai-title,
	.aipadhai-step[data-step="3"] > .aipadhai-sub,
	.aipadhai-step[data-step="3"] > button,
	.aipadhai-step[data-step="3"] > .aip-error,
	.aipadhai-step[data-step="complete-profile"] > .aipadhai-title,
	.aipadhai-step[data-step="complete-profile"] > .aipadhai-sub,
	.aipadhai-step[data-step="complete-profile"] > button,
	.aipadhai-step[data-step="complete-profile"] > .aip-error,
	.aipadhai-step[data-step="profile-settings"] > .aipadhai-title,
	.aipadhai-step[data-step="profile-settings"] > .aipadhai-sub,
	.aipadhai-step[data-step="profile-settings"] > button,
	.aipadhai-step[data-step="profile-settings"] > .aip-error,
	.aipadhai-step[data-step="profile-settings"] > .aip-success,
	.aipadhai-step[data-step="profile-settings"] > .aip-divider,
	.aipadhai-step[data-step="profile-settings"] > .aip-profile-actions{
		grid-column:1 / -1;
	}
}

/* decorative top stripe */
.aipadhai-brutal-card::before{
	content:"";
	position:absolute;
	top:0; left:0; right:0;
	height:10px;
	background:linear-gradient(90deg,var(--aip-purple),var(--aip-pink),var(--aip-orange),var(--aip-yellow),var(--aip-green),var(--aip-blue));
	background-size:200% 100%;
	animation:aip-gradient-slide 6s linear infinite;
}
/* decorative blob */
.aipadhai-brutal-card::after{
	content:"✦";
	position:absolute;
	top:22px; right:26px;
	font-size:34px;
	color:var(--aip-yellow);
	text-shadow:2px 2px 0 var(--aip-ink);
	transform:rotate(12deg);
	pointer-events:none;
}

@keyframes aip-gradient-slide{
	0%{background-position:0% 0%;}
	100%{background-position:200% 0%;}
}

.aipadhai-brutal-card--narrow{ max-width:440px; }

/* Delete-account OTP step: still no card background here, but with a
   playful dashed-confetti border instead of flat brutalist lines */
.aipadhai-brutal-card--transparent{
	background:transparent;
	border:none;
	box-shadow:none;
	padding:0;
	border-radius:0;
}
.aipadhai-brutal-card--transparent::before,
.aipadhai-brutal-card--transparent::after{ display:none; }
.aipadhai-brutal-card--transparent .aipadhai-step{
	background:var(--aip-white);
	border:3px solid var(--aip-ink);
	border-radius:28px;
	box-shadow:8px 8px 0 var(--aip-purple), 14px 14px 0 -2px rgba(124,58,237,0.15);
	padding:36px 30px;
	margin-bottom:28px;
	position:relative;
}
.aipadhai-brutal-card--transparent .aipadhai-step--no-bg{
	background:repeating-linear-gradient(135deg, rgba(124,58,237,0.06) 0 14px, transparent 14px 28px) !important;
	border:3px dashed var(--aip-purple);
	box-shadow:none;
	border-radius:28px;
}

/* ---------------- Typography ---------------- */

.aipadhai-title{
	font-family:var(--aip-font-display);
	font-size:clamp(22px, 4.2vw, 32px);
	font-weight:700;
	letter-spacing:-0.5px;
	margin:0 0 10px 0;
	line-height:1.15;
	background:linear-gradient(90deg,var(--aip-purple),var(--aip-pink));
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:var(--aip-ink);
}
.aip-danger-title{
	background:linear-gradient(90deg,var(--aip-red),var(--aip-orange));
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}

.aipadhai-sub{
	font-size:15.5px;
	line-height:1.6;
	color:#4b3b63;
	margin:0 0 24px 0;
	font-weight:500;
}
.aipadhai-sub a{ color:var(--aip-purple); font-weight:700; text-decoration:underline; text-decoration-color:var(--aip-pink); }

.aipadhai-msg{ font-size:16px; font-weight:600; padding:24px; color:var(--aip-ink); }

/* ---------------- Fields ---------------- */

.aipadhai-field{
	margin-bottom:20px;
	display:flex;
	flex-direction:column;
}

.aipadhai-field label{
	font-family:var(--aip-font-display);
	font-size:13.5px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.5px;
	margin-bottom:8px;
	color:var(--aip-purple-dark);
	display:flex;
	align-items:center;
	gap:8px;
}

.aipadhai-field input[type="text"],
.aipadhai-field input[type="email"],
.aipadhai-field input[type="tel"],
.aipadhai-field input[type="date"],
.aipadhai-field select{
	font-family:var(--aip-font-body);
	font-size:16px;
	font-weight:600;
	color:var(--aip-ink);
	background:var(--aip-cream);
	border:2.5px solid #E4D9F5;
	padding:14px 16px;
	height:54px;
	line-height:1.3;
	box-sizing:border-box;
	width:100%;
	border-radius:16px;
	appearance:none;
	-webkit-appearance:none;
	outline:none;
	box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 #E4D9F5;
	transition:all .18s ease;
}

/* Dropdown fix: ensure selected text is fully visible (height/padding) */
.aipadhai-field select{
	padding-right:44px;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M0 0l7 8 7-8z' fill='%237C3AED'/></svg>");
	background-repeat:no-repeat;
	background-position:right 18px center;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.aipadhai-field select option{
	font-size:15px;
	padding:10px;
}

.aipadhai-field input:focus,
.aipadhai-field select:focus{
	background:var(--aip-white);
	border-color:var(--aip-purple);
	box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 0 0 4px rgba(124,58,237,0.18), 0 3px 0 var(--aip-purple);
	transform:translateY(-1px);
}

.aipadhai-field input:disabled,
.aipadhai-field select:disabled{
	background:#F1EDF7;
	color:#9c8fb0;
	cursor:not-allowed;
	box-shadow:none;
}

.aip-phone-wrap{
	display:flex;
	align-items:stretch;
	border:2.5px solid #E4D9F5;
	border-radius:16px;
	box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 3px 0 #E4D9F5;
	background:var(--aip-cream);
	overflow:hidden;
}
.aip-phone-prefix{
	display:flex;
	align-items:center;
	padding:0 16px;
	font-weight:700;
	font-family:var(--aip-font-display);
	background:linear-gradient(135deg,var(--aip-yellow),var(--aip-orange));
	color:var(--aip-ink);
	font-size:16px;
}
.aip-phone-wrap input{
	border:none !important;
	box-shadow:none !important;
	border-radius:0 !important;
	height:50px;
	background:transparent !important;
}

.aip-age-display{
	margin-top:8px;
	font-size:13px;
	font-weight:700;
	color:var(--aip-white);
	background:linear-gradient(135deg,var(--aip-blue),var(--aip-purple));
	display:inline-block;
	padding:4px 12px;
	border-radius:20px;
}

.aip-lock-badge{
	background:linear-gradient(135deg,var(--aip-red),var(--aip-orange));
	color:var(--aip-white);
	font-size:10px;
	padding:3px 10px;
	border-radius:20px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.aip-lock-hint{
	font-size:12.5px;
	color:#6b5c85;
	margin:8px 0 0 0;
	font-weight:600;
	background:#F6F0FF;
	border-left:4px solid var(--aip-purple);
	padding:8px 12px;
	border-radius:0 12px 12px 0;
}
.aip-lock-hint a{ color:var(--aip-purple); text-decoration:underline; }

/* ---------------- Buttons ---------------- */

.aip-btn{
	display:inline-block;
	width:100%;
	text-align:center;
	font-family:var(--aip-font-display);
	font-size:16px;
	font-weight:600;
	letter-spacing:0.3px;
	padding:17px 22px;
	border:none;
	border-radius:18px;
	color:var(--aip-white);
	cursor:pointer;
	box-sizing:border-box;
	margin-top:8px;
	transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
	text-decoration:none;
	position:relative;
}
.aip-btn:hover{ transform:translateY(-3px) scale(1.01); filter:brightness(1.06); }
.aip-btn:active{ transform:translateY(0) scale(0.99); }

.aip-btn-primary{
	background:linear-gradient(135deg,var(--aip-green),#17B890);
	box-shadow:0 6px 0 #159874, 0 14px 24px -8px rgba(23,184,144,0.55);
}
.aip-btn-danger{
	background:linear-gradient(135deg,var(--aip-red),#D6304A);
	box-shadow:0 6px 0 #B1233A, 0 14px 24px -8px rgba(214,48,74,0.5);
}
.aip-btn-ghost{
	background:var(--aip-white);
	color:var(--aip-purple-dark);
	border:2.5px solid #E4D9F5;
	box-shadow:0 6px 0 #E4D9F5;
}
.aip-btn-ghost:hover{ border-color:var(--aip-purple); }

.aip-btn[disabled]{ opacity:0.5; cursor:not-allowed; box-shadow:none; transform:none; }

.aip-btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.aip-btn-row .aip-btn{ flex:1 1 140px; }

.aip-profile-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.aip-profile-actions .aip-btn{ flex:1 1 160px; }

/* ---------------- OR divider ---------------- */

.aip-or-divider{
	display:flex;
	align-items:center;
	text-align:center;
	margin:28px 0;
	font-family:var(--aip-font-display);
	font-size:12.5px;
	font-weight:600;
	letter-spacing:1.5px;
	color:var(--aip-purple-dark);
}
.aip-or-divider::before,
.aip-or-divider::after{
	content:"";
	flex:1;
	height:2px;
	background:linear-gradient(90deg,transparent,#E4D9F5,#E4D9F5);
}
.aip-or-divider::after{ background:linear-gradient(90deg,#E4D9F5,#E4D9F5,transparent); }
.aip-or-divider span{
	padding:6px 18px;
	background:linear-gradient(135deg,var(--aip-yellow),var(--aip-orange));
	border-radius:20px;
	box-shadow:0 3px 0 #E08A1F;
	color:var(--aip-ink);
}

.aip-google-btn-wrap{
	display:flex;
	justify-content:center;
	border:2.5px solid #E4D9F5;
	border-radius:18px;
	box-shadow:0 4px 0 #E4D9F5;
	padding:16px;
	background:var(--aip-cream);
	margin-bottom:18px;
}

.aip-google-loading{
	font-size:13.5px;
	font-weight:700;
	color:var(--aip-purple-dark);
	margin-bottom:10px;
}

/* ---------------- Feedback ---------------- */

.aip-error{
	margin-top:16px;
	font-size:13.5px;
	font-weight:700;
	color:var(--aip-red);
	min-height:0;
}
.aip-success{
	margin-top:16px;
	font-size:13.5px;
	font-weight:700;
	color:#0E7A54;
	background:linear-gradient(135deg,#E4FFF6,#D3FCEC);
	border:2.5px solid #2DD4A7;
	border-radius:14px;
	padding:12px 16px;
	display:none;
}
.aip-success.aip-visible{ display:block; }

.aip-divider{
	height:6px;
	background:linear-gradient(90deg,var(--aip-purple),var(--aip-pink),var(--aip-orange),var(--aip-yellow));
	border-radius:6px;
	margin:30px 0;
	opacity:0.85;
}

/* ---------------- Misc ---------------- */

.aip-field-error input,
.aip-field-error select{
	border-color:var(--aip-red) !important;
	box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 0 0 4px rgba(255,87,104,0.15), 0 3px 0 var(--aip-red) !important;
}

.aip-spinner{
	display:inline-block;
	width:16px;height:16px;
	border:3px solid var(--aip-white);
	border-top-color:transparent;
	border-radius:50%;
	animation:aip-spin .7s linear infinite;
	vertical-align:middle;
	margin-right:8px;
}
@keyframes aip-spin{ to{ transform:rotate(360deg); } }

/* ---------------- Responsive ---------------- */

/* Large desktop: give multi-field forms a touch more breathing room */
@media (min-width:1200px){
	.aipadhai-brutal-card:has([data-step="3"]),
	.aipadhai-brutal-card:has([data-step="complete-profile"]),
	.aipadhai-brutal-card:has([data-step="profile-settings"]){
		max-width:820px;
	}
}

/* Tablet: single column still reads better than a cramped 2-column grid
   at this width, but forms get more horizontal room than mobile */
@media (min-width:600px) and (max-width:900px){
	.aipadhai-brutal-card{ max-width:600px; }
	.aip-btn-row .aip-btn{ flex:1 1 auto; }
}

/* Mobile phones */
@media (max-width:600px){
	.aipadhai-auth-wrapper{ padding:16px 8px; }
	.aipadhai-brutal-card{
		padding:24px 18px;
		border-radius:22px;
		box-shadow:
			0 2px 0 var(--aip-ink),
			6px 6px 0 var(--aip-yellow),
			11px 11px 0 var(--aip-pink);
		margin:0 2px;
		max-width:100%;
	}
	.aipadhai-brutal-card::after{ font-size:24px; top:14px; right:16px; }
	.aip-btn{ font-size:15px; padding:15px 18px; }
	.aip-btn-row{ flex-direction:column; }
	.aip-profile-actions{ flex-direction:column; }
	.aipadhai-field input,
	.aipadhai-field select{ height:50px; font-size:16px; } /* 16px avoids iOS zoom-on-focus */
}

/* Very small phones */
@media (max-width:360px){
	.aipadhai-brutal-card{ padding:20px 14px; border-radius:18px; }
	.aip-or-divider span{ padding:5px 12px; font-size:11px; }
}