/* ===================== 1. Theme Variables ===================== */
:root{
  --nav-height: 70px;
  --highlight:#174027;

  --bg:#000;           /* dark-mode background  */
  --text:#fff;         /* dark-mode foreground  */
  --disc:#fff;         /* moon-phase disc       */
  --mask:#000;         /* moon-phase mask       */
  --input-bg:#111;     /* input background      */

  /* form spacing */
  --form-pad-y:.45rem;
  --form-pad-x:.6rem;
  --form-font:1rem;
  --label-width:140px; /* width of the label column */

  /* reading modal (mobile) */
  --actions-h: clamp(64px, 12vw, 88px);
}
body.light-mode{
  --bg:#fff;
  --text:#000;
  --disc:#000;
  --mask:#fff;
  --input-bg:#fff;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Seasons','Spectral',serif;
}

/* Lock the page scroll when any modal is open */
body:has(#reading-modal.active),
body:has(#reading-modal[open]),
body:has(#payment-modal.active){ overflow:hidden; }

/* ===================== 2. Loader ===================== */
#loader-overlay{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:3000;transition:opacity .4s ease;
}
.loader{
  width:48px;height:48px;border-radius:50%;
  display:inline-block;
  animation:animloader 1s linear infinite;
  color:var(--text);
}
@keyframes animloader{
  0%  {box-shadow:-72px 0 currentColor inset;}
  100%{box-shadow: 48px 0 currentColor inset;}
}

/* ===================== 3. Navbar ===================== */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1.25rem; background: var(--bg); z-index: 1000;
}
.brand{
  font-family:'BrittanySignature','Dancing Script',cursive;
  font-size:1.7rem;font-weight:600;color:var(--text);
  user-select:none;pointer-events:none;
}
.nav-list{
  list-style:none;display:flex;margin:0;padding:0;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-link{
  position:relative;width:42px;height:42px;margin:0 6px;display:block;overflow:hidden;
}
.nav-link::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--disc);
  transition:background-color .4s ease;
}
.nav-link::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mask);}
.phase-crescent-left::after  {transform:translateX(12px);}
.phase-gibbous-left::after   {transform:translateX( 5px);}
.phase-full::after           {background:transparent;}
.phase-gibbous-right::after  {transform:translateX(-5px);}
.phase-crescent-right::after {transform:translateX(-12px);}
.nav-list li:first-child .nav-link{margin-right:2px;}
.nav-list li:last-child  .nav-link{margin-left: 2px;}
.nav-list .phase-full{margin:0 6px;}
@media(min-width:600px){.nav-list .phase-full{margin:0 12px;}}
.nav-link.active::before,.nav-link:hover::before{background:var(--highlight);}
#theme-toggle{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:0 .5rem;color:var(--text);}

/* ===================== 4. Typography ===================== */
.heading{
  font-family:'BrittanySignature','Dancing Script',cursive;
  font-size:84px;font-weight:500;margin:0;text-align:center;
}
.subheading{
  font-family:'BrittanySignature','Dancing Script',cursive;
  font-size:60px;font-weight:500;text-align:center;
  margin:0 0 2.5rem;margin-top:-70px;
}
.text{
  font-family:'Seasons','Spectral',serif;
  font-weight:300;font-size:1rem;max-width:700px;margin:0 auto 2rem;
  line-height:1.6;text-align:center;
}
.rumi-quote{font-style:italic;}

/* ===================== 5. Section Wrapper ===================== */
section{
  min-height:calc(100vh - var(--nav-height)); width:100vw;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:2rem;scroll-margin-top:var(--nav-height); background:var(--bg);
}

