/* --------- Global type & layout --------- */
body{
	font-size:var(--fs-1);
	line-height:1.5;
	padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); /* fixed nav offset */
}

/* --------- Navbar --------- */
.earn-nav{
	background:var(--surface);					/* THEME: nav bg */
	min-height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
	padding-top:env(safe-area-inset-top,0px);
	border-bottom-left-radius:var(--radius-cta);
	border-bottom-right-radius:var(--radius-cta);
}
.earn-nav .navbar-brand,
.earn-nav .nav-link{
	color:#fff;
}
.earn-nav .nav-link:hover,
.earn-nav .nav-link:focus{
	color:#f0f0f0;
}

/* Account icon button (right side) */
.btn-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	border:none;
	padding:.25rem;
	color:var(--fg-on-surface);					/* THEME: text on nav */
}
.btn-icon:hover{
	background:var(--accent-hover);				/* THEME: hover tint */
	border-radius:50%;
}
.btn-icon i{
	color:var(--fg-on-surface);					/* THEME: icon on nav */
}

/* --------- Buttons --------- */
.btn,
.btn-sm,
.btn-lg{
	border-radius:var(--radius-cta);
}
.btn{
	min-height:var(--tap);
	padding:0 var(--sp-4);
	font-size:var(--fs-1);
}
.btn-sm{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:calc(var(--tap) - .5rem);
	padding:0 var(--sp-3);
}

/* Primary button mapped to theme accent tokens */
.btn.btn-primary{
	--bs-btn-bg: var(--accent);					/* THEME */
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-bg: var(--accent-hover);
	--bs-btn-hover-border-color: var(--accent-hover);
	--bs-btn-active-bg: var(--accent-active);
	--bs-btn-active-border-color: var(--accent-active);
	color:#fff;
}
/* Thin white outline per design */
.btn-primary{
	outline:1px solid #fff;
	outline-offset:-2px;
}
.btn-primary:focus{
	box-shadow:0 0 0 .25rem rgba(255,255,255,.25); /* neutral ring on dark */
}

/* --------- Cards --------- */
.earn-card a.stretched-link{ position:static; } /* make full card clickable */
.earn-card{
	position:relative;
	border:0;
	border-radius:var(--radius-cta);
	overflow:hidden;
	box-shadow:0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	cursor:pointer;
	transition:transform 0.05s ease-in-out;
	/* THEME: gradient stops map to current palette */
	background:
		radial-gradient(140% 50% at var(--light-x) var(--light-y),
			rgba(255,255,255,var(--heading-band-alpha)) 0%,
			rgba(255,255,255,0) 38%),
		radial-gradient(120% 90% at 14% 0%,
			var(--grad-top) 0%,
			var(--grad-mid) 36%,
			var(--grad-deep) 100%);
}
.earn-card:hover{
	transform: translateY(-2px);
}
/* Subtle inner highlight */
.earn-card::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 35%);
	pointer-events:none;
}
/* Text on dark surface */
.earn-card .card-body{ color:var(--fg-on-surface); }	/* THEME */
.earn-card .text-muted{ color:var(--fg-muted)!important; } /* THEME */

/* Priority variations */
.earn-card.is-secondary{ --heading-band-alpha: var(--heading-band-alpha-secondary); }

/* Focus affordance (keyboard) */
.earn-card:focus-within{
	outline:2px solid rgba(255,255,255,.25);
	outline-offset:2px;
	border-radius:var(--radius-cta);
}

/* --------- Motion/accessibility --------- */
:root{ --ease: cubic-bezier(.2,.8,.2,1); --dur:150ms; }
*[data-anim]{ transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce){
	*[data-anim], .earn-card, .btn{ transition:none !important; }
}

/* --------- Color token usage map (docs) ---------
--surface ............. Nav background
--accent / hover / active ... Primary buttons + icon hover
--grad-top / mid / deep ...... Card backgrounds (gradient)
--fg-on-surface .............. Card/nav text + icons
--fg-muted ................... Secondary text on cards
--------------------------------------------------- */

/* =========================================================
   Curved surfaces + curved form fields (non-breaking)
   -----------------------------------------------------
   .surface-card  -> apply app radius to white cards
   .form-curved   -> curve inputs/selects/textarea + themed focus
   ========================================================= */

.surface-card{
	border-radius: var(--radius-cta);
	overflow: hidden; /* ensure children respect curvature */
}

/* Scope curvature to forms using this class */
.form-curved .form-control,
.form-curved .form-select,
.form-curved input[type="text"],
.form-curved input[type="email"],
.form-curved input[type="tel"],
.form-curved input[type="password"],
.form-curved input[type="number"],
.form-curved select,
.form-curved textarea{
	border-radius: var(--radius-cta);
}

/* Keep white surface + subtle border for inputs on white cards */
.form-curved .form-control,
.form-curved .form-select,
.form-curved input,
.form-curved select,
.form-curved textarea{
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.12);
}

/* Theme-aligned focus ring */
.form-curved .form-control:focus,
.form-curved .form-select:focus,
.form-curved input:focus,
.form-curved select:focus,
.form-curved textarea:focus{
	border-color: var(--accent-hover);
	box-shadow: 0 0 0 .2rem rgba(53,55,76,.15); /* subtle ring from accent family */
	outline: 0;
}

/* Ensure buttons in curved forms keep the shared radius */
.form-curved .btn{
	border-radius: var(--radius-cta);
}

/* EarnPlus Interest Toggle Buttons */
.btn-check + .btn-interest {
	display: inline-flex;
	align-items: center;       /* Centers text vertically */
	justify-content: center;   /* Centers text horizontally */
	padding: 0.5rem 1rem;       /* Balanced padding */
	font-size: 0.9rem;          /* Slightly smaller for tags */
	font-weight: 500;
	color: var(--accent);             /* Bootstrap primary tone */
	background-color: var(--brand-50);  /* Light neutral background */
	border: 1px solid var(--brand-50);  /* Primary border */
	border-radius: 20px;        /* Pill style for tags */
	transition: all 0.15s ease-in-out;
	cursor: pointer;
}

/* Hover state */
.btn-check + .btn-interest:hover {
	background-color: var(--surface-soft);  /* Subtle blue tint on hover */
}

/* Checked/Active state */
.btn-check:checked + .btn-interest {
	background-color: var(--accent);  /* Primary background */
	color: var(--fg-on-surface);                /* White text */
	box-shadow: none;
}

/* Focus outline */
.btn-check:focus + .btn-interest {
	outline: 2px solid var(--accent-hover);
	outline-offset: 2px;
}

/* Payout Bank/EFT form toggle */
#payout_eft:checked + label + .toggle-bank { display: block !important; }

.verify-btn {
    background: none;
    border: none;
    color: #212438;
    /* font-size: 14px; */
    padding: 0;
    margin: 0;
    /* text-decoration: underline; */
    cursor: pointer;
}
.verify-btn:hover {
    text-decoration: none;
}