/* Storefront leftovers: checkout, template detail, forms, panels,
   tables and legal pages. The landing page, its type scale and its
   palette live in site.css. */
/* The panel's palette. site.css carries the storefront's own tokens; these are
   the ones panel.css and the shared components read, retuned from green to the
   brand maroon. Kept here rather than merged so a change to the marketing site
   cannot restyle the app someone is working in. */
/* Tokens live in tokens.css — one definition for the whole site. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0 0 12px; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

code { background: var(--accent-wash); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ---------------- chrome ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topnav { display: flex; align-items: center; gap: 18px; font-size: 14.5px; }
.topnav a { text-decoration: none; color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }
.inline-form { display: inline; }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--ink-soft); cursor: pointer; }
.linkish:hover { color: var(--ink); }

.sitefoot { padding: 40px 24px; text-align: center; color: var(--ink-faint); font-size: 13px; }

.page { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.page.narrow { max-width: 680px; }
.page.centered { text-align: center; }
.backlink { font-size: 14px; text-decoration: none; display: inline-block; margin-bottom: 14px; }

/* ================= storefront ================= */
/* Legal and category pages still use the narrow variant. */
.wrap.narrow-wrap { max-width: 720px; }
.centered { text-align: center; }

/* ---- phone frames (live template previews) ---- */
.phone {
  border: 9px solid var(--ink); border-radius: 34px; background: var(--surface); overflow: hidden;
  box-shadow: 0 20px 50px rgba(16, 26, 22, .22); flex-shrink: 0;
}
.phone iframe { display: block; width: 100%; height: 100%; border: none; }
.phone-lg { width: 330px; height: 660px; }
.phone-sm { width: 190px; height: 380px; border-width: 7px; border-radius: 26px; box-shadow: 0 12px 30px rgba(16,26,22,.16); }
.phone-xs { width: 74px; height: 148px; border-width: 4px; border-radius: 14px; box-shadow: none; }
.hero-phone .phone { width: 300px; height: 520px; border-bottom: none; border-radius: 34px 34px 0 0; }

/* ---- template detail ----

   The header is position:fixed and floats over the page, so a page has to
   leave room for it. This one left 26px against a header whose bottom edge is
   at 78px, which put the category line and the top of the preview behind it.

   The preview is sized from the viewport rather than fixed at 660px tall: on
   any laptop shorter than about 900px the old frame ran off the bottom of the
   screen, and the one thing a shopper wants to look at was the thing they had
   to scroll to see. */
.detail { padding-top: clamp(96px, 11vh, 118px); }
.detail-grid {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start; padding: 4px 0 56px;
}
.detail-demo { position: sticky; top: 96px; text-align: center; }
.demo-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 8px; }

/* Always fits, and keeps a handset's proportions while it does. */
.detail-demo .phone-lg {
  width: auto;
  height: min(620px, calc(100vh - 250px));
  aspect-ratio: 330 / 660;
  margin-inline: auto;
}
.detail-cat {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.detail-copy h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; }
.detail-tagline { font-family: 'Instrument Serif', Georgia, serif; font-size: 20px; color: var(--ink); margin-bottom: 10px; }
.detail-desc { color: var(--ink-soft); font-size: 16.5px; }
.price-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin: 26px 0 16px;
}
.price-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.price-big { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 38px; color: var(--accent-dark); line-height: 1.1; }
.price-sub { font-size: 13.5px; color: var(--ink-soft); }
.alt-currency { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }
.check-list { list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li { padding-left: 26px; position: relative; margin-bottom: 11px; color: var(--ink-soft); }
.check-list li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 600;
}
.check-list.tight li { font-size: 14px; margin-bottom: 8px; }

