:root{
  --ink:#121212; --ink-2:#2a2620; --muted:#7a6f58; --line:rgba(18,18,18,.08);
  --gold-1:#fff8e6; --gold-2:#f6e3a8; --gold-3:#e6c46c; --gold-4:#c99a3a;
  --accent:#f5871f; --accent-2:#ffb24a; --ok:#1f9d55; --bad:#d9442b;
  --card:rgba(255,255,255,.66); --card-solid:#fffdf7; --glass-border:rgba(255,255,255,.75);
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --shadow:0 10px 30px -12px rgba(120,86,20,.35), 0 2px 6px rgba(120,86,20,.08);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.45;
  background:
    radial-gradient(120% 70% at 0% 0%, var(--gold-1) 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 10%, #fff3cf 0%, transparent 55%),
    linear-gradient(165deg, var(--gold-2) 0%, var(--gold-3) 55%, var(--gold-4) 120%);
  background-attachment:fixed;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.app{max-width:480px;margin:0 auto;padding:max(18px, env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));}

/* Top */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#f6e3a8;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.02em;box-shadow:var(--shadow)}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.brand strong{font-size:17px;letter-spacing:-.01em}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.icon-btn.light{background:var(--card);color:var(--ink);border:1px solid var(--glass-border);backdrop-filter:blur(14px)}
.icon-btn svg{width:20px;height:20px}

h1.hero{font-size:34px;line-height:1.05;letter-spacing:-.035em;margin:6px 0 6px;font-weight:800}
h1.hero em{font-style:normal;background:linear-gradient(90deg,var(--accent),#c96a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:0 0 20px;font-size:15px}

/* Cards */
.card{background:var(--card);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:18px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--shadow);margin-bottom:14px}
.card h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.card h2 .step{background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:2px 9px;font-size:11px;letter-spacing:.04em}

/* Services */
.svc-list{display:flex;flex-direction:column;gap:8px}
.svc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid transparent;background:rgba(255,255,255,.7);border-radius:var(--r-lg);padding:12px 14px;cursor:pointer;transition:.18s}
.svc:hover{background:#fff}
.svc .thumb{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#2a2620,#121212);color:#f6e3a8;display:grid;place-items:center;flex:none;overflow:hidden;font-size:18px}
.svc .thumb img{width:100%;height:100%;object-fit:cover}
.svc .meta{flex:1;min-width:0}
.svc .meta b{display:block;font-size:15.5px}
.svc .meta span{color:var(--muted);font-size:13px}
.svc .price{font-weight:800;font-size:15px;white-space:nowrap}
.svc[aria-pressed="true"]{border-color:var(--ink);background:#fff;box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:var(--r-pill);padding:10px 16px;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:8px}
.chip .av{width:24px;height:24px;border-radius:50%;background:var(--gold-3);display:grid;place-items:center;font-size:11px;font-weight:800;overflow:hidden}
.chip .av img{width:100%;height:100%;object-fit:cover}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Toggle like reference */
.seg{display:inline-flex;background:var(--ink);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg button{border:0;background:transparent;color:#fff;border-radius:var(--r-pill);padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink)}

/* Dates */
.month{font-weight:700;font-size:15px;margin:0 0 10px;text-transform:capitalize;display:flex;justify-content:space-between;align-items:center}
.month span{color:var(--muted);font-weight:500;font-size:13px;text-transform:none}
.dates{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;scroll-snap-type:x mandatory}
.dates::-webkit-scrollbar{display:none}
.date{flex:none;scroll-snap-align:start;width:58px;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0}
.date .wd{font-size:12px;color:var(--muted);font-weight:600;text-transform:capitalize}
.date .num{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;box-shadow:0 4px 14px -6px rgba(120,86,20,.45);transition:.18s}
.date .dot{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.date[disabled]{cursor:default;opacity:.38}
.date[disabled] .num{box-shadow:none;background:rgba(255,255,255,.45)}
.date[disabled] .dot{background:transparent}
.date[aria-pressed="true"] .num{background:linear-gradient(160deg,var(--accent-2),var(--accent));color:#fff;transform:scale(1.06);box-shadow:0 10px 22px -8px rgba(245,135,31,.75)}

/* Times */
.times-head{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 10px}
.times-head b{font-size:17px;letter-spacing:-.01em}
.times-head span{color:var(--muted);font-size:13px}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time{border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:12px 6px;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.time:hover{border-color:var(--ink)}
.time[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.period{grid-column:1/-1;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.empty{color:var(--muted);text-align:center;padding:18px 8px;font-size:14px}

/* Bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:20;pointer-events:none}
.bar-inner{max-width:480px;margin:0 auto;background:rgba(18,18,18,.94);color:#fff;border-radius:26px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 40px -14px rgba(0,0,0,.55);pointer-events:auto;backdrop-filter:blur(10px);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.bar.show .bar-inner{transform:none}
.bar-inner .sum{flex:1;min-width:0}
.bar-inner .sum b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-inner .sum span{font-size:12.5px;color:#d9cfb5}

.btn{border:0;border-radius:var(--r-pill);padding:14px 22px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(160deg,var(--accent-2),var(--accent));color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost{background:transparent;color:var(--ink);text-decoration:underline;padding:10px}
.btn-danger{background:#fff;color:var(--bad);border:1px solid rgba(217,68,43,.3)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.block{width:100%}
.btn.sm{padding:8px 14px;font-size:13px}

/* Sheet */
.scrim{position:fixed;inset:0;background:rgba(20,14,4,.45);backdrop-filter:blur(3px);z-index:40;opacity:0;pointer-events:none;transition:.25s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.sheet.show{transform:none}
.sheet-inner{max-width:520px;margin:0 auto;background:var(--card-solid);border-radius:30px 30px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
.grab{width:42px;height:5px;border-radius:9px;background:#d8cfbb;margin:4px auto 14px}
.sheet h3{font-size:22px;letter-spacing:-.02em;margin:0 0 4px}
.sheet p.sub{margin-bottom:16px}

.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px 4px}
.input{width:100%;border:1.5px solid #e9e0cc;background:#fff;border-radius:var(--r-md);padding:13px 14px;font-size:16px;outline:none;transition:.15s}
.input:focus{border-color:var(--ink)}
textarea.input{min-height:76px;resize:vertical}
.row{display:flex;gap:10px}
.row>*{flex:1}

.summary{background:linear-gradient(160deg,#fff,#fff6df);border:1px solid #f0e2bd;border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px}
.summary .l{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:14.5px}
.summary .l span{color:var(--muted)}
.summary .l b{text-align:right}

.err{background:#fff0ec;color:var(--bad);border-radius:var(--r-md);padding:10px 14px;font-size:14px;margin-bottom:12px;display:none}
.err.show{display:block}
.note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px}

/* Success */
.done{text-align:center;padding:18px 4px 4px}
.done .check{width:76px;height:76px;border-radius:50%;background:linear-gradient(160deg,#3ccf7a,var(--ok));display:grid;place-items:center;margin:0 auto 14px;color:#fff;box-shadow:0 14px 30px -12px rgba(31,157,85,.7);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.done .check svg{width:36px;height:36px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.stack{display:flex;flex-direction:column;gap:10px}

/* Info */
.info-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.info-row:first-of-type{border-top:0}
.info-row svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--muted)}
.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours td{padding:3px 0}
.hours td:last-child{text-align:right;font-weight:600}
.hours tr.today td{color:var(--accent);font-weight:800}

.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.85),rgba(255,255,255,.4));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-md);height:46px}
@keyframes sk{to{background-position:-200% 0}}
.fade-in{animation:fi .35s ease both}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hidden{display:none!important}
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-150%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-weight:600;font-size:14px;z-index:90;transition:.3s;box-shadow:var(--shadow);max-width:90vw}
.toast.show{transform:translate(-50%,0)}
.footer{text-align:center;color:var(--ink-2);opacity:.6;font-size:12px;margin-top:24px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Påmindelse */
.remind{background:linear-gradient(160deg,#fff,#fff3d6);border:1px solid #f0dca8;border-radius:var(--r-lg);padding:16px;margin-bottom:12px;text-align:center}
.remind b{display:block;font-size:17px}
.remind>span{display:block;color:var(--muted);font-size:14px;margin:2px 0 12px}
.remind-btns{display:flex;flex-direction:column;gap:8px}
.remind .note{margin:10px 0 0;text-align:center}