/* ============================================================
   F. BINSABBAR storefront - CONCIERGE / Book a Private Viewing
   Reskins the REAL Private Visits engine (bookPrivateVisit CF)
   into the v4 MONOCHROME kit. NO accent colour: the engine's
   legacy hot-red #F74827 is replaced everywhere by ink #121212
   (selected = ink fill / ring, today = thin ink underline, no
   glow). 0px radius, house display labels, 44px+ controls,
   bilingual EN / AR-RTL via logical properties.
   All classes namespaced .cnc-*; kit classes reused where possible.
   ============================================================ */

/* ---- hero (reuses .hero .bg .sc .in; overrides height only) ---- */
.cnc-hero{height:62vh;min-height:460px;}
.cnc-hero .in{max-width:var(--maxw);}
.cnc-hero .h1{max-width:18ch;}
.cnc-hero .sub{color:rgba(255,255,255,.9);font-size:var(--ty-body);line-height:var(--ty-body-lh);max-width:46ch;margin:0 0 20px;}
.cnc-hero .lcta{color:#fff;}
@media(max-width:820px){.cnc-hero{height:48vh;min-height:380px;}}

/* ---- what-to-expect 4-up ---- */
.cnc-expect{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.cnc-exp-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.cnc-exp{padding:clamp(30px,4vw,46px) clamp(16px,2vw,26px);text-align:center;border-inline-start:1px solid var(--hair-soft);}
.cnc-exp:first-child{border-inline-start:0;}
.cnc-exp .ico{width:26px;height:26px;color:var(--ink);margin:0 auto 16px;}
.cnc-exp .lab{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink);margin-bottom:8px;}
.cnc-exp .ln{font-size:var(--ty-compact);color:var(--grey);line-height:var(--ty-compact-lh);max-width:22ch;margin-inline:auto;}
@media(max-width:820px){
  .cnc-exp-grid{grid-template-columns:1fr 1fr;}
  .cnc-exp:nth-child(odd){border-inline-start:0;}
  .cnc-exp:nth-child(n+3){border-top:1px solid var(--hair-soft);}
}
@media(max-width:440px){
  .cnc-exp-grid{grid-template-columns:1fr;}
  .cnc-exp{border-inline-start:0;border-top:1px solid var(--hair-soft);}
  .cnc-exp:first-child{border-top:0;}
}

/* ---- the salons 2-up ---- */
.cnc-salons{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);}
.cnc-salons.one{grid-template-columns:min(460px,100%);justify-content:center;}
.cnc-salon .pv{aspect-ratio:4/5;background:var(--card-grad);overflow:hidden;}
.cnc-salon .pv img{width:100%;height:100%;object-fit:cover;}
.cnc-salon .nm{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink);margin:20px 0 12px;}
.cnc-salon .addr{font-size:var(--ty-compact);color:var(--grey);line-height:var(--ty-compact-lh);}
.cnc-salon .addr .note{color:var(--grey-l);}
.cnc-salon .links{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 22px;}
.cnc-salon .links a{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;border-bottom:1px solid var(--ink);transition:gap .25s var(--e1);}
.cnc-salon .links a:hover{gap:13px;}
.cnc-salon .links a .ico{width:14px;height:14px;}
@media(max-width:700px){.cnc-salons{grid-template-columns:1fr;gap:40px;}}

/* ============ BOOKING (two-column: form + sticky recap) ============ */
.cnc-book{display:grid;grid-template-columns:minmax(0,58%) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start;}
@media(max-width:900px){.cnc-book{grid-template-columns:1fr;}}

.cnc-form{min-width:0;}
.cnc-field{margin-bottom:clamp(18px,2.4vw,26px);}
.cnc-field>.lbl{display:block;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);margin-bottom:11px;}
.cnc-field>.lbl .req{color:var(--ink);}
.cnc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.cnc-pair{grid-template-columns:1fr;}}

/* text inputs + textarea now use the kit .inp component (store.css) */

