/* Tangle-me — Book: one stylesheet for the three booking screens
   (book.php = the client's request, booking.php = the booking link page,
   bookings.php = the owner's appointment book). Portal look: charcoal and brass. */
:root{--bg:#161719;--surface:#1f2124;--surface2:#26282c;--line:rgba(255,255,255,.08);--text:#eceef0;
      --dim:#9aa0a6;--faint:#6b7075;--accent:#c9a468;--accent-soft:rgba(201,164,104,.14);--ok:#7bbf8f;
      --ok-soft:rgba(123,191,143,.13);--warn:#e0a458;--bad:#e07a6a;--bad-soft:rgba(224,122,106,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;background:#0b0c0d;
     color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.45}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);padding:0 0 40px}
svg{display:block}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:var(--accent)}
/* top bar: the business, never Tangle-me */
.top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);
     position:sticky;top:0;background:rgba(22,23,25,.96);z-index:20;backdrop-filter:blur(6px)}
.top .back{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
           border:1px solid var(--line);color:var(--text);text-decoration:none;flex:none}
[dir=rtl] .top .back svg{transform:scaleX(-1)}
.av{width:40px;height:40px;border-radius:11px;flex:none;overflow:hidden;background:linear-gradient(145deg,#2c2e32,#191a1c);
    border:1px solid rgba(201,164,104,.45);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700}
.av img{width:100%;height:100%;object-fit:cover}
.top .who{min-width:0}
.top .who b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who small{display:block;font-size:12px;color:var(--dim)}
.pad{padding:0 16px}
h1{font-size:21px;font-weight:700;letter-spacing:-.2px;margin:20px 0 4px}
.lead{color:var(--dim);font-size:13.5px}
.sec{margin-top:22px}
.sec-h{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:9px;font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.card + .card{margin-top:10px}
/* services */
.svc{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
     background:var(--surface);cursor:pointer;margin-bottom:8px;user-select:none}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--faint);flex:none;display:flex;align-items:center;justify-content:center}
