/* =========================================================================
   Handaran — My Account page custom CSS.

   Loaded ONLY on the standalone My Account page (rendered by
   inc/account/class-hnd-account.php). This file customises the shared home
   header (template-parts/hnd-navbar.php) for the account context WITHOUT
   editing that template — so the home page and every other page are
   unaffected. Add any account-page-only tweaks here.

   "Hidden" here means display:none — the element takes up no space and the
   layout closes around it, but it stays in the markup (not removed/dead).
   ========================================================================= */

/* =========================================================================
   LOGIN / REGISTER UI — new tabbed design
   All rules scoped under #hnd-account-root to match account.css conventions.
   ========================================================================= */

/* ── Brand mark ── */
#hnd-account-root .hnd-login-brand {
	display: flex; flex-direction: column; align-items: center;
	gap: 0.5rem; padding: 0.25rem 0 0.25rem; margin-bottom: 0.5rem;
}
#hnd-account-root .hnd-login-brand-icon {
	width: 3rem; height: 3rem; border-radius: 0.875rem; flex-shrink: 0;
	background: linear-gradient(135deg, rgba(232,162,60,.18), rgba(196,104,42,.1));
	border: 1.5px solid rgba(232,162,60,.32);
	display: flex; align-items: center; justify-content: center;
	color: #E8A23C; font-size: 1.15rem;
}
#hnd-account-root .hnd-login-brand-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.25rem; font-weight: 700;
	background: linear-gradient(135deg, #E8A23C, #FDF4E3 50%, #C4682A);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Tab switcher inside login card ── */
#hnd-account-root .hnd-login-tabs {
	display: grid; grid-template-columns: 1fr 1fr;
	margin: 0 0 0.125rem;
	background: rgba(255,248,235,.045);
	border: 1px solid rgba(232,162,60,.12);
	border-radius: 0.875rem; padding: 0.275rem; gap: 0.25rem;
}
#hnd-account-root .hnd-login-tab {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.4rem;
	padding: 0.55rem 0.5rem;
	border-radius: 0.625rem; border: none;
	background: none;
	font-family: 'Inter','Inter Fallback', sans-serif;
	font-size: 0.8rem; font-weight: 700;
	color: rgba(253,244,227,.38);
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	white-space: nowrap; min-height: 40px;
}
#hnd-account-root .hnd-login-tab:hover:not(.is-active) { color: rgba(253,244,227,.7); }
#hnd-account-root .hnd-login-tab.is-active {
	background: linear-gradient(135deg, #E8A23C, #C4682A);
	color: #2C1A0E;
	box-shadow: 0 4px 16px rgba(232,162,60,.38);
}

/* ── Panels ── */
#hnd-account-root .hnd-login-panels { padding-top: 0.125rem; }
#hnd-account-root .hnd-login-panel { display: none; }
#hnd-account-root .hnd-login-panel.is-active { display: block; }

/* ── Panel header ── */
#hnd-account-root .hnd-login-hdr { margin-bottom: 1.125rem; }
#hnd-account-root .hnd-login-hdr h1 { font-size: 1.5rem; margin-bottom: 0.3rem; }
#hnd-account-root .hnd-login-sub {
	font-size: 0.825rem; color: rgba(253,244,227,.45); margin: 0; line-height: 1.6;
}

/* ── Input with leading icon ── */
#hnd-account-root .hnd-input-icon-wrap { position: relative; }
#hnd-account-root .hnd-input-icon {
	position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
	color: rgba(232,162,60,.4); pointer-events: none; font-size: 0.875rem;
	transition: color 0.25s;
}
#hnd-account-root .hnd-input-icon-wrap:focus-within .hnd-input-icon { color: rgba(232,162,60,.8); }
#hnd-account-root .hnd-input--has-icon { padding-left: 2.625rem; }

/* ── Notice banners ── */
#hnd-account-root .hnd-notice {
	display: flex; align-items: flex-start; gap: 0.55rem;
	padding: 0.75rem 1rem; border-radius: 0.75rem;
	font-size: 0.8125rem; font-weight: 600; line-height: 1.55;
	margin-bottom: 1rem;
}
#hnd-account-root .hnd-notice--error {
	background: rgba(248,113,113,.07); border: 1px solid rgba(248,113,113,.28);
	color: #f87171;
}
#hnd-account-root .hnd-notice--success {
	background: rgba(74,222,128,.07); border: 1px solid rgba(74,222,128,.25);
	color: #4ade80;
}
#hnd-account-root .hnd-notice svg { flex-shrink: 0; margin-top: 0.1rem; font-size: 0.875rem; }

