/* Mehndi slot booking (Oct 2026). Ekam colours: blue #0000ff, navy #031f8a, light #f7f9fc. Mobile first. */
:root{--blue:#0000ff;--navy:#031f8a;--bg:#f7f9fc;--line:#e3e7f0;--ink:#1b2340;--mut:#69718a;--ok:#0a8f4e;--err:#c62828;--mehndi:#b5541b}
*{box-sizing:border-box}
body{margin:0;font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
a{color:var(--blue)}
.mb{max-width:760px;margin:0 auto;padding:0 0 30px}
.mb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--blue);color:#fff;padding:14px 18px;border-radius:0 0 18px 18px}
.mb-top img{height:46px;width:auto}
.mb-top p{margin:0;text-align:right;font-size:15px;line-height:1.25}.mb-top b{display:block;font-size:18px}
.mb-card{background:#fff;border-radius:18px;margin:14px 12px;padding:20px 18px;box-shadow:0 6px 24px rgba(3,31,138,.07)}
h1{margin:0 0 6px;color:var(--navy);font-size:26px;text-align:center}
h2{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--navy);margin:22px 0 12px}
h2 span{flex:0 0 28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}
h2.mt{margin-top:26px}
.mb-steps{display:flex;justify-content:center;gap:6px;list-style:none;padding:0;margin:8px 0 4px;font-size:12.5px;color:var(--mut)}
.mb-steps li{padding:4px 10px;border-radius:999px;background:#eef1f8}.mb-steps li.on{background:var(--blue);color:#fff}.mb-steps li.done{background:#dfe6ff;color:var(--navy)}
.mb-stores{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-store{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:14px;transition:.15s}
.mb-store:hover{border-color:#8f9cff}
.mb-store b{display:block;font-size:15px}.mb-store span{display:block;font-weight:700;color:var(--navy);font-size:16px;margin-top:2px}
.mb-store small{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}
.mb-store em{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;font-weight:700;color:var(--ok);background:#e6f6ee;border-radius:999px;padding:2px 9px}
.mb-store.none em{color:var(--mut);background:#eef1f8}
.mb-store.on{border-color:var(--blue);background:#f2f4ff;box-shadow:0 0 0 3px rgba(0,0,255,.08)}
.mb-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.mb-day{flex:0 0 70px;text-align:center;text-decoration:none;color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:8px 4px;background:#fff}
.mb-day small{display:block;font-size:12px;color:var(--mut);text-transform:uppercase}.mb-day b{display:block;font-size:24px;line-height:1.15}
.mb-day.on{background:var(--blue);border-color:var(--blue);color:#fff}.mb-day.on small{color:#dfe3ff}
.mb-sub{color:var(--mut);font-size:14px;margin:10px 0}
.mb-note{background:#fff7ef;border:1px solid #f3d6bd;color:var(--mehndi);border-radius:10px;padding:8px 12px;font-size:14px;margin:10px 0 0}
.mb-hour{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.mb-hour:first-of-type{border-top:0}
.mb-hour-h{font-weight:700;color:var(--navy);font-size:15px;padding-top:10px}.mb-hour-h small{display:block;font-weight:500;font-size:11.5px;color:var(--ok)}
.mb-hour.full .mb-hour-h small{color:var(--mut)}
.mb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.mb-slot{position:relative;margin:0}
.mb-slot input{position:absolute;opacity:0;pointer-events:none}
.mb-slot span{display:block;text-align:center;border:2px solid var(--line);border-radius:12px;padding:11px 4px;font-weight:700;font-size:15px;cursor:pointer;background:#fff;transition:.12s}
.mb-slot span small{display:block;font-weight:500;font-size:11px;color:var(--mut)}
.mb-slot:hover span{border-color:#8f9cff}
.mb-slot input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,0,255,.25)}
.mb-slot input:focus-visible + span{outline:3px solid #8f9cff}
.mb-slot.off span{background:#f1f2f6;color:#a6abbb;border-color:#eceef4;cursor:not-allowed;text-decoration:line-through}
.mb-slot.off span small{text-decoration:none}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:13.5px;font-weight:700;color:var(--navy)}
input:not([type=radio]):not([type=checkbox]),select{display:block;width:100%;margin-top:5px;height:48px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
input:focus,select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,0,255,.12)}
.mb-pick{margin:18px 0 10px;text-align:center;color:var(--mut);font-size:15px}.mb-pick.on{color:var(--navy)}
.mb-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:54px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-size:18px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,255,.22)}
.mb-btn:hover{background:#0000d6}.mb-btn[disabled]{opacity:.65}
.mb-btn.light{background:#fff;color:var(--blue);border:2px solid var(--blue);box-shadow:none}
.mb-btn.sm{width:auto;height:40px;font-size:14px;padding:0 14px}
.mb-err{background:#fdecec;border:1px solid #f5c2c2;color:var(--err);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:14.5px}
.mb-err div+div{margin-top:4px}
.mb-ok{background:#e6f6ee;border:1px solid #b9e4cd;color:var(--ok);border-radius:12px;padding:10px 14px;margin:12px;font-weight:600}
.mb-empty{color:var(--mut);text-align:center;padding:14px}
.mb-muted{color:var(--mut);font-size:13.5px}
.mb-done{text-align:center;padding:10px 0}
.mb-tick{width:74px;height:74px;margin:6px auto 12px;border-radius:50%;background:#e6f6ee;color:var(--ok);font-size:40px;display:flex;align-items:center;justify-content:center}
.mb-big{font-size:20px;color:var(--navy);margin:6px 0}
.mb-done .mb-btn{margin-top:14px}
.mb-foot{text-align:center;color:var(--mut);font-size:13px;padding:6px 12px}
@media (max-width:560px){
  .mb-hour{grid-template-columns:1fr;gap:4px}.mb-hour-h{padding-top:0;display:flex;gap:8px;align-items:baseline}
  .mb-top{padding:10px 14px}.mb-top img{height:36px}.mb-top p{font-size:12.5px}.mb-top b{font-size:15px}
  .mb-card{margin:10px 8px;padding:16px 12px}
  h1{font-size:22px}
  .mb-stores,.mb-grid{grid-template-columns:1fr}
  .mb-slots{grid-template-columns:repeat(4,1fr);gap:6px}
  .mb-slot span{font-size:14px;padding:10px 2px}
}
/* admin */
.mb-admin{max-width:1100px}
.mb-atop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--blue);color:#fff;padding:12px 16px;border-radius:0 0 14px 14px}
.mb-atop nav{display:flex;flex-wrap:wrap;gap:4px}
.mb-atop nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;font-size:14px}.mb-atop nav a.on,.mb-atop nav a:hover{background:rgba(255,255,255,.18)}
.mb-admin h2{margin-top:0}
.mb-dateform{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
.mb-dateform .wide,.mb-checks{grid-column:1/-1}
.mb-dateform small{display:block;font-weight:400;color:var(--mut);font-size:11.5px;margin-top:3px}
.mb-dateform .mb-btn{width:auto;padding:0 24px;height:46px}
.mb-checks{display:flex;gap:18px;flex-wrap:wrap}.mb-checks label{font-weight:500;color:var(--ink);display:flex;gap:6px;align-items:center}
.mb-tablewrap{overflow-x:auto}
.mb-table{width:100%;border-collapse:collapse;font-size:14px}
.mb-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:8px;border-bottom:2px solid var(--line)}
.mb-table td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.mb-table tr.past td{color:#9aa0b3}.mb-table tr.cancelled td{color:#9aa0b3;text-decoration:line-through}.mb-table tr.cancelled td.acts{text-decoration:none}
.mb-table .acts{white-space:nowrap}.mb-table .acts form{display:inline;margin-left:8px}
.lnk{border:0;background:none;color:var(--blue);cursor:pointer;font:inherit;padding:0}.lnk.red{color:var(--err)}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:#eef1f8;color:var(--mut)}.tag.ok{background:#e6f6ee;color:var(--ok)}
.mb-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.mb-filter label{min-width:180px}.mb-filter .grow{flex:1}
.mb-storeedit{display:grid;grid-template-columns:70px 1fr 1fr 1.4fr auto;gap:10px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}
.mb-storeedit .chk{display:flex;gap:6px;align-items:center;font-weight:500}
.mb-admin .mb-storeedit + .mb-btn,.mb-admin .mb-card form > .mb-btn{width:auto;padding:0 24px;margin-top:14px}
.mb-login{max-width:380px;margin:60px auto;background:#fff;border-radius:18px;padding:24px;box-shadow:0 6px 24px rgba(3,31,138,.07)}
.mb-login .mb-btn{margin-top:14px}.mb-login h1{font-size:20px;margin-bottom:14px}
@media (max-width:760px){.mb-dateform{grid-template-columns:1fr 1fr}.mb-storeedit{grid-template-columns:1fr}}
@media print{.mb-atop,.mb-filter,.acts,.mb-ok{display:none}.mb-card{box-shadow:none;margin:0}}
.mb-dateform .wide2{grid-column:span 2}
.mb-print-h{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.mb-print-h img{height:40px;background:var(--blue);padding:6px 10px;border-radius:8px}
.mb-print-h b{display:block;font-size:18px;color:var(--navy)}.mb-print-h small{color:var(--mut)}
.mb-print-h .noprint{margin-left:auto}
.mb-slip .mb-table th{width:140px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--mut);border-bottom:1px solid var(--line)}
.mb-table td.box{font-size:20px;text-align:center}
@media print{.noprint{display:none!important}body{background:#fff}.mb-print-h img{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (max-width:760px){.mb-dateform .wide2{grid-column:1/-1}}
.m-only{display:none}
/* admin tables become cards on phones */
@media (max-width:700px){
  .mb-admin .mb-card{padding:14px 12px}
  .mb-atop{padding:10px 12px}.mb-atop nav a{padding:6px 8px;font-size:13.5px}
  .mb-tablewrap .mb-table thead{display:none}
  .mb-tablewrap .mb-table,.mb-tablewrap .mb-table tbody,.mb-tablewrap .mb-table tr,.mb-tablewrap .mb-table td{display:block;width:100%}
  .mb-tablewrap .mb-table tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .mb-tablewrap .mb-table td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .mb-tablewrap .mb-table td[data-l]::before{content:attr(data-l);color:var(--mut);font-size:12.5px;text-align:left;flex:0 0 auto}
  .mb-tablewrap .mb-table td.m-head{font-size:16px;justify-content:flex-start;text-align:left;color:var(--navy)}
  .mb-tablewrap .mb-table td.m-head2{justify-content:flex-start;font-weight:600;padding-bottom:4px}
  .mb-tablewrap .mb-table td.m-hide{display:none}
  .mb-tablewrap .mb-table .m-only{display:inline;font-weight:600;color:var(--ink)}
  .mb-tablewrap .mb-table td.acts{justify-content:flex-start;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
  .mb-tablewrap .mb-table td.acts form{margin:0}
  .mb-tablewrap .mb-table td.acts a,.mb-tablewrap .mb-table td.acts .lnk{font-size:15px;padding:4px 0}
  .mb-filter label{min-width:0;flex:1 1 140px}
  .mb-filter .mb-btn.sm{flex:1}
}
#editForm{grid-template-columns:repeat(4,1fr)}@media (max-width:700px){#editForm{grid-template-columns:1fr}#editForm .mb-btn{width:100%}}
/* short layout (Oct 2026): store + date + hour tabs, details appear after a time is picked */
.mb-card h1{font-size:22px;margin-bottom:10px}
.mb-label{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px}
.mb-label span{float:right;text-transform:none;letter-spacing:0;color:var(--ok);font-weight:600}
.mb-hint{color:var(--mut);text-align:center;margin:14px 0 4px}
.mb-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mb-seg a{display:block;text-align:center;text-decoration:none;border:2px solid var(--line);border-radius:12px;padding:10px 6px;color:var(--ink);background:#fff}
.mb-seg a b{display:block;font-size:15px}.mb-seg a small{display:block;font-size:12px;color:var(--ok)}
.mb-seg a.none small{color:var(--mut)}
.mb-seg a.on{background:var(--blue);border-color:var(--blue);color:#fff}.mb-seg a.on small{color:#dfe3ff}
.mb-day{flex:0 0 62px;padding:6px 4px}.mb-day b{font-size:20px}
.mb-hours{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.mb-hr{flex:0 0 auto;border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 14px/1.15 inherit;font-family:inherit;color:var(--ink);cursor:pointer}
.mb-hr small{display:block;font-size:11px;font-weight:500;color:var(--ok)}
.mb-hr.on{background:var(--navy);border-color:var(--navy);color:#fff}.mb-hr.on small{color:#cfd6ff}
.mb-hr.full,.mb-hr[disabled]{opacity:.45;cursor:not-allowed}.mb-hr.full small{color:var(--mut)}
.mb-slots[hidden],.mb-details[hidden]{display:none}
.mb-slots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;margin-top:4px}
.mb-details{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mb-details .mb-pick{margin:0 0 12px;background:#f2f4ff;border-radius:10px;padding:10px;color:var(--navy)}
.mb-details .mb-btn{margin-top:14px}
@media (max-width:560px){.mb-slots{grid-template-columns:repeat(3,1fr)!important}.mb-card{margin-top:8px}}
/* steps + coupon first (Oct 2026) */
.mb-label i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:12px;margin-right:6px;vertical-align:1px}
.mb-label-s{margin-top:12px}
.mb-coupon{display:flex;gap:8px;align-items:stretch}
.mb-coupon input{margin-top:0!important;flex:1;letter-spacing:.04em}
.mb-coupon .mb-btn.sm{height:48px;width:auto;padding:0 18px;box-shadow:none}
.mb-coupon.ok input{border-color:var(--ok);background:#f0fbf5}
.mb-coupon.ok .mb-btn{background:#fff;color:var(--blue);border:2px solid var(--line)}
.mb-fmsg{display:block;font-size:13px;font-weight:500;min-height:0;margin-top:4px;color:var(--err)}
.mb-fmsg.ok{color:var(--ok);font-weight:700}
input.bad{border-color:var(--err)!important}
.mb-grid .full{grid-column:1/-1}
#mbPerson[hidden]{display:none}
.mb-coupon .mb-btn.sm{height:auto;min-height:48px;align-self:stretch}.mb-coupon input{height:auto;min-height:48px}