/* skeleton / avail state */
.cnc-avail-state{color:var(--grey);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);padding:8px 0 20px;}
.cnc-avail-state .cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 22px;}
.cnc-avail-state .cta a{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--ink);display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.cnc-avail-state .cta a .ico{width:14px;height:14px;}
.cnc-skel{display:grid;gap:12px;padding:8px 0;}
.cnc-skel span{display:block;background:linear-gradient(100deg,var(--sand-l) 30%,var(--sand) 50%,var(--sand-l) 70%);background-size:200% 100%;animation:cncshimmer 1.3s linear infinite;}
.cnc-skel .l1{height:14px;width:34%;}
.cnc-skel .l2{height:48px;width:100%;}
.cnc-skel .l3{height:240px;width:100%;margin-top:4px;}
@keyframes cncshimmer{to{background-position:-200% 0;}}
@media(prefers-reduced-motion:reduce){.cnc-skel span{animation:none;}}

/* salon segmented control now uses the kit .seg / .seg-btn component (store.css) */
.cnc-locaddr{margin-top:14px;font-size:var(--ty-compact);color:var(--grey);line-height:var(--ty-compact-lh);}
.cnc-locaddr .note{color:var(--grey-l);}
.cnc-locaddr .links{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px 20px;}
.cnc-locaddr a{color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:1px;}
.cnc-locaddr a:hover{border-color:var(--ink);}

/* calendar (date picker) now uses the kit .cal / .cal-day component (store.css) */

/* times: booking-specific chrome around the kit .slots / .slot time picker (store.css) */
.cnc-times{margin-top:20px;padding-top:20px;border-top:1px solid var(--hair);}
.cnc-times-head{text-align:center;font-size:var(--ty-help);color:var(--grey-l);margin:0;line-height:var(--ty-help-lh);}
.cnc-slots-empty{text-align:center;color:var(--grey);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);padding:6px 0;}
.cnc-slots-hint{text-align:center;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey-l);margin:14px 0 0;}

/* purpose radios use the kit .seg (container) + .rdo (pill) component (store.css) */
.cnc-piece{margin-top:14px;}

/* guest stepper now uses the kit .stepper.spread component (store.css) */

/* phone: single control = dial-code combobox + national number */
.cnc-phone{display:flex;align-items:center;height:48px;border:1px solid var(--hair);background:var(--paper);transition:border-color .18s,background .18s;}
.cnc-phone:focus-within{border-color:var(--ink);background:var(--cream);}
.cnc-ccode{position:relative;flex:none;height:100%;}
.cnc-ccode-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 12px 0 16px;font-family:var(--fbody);font-size:var(--ty-label);color:var(--ink);white-space:nowrap;}
.cnc-ccode-btn .code{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;}
.cnc-ccode-btn .ico{width:13px;height:13px;opacity:.55;transition:transform .16s;}
.cnc-ccode-btn[aria-expanded="true"] .ico{transform:rotate(180deg);}
.cc-iso{font-size:var(--ty-over);color:var(--grey-l);letter-spacing:var(--ty-track-over);text-transform:uppercase;}
.cnc-divider{width:1px;height:22px;background:var(--hair);flex:none;}
.cnc-phone-num{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 16px;font-family:var(--fbody);font-size:var(--ty-label);color:var(--ink);outline:none;direction:ltr;text-align:start;-webkit-appearance:none;appearance:none;}
.cnc-phone-num::placeholder{color:var(--grey-l);}
#site.ar .cnc-phone-num{text-align:end;}
.cnc-ccode-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;width:300px;max-width:82vw;background:var(--paper);border:1px solid var(--hair);box-shadow:0 24px 50px rgba(0,0,0,.18);padding:12px;}
.cnc-ccode-pop[hidden]{display:none;}
.cnc-ccode-search{width:100%;height:40px;border:1px solid var(--hair);background:var(--paper);padding:0 14px;font-family:var(--fbody);font-size:var(--ty-label);color:var(--ink);margin-bottom:10px;outline:none;-webkit-appearance:none;appearance:none;}
.cnc-ccode-search:focus{border-color:var(--ink);}
.cnc-ccode-list{list-style:none;margin:0;padding:0;max-height:236px;overflow-y:auto;}
.cnc-ccode-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--ink);}
.cnc-ccode-list li.hidden{display:none;}
.cnc-ccode-list li.active,.cnc-ccode-list li:hover{background:var(--chip);}
.cnc-ccode-list li .cc-iso{min-width:24px;flex:none;}
.cnc-ccode-list li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cnc-ccode-list li .cd{color:var(--grey);flex:none;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;}
.cnc-ccode-empty{padding:14px;text-align:center;color:var(--grey);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);}
@media(max-width:540px){.cnc-ccode-pop{width:250px;}}

