:root{
  --green-deep:#083326;
  --green:#114736;
  --green-light:#17523f;
  --gold:#cca354;
  --gold-light:#f7d88d;
  --cream:#faf9f6;
  --ink:#0f172a;
  --muted:#66736e;
  --sans:'Manrope',sans-serif;
  --serif:'Cormorant Garamond',serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:var(--sans);background:#eef0ec;color:var(--ink)}
body{overflow:hidden}
a{text-decoration:none}
button{font:inherit}

.preview-layout{display:grid;grid-template-columns:118px minmax(0,1fr);width:100%;height:100vh;height:100dvh}
.preview-rail{
  min-width:0;
  height:100%;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:
    radial-gradient(circle at 20% 18%,rgba(204,163,84,.11),transparent 30%),
    linear-gradient(180deg,#083326,#06291f);
  border-right:1px solid rgba(247,216,141,.14);
  box-shadow:8px 0 28px rgba(8,51,38,.10);
  position:relative;
  z-index:5;
}
.preview-back{
  min-height:66px;
  padding:11px 9px;
  border:1px solid rgba(247,216,141,.20);
  border-radius:16px;
  color:#fff;
  display:grid;
  grid-template-columns:22px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
  background:rgba(255,255,255,.045);
  transition:.22s ease;
}
.preview-back i{grid-row:1/3;font-size:15px;color:var(--gold-light)}
.preview-back span{font-size:10px;font-weight:800;line-height:1.1}
.preview-back small{font-size:7px;color:rgba(255,255,255,.55);line-height:1.1}
.preview-back:hover{background:rgba(247,216,141,.09);border-color:rgba(247,216,141,.38);color:#fff}

.preview-package-panel{margin:auto 0;padding:14px 0}
.preview-control-label{display:block;margin:0 0 8px;text-align:center;color:var(--gold-light);font-size:7px;font-weight:800;letter-spacing:.15em}
.preview-package-controls{display:grid;gap:7px}
.package-button{
  width:100%;
  min-height:40px;
  border:1px solid rgba(247,216,141,.18);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.67);
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  transition:.22s ease;
}
.package-button:hover{border-color:rgba(247,216,141,.40);color:#fff;background:rgba(255,255,255,.07)}
.package-button.active{background:linear-gradient(100deg,var(--gold-light),var(--gold));border-color:transparent;color:var(--green-deep);box-shadow:0 8px 18px rgba(204,163,84,.18)}

.preview-identity{padding:11px 5px 3px;text-align:center;border-top:1px solid rgba(247,216,141,.12)}
.preview-identity>span{display:block;color:var(--gold-light);font-size:6px;font-weight:800;letter-spacing:.14em}
.preview-identity strong{display:block;margin-top:5px;color:#fff;font:700 14px/1.05 var(--serif)}
.preview-identity small{display:block;margin-top:4px;color:rgba(255,255,255,.48);font-size:6.5px;line-height:1.35}

.preview-canvas{min-width:0;height:100%;padding:0;background:#e9ece8}
.preview-frame-shell{width:100%;height:100%;background:#fff;position:relative;overflow:hidden}
#templateFrame{width:100%;height:100%;border:0;display:none;background:#fff}
.preview-frame-shell.has-preview #templateFrame{display:block}
.preview-frame-shell.has-preview .preview-empty{display:none}

.preview-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;background:radial-gradient(circle at 50% 22%,rgba(247,216,141,.14),transparent 28%),linear-gradient(145deg,#fff,#f7f5ef)}
.preview-empty-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(17,71,54,.08);color:var(--green);font-size:22px}
.preview-empty>span{margin-top:22px;color:#74612e;font-size:8px;font-weight:800;letter-spacing:.15em}
.preview-empty h1{max-width:620px;margin:9px 0 10px;color:var(--green);font:700 clamp(34px,4vw,52px)/1.02 var(--serif)}
.preview-empty p{max-width:580px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.preview-empty>a{margin-top:22px;display:inline-flex;align-items:center;gap:7px;padding:11px 17px;border-radius:999px;background:var(--green);color:#fff;font-size:10px;font-weight:800}

/* Tablet: keep the rail slim so the invitation still has room. */
@media(max-width:900px){
  .preview-layout{grid-template-columns:102px minmax(0,1fr)}
  .preview-rail{padding:12px 9px}
  .preview-back{padding:10px 7px}
  .preview-identity strong{font-size:12px}
}

/* Phone: controls move below the preview and reserve their own space.
   Nothing floats over the template navbar or its bottom-right controls. */
@media(max-width:575px){
  .preview-layout{display:flex;flex-direction:column;height:100vh;height:100dvh}
  .preview-canvas{order:1;height:calc(100vh - 62px);height:calc(100dvh - 62px);flex:0 0 auto}
  .preview-rail{
    order:2;
    width:100%;
    height:62px;
    min-height:62px;
    padding:7px 8px max(7px,env(safe-area-inset-bottom));
    flex-direction:row;
    align-items:center;
    gap:8px;
    border-right:0;
    border-top:1px solid rgba(247,216,141,.16);
    box-shadow:0 -8px 26px rgba(8,51,38,.12);
  }
  .preview-back{
    flex:0 0 78px;
    min-height:46px;
    padding:7px 8px;
    border-radius:13px;
    grid-template-columns:18px 1fr;
  }
  .preview-back i{font-size:13px}
  .preview-back span{font-size:9px}
  .preview-back small{font-size:6px}
  .preview-package-panel{margin:0;flex:1;padding:0}
  .preview-control-label{display:none}
  .preview-package-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .package-button{min-height:46px;border-radius:13px;font-size:9px}
  .preview-identity{display:none}
}


/* ==========================================================================
   FINAL 2026-08-26 - compact live-preview rail
   Gives the invitation more room without removing any controls.
   ========================================================================== */
@media(min-width:576px){
  .preview-layout{grid-template-columns:88px minmax(0,1fr)}
  .preview-rail{padding:12px 9px}
  .preview-back{
    min-height:54px;
    padding:8px 7px;
    border-radius:13px;
    grid-template-columns:18px 1fr;
    column-gap:4px;
  }
  .preview-back i{font-size:13px}
  .preview-back span{font-size:9px}
  .preview-back small{font-size:6px}
  .preview-package-panel{padding:10px 0}
  .preview-control-label{margin-bottom:6px;font-size:6px}
  .preview-package-controls{gap:5px}
  .package-button{min-height:34px;border-radius:11px;font-size:8px}
  .preview-identity{padding:8px 2px 1px}
  .preview-identity>span{font-size:5.2px}
  .preview-identity strong{margin-top:4px;font-size:11px;line-height:1.02}
  .preview-identity small{margin-top:3px;font-size:5.5px}
}
@media(max-width:900px) and (min-width:576px){
  .preview-layout{grid-template-columns:82px minmax(0,1fr)}
  .preview-rail{padding:10px 7px}
}
@media(max-width:575px){
  .preview-canvas{height:calc(100vh - 58px);height:calc(100dvh - 58px)}
  .preview-rail{height:58px;min-height:58px;padding:6px 7px max(6px,env(safe-area-inset-bottom));gap:7px}
  .preview-back{flex-basis:72px;min-height:44px}
  .package-button{min-height:44px}
}


/* ======================================================================
   2026-08-26 follow-up refinements
   - desktop preview shows only floating controls
   - no rail background, no identity block
   - canvas uses the requested soft light grey
   ====================================================================== */
.preview-canvas{background:#e7e6e2}
.preview-frame-shell,
#templateFrame{background:#e7e6e2}

@media(min-width:576px){
  .preview-layout{display:block}
  .preview-canvas{width:100%;height:100vh;height:100dvh}
  .preview-rail{
    position:fixed;
    left:12px;
    top:12px;
    bottom:12px;
    width:78px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    pointer-events:none;
  }
  .preview-back,
  .preview-package-panel,
  .preview-package-controls,
  .package-button{pointer-events:auto}
  .preview-back{
    min-height:52px;
    padding:8px 7px;
    border-radius:13px;
    background:rgba(8,51,38,.88);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .preview-package-panel{margin:auto 0 0;padding:0}
  .preview-control-label,
  .preview-identity{display:none}
  .preview-package-controls{gap:6px}
  .package-button{
    min-height:36px;
    border-radius:12px;
    background:rgba(8,51,38,.88);
    color:rgba(255,255,255,.70);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .package-button:hover{background:rgba(8,51,38,.94)}
}


/* ======================================================================
   2026-08-26 follow-up refinements v2
   - floating glass buttons only at the top-left
   - vertical stack: Back, Starter, Standard
   - selected package uses darker neutral glass, no green/gold
   ====================================================================== */
@media(min-width:576px){
  .preview-rail{
    top:12px;
    bottom:auto;
    width:86px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .preview-back,
  .package-button{
    min-height:42px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.34);
    background:rgba(255,255,255,.16);
    color:#ffffff;
    box-shadow:0 8px 20px rgba(12,16,22,.12);
    backdrop-filter:blur(12px) saturate(1.1);
    -webkit-backdrop-filter:blur(12px) saturate(1.1);
  }
  .preview-back small{color:rgba(255,255,255,.72)}
  .preview-back i{color:#fff}
  .preview-package-panel{margin:0;padding:0}
  .preview-package-controls{display:flex;flex-direction:column;gap:8px}
  .package-button{min-height:38px;font-size:8px;color:rgba(255,255,255,.92)}
  .package-button:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42)}
  .package-button.active{
    background:rgba(16,20,28,.46);
    border-color:rgba(255,255,255,.52);
    color:#fff;
    box-shadow:0 10px 22px rgba(12,16,22,.18);
  }
}
@media(max-width:575px){
  .preview-back,
  .package-button{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.34);
    color:#fff;
    backdrop-filter:blur(12px) saturate(1.1);
    -webkit-backdrop-filter:blur(12px) saturate(1.1);
  }
  .package-button.active{background:rgba(16,20,28,.46);border-color:rgba(255,255,255,.52);color:#fff}
}


/* ======================================================================
   2026-08-26 final refinements v3
   - phone view uses the same top-left vertical controls as desktop
   - glass buttons are more visible with less transparency
   ====================================================================== */
.preview-canvas{background:#e7e6e2}
.preview-frame-shell,#templateFrame{background:#e7e6e2}
.preview-layout{display:block}
.preview-canvas{width:100%;height:100vh;height:100dvh}
.preview-rail{
  position:fixed;
  left:12px;
  top:max(12px,env(safe-area-inset-top));
  bottom:auto;
  width:86px;
  height:auto;
  min-height:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  background:transparent;
  border:0;
  box-shadow:none;
  pointer-events:none;
  z-index:20;
}
.preview-back,
.preview-package-panel,
.preview-package-controls,
.package-button{pointer-events:auto}
.preview-control-label,
.preview-identity{display:none}
.preview-package-panel{margin:0;padding:0}
.preview-package-controls{display:flex;flex-direction:column;gap:8px}
.preview-back,
.package-button{
  border:1px solid rgba(255,255,255,.44);
  background:rgba(255,255,255,.24);
  color:#fff;
  box-shadow:0 10px 24px rgba(12,16,22,.16);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.preview-back{
  min-height:48px;
  padding:8px 7px;
  border-radius:14px;
  grid-template-columns:18px 1fr;
  column-gap:4px;
}
.preview-back i{font-size:13px;color:#fff}
.preview-back span{font-size:9px}
.preview-back small{font-size:6px;color:rgba(255,255,255,.80)}
.package-button{
  min-height:38px;
  border-radius:14px;
  font-size:8.3px;
  font-weight:800;
  color:rgba(255,255,255,.96);
}
.preview-back:hover,
.package-button:hover{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.54)}
.package-button.active{
  background:rgba(18,22,28,.56);
  border-color:rgba(255,255,255,.56);
  color:#fff;
  box-shadow:0 12px 26px rgba(12,16,22,.18);
}
@media(max-width:575px){
  .preview-layout{display:block;height:100vh;height:100dvh}
  .preview-canvas{height:100vh;height:100dvh}
  .preview-rail{left:10px;top:max(10px,env(safe-area-inset-top));width:84px;height:auto;min-height:0;gap:7px}
  .preview-back{min-height:46px;border-radius:13px}
  .package-button{min-height:36px;border-radius:13px;font-size:8px}
}


/* ======================================================================
   2026-08-26 final refinements v4
   - simple, visible preview controls
   - white buttons with dark text
   - same vertical top-left layout on desktop and mobile
   ====================================================================== */
.preview-rail{
  width:88px;
  gap:8px;
}
.preview-back,
.package-button{
  min-height:40px;
  border:1px solid rgba(20,28,35,.20);
  border-radius:12px;
  background:#fff;
  color:#15191d;
  box-shadow:0 7px 18px rgba(8,15,20,.14);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-shadow:none;
}
.preview-back{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 10px;
  font-size:9px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.preview-package-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.package-button{
  font-size:8.5px;
  font-weight:800;
}
.preview-back:hover,
.package-button:hover{
  background:#f4f5f4;
  color:#111418;
  border-color:rgba(20,28,35,.30);
}
.package-button.active{
  background:#eceeed;
  color:#111418;
  border-color:#111820;
  box-shadow:0 7px 18px rgba(8,15,20,.14),0 0 0 1px rgba(17,24,32,.05) inset;
}
@media(max-width:575px){
  .preview-rail{
    left:10px;
    top:max(10px,env(safe-area-inset-top));
    width:88px;
    height:auto;
    min-height:0;
    gap:8px;
  }
  .preview-back,
  .package-button{
    min-height:40px;
    border-radius:12px;
  }
  .preview-back{font-size:9px}
  .package-button{font-size:8.5px}
}


/* ======================================================================
   2026-08-26 final refinements v5
   - Back is exactly the same height as Starter / Standard
   - use a real arrow icon instead of a text arrow
   ====================================================================== */
.preview-back,
.package-button{
  width:100%;
  height:40px;
  min-height:40px;
  max-height:40px;
  border-radius:12px;
}
.preview-back{
  flex:0 0 40px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.preview-back-icon{
  width:13px;
  height:13px;
  flex:0 0 13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.preview-back span{
  font-size:8.5px;
  font-weight:800;
  line-height:1;
}
@media(max-width:575px){
  .preview-back,
  .package-button{
    height:38px;
    min-height:38px;
    max-height:38px;
    border-radius:11px;
  }
  .preview-back{flex:0 0 38px;padding:0 9px}
  .preview-back-icon{width:12px;height:12px;flex-basis:12px}
  .preview-back span,.package-button{font-size:8px}
}


/* ======================================================================
   2026-08-26 final refinements v6
   Phone-only: move the preview control stack down by about half a button
   height so the invitation's own top navigation stays more visible.
   ====================================================================== */
@media(max-width:575px){
  .preview-rail{
    top:max(29px,calc(env(safe-area-inset-top) + 19px));
  }
}

/* ======================================================================
   2026-08-27 - compact phone preview controls
   Keep controls available without covering the invitation's own navbar.
   ====================================================================== */
@media(max-width:575px){
  .preview-rail{
    left:7px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:62px !important;
    gap:5px !important;
  }
  .preview-back,
  .package-button{
    width:62px !important;
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(20,28,35,.14) !important;
    box-shadow:0 5px 14px rgba(8,15,20,.12) !important;
  }
  .preview-back{
    flex:0 0 31px !important;
    padding:0 5px !important;
    gap:3px !important;
  }
  .preview-back-icon{
    width:9px !important;
    height:9px !important;
    flex-basis:9px !important;
  }
  .preview-back span,
  .package-button{
    font-size:6.9px !important;
    font-weight:800 !important;
  }
  .preview-package-controls{
    gap:5px !important;
  }
  .package-button.active{
    background:#e8ece9 !important;
    color:#111418 !important;
    border-color:rgba(8,51,38,.30) !important;
  }
}

/* ======================================================================
   2026-08-27 final preview control position
   Same compact left-centre controls on desktop and phone.
   ====================================================================== */
.preview-rail{
  left:8px !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  width:64px !important;
  gap:5px !important;
}
.preview-back,
.package-button{
  width:64px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.92) !important;
  color:#15191d !important;
  border:1px solid rgba(20,28,35,.14) !important;
  box-shadow:0 5px 14px rgba(8,15,20,.12) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.preview-back{
  flex:0 0 32px !important;
  padding:0 5px !important;
  gap:3px !important;
}
.preview-back-icon{
  width:9px !important;
  height:9px !important;
  flex-basis:9px !important;
}
.preview-back span,
.package-button{
  font-size:7px !important;
  font-weight:800 !important;
}
.preview-package-controls{
  gap:5px !important;
}
.package-button.active{
  background:#082c21 !important;
  color:#ffffff !important;
  border-color:#061f18 !important;
  box-shadow:0 7px 17px rgba(4,31,23,.28) !important;
}
.package-button.active:hover{
  background:#06251c !important;
  color:#ffffff !important;
}
@media(max-width:575px){
  .preview-rail{
    left:7px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:62px !important;
  }
  .preview-back,
  .package-button{
    width:62px !important;
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
  }
}


/* ZAINUR SHOWCASE UX — prevent accidental text selection on touch/drag.
   Form fields remain selectable so typing, editing and accessibility are preserved. */
body, body * {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}