/* =====================================================================
   Hamilton Chiropractic Clinic — MOCKUP website stylesheet
   Design system from the Design Concept report:
   Navy #163a5f · Teal #1f8aa6 · Coral #e2725b (actions only) · Sand #f3ede3
   This is a demonstration build for design review — not the production site.
   ===================================================================== */

:root{
  --navy:#218AA6; --navy-2:#3C98B1; --teal:#87D5E8; --teal-d:#69A6B5;
  --coral:#e2725b; --coral-d:#B95D4B; --sand:#f3ede3; --ink:#22303c;
  --gold:#c38f3c; --gold-d:#a97731;
  --muted:#5b6b78; --line:#e2e8ec; --bg:#ffffff; --bg-soft:#f6f9fa;
  --good:#1e8449; --star:#f4b400;
  --hero-1:#165B6E; --hero-2:#218AA6; --hero-3:#71B3C3; --footer-bg:#176174;
  --maxw:1180px; --radius:14px; --shadow:0 10px 30px rgba(22,58,95,.10);
  --shadow-sm:0 4px 14px rgba(22,58,95,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Inter','Source Sans 3',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins','Montserrat',-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--navy); line-height:1.18; margin:0 0 .5em; font-weight:700;}
h1{font-size:2.7rem; letter-spacing:-.5px;}
h2{font-size:2rem; letter-spacing:-.3px;}
h3{font-size:1.3rem;}
p{margin:0 0 1rem;}
a{color:var(--teal-d); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.center{text-align:center;}
.muted{color:var(--muted);}
.eyebrow{text-transform:uppercase; letter-spacing:2.5px; font-size:.78rem; font-weight:700; color:var(--teal-d); margin-bottom:10px;}
section{padding:72px 0;}
section.soft{background:var(--bg-soft);}
section.sand{background:var(--sand);}
.section-head{max-width:720px; margin:0 auto 40px;}
.section-head.center{text-align:center;}
.lead{font-size:1.15rem; color:var(--muted);}

/* ---------- Demo banner ---------- */
.demobar{
  background:#163a5f; color:#fff; text-align:center; font-size:.82rem; padding:7px 14px; letter-spacing:.3px;
}
.demobar strong{color:#ffd9c7;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  font-family:inherit; font-weight:700; font-size:1rem; padding:14px 26px; border-radius:50px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; text-decoration:none;}
.btn:hover{transform:translateY(-2px); text-decoration:none;}
.btn-cta{background:var(--gold); color:#fff; box-shadow:0 8px 20px rgba(195,143,60,.35);}
.btn-cta:hover{background:var(--gold-d); color:#fff;}
a.btn[href^="tel:"]{background:var(--teal); color:var(--navy); box-shadow:0 8px 20px rgba(135,213,232,.45);}
a.btn[href^="tel:"]:hover{background:var(--teal-d); color:#fff;}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:var(--teal-d); color:#fff;}
.btn-ghost{background:transparent; color:var(--navy); border:2px solid var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff;}
.btn-ghost-light{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.8);}
.btn-ghost-light:hover{background:#fff; color:var(--navy);}
.btn-sm{padding:9px 18px; font-size:.9rem;}
.btn-block{width:100%; justify-content:center;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy); color:#dce6ee; font-size:.86rem;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:8px; padding-bottom:8px;}
.topbar a{color:#fff;}
.topbar .tb-right{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.topbar .tb-item{display:flex; gap:7px; align-items:center;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 22px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand .mark{width:40px; height:40px; flex:0 0 40px;}
.brand .bt{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); line-height:1.05; font-size:1.06rem;}
.brand .bt small{display:block; font-weight:600; font-size:.66rem; letter-spacing:2px; color:var(--teal-d); text-transform:uppercase;}
.menu{display:flex; gap:5px; align-items:center; list-style:none; margin:0; padding:0;}
.menu a{display:block; padding:9px 13px; border-radius:8px; color:var(--navy); font-weight:600; font-size:.95rem;}
.menu a:hover{background:var(--bg-soft); text-decoration:none;}
.menu a.active{color:var(--teal-d);}
.nav-cta{display:flex; align-items:center; gap:8px;}
.nav-cta .btn{padding:7px 14px; font-size:.8rem; gap:5px; white-space:nowrap;}
.hamburger{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px;}
.hamburger span{width:24px; height:3px; background:var(--navy); border-radius:3px; display:block;}

/* ---------- Hero ---------- */
.hero{position:relative; background:linear-gradient(120deg,var(--hero-1) 0%, var(--hero-2) 45%, var(--hero-3) 100%); color:#fff; overflow:hidden;}
.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:64px; padding-bottom:64px;}
.hero h1{color:#fff; margin-bottom:14px;}
.hero p.sub{font-size:1.18rem; color:#e7f1f6; margin-bottom:24px; max-width:34ch;}
.hero .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.hero .hero-points{display:flex; gap:18px; flex-wrap:wrap; font-size:.92rem; color:#d6e6ee;}
.hero .hero-points span{display:flex; gap:7px; align-items:center;}
.hero-art{position:relative;}
.hero-tagline{text-transform:uppercase; letter-spacing:2px; font-size:.85rem; font-weight:700; color:#fff; margin-bottom:14px;}
.offer-chip{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35); border-radius:14px; padding:12px 18px; margin-bottom:18px;}
.offer-chip .oc-label{font-size:.98rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; opacity:1;}
.offer-chip .oc-headline{font-family:'Poppins',sans-serif; font-weight:400; font-size:1.08rem; line-height:1.3;}
.offer-chip .oc-sub{font-size:.85rem; opacity:.9;}
.offer-chip b{color:#ffd9c7;}

/* ---------- Stock image placeholder ---------- */
.ph{position:relative; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg,#cfe0e8,#abc6d4);
  display:flex; align-items:center; justify-content:center; color:#34566a; min-height:240px;}
.ph .ph-inner{display:flex; flex-direction:column; align-items:center; gap:8px; color:#34566a; text-align:center; padding:18px;}
.ph .ph-icon{opacity:.55;}
.ph .ph-cap{font-size:.8rem; color:#3a5568; max-width:30ch;}
.ph::after{content:"STOCK IMAGE"; position:absolute; top:12px; left:12px; background:var(--coral); color:#fff;
  font-size:.66rem; font-weight:800; letter-spacing:1px; padding:4px 9px; border-radius:5px; box-shadow:var(--shadow-sm);}
.ph.tall{min-height:420px;}
.ph.round{border-radius:50%; min-height:0; aspect-ratio:1/1;}
.ph.hero-ph{min-height:380px; background:linear-gradient(135deg,#2a6f8a,#15405c);}
.ph.hero-ph .ph-inner{color:#dcebf0; color:#e7f1f6;}
.ph.hero-ph .ph-cap{color:#cfe0ea;}
.stock-note{font-size:.74rem; color:var(--muted); margin-top:6px; font-style:italic;}

/* ---------- Trust bar ---------- */
.trust{background:var(--navy); color:#fff;}
.trust .container{display:flex; justify-content:space-around; gap:20px; flex-wrap:wrap; padding:22px; text-align:center;}
.trust .ti{display:flex; flex-direction:column; gap:2px; min-width:140px;}
.trust .ti b{font-family:'Poppins',sans-serif; font-size:1.5rem; color:#fff;}
.trust .ti span{font-size:.85rem; color:#bdd0dd;}
.trust .stars{color:var(--star); letter-spacing:2px;}

/* ---------- Cards ---------- */
.grid{display:grid; gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .card-body{padding:22px 22px 24px;}
.card h3{margin-bottom:8px;}
.card .icon-badge{width:64px; height:64px; border-radius:16px; background:var(--sand); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--teal-d); overflow:hidden;}
.card .icon-badge svg{width:30px; height:30px;}
.card .icon-badge.photo{background:none;}
.card .icon-badge.photo img{width:100%; height:100%; object-fit:cover; display:block;}
.card .more{font-weight:700; color:var(--coral-d); margin-top:6px; display:inline-block;}
.card-link{text-decoration:none; color:inherit;}
.card-link:hover{text-decoration:none;}

/* ---------- Split feature ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;}
.split.rev .split-media{order:2;}
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{position:relative; padding-left:32px; margin-bottom:11px;}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; background:var(--teal); color:#fff;
  border-radius:50%; font-size:.8rem; font-weight:800; display:flex; align-items:center; justify-content:center;}

/* ---------- Team ---------- */
.team-card{text-align:center;}
.team-card .ph.round{width:150px; height:150px; margin:0 auto 16px;}
.team-card .role{color:var(--teal-d); font-weight:700; font-size:.9rem; margin-bottom:6px;}
.bio-head{display:grid; grid-template-columns:230px 1fr; gap:34px; align-items:start;}
.cred-row{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px;}
.chip{background:var(--sand); color:var(--navy); border-radius:50px; padding:5px 13px; font-size:.82rem; font-weight:600;}
.social-row{display:flex; gap:10px; margin-top:8px; align-items:center; flex-wrap:wrap;}
.social-btn{display:inline-flex; gap:8px; align-items:center; background:#0a66c2; color:#fff; padding:8px 15px; border-radius:8px; font-weight:700; font-size:.88rem;}
.social-btn:hover{color:#fff; text-decoration:none; opacity:.92;}
.social-btn.placeholder{background:#eef2f5; color:var(--muted); border:1px dashed #b9c6cf;}

/* ---------- Reviews ---------- */
.review{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); height:100%;}
.review .stars{color:var(--star); letter-spacing:2px; font-size:1.05rem;}
.review p{font-size:1.02rem; margin:10px 0 14px;}
.review .who{display:flex; align-items:center; gap:11px;}
.review .who .av{width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.review .who b{display:block; font-size:.95rem;}
.review .who span{font-size:.8rem; color:var(--muted);}
.g-pill{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:50px; padding:9px 18px; box-shadow:var(--shadow-sm); font-weight:600;}

/* ---------- Pricing ---------- */
.price-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);}
.price-table th,.price-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line);}
.price-table th{background:var(--navy); color:#fff; font-family:'Poppins',sans-serif;}
.price-table td:last-child{text-align:right; font-weight:700; color:var(--navy); white-space:nowrap;}
.price-table tr:last-child td{border-bottom:none;}
.price-table tbody tr:nth-child(even){background:var(--bg-soft);}

/* ---------- Steps ---------- */
.steps{counter-reset:step; display:grid; gap:22px;}
.step{display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start;}
.step .num{counter-increment:step; width:54px; height:54px; border-radius:50%; background:var(--teal); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.4rem; display:flex; align-items:center; justify-content:center;}
.step .num::before{content:counter(step);}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.field{margin-bottom:16px;}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--navy);}
.field input,.field select,.field textarea{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:1rem; background:#fff; color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal);}
.info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
.info-row .ico{width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:var(--sand); color:var(--teal-d); display:flex; align-items:center; justify-content:center;}
.info-row b{color:var(--navy);}
.map-ph{min-height:300px;}
.map-ph::after{content:"STOCK MAP";}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer-bg); color:#c4d4e0; padding:54px 0 26px; font-size:.92rem;}
.site-footer h4{color:#fff; font-size:1rem; margin-bottom:14px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;}
.site-footer a{color:#c4d4e0;}
.site-footer a:hover{color:#fff;}
.footer-list{list-style:none; padding:0; margin:0;}
.footer-list li{margin-bottom:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13); margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.82rem; color:#90a8ba;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;}

/* ---------- Illustrative / placeholder flag ---------- */
.illus{display:inline-block; background:#fff4ef; color:var(--coral-d); border:1px dashed var(--coral); font-size:.7rem;
  font-weight:700; letter-spacing:.4px; padding:2px 8px; border-radius:5px; vertical-align:middle;}
.draft-note{background:#fff8f1; border-left:4px solid var(--coral); padding:12px 16px; border-radius:0 8px 8px 0; font-size:.86rem; color:#7a4a39; margin:14px 0;}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar{display:none; position:fixed; bottom:0; left:0; right:0; z-index:70; background:#fff; border-top:1px solid var(--line);
  padding:8px 22px; gap:20px; box-shadow:0 -6px 20px rgba(0,0,0,.08);}
.mobile-bar a,.mobile-bar button{flex:1; justify-content:center; padding:8px 12px; font-size:.85rem;}

/* ---------- Booking modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(16,32,52,.6); z-index:200; display:none;
  align-items:flex-start; justify-content:center; padding:34px 16px; overflow-y:auto;}
.modal-overlay.open{display:flex;}
.modal{background:#fff; border-radius:18px; max-width:620px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.4); overflow:hidden; animation:pop .2s ease;}
@keyframes pop{from{transform:translateY(14px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-head{background:linear-gradient(120deg,#163a5f,#1f8aa6); color:#fff; padding:20px 24px; display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{color:#fff; margin:0; font-size:1.25rem;}
.modal-head .x{background:rgba(255,255,255,.18); border:none; color:#fff; width:34px; height:34px; border-radius:9px; font-size:1.2rem; cursor:pointer;}
.modal-demo{background:#fff4ef; color:#9a4e38; text-align:center; font-size:.8rem; padding:7px; font-weight:600; border-bottom:1px solid #f3d9cd;}
.modal-body{padding:24px;}
.progress{display:flex; gap:6px; margin-bottom:22px;}
.progress .dot{flex:1; height:6px; border-radius:6px; background:var(--line);}
.progress .dot.on{background:var(--teal);}
.opt-grid{display:grid; gap:12px;}
.opt-grid.two{grid-template-columns:1fr 1fr;}
.opt{border:1.6px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; gap:12px; align-items:center; transition:border-color .12s, background .12s;}
.opt:hover{border-color:var(--teal);}
.opt.sel{border-color:var(--teal); background:#eef7fa;}
.opt .av{width:42px; height:42px; border-radius:50%; background:var(--sand); color:var(--teal-d); display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 42px;}
.opt b{display:block;}
.opt small{color:var(--muted);}
.slot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.slot{border:1.5px solid var(--line); border-radius:9px; padding:10px 6px; text-align:center; cursor:pointer; font-weight:600; font-size:.92rem;}
.slot:hover{border-color:var(--teal);}
.slot.sel{background:var(--teal); color:#fff; border-color:var(--teal);}
.slot.off{opacity:.35; cursor:not-allowed; text-decoration:line-through;}
.modal-foot{display:flex; justify-content:space-between; gap:12px; margin-top:24px;}
.day-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.day-tab{border:1.5px solid var(--line); border-radius:9px; padding:8px 12px; cursor:pointer; font-weight:600; font-size:.85rem; text-align:center;}
.day-tab.sel{background:var(--navy); color:#fff; border-color:var(--navy);}
.confirm-tick{width:74px; height:74px; border-radius:50%; background:var(--good); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin:6px auto 16px;}
.summary{background:var(--bg-soft); border-radius:12px; padding:16px 18px; margin:16px 0; font-size:.95rem;}
.summary div{display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line);}
.summary div:last-child{border-bottom:none;}
.summary span:first-child{color:var(--muted);}
.summary span:last-child{font-weight:700; color:var(--navy);}

/* ---------- Breadcrumb / page hero ---------- */
.page-hero{background:var(--navy); color:#fff; padding:54px 0;}
.page-hero h1{color:#fff; margin:0;}
.page-hero p{color:#cdddea; margin:10px 0 0; max-width:60ch;}
.crumb{font-size:.82rem; color:#9fb8c9; margin-bottom:10px;}
.crumb a{color:#cfe0ea;}

/* ---------- Utilities ---------- */
.mt0{margin-top:0;} .mb0{margin-bottom:0;} .mt-s{margin-top:10px;}
.tag-soft{display:inline-block; background:var(--sand); color:var(--navy); font-weight:600; font-size:.8rem; padding:3px 11px; border-radius:50px;}
.hr{height:1px; background:var(--line); border:none; margin:26px 0;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  h1{font-size:2.1rem;} h2{font-size:1.6rem;}
  .hero .container{grid-template-columns:1fr; padding-top:40px;}
  .hero-art{order:-1;}
  .split,.contact-grid,.bio-head{grid-template-columns:1fr; gap:26px;}
  .split.rev .split-media{order:0;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .menu,.topbar{display:none;}
  .nav-cta .btn{display:none;}
  .hamburger{display:flex;}
  .site-header.open .menu{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
     background:#fff; border-bottom:1px solid var(--line); padding:10px 16px; gap:2px; box-shadow:var(--shadow);}
  .site-header.open .menu a{padding:12px;}
  .mobile-bar{display:flex;}
  body{padding-bottom:64px;}
  .slot-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .opt-grid.two{grid-template-columns:1fr;}
  .bio-head{grid-template-columns:1fr;}
  section{padding:48px 0;}
}

/* =====================================================================
   DESIGN TOOL + IMAGE UPLOAD (demo-only, PIN-gated, removed in final)
   ===================================================================== */
/* Header palette button */
.palette-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:9px; border:1.5px solid var(--line); background:#fff; cursor:pointer; color:var(--navy);
  transition:background .12s, border-color .12s;}
.palette-btn:hover{background:var(--bg-soft); border-color:var(--teal);}
.palette-btn svg{width:20px; height:20px;}

/* Generic overlay for tool + pin */
.dt-overlay{position:fixed; inset:0; background:rgba(16,32,52,.6); z-index:300; display:none;
  align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto;}
.dt-overlay.open{display:flex;}
.dt-modal{background:#fff; border-radius:18px; width:100%; max-width:760px; box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden; animation:pop .2s ease;}
.dt-modal.narrow{max-width:380px;}
.dt-head{background:linear-gradient(120deg,#163a5f,#1f8aa6); color:#fff; padding:18px 22px;
  display:flex; justify-content:space-between; align-items:center;}
.dt-head h3{color:#fff; margin:0; font-size:1.2rem;}
.dt-head .x{background:rgba(255,255,255,.18); border:none; color:#fff; width:34px; height:34px; border-radius:9px; font-size:1.2rem; cursor:pointer;}
.dt-demo{background:#fff4ef; color:#9a4e38; text-align:center; font-size:.78rem; padding:7px; font-weight:600; border-bottom:1px solid #f3d9cd;}
.dt-body{padding:22px; display:grid; grid-template-columns:1.5fr 1fr; gap:22px;}
@media (max-width:680px){ .dt-body{grid-template-columns:1fr;} }
.dt-body h4{margin:0 0 10px; font-size:.95rem; color:var(--navy);}

/* Colour role rows */
.dt-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);}
.dt-row:last-child{border-bottom:none;}
.dt-swatch{width:40px; height:40px; flex:0 0 40px; border-radius:9px; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm); cursor:pointer; position:relative; overflow:hidden;}
.dt-swatch input[type=color]{position:absolute; inset:-4px; width:130%; height:130%; border:none; padding:0; cursor:pointer; opacity:0;}
.dt-role b{display:block; font-size:.9rem; color:var(--navy);}
.dt-role small{color:var(--muted); font-size:.76rem;}
.dt-hex{margin-left:auto; font-size:.78rem; color:var(--muted); font-family:monospace; text-transform:uppercase;}

/* Saved schemes */
.dt-scheme-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.dt-scheme{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1.5px solid var(--line);
  border-radius:10px; cursor:pointer; background:#fff; text-align:left; width:100%; font:inherit;}
.dt-scheme:hover{border-color:var(--teal); background:var(--bg-soft);}
.dt-scheme.active{border-color:var(--teal); background:#eef7fa;}
.dt-scheme .chips{display:flex; gap:3px;}
.dt-scheme .chips i{width:14px; height:14px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.dt-scheme .nm{font-size:.85rem; font-weight:600; color:var(--navy);}
.dt-scheme .nm small{display:block; font-weight:400; color:var(--muted); font-size:.7rem;}
.dt-scheme .del{margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1;}
.dt-scheme .del:hover{color:var(--bad);}
.dt-save{display:flex; gap:8px; margin-top:6px;}
.dt-save input{flex:1; padding:9px 11px; border:1.5px solid var(--line); border-radius:9px; font:inherit; font-size:.85rem;}
.dt-note{font-size:.74rem; color:var(--muted); margin-top:10px;}

/* Pending-change confirm bar */
.dt-confirm{grid-column:1/-1; display:none; align-items:center; gap:12px; background:#fff8f1;
  border:1.5px solid var(--coral); border-radius:11px; padding:12px 14px; margin-top:4px;}
.dt-confirm.show{display:flex;}
.dt-confirm span{font-size:.85rem; color:#7a4a39; font-weight:600;}
.dt-confirm .sp{margin-left:auto;}

/* PIN pad */
.pin-body{padding:24px; text-align:center;}
.pin-body p{color:var(--muted); font-size:.9rem;}
.pin-input{width:160px; text-align:center; letter-spacing:6px; font-size:1.3rem; padding:11px;
  border:2px solid var(--line); border-radius:10px; margin:10px auto; display:block; font-family:monospace;}
.pin-input:focus{outline:none; border-color:var(--teal);}
.pin-msg{font-size:.82rem; min-height:1.2em; margin:6px 0;}
.pin-msg.err{color:var(--bad); font-weight:600;}
.pin-msg.lock{color:var(--bad); font-weight:700;}

/* Upload control on stock images */
.ph-upload{position:absolute; top:10px; right:10px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  background:rgba(22,58,95,.85); color:#fff; border:none; border-radius:7px; padding:6px 10px; font-size:.72rem;
  font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);}
.ph-upload:hover{background:var(--navy);}
.ph-upload svg{width:14px; height:14px;}
.ph.dragover{outline:3px dashed var(--coral); outline-offset:-6px;}
.ph.has-img{background:#000;}
.ph.has-img .ph-inner{display:none;}
.ph.has-img::after{display:none;}
.ph-reset{position:absolute; bottom:10px; right:10px; z-index:5; background:rgba(0,0,0,.6); color:#fff;
  border:none; border-radius:7px; padding:5px 9px; font-size:.7rem; font-weight:700; cursor:pointer; display:none;}
.ph.has-img.is-user .ph-reset{display:inline-block;}
.ph-imglabel{position:absolute; top:10px; left:10px; z-index:5; background:var(--good); color:#fff;
  font-size:.66rem; font-weight:800; letter-spacing:.5px; padding:4px 9px; border-radius:5px; display:none;}
.ph.has-img.is-user .ph-imglabel{display:inline-block;}

/* ---------- Real logo + social icon ---------- */
.brand-logo{height:52px; width:auto; display:block;}
@media (max-width:900px){ .brand-logo{height:42px;} }
.footer-social a svg{width:18px; height:18px;}

/* ---------- Contact: clickable icons + opening-hours status ---------- */
a.ico{cursor:pointer; text-decoration:none; transition:background .12s, color .12s;}
a.ico:hover{background:var(--teal); color:#fff;}
.hours-status{display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:.85rem; font-weight:700;
  padding:5px 12px; border-radius:50px; background:var(--bg-soft); border:1px solid var(--line);}
.hours-status .dot{width:9px; height:9px; border-radius:50%; flex:0 0 9px;}
.hours-status .dot.open{background:var(--good);}
.hours-status .dot.soon{background:var(--warn);}
.hours-status .dot.closed{background:var(--bad);}
.hours-status .hs-detail{color:var(--muted); font-weight:400;}

/* ---------- Palette button when placed in the demo banner ---------- */
.demobar .palette-btn{width:24px; height:24px; margin-left:8px; padding:0; vertical-align:middle;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14); color:#fff; border-radius:6px;}
.demobar .palette-btn:hover{background:rgba(255,255,255,.28);}
.demobar .palette-btn svg{width:15px; height:15px;}

/* ---------- Street View slot that accepts an uploaded photo ---------- */
.ph.sv-slot{height:420px; min-height:0; box-shadow:var(--shadow-sm);}
.ph.sv-slot::after{display:none;}                 /* no "STOCK IMAGE" badge over the map */
.ph.sv-slot .sv-embed{position:absolute; inset:0; width:100%; height:100%; border:0;}
.ph.sv-slot.has-img .sv-embed{display:none;}      /* uploaded photo replaces the Street View */