/* ============================================================
   premium.css - Shared UI Components - Subhvaishali Foundation
   Depends on: assets/design-system.css (load first)
   ============================================================ */

/* Reveal animations - tokens from design-system.css */
.reveal       { animation: revealUp    var(--t-reveal, 0.7s) var(--ease-smooth) both; }
.reveal-left  { animation: revealLeft  var(--t-reveal, 0.7s) var(--ease-smooth) both; }
.reveal-right { animation: revealRight var(--t-reveal, 0.7s) var(--ease-smooth) both; }
.reveal.visible,.reveal-left.visible,.reveal-right.visible { animation:none; opacity:1; transform:none; }

/* Alert messages */
.alert-success { background:var(--clr-success-bg,#dcfce7); color:var(--clr-success,#16a34a); padding:14px 18px; border-radius:var(--r-md,12px); font-weight:700; border-left:4px solid var(--clr-success,#16a34a); margin-bottom:18px; animation:slideDown 0.4s var(--ease-smooth) both; }
.alert-error   { background:var(--clr-error-bg,#fee2e2);   color:var(--clr-error,#dc2626);   padding:14px 18px; border-radius:var(--r-md,12px); font-weight:700; border-left:4px solid var(--clr-error,#dc2626);   margin-bottom:18px; animation:slideDown 0.4s var(--ease-smooth) both; }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

/* Input focus - no !important */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--clr-primary, #ff6a00);
  box-shadow: 0 0 0 3px var(--clr-primary-glow, rgba(255,106,0,0.13));
  background: var(--clr-surface, #fff);
}

/* Header */
header.header { position:fixed; top:0; width:100%; background:var(--clr-surface,#fff); padding:10px 0; box-shadow:0 3px 15px rgba(0,0,0,0.08); z-index:var(--z-header,9999); }
.nav-container { max-width:1150px; margin:auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; }
.logo-box { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-img { width:52px; height:52px; object-fit:contain; display:block; }
.logo-text { font-size:22px; font-weight:900; background:var(--grad-primary,linear-gradient(90deg,#ff6a00,#ff9440)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a { padding:7px 12px; border-radius:var(--r-sm,8px); font-weight:600; font-size:var(--text-sm,14px); color:var(--clr-text-2,#444); text-decoration:none; transition:color var(--t-fast) ease,background var(--t-fast) ease; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.nav a:hover { color:var(--clr-primary,#ff6a00); background:var(--clr-primary-bg,rgba(255,106,0,0.06)); }
.nav a.nav-active { color:var(--clr-primary,#ff6a00); font-weight:700; }
.btn-nav { background:var(--grad-primary,linear-gradient(90deg,#ff6a00,#ff9440)); color:#fff !important; padding:8px 18px !important; border-radius:var(--r-full,999px) !important; font-weight:700 !important; box-shadow:var(--shadow-btn); }
.btn-nav:hover { transform:translateY(-1px); }
.account-wrap { position:relative; }
.account-icon-btn { width:38px; height:38px; border-radius:50%; background:var(--grad-primary,linear-gradient(135deg,#ff6a00,#ff9440)); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(255,106,0,0.32); transition:transform var(--t-fast) ease; flex-shrink:0; }
.account-icon-btn:hover { transform:scale(1.08); }
.account-icon-btn .av { color:#fff; font-size:15px; font-weight:900; }
.account-dropdown { position:absolute; top:calc(100% + 10px); right:0; background:var(--clr-surface,#fff); border-radius:var(--r-lg,16px); box-shadow:0 16px 44px rgba(0,0,0,0.14); border:1px solid var(--clr-primary-border); min-width:210px; overflow:hidden; display:none; z-index:var(--z-dropdown,100); animation:dropIn 0.22s ease; }
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.account-wrap.open .account-dropdown { display:block; }
.dd-header { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--clr-primary-bg,#fff4eb); }
.dd-av { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--grad-primary,linear-gradient(135deg,#ff6a00,#ff9440)); color:#fff; font-size:15px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.dd-name { font-size:var(--text-sm,14px); font-weight:800; color:var(--clr-text,#1a1a1a); line-height:1.2; }
.dd-email { font-size:11px; color:var(--clr-muted,#888); margin-top:2px; word-break:break-all; }
.account-dropdown a { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:var(--text-sm,14px); font-weight:600; color:var(--clr-text-2,#333); text-decoration:none; transition:background var(--t-fast) ease,color var(--t-fast) ease; }
.account-dropdown a:hover { background:var(--clr-primary-bg,#fff4eb); color:var(--clr-primary,#ff6a00); }
.dd-divider { height:1px; background:var(--clr-border,#f0e0d0); margin:3px 0; }
.dd-logout { color:var(--clr-error,#dc2626) !important; }
.dd-logout:hover { background:var(--clr-error-bg,#fee2e2) !important; }
.auth-pills { display:flex; align-items:center; gap:6px; }
.auth-pill-login { padding:7px 14px; border-radius:var(--r-full,999px); border:1.5px solid rgba(255,106,0,0.35); color:var(--clr-primary,#ff6a00); font-weight:700; font-size:var(--text-sm,14px); text-decoration:none; transition:background var(--t-fast) ease; min-height:44px; display:inline-flex; align-items:center; }
.auth-pill-login:hover { background:var(--clr-primary-bg,rgba(255,106,0,0.08)); }
.auth-pill-register { padding:7px 14px; border-radius:var(--r-full,999px); background:var(--grad-primary,linear-gradient(90deg,#ff6a00,#ff9440)); color:#fff; font-weight:700; font-size:var(--text-sm,14px); text-decoration:none; transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease; box-shadow:0 4px 12px rgba(255,106,0,0.25); min-height:44px; display:inline-flex; align-items:center; }
.auth-pill-register:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(255,106,0,0.35); }
.menu-icon { display:none; font-size:28px; color:var(--clr-primary,#ff6a00); cursor:pointer; font-weight:900; padding:4px 8px; border-radius:var(--r-sm,8px); transition:background var(--t-fast) ease; min-width:44px; min-height:44px; align-items:center; justify-content:center; touch-action:manipulation; z-index:calc(var(--z-header,9999) + 1); position:relative; }
.menu-icon:hover { background:var(--clr-primary-bg,rgba(255,106,0,0.08)); }

/* Sign In dropdown */
.signin-wrap { position:relative; }
.signin-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--r-full,999px); background:var(--grad-primary,linear-gradient(90deg,#ff6a00,#ff9440)); color:#fff; font-weight:700; font-size:var(--text-sm,14px); border:none; cursor:pointer; box-shadow:0 4px 14px rgba(255,106,0,0.28); transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease; white-space:nowrap; min-height:44px; }
.signin-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,106,0,0.38); }
.signin-dropdown { position:absolute; top:calc(100% + 12px); right:0; width:320px; background:var(--clr-surface,#fff); border-radius:var(--r-xl,20px); box-shadow:0 20px 50px rgba(0,0,0,0.16); border:1px solid var(--clr-primary-border); overflow:hidden; display:none; z-index:var(--z-dropdown,200); animation:dropIn 0.25s ease; }
.signin-wrap.open .signin-dropdown { display:block; }
.sd-tabs { display:flex; border-bottom:2px solid var(--clr-border,#f0e0d0); }
.sd-tab { flex:1; padding:13px; text-align:center; font-size:var(--text-sm,14px); font-weight:700; color:var(--clr-muted,#888); cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color var(--t-fast) ease; }
.sd-tab.active { color:var(--clr-primary,#ff6a00); border-bottom-color:var(--clr-primary,#ff6a00); }
.sd-tab:hover { color:var(--clr-primary,#ff6a00); }
.sd-form { display:none; padding:18px 20px 16px; }
.sd-form.active { display:block; }
.sd-field { margin-bottom:10px; }
.sd-field input { width:100%; padding:11px 13px; border-radius:var(--r-md,10px); border:1.5px solid rgba(255,140,0,0.28); font-size:max(16px,var(--text-sm,13px)); outline:none; background:var(--clr-primary-bg,#fff8f3); font-family:var(--font-base,"Inter",sans-serif); color:var(--clr-text,#1a1a1a); transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease; }
.sd-field input:focus { border-color:var(--clr-primary,#ff6a00); box-shadow:0 0 0 3px var(--clr-primary-glow,rgba(255,106,0,0.10)); background:var(--clr-surface,#fff); }
.sd-field-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sd-submit { width:100%; padding:11px; margin-top:4px; background:var(--grad-primary,linear-gradient(90deg,#ff6a00,#ff9440)); color:#fff; border:none; border-radius:var(--r-md,10px); font-size:var(--text-sm,14px); font-weight:800; cursor:pointer; transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease; box-shadow:0 8px 20px rgba(255,106,0,0.28); min-height:44px; }
.sd-submit:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,106,0,0.38); }
.sd-or { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--clr-muted,#aaa); font-size:12px; }
.sd-or::before,.sd-or::after { content:""; flex:1; height:1px; background:var(--clr-border,#f0e0d0); }
.sd-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:10px; border-radius:var(--r-md,10px); border:1.5px solid #e0e0e0; background:var(--clr-surface,#fff); font-size:var(--text-sm,13px); font-weight:700; color:var(--clr-text-2,#333); text-decoration:none; transition:background var(--t-fast) ease; min-height:44px; }
.sd-google:hover { background:#f8f8f8; border-color:#ccc; }
.sd-switch { text-align:center; font-size:12px; color:var(--clr-muted,#888); margin-top:10px; }
.sd-switch a { color:var(--clr-primary,#ff6a00); font-weight:700; text-decoration:none; }

/* Footer */
.footer { background:var(--clr-primary,#ff6a00); color:#fff; padding:50px 20px 20px; border-top-left-radius:var(--r-2xl,50px); border-top-right-radius:var(--r-2xl,50px); }
.footer-container { max-width:1100px; margin:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.footer h3,.footer h4 { font-weight:800; margin-bottom:12px; }
.footer-about { flex:1; }
.footer-about p { max-width:300px; line-height:1.6; font-size:var(--text-sm,14px); }
.footer-links { display:flex; flex-direction:column; }
.footer-links a { text-decoration:none; color:#fff; margin-bottom:6px; transition:opacity var(--t-fast) ease; font-weight:600; font-size:var(--text-sm,14px); }
.footer-links a:hover { opacity:0.75; }
.footer-contact p { margin-bottom:6px; font-size:var(--text-sm,14px); }
.footer-bottom { text-align:center; margin-top:25px; font-size:var(--text-sm,14px); opacity:0.85; }

/* Mobile nav */
@media(max-width:900px) {
  .menu-icon { display:flex; }
  .nav { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:var(--clr-surface,#fff); display:flex; flex-direction:column; padding:80px 20px 30px; gap:4px; box-shadow:-6px 0 30px rgba(0,0,0,0.12); border-left:3px solid var(--clr-primary,#ff6a00); transition:right 0.35s var(--ease-smooth); z-index:var(--z-nav,9998); overflow-y:auto; }
  .nav.show { right:0; }
  .nav a { padding:12px 16px; border-radius:var(--r-md,10px); font-size:16px; font-weight:700; color:var(--clr-text-2,#333); }
  .btn-nav { margin-top:8px; text-align:center; padding:12px 20px !important; border-radius:var(--r-md,12px) !important; }
  .account-wrap { width:100%; }
  .account-icon-btn { width:100%; height:auto; border-radius:var(--r-md,12px); padding:12px 16px; justify-content:flex-start; gap:12px; background:var(--clr-primary-bg,rgba(255,106,0,0.08)); box-shadow:none; }
  .account-icon-btn::after { content:"My Account"; font-size:16px; font-weight:700; color:var(--clr-primary,#ff6a00); }
  .account-dropdown { position:static; display:block; box-shadow:none; border:none; border-radius:0; background:transparent; padding-left:16px; animation:none; }
  .dd-header { display:none; }
  .account-dropdown a { padding:10px 12px; font-size:15px; border-radius:var(--r-sm,8px); }
  .auth-pills { flex-direction:column; width:100%; gap:8px; margin-top:4px; }
  .auth-pill-login,.auth-pill-register { width:100%; text-align:center; padding:12px 16px; border-radius:var(--r-md,10px); }
  .nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:calc(var(--z-nav,9998) - 1); backdrop-filter:blur(2px); }
  .nav-overlay.show { display:block; }
  .signin-wrap { width:100%; }
  .signin-btn { width:100%; justify-content:center; border-radius:var(--r-md,12px); padding:12px 20px; }
  .signin-dropdown { position:static; width:100%; border-radius:var(--r-md,14px); box-shadow:0 8px 24px rgba(0,0,0,0.10); animation:none; margin-top:8px; }
  .sd-field-row { grid-template-columns:1fr; }
  .footer-container { flex-direction:column; text-align:center; }
  .footer-about p { margin:0 auto; }
  .footer-links { align-items:center; }
  .footer { border-radius:30px 30px 0 0; }
}
@media(min-width:901px) { .nav-overlay { display:none !important; } }

/* Safe area */
@supports (padding: max(0px)) {
  header.header { padding-top: max(10px, env(safe-area-inset-top)); }
  .footer       { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  #svChat       { bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
  #scrollTopBtn { bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); }
}
/* ============================================================
   HERO SLIDER — direction-aware transition classes
   ============================================================ */
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.68s cubic-bezier(0.22,1,0.36,1), transform 0.68s cubic-bezier(0.22,1,0.36,1); pointer-events:none; }
.hero-slide.active { opacity:1; transform:translateX(0) !important; pointer-events:auto; }
.hero-slide.slide-in-right  { transform:translateX(60px);  opacity:0; }
.hero-slide.slide-in-left   { transform:translateX(-60px); opacity:0; }
.hero-slide.slide-out-left  { transform:translateX(-60px); opacity:0; }
.hero-slide.slide-out-right { transform:translateX(60px);  opacity:0; }

/* ============================================================
   ACTIVITY FILTER — animated transitions
   ============================================================ */
.activity-card { transition:opacity 0.35s ease, transform 0.35s ease; }
.activity-card.filter-hide { opacity:0; transform:translateY(16px); pointer-events:none; }
.activity-card.filter-show { opacity:1; transform:translateY(0); }

/* ============================================================
   FORM LOADING — all button variants
   ============================================================ */
.btn-vol.btn-loading, .btn-save.btn-loading, .btn-auth.btn-loading, .send-btn.btn-loading, .btn-submit.btn-loading { position:relative; pointer-events:none; opacity:0.85; }
.btn-vol.btn-loading::after, .btn-save.btn-loading::after, .btn-auth.btn-loading::after, .send-btn.btn-loading::after, .btn-submit.btn-loading::after { content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:btnSpin 0.7s linear infinite; }

/* ============================================================
   PERFORMANCE HINTS
   ============================================================ */
.social-card, .impact-card, .stat-card, .mv-card, .mv-box, .story-card, .news-card, .vol-card, .doc-card, .event-grid-card { will-change:transform; }

/* ============================================================
   VOLUNTEER HERO — responsive
   ============================================================ */
@media (max-width:900px) {
  .volunteer-hero { flex-direction:column !important; text-align:center; }
  .vh-perks { justify-content:center; }
  .vh-img { max-width:300px; margin:0 auto; }
}

/* ============================================================
   PASSWORD TOGGLE — Eye icon show/hide
   ============================================================ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 2;
}
.pw-toggle:hover { color: #ff6a00; }
.pw-toggle svg { width: 18px; height: 18px; pointer-events: none; }

/* ============================================================
   PASSWORD TOGGLE — Eye icon show/hide
   ============================================================ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 2;
}
.pw-toggle:hover { color: #ff6a00; }
.pw-toggle svg { width: 18px; height: 18px; pointer-events: none; }