/* Balcony platform toolbar — the edit/preview chrome shared by EVERY template.
   Not part of any one template: a template includes this alongside toolbar.js
   and gets the bar, the buy modal (plan picker), the finalize/share modal and
   the design-system button styles for free. See toolbar.js for the contract.

   The purple accent IS the Balcony design-system dusk-500, so the chrome reads
   as "the platform", clearly distinct from the invitation being edited. These
   tokens live here (the platform owns the design system); a template's own
   editor CSS consumes them, so toolbar.css must load before it. */

:root {
  --edit-accent: #5F0FFF;             /* dusk-500 */
  --edit-accent-soft: rgba(95, 15, 255, 0.5);
  --edit-accent-faint: rgba(95, 15, 255, 0.45);
  --edit-accent-tint: rgba(95, 15, 255, 0.06);
  --edit-bg: #faf8ff;

  /* Design-system button tokens (mirrored here because template pages don't load
     the platform's token CSS — kept in sync with public/css/tokens). */
  --ds-dusk-200: #BB99FF;
  --ds-dusk-600: #4900DB;   /* --color-surface-brand-primary-default */
  --ds-dusk-700: #3800A8;   /* --color-surface-brand-primary-bold  */
  --ds-dawn-500: #ffad33;   /* --color-dawn-500 — the primary button's glow */
  --ds-btn-font: 600 12px/1 "Satoshi", var(--tb-font), system-ui, sans-serif;
  --ds-btn-elevation:
    inset 2px 2px 4px 2px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px 2px rgba(0, 0, 0, 0.15),
    2px 2px 5px 2px rgba(0, 0, 0, 0.1);
  --ds-btn-elevation-hover:
    inset 2px 2px 4px 2px rgba(255, 255, 255, 0.3),
    inset -2px -2px 4px 2px rgba(0, 0, 0, 0.15),
    2px 2px 5px 2px rgba(0, 0, 0, 0.1),
    4px 4px 6px 4px rgba(0, 0, 0, 0.09);

  /* Chrome typography. Uses the template's own fonts when it defines these
     tokens (rose-invitation does, via variables.css), and falls back to a
     platform stack on templates that don't — the whole point of shared chrome
     being portable. Weights are literals (400/600) so no token is needed. */
  --tb-font: var(--font-secondary, system-ui, -apple-system, "Segoe UI", sans-serif);
  --tb-font-display: var(--font-primary, var(--tb-font));
}

/* ---------- Toolbar (edit + preview) ----------
   One bar in both modes — see the mount()/buildBar block in toolbar.js. The bar
   floats over the invitation with no background and reserves no space, so it
   never hides template chrome (e.g. the music toggle). It's click-through
   (pointer-events: none); only its interactive children catch clicks. */
.edit-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  pointer-events: none;
  color: var(--edit-accent);
  font: 400 14px var(--tb-font);
}

.edit-bar__brand,
.edit-bar__home a,
.edit-btn { pointer-events: auto; }

.edit-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.edit-bar__brand svg {
  flex: none;
}

/* Signed-in visitor's Dashboard link; empty (and gone) for logged-out shoppers.
   Stays visible on phones (unlike the brand text) — it's a navigation escape. */
.edit-bar__home:empty {
  display: none;
}

.edit-bar__saved {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.edit-bar__saved.is-on {
  opacity: 0.75;
}

.edit-bar__spacer {
  flex: 1 1 auto;
}

.edit-bar__actions {
  display: inline-flex;
  gap: 10px;
}

/* Outlined variant (design-system .btn-sm.outlined) — secondary actions */
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--ds-dusk-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--edit-accent);
  font: var(--ds-btn-font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--edit-accent);
  color: var(--ds-dusk-700);
}

/* Primary variant (design-system .btn.primary) — the seated, filled CTA with the
   dawn-500 glow that rests at the bottom and glides up on hover. */
.edit-btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background: var(--ds-dusk-600);
  color: #ffffff;
  box-shadow: var(--ds-btn-elevation);
}

.edit-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--ds-dawn-500) 70%, transparent) 0%,
    transparent 55%);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 50% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hover keeps the base dusk fill exactly — only the dawn glow glides up (and the
   elevation lifts), matching the design-system primary button. */
.edit-btn--primary:hover {
  background: var(--ds-dusk-600);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--ds-btn-elevation-hover);
}

.edit-btn--primary:hover::before {
  background-position: 50% 0%;
}

/* Quiet = outlined with a lighter divider (matches base outlined look) */
.edit-btn--quiet {
  border-color: var(--edit-accent-soft);
}

/* The trial's call to action, pinned in the toolbar. */
.edit-btn--buy {
  background: var(--edit-accent);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 700px) {
  .edit-bar { gap: 6px; padding: 0 10px; }
  .edit-bar__brand { font-size: 12px; }
  .edit-btn { padding: 7px 10px; font-size: 12px; }
}

/* Phone: hide the wordy brand + saved indicator; the Reset / Preview buttons
   stay (they're floating pills now, not a crowded bar). */
@media (max-width: 560px) {
  .edit-bar__brand-text,
  .edit-bar__saved {
    display: none;
  }
}

