/* Tzimmer Builder — admin/wizard UI. Brand-matched to the generated sites. */
:root{
  --navy:#2E4A5C; --navy-dark:#1E3444; --navy-deep:#152530;
  --cream:#F8F5EF; --sand:#EDE6D9; --gold:#C9A24B; --gold-soft:#E4CE95;
  --ink:#22303A; --muted:#5F6E7A; --line:#DFD6C6;
  --ok:#2f8f5b; --bad:#c0492f;
  --radius:14px; --shadow:0 20px 50px -24px rgba(21,37,48,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Heebo',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Frank Ruhl Libre',serif;font-weight:700;line-height:1.2;letter-spacing:-.01em}
a{color:var(--navy);text-decoration:none}a:hover{color:var(--gold)}
img{max-width:100%;display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;background:var(--navy);color:#fff;font-family:inherit;font-weight:500;font-size:1rem;padding:.72em 1.5em;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn:hover{background:var(--navy-dark);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.gold{background:var(--gold);color:#20313d}.btn.gold:hover{background:#b8913f}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}.btn.ghost:hover{background:#fff;color:var(--navy)}
.btn.sm{padding:.42em 1em;font-size:.86rem}
.btn.danger{background:transparent;color:var(--bad);border-color:#e6c6bd}.btn.danger:hover{background:#fbeeea}
.muted{color:var(--muted);font-size:.92rem}
.err{color:var(--bad);min-height:1.2em;font-size:.9rem}

/* ---------- auth ---------- */
body.auth{background:linear-gradient(135deg,var(--navy-deep),var(--navy));min-height:100vh}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{background:var(--cream);border-radius:20px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:34px 32px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand b{display:block;font-family:'Frank Ruhl Libre';font-size:1.5rem;color:var(--navy)}
.auth-brand small{display:block;color:var(--muted);margin-top:4px;font-size:.86rem}
.logo-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,75,.25);margin-bottom:8px}
.stack{display:flex;flex-direction:column;gap:14px}
.stack h1{font-size:1.5rem;text-align:center}
.auth-card h1{font-size:1.5rem}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.72em 1em;font-family:inherit;font-weight:500;font-size:1rem;color:#3c4043;cursor:pointer;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.gbtn:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(0,0,0,.12);color:#3c4043}
.gbtn svg{flex:none}
.or-div{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem;margin:4px 0}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--line)}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;color:var(--ink)}
input,textarea,select{font-family:inherit;font-size:1rem;font-weight:300;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.62em .8em;transition:.15s;width:100%}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
textarea{resize:vertical;min-height:80px;line-height:1.55}

/* ---------- admin chrome ---------- */
.admin-top{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff}
.admin-top-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 22px}
.admin-logo{color:#fff;font-family:'Frank Ruhl Libre';font-weight:700;font-size:1.15rem;display:flex;align-items:center;gap:9px}
.admin-logo .logo-dot{margin:0}
.admin-nav{display:flex;gap:6px;margin-inline-start:10px}
.admin-nav a{color:rgba(255,255,255,.8);padding:.4em .95em;border-radius:999px;font-size:.94rem}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.admin-nav a.active{color:#20313d;background:var(--gold-soft)}
.admin-user{margin-inline-start:auto;display:flex;align-items:center;gap:12px;font-size:.9rem;color:rgba(255,255,255,.9)}
.admin-user .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.admin-user .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}

.wiz,.dash{max-width:1080px;margin:0 auto;padding:26px 22px 90px}

/* section card */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 30px -26px rgba(21,37,48,.5);padding:22px 22px}
.card + .card{margin-top:18px}
.card > h2{font-size:1.25rem;margin-bottom:4px}
.card > .hint{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > span{font-size:.88rem;font-weight:500}
.field small{color:var(--muted);font-weight:300;font-size:.8rem}
.row-full{grid-column:1/-1}

/* wizard stepper */
.stepper{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.stepper button{background:#fff;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.4em 1em;font-family:inherit;font-size:.85rem;cursor:pointer;transition:.15s}
.stepper button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.stepper button.done{border-color:var(--gold);color:var(--navy)}
.wiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}

/* repeatable list items (suites/amenities/extras/gallery/paragraphs) */
.items{display:flex;flex-direction:column;gap:14px}
.item{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--cream);position:relative}
.item .item-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.item .item-head b{font-size:.95rem;color:var(--navy)}
.item .del{background:none;border:0;color:var(--bad);cursor:pointer;font-size:.85rem}
.add-btn{margin-top:12px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.28em .7em;font-size:.85rem}
.chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}
.inline-add{display:flex;gap:8px;margin-top:8px}
.inline-add input{flex:1}

