/* Compact header + hero spacing tweaks */
.topbar .nav-wrap{
  padding:14px 0;
  gap:20px;
}

.nav-shell,
.nav-shell-inner{
  gap:24px;
}

.hero::before{
  height:420px;
  inset:-20% -36% auto -36%;
}

.hero-motif{
  right:-120px;
  top:-100px;
  width:360px;
  height:360px;
}

.hero{
  padding:78px 0 64px;
}

.hero .wrap{
  padding:24px 0;
}

.hero-grid{
  gap:40px;
  align-items:center;
}

.hero-logo{
  width:150px;
  margin-bottom:12px;
}

.hero-title{
  font-size:54px;
  margin-bottom:18px;
}

.hero-actions{
  gap:12px;
  margin-bottom:18px;
}

.hero-note{
  margin-bottom:18px;
}

.hero-meta{
  gap:12px;
}

.hero-chip{
  padding:12px 16px;
  min-width:160px;
}

.hero-quotes{
  padding:32px 28px;
  gap:24px;
}

.quick-shortcuts{
  display:grid;
  gap:18px;
}

.quick-shortcut{
  position:relative;
  padding:20px 22px;
  border-radius:24px;
  border:1px solid rgba(19,36,29,.08);
  background:linear-gradient(160deg,rgba(243,249,246,.96),rgba(227,242,235,.88));
  box-shadow:0 22px 46px rgba(12,32,24,.12);
  overflow:hidden;
}

.quick-shortcut::before{
  content:"";
  position:absolute;
  inset:-40% auto auto -20%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(42,165,104,.16),transparent 68%);
  pointer-events:none;
}

.quick-shortcut-eid{
  background:linear-gradient(160deg,rgba(238,246,255,.96),rgba(224,239,250,.86));
  border-color:rgba(41,93,166,.18);
  box-shadow:0 26px 54px rgba(22,52,88,.14);
}

.quick-shortcut-eid::before{
  background:radial-gradient(circle,rgba(54,120,192,.18),transparent 68%);
}

.quick-shortcut-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent-strong);
  margin-bottom:14px;
}

.quick-shortcut-eid .quick-shortcut-label{
  color:#1e5296;
}

.quick-shortcut-note{
  margin:0 0 16px;
  font-size:13px;
  color:var(--muted);
  max-width:420px;
}

.quick-shortcut .chips{
  gap:10px;
}

.quick-shortcut .chip{
  background:rgba(255,255,255,.94);
  border-color:rgba(19,36,29,.12);
  font-weight:600;
  padding:10px 18px;
  box-shadow:none;
  transition:transform .16s ease, box-shadow .18s ease, border-color .16s ease, background .16s ease;
}

.quick-shortcut .chip:hover,
.quick-shortcut .chip:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(42,165,104,.32);
  box-shadow:0 16px 32px rgba(12,32,24,.16);
}

.quick-shortcut-eid .chip{
  border-color:rgba(37,86,156,.18);
  box-shadow:none;
}

.quick-shortcut-eid .chip:hover,
.quick-shortcut-eid .chip:focus-visible{
  border-color:rgba(37,86,156,.32);
  box-shadow:0 18px 36px rgba(22,52,88,.2);
}

.quick-shortcut .chip.is-active{
  background:linear-gradient(120deg,var(--accent-strong),var(--accent));
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 18px 32px rgba(42,165,104,.24);
}

.quick-shortcut-eid .chip.is-active{
  background:linear-gradient(120deg,#3d6fc7,#63b3ff);
  border-color:#3d6fc7;
  box-shadow:0 20px 36px rgba(27,68,140,.28);
}

.night-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
  justify-content:flex-end;
}

.night-action-group{
  display:grid;
  gap:10px;
  min-width:180px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(19,36,29,.08);
  border-radius:18px;
  padding:12px 16px;
  box-shadow:0 18px 32px rgba(12,32,24,.12);
}

.night-action-group:first-child{
  background:linear-gradient(135deg,rgba(42,165,104,.12),rgba(42,165,104,.26));
  border-color:rgba(42,165,104,.32);
  box-shadow:0 20px 40px rgba(24,78,52,.18);
}

.night-action-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--muted);
}

.night-action-group:first-child .night-action-label{
  color:var(--accent-strong);
}

.chip-ghost{
  background:transparent;
  border-color:rgba(19,36,29,.18);
  color:var(--muted);
}

.chip-ghost:hover,
.chip-ghost:focus-visible{
  border-color:rgba(208,66,66,.45);
  color:#b32b2b;
  box-shadow:0 16px 32px rgba(120,36,36,.12);
}

