/* ===== Brand + width ===== */
:root{
  --sq-brand: #6a2ba0;      /* your purple */
  --sq-ink:   #1f1f1f;
  --sq-header-max: 1280px;  /* bump to 1320/1360 if menu feels tight on desktop */
}

/* Header shell */
.sq-header{ background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000; }
.sq-wrap{ max-width:var(--sq-header-max); margin:0 auto; padding:12px 24px; }

/* ===== Row 1: centered logo + right hamburger ===== */
.sq-top{
  display:grid;
  grid-template-columns: 1fr auto 1fr;    /* center area + right area */
  align-items:center;
}
.sq-logo-link{ grid-column: 2; justify-self:center; }
.sq-logo{ height:64px; display:block; }

.sq-toggle{
  grid-column: 3;
  justify-self:end;
  background:#fff;
  border:2px solid var(--sq-brand);
  color:var(--sq-brand);
  width:44px; height:44px;
  border-radius:10px;
  font-size:22px; line-height:1;
  display:none;                         /* hidden on desktop, shown on mobile */
  align-items:center; justify-content:center;
  cursor:pointer;
}

/* thin divider (mobile visible) */
.sq-divider{ display:none; height:1px; background:#eee; margin-top:10px; }

/* ===== Row 2: nav ===== */
.sq-nav{ margin-top:18px; }
.sq-menu{
  list-style:none; padding:0; margin:0;
  display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap;
}
.sq-menu a{ color:var(--sq-brand); text-decoration:none; font-weight:600; white-space:nowrap; }
.sq-menu a:hover{ text-decoration:underline; }
.sq-cta{ border:2px solid var(--sq-brand); padding:.40rem .95rem; border-radius:999px; }
.sq-cta:hover{ background:var(--sq-brand); color:#fff; text-decoration:none; }

/* ===== Mobile layout (logo left, menu button right) ===== */
@media (max-width: 768px){
  .sq-logo{ height:52px; }

  /* Row 1: 3 columns → logo | spacer | toggle */
  .sq-top{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .sq-logo-link{ grid-column: 1; justify-self: start; }
  .sq-toggle{
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    width: 44px; height: 44px;
    background: #fff;
    border: 2px solid var(--sq-brand);
    border-radius: 10px;
    color: var(--sq-brand);
    font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
    cursor: pointer;
  }

  /* thin divider under row 1 */
  .sq-divider{ display:block; height:1px; background:#eee; margin-top: 10px; }

  /* Nav becomes a centered dropdown panel */
  .sq-nav{ position: relative; margin-top: 12px; }
  .sq-menu{
    display: none;                 /* hidden until toggled */
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    width: min(95vw, 560px);
    margin: 0 auto;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  .sq-nav.open .sq-menu{ display: flex; }

  .sq-menu a{ font-size: 16px; }
  .sq-cta{ padding: .5rem 1rem; }  /* comfy CTA size on mobile */
}

/* Details page 2-col (kept; scoped) */
.sq-form .row { display:grid; grid-template-columns:1fr; gap:16px 54px; }
@media (min-width: 768px){ .sq-form.two-col .row { grid-template-columns:1fr 1fr; } }
.sq-form .col label{ display:block; font-weight:600; margin-bottom:6px; }
.sq-form .col input,.sq-form .col select{ width:100%; }
.sq-form .actions{ text-align:center; margin-top:18px; }
.sq-form .actions .sq-btn{ padding:.7rem 1.2rem; border-radius:999px; }

/* ===== Page overlay loader ===== */
body.sq-no-scroll { overflow: hidden; }

.sq-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.85);  /* soft white veil */
  backdrop-filter: blur(2px);
}

.sq-overlay.is-active { display: flex; }

.sq-overlay .sq-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sq-overlay .sq-spinner {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 4px solid var(--sq-brand, #6a2ba0);
  border-top-color: transparent;
  animation: sq-spin .75s linear infinite;
}

.sq-overlay .sq-msg {
  color: var(--sq-brand, #6a2ba0);
  font-weight: 600;
  font-size: 0.95rem;
}

@keyframes sq-spin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sq-overlay .sq-spinner { animation: none; }
}

/* Overlay that covers the whole page while we prepare/open Razorpay */
#pay-overlay{
  position:fixed;
  inset:0;
  display:none;               /* toggled by JS */
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.85);
  z-index:9999;
  opacity: 0;                    /* for a soft fade */
  pointer-events: none;          /* don't block clicks when hidden */
  transition: opacity .15s ease;
}

/* When JS flips aria-hidden to false, show the overlay */
#pay-overlay[aria-hidden="false"]{
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

#pay-overlay .pay-spinner{
  width:56px; height:56px;
  border-radius:50%;
  border:6px solid #c9a4e8;
  border-top-color:#6a2ba0;   /* brand color */
  animation:payspin 1s linear infinite;
}
@keyframes payspin{to{transform:rotate(360deg)}}

.pay-note{
  display:none;
  margin-top:.65rem;
  font-size:.95rem;
  line-height:1.4;
}
.pay-note.info { color:#6a2ba0; }       /* brand purple */
.pay-note.warn { color:#b26b00; }       /* warm amber */
.pay-note.err  { color:#b3261e; }       /* red */

/* Dialog */
.pay-dialog[hidden]{display:none}
.pay-dialog{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.pay-dialog__panel{
  width:min(480px,90vw);
  background:#fff; color:#2d114b;
  border-radius:14px;
  padding:1.25rem 1.5rem;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.pay-dialog__panel h3{ margin:0 0 .5rem; font-weight:700; }
.pay-dialog--warn .pay-dialog__panel h3{ color:#b26b00; }
.pay-dialog--err  .pay-dialog__panel h3{ color:#b3261e; }
.pay-dialog__panel .sq-btn{ margin-top:1rem; }