/* image upload */
.drop{border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s;background:#fff}
.drop.hot{border-color:var(--gold);background:#fffdf6;color:var(--navy)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--sand)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .rm{position:absolute;top:5px;inset-inline-end:5px;background:rgba(21,37,48,.8);color:#fff;border:0;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:.9rem;line-height:1}
.thumb.hero-pick{outline:3px solid var(--gold)}
.single-img{display:flex;align-items:center;gap:12px;margin-top:10px}
.single-img .prev{width:120px;aspect-ratio:4/3;border-radius:10px;border:1px solid var(--line);background:var(--sand) center/cover no-repeat}

/* dashboard overview */
.overview{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.overview .status{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.live{background:var(--ok)}.dot.draft{background:var(--gold)}
.overview .actions{display:flex;gap:10px;flex-wrap:wrap}

/* import panel */
.import-row{display:flex;gap:10px;margin-top:6px}
.import-row input{flex:1}
.import-results{margin-top:16px;display:none}
.import-results.on{display:block}
.imp-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.imp-imgs img{aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;transition:.15s}
.imp-imgs img:hover{outline:2px solid var(--gold)}
.imp-text{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:220px;overflow:auto}
.imp-text button{text-align:start;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.5em .7em;cursor:pointer;font-family:inherit;font-size:.88rem;color:var(--ink)}
.imp-text button:hover{border-color:var(--gold)}

/* toast */
#toast{position:fixed;inset-block-end:22px;inset-inline-start:50%;transform:translateX(50%) translateY(140%);background:var(--navy-deep);color:#fff;padding:.7em 1.3em;border-radius:999px;font-size:.92rem;box-shadow:var(--shadow);transition:.3s;z-index:100}
#toast.show{transform:translateX(50%) translateY(0)}
#toast.bad{background:var(--bad)}

.center{text-align:center}
.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:60px;text-align:center;color:var(--muted)}

/* removable image candidates */
.cand{position:relative}
.cand img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.cand-x{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;background:rgba(21,37,48,.82);color:#fff;border:0;cursor:pointer;font-size:.9rem;line-height:1}
.cand-x:hover{background:var(--bad)}

/* colour presets */
.theme-row{display:flex;flex-wrap:wrap;gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;transition:.15s;font-family:inherit}
.swatch:hover{border-color:var(--gold)}
.swatch.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,74,92,.15)}
.swatch .sw-navy,.swatch .sw-gold{width:46px;height:11px;border-radius:3px;display:block}
.swatch small{font-size:.78rem;color:var(--muted);margin-top:5px}

/* landing page */
.lp{color:var(--ink)}
.lp-nav{position:sticky;top:0;z-index:40;background:rgba(248,245,239,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.lp-nav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px}
.lp-logo{font-family:'Frank Ruhl Libre';font-weight:700;font-size:1.25rem;color:var(--navy);display:flex;align-items:center;gap:9px}
.lp-hero{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;text-align:center;padding:80px 22px 90px}
.lp-hero .eyebrow{color:var(--gold-soft)}
.lp-hero h1{font-size:clamp(2rem,5vw,3.4rem);color:#fff;margin:14px auto 18px;max-width:16ch;line-height:1.12}
.lp-hero p{font-size:clamp(1.05rem,2.5vw,1.3rem);color:rgba(255,255,255,.9);max-width:60ch;margin:0 auto 30px;line-height:1.6}
.lp-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lp-sec{max-width:1080px;margin:0 auto;padding:70px 22px}
.lp-sec h2{font-size:clamp(1.6rem,3.5vw,2.3rem);text-align:center;color:var(--navy);margin-bottom:10px}
.lp-sec .sub{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto 44px;font-size:1.05rem}
.lp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;counter-reset:s}
.lp-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative;box-shadow:0 14px 34px -26px rgba(21,37,48,.5)}
.lp-step .num{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-family:'Frank Ruhl Libre';margin-bottom:14px}
.lp-step h3{font-size:1.2rem;color:var(--navy);margin-bottom:7px}
.lp-step p{color:var(--muted);font-size:.98rem;line-height:1.6}
.lp-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.lp-feat{display:flex;gap:12px;align-items:flex-start}
.lp-feat svg{flex:none;color:var(--gold);margin-top:2px}
.lp-feat b{display:block;color:var(--navy);margin-bottom:3px}
.lp-feat span{color:var(--muted);font-size:.95rem;line-height:1.55}
.lp-price{background:var(--sand);text-align:center}
.lp-price .pcard{background:#fff;border:1px solid var(--line);border-radius:20px;max-width:420px;margin:0 auto;padding:34px;box-shadow:var(--shadow)}
.lp-price .amt{font-family:'Frank Ruhl Libre';font-size:2.6rem;color:var(--navy);font-weight:900}
.lp-final{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;text-align:center;padding:70px 22px}
.lp-final h2{color:#fff}
.lp-foot{text-align:center;padding:26px;color:var(--muted);font-size:.9rem;background:var(--cream)}

/* projects list (dashboard) */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px}
.proj-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff}
.proj-card h3{font-size:1.15rem;color:var(--navy);margin-bottom:6px}

@media(max-width:680px){
  .grid2{grid-template-columns:1fr}
  /* keep quick-nav reachable on mobile — wrap it under the logo instead of hiding it */
  .admin-top-in{flex-wrap:wrap;row-gap:6px}
  .admin-nav{order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;margin-inline-start:0}
  .admin-nav a{font-size:.86rem;padding:.35em .7em}
  .wiz-actions{flex-direction:column-reverse}
  .wiz-actions .btn{width:100%}
  .wiz,.dash{padding:18px 14px 90px}
  .card{padding:18px 16px}
  .btn{min-height:44px}
  .overview{flex-direction:column;align-items:stretch}
  .overview .actions{flex-direction:column}
  .overview .actions .btn,.overview .actions a{width:100%}
  .stepper button{font-size:.8rem;padding:.38em .7em}
  .lp-hero{padding:56px 18px 64px}
  .lp-sec{padding:50px 18px}
  .import-row{flex-direction:column}
  .import-row .btn{width:100%}
}

/* ===== Help widget (floating) ===== */
.tb-help-btn{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.8em 1.3em;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;box-shadow:0 14px 34px -14px rgba(21,37,48,.7);transition:.2s;min-height:48px}
.tb-help-btn:hover{background:var(--navy-dark);transform:translateY(-2px)}
.tb-help-btn.hidden{opacity:0;pointer-events:none}
.tb-help-panel{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:61;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 44px));background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -24px rgba(21,37,48,.6);display:none;flex-direction:column;overflow:hidden}
.tb-help-panel.on{display:flex}
.tb-help-head{background:var(--navy);color:#fff;padding:16px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tb-help-head b{font-family:'Frank Ruhl Libre',serif;font-size:1.1rem;display:block}
.tb-help-head small{color:rgba(255,255,255,.8);font-size:.8rem}
.tb-help-x{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;min-height:44px;min-width:44px}
.tb-help-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.tb-hint{color:var(--muted);font-size:.9rem;margin:0}
.tb-chips{display:flex;flex-wrap:wrap;gap:7px}
.tb-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45em .9em;font-family:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;text-align:start;transition:.15s}
.tb-chip:hover{border-color:var(--gold);color:var(--navy)}
.tb-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tb-primary{background:var(--gold);color:#20313d;border:0;border-radius:10px;padding:.75em 1em;font-family:inherit;font-size:.98rem;font-weight:500;cursor:pointer;min-height:44px;transition:.15s}
.tb-primary:hover{background:#b8913f}
.tb-primary:disabled{opacity:.6}
.tb-ghost{background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:10px;padding:.7em 1em;font-family:inherit;font-size:.94rem;cursor:pointer;min-height:44px;transition:.15s}
.tb-ghost:hover{border-color:var(--gold)}
.tb-ghost.wide,.tb-primary.wide{width:100%}
.tb-log{display:flex;flex-direction:column;gap:9px;max-height:300px;overflow-y:auto;padding-inline-end:4px}
.tb-msg{padding:.65em .9em;border-radius:14px;font-size:.94rem;line-height:1.6;max-width:88%;white-space:pre-wrap}
.tb-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.tb-msg.me{background:var(--navy);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.tb-thinking{opacity:.6;letter-spacing:.2em}
.tb-row{display:flex;gap:8px;align-items:flex-end}
.tb-input{flex:1;resize:none;font-family:inherit;font-size:.95rem;border:1px solid var(--line);border-radius:10px;padding:.6em .8em}
.tb-send{background:var(--navy);color:#fff;border:0;border-radius:10px;padding:.6em 1.1em;font-family:inherit;cursor:pointer;min-height:44px}
.tb-help-body input,.tb-help-body textarea{font-family:inherit;font-size:.95rem;border:1px solid var(--line);border-radius:10px;padding:.62em .8em;width:100%;background:#fff}
.tb-err{color:var(--bad);font-size:.88rem;margin:0;min-height:1em}
.tb-done{text-align:center;padding:22px 6px}
.tb-done-ic{color:var(--ok);display:flex;justify-content:center;margin-bottom:8px}
.tb-done h3{color:var(--navy);margin-bottom:6px}
.tb-done p{color:var(--muted);font-size:.94rem;margin-bottom:16px}
@media(max-width:480px){
  .tb-help-panel{inset-block-end:0;inset-inline-end:0;inset-inline-start:0;width:100%;max-height:88vh;border-radius:18px 18px 0 0}
  .tb-help-btn{inset-block-end:16px;inset-inline-end:16px}
}

/* FAQ on the landing page */
.lp-faq{max-width:760px;margin:0 auto}
.lp-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.lp-faq summary{cursor:pointer;padding:16px 20px;font-weight:500;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1;flex:none}
.lp-faq details[open] summary::after{content:"−"}
.lp-faq summary:hover{background:#fffdf6}
.lp-faq .ans{padding:0 20px 18px;color:var(--muted);line-height:1.75}

/* ===== Projects list ===== */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.proj-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.proj-top h3{color:var(--navy);font-size:1.15rem;margin:6px 0 2px}
.proj-url{color:var(--muted);font-size:.82rem;word-break:break-all}
.proj-status{font-size:.78rem;font-weight:600}
.proj-status.live{color:var(--ok)}
.proj-status.draft{color:var(--gold)}
.proj-status.pending{color:#b8801f}
.proj-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== Editor bar ===== */
.editor-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.editor-bar .status{margin-inline-start:auto}
.editor-bar .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== AI edit chat ===== */
.ai-chat .chat-log{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow-y:auto;margin:14px 0;padding-inline-end:4px}
.ai-chat .chat-log:empty{display:none}
.cbub{padding:.7em 1em;border-radius:14px;font-size:.95rem;line-height:1.65;max-width:90%;white-space:pre-wrap}
.cbub.bot{background:var(--cream);border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.cbub.me{background:var(--navy);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.cbub .plan{white-space:pre-wrap}
.cbub-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-input{flex:1;resize:vertical;min-height:52px}

/* image picker (choose from pool) */
.img-picker{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--cream)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:6px}
.pick-grid img{aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer;transition:.15s}
.pick-grid img:hover{outline:2px solid var(--gold)}

/* ===== Modal (checkout) ===== */
.tb-modal{position:fixed;inset:0;z-index:80;background:rgba(21,37,48,.55);display:grid;place-items:center;padding:20px}
.tb-modal-card{background:var(--cream);border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:26px 24px;position:relative}
.tb-modal-x{position:absolute;top:10px;inset-inline-start:14px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer}
.tb-modal-title{color:var(--navy);font-size:1.3rem;margin-bottom:12px}

/* ===== Referral card ===== */
.ref-code{font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:1.3rem;letter-spacing:.05em;color:var(--navy);background:#fffdf6;border:2px dashed var(--gold);border-radius:10px;padding:.4em 1em}
.ref-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ref-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.ref-stat b{display:block;font-family:'Frank Ruhl Libre',serif;font-size:1.5rem;color:var(--navy)}
.ref-stat span{font-size:.8rem;color:var(--muted)}
@media(max-width:560px){.ref-stats{grid-template-columns:1fr}}

/* onboarding: yes/no toggle + virtual-tour steps */
.yn{display:inline-flex;gap:8px}
.yn-btn{font-family:inherit;font-size:.95rem;padding:.5em 1.4em;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:.15s}
.yn-btn:hover{border-color:var(--gold)}
.yn-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.card.tour{border-color:var(--gold-soft);background:#fffdf6}
.tour-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.tour-step{display:flex;gap:10px;align-items:flex-start}
.tour-step b{color:var(--navy)}
.tour-step p{margin:2px 0 0;font-size:.85rem}
.tour-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#20313d;font-weight:700;display:grid;place-items:center;font-size:.9rem}
@media(max-width:640px){.tour-steps{grid-template-columns:1fr}}

/* auth: password strength meter + requirement checklist + register questions */
.pw-meter{height:6px;border-radius:999px;background:var(--sand);overflow:hidden;margin:-4px 0 8px}
.pw-bar{height:100%;width:0;border-radius:999px;transition:width .2s,background .2s;background:#d9534f}
.pw-bar.s0{width:0}
.pw-bar.s1{width:25%;background:#d9534f}
.pw-bar.s2{width:50%;background:#e0a800}
.pw-bar.s3{width:75%;background:#e0a800}
.pw-bar.s4{width:100%;background:#3fae5a}
.pw-reqs{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.pw-reqs li{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.pw-reqs li::before{content:"○";color:var(--muted)}
.pw-reqs li.ok{color:#2e7d43}
.pw-reqs li.ok::before{content:"✓";color:#3fae5a;font-weight:700}
.q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.q>span{font-size:.95rem;color:var(--navy)}
.yn-radio{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:.9rem;padding:.3em .8em;border:1px solid var(--line);border-radius:999px}
.yn-radio input{accent-color:var(--navy)}
.yn-radio:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}

/* wizard context banner (build vs update) */
.wiz-context{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin-bottom:16px}
.wiz-context b{color:var(--navy)}
/* landing quick-nav links (visitors) */
.lp-nav-links{display:flex;align-items:center;gap:18px;font-size:.94rem}
.lp-nav-links a{color:var(--navy)}
.lp-nav-links a:hover{color:var(--gold)}
@media(max-width:720px){.lp-nav-links{display:none}}

/* danger buttons + account danger zone */
.btn.danger{background:#d9534f;color:#fff;border-color:#d9534f}
.btn.danger:hover{background:#c9302c}
.btn.ghost.danger-text{color:#c9302c}
.btn.ghost.danger-text:hover{background:#fdecea;color:#c9302c;border-color:#e6b0ab}
.danger-zone{border-color:#e6b0ab;background:#fdf7f6}
.danger-zone h3{color:#c9302c}

/* build progress overlay */
.bp-overlay{position:fixed;inset:0;background:rgba(30,52,68,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:9999;animation:bpfade .2s ease}
@keyframes bpfade{from{opacity:0}to{opacity:1}}
.bp-card{background:#fff;border-radius:18px;padding:30px 34px;width:min(92vw,420px);box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center}
.bp-spinner{width:44px;height:44px;margin:0 auto 14px;border:4px solid var(--sand);border-top-color:var(--gold);border-radius:50%;animation:bpspin 1s linear infinite}
@keyframes bpspin{to{transform:rotate(360deg)}}
.bp-title{color:var(--navy);margin:0 0 16px;font-family:'Frank Ruhl Libre',serif}
.bp-track{height:9px;border-radius:999px;background:var(--sand);overflow:hidden;margin-bottom:18px}
.bp-bar{height:100%;width:7%;background:linear-gradient(90deg,var(--gold-soft),var(--gold));border-radius:999px;transition:width .5s ease}
.bp-steps{display:flex;flex-direction:column;gap:9px;text-align:right}
.bp-step{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem;transition:color .2s}
.bp-dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.7rem}
.bp-step.active{color:var(--navy);font-weight:600}
.bp-step.active .bp-dot{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.2)}
.bp-step.done{color:var(--navy)}
.bp-step.done .bp-dot{background:#3fae5a;border-color:#3fae5a}
.bp-step.done .bp-dot::after{content:"✓";color:#fff}

.img-broken{opacity:.4;filter:grayscale(1)}

/* legal pages (terms / privacy) */
body.legal{background:var(--cream)}
.legal-wrap{max-width:760px;margin:0 auto;padding:24px 20px 60px}
.legal-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0 18px;border-bottom:1px solid var(--line);margin-bottom:24px;font-size:.9rem}
.legal-nav .lp-logo{display:flex;align-items:center;gap:8px;font-family:'Frank Ruhl Libre',serif;font-weight:700;color:var(--navy)}
.legal-doc h1{font-size:1.7rem;margin:0 0 8px;color:var(--navy)}
.legal-doc h2{font-size:1.2rem;margin:26px 0 8px;color:var(--navy)}
.legal-doc h3{font-size:1.02rem;margin:18px 0 6px}
.legal-doc p{margin:0 0 10px;line-height:1.75}
.legal-doc ul{margin:0 0 12px;padding-inline-start:22px}
.legal-doc li{margin:3px 0;line-height:1.7}
.legal-doc a{color:var(--navy);text-decoration:underline}
.legal-doc blockquote{background:#fffdf6;border:1px solid var(--gold-soft);border-radius:10px;padding:12px 16px;margin:0 0 16px;color:#6b5a2e}
.legal-doc blockquote p{margin:0}
.legal-back{margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}

/* admin visit-analytics bars */
.vstat-list{display:flex;flex-direction:column;gap:6px}
.vstat-day{display:flex;align-items:center;gap:10px;font-size:.85rem}
.vstat-date{flex:none;width:44px;color:var(--muted);font-variant-numeric:tabular-nums}
.vstat-track{flex:1;height:14px;background:var(--sand);border-radius:999px;overflow:hidden}
.vstat-bar{height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--gold));border-radius:999px;min-width:2px;transition:width .3s}
.vstat-num{flex:none;color:var(--navy);font-variant-numeric:tabular-nums;font-size:.8rem}
@media(max-width:560px){.vstat-num{font-size:.72rem}.vstat-date{width:38px}}

/* hour-of-day chart */
.hour-chart{display:flex;align-items:flex-end;gap:3px;height:80px;padding-top:8px}
.hour-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.hour-bar{width:100%;max-width:16px;background:linear-gradient(180deg,var(--gold),var(--gold-soft));border-radius:3px 3px 0 0;min-height:3px}
.hour-lbl{font-size:.62rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- directory (regional SEO pages) ---------- */
body.dir .lp-hero.dir-hero{padding:70px 20px 40px}
.dir-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:1000px;margin:0 auto}
.dir-area{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.15s;box-shadow:0 12px 30px -26px rgba(21,37,48,.5)}
.dir-area:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--navy)}
.dir-area-art{display:block;height:110px;overflow:hidden}
.dir-area-body{display:block;padding:18px 22px 22px}
.dir-area h3{color:var(--navy);font-size:1.2rem;margin-bottom:6px}
.dir-area p{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.dir-count{font-size:.82rem;color:var(--gold);font-weight:600}
/* generated area artwork — no external assets, so the CSP stays tight */
.dir-art{display:block;width:100%;height:100%;object-fit:cover}
body.dir .lp-hero.dir-hero.has-art{position:relative;padding:0;overflow:hidden}
.dir-hero.has-art .dir-art{position:absolute;inset:0;height:100%;z-index:0}
/* dark scrim over the artwork — the hero keeps its white-on-navy contrast */
.dir-hero-in{position:relative;z-index:1;padding:74px 20px 46px;background:linear-gradient(180deg,rgba(20,32,42,.15),rgba(20,32,42,.62) 55%,rgba(20,32,42,.78))}
/* sub-area nav */
.dir-subs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px}
.dir-sub{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4em 1em;font-size:.88rem;color:var(--ink);transition:.15s}
.dir-sub:hover{border-color:var(--gold);color:var(--navy)}
.dir-sub.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* filter bar */
.dir-filters{margin:8px 0 4px;display:flex;flex-direction:column;gap:10px;align-items:center}
.dir-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.dir-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35em .9em;font-size:.85rem;color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s}
.dir-chip:hover{border-color:var(--gold)}
.dir-chip.on{background:#fffdf6;border-color:var(--gold);color:#6b5a2e;font-weight:600}
.dir-selects{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* width:auto — the global rule stretches every select to 100% */
.dir-selects select{width:auto;min-width:130px;padding:.42em .8em;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:.88rem;color:var(--ink)}
.dir-fcount{font-size:.82rem;margin:0;min-height:1em}
.dir-noresults{text-align:center;margin-top:18px}
.linklike{background:none;border:0;padding:0;color:var(--gold);font:inherit;cursor:pointer;text-decoration:underline}
.dir-sec{max-width:1000px;margin:0 auto}
.dir-intro{max-width:760px;margin:0 auto 30px;text-align:start}
.dir-intro p{color:var(--ink);line-height:1.8;margin-bottom:12px}
.dir-intro h3{color:var(--navy);margin:18px 0 8px}
.dir-highlights{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.dir-highlights li{background:#fffdf6;border:1px solid var(--gold-soft);border-radius:999px;padding:.35em .9em;font-size:.88rem;color:#6b5a2e}
.dir-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:14px}
.dir-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s}
.dir-card[hidden]{display:none}
.dir-card:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--navy)}
.dir-thumb{position:relative;display:block;height:170px;background:#f4f1ea;overflow:hidden}
/* the photo sits on top of the monogram tile; if it fails to load it is removed
   and the tile shows through — no broken-image icons in the grid */
.dir-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dir-thumb-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2.6rem;font-weight:700;color:rgba(255,255,255,.9)}
.dir-price{position:absolute;inset-inline-start:10px;bottom:10px;background:rgba(255,255,255,.94);color:var(--navy);border-radius:999px;padding:.25em .8em;font-size:.8rem;font-weight:700}
.dir-body{display:block;padding:16px 18px 18px}
.dir-card h3{color:var(--navy);font-size:1.05rem;margin-bottom:4px}
.dir-meta{color:var(--muted);font-size:.85rem;display:block}
.dir-card p{color:var(--ink);font-size:.9rem;margin:8px 0}
.dir-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.dir-tag{background:#f7f5f0;border-radius:999px;padding:.2em .7em;font-size:.76rem;color:#5b5a54;white-space:nowrap}
.dir-more{color:var(--gold);font-size:.85rem;font-weight:600;display:block;margin-top:6px}
/* listing page */
.dir-photo{max-width:1000px;margin:0 auto;padding:0 20px}
.dir-photo img{width:100%;max-height:420px;object-fit:cover;border-radius:0 0 18px 18px;display:block}
.dir-facts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.dir-fact{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5em 1em;font-size:.9rem}
.dir-fact b{color:var(--navy);font-weight:600}
.dir-amenities{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.dir-amenities li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55em .9em;font-size:.9rem}
.dir-amenities span{font-size:1.05rem}
/* amenity checkboxes on the opt-in form */
.am-grid{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.am-grid legend{font-size:.85rem;color:var(--muted);padding:0 6px}
.am-box{display:flex;align-items:center;gap:7px;font-size:.86rem;cursor:pointer;margin:0}
.am-box input{width:auto;margin:0}
.dir-cta{background:var(--navy);color:#fff;text-align:center;padding:50px 20px;margin-top:30px}
.dir-cta h2{color:#fff;font-size:1.5rem;margin-bottom:8px}
.dir-cta p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 20px}
/* ghost buttons default to navy text — invisible on the navy CTA band */
.dir-cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.dir-cta .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}