/* ============================================
   JUNO AURORA HAVEN — DESIGN SYSTEM
   ============================================ */

@font-face{ font-family:'Pangolin'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/pangolin-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/poppins-latin-800-normal.woff2') format('woff2'); }

:root{
  /* Color */
  --blue-900:#16233d;
  --blue-700:#2e4a7d;
  --blue-600:#3a5a94;
  --blue-400:#7c93bd;
  --blue-100:#e8edf6;
  --blue-50:#f5f7fb;

  --amber:#f2a640;
  --amber-dark:#d9871f;
  --coral:#ef7a68;
  --coral-dark:#d95c49;
  --green:#3fa672;
  --green-dark:#2f8059;

  /* Playful accent set — inspired by hand-drawn kids-illustration palette */
  --sun:#ffce4a;
  --sky:#4fb6e8;
  --grass:#6fcb6f;
  --bubblegum:#ff6fa0;
  --violet:#a78bfa;
  --tomato:#ff6a5a;

  /* Pastel tints (for shop card backgrounds etc.) */
  --pastel-sky:#eaf6fc;
  --pastel-grass:#eef9ec;
  --pastel-bubblegum:#fdedf3;
  --pastel-violet:#f3f0fd;
  --pastel-sun:#fff8e6;
  --pastel-tomato:#ffefec;

  --ink:#16233d;
  --muted:#5c6577;
  --muted-soft:#8891a3;
  --line:#e6e9f0;
  --white:#ffffff;

  /* Type */
  --font-display:'Pangolin', cursive;
  --font-body:'Poppins', sans-serif;

  /* Layout */
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm: 0 2px 8px rgba(22,35,61,0.06);
  --shadow: 0 12px 32px rgba(22,35,61,0.10);
  --shadow-lg: 0 24px 60px rgba(22,35,61,0.16);
  --maxw: 1320px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, #16233d 0px, #1e3357 45px, #2c4876 70px, #4a699e 100px, #7d9bc9 135px, #b0c7e6 170px, #dbe6f7 205px, #dbe6f7 900px);
  -webkit-font-smoothing: antialiased;
  font-size:16px;
  line-height:1.55;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--blue-900); font-weight:600; }
button{ font-family:var(--font-body); cursor:pointer; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; box-sizing:border-box; }

/* ---------- Aurora signature wash ---------- */
.aurora-wash{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, #eef2fa 0%, #ffffff 100%);
}
.aurora-wash::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:640px;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(46,74,125,0.30) 0%, rgba(46,74,125,0) 70%),
    radial-gradient(50% 50% at 70% 20%, rgba(242,166,64,0.28) 0%, rgba(242,166,64,0) 70%),
    radial-gradient(45% 55% at 55% 55%, rgba(239,122,104,0.22) 0%, rgba(239,122,104,0) 70%);
  filter: blur(10px);
  pointer-events:none;
}

/* ---------- Full-bleed photo hero with gradient overlay ---------- */
.hero-photo{
  position:relative;
  background-image:url('../assets/hero-playground.jpg');
  background-size:cover;
  background-position:center;
  display:flex; flex-direction:column;
}
.hero-photo .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(22,35,61,0.90) 0%, rgba(46,74,125,0.72) 55%, rgba(46,74,125,0.55) 100%);
}
.hero-photo .hero-content{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top:110px; padding-bottom:90px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border-radius: 999px;
  font-weight:600; font-size:14.5px;
  border:1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue-700); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background:var(--blue-900); }
.btn-amber{ background:var(--amber); color:var(--blue-900); box-shadow: var(--shadow-sm); }
.btn-amber:hover{ background:var(--amber-dark); }
.btn-outline{ background:transparent; border-color:var(--blue-700); color:var(--blue-700); }
.btn-outline:hover{ background:var(--blue-50); }
.btn-outline-white{ background:transparent; border-color:rgba(255,255,255,0.6); color:#fff; }
.btn-ghost{ background:transparent; color:var(--blue-700); padding:10px 14px; }
.btn-sm{ padding:8px 16px; font-size:13px; border-radius:999px; }
.btn-block{ width:100%; }
.btn-danger-outline{ border-color:var(--coral); color:var(--coral-dark); background:transparent; }

/* ---------- Brush-stroke button (image-backed, no pill border) ---------- */
.btn-brush{
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 40px;
  font-weight:700; font-size:15px; color:var(--blue-900);
  background-image:url('../assets/brush-stroke.png');
  background-size:100% 100%; background-repeat:no-repeat;
  border:none; border-radius:0;
}
.btn-brush-light{
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 40px;
  font-weight:700; font-size:15px; color:#ffffff;
  background-image:url('../assets/brush-stroke-outline-white.png');
  background-size:100% 100%; background-repeat:no-repeat;
  border:none; border-radius:0;
}
.btn-brush-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 40px;
  font-weight:700; font-size:15px; color:var(--blue-700);
  background-image:url('../assets/brush-stroke-outline.png');
  background-size:100% 100%; background-repeat:no-repeat;
  border:none; border-radius:0;
}
.btn-brush-outline-white{
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 40px;
  font-weight:700; font-size:15px; color:#ffffff;
  background-image:url('../assets/brush-stroke-outline.png');
  background-size:100% 100%; background-repeat:no-repeat;
  border:none; border-radius:0;
}

/* ---------- Public Nav ---------- */
.pubnav{
  position:static; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.pubnav .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--blue-900); }
.brand .mark{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, var(--blue-700), var(--coral) 70%, var(--amber));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700;
}
.brand .mark-img{ width:38px; height:38px; object-fit:contain; display:block; }