/* sticky buy bar on the detail page */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.96); border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.buybar-inner {
  max-width: 1120px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.buybar-inner strong { display: block; font-size: 15px; }

/* ---- checkout ---- */
.checkout { padding: 26px 24px 90px; }
.checkout-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start;
}
.checkout h1 { margin-bottom: 20px; }
.co-step { margin-bottom: 26px; }
.co-step h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.co-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-dark); font-size: 14px;
}
.co-signed {
  background: var(--accent-wash); color: var(--accent-dark);
  padding: 12px 16px; border-radius: 8px; font-size: 14.5px; margin: 0;
}
.pay-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.pay-panel p { font-size: 14.5px; }
.pay-panel p:last-child { margin-bottom: 0; }
.pay-methods { color: var(--ink-soft); font-size: 13.5px !important; }
.btn.full { width: 100%; }
.checkout-side { position: sticky; top: 24px; }
.summary {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.summary h2 { font-size: 17px; margin-bottom: 16px; }
.summary-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.summary-item p { margin: 2px 0 0; }
.summary-lines { margin: 0 0 6px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.summary-lines div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14.5px; }
.summary-lines dt { color: var(--ink-soft); margin: 0; }
.summary-lines dd { margin: 0; }
.summary-lines .total {
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px;
  font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; color: var(--accent-dark);
}
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn-price { opacity: .78; font-size: 13.5px; margin-left: 8px; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 30px; }
  .detail-demo { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-side { position: static; order: -1; }
}


/* ---------------- buttons ---------------- */
/* The panel's buttons. The storefront has its own, larger set in site.css;
   these stay separate so the marketing site's styling cannot bleed into the
   app someone is working in. */
.btn {
  display: inline-block; background: var(--accent); color: var(--surface); border: 1px solid var(--accent);
  padding: 10px 20px; border-radius: 24px; font: inherit; font-size: 15px;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--surface); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 6px 14px; font-size: 13.5px; }