@media (max-width:960px){
  .menu-toggle,
  .nav-shell,
  .nav-actions,
  .theme-toggle{
    display:none!important;
  }
  .nav-list a[href*="review.php"]{
    display:none!important;
  }
  .hero::before{
    height:340px;
  }
  .hero-motif{
    display:none;
  }
  .hero{
    padding:64px 0 52px;
  }
  .hero-grid{
    gap:32px;
    grid-template-columns:1fr;
  }
  .hero-text{
    max-width:none;
  }
  .hero-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:16px;
  }
  .hero-actions .btn-outline{
    display:none!important;
  }
  .hero-actions .btn{
    width:100%;
  }
  .hero-meta{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    gap:10px;
  }
  .hero-chip{
    width:100%;
    justify-content:flex-start;
  }
  .card{
    padding:22px;
  }
  .selection-grid{
    gap:22px;
  }
  .quick-shortcut{
    padding:18px 18px;
  }
  .quick-shortcut::before{
    width:180px;
    height:180px;
  }
  .quick-shortcut-note{
    font-size:12px;
  }
  .quick-shortcut .chips{
    justify-content:flex-start;
  }
  .quick-shortcut .chip{
    flex:1 1 calc(50% - 8px);
    justify-content:center;
  }
  .quick-shortcut .chip:nth-child(odd){
    margin-right:0;
  }
  .night-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .night-action-group{
    min-width:0;
  }
  .quick-stats{
    gap:14px;
    grid-template-columns:1fr;
  }
  .quick-stat{
    padding:16px 18px;
    flex-direction:row;
    align-items:center;
  }
  .quick-stat-icon{
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .quick-stat strong{
    font-size:22px;
  }
  .quick-stat .label{
    font-size:15px;
    color:var(--ink-soft);
    display:block;
    margin-bottom:2px;
  }
  .quick-stats::after{
    content:"Tap a stat to scroll";
    display:block;
    margin-top:6px;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(19,36,29,.38);
  }
  .quick-stat{
    position:relative;
  }
  .quick-stat::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 14px 32px rgba(12,32,24,.16);
    opacity:0;
    transition:opacity .2s ease;
  }
  .quick-stat:hover::after{
    opacity:1;
  }
  .quick-stat:hover{
    transform:translateY(-1px);
  }
  .quick-stat[data-action]{
    cursor:pointer;
  }
  .summary-bottom-card{
    display:none;
  }
}

@media (max-width:720px){
  .topbar .nav-wrap{
    justify-content:flex-start;
    padding:12px 0;
  }
  .hero{
    padding:52px 0 40px;
  }
  .hero .wrap{
    padding:18px 0;
  }
  .hero-title{
    font-size:42px;
  }
  .lead{
    font-size:18px;
    margin-bottom:16px;
  }
  .hero-chip{
    padding:11px 16px;
  }
  .brand{
    margin:0;
  }
}

