/* QCK site — theme system + bento grid + glass widgets + editor chrome.
   Lifted from nxtwk's liquid-glass bento. A "theme" = a token scope below;
   add a new [data-theme="x"] block to add a theme. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --gutter: clamp(12px, 3vw, 26px);
  --maxw: 1100px;
}

/* ----------------------------- THEME: glass ----------------------------- */
[data-theme="glass"] {
  --bg: #060608;
  --bg2: #0d0d14;
  --ink: #F4F2EE;
  --ink-dim: rgba(244,242,238,0.66);
  --ink-faint: rgba(244,242,238,0.40);
  --accent: #FB5A2D;
  --on-accent: #1a0a04;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-hi: rgba(255,255,255,0.09);
  --glass-edge: rgba(255,255,255,0.14);
  --glass-edge-hi: rgba(255,255,255,0.24);
  --glass-top: rgba(255,255,255,0.25);
  --glass-bot: rgba(0,0,0,0.30);
  --blur: 22px;
}
[data-theme="glass"] body {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(251,90,45,0.12), transparent 55%),
    radial-gradient(120% 90% at 100% 8%, rgba(120,140,255,0.08), transparent 55%),
    var(--bg);
}

/* ----------------------------- THEME: light ----------------------------- */
[data-theme="light"] {
  --bg: #EFEFEC;
  --bg2: #ffffff;
  --ink: #111;
  --ink-dim: rgba(0,0,0,0.62);
  --ink-faint: rgba(0,0,0,0.40);
  --accent: #1E3DF5;
  --on-accent: #fff;
  --glass-bg: rgba(255,255,255,0.7);
  --glass-bg-hi: rgba(255,255,255,0.92);
  --glass-edge: rgba(0,0,0,0.10);
  --glass-edge-hi: rgba(0,0,0,0.18);
  --glass-top: rgba(255,255,255,0.9);
  --glass-bot: rgba(0,0,0,0.06);
  --blur: 14px;
}
[data-theme="light"] body { background: var(--bg); }

/* ------------------------------- base ------------------------------- */
body {
  min-height: 100dvh;
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: var(--gutter);
}
a { color: inherit; }
.wrap {
  max-width: var(--maxw); margin: 0 auto;
  container-type: inline-size;            /* so device preview triggers the real layout */
  transition: max-width .45s cubic-bezier(.32,.72,0,1);
}
/* device preview (desktop only) — constrain the canvas width */
body.dev-mobile .wrap { max-width: 400px; }
body.dev-tablet .wrap { max-width: 800px; }

/* site header (logo + name) */
.site-head {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 4px 22px;
}
.site-logo {
  width: 48px; height: 48px; border-radius: 14px; object-fit: cover;
  background: var(--glass-bg); border: 1px solid var(--glass-edge);
  display: grid; place-items: center; font-weight: 700; font-size: 20px;
}
.site-id { min-width: 0; }
.site-name { font-size: clamp(20px, 4vw, 30px); font-weight: 650; letter-spacing: -0.02em; }
.site-tagline { color: var(--ink-dim); font-size: clamp(13px, 2vw, 15px); margin-top: 2px; }

/* ------------------------------- grid ------------------------------- */
.qck-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* minmax(0,..) prevents min-content blowout */
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 16px);
}
/* sizes tile cleanly on 12 cols: small=4 (1/3), medium=8 (2/3, = 2× small),
   large=12 (full). So small+medium = 12 (fills), 3× small = 12, etc. */
.w { grid-column: span 8; min-height: 150px; min-width: 0; }
.w.s { grid-column: span 4; }
.w.m { grid-column: span 8; }
.w.l { grid-column: span 12; }

@container (max-width: 720px) {
  .w, .w.s, .w.m, .w.l { grid-column: 1 / -1; }
}

/* --------------------------- glass card --------------------------- */
.card {
  position: relative;
  height: 100%;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow:
    inset 0 1px 0 0 var(--glass-top),
    inset 0 -1px 0 0 var(--glass-bot),
    0 20px 50px -22px rgba(0,0,0,0.55);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.4vw, 26px);
  transition: transform .18s cubic-bezier(.32,.72,0,1), border-color .18s, background .18s;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,0.10), transparent 46%);
}
a.card:hover { background: var(--glass-bg-hi); border-color: var(--glass-edge-hi); }