/* ── Remember me + lost password row ── */
#hnd-account-root .hnd-check-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.125rem;
}
#hnd-account-root .hnd-check-label {
	display: inline-flex; align-items: center; gap: 0.5rem;
	cursor: pointer; -webkit-user-select: none; user-select: none;
}
#hnd-account-root .hnd-check-input {
	position: absolute; opacity: 0; width: 0; height: 0;
}
#hnd-account-root .hnd-check-box {
	width: 1.1rem; height: 1.1rem; border-radius: 0.3rem; flex-shrink: 0;
	border: 1.5px solid rgba(232,162,60,.25);
	background: rgba(255,248,235,.04);
	display: flex; align-items: center; justify-content: center;
	transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#hnd-account-root .hnd-check-input:checked + .hnd-check-box {
	background: linear-gradient(135deg, #E8A23C, #C4682A);
	border-color: transparent;
	box-shadow: 0 3px 10px rgba(232,162,60,.35);
}
#hnd-account-root .hnd-check-tick { color: #2C1A0E; display: none; }
#hnd-account-root .hnd-check-input:checked + .hnd-check-box .hnd-check-tick { display: block; }
#hnd-account-root .hnd-check-input:focus-visible + .hnd-check-box {
	outline: 2px solid rgba(232,162,60,.6); outline-offset: 2px;
}
#hnd-account-root .hnd-check-text {
	font-size: 0.8rem; font-weight: 500; color: rgba(253,244,227,.5);
}
#hnd-account-root .hnd-lost-pass {
	font-size: 0.8rem; font-weight: 600; color: rgba(232,162,60,.6);
	text-decoration: none; white-space: nowrap;
	transition: color 0.2s;
}
#hnd-account-root .hnd-lost-pass:hover { color: #E8A23C; }

/* ── Submit button full-width override for login ── */
#hnd-account-root .hnd-login-submit { width: 100%; justify-content: center; }

/* ── Switch prompt ── */
#hnd-account-root .hnd-login-switch {
	text-align: center; margin-top: 1rem;
	font-size: 0.8125rem; color: rgba(253,244,227,.35);
}
#hnd-account-root .hnd-login-switch button {
	background: none; border: none; cursor: pointer;
	font-family: 'Inter','Inter Fallback', sans-serif;
	font-size: 0.8125rem; font-weight: 700;
	color: rgba(232,162,60,.75); transition: color 0.2s;
	padding: 0;
}
#hnd-account-root .hnd-login-switch button:hover { color: #E8A23C; }

/* ── Benefit chips ── */
#hnd-account-root .hnd-benefits {
	display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.125rem;
}
#hnd-account-root .hnd-benefit {
	display: inline-flex; align-items: center; gap: 0.35rem;
	background: rgba(255,248,235,.04); border: 1px solid rgba(232,162,60,.12);
	border-radius: 9999px; padding: 0.3rem 0.7rem;
	font-size: 0.72rem; font-weight: 600; color: rgba(253,244,227,.5);
}
#hnd-account-root .hnd-benefit svg { color: #E8A23C; font-size: 0.625rem; }

/* ── Info box (auto-password mode) ── */
#hnd-account-root .hnd-info-box {
	display: flex; align-items: flex-start; gap: 0.6rem;
	background: rgba(232,162,60,.06); border: 1px solid rgba(232,162,60,.14);
	border-radius: 0.75rem; padding: 0.875rem 1rem;
	font-size: 0.8rem; color: rgba(253,244,227,.55); line-height: 1.65;
	margin-bottom: 1rem;
}

/* ── Privacy note ── */
#hnd-account-root .hnd-privacy-note {
	font-size: 0.72rem; color: rgba(253,244,227,.28); margin-bottom: 0.125rem; line-height: 1.55;
}
#hnd-account-root .hnd-privacy-note a {
	color: rgba(232,162,60,.5); font-weight: 600; text-decoration: none;
}
#hnd-account-root .hnd-privacy-note a:hover { color: rgba(232,162,60,.8); }

/* ── Spinner keyframe ── */
@keyframes hndSpin { to { transform: rotate(360deg); } }

/* ── Login card padding tweak ── */
#hnd-account-root .hnd-login { padding: 2rem 2rem 1.75rem; }

/* ── Responsive: tighten on small screens ── */
@media (max-width: 479px) {
	#hnd-account-root .hnd-login { padding: 1.5rem 1.25rem 1.5rem; }
	#hnd-account-root .hnd-login-tab span,
	#hnd-account-root .hnd-login-tab svg { font-size: 0.75rem; }
}

/* --- Account icon: redundant here (you're already on the account page). --- */
#navbar .nav-account-btn { display: none !important; }

/* --- Cart icon: hidden entirely on the account page. --- */
#navbar button[aria-label="Open cart"] { display: none !important; }

/* --- "Order Now": on mobile (hamburger active, below the md breakpoint) keep
       it ONLY inside the hamburger menu. The top-bar button is hidden there
       but remains on desktop. The hamburger's own button uses a different
       onclick, so this exact-match selector never touches it. --- */
@media (max-width: 767px) {
	#navbar button[onclick="openOrderModal()"] { display: none !important; }
}