/* ===== Booking page ===== */
.bk-hero{background:radial-gradient(700px 400px at 90% 0,rgba(47,214,155,.25),transparent 60%),linear-gradient(160deg,var(--g800),var(--g900));color:#fff;padding:3.2rem 0 5.2rem;position:relative;overflow:hidden}
.bk-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 90% at 70% 20%,#000,transparent)}
.bk-hero .container{position:relative}
.crumbs{display:flex;gap:.6rem;font-size:.86rem;color:#9cc7b6;margin-bottom:1rem}
.crumbs a:hover{color:#fff}
.bk-hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1}
.bk-hero h1 em.s{color:var(--mint-2)}
.bk-hero p{color:#b5d6c9;max-width:60ch;margin-top:1rem;font-size:1.08rem}
.bk-hero p b{color:#fff}
.wiz-top{display:flex;gap:.6rem;margin-top:2rem;flex-wrap:wrap}
.wiz-top li{display:flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem .5rem .5rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:.92rem;color:#b5d6c9;transition:.4s var(--ease)}
.wiz-top li i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-style:normal;font-size:.85rem;font-weight:800;color:#fff;transition:.4s}
.wiz-top li.active{background:#fff;color:var(--g800);border-color:#fff}
.wiz-top li.active i{background:var(--g800);color:var(--mint-2)}
.wiz-top li.done i{background:var(--mint);color:var(--g900)}
.wiz-top li.done{color:#fff}

.bk-main{margin-top:-2.4rem;position:relative;padding-bottom:5rem}
.notice{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--mint);border-radius:18px;padding:1rem 1.3rem;box-shadow:var(--shadow);margin-bottom:1rem;font-size:.9rem;color:var(--muted)}
.notice .ico{color:var(--g600);margin-top:2px}
.notice b{color:var(--ink)}
.pcbar{display:grid;grid-template-columns:minmax(0,420px) auto 1fr;gap:.8rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:.6rem;margin-bottom:1.6rem;box-shadow:var(--shadow)}
.pcbar .qf{height:58px}
.pcbar .btn{height:58px;border-radius:18px}
.pcmsg{font-size:.9rem;color:var(--muted);padding-right:1rem}
.pcmsg.ok{color:var(--g700);font-weight:600}.pcmsg.bad{color:#b4372f;font-weight:600}
.pcmsg a{text-decoration:underline;font-weight:700}

.bk-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:1.6rem;align-items:start}
.pane{display:none}.pane.active{display:block;animation:pin .6s var(--ease)}
@keyframes pin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(1.3rem,3vw,2rem);margin-bottom:1rem}
.card h3{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;letter-spacing:-.025em;margin-bottom:.5rem}
.card h3 i{width:34px;height:34px;border-radius:12px;background:var(--g800);color:var(--mint-2);display:grid;place-items:center;font-style:normal;font-size:.9rem;font-weight:800;flex:none}
.card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}
.card .opts{margin-top:1rem}
.hint{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;padding:.8rem 1rem;border-radius:14px;background:var(--mint-50);color:var(--g700);font-size:.9rem;font-weight:500}
.hint .ico{width:18px;margin-top:2px;flex:none}

/* cleaners */
.cleaners{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.cl{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .6rem;border:1.5px solid var(--line);border-radius:20px;background:#fff;text-align:center;transition:.3s var(--ease);position:relative}
.cl:hover{border-color:var(--g600);transform:translateY(-3px)}
.cl .av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.15rem}
.cl b{font-size:.95rem;line-height:1.2;text-transform:capitalize}
.cl small{font-weight:700;color:var(--g700);background:var(--mint-100);padding:.2rem .7rem;border-radius:999px;font-size:.78rem}
.cl.on{border-color:var(--mint);background:var(--mint-50);box-shadow:0 14px 26px -16px rgba(0,64,47,.7)}
.cl.on::after{content:"\2713";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--g900);font-size:.8rem;font-weight:800;display:grid;place-items:center}

/* calendar */
.cal-wrap{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:1.6rem;align-items:start}
.cal2{border:1.5px solid var(--line);border-radius:22px;padding:1rem;background:#fff}
.cal2 .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.cal2 .ch b{font-size:1rem}
.cal2 .ch button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:.2s}
.cal2 .ch button:hover:not(:disabled){background:var(--g800);color:#fff}
.cal2 .ch button:disabled{opacity:.35;cursor:not-allowed}
.cal2 .ch .ico{width:16px}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cg .dw{font-size:.7rem;font-weight:700;color:var(--muted);padding:.3rem 0;text-transform:uppercase}
.cg button{aspect-ratio:1;border-radius:12px;font-size:.88rem;font-weight:600;transition:.2s}
.cg button:hover:not(:disabled):not(.sel){background:var(--mint-100)}
.cg button:disabled{color:#b8c7c0;cursor:not-allowed}
.cg button.today{box-shadow:inset 0 0 0 1.5px var(--mint)}
.cg button.sel{background:var(--g800);color:#fff}
.cg button.start{background:var(--mint);color:var(--g900)}
.cg .e{pointer-events:none}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dbox{background:var(--bg);border-radius:16px;padding:.8rem 1rem}
.dbox small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.dbox b{font-size:1rem}
.dbox:nth-child(3){grid-column:1/-1}
.dlist{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem;max-height:150px;overflow:auto}
.dlist span{background:var(--mint-100);color:var(--g700);font-size:.8rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}

/* pets, selects, forms */
.pets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chk{position:relative;cursor:pointer}
.chk input{position:absolute;opacity:0}
.chk span{display:inline-block;padding:.55rem 1.1rem;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.9rem;transition:.25s}
.chk input:checked+span{background:var(--g800);border-color:var(--g800);color:#fff}
.chk:hover span{border-color:var(--g600)}
.chk input:focus-visible+span{outline:3px solid var(--mint);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sel{display:flex;flex-direction:column;gap:.4rem}
.sel small,.dform label{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sel select,.dform input,.dform textarea{border:1.5px solid var(--line);border-radius:14px;padding:.9rem 1rem;font-size:.98rem;outline:0;background:var(--bg);color:var(--ink);font-weight:500;width:100%;transition:.25s;text-transform:none;letter-spacing:0}
.sel select:focus,.dform input:focus,.dform textarea:focus{border-color:var(--g600);background:#fff;box-shadow:0 0 0 4px rgba(47,214,155,.18)}
.dform{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.dform label{display:flex;flex-direction:column;gap:.4rem}
.dform .full{grid-column:1/-1}
.dform textarea{min-height:110px;resize:vertical}
.dform input.bad,.dform textarea.bad{border-color:#d9534f;background:#fff5f4}
.pay{margin-top:.6rem}
.pay>b{display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.payopt{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.3rem;border:1.5px solid var(--line);border-radius:20px;cursor:pointer}
.payopt.on{border-color:var(--mint);background:var(--mint-50)}
.payopt input{accent-color:var(--g800);width:18px;height:18px}
.payopt .pi{width:46px;height:46px;border-radius:14px;background:var(--mint-100);color:var(--g700);display:grid;place-items:center}
.payopt b{display:block}.payopt small{color:var(--muted)}
.nav-btns{display:flex;justify-content:space-between;gap:1rem;margin-top:1.2rem}
.alert{display:none;align-items:center;gap:.8rem;background:#fff3f1;border:1px solid #f1b6b0;color:#8f2a22;border-radius:16px;padding:.9rem 1.2rem;margin-bottom:1rem;font-weight:600;font-size:.94rem}
.alert.on{display:flex;animation:pin .4s var(--ease)}
.alert .ico{width:20px;stroke-width:2.6}
.done{text-align:center;padding:3rem 1.5rem}
.done .ok{width:76px;height:76px;border-radius:50%;background:var(--mint);color:var(--g900);display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:0 0 0 10px var(--mint-100)}
.done .ok .ico{width:38px;stroke-width:3}
.done h3{justify-content:center;font-size:1.7rem}
.done p{color:var(--muted);max-width:50ch;margin:0 auto}
.fine2{font-size:.8rem;margin-top:1.4rem!important}

/* summary */
.summary{position:sticky;top:100px;display:flex;flex-direction:column;gap:1rem}
.sbox{background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.5rem;box-shadow:var(--shadow)}
.sbox h4{font-size:1.15rem;margin-bottom:.8rem;letter-spacing:-.02em}
.sbox dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.sbox dt{color:var(--muted)}
.sbox dd{font-weight:700;text-align:right}
.sbox .xr{display:block;padding:0;border:0}
.sbox .xr p{display:flex;justify-content:space-between;padding:.45rem 0;font-size:.88rem;color:var(--g700);font-weight:600;border-bottom:1px dashed var(--line)}
.sbox .tot{border:0;padding-top:1rem}
.sbox .tot dt{color:var(--ink);font-weight:800;font-size:1.05rem}
.sbox .tot dd{font-size:1.7rem;letter-spacing:-.04em;color:var(--g800)}
.pk{background:var(--g800);color:#fff;border-color:transparent}
.pk dl>div{border-color:rgba(255,255,255,.14)}
.pk dt{color:#a8cbbc}.pk .tot dt{color:#fff}.pk .tot dd{color:var(--mint-2)}
.calc{font-size:.76rem;color:#8fb3a3;margin-top:.8rem}
.help{display:flex;flex-direction:column;gap:.6rem}
.help a{display:flex;gap:.6rem;align-items:center;font-weight:600;font-size:.92rem;color:var(--g700)}
.help a:hover{color:var(--g600)}.help .ico{width:18px}

/* good to know */
.know{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.kc{background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.8rem;display:flex;flex-direction:column;gap:.9rem}
.kc .ib{width:52px;height:52px;border-radius:16px;background:var(--mint-100);color:var(--g700);display:grid;place-items:center}
.kc h4{font-size:1.2rem;letter-spacing:-.02em}
.kc p{color:var(--muted);font-size:.95rem;flex:1}
.kc ul{display:flex;flex-direction:column;gap:.6rem;font-size:.92rem;flex:1}
.kc li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45}
.kc li .ico{width:18px;color:var(--mint);stroke-width:2.8;margin-top:2px}
.kc .btn{align-self:flex-start}

/* mobile total bar */
.mb-sum{flex:1;padding-left:.8rem;color:#fff;line-height:1.1}
.mb-sum small{display:block;color:#a8cbbc;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.mb-sum b{font-size:1.3rem;letter-spacing:-.03em}

@media (max-width:1100px){
  .bk-grid{grid-template-columns:1fr}
  .summary{position:static}
  .know{grid-template-columns:1fr}
  .pcbar{grid-template-columns:1fr auto}.pcmsg{grid-column:1/-1;padding:0 .8rem .6rem}
}
@media (max-width:720px){
  .cal-wrap,.two,.dform{grid-template-columns:1fr}
  .cleaners{grid-template-columns:repeat(2,1fr)}
  .nav-btns .btn{flex:1}
  .pcbar{grid-template-columns:1fr}.pcbar .btn{width:100%}
  .wiz-top li span{font-size:.82rem}.wiz-top li{padding-right:.8rem}
}