/* ------------------------- widget: header ------------------------- */
.wg-header { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.wg-header h1 { margin: 0; font-size: clamp(26px, 5vw, 46px); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; }
.wg-header p { margin: 0; color: var(--ink-dim); font-size: clamp(15px, 2vw, 19px); max-width: 32ch; }
.wg-header .btn-cta {
  align-self: flex-start; margin-top: 8px;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 999px;
}

/* ------------------------- widget: link ------------------------- */
a.wg-link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.wg-link .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--glass-bg-hi); border: 1px solid var(--glass-edge);
  display: grid; place-items: center;
}
.wg-link .ic svg { width: 22px; height: 22px; }
.wg-link .lk-label { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.wg-link .lk-desc { color: var(--ink-dim); font-size: 14px; }
.wg-link .lk-host { color: var(--ink-faint); font-size: 12px; margin-top: auto; word-break: break-all; }
.w.s a.wg-link .lk-desc { display: none; }

/* ------------------------- widget: hours ------------------------- */
.wg-hours h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.wg-hours .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 15px; border-bottom: 1px solid var(--glass-edge); }
.wg-hours .row:last-child { border-bottom: 0; }
.wg-hours .row.today { color: var(--accent); font-weight: 600; }
.wg-hours .row .cl { color: var(--ink-dim); }
.wg-hours .row.closed .cl { color: var(--ink-faint); }
.w.s .wg-hours .row:nth-child(n+4) { display: none; } /* compact in square */

/* ------------------------- editor chrome ------------------------- */
.w { position: relative; }
.w-tools { display: none; }
body.is-owner .w-tools {
  display: flex; gap: 6px; position: absolute; top: 10px; right: 10px; z-index: 5;
}
.w-drag { cursor: grab; touch-action: none; }
.w-drag:active { cursor: grabbing; }
.w.dragging .card { opacity: .28; outline: 2px dashed var(--accent); outline-offset: -2px; }
.w-ghost { border-radius: var(--r-xl); transform: scale(1.03); opacity: .96; box-shadow: 0 34px 70px -22px rgba(0,0,0,0.78); }
.w-ghost .w-tools { display: none; }
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.w-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--glass-edge-hi);
  background: rgba(0,0,0,0.5); color: #fff; backdrop-filter: blur(8px);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.w-btn:hover { background: rgba(0,0,0,0.72); }
.w-btn svg { width: 16px; height: 16px; }

/* owner toolbar — centered pill in edit mode; collapses to a corner "Edit"
   button in preview mode (animated). */