/* ---------- Transparent nav (blends over a hero photo) ----------
   Overlays the hero photo (absolute within .hero-photo, which is
   position:relative) rather than sitting in normal flow, so hero-content
   can be independently centered starting from the very top of the photo.
   Needs .pubnav.pubnav-transparent so this reliably beats the later
   .pubnav{ position:static } base rule in the cascade. */
.pubnav.pubnav-transparent{
  position:absolute; left:0; right:0; z-index:5;
  background:transparent; backdrop-filter:none; border-bottom:none;
}
.pubnav-transparent .brand{ color:#ffffff; }
.pubnav-transparent .navlinks a{ color:rgba(255,255,255,0.82); }
.pubnav-transparent .navlinks a.active, .pubnav-transparent .navlinks a:hover{ color:#ffffff; }
.pubnav-transparent .cart-ico svg{ stroke:#ffffff; }

/* ---------- Blended nav (used on regular content pages, sits on the body gradient) ---------- */
.pubnav-blend{ background:transparent; backdrop-filter:none; border-bottom:none; }
.pubnav-blend .brand{ color:#ffffff; }
.pubnav-blend .navlinks a{ color:rgba(255,255,255,0.82); }
.pubnav-blend .navlinks a.active, .pubnav-blend .navlinks a:hover{ color:#ffffff; }
.pubnav.solid-bg .navlinks a{ color:rgba(255,255,255,0.85); }
.pubnav.solid-bg .navlinks a.active, .pubnav.solid-bg .navlinks a:hover{ color:#ffffff; }
.pubnav.solid-bg .brand{ color:#ffffff; }
.pubnav-blend .cart-ico svg{ stroke:#ffffff !important; }
.pubnav-blend .avatar-chip{ color:#ffffff; }
.pubnav-blend .avatar-chip .avatar-circle{ background:rgba(255,255,255,0.18); color:#ffffff; }
.pubnav-blend .navright > a[style*="muted-soft"]{ color:rgba(255,255,255,0.75) !important; }
.btn-nav-ghost{
  padding:9px 24px; border-radius:999px; border:1.5px solid rgba(255,255,255,0.65);
  color:#ffffff; font-weight:600; font-size:13.5px; background:transparent;
}
.btn-nav-ghost:hover{ background:rgba(255,255,255,0.12); }

/* Breadcrumb sits just under the blended nav, in the gradient's transition zone */
.breadcrumb, .breadcrumb a{ color:rgba(255,255,255,0.8); }
.breadcrumb .current{ color:#ffffff; font-weight:700; }
.navlinks{ display:flex; align-items:center; gap:40px; }
.navlinks a{ font-size:14.5px; font-weight:600; color:var(--muted); transition:color .15s; }
.navlinks a.active, .navlinks a:hover{ color:var(--blue-700); }
.navright{ display:flex; align-items:center; gap:22px; }
.cart-ico{ position:relative; display:flex; }
.cart-badge{
  position:absolute; top:-8px; right:-9px;
  background:var(--coral); color:#fff; font-size:10.5px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.avatar-chip{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--blue-900); }
.avatar-circle{
  width:32px; height:32px; border-radius:50%;
  background:var(--blue-100); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}

/* ---------- Footer ---------- */
.pubfoot{ background:var(--blue-900); color:#cbd5ea; padding:56px 0 28px; margin-top:100px; }
.pubfoot .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.pubfoot h4{ color:#fff; font-family:var(--font-body); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.pubfoot a{ color:#a9b8d6; font-size:14px; line-height:2.1; }
.pubfoot a:hover{ color:#fff; }
.pubfoot .brand{ color:#fff; }
.pubfoot .brand .tag{ color:#a9b8d6; font-size:13.5px; font-family:var(--font-body); font-weight:400; margin-top:10px; max-width:280px; }
.footbottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:40px; padding-top:22px; font-size:12.5px; color:#8ea0c4; display:flex; justify-content:space-between; }

/* ---------- Cards / generic ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-dark); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; }
.badge-green{ background:#e6f5ed; color:var(--green-dark); }
.badge-amber{ background:#fdf1de; color:var(--amber-dark); }
.badge-coral{ background:#fdece9; color:var(--coral-dark); }
.badge-blue{ background:var(--blue-100); color:var(--blue-700); }
.badge-gray{ background:#eef0f4; color:var(--muted); }

.imgph{
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:var(--blue-400); gap:8px;
}
.imgph svg{ width:34px; height:34px; opacity:.7; }
.imgph span{ font-size:11.5px; font-weight:600; color:var(--blue-400); }

/* ---------- Playful doodle placeholder (navy + hand-drawn colour icons) ---------- */
.imgph-playful{
  background: radial-gradient(120% 140% at 20% 15%, #1e3a63 0%, var(--blue-900) 60%);
  border-radius: var(--radius);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.imgph-playful .doodle-caption{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.55);
  letter-spacing:.03em;
}
.imgph-playful .doodle-icon{ position:absolute; }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--blue-900); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-700); }
.field .hint{ font-size:12px; color:var(--muted-soft); margin-top:6px; }
.field input[type="file"]{ padding:8px 10px; cursor:pointer; color:var(--muted); font-size:13.5px; }
.field input[type="file"]::file-selector-button{
  padding:8px 16px; margin-right:12px; border:none; border-radius:999px;
  background:var(--blue-700); color:#fff; font-family:var(--font-body); font-weight:600; font-size:13px;
  cursor:pointer; transition:background .15s;
}
.field input[type="file"]::file-selector-button:hover{ background:var(--blue-900); }

/* ---------- Global form styling ----------
   The rules above only apply inside a .field wrapper div. Several admin
   forms (built before the design system existed) use plain Bootstrap
   markup with no .field wrapper at all — these broader rules catch those
   directly, so every form looks consistent without editing each one by hand. */
form label, .form-label{
  display:block; font-size:13px; font-weight:700; color:var(--blue-900); margin-bottom:7px; margin-top:14px;
}
form label:first-child, .form-label:first-child{ margin-top:0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], select, textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff;
  box-sizing:border-box;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="tel"]:focus,
select:focus, textarea:focus{ border-color:var(--blue-700); }

/* Bootstrap button classes still present in older admin forms — mapped
   onto the real button look instead of rewriting every form's markup */
.btn-outline-secondary, .btn-outline-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px; border-radius:999px; border:1.5px solid var(--blue-700);
  color:var(--blue-700); background:#fff; font-weight:600; font-size:14px;
  text-decoration:none; cursor:pointer;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 24px; border-radius:999px; border:none;
  background:var(--blue-700); color:#fff; font-weight:600; font-size:14px;
  text-decoration:none; cursor:pointer;
}

/* Simple CSS-only tabs — replaces Bootstrap's JS-dependent
   data-bs-toggle="tab", which has no JS behind it anymore since the
   Bootstrap CDN was removed. Uses :target so plain <a href="#tab-x"> links
   work without any JavaScript at all. */
.nav-tabs{ display:flex; gap:6px; list-style:none; padding:0; margin:0 0 -1px; border-bottom:1px solid var(--line); }
.nav-tabs .nav-link{
  display:inline-block; padding:10px 18px; font-size:13.5px; font-weight:600;
  color:var(--muted); background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; text-decoration:none;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover{ color:var(--blue-700); border-bottom-color:var(--blue-700); }
.tab-content .tab-pane{ display:none; }
.tab-content .tab-pane.active, .tab-content .tab-pane.show{ display:block; }

/* ---------- Admin shell ---------- */
.admin-shell{ display:flex; min-height:100vh; background: radial-gradient(130% 100% at 30% -8%, #e9f0fb 0%, #f5f7fb 55%); }
.sidebar{ width:240px; background:var(--blue-900); color:#cbd5ea; flex-shrink:0; display:flex; flex-direction:column; padding:26px 18px; }
.sidebar .brand{ color:#fff; padding:0 10px 30px; font-size:17px; }
.sidebar .brand .mark{ width:32px; height:32px; font-size:16px; }
.sidenav a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:#a9b8d6; margin-bottom:3px;
}
.sidenav a .ico{ width:18px; height:18px; opacity:.85; }
.sidenav a.active{ background:rgba(255,255,255,0.08); color:#fff; }
.sidenav a:hover{ color:#fff; }
.sidebar .logout{ margin-top:auto; padding:11px 14px; font-size:14px; font-weight:600; color:#8ea0c4; display:flex; align-items:center; gap:12px; }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  height:70px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 32px;
}
.admin-topbar h1{ font-size:19px; }
.admin-content{ padding:32px; }

.stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; }
.stat-card .label{ font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.stat-card .value{ font-family:var(--font-display); font-size:36px; color:var(--blue-900); margin-top:8px; }
.stat-card .delta{ font-size:13px; font-weight:700; margin-top:8px; }

.datatable{ width:100%; border-collapse:collapse; background:#fff; }
.datatable th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:19px 22px; border-bottom:1.5px solid var(--line); }
.datatable td{ padding:23px 22px; font-size:15.5px; border-bottom:1px solid var(--line); color:var(--ink); }
.datatable tr:last-child td{ border-bottom:none; }
.datatable tr:hover td{ background:var(--blue-50); }

.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.panel-head{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.panel-head h3{ font-size:18px; }
.panel-body{ padding:34px; }

/* ---------- Section helpers (public pages) ---------- */
.section{ padding:88px 0; }
.section-soft{ background:var(--blue-50); }
.section-head{ max-width:600px; margin-bottom:44px; }
.section-head .eyebrow{ margin-bottom:10px; display:block; }
.section-head h2{ font-size:34px; line-height:1.15; }
.section-head p{ color:var(--muted); font-size:15.5px; margin-top:12px; }

/* ---------- Slim footer (single-viewport pages) ---------- */
.slimfoot{ border-top:1px solid var(--line); padding:14px 0; margin-top:auto; background:rgba(255,255,255,0.7); }
.slimfoot .wrap{ display:flex; align-items:center; justify-content:center; gap:12px; }
.slimfoot .foot-brand{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--blue-900); }
.slimfoot .foot-brand .mark-img{ width:19px; height:19px; }
.slimfoot .foot-divider{ color:var(--line); font-size:13px; }
.slimfoot .foot-sub{ font-size:11.5px; color:var(--muted-soft); }
.slimfoot span{ font-size:12.5px; color:var(--muted-soft); }

.breadcrumb{ font-size:13px; color:var(--muted-soft); display:flex; gap:8px; align-items:center; padding:14px 0 0; }
.breadcrumb a{ color:var(--muted-soft); }
.breadcrumb a:hover{ color:var(--blue-700); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--blue-900); font-weight:600; }

/* ---------- Auth split layout ---------- */
.auth-shell{ display:flex; min-height:100vh; }
.auth-visual{ flex:0 0 42%; background: radial-gradient(120% 140% at 20% 15%, #1e3a63 0%, var(--blue-900) 60%); position:relative; display:flex; align-items:center; justify-content:center; padding:50px; }
.auth-visual .quote{ position:relative; z-index:2; color:#fff; max-width:320px; }
.auth-visual .quote .mark-lg{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, var(--blue-700), var(--coral) 70%, var(--amber)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:26px; }
.auth-visual .quote h3{ color:#fff; font-size:24px; line-height:1.3; }
.auth-visual .quote p{ color:#e4ecf9; font-size:14px; margin-top:14px; }
.auth-form-side{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px; background:#ffffff; }
.auth-box{ width:100%; max-width:380px; }
.auth-box .back{ font-size:13px; font-weight:600; color:var(--muted-soft); display:inline-flex; align-items:center; gap:6px; margin-bottom:30px; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; background:var(--blue-50); padding:5px; border-radius:12px; width:fit-content; }
.tab{ padding:9px 20px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--muted); }
.tab.active{ background:#fff; color:var(--blue-700); box-shadow:var(--shadow-sm); }

/* ---------- Select cards (account type) ---------- */
.select-card{ border:1.5px solid var(--line); border-radius:var(--radius); padding:30px; text-align:left; transition:border-color .15s, transform .15s; cursor:pointer; }
.select-card:hover{ border-color:var(--blue-700); transform:translateY(-2px); }
.select-card .ico-wrap{ width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

/* ---------- Qty stepper ---------- */
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.stepper button{ width:30px; height:30px; border:none; background:#fff; font-size:15px; font-weight:700; color:var(--blue-700); }
.stepper button:hover{ background:var(--blue-50); }
.stepper span{ width:30px; text-align:center; font-size:13.5px; font-weight:700; }

/* ---------- Stock bar ---------- */
.stockbar{ width:90px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.stockbar > div{ height:100%; border-radius:999px; }


/* ==============================================================
   Bootstrap-markup compatibility layer
   Several admin views (beneficiaries, donors, orders, inventory,
   reports) were built using Bootstrap's utility-class conventions
   before the design system existed. Rather than rewrite every one
   of those files — real risk of introducing new bugs on pages that
   already work — these rules give the SAME class names the site's
   actual visual language (colors, radius, shadows, spacing), so
   every admin page reads as one cohesive product instead of two
   different design systems glued together.
   ============================================================== */

/* Cards */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 2px rgba(16,24,40,0.04); }
.card-body{ padding:22px; }
.card.h-100{ height:100%; }

/* Stat / metric cards (Orders & Inventory's dashboard-style cards) */
.metric-card{ background:#fff; }
.metric-label{ font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.metric{ font-family:var(--font-display); font-size:30px; color:var(--blue-900); margin-top:8px; }
.metric-note{ font-size:12.5px; color:var(--muted-soft); margin-top:6px; }
.metric-note.good{ color:var(--green-dark); }

/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:16px 18px; border-bottom:1.5px solid var(--line); }
.table td{ padding:16px 18px; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--line); vertical-align:middle; }
.table-responsive{ overflow-x:auto; }
.align-middle td, .align-middle th{ vertical-align:middle; }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.badge.text-bg-secondary, .badge.bg-secondary{ background:var(--pastel-sky); color:var(--blue-700); }
.badge.text-bg-success, .badge.bg-success{ background:#e6f5ed; color:var(--green-dark); }
.badge.text-bg-warning, .badge.bg-warning{ background:#fdf0dc; color:var(--amber-dark); }
.badge.text-bg-danger, .badge.bg-danger{ background:#fdece9; color:var(--coral-dark); }
.badge.bg-dark{ background:var(--blue-900); color:#fff; }

/* Buttons (Bootstrap variants not already covered) */
.btn-outline-secondary{ border-color:var(--line); color:var(--muted); }
.btn-outline-secondary:hover{ border-color:var(--blue-700); color:var(--blue-700); }
.btn.btn-sm{ padding:7px 16px; font-size:12.5px; }

/* Typography utilities */
.text-muted{ color:var(--muted); }
.text-danger{ color:var(--coral-dark); }
.text-success{ color:var(--green-dark); }
.small{ font-size:13px; }
.fw-semibold{ font-weight:600; }
.fw-normal{ font-weight:400; }
.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font-display); color:var(--blue-900); font-weight:600; margin:0; }
.h1{ font-size:34px; } .h2{ font-size:28px; } .h3{ font-size:25px; } .h4{ font-size:20px; } .h5{ font-size:17px; } .h6{ font-size:16px; }
.fs-3{ font-size:24px; }
.text-decoration-none{ text-decoration:none; }
.text-reset{ color:inherit; }

/* Layout utilities */
.d-flex{ display:flex; }
.d-inline-flex{ display:inline-flex; }
.align-items-center{ align-items:center; }
.justify-content-between{ justify-content:space-between; }
.justify-content-end{ justify-content:flex-end; }
.text-center{ text-align:center; }
.text-end{ text-align:right; }
.w-100{ width:100%; }
.gap-2{ gap:8px; }
.py-4{ padding-top:24px; padding-bottom:24px; }
.py-5{ padding-top:40px; padding-bottom:40px; }
.p-4{ padding:22px; }
.mb-0{ margin-bottom:0; } .mb-1{ margin-bottom:6px; } .mb-3{ margin-bottom:16px; } .mb-4{ margin-bottom:22px; }
.mt-3{ margin-top:16px; }
.rounded-pill{ border-radius:999px; }
.shadow-sm{ box-shadow:0 1px 2px rgba(16,24,40,0.06); }

/* Grid (simplified — Bootstrap's 12-col system mapped to CSS grid) */
.row{ display:flex; flex-wrap:wrap; margin:0 -11px; }
.row.g-3 > *{ padding:0 11px; margin-bottom:22px; }
.row > [class*="col-"]{ padding:0 11px; box-sizing:border-box; }
/* Complete 12-column grid, every breakpoint prefix mapped to the correct
   percentage — the previous version only covered a handful of the classes
   actually used across the admin views, and one of those was wrong (col-4
   was incorrectly given col-lg-3's 25% instead of its own 33.33%). */
.col-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1 { flex:0 0 8.3333%; max-width:8.3333%; }
.col-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2 { flex:0 0 16.6667%; max-width:16.6667%; }
.col-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3 { flex:0 0 25%; max-width:25%; }
.col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 { flex:0 0 33.3333%; max-width:33.3333%; }
.col-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5 { flex:0 0 41.6667%; max-width:41.6667%; }
.col-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6 { flex:0 0 50%; max-width:50%; }
.col-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7 { flex:0 0 58.3333%; max-width:58.3333%; }
.col-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8 { flex:0 0 66.6667%; max-width:66.6667%; }
.col-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9 { flex:0 0 75%; max-width:75%; }
.col-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10 { flex:0 0 83.3333%; max-width:83.3333%; }
.col-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11 { flex:0 0 91.6667%; max-width:91.6667%; }
.col-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 { flex:0 0 100%; max-width:100%; }
@media (max-width: 900px){ .row > [class*="col-"]{ flex:0 0 100%; max-width:100%; } }

/* Forms (Bootstrap's form-control/form-label, distinct from .field) */
.form-label{ display:block; font-size:13px; font-weight:700; color:var(--blue-900); margin-bottom:7px; }
.form-control, .form-select{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff; box-sizing:border-box;
}
.form-control:focus, .form-select:focus{ border-color:var(--blue-700); }
.form-control.is-invalid{ border-color:var(--coral-dark); }
.invalid-feedback{ font-size:12.5px; color:var(--coral-dark); margin-top:4px; }
input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:0.55; transition:opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* Alerts */
.alert{ padding:14px 18px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:18px; }
.alert-danger{ background:#fdece9; color:var(--coral-dark); }
.alert-success{ background:#e6f5ed; color:var(--green-dark); }
.alert-warning{ background:#fdf0dc; color:var(--amber-dark); }

/* ==============================================================
   Unified public nav — floating pill style: inset from the edges,
   rounded, with its own shadow so it reads as a distinct floating
   element rather than a full-width bar.
   ============================================================== */
.pubnav{
  position:static; z-index:100;
  width:100%; max-width:1180px; margin:18px auto 0;
  background:rgba(22,35,61,0.55);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 34px rgba(9,14,26,0.22);
  transition:background 0.25s ease, box-shadow 0.25s ease, top 0.25s ease;
}
.pubnav .wrap{ padding:0 30px; }
.pubnav.scrolled{
  background:rgba(22,35,61,0.85);
  box-shadow:0 14px 40px rgba(9,14,26,0.3);
}
/* Pages with no hero image behind the nav (About, News, Shop, etc.) need a
   background from the moment they load, not just after scrolling, since
   there's no photo for the transparent nav to sit on top of. */
.pubnav.solid-bg{
  background:rgba(22,35,61,0.82);
}
@media (max-width:900px){
  .pubnav{ top:10px; max-width:calc(100% - 20px); border-radius:26px; }
  .pubnav .wrap{ padding:0 18px; }
}

.account-dropdown{ position:relative; }
.account-menu{
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  background:#fff; border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(16,24,40,0.16);
  min-width:180px; overflow:hidden; z-index:200;
}
.account-menu.open{ display:block; }
.account-menu a, .account-menu button{
  display:block; width:100%; text-align:left; padding:12px 16px; font-size:14px;
  color:var(--ink); background:none; border:none; text-decoration:none; cursor:pointer;
  font-family:var(--font-body);
}
.account-menu a:hover, .account-menu button:hover{ background:var(--pastel-sky); }
.account-menu .divider{ border-top:1px solid var(--line); margin:0; }

/* Modals (Bootstrap markup, vanilla JS behavior via nav.js) */
.modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(16,24,40,0.5); align-items:center; justify-content:center;
}
.modal.show{ display:flex; }
.modal-dialog{ width:100%; max-width:480px; margin:20px; }
.modal-content{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
.modal-title{ font-family:var(--font-display); font-size:18px; color:var(--blue-900); margin:0; }
.modal-body{ padding:24px; font-size:14.5px; color:var(--ink); line-height:1.6; }
.modal-footer{ padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.btn-close{
  border:none; background:none; font-size:22px; line-height:1; color:var(--muted-soft); cursor:pointer; padding:0 4px;
}
.btn-close::before{ content:"\00d7"; }

/* Bootstrap grid/typography/color helpers not yet covered */
.rounded-circle{ border-radius:50%; }
.bg-primary{ background:var(--blue-700); }
.text-white{ color:#fff; }
.d-inline-flex{ display:inline-flex; }
.d-grid{ display:grid; }
.gap-2{ gap:8px; }
.btn-outline-warning{ border:1.5px solid var(--amber-dark); color:var(--amber-dark); background:#fff; border-radius:999px; padding:10px 22px; font-weight:600; font-size:14px; cursor:pointer; }
.btn-outline-warning:hover{ background:#fdf0dc; }
dl{ margin:0; }
dl.row dt{ font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; padding:8px 0; }
dl.row dd{ font-size:14.5px; color:var(--ink); padding:8px 0; margin:0; }

/* ==============================================================
   Modern multi-column footer — replaces the old single centered line
   ============================================================== */
.modern-footer{ background:var(--blue-900); margin-top:auto; color:rgba(255,255,255,0.7); position:relative; overflow:hidden; }
.modern-footer .footer-giant-brand{
  text-align:center; margin-top:22px; padding:0 20px 36px;
  font-family:var(--font-display); font-weight:800; font-size:clamp(40px, 10vw, 150px);
  color:rgba(255,255,255,0.1); white-space:nowrap; pointer-events:none;
  letter-spacing:-0.02em; line-height:1;
}
.modern-footer > *{ position:relative; z-index:1; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:52px;
  padding:64px 20px 44px;
}
.footer-brand-col .foot-brand{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:600; font-size:17px; color:#ffffff; margin-bottom:14px;
}
.footer-brand-col .foot-brand .mark-img{ width:24px; height:24px; }
.footer-brand-col p{ font-size:13.5px; line-height:1.7; color:rgba(255,255,255,0.6); max-width:280px; margin-bottom:20px; }
.footer-socials{ display:flex; gap:10px; }
.footer-socials a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.footer-socials a:hover{ background:var(--blue-700); }
.footer-col h4{ font-family:var(--font-display); font-size:14px; color:#ffffff; margin-bottom:16px; font-weight:600; }
.footer-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,0.62); margin-bottom:11px; transition:color .15s; }
.footer-col a:hover{ color:#ffffff; }
.footer-col p{ font-size:13.5px; color:rgba(255,255,255,0.62); margin-bottom:10px; line-height:1.6; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding:22px 20px; }
.footer-bottom .wrap{ display:flex; justify-content:space-between; align-items:center; }
.footer-bottom span{ font-size:12px; color:rgba(255,255,255,0.5); }
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom .wrap{ flex-direction:column; gap:6px; text-align:center; }
}

/* ==============================================================
   Homepage stat cards — glassmorphism with colorful icon badges
   ============================================================== */
.stat-glass-row{ display:flex; gap:20px; margin-top:56px; flex-wrap:wrap; }
.stat-glass-card{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:18px; padding:20px 26px;
  display:flex; align-items:center; gap:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  transition:transform .2s ease, background .2s ease;
}
.stat-glass-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.18); }
.stat-glass-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:22px;
}
.stat-glass-icon.icon-pink{ background:linear-gradient(135deg, #ff9a9e, #fecfef); }
.stat-glass-icon.icon-blue{ background:linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-glass-icon.icon-gold{ background:linear-gradient(135deg, #ffd97a, #ff9a5a); }
.stat-glass-value{ font-family:var(--font-display); font-size:26px; color:#ffffff; line-height:1.1; }
.stat-glass-label{ font-size:12.5px; color:rgba(255,255,255,0.85); font-weight:600; margin-top:2px; }

/* ==============================================================
   About page — split hero, icon value cards, governance band
   ============================================================== */
.about-hero{ background:linear-gradient(180deg, #eef4fb 0%, #dbe6f7 100%); padding:84px 0 56px; }
.about-hero-grid{ display:grid; grid-template-columns:1fr 0.9fr; gap:48px; align-items:center; }
.about-stat-strip{ display:flex; gap:56px; }
.about-stat-num{ font-family:var(--font-display); font-weight:700; font-size:44px; color:var(--blue-900); }
.about-stat-label{ font-size:12px; color:var(--muted-soft); font-weight:600; margin-top:2px; }
.about-hero-image{ border-radius:24px 24px 0 0; overflow:hidden; height:340px; box-shadow:0 20px 50px rgba(22,35,61,0.18); }
.about-hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.about-values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:36px 0 44px; }
.about-value-card{
  background:rgba(255,255,255,0.6); border-radius:18px; padding:30px 26px; border:1px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(16,24,40,0.06); transition:transform .2s ease, box-shadow .2s ease;
}
.about-value-card:hover{ transform:translateY(-5px); box-shadow:0 14px 32px rgba(16,24,40,0.12); }
.about-value-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.about-value-icon.icon-pink{ background:linear-gradient(135deg, #ffd7de, #ffb3c1); }
.about-value-icon.icon-blue{ background:linear-gradient(135deg, #cdeeff, #a3ddff); }
.about-value-icon.icon-gold{ background:linear-gradient(135deg, #ffe8b3, #ffcf80); }
.about-value-card h3{ font-family:var(--font-display); font-size:21px; color:var(--blue-900); margin-bottom:10px; }
.about-value-card p{ font-size:14px; color:var(--muted); line-height:1.7; }

.about-governance-band{
  background:linear-gradient(120deg, var(--blue-900), var(--blue-700));
  border-radius:20px; padding:32px 36px; display:flex; gap:22px; align-items:flex-start;
}
.about-governance-icon{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
@media (max-width:900px){
  .about-hero-grid{ grid-template-columns:1fr; }
  .about-values-grid{ grid-template-columns:1fr; }
  .about-governance-band{ flex-direction:column; }
}

/* ==============================================================
   Admin top nav — replaces the sidebar. Floating pill-style bar
   instead of a generic side panel, to stand out from typical
   admin templates.
   ============================================================== */
.admin-shell-top{ min-height:100vh; background:#f4f7fc; display:flex; flex-direction:column; }
.admin-shell-top{ padding-top:16px; }
.admin-topnav{
  position:sticky; top:16px; z-index:100;
  background:var(--blue-900);
  box-shadow:0 12px 32px rgba(16,24,40,0.22);
  width:calc(100% - 40px); max-width:1180px;
  margin:0 auto;
  border-radius:999px;
}
.admin-topnav-inner{
  max-width:100%; margin:0 auto; padding:0 12px 0 22px;
  display:flex; align-items:center; gap:28px; height:60px;
}
.admin-topnav-brand{
  display:flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:600; font-size:16px; color:#ffffff; flex-shrink:0;
}
.admin-topnav-brand .mark-img{ width:24px; height:24px; }
.admin-topnav-right{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.hamburger-btn{
  background:none; border:1.5px solid rgba(255,255,255,0.3); border-radius:10px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:#ffffff; cursor:pointer; flex-shrink:0; transition:background .15s;
}
.hamburger-btn:hover{ background:rgba(255,255,255,0.1); }
.admin-topnav-links{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  background:var(--blue-900); padding:14px 20px 20px;
  box-shadow:0 16px 32px rgba(0,0,0,0.24);
  max-height:70vh; overflow-y:auto;
  border-radius:24px;
}
.admin-topnav-links.open{ display:flex; }
@media (min-width:900px){
  .admin-topnav-links.open{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 14px; }
}
.admin-topnav-links a{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  padding:12px 14px; border-radius:10px; font-size:14px; font-weight:600;
  color:rgba(255,255,255,0.75); transition:background .15s, color .15s;
}
.admin-topnav-links a .ico{ width:18px; height:18px; flex-shrink:0; }
.admin-topnav-links a:hover{ color:#ffffff; background:rgba(255,255,255,0.08); }
.admin-topnav-links a.active{ color:var(--blue-900); background:#ffffff; }
.admin-topnav-inner{ position:relative; }
.admin-topnav-account{
  width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,0.3);
  background:none; padding:0; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.admin-topnav-account .avatar-circle{
  width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.15);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.admin-topnav .account-menu{ right:0; top:calc(100% + 10px); }

.admin-page-header{
  max-width:1440px; margin:0 auto; width:100%; padding:26px 28px 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.admin-page-header h1{ font-family:var(--font-display); font-size:28px; color:var(--blue-900); margin:0; }
.admin-page-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-main-top{ flex:1; }
.admin-main-top .admin-content{
  max-width:1440px; margin:0 auto; padding:18px 28px 40px;
}
@media (max-width:1100px){
  .admin-topnav-links a{ padding:9px 11px; }
}

/* ==============================================================
   Shared content-page hero band (News, Volunteer, Donate) —
   same gradient treatment as the About page for visual consistency
   ============================================================== */
.content-hero{
  background:linear-gradient(180deg, #eef4fb 0%, #dbe6f7 100%);
  padding:48px 0 40px;
}

/* News grid */
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:36px; }
.news-card{
  background:rgba(255,255,255,0.65); border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 26px rgba(16,24,40,0.08); transition:transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,24,40,0.14); }
.news-card-cover{ height:130px; display:flex; align-items:center; justify-content:center; }
.news-card-body{ padding:22px 24px; }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr; } }

.empty-state-card{
  background:#fff; border-radius:18px; padding:48px; text-align:center;
  border:1px dashed var(--line); margin-top:24px;
}
.empty-state-icon{
  width:64px; height:64px; border-radius:50%; background:var(--pastel-sky, #cdeeff);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.empty-state-card p{ color:var(--muted-soft); font-size:14.5px; }

/* Volunteer page layout */
.volunteer-layout{ display:grid; grid-template-columns:1fr 1.3fr; gap:40px; margin-top:36px; align-items:stretch; }
.volunteer-why{ display:flex; flex-direction:column; gap:26px; }
.volunteer-benefit{
  background:rgba(255,255,255,0.6); border-radius:16px; padding:24px; border:1px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 16px rgba(16,24,40,0.05);
}
.volunteer-form-card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.7) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.6);
}
.volunteer-form-card .panel-body{ display:flex; flex-direction:column; flex:1; }
.volunteer-form-card .field:has(textarea){ display:flex; flex-direction:column; flex:1; }
.volunteer-form-card textarea{ flex:1; height:auto; }
@media (max-width:900px){ .volunteer-layout{ grid-template-columns:1fr; } }

/* Donate page layout */
.donate-layout{ display:grid; grid-template-columns:1fr 1.3fr; gap:48px; margin-top:36px; align-items:start; }

/* ---------- Donation journey — connected timeline, distinct from the
   card-grid pattern used for value/benefit lists elsewhere on the site ---------- */
.donate-journey{ position:relative; }
.donate-journey::before{
  content:""; position:absolute; left:20px; top:24px; bottom:24px; width:2px;
  background:linear-gradient(180deg, #ffb3c1, #a3ddff, #ffcf80);
  opacity:0.6;
}
.donate-journey-item{ position:relative; display:flex; gap:18px; margin-bottom:34px; }
.donate-journey-item:last-child{ margin-bottom:0; }
.donate-journey-marker.about-value-icon{
  position:relative; z-index:1; width:42px; height:42px; margin-bottom:0; flex-shrink:0;
  border-radius:50%; box-shadow:0 0 0 6px #eef4fb;
}
.donate-journey-body{ padding-top:3px; }
.donate-journey-pct{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12.5px;
  color:var(--blue-700); background:rgba(11,110,153,0.08); padding:2px 10px; border-radius:999px; margin-bottom:7px;
}
.donate-journey-body strong{ display:block; font-size:14.5px; color:var(--blue-900); margin-bottom:4px; }
.donate-journey-body p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; }

.donate-card{
  background:rgba(255,255,255,0.7) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.6);
}
@media (max-width:900px){ .donate-layout{ grid-template-columns:1fr; } }

/* Shop hero banner — sits within the shared layout's content area */
.shop-hero-banner{
  background:linear-gradient(120deg, #eef4fb, #dbe6f7);
  border-radius:20px; padding:28px 32px; margin-top:22px;
  display:flex; justify-content:space-between; align-items:center;
}
.shop-hero-icon{
  width:64px; height:64px; border-radius:16px; background:rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ==============================================================
   Homepage sections — About summary, Get Involved, Latest News
   ============================================================== */
.home-about-summary{ background:#fff; padding:64px 0; }
.home-about-grid{ display:grid; grid-template-columns:0.9fr 1fr; gap:52px; align-items:center; }
.home-about-image{ border-radius:20px; overflow:hidden; height:320px; box-shadow:0 16px 40px rgba(22,35,61,0.12); }
.home-about-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.home-getinvolved{ background:linear-gradient(180deg, #eef4fb, #dbe6f7); padding:70px 0; }
.getinvolved-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.getinvolved-card{
  position:relative; border-radius:22px; overflow:hidden; text-decoration:none; color:inherit;
  min-height:340px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  box-shadow:0 10px 30px rgba(16,24,40,0.12); transition:transform .25s ease, box-shadow .25s ease;
}
.getinvolved-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,35,61,0.15) 0%, rgba(22,35,61,0.75) 100%);
}
.getinvolved-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(16,24,40,0.2); }
/* The middle card sits slightly taller, as a natural visual anchor */
.getinvolved-card-middle{ min-height:380px; margin-top:-20px; }
.getinvolved-glass{
  position:relative; z-index:1; width:100%; padding:26px 24px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,0.18);
}
.getinvolved-glass h3{ font-family:var(--font-display); font-size:23px; color:#ffffff; margin-bottom:8px; }
.getinvolved-glass p{ font-size:13.5px; color:rgba(255,255,255,0.85); line-height:1.6; margin-bottom:18px; }

.home-latest-news{ background:linear-gradient(160deg, #f4f7fc 0%, #e4ecf9 50%, #f4f7fc 100%); padding:64px 0 72px; }

@media (max-width:900px){
  .home-about-grid{ grid-template-columns:1fr; }
  .getinvolved-grid{ grid-template-columns:1fr; }
  .getinvolved-card-middle{ margin-top:0; }
}

/* Live password strength checklist */
.pw-checklist{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:4px; }
.pw-checklist li{
  font-size:12.5px; color:var(--muted-soft); padding-left:20px; position:relative; transition:color .15s;
}
.pw-checklist li::before{
  content:"○"; position:absolute; left:0; font-size:11px; top:1px;
}
.pw-checklist li.met{ color:#2f8059; }
.pw-checklist li.met::before{ content:"✓"; color:#2f8059; font-weight:700; }

/* Payment result pages — glass card floating on the gradient hero */
.payment-result-card{
  background:rgba(255,255,255,0.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.6); border-radius:24px; padding:48px 40px;
  box-shadow:0 20px 50px rgba(16,24,40,0.12);
}

/* Admin dashboard — colorful icon accents on stat cards, tying it into
   the same visual language used across the public site. */
.stat-card-icon{ position:relative; padding-top:20px; }
.stat-card-icon-badge{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.stat-card-icon-badge.icon-pink{ background:linear-gradient(135deg, #ffd7de, #ffb3c1); }
.stat-card-icon-badge.icon-blue{ background:linear-gradient(135deg, #cdeeff, #a3ddff); }
.stat-card-icon-badge.icon-gold{ background:linear-gradient(135deg, #ffe8b3, #ffcf80); }

.admin-shell-top{ background:linear-gradient(160deg, #f4f7fc 0%, #eef2fa 45%, #f4f7fc 100%); min-height:100vh; }

/* Shop product cards — hover lift + soft shadow, matching the polish
   used on Get Involved / About value cards elsewhere on the site. */
.shop-product-card{
  border-radius:20px !important; box-shadow:0 6px 22px rgba(16,24,40,0.07);
  transition:transform .22s ease, box-shadow .22s ease;
}
.shop-product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(16,24,40,0.14); }
.shop-product-card img{ transition:transform .3s ease; }

/* ---------- Back-to-top button (public pages) ---------- */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:200;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--blue-900); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(22,35,61,0.28);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--blue-700); }
@media (max-width:600px){
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}
.shop-product-card:hover img{ transform:scale(1.04); }

/* ---------- Accessibility: visible keyboard focus everywhere ---------- */
:focus-visible{ outline:3px solid #ffb703; outline-offset:2px; border-radius:4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:3px solid #ffb703; outline-offset:2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid #ffb703; outline-offset:1px; border-color:var(--blue-700); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-700); box-shadow:0 0 0 3px rgba(46,74,125,.18); }
.skip-link{ position:absolute; left:-999px; top:8px; background:#fff; color:#16233d; padding:10px 16px; border-radius:8px; z-index:9999; font-weight:700; }
.skip-link:focus{ left:8px; }

/* ---------- Admin shell on small screens (no overflow) ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width:640px){
  .admin-topnav-inner{ padding-left:12px; padding-right:12px; gap:8px; }
  .admin-topnav-brand{ font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .admin-topnav-links.open{ grid-template-columns:1fr 1fr !important; }
  .admin-page-actions{ flex-wrap:wrap; }
  .panel, .card{ max-width:100%; }
  .table-responsive, .panel-body{ overflow-x:auto; }
  .jh-formgrid, form [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
}

/* Shop + product grids: collapse on small screens */
@media (max-width:900px){ .jh-shopgrid{ grid-template-columns:repeat(2,1fr) !important; gap:18px !important; } }
@media (max-width:560px){ .jh-shopgrid{ grid-template-columns:1fr !important; } }
@media (max-width:820px){ .jh-stack{ grid-template-columns:1fr !important; gap:26px !important; } }
@media (max-width:640px){ .jh-shopgrid{ margin-left:14px; margin-right:14px; } }