/* ===================== 6. FORM ===================== */
input[type="text"], input[type="email"], select{
  width:100%; padding:var(--form-pad-y) var(--form-pad-x);
  background:var(--input-bg); border:1px solid #444;border-radius:4px;
  color:var(--text); font:inherit;font-size:var(--form-font);line-height:1.2;
}
input:focus,select:focus{
  outline:none; border-color:var(--highlight);
  box-shadow:0 0 0 3px rgba(41,94,64,.35);
}
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.4rem;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--text) 50%),
    linear-gradient(135deg,var(--text) 50%,transparent 50%),
    linear-gradient(to right,#444,#444);
  background-position:
    calc(100% - 1.1rem) 50%,
    calc(100% -  .75rem) 50%,
    calc(100% - 2.2rem) 50%;
  background-size:6px 6px,6px 6px,1px 60%;
  background-repeat:no-repeat;
}
input[type="checkbox"]{accent-color:var(--highlight);cursor:pointer;}
.astro-form{
  max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:.9rem;
}
.field-row{
  display:grid;grid-template-columns:var(--label-width) 1fr;column-gap:1rem;align-items:center;
}
.field-row>label{text-align:right;font-size:1.05rem;}
.select-group,.time-group{display:flex;gap:.5rem;}
.unknown-check{display:flex;align-items:center;gap:.4rem;margin-left:.75rem;font-size:1rem;user-select:none;}
.accuracy-note{
  grid-column:2/2;margin:-.2rem 0 .5rem 0;color:#e06060;font-size:.9rem;line-height:1.4;
}
#submit-button{
  justify-self:start;padding:.6rem 1.8rem;background:var(--highlight);border:none;border-radius:6px;
  color:#fff;font-size:1.1rem;font-weight:500;cursor:pointer;
  transition:background-color .3s ease,transform .2s ease;
}
#submit-button:hover{background:#3d7d55;transform:translateY(-2px);}
#submit-button:active{transform:translateY(0);}

/* ---------- Autocomplete ---------- */
.autocomplete-wrapper{position:relative;width:100%;}
.suggestions-list{
  position:absolute;top:100%;left:0;right:0;background:var(--bg);
  border:1px solid #444;border-radius:4px;max-height:200px;overflow-y:auto;
  z-index:10;list-style:none;margin:0;padding:0;
}
.suggestions-list:empty{border:none;}