.ed-bar {
  display: none; position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 60; gap: 0; padding: 8px; border-radius: 999px; align-items: center;
  background: rgba(0,0,0,0.72); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(16px);
  transition: transform .55s cubic-bezier(.32,.72,0,1);
}
body.is-owner .ed-bar { display: flex; }
.ed-bar button {
  border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: #fff; background: transparent; padding: 10px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ed-bar button:hover { background: rgba(255,255,255,0.12); }
.ed-bar button.primary { background: var(--accent); color: var(--on-accent); }
.ed-bar svg { width: 16px; height: 16px; flex: 0 0 16px; }
.ed-bar .sep { width: 1px; background: rgba(255,255,255,0.18); margin: 6px 2px; }
/* collapsible group (Add / Settings / separator) — margin gives the spacing so a
   collapsed group leaves NO phantom gap before the Edit button. */
.ed-bar .ed-collapse {
  display: inline-flex; align-items: center; gap: 8px; overflow: hidden;
  max-width: 320px; opacity: 1; margin-right: 8px;
  transition: max-width .55s cubic-bezier(.32,.72,0,1), opacity .3s ease, margin .55s;
}
/* device-preview group (desktop only) — reverse-collapses IN during preview */
.ed-bar .ed-devices {
  display: inline-flex; align-items: center; gap: 2px; overflow: hidden;
  max-width: 0; opacity: 0; margin-right: 0;
  transition: max-width .55s cubic-bezier(.32,.72,0,1), opacity .3s ease .15s, margin .55s;
}
.ed-dev { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: rgba(255,255,255,0.55); cursor: pointer; padding: 0; line-height: 0; flex: 0 0 38px; }
.ed-dev:hover { background: rgba(255,255,255,0.10); color: #fff; }
.ed-dev.on { background: rgba(255,255,255,0.16); color: #fff; }
.ed-dev svg { width: 19px; height: 19px; display: block; }
/* preview mode: slide pill to bottom-right, collapse Add/Settings out, devices in */
body.preview .ed-bar { transform: translateX(calc(50vw - 18px - 100%)); }
body.preview .ed-bar .ed-collapse { max-width: 0; opacity: 0; gap: 0; margin-right: 0; }
body.preview .ed-bar .ed-devices { max-width: 140px; opacity: 1; margin-right: 8px; }
@media (max-width: 760px) { .ed-bar .ed-devices { display: none; } } /* mobile: just Edit */
/* hide per-widget editor chrome smoothly in preview */
.w-tools { transition: opacity .3s ease; }
body.preview .w-tools { opacity: 0; pointer-events: none; }
body.preview .w { cursor: default; }
body.preview .w-add { opacity: 0; pointer-events: none; transition: opacity .3s ease; }

/* add-widget tile */
.w-add { grid-column: span 4; }
body:not(.is-owner) .w-add { display: none; }
.w-add .card {
  display: grid; place-items: center; min-height: 150px; cursor: pointer;
  border-style: dashed; background: transparent;
}
.w-add .card:hover { background: var(--glass-bg); }
.w-add .plus { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-dim); }
.w-add .plus svg { width: 26px; height: 26px; }

/* save pill */
.save-pill {
  position: fixed; right: 16px; bottom: 78px; z-index: 130; /* above the settings modal scrim */
  font-size: 13px; padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.16);
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.save-pill.show { opacity: 1; transform: translateY(0); }

/* ------------------------- modal / sheet ------------------------- */
/* QCK builder chrome: black surfaces, warm top-glow, vivid orange (--qck). */
.scrim {
  --qck: #FB5A2D; --qck-ink: #1a0a04;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,4,6,0.6); backdrop-filter: blur(12px);
  display: grid; place-items: end center; padding: 0;
  animation: scrimIn .2s ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%; max-width: 560px; max-height: 94dvh; overflow-y: auto;
  color: #fff;
  background: radial-gradient(95% 55% at 50% -8%, rgba(251,90,45,0.13), transparent 60%), #0b0b0c;
  border-radius: 26px 26px 0 0; border: 1px solid rgba(255,255,255,0.09);
  padding: 24px clamp(18px, 4vw, 28px) calc(24px + env(safe-area-inset-bottom));
  animation: sheetIn .28s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 640px) {
  .scrim { place-items: center; padding: 24px; }
  .sheet { border-radius: 26px; }
}
@keyframes sheetIn { from { transform: translateY(22px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
.sheet h2 { margin: 2px 0 4px; font-size: 23px; letter-spacing: -0.02em; }
.sheet .sub { color: rgba(255,255,255,0.5); font-size: 14px; margin: 0 0 18px; }

/* big inputs */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); margin-bottom: 7px; }
.input, .textarea {
  width: 100%; font: inherit; font-size: 16px; color: #fff;
  background: #161617; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  padding: 15px 16px; outline: none; transition: border-color .15s, background .15s;
}
.input:focus, .textarea:focus { border-color: rgba(255,255,255,0.34); background: #1c1c1e; }
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: rgba(255,255,255,0.28); }
.hint { font-size: 12px; color: rgba(255,255,255,0.42); margin-top: 6px; }
.hint.err { color: #ff8a8a; }
.hint.ok { color: #5fd08a; font-weight: 600; }

/* upload field (logo / favicon / meta image) */
.upl { display: flex; align-items: center; gap: 14px; padding: 11px 13px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; background: #161617; cursor: pointer; transition: border-color .15s, background .15s; }
.upl:hover { border-color: rgba(255,255,255,0.28); background: #1c1c1e; }
.upl-prev { width: 48px; height: 48px; border-radius: 11px; background: rgba(255,255,255,0.05); display: grid; place-items: center; overflow: hidden; flex: 0 0 48px; color: rgba(255,255,255,0.4); }
.upl-prev img { width: 100%; height: 100%; object-fit: cover; }
.upl-prev svg { width: 22px; height: 22px; }
.upl-main { flex: 1; min-width: 0; }
.upl-t { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.upl-t svg { width: 15px; height: 15px; color: rgba(255,255,255,0.6); }
.upl-h { font-size: 12px; color: rgba(255,255,255,0.42); margin-top: 2px; }
.upl-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; display: grid; place-items: center; }
.upl-x:hover { background: rgba(255,138,138,0.14); color: #ff8a8a; border-color: #4a2a2a; }
.upl-x svg { width: 15px; height: 15px; }

/* 2-col field grid (mobile collapses) */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fgrid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

.btn {
  border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 650;
  padding: 14px 22px; border-radius: 14px; background: #1c1c1e; color: #fff;
}
.btn:hover { background: #262628; }
.btn.primary { background: var(--qck); color: var(--qck-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { background: transparent; color: #ff8a8a; border: 1px solid #4a2a2a; }
.btn.ghost { background: transparent; color: rgba(255,255,255,0.6); }
.sheet-actions { display: flex; gap: 10px; margin-top: 22px; }
.sheet-actions .btn { flex: 1; }

/* tabbed settings modal */
.sheet.modal { padding: 0; display: flex; flex-direction: column; max-width: 720px; }
.m-head { position: relative; padding: 24px clamp(20px, 3vw, 28px) 0; }
.m-head h2 { margin: 0 0 4px; font-size: 26px; }
.m-head .sub { margin: 0; }
.m-close {
  position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.m-close:hover { background: rgba(255,255,255,0.12); }
.m-close svg { width: 18px; height: 18px; }
.m-tabs { display: flex; gap: 22px; padding: 16px clamp(20px, 3vw, 28px) 0; border-bottom: 1px solid rgba(255,255,255,0.07); overflow-x: auto; }
.m-tab { background: none; border: 0; color: rgba(255,255,255,0.5); font: inherit; font-size: 15px; font-weight: 650; padding: 2px 0 14px; cursor: pointer; position: relative; white-space: nowrap; }
.m-tab.on { color: #fff; }
.m-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--qck); border-radius: 2px; }
.m-body { padding: 22px clamp(20px, 3vw, 28px); overflow-y: auto; flex: 1; min-height: 170px; }
.m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px clamp(20px, 3vw, 28px) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.07); }
.m-foot .btn { min-width: 120px; }

/* theme cards */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-card { position: relative; cursor: pointer; border: 2px solid rgba(255,255,255,0.10); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.02); padding: 0; text-align: left; }
.theme-card.on { border-color: var(--qck); }
.theme-card .ck { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--qck); color: var(--qck-ink); display: none; place-items: center; }
.theme-card.on .ck { display: grid; }
.theme-card .pv { height: 116px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.theme-card .pv .bar { height: 7px; border-radius: 4px; }
.theme-card .pv.glass { background: linear-gradient(150deg, #2a2a2e, #0e0e12); }
.theme-card .pv.light { background: #ECEAE5; }
.theme-card .nm { padding: 11px 15px; font-size: 14px; font-weight: 650; }

/* address tab columns */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .addr-grid { grid-template-columns: 1fr; } }
.sub-field { display: flex; align-items: center; gap: 8px; }
.sub-field .input { text-align: right; font-weight: 600; }
.sub-field .suffix { color: rgba(255,255,255,0.5); white-space: nowrap; font-weight: 600; }

/* widget-type picker grid (add widget) */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-card { text-align: left; cursor: pointer; border: 1px solid rgba(255,255,255,0.10); background: #161617; border-radius: 16px; padding: 16px; color: #fff; }
.type-card:hover { border-color: rgba(255,255,255,0.4); }
.type-card .t { font-weight: 650; font-size: 16px; margin-bottom: 3px; }
.type-card .h { font-size: 13px; color: rgba(255,255,255,0.5); }

/* hours editor rows */
.hours-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.hours-row .d { font-weight: 600; }
.hours-row .times { display: flex; gap: 8px; align-items: center; }
.hours-row .times .input { padding: 9px 10px; font-size: 14px; }
.hours-row.is-closed .times { opacity: .35; pointer-events: none; }
.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { display: none; }
.toggle .track { width: 46px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.16); position: relative; transition: background .18s; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .18s; }
.toggle input:checked + .track { background: var(--qck); }
.toggle input:checked + .track::after { transform: translateX(18px); }

/* custom-domain stepper */
.dstepper { display: flex; align-items: center; justify-content: center; margin: 4px 0 22px; }
.dnode { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.4); font-size: 14px; font-weight: 600; }
.dnode .num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; font-size: 13px; }
.dnode.on { color: #fff; } .dnode.on .num { background: #fff; color: #111; border-color: #fff; }
.dnode.done .num { background: var(--qck); color: var(--qck-ink); border-color: var(--qck); }
.dnode.done .num svg { width: 14px; height: 14px; }
.dline { width: 34px; height: 1px; background: rgba(255,255,255,0.14); margin: 0 8px; }
.dctr { text-align: center; }
.dctr h2 { text-align: center; }
.dctr .sub { text-align: center; }
.drec { background: #161617; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; margin: 16px 0; text-align: left; }
.drec .r { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.drec .r:last-child { border-bottom: 0; }
.drec .k { width: 56px; color: rgba(255,255,255,0.4); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.drec .v { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; word-break: break-all; }
.drec .cp { border: 1px solid rgba(255,255,255,0.14); background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.drec .cp:hover { background: rgba(255,255,255,0.1); }
.dbadge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; }
.dbadge.ok { background: rgba(95,208,138,0.14); color: #5fd08a; }
.dbadge.err { background: rgba(255,138,138,0.14); color: #ff8a8a; }
.dbadge svg { width: 30px; height: 30px; }