.svc.on{border-color:rgba(201,164,104,.55);background:var(--accent-soft)}
.svc.on .box{background:var(--accent);border-color:var(--accent)}
.svc.on .box::after{content:"";width:6px;height:11px;border:solid #161719;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.svc .n{flex:1;min-width:0;font-size:14.5px}
.svc .n small{display:block;color:var(--dim);font-size:12px;margin-top:1px}
.svc .p{font-weight:600;color:var(--accent);font-size:14px;white-space:nowrap}
.total{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);padding:4px 2px 0}
.total b{color:var(--text)}
/* days and times */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 6px;margin:0 -16px;scroll-snap-type:x proximity}
.days::-webkit-scrollbar{height:0}
.day{flex:0 0 62px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 4px;
     border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.day small{font-size:11px;color:var(--dim);text-transform:capitalize}
.day b{font-size:18px}
.day.on{border-color:var(--accent);background:var(--accent);color:#161719}
.day.on small{color:#161719}
.day:disabled{opacity:.33;cursor:default}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.slot{padding:11px 0;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);
      font:inherit;font-size:14px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.slot.on{background:var(--accent);border-color:var(--accent);color:#161719}
.empty{color:var(--dim);font-size:13px;padding:12px 2px}
.linkbtn{background:none;border:none;color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:10px 0;text-align:start}
/* forms */
label.f{display:block;font-size:12px;color:var(--dim);margin:14px 0 6px;font-weight:600}
input.i,select.i,textarea.i{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:10px;
     color:var(--text);font:inherit;font-size:15px;padding:12px}
input.i:focus,select.i:focus,textarea.i:focus{outline:none;border-color:var(--accent)}
textarea.i{min-height:76px;resize:vertical}
.hint{font-size:12px;color:var(--faint);margin-top:6px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin-top:12px;cursor:pointer}
.tick input{width:20px;height:20px;accent-color:var(--accent);flex:none;margin-top:1px}
.radio{display:flex;flex-wrap:wrap;gap:8px}
.radio label{flex:1 1 120px;display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);
             border-radius:10px;background:var(--surface);font-size:13.5px;cursor:pointer}
.radio input{accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:12px;
     border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:600;
     cursor:pointer;text-decoration:none}
.btn.gold{background:var(--accent);border-color:var(--accent);color:#161719}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#0f1a12}
.btn.ghost{background:transparent}
.btn.bad{background:transparent;color:var(--bad);border-color:rgba(224,122,106,.4)}
.btn:disabled{opacity:.55;cursor:default}
.btn + .btn{margin-top:9px}
.row{display:flex;gap:9px}
.row > *{flex:1}
.row .btn + .btn{margin-top:0}
.small{font-size:12.5px;color:var(--faint)}
.privacy{font-size:12px;color:var(--faint);margin:14px 2px 12px;line-height:1.5}
.err{display:none;margin-top:12px;padding:11px 12px;border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:13.5px}
.err.show{display:block}
/* status banner on the booking link page */
.status{margin-top:18px;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.status .st{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.status p{color:var(--dim);font-size:13.5px;margin-top:6px}
.status.s-booked,.status.s-done{border-color:rgba(123,191,143,.45);background:var(--ok-soft)}
.status.s-booked .st,.status.s-done .st{color:var(--ok)}
.status.s-offered,.status.s-requested{border-color:rgba(201,164,104,.45);background:var(--accent-soft)}
.status.s-offered .st,.status.s-requested .st{color:var(--accent)}
.status.s-declined,.status.s-cancelled,.status.s-expired,.status.s-no_show{border-color:rgba(224,122,106,.35);background:var(--bad-soft)}
.status.s-declined .st,.status.s-cancelled .st,.status.s-expired .st,.status.s-no_show .st{color:var(--bad)}
.kv{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{flex:0 0 92px;color:var(--dim);font-size:12.5px;padding-top:1px}
.kv .v{flex:1;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.when-big{font-size:16px;font-weight:700}
.tzline{font-size:11.5px;color:var(--faint);margin-top:2px}
/* chat */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface2)}
.msg small{display:block;font-size:10.5px;color:var(--faint);margin-top:3px}
.msg.me{align-self:flex-end;background:var(--accent-soft);border:1px solid rgba(201,164,104,.3)}
.msg.them{align-self:flex-start;border:1px solid var(--line)}
.compose{display:flex;gap:8px;margin-top:12px}
.compose textarea{flex:1;min-height:46px;height:46px}
.compose .btn{width:auto;flex:none;padding:0 16px}
/* owner's book */
.tabs{display:flex;gap:6px;padding:12px 16px 0}
.tab{flex:1;padding:10px 6px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--dim);
     font:inherit;font-size:13px;font-weight:600;text-align:center;text-decoration:none}
.tab.on{background:var(--accent);border-color:var(--accent);color:#161719}
.appt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
      background:var(--surface);color:var(--text);text-decoration:none;margin-bottom:8px}
.appt .tm{flex:0 0 54px;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.appt .tm small{display:block;font-weight:400;color:var(--faint);font-size:11px}
.appt .bd{flex:1;min-width:0}
.appt .bd b{display:block;font-size:14.5px}
.appt .bd span{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:6px;
     background:var(--accent-soft);color:var(--accent);flex:none;margin-top:2px}
.tag.booked{background:var(--ok-soft);color:var(--ok)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.dayh{font-size:12px;font-weight:700;color:var(--dim);margin:18px 2px 8px;text-transform:capitalize}
.note{padding:12px 14px;border-radius:12px;background:var(--accent-soft);border:1px solid rgba(201,164,104,.3);font-size:13.5px}
.note.bad{background:var(--bad-soft);border-color:rgba(224,122,106,.35)}
.svc-row{display:grid;grid-template-columns:1fr 78px 64px 34px;gap:6px;margin-bottom:6px}
.svc-row input{padding:10px 9px;font-size:14px}
.svc-row .rm{border:1px solid var(--line);background:var(--surface2);color:var(--dim);border-radius:9px;cursor:pointer;font-size:18px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px}
.switch b{font-size:14.5px}
.switch small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.switch input{width:46px;height:26px;accent-color:var(--accent);flex:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2d31;color:var(--text);padding:10px 16px;
       border-radius:20px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.5);display:none;z-index:90;max-width:90vw;text-align:center}
.toast.show{display:block}
.foot{text-align:center;margin-top:28px;font-size:11.5px;color:var(--faint)}
.foot a{color:var(--faint);text-decoration:none}
details.more{margin-top:10px}
details.more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;padding:8px 0;list-style:none}
details.more summary::-webkit-details-marker{display:none}
/* ── app home, chats, install (added 2026-10-05, messages build) ── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px;
      background:var(--surface);color:var(--text);text-decoration:none;min-height:86px}
.tile .ico{color:var(--accent);width:22px;height:22px}
.tile b{font-size:14.5px}
.tile small{color:var(--dim);font-size:12px}
.count{position:absolute;top:10px;right:10px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e5484d;
       color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
[dir=rtl] .count{right:auto;left:10px}
.count:empty,.count[data-n="0"]{display:none}
.me-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(201,164,104,.35);border-radius:14px;
         background:var(--accent-soft);color:var(--text);text-decoration:none}
.me-card .av{width:52px;height:52px;border-radius:14px}
.me-card b{display:block;font-size:16px}
.me-card small{color:var(--dim);font-size:12.5px}
.row-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
          background:var(--surface);color:var(--text);text-decoration:none;margin-bottom:8px}
.row-link .bd{flex:1;min-width:0}
.row-link .bd b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-link .bd span{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-link .count{position:static}
.install{border-color:rgba(47,212,196,.35)}
.install b{display:block;font-size:15px;margin-bottom:4px}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 4px}
.brand svg{width:26px;height:30px}
.brand b{font-size:18px;letter-spacing:-.2px}