/* terms + honeypot */
.cnc-terms{display:flex;align-items:flex-start;gap:12px;margin-top:24px;}
.cnc-terms .chk{margin-top:2px;}   /* the checkbox itself is the kit .chk (store.css); only the baseline offset is local */
.cnc-terms label{font-size:var(--ty-compact);color:var(--grey);line-height:var(--ty-compact-lh);cursor:pointer;}
.cnc-terms a{color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:1px;}
.cnc-terms a:hover{border-color:var(--ink);}
.cnc-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* inline note (slot taken) - mono, no red */
.cnc-inline{display:none;gap:12px;align-items:flex-start;margin-top:22px;padding:14px 16px;border:1px solid var(--ink);background:var(--sand-l);color:var(--ink);font-size:var(--ty-compact);line-height:var(--ty-compact-lh);}
.cnc-inline.show{display:flex;}
.cnc-inline .ico{width:18px;height:18px;flex:none;margin-top:1px;color:var(--ink);}

.cnc-submit{margin-top:24px;}
.cnc-submit[disabled]{opacity:.55;pointer-events:none;}

/* mobile mini-recap (above submit) */
.cnc-mini{display:none;margin-top:22px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:14px 0;font-size:var(--ty-compact);color:var(--ink);line-height:var(--ty-compact-lh);}
.cnc-mini .k{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey-l);}
@media(max-width:900px){.cnc-mini{display:block;}}

/* ---- sticky recap rail ---- */
.cnc-recap{position:sticky;top:calc(var(--hh) + 20px);border:1px solid var(--hair);background:var(--cream);padding:clamp(22px,3vw,32px);}
@media(max-width:900px){.cnc-recap{display:none;}}
.cnc-rc-title{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--ink);margin:0 0 6px;}
.cnc-rc-rows{margin-top:8px;}
.cnc-rc-row{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--hair-soft);}
.cnc-rc-row:first-child{border-top:0;}
.cnc-rc-k{flex:0 0 86px;font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey-l);}
.cnc-rc-v{flex:1;min-width:0;font-size:var(--ty-compact);color:var(--ink);line-height:var(--ty-compact-lh);}
.cnc-rc-v.empty{color:var(--greige);}
.cnc-reassure{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair-soft);font-size:var(--ty-help);color:var(--grey);line-height:var(--ty-help-lh);}

/* ---- feedback modal (renamed; mono icons, no red) ---- */
.cnc-modal{position:fixed;inset:0;z-index:9800;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(18,18,18,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.cnc-modal.show{display:flex;}
.cnc-modal-card{background:var(--paper);padding:36px 32px 28px;width:100%;max-width:380px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.25);}
.cnc-modal-card .m-ico{width:48px;height:48px;border:1px solid var(--hair);border-radius:999px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.cnc-modal-card .m-ico .ico{width:24px;height:24px;}
.cnc-modal-card p{margin:0 0 24px;color:var(--ink-warm);line-height:var(--ty-body-lh);font-size:var(--ty-body);}
.cnc-modal-card .btn{min-width:140px;}

/* ---- success / confirmation ---- */
.cnc-success{display:none;text-align:center;max-width:640px;margin-inline:auto;padding:clamp(36px,6vw,64px) 0;}
.cnc-success.show{display:block;}
.cnc-success .tick{width:64px;height:64px;border:1px solid var(--ink);border-radius:999px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.cnc-success .tick .ico{width:30px;height:30px;}
.cnc-success .ey{display:block;margin-bottom:14px;}
.cnc-success .h2{margin:0 0 16px;}
.cnc-success p{color:var(--grey);font-size:var(--ty-body);line-height:var(--ty-body-lh);max-width:52ch;margin:0 auto 12px;}
.cnc-success .recap{margin:28px auto 0;max-width:400px;text-align:start;border:1px solid var(--hair);background:var(--cream);padding:20px 24px;}
.cnc-success-links{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;}
.cnc-success-links .lcta{font-size:var(--ty-label);}

/* editorial close band caption */
.cnc-close .cap{position:relative;z-index:2;}

/* .slots[hidden] handled by the kit (store.css) */