/* ---------- Finalize / share / upsell modal ---------- */
.edit-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.edit-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(37, 8, 96, 0.5);
  backdrop-filter: blur(2px);
}

.edit-modal__box {
  position: relative;
  z-index: 1;
  width: min(92vw, 480px);
  padding: 30px 28px;
  border: 2px solid var(--edit-accent);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  color: var(--brown, #43302b);
  font: 400 14px var(--tb-font);
}

.edit-modal__box h3 {
  font: 600 22px var(--tb-font-display);
  color: var(--edit-accent);
  text-align: center;
  margin-bottom: 14px;
}

.edit-modal__box p {
  margin-bottom: 12px;
  line-height: 1.55;
}

.edit-modal__link {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}

.edit-modal__link input {
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 1.5px solid var(--edit-accent-soft);
  border-radius: 8px;
  background: #fff;
  color: var(--brown, #43302b);
  font: 400 13px var(--tb-font);
}

.edit-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ---------- Buy modal (plan picker) ---------- */
.edit-modal__box--buy {
  /* The buy modal uses Satoshi throughout — override the chrome font tokens so
     every descendant (headings, plans, total, FAQs) resolves to Satoshi rather
     than the host template's own fonts. */
  --tb-font: "Satoshi", system-ui, sans-serif;
  --tb-font-display: "Satoshi", system-ui, sans-serif;
  width: min(94vw, 468px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 26px;
  border-radius: 20px;
  font-family: "Satoshi", system-ui, sans-serif;
}

/* Buy-modal actions: the two buttons (Cancel outlined · Proceed primary) share
   the full width, each growing equally, with Proceed pinned on the right. Sized
   to the design-system btn-md. */
.edit-modal__box--buy .edit-modal__actions {
  gap: 12px;
  margin-top: 22px;
  flex-wrap: nowrap;
}

.edit-modal__box--buy .edit-modal__actions .edit-btn {
  flex: 1 1 0;
  justify-content: center;
  padding: 13px 26px;
  font-size: 14px;
}

.buy-modal__eyebrow {
  font: 700 11px var(--tb-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--edit-accent);
  margin-bottom: 4px;
}

.buy-modal h3 {
  text-align: left;
  margin: 0 0 18px;
  font: 600 24px/1.15 var(--tb-font-display);
  color: var(--ds-dusk-700);
}

.buy-modal__plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.buy-plan {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 1.5px solid #ece7f7;
  border-radius: 16px;
  background: #fff;
  color: #2b2733;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.buy-plan:hover {
  border-color: var(--ds-dusk-200);
}

.buy-plan.is-selected {
  border-color: var(--edit-accent);
  background: var(--edit-accent-tint);
  box-shadow: 0 0 0 3px var(--edit-accent-tint);
}

.buy-plan__radio {
  flex: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c9bfe4;
  position: relative;
  transition: border-color 0.15s ease;
}

.buy-plan.is-selected .buy-plan__radio {
  border-color: var(--edit-accent);
}

.buy-plan.is-selected .buy-plan__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--edit-accent);
}

.buy-plan__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.buy-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.buy-plan__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 15px var(--tb-font-display);
  color: #201b2b;
}

.buy-plan__badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--edit-accent);
  color: #fff;
  font: 700 9px var(--tb-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.buy-plan__price {
  font: 700 14px var(--tb-font);
  color: var(--ds-dusk-700);
  white-space: nowrap;
}

.buy-plan__tagline {
  margin: 2px 0 10px;
  color: #6b6478;
  font-size: 12px;
}

.buy-plan__points {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.buy-plan__point {
  padding-left: 22px;
  position: relative;
  font-size: 12.5px;
  color: #453f52;
}

.buy-plan__point::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--edit-accent);
  font-weight: 700;
}

.buy-modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1.5px solid #ece7f7;
  font: 700 12px var(--tb-font);
  color: #6b6478;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.buy-modal__total-amt {
  font: 700 24px var(--tb-font-display);
  text-transform: none;
  letter-spacing: normal;
  color: var(--ds-dusk-700);
}

/* ---- Buy-modal FAQs (admin-managed accordion) ---- */
.buy-faqs {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px solid #ece7f7;
}

.buy-faqs__title {
  font: 700 11px var(--tb-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6478;
  margin-bottom: 6px;
}

.buy-faq {
  border-bottom: 1px solid #f0edf7;
}

.buy-faq:last-child {
  border-bottom: 0;
}

.buy-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: 600 13px var(--tb-font);
  color: #201b2b;
}

.buy-faq__chev {
  flex: none;
  color: var(--edit-accent);
  transition: transform 0.2s ease;
}

.buy-faq.is-open .buy-faq__chev {
  transform: rotate(180deg);
}

.buy-faq__a {
  display: none;
  padding: 0 2px 12px;
  font: 400 12.5px/1.55 var(--tb-font);
  color: #5c5568;
}

.buy-faq.is-open .buy-faq__a {
  display: block;
}

@media (max-width: 560px) {
  .edit-modal__box--buy {
    padding: 20px 16px;
  }

  /* Finalize modal link row wraps rather than overflows */
  .edit-modal__link {
    flex-wrap: wrap;
  }
}