/* ===================== 7. Popup Overlay ===================== */
#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s ease;z-index:2000;
}
#overlay.active{visibility:visible;opacity:1;}
.popup{
  background:#111;border:2px solid var(--highlight);border-radius:14px;padding:2.2rem 2.8rem;
  max-width:520px;text-align:center;box-shadow:0 0 16px 2px var(--highlight);
}
.popup h3{margin-top:0;color:var(--text);}
.popup p{margin-bottom:1.2rem;color:var(--text);}
.close-btn{
  padding:.6rem 1.8rem;background:var(--highlight);color:#fff;border:none;border-radius:6px;
  font-size:1.1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .2s ease;
}
.close-btn:hover{background:#3d7d55;transform:translateY(-2px);}
.close-btn:active{transform:translateY(0);}

/* ===================== 8. Payment Modal ===================== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;z-index:4000;
}
.modal.active{display:flex;}
.modal-content{
  background:var(--bg);color:var(--text);padding:2rem;border-radius:8px;
  width:90%;max-width:400px;text-align:center;box-shadow:0 0 16px rgba(0,0,0,.5);
}
.modal-content h3{margin-top:0;}
.modal-content #card-element{
  margin:1rem 0;padding:10px;background:var(--input-bg);
  border:1px solid #444;border-radius:4px;
}
.modal-content #card-errors{color:#e06060;margin-top:.5rem;}
.modal-content button{
  margin:1rem .5rem 0;padding:.6rem 1.8rem;background:var(--highlight);color:#fff;border:none;border-radius:6px;cursor:pointer;
}
.modal-content button#card-cancel{background:#444;}
/* Stripe override */
.StripeElement{
  height:40px;background:var(--input-bg);color:var(--text);
  padding:10px;border:1px solid #444;border-radius:4px;
}
.StripeElement--focus{box-shadow:0 0 0 3px rgba(41,94,64,.35);}
.StripeElement--invalid{border-color:#e06060;}
.accuracy-note-warning{color:#e06060;font-size:.9rem;line-height:1.4;margin:.2rem 0 .5rem 0;}
.accuracy-note-text{margin-top:-1rem;margin-bottom:1rem;}

/* ===================== 9. Responsive tweaks ===================== */
@media (max-width: 600px) {
  .heading { font-size: 56px; }
  .subheading { font-size: 42px; margin-top: -50px; }
  .text { font-size: .95rem; padding: 0 1rem; }
  .nav-link { width: 24px; height: 24px; margin: 0 3px; }
  #theme-toggle { width: 24px; height: 24px; font-size: 1rem; margin-left: auto; order: 2; }
  .brand { display: none; }
  .nav-list { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  :root { --label-width: 100%; }
  .field-row { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
  .field-row > label { text-align: left; margin-bottom: .35rem; }
  #submit-button { justify-self: stretch; width: 100%; }
}

/* ───── Generic spinner (also reused for button & card loader) ───── */
.spinner{
  width:24px;height:24px;border:3px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
#accuracy-warning{display:none;color:var(--warning, #e06060);}
#card-loading{display:none;margin:.75rem auto;}
#card-submit.loading{position:relative;color:transparent;}
#card-submit.loading::after{
  content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border:3px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;
}

/* ─── Payment modal stacking fix ───────────────────────────── */
#payment-modal{position:fixed;inset:0;display:none;justify-content:center;align-items:center;z-index:1000;}
#payment-modal.active{display:flex;}
#payment-modal .modal-content{position:relative;z-index:0;}
#card-element{position:relative;z-index:1;overflow:hidden;}
#card-submit,#card-cancel{position:relative;z-index:2 !important;}
#card-element iframe{position:static !important;}

a {
  color: var(--text);
  text-decoration: underline;
  transition: color .2s ease;
}
a:hover,
a:focus {
  color: var(--highlight);
  outline: none;
}
a:focus-visible {
  outline: 2px dashed var(--highlight);
  outline-offset: 2px;
}
a:visited {
  color: var(--text);              /* avoid purple visited links */
}

/* ===================== 10. Section Spacing ===================== */
section{margin:6rem 0;}
@media (max-width: 600px){section{margin:4rem 0;}}

/* ===================== 11. READING MODAL ===================== */

/* Visibility */
#reading-modal.modal{display:none;}
#reading-modal[open], #reading-modal.active{
  display:flex;justify-content:center;align-items:flex-start;
  padding:2rem 1rem;overflow:hidden; /* prevent overlay scrollbar */
}

/* Shell (single scroll area) */
#reading-modal .modal-content{
  position:relative;width:100%;max-width:980px;margin:6vh auto;
  background:#111;color:#fff;border-radius:16px;padding:1.25rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  max-height:90vh;display:flex;flex-direction:column;overflow:auto; /* single scrollbar */
  -webkit-overflow-scrolling:touch;
}

/* Close button */
#reading-modal .reading-close{
  position:absolute;top:0;right:.75rem;background:transparent;border:0;
  font-size:1.5rem;color:#aaa;cursor:pointer;line-height:1;padding:.25rem;z-index:10;
}

/* Options list */
.reading-options{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem;margin:1rem 0 1.5rem;
}
.reading-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:.6rem;padding:.75rem .9rem;border:1px solid #333;border-radius:12px;
  background:#0b0b0b;cursor:pointer;user-select:none;transition:border-color .2s ease;
}
.reading-card:hover{border-color:#295e40;}
.reading-card input[type="radio"]{margin-top:.2rem;accent-color:#295e40;}
.reading-title{display:block;font-weight:600;line-height:1.4;}
.reading-desc{
  display:block;font-size:.9rem;color:#aaa;line-height:1.4;margin-top:.25rem;
}
.reading-price{opacity:.9;}

/* Details + preview layout */
.reading-flex{
  display:grid;grid-template-columns:1fr;gap:1.25rem;flex:1 1 auto;min-height:0;
}
@media (min-width:1024px){
  .reading-flex{grid-template-columns:1.1fr .9fr;align-items:stretch;}
}

/* Left column + actions footer */
.reading-left{
  position:relative;display:block;padding-bottom:72px;min-height:100%;
}
.reading-details h4{margin:0 0 .25rem;}
.muted{color:#aaa;}
.total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 0;border-top:1px dashed #333;border-bottom:1px dashed #333;
  margin:1rem 0;font-size:1.1rem;
}
.actions{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:.6rem;
}
.actions .secondary{background:transparent;color:#ddd;border:1px solid #333;}
#proceed-to-checkout{
  background:#295e40;color:#fff;border:0;padding:.6rem 1rem;border-radius:10px;cursor:pointer;font-weight:600;
}
.actions button{font-family:'Seasons','Spectral',serif !important;}

/* Preview panel */
.reading-preview{
  display:flex;flex-direction:column;align-items:center;min-height:0;
  background:#000;border:1px solid #222;border-radius:12px;padding:.75rem;
}
.cover-container{position:relative;display:inline-block;max-width:100%;width:100%;}
.reading-cover{display:block;width:100%;height:auto;}
#name-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'BrittanySignature',cursive;font-size:2rem;color:#EEE8AA;text-align:center;pointer-events:none;white-space:nowrap;
}

/* ===== Mobile tweaks for reading modal ===== */
@media (max-width:600px){
  /* Full-screen modal feel */
  #reading-modal{align-items:stretch;padding:0;}
  #reading-modal .modal-content{
    width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0;
    padding:1rem;gap:.75rem;overflow:auto; /* keep single scrollbar */
  }

  /* Close above heading */
  #reading-modal .reading-close{
    position:static;display:inline-block;margin-bottom:0rem;font-size:1rem;
  }

  /* Tighter option cards */
  .reading-options{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem;margin:.5rem 0 1rem;}
  .reading-card{padding:.6rem .7rem;}

  /* No inner scrolls; let modal-content scroll */
  .reading-left{
    padding-bottom:calc(var(--actions-h) + 16px + env(safe-area-inset-bottom));
    overflow:visible;
    display:flex;flex-direction:column;min-height:0;
  }
  .reading-details{
    flex:1 1 auto;min-height:0;overflow:visible;padding-right:.25rem;
  }

  /* Footer buttons pinned */
  .actions{
    position:absolute;left:0;right:0;bottom:0;align-items:center;
    min-height:var(--actions-h);padding:.5rem 0;background:#111;border-top:1px solid #222;z-index:2;
  }
  .actions button{
    flex:1 1 0;width:100%;padding:.85rem 1rem;line-height:1.15;
    -webkit-tap-highlight-color:transparent;
  }

  /* Long text safety */
  .reading-card,.reading-desc,.reading-title{overflow-wrap:anywhere;word-break:break-word;}
  .reading-card .reading-desc{
    max-height:5.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:.25rem;
  }
  .reading-card .reading-desc::-webkit-scrollbar{width:6px;}
  .reading-card .reading-desc::-webkit-scrollbar-thumb{background:#333;border-radius:999px;}

  /* Preview sizing (no fixed ratio) */
  .reading-preview{padding:.5rem;}
  .reading-cover{width:100%;height:auto;}
  #name-overlay{font-size:1.6rem;}
}

/* Ensure all main buttons use Seasons font */
/* Ensure all main action buttons use Seasons font */
/* Ensure all main action buttons use Seasons font */
#proceed-to-checkout,
#card-submit,
#card-cancel,
.close-btn,
#submit-button {
  font-family: 'Seasons', 'Spectral', serif !important;
}

/* Fix for checkout number being on top of desc */
@media (max-width:600px) {
  .reading-details {
    margin-bottom: calc(var(--actions-h) + 60px); /* extra space so text clears footer */
  }
}