.btn-xs { padding: 4px 11px; font-size: 12.5px; }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent); color: var(--surface); }
.btn-quiet { background: var(--surface); color: var(--accent); border-color: var(--border); }
.btn-quiet:hover { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-wash); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-deep); border-color: var(--danger-deep); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------------- forms ---------------- */
.stack { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.stack .btn { align-self: flex-start; }
label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 15px;
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; }
.hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12.5px; margin-top: 4px; }
.checkline { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.checkline input { width: auto; margin: 0; }
.checkline.small { font-size: 13px; color: var(--ink-soft); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid > label:not(.half) { grid-column: 1 / -1; }
/* The label sits above its field, not beside it. A date input is the only one
   narrow enough to leave room on the line, which is why Date read as an
   inline pair while every other field on the row read as a stack. */
.field-grid > label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-grid > label > input,
.field-grid > label > select,
.field-grid > label > textarea { width: 100%; }
.auth-page { max-width: 380px; }

/* ---------------- panels & misc ---------------- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.muted { color: var(--ink-soft); }
.empty { text-align: center; padding: 50px 20px; color: var(--ink-soft); }
.card-list { display: flex; flex-direction: column; gap: 14px; }

.alert { padding: 11px 16px; border-radius: 8px; font-size: 14.5px; }
.alert-ok { background: var(--accent-wash); color: var(--accent-dark); }
.alert-warn { background: var(--warn-wash); color: var(--warn); }
.alert-error { background: var(--danger-wash); color: var(--danger); }

.pill { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12.5px; background: var(--cream-deep); color: var(--ink-soft); white-space: nowrap; }
/* The semantic tokens, not the brand wash. A state pill in the brand colour
   reads as chrome rather than as a state, and sits indistinguishably beside
   every other maroon-tinted thing on the screen. */
.pill-ok { background: var(--ok-wash); color: var(--ok); }
.pill-warn { background: var(--warn-wash); color: var(--warn); }
.pill-danger { background: var(--danger-wash); color: var(--danger); }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 22px; }
.tabs a {
  padding: 9px 15px; font-size: 14.5px; color: var(--ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat-num { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; color: var(--accent-dark); }
.stat-label { display: block; font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }

.site-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; text-decoration: none; color: inherit;
}
.site-row:hover { border-color: var(--accent); }
.site-row h3 { margin: 0; }

/* ---------------- tables ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.data-table th {
  text-align: left; padding: 10px 14px; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--cream-deep); border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .tight { width: 24px; }
.guest-row { cursor: pointer; }
.guest-row:hover { background: var(--cream); }
.empty-cell { text-align: center; color: var(--ink-faint); padding: 30px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.bulkbar {
  display: none; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 12px;
  background: var(--accent-wash); border-radius: 8px; font-size: 14px;
}
.bulkbar.visible { display: flex; }

/* ---------------- dashboard split + preview ---------------- */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.admin-main { min-width: 0; }
.preview-col { position: sticky; top: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.preview-head h3 { margin: 0; font-size: 16px; }
.preview-phone { display: flex; justify-content: center; }
.preview-phone iframe {
  width: 100%; max-width: 320px; height: 580px; border: 7px solid var(--ink);
  border-radius: 28px; background: var(--surface);
}

.repeater { display: flex; flex-direction: column; gap: 10px; }
.repeater-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.repeater-row input[type=text] { flex: 1; min-width: 130px; margin-top: 0; }

.invite-groups { display: flex; flex-direction: column; gap: 10px; }
.invite-group { display: flex; align-items: center; gap: 10px; background: var(--cream-deep); padding: 9px 12px; border-radius: 8px; flex-wrap: wrap; }
.invite-group .count { width: 78px; margin-top: 0; }

/* ---------------- drawer ---------------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(16, 26, 22, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: var(--surface); box-shadow: -10px 0 34px rgba(16, 26, 22, .16);
  transform: translateX(100%); transition: transform .24s ease; z-index: 41;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { margin: 0; }
.drawer-close { border: none; background: none; font-size: 25px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.drawer-body .btn { width: 100%; }

@media (max-width: 900px) {
  .admin-split { grid-template-columns: 1fr; }
  .preview-col { position: static; }
  .field-grid { grid-template-columns: 1fr; }
}

/* ---- breadcrumbs + category hero ---- */
.crumbs { padding-top: 20px; font-size: 13.5px; color: var(--ink-faint); }
.crumbs a { text-decoration: none; }
.crumbs span[aria-hidden] { margin: 0 6px; }

.cat-hero { padding: 40px 0 52px; text-align: center; background: linear-gradient(180deg, var(--maroon-wash), var(--bg)); }
.cat-hero h1 { font-size: clamp(30px, 5.2vw, 46px); margin: 0 auto 14px; max-width: 20ch; }
.cat-hero .lede { margin: 0 auto 26px; max-width: 56ch; }
.cat-hero-actions { display: flex; justify-content: center; }

/* ---- legal pages ---- */
.legal { max-width: 760px; margin: 0 auto; padding: 34px 24px 90px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 6px; }
.legal .updated { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 30px; }
.legal h2 { font-size: 20px; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal .note {
  background: var(--accent-wash); color: var(--accent-dark);
  padding: 14px 18px; border-radius: var(--radius); font-size: 14.5px;
}

/* ---------------- app footer ---------------- */
.app-foot {
  max-width: 1180px; margin: 48px auto 0; padding: 20px 24px 28px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
}
.app-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.app-foot a { color: var(--ink-faint); text-decoration: none; }
.app-foot a:hover { color: var(--accent); }

/* Dialogs, shared by the panel and the platform admin ----------------------
   Here rather than in superadmin.css because both load app.css. Styled in
   the admin sheet alone, the same markup opened in the panel was an
   unpositioned block a thousand pixels down the page. */
/* Dialogs ------------------------------------------------------------------ */
.sa-dlg-back { position: fixed; inset: 0; z-index: 80; background: rgba(26,17,20,.5); }
.sa-dlg-back[hidden] { display: none; }

.sa-dlg {
  position: fixed; z-index: 81;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: min(88vh, 88svh);
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -40px rgba(26,17,20,.6);
}
.sa-dlg[hidden] { display: none; }

.sa-dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.sa-dlg-head h2 { margin: 0; font-size: 18px; }

.sa-dlg-body { padding: 18px 20px; overflow-y: auto; }
.sa-dlg-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

body.sa-dlg-open { overflow: hidden; }