:root{
  /* The browser draws the clock in the time field, the time picker it opens
     and the scrollbars itself. Without this it draws them for a light page
     and the clock all but disappears on ours. */
  color-scheme:dark;
  --bg:#090d11;--panel:#10161c;--panel2:#151c23;--text:#f5f5f2;--muted:#aab2bb;
  --gold:#f5b936;--gold2:#ffd66b;--line:rgba(255,255,255,.09);
  --green:#71e38a;--red:#ff5353;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:Montserrat,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
.container{width:min(1120px,92%);margin:auto}
.muted{color:var(--muted);font-size:12px}
.opt{color:#79828a;font-weight:500;font-size:11px}
.gap{height:45px}

header{position:fixed;top:0;left:0;width:100%;z-index:50;background:rgba(7,10,14,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:22px;font-weight:800;font-style:italic;letter-spacing:-1px}
.logo span{color:var(--gold)}
.logo small{display:block;font-size:7px;letter-spacing:3px;text-align:center;font-style:normal;color:#ddd;margin-top:-5px}
nav{display:flex;gap:28px;align-items:center;font-size:12px;font-weight:600}
nav a{color:#ddd}
nav a:hover{color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold);background:var(--gold);color:#101010;padding:13px 22px;border-radius:28px;font-weight:800;font-size:12px;font-family:inherit;transition:.25s;cursor:pointer}
.btn:hover{background:var(--gold2);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text)}
.btn-wide{width:100%}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}

.hero{min-height:650px;padding-top:72px;display:flex;align-items:center;background:
linear-gradient(90deg,rgba(4,8,12,.88) 0%,rgba(4,8,12,.55) 45%,rgba(4,8,12,.15) 100%),
url('https://images.unsplash.com/photo-1473968512647-3e447244af8f?auto=format&fit=crop&w=1800&q=85') center/cover}
.hero-content{max-width:600px;padding:80px 0}
.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:15px}
h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-3px;margin-bottom:18px}
.hero p{color:#e1e5e8;max-width:560px}
.hero-sub{margin-bottom:6px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

section{padding:75px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}
.section-head h2{font-size:27px;letter-spacing:-1px}
.section-head p{color:var(--muted);font-size:13px}

.availability{background:linear-gradient(180deg,#0c1116,#090d11)}
.card{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:22px}
.card h3{font-size:16px}

.steps-rail{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.steps-rail button{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);border-top:2px solid var(--line);border-radius:12px;color:#8b939b;font-family:inherit;font-size:12px;font-weight:700;padding:12px 14px;cursor:pointer;text-align:left}
.steps-rail b{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.07);color:inherit;display:grid;place-items:center;font-size:11px;flex:none}
.steps-rail button:disabled{cursor:default;opacity:.75}
.steps-rail .done button{color:#cdd3d9;border-top-color:rgba(245,185,54,.35)}
.steps-rail .done b{background:rgba(245,185,54,.16);color:var(--gold)}
.steps-rail .now button{color:var(--text);border-color:rgba(245,185,54,.4);border-top-color:var(--gold);background:rgba(245,185,54,.05)}
.steps-rail .now b{background:var(--gold);color:#101010}

.book-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:20px;align-items:start}
.panel{padding:0;border:0}
.panel-card{min-height:420px}
.panel-head{margin-bottom:16px}
.panel-head h3{font-size:17px}
.panel-head .muted{margin-top:4px}
.panel-head .legend{margin:10px 0 0}

.legend{display:flex;gap:16px;flex-wrap:wrap;color:#cbd1d6;font-size:11px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.green{background:var(--green)}.red{background:var(--red)}.white{background:#e9edf0}

.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head button{background:none;color:#fff;border:0;font-size:22px;cursor:pointer;width:38px;height:38px;border-radius:50%}
.cal-head button:hover:not(:disabled){background:rgba(255,255,255,.07)}
.cal-head button:disabled{opacity:.25;cursor:default}
.month{font-weight:700}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.day-name{text-align:center;color:#818b95;font-size:10px;padding:5px 0}
.date{border:0;border-radius:8px;padding:14px 3px;background:#e9edf0;color:#111;font-weight:700;font-family:inherit;font-size:13px;cursor:pointer}
.date.available{background:#8de994}
.date.booked{background:#f04d4d;color:#fff;cursor:not-allowed}
.date.closed{background:#e9edf0;color:#9aa1a8;cursor:not-allowed}
.date.empty{visibility:hidden}
.date.picked{outline:3px solid var(--gold);outline-offset:2px}
.date:hover:not(:disabled){filter:brightness(1.08)}
.calendar.admin-mode .date.booked{cursor:pointer}
.cal-note{color:var(--muted);font-size:11px;margin-top:14px}

.order-card{position:sticky;top:88px;display:grid;gap:12px}
#primaryBtn{gap:0}
.order-lines{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px}
.order-lines dt{color:var(--muted)}
.order-lines dd{color:var(--text);font-weight:600;text-align:right}
.order-items{list-style:none;display:grid;gap:7px;font-size:12px;border-top:1px solid var(--line);padding-top:12px}
.order-items:empty{display:none}
.order-items li{display:flex;justify-content:space-between;gap:12px;color:#cdd3d9}
.order-items li span:last-child{color:var(--gold);font-weight:700;white-space:nowrap}
.fine{color:#79828a;font-size:10px;line-height:1.5}

#form{display:grid;gap:13px}
label{display:block;font-size:12px;font-weight:600;color:#cbd1d6}
label>input,label>select,label>textarea{margin-top:5px}
input,select,textarea{font-family:inherit;font-size:13px;font-weight:500;color:var(--text);background:#0b1015;border:1px solid var(--line);border-radius:9px;padding:11px 12px;width:100%}
input:focus,select,textarea:focus{outline:none;border-color:rgba(245,185,54,.55)}
input[readonly]{cursor:default;color:var(--gold);font-weight:700}
/* A native colour swatch draws inside the input's own padding box; the
   shared 11px/12px padding above squashes it down to a thin line. Cut the
   padding and give it an explicit box so it reads as a swatch. */
input[type=color]{width:64px;height:44px;padding:4px;cursor:pointer}
textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.pick-head{font-size:12px;font-weight:600;color:#cbd1d6;margin-top:4px}
#pickStatus{margin-bottom:10px}
.picker{display:grid;gap:8px}
.group{border:1px solid var(--line);border-radius:11px;background:#0b1015;overflow:hidden}
.group>summary{cursor:pointer;padding:11px 14px;font-size:12px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.group>summary::-webkit-details-marker{display:none}
.group>summary::after{content:"+";color:var(--gold);font-size:15px;font-weight:800}
.group[open]>summary::after{content:"−"}
.group[open]>summary{border-bottom:1px solid var(--line)}
.group-picked{color:var(--gold);font-size:11px;font-weight:700}
.group-body{padding:12px 14px;display:grid;gap:11px}
/* A grid item is as wide as its content unless told otherwise, so without this
   a wide table stretches the track and the group's rounded corners clip it
   instead of letting it scroll. */
.group-body>*{min-width:0}
.line{display:grid;gap:5px}
.line>span{font-size:11px;color:var(--muted)}
.check{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:var(--text)}
.check input{width:17px;height:17px;flex:none;accent-color:var(--gold);padding:0}
.qty{display:flex;align-items:center;gap:9px}
.qty input{width:66px;flex:none}
.price-tag{color:var(--gold);font-weight:700;font-size:12px;margin-left:auto;white-space:nowrap}

.total-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(245,185,54,.45);background:rgba(245,185,54,.07);border-radius:11px;padding:13px 15px;font-size:11px;font-weight:800;letter-spacing:1px;margin-top:4px}
.total-bar strong{font-size:21px;color:var(--gold);letter-spacing:0}

.alert{margin-top:4px;padding:11px 13px;border-radius:9px;font-size:12px;background:rgba(113,227,138,.12);border:1px solid rgba(113,227,138,.4);color:#c7f4d2}
.alert.error{background:rgba(255,83,83,.12);border-color:rgba(255,83,83,.45);color:#ffc9c9}

.summary{display:grid;gap:12px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px}
.summary dt{color:var(--muted)}
.summary dd{color:var(--text)}
.summary ul{list-style:none;display:grid;gap:6px;font-size:12px;border-top:1px solid var(--line);padding-top:10px}
.summary li{display:flex;justify-content:space-between;gap:12px}
.summary li span:last-child{color:var(--gold);font-weight:700;white-space:nowrap}
.pay-choice{display:grid;gap:12px}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.media{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:#161d24}
.media img{height:100%;transition:.35s}
.media:hover img{transform:scale(1.05)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);display:grid;place-items:center;font-size:17px}
.caption{font-size:11px;color:#ddd;margin-top:8px}
.photos .media{aspect-ratio:4/3}

.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.package{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.package.featured{border-color:rgba(245,185,54,.65);box-shadow:0 0 30px rgba(245,185,54,.08)}
.package h3{font-size:17px}
.price{font-size:25px;font-weight:800;margin:12px 0;color:var(--gold)}
.package ul{list-style:none;color:var(--muted);font-size:12px;display:grid;gap:9px;margin:16px 0 22px;align-content:start;flex:1}
.package li:before{content:"✓";color:var(--gold);font-weight:800;margin-right:8px}

.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about img{border-radius:16px;height:420px}
.about p{color:var(--muted);font-size:13px;margin:15px 0}
.info-list{display:grid;gap:17px;margin-top:20px}
.info{display:flex;gap:13px;align-items:flex-start}
.icon{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);flex:none}
.info strong{font-size:13px}
.info span{display:block;color:var(--muted);font-size:11px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-box{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.contact-row{display:flex;gap:12px;margin:17px 0;align-items:center}
.contact-row b{font-size:12px}
.contact-row span{display:block;color:var(--muted);font-size:11px}
.steps{color:var(--muted);font-size:12px;margin:14px 0 14px 18px;display:grid;gap:7px}

footer{padding:25px 0;color:#8c949c;font-size:10px}
.footer{display:flex;justify-content:space-between;gap:15px;align-items:center}
.mobile{display:none}
.toast{position:fixed;right:20px;bottom:20px;background:#151c23;border:1px solid var(--gold);padding:15px 18px;border-radius:12px;font-size:12px;z-index:100;display:none;max-width:min(360px,86vw)}

@media(max-width:850px){
  nav{display:none}
  .mobile{display:inline-flex}
  .hero{min-height:600px}
  .book-grid,.about,.contact{grid-template-columns:1fr}
  .panel-card{min-height:0}
  .order-card{position:sticky;bottom:0;top:auto;z-index:20;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;box-shadow:0 -14px 34px rgba(4,8,12,.85)}
  .order-card h3,.order-lines,.order-items,.fine,#backBtn{display:none!important}
  .order-card .total-bar{flex:1;margin:0;padding:9px 12px}
  .order-card .total-bar span{font-size:9px;letter-spacing:.5px}
  .order-card .total-bar strong{font-size:18px}
  #primaryBtn{width:auto;padding:13px 18px;white-space:nowrap}
  .btn-more{display:none}
  #formStatus{position:absolute;left:12px;right:12px;bottom:100%;margin-bottom:10px}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .packages{grid-template-columns:1fr}
  .about img{height:300px}
}
@media(max-width:520px){
  h1{font-size:43px}
  .hero-content{padding:55px 0}
  .grid4{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head .btn{margin-top:12px}
  .date{padding:13px 2px;font-size:12px}
  .calendar{gap:5px}
  .steps-rail{gap:5px}
  .steps-rail button{padding:9px;font-size:10px;gap:6px;flex-direction:column;align-items:flex-start}
  .row2{grid-template-columns:1fr}
  .footer{display:grid;text-align:center}
  .toast{right:12px;left:12px;max-width:none}
}

.admin-page{display:grid;min-height:100vh;padding:28px 16px}
.admin-shell{width:min(560px,100%);margin:auto;display:grid;gap:16px}
.admin-brand{display:flex;align-items:center;gap:10px}
.admin-brand .logo{font-size:19px;font-weight:800;font-style:italic;letter-spacing:-1px}
.admin-brand a.logo:hover span{color:var(--gold2)}
.admin-brand a.logo:hover{opacity:.9}
.admin-tag{border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:10px;font-weight:700;color:var(--gold)}
.admin-page h1{font-size:20px;letter-spacing:-.5px}
.admin-page .card>.muted{margin-top:5px}
#loginForm{display:grid;gap:13px;margin-top:18px}
.admin-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.admin-top .btn{padding:10px 16px;flex:none}
.how{list-style:none;display:grid;gap:8px;font-size:12px;color:#cbd1d6;margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:11px;background:#0b1015}
.how b{color:var(--text)}
.admin-foot{text-align:center;font-size:11px;color:#79828a}
.admin-foot a:hover{color:var(--gold)}
@media(max-width:520px){
  .admin-top{flex-direction:column}
  .admin-top .btn{width:100%}
}

/* Masa majlis, directly under the calendar in step 1. */
.time-pick{margin-top:14px}
.time-pick input{margin-top:5px;max-width:190px}
/* color-scheme already draws this light; do not invert it back to dark. Only
   the size and the pointer are ours to set. */
.time-pick input::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer;
  width:17px;height:17px;padding:0}
.time-pick input:hover::-webkit-calendar-picker-indicator{opacity:1}
.time-pick small{display:block;color:#79828a;font-size:10px;font-weight:500;margin-top:5px}

/* A named sub-group inside a service group, e.g. Package / Non-Package. */
.section-title{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--line);padding-top:11px}
.group-body:first-of-type .section-title{border-top:0;padding-top:0}

/* Video tiles may hold a real player rather than a still. */
.grid4 a{display:block}
.media video{width:100%;height:100%;object-fit:cover;background:#000}
.media iframe{width:100%;height:100%;border:0;background:#000}
.media.tap{cursor:pointer}
.media.tap:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.93);padding:16px}
.lightbox .frame{width:100%;max-width:1100px;aspect-ratio:16/9;background:#000}
.lightbox iframe{width:100%;height:100%;border:0;display:block}
.lightbox .close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.lightbox .close:hover{background:rgba(255,255,255,.26)}
/* A package the owner switched off: still editable, visibly not for sale. */
.node.off{opacity:.55}

/* ---------- admin editors ---------- */

.admin-shell.wide{width:min(940px,100%)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs button[data-tab]{background:transparent;border:1px solid var(--line);border-radius:22px;color:#8b939b;font-family:inherit;font-size:11px;font-weight:700;padding:9px 16px;cursor:pointer}
.tabs button[data-tab]:hover{color:var(--text)}
.tabs button[data-tab].now{border-color:rgba(245,185,54,.5);background:rgba(245,185,54,.08);color:var(--gold)}
.tabs #logoutBtn{margin-left:auto;padding:9px 16px;font-size:11px}
.sub{font-size:13px;margin:22px 0 10px;letter-spacing:-.3px}

.tree{display:grid;gap:10px}
.node{border:1px solid var(--line);border-radius:11px;padding:12px;display:grid;gap:10px;background:#0b1015}
.node.group{background:#0d1319;border-color:rgba(245,185,54,.28)}
.node.section{background:#0b1015}
.node.item{background:#10161c}
.node-head{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.node-head.option{padding-left:10px;border-left:2px solid rgba(245,185,54,.3)}
.f{flex:1 1 auto;min-width:110px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#79828a}
.f>span{display:block;margin-bottom:4px}
.f.check{flex:0 0 auto;display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:11px;color:#cbd1d6}
.f.check input{width:16px;height:16px;padding:0;accent-color:var(--gold)}
.f.check span{margin:0}
button.x{flex:none;width:36px;height:38px;border-radius:9px;border:1px solid var(--line);background:transparent;color:#8b939b;font-family:inherit;font-size:14px;cursor:pointer}
button.x:hover{border-color:var(--red);color:var(--red)}
.btn.small{padding:9px 15px;font-size:11px;justify-self:start}
.tree-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tree-actions .btn{flex:0 0 auto;padding:11px 18px;font-size:11px}

.media-row{align-items:center}
.thumb{flex:none;width:62px;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#161d24;display:grid;place-items:center;font-size:10px}
.thumb img{width:100%;height:100%}

@media(max-width:520px){
  /* Stacked, the flex-grow that spreads fields across a row would stretch
     each one down the page instead. */
  .node-head,.edit-row{flex-direction:column;align-items:stretch}
  .node-head>*,.edit-row>*{flex:0 0 auto}
  button.x{width:100%;height:36px}
  .media-row .thumb{width:100%;height:120px}
  .tabs #logoutBtn{margin-left:0;width:100%}
}

/* ---------- quotation tables in the booking form ----------

   Deliverables read down the left and each package is a column, the way a
   quotation compares them. The chosen column lights up end to end, which is
   the one loud thing here; everything else stays quiet. */

.matrix-wrap{display:grid;gap:8px;min-width:0}
.compare-wrap{min-width:0}
.table-scroll{overflow-x:auto;min-width:0;border:1px solid var(--line);border-radius:11px;background:#0b1015}
.matrix{border-collapse:collapse;width:100%;font-size:11.5px}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:10px 7px;text-align:center}
.matrix tbody tr:last-child>*{border-bottom:0}
.matrix td.yes{color:var(--gold);font-weight:800;font-size:13px}
.matrix td.off{color:#414951}

.pick{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--text);
  cursor:pointer;text-align:left}
.pick input[type=radio],.pick input[type=checkbox]{width:17px;height:17px;flex:none;
  accent-color:var(--gold);padding:0;margin:0}
.pick-qty input{width:54px;flex:none;padding:6px;text-align:center;font-weight:700}
/* Both ways out of a chosen package stay hidden until there is one to leave. */
.table-foot{display:none;gap:14px;flex-wrap:wrap}
.matrix-wrap.picked .table-foot{display:flex}

.clearpick{display:none;margin-top:9px;align-items:center;gap:5px;
  background:transparent;border:1px solid rgba(245,185,54,.5);border-radius:18px;
  color:var(--gold);font-family:inherit;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  padding:5px 10px;cursor:pointer;white-space:nowrap}
.clearpick:hover{background:rgba(245,185,54,.14)}
.pkgcol.on .clearpick,.matrix.list tr.on .clearpick,.pkg-card.on .clearpick{display:inline-flex}
.link-btn{background:none;border:0;color:#8b939b;font-family:inherit;font-size:11px;
  text-decoration:underline;cursor:pointer;padding:0}
.link-btn:hover{color:var(--gold)}

/* the transposed one */
.matrix.compare .rowhead{text-align:left;color:#aab2bb;font-weight:600;font-size:11px;
  min-width:142px;background:#0b1015;position:sticky;left:0;z-index:2;
  box-shadow:1px 0 0 var(--line)}
.matrix.compare thead .rowhead{background:#0d1319}
.matrix.compare th.pkgcol{min-width:108px;vertical-align:top;background:#0d1319;
  border-bottom:1px solid var(--line);padding:13px 11px}
.pick span{line-height:1.3;display:block}
.pick b{display:block;font-weight:700}
.pick small{display:block;margin-top:3px;font-size:9.5px;font-weight:600;color:#79828a;
  letter-spacing:.2px}
.pkg-card .pick b{font-size:13px}
.pkg-card .pick small{font-size:10.5px;margin-top:4px}
.pkgprice{display:block;margin-top:9px;color:var(--gold);font-size:15px;font-weight:800;
  letter-spacing:-.3px;text-align:left}
.matrix.compare th.pkgcol.on{background:rgba(245,185,54,.11);box-shadow:inset 0 2px 0 var(--gold)}
.matrix.compare td.on{background:rgba(245,185,54,.07)}
.matrix.compare tbody tr:hover td:not(.on){background:rgba(255,255,255,.03)}

/* the short one, where the deliverables still read across */
.matrix.list .pick-col{text-align:left;min-width:150px}
.matrix.list .price-col{text-align:right;color:var(--gold);font-weight:800;white-space:nowrap}
.matrix.list thead th{color:#8b939b;font-weight:700;font-size:10.5px;background:#0d1319;
  vertical-align:bottom;text-align:left}
.matrix.list thead .price-col{text-align:right}
.matrix.list td:not(.pick-col):not(.price-col){text-align:left;color:#cbd1d6;line-height:1.5}
.matrix.list tbody tr:hover{background:rgba(255,255,255,.035)}
.matrix.list tbody tr.on{background:rgba(245,185,54,.09)}

.swipe-hint{display:none}

/* ---------- a package as a card, on a phone ---------- */

.pkg-stack{display:grid;gap:10px;min-width:0}
.pkg-stack>*{min-width:0}
.pkg-card{border:1px solid var(--line);border-radius:13px;background:#0b1015;padding:14px 15px;
  min-width:0;overflow-wrap:anywhere}
.pkg-card.on{border-color:rgba(245,185,54,.55);background:rgba(245,185,54,.05)}

/* An hourly line carries its name, a number to type in and a rate. Three
   things rarely fit one line on a phone, so the rate drops below them rather
   than pushing itself off the edge of the card. */
.pkg-head{display:flex;align-items:flex-start;gap:10px 12px;flex-wrap:wrap}
.pkg-head .pick{flex:1 1 60%;min-width:0}
.pkg-card .pkgprice{margin-top:0;margin-left:auto;font-size:17px;text-align:right;min-width:0}

/* what you get, counted */
.pkg-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:11px 9px;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.pkg-counts>div.wide{grid-column:1/-1}
.pkg-counts b{display:block;font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.2px}
.pkg-counts>div.wide b{font-size:11.5px;font-weight:600;color:#cbd1d6;line-height:1.55}
.pkg-counts span{display:block;margin-top:2px;font-size:9.5px;color:#79828a;font-weight:600;line-height:1.3}
.pkg-counts>div.wide span{display:none}

/* what is included */
.pkg-includes{list-style:none;display:grid;gap:7px;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--line);font-size:11.5px;color:#cbd1d6}
.pkg-includes li{display:flex;gap:9px;align-items:baseline}
.pkg-includes li:before{content:"\2713";color:var(--gold);font-weight:800;flex:none}
.pkg-card .clearpick{margin-top:13px}

@media(max-width:720px){
  /* The comparison keeps its shape and the names stay pinned while you swipe
     sideways. The short table folds into a card per package instead. */
  .matrix.compare th.pkgcol{min-width:118px}
  .matrix.compare .rowhead{min-width:120px}
  .swipe-hint{display:block;margin-top:7px;color:#79828a;font-size:10px;font-weight:600;
    letter-spacing:.3px;text-align:center}

  .matrix.list{display:block;width:100%}
  .matrix.list tbody,.matrix.list tr,.matrix.list td{display:block;width:100%}
  .table-scroll:has(.matrix.list){overflow:visible;border:0;background:none;border-radius:0}
  .matrix.list thead{display:none}
  .matrix.list tr{border:1px solid var(--line);border-radius:11px;background:#0b1015;
    margin-bottom:9px;padding:11px 13px}
  .matrix.list tr.on{border-color:rgba(245,185,54,.5)}
  .matrix.list td{border:0;padding:4px 0;text-align:left;display:flex;
    justify-content:space-between;gap:14px;font-size:11px}
  .matrix.list td.off{display:none}
  .matrix.list td.pick-col{padding-bottom:9px;border-bottom:1px solid var(--line);
    margin-bottom:5px;min-width:0}
  .matrix.list td:not(.pick-col):not(.price-col):before{content:attr(data-col);color:#79828a;
    font-weight:600;flex:none}
  .matrix.list td.price-col{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;
    font-size:15px;justify-content:flex-end}
}

/* Restored: these three sections sat between the two markers of an earlier
   rewrite of the booking tables and were removed with it. */

/* ---------- welcome strip ---------- */

.welcome{border-bottom:1px solid var(--line);background:#070a0e}
.welcome p{text-align:center;font-size:11px;font-weight:700;letter-spacing:4.5px;text-transform:uppercase;color:#cbd1d6;padding:17px 0}

/* ---------- our team ---------- */

.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:18px}
.member{display:grid;grid-template-columns:1fr 150px;gap:18px;align-items:stretch;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;max-width:620px}
.member-about{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.member h3{font-size:15px;letter-spacing:1.4px;text-transform:uppercase}
.member .role{color:var(--gold);font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-top:5px}
.member .bio{color:var(--muted);font-size:11px;margin-top:13px;line-height:1.7;max-width:34ch}

/* The reference sheet labels each block and rules it off. Kept, because the
   dials and the number mean nothing without a name over them. */
.block-head{font-size:10px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#cbd1d6;
  margin-top:20px;padding-bottom:5px;border-bottom:1px solid rgba(245,185,54,.45)}
.member .years{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-top:11px}

/* The studio's portraits are cut-outs standing on white. The panel is cut to
   the same shape as the pictures, so there is no empty white above anyone's
   head and nothing is cropped off their sides. */
.member .shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
  align-self:center;width:100%;aspect-ratio:335/600}
.member .shot img{height:100%;object-fit:cover;object-position:bottom}

.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:15px}
.skill{text-align:center;width:76px}
.ring{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0)}
.ring i{width:37px;height:37px;border-radius:50%;background:var(--panel);display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:800}
.skill span{display:block;font-size:8px;letter-spacing:0;text-transform:uppercase;color:#79828a;margin-top:7px;line-height:1.35;overflow-wrap:anywhere}

.member.no-photo{grid-template-columns:1fr}

@media(max-width:520px){
  .member{grid-template-columns:1fr}
  .member .shot{max-width:200px;margin:0 auto}
}

/* ---------- music ---------- */

.music{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px;
  background:rgba(12,17,22,.92);border:1px solid var(--line);color:#cbd1d6;border-radius:26px;
  padding:10px 16px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;backdrop-filter:blur(10px)}
.music:hover{border-color:rgba(245,185,54,.5);color:var(--text)}
.music[aria-pressed="true"]{border-color:rgba(245,185,54,.55);color:var(--gold)}
.music-icon{font-size:14px;line-height:1}
@media(max-width:850px){
  /* the order bar owns the bottom of the screen on a phone, and headings own
     the left, so the control tucks into the right under the header */
  .music{bottom:auto;top:84px;left:auto;right:12px;padding:8px 12px}
  .music-text{display:none}
}

/* ---------- admin: collapsed price editor ---------- */

.node.group{padding:0;background:#0d1319;gap:0;overflow:hidden}
.group-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  color:var(--text);font-family:inherit;font-size:13px;font-weight:700;text-align:left;
  padding:14px 15px;cursor:pointer}
.group-head:hover{background:rgba(255,255,255,.03)}
.node.group.open>.group-head{border-bottom:1px solid var(--line)}
.caret{width:20px;height:20px;border-radius:6px;background:rgba(245,185,54,.14);color:var(--gold);
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-sum{color:#79828a;font-size:10.5px;font-weight:600;white-space:nowrap}
.group-body-edit{display:grid;gap:10px;padding:14px 15px}

.edit-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.edit-row>.f{flex:1 1 auto;min-width:105px}
.edit-row>.f.check{flex:0 0 auto}
.edit-row .thumb{align-self:center}
.node.option{background:#0b1015;border-style:dashed;padding:11px;gap:8px}
.cols .f input{font-size:12px}

.cells{display:grid;gap:9px;justify-items:start}
.cell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px;width:100%}
.cell{display:flex;gap:7px;align-items:flex-end}
.cell .f{flex:1;min-width:0}
.tickcell{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:8px 11px;
  border:1px solid var(--line);border-radius:9px;background:#0b1015;
  font-size:11px;font-weight:600;color:#cbd1d6;cursor:pointer}
.tickcell:has(input:checked){border-color:rgba(245,185,54,.5);color:var(--text);background:rgba(245,185,54,.06)}
.tickcell input{width:16px;height:16px;flex:none;padding:0;margin:0;accent-color:var(--gold)}

.cols-box{display:grid;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:11px;background:#0b1015}
.cols-head{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}

/* Which services make up this table's columns. The number says where each one
   sits, so the owner can see the order they will print in. */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;
  background:transparent;color:#8b939b;font-family:inherit;font-size:11px;font-weight:600;
  padding:7px 13px 7px 8px;cursor:pointer}
.chip:hover{color:var(--text);border-color:rgba(245,185,54,.4)}
.chip.on{border-color:rgba(245,185,54,.55);background:rgba(245,185,54,.08);color:var(--text)}
.chip-n{width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#8b939b;font-size:9.5px;font-weight:800}
.chip.on .chip-n{background:var(--gold);color:#101010}
.chip-kind{color:#79828a;font-size:9px;font-weight:700}
.chip.on .chip-kind{color:var(--gold)}

.save-bar{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(16,22,28,0),var(--panel) 26%);
  padding:14px 0 4px;margin-top:6px;z-index:5}

.member-row{gap:10px}
.member-row .f textarea{min-height:52px}

@media(max-width:520px){
  .group-sum{display:none}
  .edit-row{flex-direction:column;align-items:stretch}
  .edit-row>*{flex:0 0 auto}
  .cell-grid{grid-template-columns:1fr}
  .cell{flex-direction:row}
  .tickbtn{height:36px}
}

/* The owner's way in. Quiet on purpose: visitors have no use for it, and the
   page is already marked noindex behind a rate-limited login. */
.owner-link{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#79828a;
  border:1px solid var(--line);border-radius:20px;padding:7px 13px}
.owner-link:hover{color:var(--gold);border-color:rgba(245,185,54,.45)}
footer .owner-link{padding:5px 11px}

/* ---------- SSM registration ---------- */

/* The number only. It is the part a stranger can check for themselves, and it
   sits with the promise rather than in a corner of the page. */
.hero-ssm{margin-top:24px;font-size:10px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:#8b939b}

@media(max-width:520px){
  .hero-ssm{letter-spacing:1.2px;font-size:9.5px}
}

/* ---------- customer list ---------- */

.cust-search { max-width: 22rem; }

.cust-list { display: grid; gap: .5rem; margin-top: 1rem; }

.cust-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: baseline;
  width: 100%;
  padding: .75rem 1rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cust-row:hover { border-color: rgba(245, 185, 54, .5); }
.cust-row .who { font-weight: 600; }
.cust-row .num { opacity: .75; font-variant-numeric: tabular-nums; }
.cust-row .times { grid-column: 2; text-align: right; opacity: .75; font-size: .85em; }

.cust-detail {
  padding: 1rem;
  border: 1px solid rgba(245, 185, 54, .45);
  border-radius: .6rem;
  background: rgba(245, 185, 54, .06);
}

.cust-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .75rem 0 0; }
.cust-detail dt { opacity: .7; }
.cust-detail dd { margin: 0; }

/* Task 7: account approval, inside the open customer's own detail card. */
#custAccount:not([hidden]) {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(245, 185, 54, .25);
}
#custAccount .reset-link-result { margin-top: .5rem; }
#custAccount .reset-link-result input[type="text"] { width: 100%; }

@media (max-width: 40rem) {
  .cust-row { grid-template-columns: 1fr; }
  .cust-row .times { grid-column: 1; text-align: left; }
  .cust-detail dl { grid-template-columns: 1fr; gap: .1rem; }
  .cust-detail dt { margin-top: .5rem; }
}

/* ---------- order list ---------- */

.ord-list { display: grid; gap: .5rem; margin-top: 1rem; }

.ord-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: .3rem 1rem;
  align-items: center;
  width: 100%;
  padding: .75rem 1rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ord-row:hover { border-color: rgba(245, 185, 54, .5); }
.ord-row .when { opacity: .75; font-variant-numeric: tabular-nums; }
.ord-row .who { display: flex; flex-direction: column; gap: .1rem; font-weight: 600; }
.ord-row .amt { font-variant-numeric: tabular-nums; }
.ord-row-crew { font-weight: 500; font-size: .78em; opacity: .6; }

.ord-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ord-chip-pending { background: rgba(245, 185, 54, .14); color: var(--gold); }
.ord-chip-confirmed { background: rgba(113, 227, 138, .14); color: var(--green); }
.ord-chip-done { background: rgba(255, 255, 255, .1); color: var(--muted); }
.ord-chip-cancelled { background: rgba(255, 83, 83, .14); color: var(--red); }

.ord-detail {
  padding: 1rem;
  border: 1px solid rgba(245, 185, 54, .45);
  border-radius: .6rem;
  background: rgba(245, 185, 54, .06);
}

.ord-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .75rem 0 0; }
.ord-detail dt { opacity: .7; }
.ord-detail dd { margin: 0; }

.ord-crew { margin-top: 1rem; }
.ord-crew-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.ord-crew-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .5rem; font-size: 12px;
}
.ord-crew-list li .who { font-weight: 600; flex: 1 1 auto; }
.ord-crew-list li .role { opacity: .75; }

.ord-disc { margin-top: 1rem; }
.ord-disc-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.ord-disc-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .5rem; font-size: 12px;
}
.ord-disc-list li .who { flex: 1 1 auto; }
.ord-disc-list li .amt { font-variant-numeric: tabular-nums; font-weight: 600; }

.ord-pay { margin-top: 1rem; }
.ord-pay-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.ord-pay-list li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .5rem; font-size: 12px;
}
.ord-pay-list li .who { flex: 1 1 auto; }
.ord-pay-list li .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.ord-pay-list li .note { flex-basis: 100%; opacity: .7; }

.ord-chip-pay-pending { background: rgba(245, 185, 54, .14); color: var(--gold); }
.ord-chip-pay-paid { background: rgba(113, 227, 138, .14); color: var(--green); }
.ord-chip-pay-failed { background: rgba(255, 83, 83, .14); color: var(--red); }

.ord-lines { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9em; }
.ord-lines th, .ord-lines td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.ord-lines th:last-child, .ord-lines td:last-child { text-align: right; }
.ord-lines tfoot td { font-weight: 700; border-bottom: none; border-top: 1px solid var(--line); }

.ord-grand-total { margin-top: .75rem; font-weight: 700; }
.ord-paid { margin-top: .75rem; font-weight: 600; }

.ord-status-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.ord-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 40rem) {
  .ord-row { grid-template-columns: 1fr auto; }
  .ord-row .who { grid-column: 1 / -1; }
}

/* ---------- crew list (Krew) ---------- */

.crew-list { display: grid; gap: .5rem; margin-top: 1rem; }

.crew-row {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  width: 100%;
  padding: .75rem 1rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.crew-row:hover { border-color: rgba(245, 185, 54, .5); }
.crew-row .who { font-weight: 600; flex: 1 1 auto; }
.crew-row .role, .crew-row .num, .crew-row .rate { opacity: .75; font-size: .9em; }
.crew-row .num, .crew-row .rate { font-variant-numeric: tabular-nums; }
.crew-row.inactive { opacity: .55; }
.crew-row .crew-tag { color: var(--red); font-size: .78em; font-weight: 700; }

.crew-swatch {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  flex: none;
}

.crew-leave { margin-top: 4px; }
.crew-leave-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.crew-leave-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .5rem; font-size: 12px;
}

/* ---------- discounts (Diskaun) ---------- */

/* Codes, bundle rules and tiers reuse .crew-list/.crew-row/.crew-tag as-is -
   the same "clickable row expands into an editor" shape, styled once. Only
   the spacing between the tab's three sections is new. */
.disc-section + .disc-section { margin-top: 1.75rem; }

/* ---------- schedule (Jadual) ---------- */

/* Reuses .calendar's 7-column grid; only the cell itself is new - a list, not
   a single flat-coloured day like the Kalendar tab's .date. A day's entries
   ("09:30 Aida Rahman") are legitimately too wide for a phone-width column,
   so the grid scrolls sideways inside its own box - the same overflow-x:auto
   + min-width:0 pairing style.css already uses on .table-scroll for v1's
   package comparison table. Without min-width:0 here and on #schedView, the
   grid's own unbreakable min-content width would push those ancestors wide
   instead of yielding to overflow-x, and the whole page would scroll sideways.*/
#schedView{min-width:0}
.sched-grid{align-items:stretch;overflow-x:auto;min-width:0}
.sched-day{
  border:1px solid var(--line);border-radius:8px;background:#0b1015;
  padding:6px 5px;min-height:82px;display:flex;flex-direction:column;gap:3px;
  text-align:left;color:inherit;font:inherit;cursor:pointer;
}
.sched-day:hover:not(:disabled){border-color:rgba(245,185,54,.5)}
.sched-day.empty{visibility:hidden;cursor:default}
.sched-daynum{font-size:11px;font-weight:700;color:#8b939b}
.sched-entry{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#cbd1d6;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sched-more{font-size:9.5px;color:#79828a;margin-top:1px}
.sched-dot{width:6px;height:6px;border-radius:50%;flex:none}
.sched-dot-pending{background:var(--gold)}
.sched-dot-confirmed{background:var(--green)}
.sched-dot-done{background:var(--muted)}
.sched-dot-cancelled{background:var(--red)}

/* Crew markers ride at the foot of the cell (margin-top:auto, inside the
   cell's own flex column) rather than beside each entry - one strip for the
   whole day, so a three-crew job never squeezes the "+N lagi" row above. */
.sched-crew{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto}
.sched-crew-dot{width:7px;height:7px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.3)}

@media(max-width:520px){
  .sched-day{min-height:68px;padding:5px 4px}
  .sched-entry,.sched-more{font-size:9px}
}

/* ---------- payment receipt ---------- */
/* Never on screen. The admin page is dark and full of controls; a receipt is
   a sheet of paper, so it is built black-on-white and only the print
   stylesheet ever shows it. Printing from the page itself means no popup
   window to be blocked and no second document to keep in step. */
.receipt{display:none}

@media print{
  .admin-shell{display:none !important}
  .receipt{display:block;color:#000;background:#fff;font-size:12pt;
    font-family:Montserrat,system-ui,sans-serif;padding:0;margin:0}
  .rc-name{font-size:20pt;margin:0 0 2pt}
  .rc-title{margin:0 0 14pt;letter-spacing:.14em;text-transform:uppercase;font-size:9pt}
  .receipt dl{display:grid;grid-template-columns:auto 1fr;gap:3pt 12pt;margin:0 0 14pt}
  .receipt dt{font-weight:600}
  .receipt dd{margin:0}
  .receipt table{width:100%;border-collapse:collapse;margin:0 0 10pt}
  .receipt th,.receipt td{text-align:left;padding:4pt 0;border-bottom:1px solid #ccc}
  .receipt td:last-child,.receipt th:last-child{text-align:right}
  .rc-sums{display:grid;grid-template-columns:1fr auto;gap:3pt 12pt;margin:0 0 16pt}
  .rc-sums .rc-big{font-weight:700;font-size:14pt}
  .rc-foot{font-size:9pt;color:#555;border-top:1px solid #ccc;padding-top:8pt}
}

/* Red because a confirmed booking sits on the day, not because the owner
   marked it by hand. Only cancelling that booking frees it, so the day is
   drawn locked rather than offering a click that would quietly do nothing. */
.calendar.admin-mode .date.booked.locked{cursor:not-allowed;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}

/* ---------- customer's own bookings (Tempahan saya) ----------
   A card, not a button: unlike admin/orders.js's .ord-row this one carries
   a real Bayar button next to its own toggle, and a button cannot nest
   inside another button. .ord-detail/.ord-lines/.ord-crew/.ord-disc etc.
   are reused as-is once a card opens - same shape as the owner's own order
   detail, so only the two pieces that differ (the card and its toggle) are
   new here. */
.acct-order{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  padding:.75rem 1rem;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;
  background:rgba(255,255,255,.03)}
.acct-order-toggle{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;
  flex:1 1 auto;min-width:0;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;padding:0}
.acct-order-toggle:hover{color:var(--gold)}
.acct-order .amt,.acct-order .when{opacity:.85;font-variant-numeric:tabular-nums}