@media (max-width:540px){
  .topbar .nav-wrap{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .brand img{
    width:100px;
  }
  .hero{
    padding:44px 0 32px;
  }
  .hero-title{
    font-size:36px;
  }
  .lead{
    font-size:17px;
  }
  .quick-shortcut{
    padding:16px;
  }
  .quick-shortcut .chip{
    flex:1 1 100%;
  }
  .quick-shortcut .chips{
    gap:8px;
  }
  .hero-meta{
    gap:8px;
  }
  .hero-chip{
    padding:10px 14px;
  }
}

/*
 * Payment form enhancements
 *
 * The Stripe Card Element is injected into a container with the class
 * `.card-field`.  Apply a subtle border, padding and background so it
 * blends in with the rest of the form controls.  Error messages within
 * #card-errors are styled inline via payment.js but can be further
 * customised here if desired.
 */
.card-field {
  padding: 12px 14px;
  border: 1px solid rgba(19,36,29,0.15);
  border-radius: 6px;
  background-color: var(--input-bg, #fff);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  min-height: 44px;
  display: block;
  width: 100%;
  position: relative;
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-field:focus-within,
.card-field.StripeElement--focus {
  border-color: var(--accent, #2aa568);
  box-shadow: 0 0 0 3px rgba(42, 165, 104, 0.1);
  outline: none;
}

/* Mobile-specific card field styling */
@media (max-width: 768px) {
  .card-field {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 16px 18px !important;
    border-width: 2px;
    border-color: rgba(19,36,29,0.25);
    background-color: #ffffff;
    -webkit-tap-highlight-color: rgba(42, 165, 104, 0.2);
  }
  
  .card-field:active,
  .card-field:focus-within {
    border-color: var(--accent, #2aa568);
    background-color: #ffffff;
  }
  
  /* Ensure the Stripe iframe inside has proper height */
  .card-field iframe {
    min-height: 20px !important;
  }
}

#card-errors {
  color: #b00020;
  font-size: 0.875rem;
  margin-top: 4px;
}

/*
 * Dark theme tune‑ups
 * Goal: reduce harsh gradients, improve contrast and legibility,
 * and make panels feel lighter while keeping the brand green.
 * These override the base dark styles in styles.css and only adjust
 * tokens and a few key components.
 */
html[data-theme="dark"]{
  /* Slightly lift surfaces and soften background tint */
  --bg:#0a0f0c;            /* base page background */
  --surface:#0f1915;       /* cards */
  --surface-alt:#13231d;   /* alt cards */
  --surface-tint:#12281f;  /* subtle tints */
  --ink:#f0f5f2;           /* primary text - brighter */
  --ink-soft:#d0dcd6;      /* secondary text - lighter */
  --muted:#9fb5ac;         /* captions - brighter */
  --panel-border:rgba(190,255,225,.18);
  --panel-border-strong:rgba(190,255,225,.28);
  --shadow-sm:0 8px 20px rgba(0,0,0,.42);
  --shadow-lg:0 24px 56px rgba(0,0,0,.55);
}

/* De‑glow hero/selection backgrounds for a calmer look */
html[data-theme="dark"] .hero{
  background:linear-gradient(160deg, var(--surface), var(--surface-alt));
}
html[data-theme="dark"] .hero::before{
  background:radial-gradient(1200px 420px at 80% -10%, rgba(42,165,104,.22), transparent 70%);
}
html[data-theme="dark"] .selection-section{
  background:linear-gradient(145deg, var(--bg), #080d0a 60%);
}
html[data-theme="dark"] .selection-section::before{
  background:radial-gradient(500px 320px at 20% 0, rgba(42,165,104,.26), transparent 72%);
}

/* Panels/cards: remove heavy glossy gradients */
html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .hero-banner,
html[data-theme="dark"] .night-card,
html[data-theme="dark"] .prayers-card,
html[data-theme="dark"] .review-card{
  background:linear-gradient(180deg, rgba(18,30,25,.98), rgba(14,25,21,.96));
  border:1px solid var(--panel-border);
  box-shadow:var(--shadow-sm);
}

html[data-theme="dark"] .hero-banner{
  color:var(--ink);
  font-weight:500;
}
html[data-theme="dark"] .hero-banner .muted{
  color:var(--muted);
}

/* Night board and day pills */
html[data-theme="dark"] .night-board{
  background:linear-gradient(180deg, rgba(16,32,26,.98), rgba(12,26,22,.96));
  border:1px solid var(--panel-border);
  box-shadow:0 12px 28px rgba(0,0,0,.48);
}

html[data-theme="dark"] .night-pill{
  background:rgba(45, 50, 48, 0.75);
  border:1.5px solid rgba(200,210,205,.38);
  color:#222;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  transition:all .2s ease;
  font-weight:500;
}
html[data-theme="dark"] .night-pill-odd{
  background:rgba(50, 56, 70, 0.75);
  border-color:rgba(160, 180, 220, 0.38);
}
html[data-theme="dark"] .night-pill:hover{
  border-color:rgba(200,210,205,.58);
  background:rgba(55, 62, 58, 0.85);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transform:translateY(-1px);
}
html[data-theme="dark"] .night-pill-odd:hover{
  border-color:rgba(160, 180, 220, 0.58);
  background:rgba(62, 72, 85, 0.85);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transform:translateY(-1px);
}
html[data-theme="dark"] .night-pill.is-selected{
  border-color:rgba(130, 220, 255, 1);
  background:rgba(110, 180, 240, 0.7);
  box-shadow:0 8px 20px rgba(100, 200, 255, 0.48);
  color:#fff;
  font-weight:600;
}
html[data-theme="dark"] .night-pill-odd.is-selected{
  border-color:rgba(130, 220, 255, 1);
  background:rgba(110, 180, 240, 0.7);
  box-shadow:0 8px 20px rgba(100, 200, 255, 0.48);
  color:#fff;
  font-weight:600;
}

/* Prayer pills and review totals readability */
html[data-theme="dark"] .prayer-pill{
  background:linear-gradient(180deg, rgba(20,35,28,.96), rgba(16,30,24,.94));
  border:1px solid var(--panel-border);
  color:var(--ink);
  box-shadow:0 8px 18px rgba(0,0,0,.38);
  transition:all .2s ease;
}
html[data-theme="dark"] .prayer-pill:hover{
  border-color:var(--panel-border-strong);
  box-shadow:0 12px 26px rgba(0,0,0,.44);
  transform:translateY(-2px);
}
html[data-theme="dark"] .prayer-pill.is-selected{
  border-color:rgba(86,228,160,.72);
  background:linear-gradient(180deg, rgba(22,45,35,.98), rgba(18,35,28,.96));
  box-shadow:0 12px 28px rgba(42,165,104,.38);
  color:var(--ink);
}
html[data-theme="dark"] .prayer-pill::after{
  opacity:.38;
}
html[data-theme="dark"] .review-item{
  background:rgba(16,30,25,.92);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:all .2s ease;
}
html[data-theme="dark"] .review-item:hover{
  background:rgba(18,35,28,.95);
}
html[data-theme="dark"] .review-total{
  background:linear-gradient(135deg, rgba(42,165,104,.18), rgba(29,92,65,.48));
  border:1px solid rgba(86,228,160,.4);
  box-shadow:0 12px 32px rgba(42,165,104,.28);
}
html[data-theme="dark"] .review-total strong{
  color:#56f5a0;
  text-shadow:0 2px 10px rgba(42,165,104,.38);
}

/* Footer enhancement */
html[data-theme="dark"] .footer{
  background:linear-gradient(135deg, rgba(8,28,20,.96), rgba(12,35,25,.94));
  color:rgba(255,255,255,.80);
}
html[data-theme="dark"] .footer::before{
  opacity:.42;
}
html[data-theme="dark"] .footer-bottom{
  background:rgba(5,26,18,.6);
  border-top-color:rgba(255,255,255,.1);
}
html[data-theme="dark"] .footer-bottom-content{
  color:rgba(255,255,255,.75);
}

/* Form controls */
html[data-theme="dark"] .card-field{
  border-color:var(--panel-border);
  background:rgba(16,28,22,.65);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.32);
}

/* Dark mode Eid prayer capsules */
html[data-theme="dark"] .quick-shortcut{
  background:linear-gradient(160deg, #fafafa, #f5f5f5);
  border:1px solid #e0e0e0;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:all .2s ease;
}
html[data-theme="dark"] .quick-shortcut:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  transform:translateY(-1px);
}
html[data-theme="dark"] .quick-shortcut-eid{
  background:linear-gradient(160deg, #fafafa, #f5f5f5);
  border-color:#e0e0e0;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
html[data-theme="dark"] .quick-shortcut-eid:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  transform:translateY(-1px);
}
html[data-theme="dark"] .quick-shortcut-label{
  color:#1b7a52;
  font-weight:600;
}
html[data-theme="dark"] .quick-shortcut-eid .quick-shortcut-label{
  color:#1b7a52;
}
html[data-theme="dark"] .quick-shortcut-note{
  color:#666;
  font-size:13px;
}
html[data-theme="dark"] .quick-shortcut .chip{
  background:#fff;
  border:1px solid #ddd;
  color:#333;
  transition:all .18s ease;
  font-weight:500;
}
html[data-theme="dark"] .quick-shortcut .chip:hover,
html[data-theme="dark"] .quick-shortcut .chip:focus-visible{
  border-color:#bbb;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  transform:translateY(-1px);
  background:#fafafa;
}
html[data-theme="dark"] .quick-shortcut-eid .chip{
  background:#fff;
  border-color:#ddd;
}
html[data-theme="dark"] .quick-shortcut-eid .chip:hover,
html[data-theme="dark"] .quick-shortcut-eid .chip:focus-visible{
  border-color:#bbb;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  transform:translateY(-1px);
  background:#fafafa;
}
html[data-theme="dark"] .quick-shortcut .chip.is-active{
  background:linear-gradient(120deg, #1b7a52 0%, #2aa568 100%);
  border-color:#1b7a52;
  color:#fff;
  box-shadow:0 8px 18px rgba(42,165,104,.32);
  font-weight:600;
}
html[data-theme="dark"] .quick-shortcut-eid .chip.is-active{
  background:linear-gradient(120deg, #1b7a52 0%, #2aa568 100%);
  border-color:#1b7a52;
  color:#fff;
  box-shadow:0 8px 18px rgba(42,165,104,.32);
  font-weight:600;
}

/* Footer contrast */
html[data-theme="dark"] .footer{
  color:rgba(255,255,255,.82);
}
html[data-theme="dark"] .footer-bottom{
  background:rgba(5,26,18,.5);
}

/* Form controls in dark mode */
html[data-theme="dark"] .card-field{
  border-color:rgba(190,255,225,.18);
  background:rgba(16,28,22,.6);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}