/* =========================================================
   THURAYA CLIENT APP — SIMULATION TARGET BRAND SKIN
   Built from the uploaded simulated visual direction.
   Load after styles.css.
   ========================================================= */

:root{
  --black:#0a0a0a;
  --primary:#0a0a0a;
  --off-white:#F0EDE8;
  --cream:#F0EDE8;
  --warm-white:#FAFAF8;
  --surface:#FAFAF8;
  --mid:#1A1A1A;
  --text-muted:#686158;
  --light-line:#D8D5D0;
  --border:#D8D5D0;
  --gold:#C8A94D;
  --gold-dark:#8A7136;
  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-sans:"DM Sans", Inter, system-ui, sans-serif;
}

body{
  background:#1a1a1a!important;
}

/* Desktop: present as premium phone/app shell like simulation */
@media(min-width:780px){
  #app{
    max-width:430px;
    min-height:844px;
    max-height:calc(100vh - 28px);
    margin:14px auto;
    background:var(--off-white);
    border-radius:44px;
    border:2px solid #333;
    overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,.56);
  }

  .screen{
    min-height:844px;
    max-height:calc(100vh - 28px);
    overflow-y:auto;
    padding:0 16px 110px!important;
    background:var(--off-white);
  }

  .screen.active{
    display:block!important;
  }

  .screen-inner{
    max-width:100%!important;
    padding:18px 0 0;
  }

  .welcome-inner{
    max-width:100%!important;
    min-height:844px!important;
    padding:0 24px 40px;
  }

  .sticky-bar{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%);
    width:426px!important;
    border-radius:0 0 40px 40px;
  }

  .bk-floating-signout{
    left:calc(50% + 128px);
    right:auto!important;
  }
}

/* Mobile full screen */
@media(max-width:779px){
  #app{
    min-height:100vh;
    background:var(--off-white);
  }
  .screen{
    background:var(--off-white);
  }
}

/* Welcome dark luxury screen */
#screen-welcome{
  background:#0a0a0a!important;
  color:#fff!important;
  padding:0 24px 40px!important;
}

#screen-welcome .welcome-inner{
  justify-content:center;
}

#screen-welcome .logo-mark{
  background:transparent!important;
  border:1px solid rgba(240,239,235,.25);
  color:#F0EFEB;
  box-shadow:none!important;
}

#screen-welcome .logo-wordmark{
  color:#fff!important;
  font-weight:300!important;
  font-size:34px!important;
  letter-spacing:10px!important;
}

#screen-welcome .logo-tagline{
  font-family:var(--font-serif);
  font-size:12px!important;
  font-style:italic;
  color:rgba(255,255,255,.55)!important;
  letter-spacing:1.2px!important;
}

#screen-welcome .welcome-copy{
  color:rgba(255,255,255,.72)!important;
  font-size:1.05rem!important;
  margin-top:22px;
}

#screen-welcome .btn-primary,
#screen-welcome .btn-outline{
  background:#fff!important;
  color:#0a0a0a!important;
  border-color:#fff!important;
  border-radius:12px!important;
  min-height:50px!important;
  box-shadow:none!important;
  letter-spacing:.18em!important;
  text-transform:uppercase;
}

#screen-welcome .btn-outline{
  background:transparent!important;
  color:rgba(255,255,255,.95)!important;
  border:.5px solid rgba(255,255,255,.16)!important;
}

#screen-welcome .btn-ghost,
#screen-welcome button[style*="text-decoration"]{
  color:#F0EFEB!important;
}

#screen-welcome .divider,
#screen-welcome .welcome-footnote,
#screen-welcome #welcomeError{
  color:rgba(255,255,255,.58)!important;
}

/* Add dark header feeling to main screens */
.screen:not(#screen-welcome):not(#screen-doc-viewer)::before{
  content:"THURAYA";
  display:block;
  margin:0 -16px 18px;
  padding:20px 20px 16px;
  background:#0a0a0a;
  color:#fff;
  text-align:center;
  font-family:var(--font-serif);
  font-size:30px;
  font-weight:300;
  letter-spacing:10px;
  line-height:1.1;
}

#screen-booking-mode::before{content:"THURAYA";}
#screen-services::before{content:"THURAYA";}
#screen-technician::before{content:"THURAYA";}
#screen-datetime::before{content:"THURAYA";}
#screen-confirm::before{content:"THURAYA";}
#screen-group-size::before{content:"THURAYA";}
#screen-group-services::before{content:"THURAYA";}
#screen-group-datetime::before{content:"THURAYA";}
#screen-group-confirm::before{content:"THURAYA";}

/* Headings */
.step-header{
  margin-bottom:18px!important;
}

.step-badge{
  background:rgba(255,255,255,.76)!important;
  border:.5px solid var(--light-line)!important;
  color:#1A1A1A!important;
  border-radius:20px!important;
  font-size:9px!important;
  letter-spacing:1.6px!important;
  padding:6px 13px!important;
}

.step-header h2{
  font-family:var(--font-serif)!important;
  font-size:clamp(2.05rem,9vw,3rem)!important;
  font-weight:300!important;
  letter-spacing:.2px!important;
  color:#0a0a0a!important;
}

.step-header p{
  font-size:.94rem!important;
  color:#1A1A1A!important;
  line-height:1.6!important;
}

/* Cards */
.mode-card,
.service-card,
.tech-option-card,
.tech-card,
.form-card,
.confirm-card,
.book-for-card,
.promo-block,
.group-option-card,
.group-capacity-panel,
.group-split-panel,
.group-manual-subgroup-card,
.group-billing-panel,
.cx-client-card{
  background:var(--warm-white)!important;
  border:.5px solid var(--light-line)!important;
  border-radius:12px!important;
  box-shadow:0 10px 26px rgba(10,10,10,.06)!important;
}

.mode-card{
  min-height:74px!important;
  padding:14px 12px!important;
  grid-template-columns:42px 1fr 18px!important;
}

.mode-card-icon{
  width:36px!important;
  height:36px!important;
  background:#F0EDE8!important;
}

.mode-card-body strong,
.service-card-name,
.tech-option-card strong,
.tech-card strong{
  color:#0a0a0a!important;
  font-weight:700!important;
  font-size:.95rem!important;
}

.mode-card-body span,
.service-card-desc,
.tech-option-card span,
.tech-card span{
  color:#1A1A1A!important;
  font-size:.82rem!important;
  line-height:1.45!important;
}

.mode-card-arrow{
  color:#8A7136!important;
}

/* Service selection */
.dept-btn{
  border-radius:10px!important;
  min-height:48px!important;
  border:.5px solid var(--light-line)!important;
  background:var(--warm-white)!important;
  color:#0a0a0a!important;
  font-size:.78rem!important;
  text-transform:none!important;
}

.dept-btn.active{
  background:#0a0a0a!important;
  color:#fff!important;
  border-color:#0a0a0a!important;
  box-shadow:none!important;
}

.service-card{
  border-radius:10px!important;
  padding:14px!important;
}

.service-card.selected{
  border-color:#0a0a0a!important;
  border-width:1.5px!important;
  box-shadow:0 12px 24px rgba(10,10,10,.12)!important;
}

.service-price-pill{
  font-family:var(--font-serif)!important;
  font-size:1.15rem!important;
  color:#0a0a0a!important;
}

/* Inputs */
input,select,textarea{
  background:var(--warm-white)!important;
  border:.5px solid var(--light-line)!important;
  border-radius:10px!important;
  min-height:48px!important;
  font-size:.92rem!important;
}

/* Buttons */
.btn-primary,
.btn-primary.full,
#btnToTech,
#btnToDateTime,
#btnToConfirm,
#btnConfirmBooking,
#grp_toDateTimeBtn,
#grp_toConfirmBtn,
#grp_btnConfirm,
#btnSaveGuest,
#btnSaveProfile{
  background:#0a0a0a!important;
  color:#fff!important;
  border-color:#0a0a0a!important;
  border-radius:12px!important;
  min-height:50px!important;
  font-size:10px!important;
  letter-spacing:2.5px!important;
  text-transform:uppercase!important;
  box-shadow:0 12px 26px rgba(10,10,10,.16)!important;
}

.btn-primary:disabled,
#btnToTech:disabled,
#btnToConfirm:disabled,
#grp_toDateTimeBtn:disabled,
#grp_toConfirmBtn:disabled{
  background:#CFCBC4!important;
  color:#7A756D!important;
  border-color:#CFCBC4!important;
  box-shadow:none!important;
}

.btn-outline,
.btn-secondary{
  border-radius:12px!important;
  background:var(--warm-white)!important;
  border:.5px solid var(--light-line)!important;
}

.btn-ghost{
  color:#0a0a0a!important;
}

/* Date/time */
.slots-label,.section-title,.form-group label,.confirm-label{
  color:#1A1A1A!important;
  font-size:9px!important;
  letter-spacing:1.5px!important;
  text-transform:uppercase!important;
}

#bk_slots button,#grp_slots button,.slot-btn{
  border-radius:8px!important;
  min-height:58px!important;
  background:var(--warm-white)!important;
  border:.5px solid var(--light-line)!important;
  box-shadow:none!important;
}

#bk_slots button.selected,#bk_slots button.active,
#grp_slots button.selected,#grp_slots button.active,
.slot-btn.selected,.slot-btn.active{
  background:#0a0a0a!important;
  color:#fff!important;
  border-color:#0a0a0a!important;
}

/* Confirm card dark like simulation */
#screen-confirm .confirm-card,
#screen-group-confirm .confirm-card,
#screen-success .confirm-card,
#screen-group-success .confirm-card{
  background:#0a0a0a!important;
  color:#fff!important;
  border-color:#0a0a0a!important;
}

#screen-confirm .confirm-label,
#screen-group-confirm .confirm-label,
#screen-success .confirm-label,
#screen-group-success .confirm-label{
  color:rgba(255,255,255,.68)!important;
}

#screen-confirm .confirm-value,
#screen-group-confirm .confirm-value,
#screen-success .confirm-value,
#screen-group-success .confirm-value{
  color:#fff!important;
}

#screen-confirm .confirm-row,
#screen-group-confirm .confirm-row,
#screen-success .confirm-row,
#screen-group-success .confirm-row{
  border-color:rgba(255,255,255,.08)!important;
}

/* Sticky bar as bottom nav-like CTA */
.sticky-bar{
  background:rgba(250,250,248,.96)!important;
  backdrop-filter:blur(10px);
}

.sticky-empty{
  font-size:.78rem!important;
}

.sticky-clear-btn{
  color:#1A1A1A!important;
}

/* remove leaked early UI if any old JS/CSS injects it */
.early-bookfor{
  display:none!important;
}

/* client care safe */
#screen-doc-viewer::before{
  display:none!important;
}


/* =========================================================
   THURAYA WARM LUXURY LAYER 1 — CSS-FIRST POLISH
   Scope: global brand foundation + welcome/login + booking-mode polish.
   Safety: no JavaScript logic changed.
   ========================================================= */
:root{
  --black:#090807; --primary:#090807; --mid:#1F1A16;
  --off-white:#F3EEE7; --cream:#F3EEE7; --warm-white:#FFFDF8; --surface:#FFFDF8; --surface-soft:#F8F1E8;
  --text-muted:#756A5C; --light-line:#DDD3C5; --border:#DDD3C5;
  --gold:#C8A94D; --gold-dark:#8F7638; --gold-soft:#EFE3BF;
  --font-serif:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --font-sans:"Inter","Neue Haas Grotesk Text","Helvetica Neue",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-soft:0 18px 42px rgba(35,26,16,.085);
  --shadow-card:0 18px 38px rgba(35,26,16,.10);
}
html,body{font-family:var(--font-sans)!important;background:radial-gradient(circle at top,#29221B 0%,#171411 38%,#080706 100%)!important}
body,button,input,select,textarea{font-family:var(--font-sans)!important;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#app{background:linear-gradient(180deg,#F7F2EA 0%,#EFE9DF 100%)!important}
@media(min-width:780px){#app{background:linear-gradient(180deg,#F9F3EA 0%,#EEE7DC 100%)!important;border-color:rgba(255,255,255,.10)!important;box-shadow:0 42px 96px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.06)!important}}
.screen{background:linear-gradient(180deg,#F9F3EA 0%,#EEE7DC 100%)!important}
.logo-wordmark,.step-header h2,.success-title,.confirm-title,.doc-viewer-title{font-family:var(--font-serif)!important;letter-spacing:.01em}.step-header h2{font-weight:400!important;line-height:.98!important;letter-spacing:-.035em!important}.step-header p{color:#2F2922!important;font-weight:400!important;letter-spacing:-.01em!important}
#screen-welcome{position:relative!important;overflow:hidden!important;background:#090807!important;color:#fff!important}
#screen-welcome::before{content:""!important;position:absolute!important;inset:-20%!important;pointer-events:none!important;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.055),transparent 28%),radial-gradient(circle at 50% 52%,rgba(200,169,77,.08),transparent 34%),linear-gradient(180deg,#090807 0%,#0B0A09 100%)!important;display:block!important;margin:0!important;padding:0!important}
#screen-welcome .welcome-inner{position:relative!important;z-index:1!important;min-height:100vh!important;padding:70px 8px 46px!important;justify-content:center!important}@media(min-width:780px){#screen-welcome .welcome-inner{min-height:844px!important;padding:80px 24px 56px!important}}
#screen-welcome .logo-block{margin-bottom:64px!important}#screen-welcome .logo-mark{width:62px!important;height:62px!important;margin-bottom:26px!important;color:#F7F1E8!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.015)!important;box-shadow:0 0 0 1px rgba(255,255,255,.035),0 20px 50px rgba(0,0,0,.36)!important;font-family:var(--font-serif)!important;font-size:1.45rem!important;font-weight:600!important}
#screen-welcome .logo-wordmark{color:#FBF7F0!important;font-size:clamp(2.7rem,10vw,4.1rem)!important;font-weight:400!important;letter-spacing:.22em!important;line-height:.88!important;margin-left:.22em!important}#screen-welcome .logo-tagline{margin-top:14px!important;font-family:"Cormorant Garamond",Georgia,serif!important;color:rgba(246,239,230,.58)!important;font-size:1.06rem!important;font-style:italic!important;letter-spacing:.14em!important}
#screen-welcome .welcome-copy{margin:0 0 70px!important;color:rgba(247,241,232,.76)!important;font-family:var(--font-serif)!important;font-size:clamp(1.45rem,5vw,1.85rem)!important;line-height:1.62!important;letter-spacing:-.025em!important}#screen-welcome .welcome-actions{width:100%!important;max-width:662px!important;gap:18px!important;margin:0 auto!important}
#screen-welcome .btn-primary,#screen-welcome .btn-outline{min-height:74px!important;border-radius:24px!important;font-size:.86rem!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase!important;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important}#screen-welcome .btn-primary{background:#FBFAF6!important;color:#10100F!important;border-color:#FBFAF6!important;box-shadow:0 20px 48px rgba(0,0,0,.34),inset 0 -1px 0 rgba(0,0,0,.08)!important}#screen-welcome .btn-outline{background:rgba(255,255,255,.018)!important;color:#F8F2E9!important;border:1px solid rgba(255,255,255,.17)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important}#screen-welcome .btn-primary:active,#screen-welcome .btn-outline:active{transform:scale(.985)!important}#screen-welcome .divider{color:rgba(247,241,232,.58)!important;font-size:1.08rem!important;margin:6px 0!important}#screen-welcome .btn-ghost,#screen-welcome button[style*="text-decoration"]{color:#B59B54!important;font-weight:700!important;text-underline-offset:4px!important}#screen-welcome .welcome-footnote{margin-top:46px!important;color:rgba(247,241,232,.56)!important;font-size:.94rem!important;line-height:1.5!important}
.p9b-email-block,.p9-softgate-card{background:rgba(255,248,238,.96)!important;border:1px solid rgba(221,211,197,.9)!important;border-radius:24px!important;box-shadow:0 18px 46px rgba(0,0,0,.22)!important;color:#3B3026!important}.p9b-email-block input,.p9-softgate-card input{background:#FFFDF8!important;border-color:rgba(143,118,56,.22)!important;border-radius:16px!important}
.screen:not(#screen-welcome):not(#screen-doc-viewer)::before{background:#090807!important;color:#FBF7F0!important;font-family:var(--font-serif)!important;font-weight:400!important;letter-spacing:.24em!important;font-size:32px!important;box-shadow:0 16px 38px rgba(0,0,0,.08)!important}#screen-booking-mode .screen-inner{padding-top:28px!important}#screen-booking-mode .step-header{margin:0 0 28px!important}#screen-booking-mode .step-badge{margin-bottom:26px!important;background:rgba(255,255,255,.78)!important;border-color:rgba(191,182,168,.75)!important;color:#191511!important;box-shadow:0 10px 26px rgba(36,28,18,.045)!important}#screen-booking-mode .step-header h2{font-size:clamp(3.1rem,13vw,5.05rem)!important;max-width:95%!important}#screen-booking-mode .step-header p{font-size:1.12rem!important;margin-top:22px!important}
.mode-card,.service-card,.tech-option-card,.tech-card,.form-card,.confirm-card,.book-for-card,.promo-block,.group-option-card,.group-capacity-panel,.group-split-panel,.group-manual-subgroup-card,.group-billing-panel,.cx-client-card{background:rgba(255,253,248,.92)!important;border:1px solid rgba(221,211,197,.82)!important;border-radius:22px!important;box-shadow:var(--shadow-soft)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}.mode-card{min-height:148px!important;padding:22px 24px!important;grid-template-columns:58px 1fr 22px!important;gap:18px!important;border-radius:24px!important}.mode-card-icon{width:48px!important;height:48px!important;background:#F4EFE8!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important}.mode-card-body strong{font-size:1.08rem!important;font-weight:750!important;letter-spacing:-.015em!important}.mode-card-body span{margin-top:4px!important;color:#2F2922!important;font-size:1rem!important;line-height:1.45!important}.mode-card-arrow{color:#8F7638!important;font-size:1.9rem!important}.mode-badge{background:linear-gradient(135deg,#D7C16A,#B99B41)!important;color:#16120C!important;padding:5px 12px!important;letter-spacing:.08em!important}
.btn-primary,.btn-outline,.btn-secondary,.btn-ghost,.mode-card,.service-card,.tech-option-card,.tech-card,.dept-btn,#bk_slots button,#grp_slots button,.slot-btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease!important}.btn-primary:active,.btn-outline:active,.btn-secondary:active,.mode-card:active,.service-card:active,.tech-option-card:active,.tech-card:active,.dept-btn:active,#bk_slots button:active,#grp_slots button:active,.slot-btn:active{transform:scale(.985)!important}@media(hover:hover){.mode-card:hover,.service-card:hover,.tech-option-card:hover,.tech-card:hover{transform:translateY(-1px)!important;border-color:rgba(143,118,56,.38)!important;box-shadow:var(--shadow-card)!important}}
.btn-primary,.btn-primary.full,#btnToTech,#btnToDateTime,#btnToConfirm,#btnConfirmBooking,#grp_toDateTimeBtn,#grp_toConfirmBtn,#grp_btnConfirm,#btnSaveGuest,#btnSaveProfile{background:linear-gradient(180deg,#17130F 0%,#090807 100%)!important;border-color:#090807!important;border-radius:18px!important;min-height:56px!important;box-shadow:0 16px 32px rgba(35,26,16,.20)!important}.btn-outline,.btn-secondary{border-radius:18px!important;background:rgba(255,253,248,.78)!important;border-color:rgba(221,211,197,.95)!important}input,select,textarea{border-radius:16px!important;background:rgba(255,253,248,.96)!important;border-color:rgba(221,211,197,.95)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important}input:focus,select:focus,textarea:focus{border-color:rgba(143,118,56,.62)!important;box-shadow:0 0 0 3px rgba(200,169,77,.12)!important}
@media(max-width:420px){#screen-welcome .btn-primary,#screen-welcome .btn-outline{min-height:64px!important;border-radius:22px!important;font-size:.8rem!important}#screen-welcome .logo-wordmark{font-size:2.75rem!important;letter-spacing:.2em!important}#screen-booking-mode .step-header h2{font-size:3.35rem!important}.mode-card{min-height:132px!important;padding:20px 20px!important}}

/* === THURAYA ONE-SCALE APP VIEWPORT LOCK ===
   Single source of truth: PC and mobile render the same centered app shell.
   No separate mobile theme. No mobile-only scaling overrides.
*/
html,
body {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #000 !important;
}

body {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  color: #111 !important;
}

#app {
  width: min(430px, 100vw) !important;
  max-width: 430px !important;
  min-height: 844px !important;
  margin: 14px auto !important;
  background: linear-gradient(180deg, #F9F3EA 0%, #EEE7DC 100%) !important;
  border-radius: 44px !important;
  border: 2px solid #333 !important;
  overflow: hidden !important;
  box-shadow: 0 42px 96px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  box-sizing: border-box !important;
}

.screen {
  width: 100% !important;
  min-height: 844px !important;
  max-height: calc(100vh - 28px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 16px 110px !important;
  background: linear-gradient(180deg, #F9F3EA 0%, #EEE7DC 100%) !important;
  box-sizing: border-box !important;
}

.screen.active {
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}

.screen-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 18px 0 0 !important;
  box-sizing: border-box !important;
}

/* Welcome uses same app shell scale; only its own black design differs. */
#screen-welcome {
  background: #000 !important;
  color: #F8F7F3 !important;
}

#screen-welcome.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#screen-welcome .welcome-inner {
  width: 100% !important;
  max-width: 390px !important;
  min-height: 844px !important;
  margin: 0 auto !important;
  padding: 0 24px 40px !important;
  box-sizing: border-box !important;
}

.sticky-bar {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(426px, 100vw) !important;
  border-radius: 0 0 40px 40px !important;
}

.bk-floating-signout {
  left: calc(50% + 128px) !important;
  right: auto !important;
}

/* Prevent cards, buttons, and form controls from overflowing the app shell. */
*, *::before, *::after {
  box-sizing: border-box !important;
}

img, svg, video, canvas {
  max-width: 100% !important;
}

/* === END THURAYA ONE-SCALE APP VIEWPORT LOCK === */

/* === THURAYA DEVICE-SAFE SCALE LOCK v2 ===
   Fixes mobile overflow while preserving the PC-master 430px app shell.
   The app uses one viewport scale everywhere; shell margin collapses to 0 on phones.
*/
:root{
  --thuraya-shell-w: 430px;
  --thuraya-shell-gap: clamp(0px, calc((100vw - 430px) / 2), 14px);
  --thuraya-shell-h: min(844px, calc(100dvh - var(--thuraya-shell-gap) - var(--thuraya-shell-gap)));
}

html,
body{
  width:100% !important;
  max-width:100% !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  background:#000 !important;
}

body{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}

#app{
  width:min(var(--thuraya-shell-w), 100vw) !important;
  max-width:100vw !important;
  height:var(--thuraya-shell-h) !important;
  min-height:var(--thuraya-shell-h) !important;
  max-height:var(--thuraya-shell-h) !important;
  margin:var(--thuraya-shell-gap) auto !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.screen{
  width:100% !important;
  min-width:0 !important;
  height:var(--thuraya-shell-h) !important;
  min-height:var(--thuraya-shell-h) !important;
  max-height:var(--thuraya-shell-h) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}

.screen.active{
  display:block !important;
}

.screen-inner,
.welcome-inner,
.sticky-footer{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

.sticky-bar{
  width:min(426px, 100vw) !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
}

.mode-card,
.service-card,
.tech-option-card,
.tech-card,
.form-card,
.confirm-card,
.book-for-card,
.promo-block,
.group-option-card,
.group-capacity-panel,
.group-split-panel,
.group-manual-subgroup-card,
.group-billing-panel,
.cx-client-card{
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Keep the same PC design, but remove only the physical shell chrome when it would cause phone overflow. */
@media (max-width: 430px){
  #app{
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  .screen{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #screen-welcome .welcome-inner{
    min-height:var(--thuraya-shell-h) !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
/* === END THURAYA DEVICE-SAFE SCALE LOCK v2 === */

/* =========================================================
   THURAYA CRISP SCALE PASS — Booking landing + global cards
   Purpose: reduce oversized typography/cards and prevent margin overflow.
   Logic untouched.
   ========================================================= */
:root{
  --thuraya-shell-w: 390px !important;
  --thuraya-page-pad: 18px !important;
}

#app{
  width:min(390px, 100vw) !important;
  max-width:390px !important;
}

.screen{
  padding-left:var(--thuraya-page-pad) !important;
  padding-right:var(--thuraya-page-pad) !important;
  padding-bottom:96px !important;
}

.screen-inner{
  max-width:100% !important;
  padding-top:22px !important;
}

/* Keep floating controls inside the app shell */
.bk-floating-signout{
  position:fixed !important;
  top:18px !important;
  left:calc(50% + 96px) !important;
  right:auto !important;
  transform:none !important;
  max-width:104px !important;
  min-height:44px !important;
  padding:8px 18px !important;
  border-radius:999px !important;
  font-size:.82rem !important;
  letter-spacing:.08em !important;
}

/* Booking landing page: crisp mobile-app hierarchy */
#screen-booking-mode .screen-inner{
  padding-top:24px !important;
}

#screen-booking-mode .step-header{
  margin:0 0 22px !important;
}

#screen-booking-mode .step-badge{
  min-height:34px !important;
  padding:8px 18px !important;
  margin-bottom:34px !important;
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  border-radius:999px !important;
}

#screen-booking-mode .step-header h2{
  font-size:clamp(3.05rem, 14vw, 4.05rem) !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;
  max-width:100% !important;
  margin:0 !important;
}

#screen-booking-mode .step-header p{
  color:#2F2922 !important;
  font-size:1rem !important;
  line-height:1.4 !important;
  margin-top:24px !important;
}

#screen-booking-mode .step-header + div{
  gap:12px !important;
  margin-top:0 !important;
}

#screen-booking-mode .mode-card{
  min-height:112px !important;
  padding:16px 18px !important;
  border-radius:22px !important;
  grid-template-columns:46px minmax(0,1fr) 18px !important;
  gap:14px !important;
}

#screen-booking-mode .mode-card-icon{
  width:42px !important;
  height:42px !important;
  font-size:1.08rem !important;
}

#screen-booking-mode .mode-card-body strong{
  font-size:1rem !important;
  line-height:1.15 !important;
  letter-spacing:-.015em !important;
}

#screen-booking-mode .mode-card-body span{
  display:block !important;
  margin-top:8px !important;
  font-size:.94rem !important;
  line-height:1.38 !important;
  color:#2F2922 !important;
}

#screen-booking-mode .mode-card-arrow{
  font-size:1.55rem !important;
  line-height:1 !important;
}

/* Global card compression for remaining booking pages */
.service-card,
.tech-option-card,
.tech-card,
.form-card,
.confirm-card,
.book-for-card,
.promo-block,
.group-option-card,
.group-capacity-panel,
.group-split-panel,
.group-manual-subgroup-card,
.group-billing-panel,
.cx-client-card{
  border-radius:20px !important;
  padding:16px 18px !important;
}

.btn-primary,
.btn-primary.full,
.btn-outline,
.btn-secondary,
#btnToTech,
#btnToDateTime,
#btnToConfirm,
#btnConfirmBooking,
#grp_toDateTimeBtn,
#grp_toConfirmBtn,
#grp_btnConfirm,
#btnSaveGuest,
#btnSaveProfile{
  min-height:50px !important;
  border-radius:16px !important;
  font-size:.86rem !important;
}

input,select,textarea{
  min-height:46px !important;
  border-radius:14px !important;
  font-size:.95rem !important;
}

/* Phones: keep same design, just remove shell chrome and tighten edge padding */
@media (max-width:430px){
  :root{--thuraya-shell-w:390px !important;--thuraya-page-pad:18px !important;}
  #app{width:100vw !important;max-width:100vw !important;border-radius:0 !important;border-left:0 !important;border-right:0 !important;margin:0 auto !important;}
  .screen{padding-left:18px !important;padding-right:18px !important;}
  .bk-floating-signout{left:auto !important;right:16px !important;top:16px !important;}
  #screen-booking-mode .step-header h2{font-size:clamp(2.55rem, 13.5vw, 3.55rem) !important;}
  #screen-booking-mode .mode-card{min-height:104px !important;padding:15px 16px !important;grid-template-columns:44px minmax(0,1fr) 18px !important;}
  #screen-booking-mode .mode-card-body span{font-size:.92rem !important;}
}

/* =========================================================
   THURAYA LANDING FINAL POLISH v1
   Scope: booking landing page only. PC/mobile share same scale.
   Logic untouched.
   ========================================================= */
#screen-booking-mode .screen-inner{
  padding-top:18px !important;
}

#screen-booking-mode .step-header{
  margin:0 0 18px !important;
}

#screen-booking-mode .step-badge{
  min-height:32px !important;
  padding:7px 16px !important;
  margin-bottom:24px !important;
  font-size:.68rem !important;
  letter-spacing:.17em !important;
  border-radius:999px !important;
}

#screen-booking-mode .step-header h2{
  font-size:clamp(2.45rem, 10.8vw, 3.2rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
  margin:0 !important;
  max-width:100% !important;
}

#screen-booking-mode .step-header p{
  font-size:.94rem !important;
  line-height:1.38 !important;
  margin-top:18px !important;
  margin-bottom:0 !important;
  color:#2F2922 !important;
}

#screen-booking-mode .step-header + div{
  gap:10px !important;
}

#screen-booking-mode .mode-card{
  min-height:96px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  grid-template-columns:42px minmax(0,1fr) 16px !important;
  gap:12px !important;
}

#screen-booking-mode .mode-card-icon{
  width:40px !important;
  height:40px !important;
  font-size:1rem !important;
}

#screen-booking-mode .mode-card-body strong{
  font-size:.98rem !important;
  line-height:1.12 !important;
  letter-spacing:-.012em !important;
}

#screen-booking-mode .mode-card-body span{
  margin-top:6px !important;
  font-size:.88rem !important;
  line-height:1.32 !important;
  color:#2F2922 !important;
}

#screen-booking-mode .mode-card-arrow{
  font-size:1.35rem !important;
}

.bk-floating-signout{
  max-width:96px !important;
  min-height:40px !important;
  padding:7px 15px !important;
  font-size:.76rem !important;
}

@media (max-width:430px){
  #screen-booking-mode .screen-inner{padding-top:16px !important;}
  #screen-booking-mode .step-badge{margin-bottom:22px !important;}
  #screen-booking-mode .step-header h2{font-size:clamp(2.35rem, 10.6vw, 3rem) !important;}
  #screen-booking-mode .mode-card{min-height:94px !important;padding:13px 15px !important;}
}

/* =========================================================
   THURAYA SIGN OUT CTA POLISH v2
   Purpose: separate Sign Out from the THURAYA brand wordmark/header.
   Logic untouched.
   ========================================================= */
.bk-floating-signout{
  position:fixed !important;
  top:calc(var(--thuraya-shell-gap, 14px) + 112px) !important;
  left:calc(50% + 92px) !important;
  right:auto !important;
  transform:none !important;
  z-index:9999 !important;
  width:auto !important;
  max-width:92px !important;
  min-height:34px !important;
  padding:6px 13px !important;
  border-radius:999px !important;
  border:1px solid rgba(10,10,10,.12) !important;
  background:rgba(255,253,248,.86) !important;
  color:#111 !important;
  box-shadow:0 10px 24px rgba(35,26,16,.10) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.66rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

/* Keep the brand header clean and unshared with controls. */
.screen:not(#screen-welcome):not(#screen-doc-viewer)::before{
  padding-top:20px !important;
  padding-bottom:18px !important;
}

/* Landing caption should remain readable on the cream background. */
#screen-booking-mode .step-header p{
  color:#2F2922 !important;
  opacity:.92 !important;
}

@media(max-width:430px){
  .bk-floating-signout{
    top:104px !important;
    left:auto !important;
    right:18px !important;
    max-width:88px !important;
    min-height:32px !important;
    padding:6px 12px !important;
    font-size:.62rem !important;
  }
}



/* =========================================================
   THURAYA FULL BRAND RESTORE + GLOBAL HERO POLISH v3
   Purpose: restore full styling after accidental partial brand.css replacement,
   then apply one consistent hero scale across all booking pages.
   ========================================================= */

/* Single stable app shell: same experience on PC and mobile */
:root{
  --thuraya-shell-w: 430px !important;
  --thuraya-page-pad: 18px !important;
  --thuraya-shell-gap: clamp(0px, calc((100vw - 430px) / 2), 14px) !important;
  --thuraya-shell-h: min(844px, calc(100dvh - (var(--thuraya-shell-gap) * 2))) !important;
}

html,
body{
  width:100% !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  background:#000 !important;
}

body{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
}

#app{
  width:min(var(--thuraya-shell-w), 100vw) !important;
  max-width:var(--thuraya-shell-w) !important;
  min-height:var(--thuraya-shell-h) !important;
  max-height:var(--thuraya-shell-h) !important;
  height:var(--thuraya-shell-h) !important;
  margin:var(--thuraya-shell-gap) auto !important;
  background:linear-gradient(180deg,#F9F3EA 0%,#EEE7DC 100%) !important;
  border-radius:44px !important;
  border:2px solid #333 !important;
  overflow:hidden !important;
  box-shadow:0 42px 96px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  box-sizing:border-box !important;
}

.screen{
  width:100% !important;
  min-width:0 !important;
  height:var(--thuraya-shell-h) !important;
  min-height:var(--thuraya-shell-h) !important;
  max-height:var(--thuraya-shell-h) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:0 var(--thuraya-page-pad) 96px !important;
  background:linear-gradient(180deg,#F9F3EA 0%,#EEE7DC 100%) !important;
  box-sizing:border-box !important;
}

.screen.active{
  display:block !important;
  justify-content:initial !important;
  align-items:initial !important;
}

.screen-inner{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:18px 0 0 !important;
  box-sizing:border-box !important;
}

/* Brand header stays clean and never shares space with Sign Out */
.screen:not(#screen-welcome):not(#screen-doc-viewer)::before{
  content:"THURAYA" !important;
  display:block !important;
  margin:0 calc(var(--thuraya-page-pad) * -1) 22px !important;
  padding:22px 18px 20px !important;
  background:#090807 !important;
  color:#FBF7F0 !important;
  text-align:center !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:clamp(1.72rem, 7vw, 2.1rem) !important;
  font-weight:400 !important;
  letter-spacing:.24em !important;
  line-height:1.05 !important;
  box-shadow:0 16px 38px rgba(0,0,0,.08) !important;
}

/* Sign Out separated below header, not inside the wordmark area */
.bk-floating-signout{
  position:fixed !important;
  top:calc(var(--thuraya-shell-gap) + 92px) !important;
  left:calc(50% + 96px) !important;
  right:auto !important;
  transform:none !important;
  z-index:9999 !important;
  width:auto !important;
  max-width:96px !important;
  min-height:34px !important;
  padding:6px 13px !important;
  border-radius:999px !important;
  border:1px solid rgba(10,10,10,.12) !important;
  background:rgba(255,253,248,.90) !important;
  color:#111 !important;
  box-shadow:0 10px 24px rgba(35,26,16,.10) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.64rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

/* Global hero title system for every booking page */
.step-header{
  margin:0 0 18px !important;
}

.step-header h2,
.success-title,
.confirm-title,
.doc-viewer-title{
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:clamp(1.72rem, 6.4vw, 2.32rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  font-weight:400 !important;
  color:#0a0a0a !important;
  margin:0 !important;
  max-width:100% !important;
}

.step-header p,
.success-sub{
  color:#2F2922 !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.92rem !important;
  line-height:1.38 !important;
  margin:14px 0 0 !important;
  opacity:.88 !important;
}

.step-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  padding:7px 16px !important;
  margin-bottom:20px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(191,182,168,.75) !important;
  color:#191511 !important;
  box-shadow:0 10px 26px rgba(36,28,18,.045) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.66rem !important;
  font-weight:850 !important;
  letter-spacing:.17em !important;
  text-transform:uppercase !important;
}

/* Landing page gets the same system, slightly wider title allowed */
#screen-booking-mode .screen-inner{
  padding-top:18px !important;
}

#screen-booking-mode .step-header h2{
  font-size:clamp(1.9rem, 7.2vw, 2.55rem) !important;
  line-height:1.05 !important;
}

#screen-booking-mode .step-header p{
  font-size:.94rem !important;
  margin-top:14px !important;
  color:#2F2922 !important;
  opacity:.88 !important;
}

#screen-booking-mode .step-header + div{
  gap:12px !important;
  margin-top:0 !important;
}

/* Premium compact card system */
.mode-card,
.service-card,
.tech-option-card,
.tech-card,
.form-card,
.confirm-card,
.book-for-card,
.promo-block,
.group-option-card,
.group-capacity-panel,
.group-split-panel,
.group-manual-subgroup-card,
.group-billing-panel,
.cx-client-card{
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  border-radius:20px !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#screen-booking-mode .mode-card{
  min-height:96px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 16px !important;
  gap:12px !important;
  align-items:center !important;
}

#screen-booking-mode .mode-card-icon{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  font-size:1rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F4EFE8 !important;
}

#screen-booking-mode .mode-card-body strong{
  font-size:.98rem !important;
  line-height:1.12 !important;
  letter-spacing:-.012em !important;
  color:#0a0a0a !important;
}

#screen-booking-mode .mode-card-body span{
  display:block !important;
  margin-top:6px !important;
  font-size:.88rem !important;
  line-height:1.32 !important;
  color:#2F2922 !important;
}

#screen-booking-mode .mode-card-arrow{
  font-size:1.35rem !important;
  color:#8F7638 !important;
}

/* Welcome remains dark and isolated */
#screen-welcome{
  background:#000 !important;
  color:#F8F7F3 !important;
}

#screen-welcome.active{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#screen-welcome .welcome-inner{
  width:100% !important;
  max-width:390px !important;
  min-height:var(--thuraya-shell-h) !important;
  margin:0 auto !important;
  padding:0 24px 40px !important;
  box-sizing:border-box !important;
}

/* Phone-safe: preserve the same design, only remove physical shell overflow risk */
@media(max-width:430px){
  :root{
    --thuraya-page-pad:18px !important;
    --thuraya-shell-gap:0px !important;
    --thuraya-shell-h:100dvh !important;
  }

  #app{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 auto !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  .screen{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
  }

  .bk-floating-signout{
    top:92px !important;
    left:auto !important;
    right:18px !important;
    max-width:88px !important;
    min-height:32px !important;
    padding:6px 12px !important;
    font-size:.60rem !important;
  }

  .screen:not(#screen-welcome):not(#screen-doc-viewer)::before{
    font-size:clamp(1.55rem, 7.5vw, 1.95rem) !important;
  }

  #screen-booking-mode .step-header h2{
    font-size:clamp(1.82rem, 7.4vw, 2.35rem) !important;
  }
}

* , *::before, *::after{
  box-sizing:border-box !important;
}

img,svg,video,canvas{
  max-width:100% !important;
}
/* === END THURAYA FULL BRAND RESTORE + GLOBAL HERO POLISH v3 === */



/* =========================================================
   THURAYA SERVICE MENU ACCORDION — OPTION B
   All sections collapsed by default. Multiple sections can open.
   Scope: Individual Booking service menu only.
   ========================================================= */

#bk_serviceMenu{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding:2px 0 44px !important;
}

#bk_serviceMenu .menu-main-block,
#bk_serviceMenu .menu-main-heading,
#bk_serviceMenu .menu-section,
#bk_serviceMenu .menu-section-heading{
  display:contents !important;
}

.thuraya-accordion-section{
  width:100% !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.80) !important;
  border:1px solid rgba(221,211,197,.90) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.07) !important;
}

.thuraya-accordion-head{
  width:100% !important;
  min-height:76px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 36px !important;
  align-items:center !important;
  gap:12px !important;
  padding:18px 18px !important;
  border:0 !important;
  background:rgba(255,253,248,.94) !important;
  color:#0a0a0a !important;
  text-align:left !important;
  cursor:pointer !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
}

.thuraya-accordion-title-wrap{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.thuraya-accordion-title{
  color:#0a0a0a !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.98rem !important;
  line-height:1.16 !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

.thuraya-accordion-meta{
  color:rgba(47,41,34,.62) !important;
  font-size:.74rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.thuraya-accordion-chevron{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F4EFE8 !important;
  color:#0a0a0a !important;
  font-size:1.35rem !important;
  line-height:1 !important;
  transition:transform .22s ease, background .22s ease !important;
}

.thuraya-accordion-section.open .thuraya-accordion-chevron{
  transform:rotate(90deg) !important;
  background:#0a0a0a !important;
  color:#fff !important;
}

.thuraya-accordion-body{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .32s ease !important;
}

.thuraya-accordion-section.open .thuraya-accordion-body{
  max-height:2400px !important;
}

.thuraya-accordion-inner{
  padding:0 14px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.thuraya-accordion-inner .menu-subgroup-label{
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.70rem !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:rgba(47,41,34,.62) !important;
  margin:2px 0 -2px !important;
}

.thuraya-accordion-inner .menu-subgroup-label span{
  color:rgba(47,41,34,.46) !important;
  font-size:.68rem !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.thuraya-accordion-inner .menu-subgroup-divider{
  height:1px !important;
  width:100% !important;
  margin:4px 0 2px !important;
  background:rgba(35,26,16,.08) !important;
}

#bk_serviceMenu .service-card{
  width:100% !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  align-items:start !important;
  gap:14px !important;
  min-height:0 !important;
  padding:17px 17px !important;
  margin:0 !important;
  border-radius:20px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  box-shadow:0 12px 26px rgba(35,26,16,.06) !important;
  overflow:hidden !important;
}

#bk_serviceMenu .service-card:has(.counter-box){
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}

#bk_serviceMenu .service-card input[type="radio"],
#bk_serviceMenu .service-card input[type="checkbox"]{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  accent-color:#0a0a0a !important;
}

#bk_serviceMenu .service-card-body{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

#bk_serviceMenu .service-card-name{
  color:#0a0a0a !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:1rem !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
  margin:0 !important;
}

#bk_serviceMenu .service-card-desc{
  color:#2F2922 !important;
  font-size:.91rem !important;
  line-height:1.40 !important;
  margin:0 !important;
  opacity:.86 !important;
}

#bk_serviceMenu .service-price-pill{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:4px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#0a0a0a !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.15rem !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}

#bk_serviceMenu .service-card.selected{
  border-color:#0a0a0a !important;
  border-width:1.35px !important;
  background:#FFFDF8 !important;
  box-shadow:0 16px 34px rgba(10,10,10,.11) !important;
}

@media(max-width:430px){
  .thuraya-accordion-head{
    min-height:72px !important;
    padding:17px 17px !important;
  }

  .thuraya-accordion-title{
    font-size:.93rem !important;
  }

  .thuraya-accordion-meta{
    font-size:.72rem !important;
  }

  .thuraya-accordion-inner{
    padding:0 13px 15px !important;
  }
}
/* === END THURAYA SERVICE MENU ACCORDION OPTION B === */



/* =========================================================
   THURAYA GROUP SERVICE MENU ACCORDION — OPTION B
   Matches Individual Booking: all collapsed by default,
   multiple sections can stay open.
   ========================================================= */

#grp_serviceList{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding:2px 0 44px !important;
}

#grp_serviceList .menu-main-block,
#grp_serviceList .menu-main-heading,
#grp_serviceList .menu-section,
#grp_serviceList .menu-section-heading{
  display:contents !important;
}

#grp_serviceList .thuraya-accordion-section{
  width:100% !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.80) !important;
  border:1px solid rgba(221,211,197,.90) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.07) !important;
}

#grp_serviceList .thuraya-accordion-head{
  width:100% !important;
  min-height:76px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 36px !important;
  align-items:center !important;
  gap:12px !important;
  padding:18px 18px !important;
  border:0 !important;
  background:rgba(255,253,248,.94) !important;
  color:#0a0a0a !important;
  text-align:left !important;
  cursor:pointer !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
}

#grp_serviceList .thuraya-accordion-title-wrap{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

#grp_serviceList .thuraya-accordion-title{
  color:#0a0a0a !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.98rem !important;
  line-height:1.16 !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

#grp_serviceList .thuraya-accordion-meta{
  color:rgba(47,41,34,.62) !important;
  font-size:.74rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

#grp_serviceList .thuraya-accordion-chevron{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F4EFE8 !important;
  color:#0a0a0a !important;
  font-size:1.35rem !important;
  line-height:1 !important;
  transition:transform .22s ease, background .22s ease !important;
}

#grp_serviceList .thuraya-accordion-section.open .thuraya-accordion-chevron{
  transform:rotate(90deg) !important;
  background:#0a0a0a !important;
  color:#fff !important;
}

#grp_serviceList .thuraya-accordion-body{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .32s ease !important;
}

#grp_serviceList .thuraya-accordion-section.open .thuraya-accordion-body{
  max-height:2400px !important;
}

#grp_serviceList .thuraya-accordion-inner{
  padding:0 14px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

#grp_serviceList .menu-subgroup-label{
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.70rem !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  color:rgba(47,41,34,.62) !important;
  margin:2px 0 -2px !important;
}

#grp_serviceList .menu-subgroup-label span{
  color:rgba(47,41,34,.46) !important;
  font-size:.68rem !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

#grp_serviceList .menu-subgroup-divider{
  height:1px !important;
  width:100% !important;
  margin:4px 0 2px !important;
  background:rgba(35,26,16,.08) !important;
}

#grp_serviceList .service-card{
  width:100% !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  align-items:start !important;
  gap:14px !important;
  min-height:0 !important;
  padding:17px 17px !important;
  margin:0 !important;
  border-radius:20px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  box-shadow:0 12px 26px rgba(35,26,16,.06) !important;
  overflow:hidden !important;
}

#grp_serviceList .service-card:has(.counter-box){
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
}

#grp_serviceList .service-card input[type="radio"],
#grp_serviceList .service-card input[type="checkbox"]{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  accent-color:#0a0a0a !important;
}

#grp_serviceList .service-card-body{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

#grp_serviceList .service-card-name{
  color:#0a0a0a !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:1rem !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
  margin:0 !important;
}

#grp_serviceList .service-card-desc{
  color:#2F2922 !important;
  font-size:.91rem !important;
  line-height:1.40 !important;
  margin:0 !important;
  opacity:.86 !important;
}

#grp_serviceList .service-price-pill{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:4px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#0a0a0a !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.15rem !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}

#grp_serviceList .service-card.selected{
  border-color:#0a0a0a !important;
  border-width:1.35px !important;
  background:#FFFDF8 !important;
  box-shadow:0 16px 34px rgba(10,10,10,.11) !important;
}

@media(max-width:430px){
  #grp_serviceList .thuraya-accordion-head{
    min-height:72px !important;
    padding:17px 17px !important;
  }

  #grp_serviceList .thuraya-accordion-title{
    font-size:.93rem !important;
  }

  #grp_serviceList .thuraya-accordion-meta{
    font-size:.72rem !important;
  }

  #grp_serviceList .thuraya-accordion-inner{
    padding:0 13px 15px !important;
  }
}
/* === END THURAYA GROUP SERVICE MENU ACCORDION OPTION B === */


/* =========================================================
   THURAYA STEP 2 TECHNICIAN UPGRADE — FULL FILE ADDON
   Scope: Technician selection page only. No booking logic changed.
   ========================================================= */

#screen-technician .tech-option-cards{
  gap:16px !important;
}

#screen-technician .tech-option-card{
  position:relative !important;
  overflow:visible !important;
  min-height:104px !important;
  border-radius:24px !important;
  padding:18px 18px !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

#screen-technician .tech-option-card:active{
  transform:scale(.975) !important;
}

#screen-technician .tech-option-card.selected{
  transform:translateY(-1px) !important;
  border-color:rgba(10,10,10,.92) !important;
  border-width:1.5px !important;
  background:linear-gradient(180deg,#FFFDF8 0%,#F8F1E8 100%) !important;
  box-shadow:0 18px 38px rgba(35,26,16,.13), inset 0 0 0 1px rgba(200,169,77,.10) !important;
}

#screen-technician #techCard_any{
  border-color:rgba(200,169,77,.62) !important;
  background:linear-gradient(180deg,#FFFDF8 0%,#F7F0E5 100%) !important;
}

#screen-technician #techCard_any::after{
  content:"Recommended" !important;
  position:absolute !important;
  top:-10px !important;
  right:16px !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:24px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 22px rgba(10,10,10,.18) !important;
}

#screen-technician .tech-option-icon{
  width:44px !important;
  height:44px !important;
  background:#F4EFE8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#screen-technician .tech-option-card strong{
  color:#0a0a0a !important;
  font-size:1rem !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}

#screen-technician .tech-option-card span{
  color:#2F2922 !important;
  font-size:.90rem !important;
  line-height:1.35 !important;
  opacity:.82 !important;
}

#screen-technician .tech-option-check{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 10px 22px rgba(10,10,10,.18) !important;
}

#screen-technician #btnToDateTime{
  margin-top:8px !important;
}

@media(max-width:430px){
  #screen-technician .tech-option-card{
    min-height:100px !important;
    padding:17px 16px !important;
  }

  #screen-technician #techCard_any::after{
    right:14px !important;
    font-size:.58rem !important;
  }
}
/* === END THURAYA STEP 2 TECHNICIAN UPGRADE === */

/* =========================================================
   THURAYA STEP 3 DATE & TIME PREMIUM UPGRADE
   Scope: Date/time page only. No booking logic changed.
   ========================================================= */
#screen-datetime .form-card{
  margin-bottom:18px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
}

#screen-datetime #bk_slotsContainer{
  margin-top:22px !important;
  padding:18px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.72) !important;
  border:1px solid rgba(221,211,197,.78) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.06) !important;
}

#screen-datetime .slots-label,
#screen-datetime .section-title{
  display:block !important;
  margin-bottom:14px !important;
  color:rgba(47,41,34,.70) !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
}

#screen-datetime #bk_slots.slots-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:0 !important;
}

#screen-datetime #bk_slots .slot-btn,
#screen-datetime #bk_slots button{
  min-height:64px !important;
  border-radius:20px !important;
  border:1px solid rgba(221,211,197,.92) !important;
  background:linear-gradient(180deg,#FFFDF8 0%,#F7F1E8 100%) !important;
  color:#0a0a0a !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.95rem !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  box-shadow:0 10px 22px rgba(35,26,16,.055) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease !important;
}

#screen-datetime #bk_slots .slot-btn:active,
#screen-datetime #bk_slots button:active{
  transform:scale(.975) !important;
}

#screen-datetime #bk_slots .slot-btn.selected,
#screen-datetime #bk_slots button.selected,
#screen-datetime #bk_slots .slot-btn.active,
#screen-datetime #bk_slots button.active{
  background:linear-gradient(180deg,#17130F 0%,#090807 100%) !important;
  color:#fff !important;
  border-color:#090807 !important;
  box-shadow:0 16px 34px rgba(10,10,10,.22) !important;
  transform:translateY(-1px) !important;
}

#screen-datetime #bk_slots .slot-btn.selected::after,
#screen-datetime #bk_slots button.selected::after{
  content:'✓' !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  margin-left:7px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#090807 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
}

#screen-datetime #btnToConfirm{
  margin-top:4px !important;
}

@media(max-width:430px){
  #screen-datetime #bk_slotsContainer{
    padding:16px !important;
    border-radius:22px !important;
  }

  #screen-datetime #bk_slots.slots-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #screen-datetime #bk_slots .slot-btn,
  #screen-datetime #bk_slots button{
    min-height:60px !important;
    border-radius:18px !important;
    font-size:.92rem !important;
  }
}
/* === END THURAYA STEP 3 DATE & TIME PREMIUM UPGRADE === */


/* =========================================================
   THURAYA STEP 4 — REVIEW & CONFIRM PREMIUM POLISH
   Full replacement file generated from working Step 3.
   Scope: Step 4 confirm + success trust polish only.
   ========================================================= */

#screen-confirm .step-header{
  margin-bottom:20px !important;
}

#screen-confirm .confirm-card{
  border-radius:26px !important;
  padding:22px 22px 18px !important;
  background:linear-gradient(180deg,#0f0f0f 0%,#050505 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.24) !important;
  overflow:hidden !important;
}

#screen-confirm .confirm-row{
  padding:15px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  align-items:flex-start !important;
}

#screen-confirm .confirm-row:last-child{
  border-bottom:0 !important;
}

#screen-confirm .confirm-label{
  color:rgba(255,255,255,.58) !important;
  font-size:.68rem !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
}

#screen-confirm .confirm-value{
  color:#fff !important;
  font-size:.96rem !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  max-width:58% !important;
}

#screen-confirm .confirm-divider{
  background:rgba(255,255,255,.10) !important;
  margin:10px 0 !important;
}

#screen-confirm .total-row{
  margin:12px -6px 0 !important;
  padding:18px 6px 4px !important;
  border-top:1px solid rgba(255,255,255,.22) !important;
  border-bottom:0 !important;
}

#screen-confirm .total-row .confirm-label{
  color:rgba(255,255,255,.78) !important;
}

#screen-confirm #conf_total{
  color:#fff !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.48rem !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

#screen-confirm .book-for-card,
#screen-confirm .promo-block{
  margin-top:16px !important;
  border-radius:22px !important;
}

#screen-confirm .book-for-head h3{
  margin:4px 0 0 !important;
  font-size:1.05rem !important;
  color:#0a0a0a !important;
}

#screen-confirm .book-for-kicker{
  font-size:.68rem !important;
  font-weight:850 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgba(47,41,34,.58) !important;
}

#screen-confirm .book-for-option{
  border-radius:18px !important;
  min-height:52px !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#screen-confirm .book-for-option.active,
#screen-confirm .book-for-option:has(input:checked){
  border-color:#0a0a0a !important;
  box-shadow:0 10px 24px rgba(10,10,10,.08) !important;
}

#screen-confirm .promo-toggle-btn{
  width:100% !important;
  min-height:48px !important;
  border-radius:18px !important;
  color:#0a0a0a !important;
  background:rgba(255,255,255,.54) !important;
}

#screen-confirm .step-footer{
  margin-top:18px !important;
}

#screen-confirm #btnConfirmBooking{
  min-height:62px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#171717 0%,#050505 100%) !important;
  color:#fff !important;
  border:1px solid #050505 !important;
  box-shadow:0 22px 50px rgba(0,0,0,.25) !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

#screen-confirm #btnConfirmBooking:active{
  transform:scale(.975) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.20) !important;
}

#screen-confirm .confirm-note{
  color:rgba(47,41,34,.62) !important;
  font-size:.78rem !important;
  line-height:1.45 !important;
  margin-top:14px !important;
}

#screen-success .success-icon{
  background:#0a0a0a !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
}

#screen-success .success-actions .btn-primary{
  border-radius:999px !important;
}

@media(max-width:430px){
  #screen-confirm .confirm-card{
    padding:21px 20px 17px !important;
  }

  #screen-confirm .confirm-value{
    max-width:60% !important;
    font-size:.92rem !important;
  }

  #screen-confirm #conf_total{
    font-size:1.38rem !important;
  }
}
/* === END THURAYA STEP 4 REVIEW & CONFIRM PREMIUM POLISH === */

/* =========================================================
   THURAYA FINAL POLISH — MICRO-INTERACTIONS + PREMIUM MOTION
   Scope: interaction feel only. No booking logic changed.
   ========================================================= */

:root{
  --th-motion-fast: 160ms;
  --th-motion-med: 260ms;
  --th-motion-slow: 420ms;
  --th-ease-luxury: cubic-bezier(.22,.8,.22,1);
}

/* Premium tap response across the booking journey */
button,
.mode-card,
.service-card,
.tech-option-card,
.tech-item,
.slot-btn,
#bk_slots button,
#grp_slots button,
.book-for-option,
.cx-client-tab,
.cx-client-card a{
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

button:active,
.mode-card:active,
.service-card:active,
.tech-option-card:active,
.tech-item:active,
.slot-btn:active,
#bk_slots button:active,
#grp_slots button:active,
.book-for-option:active,
.cx-client-card a:active{
  transform: scale(.975) !important;
}

/* Smooth screen arrival — gives the app a softer Apple-level feel */
.screen.active .screen-inner{
  animation: thScreenIn var(--th-motion-slow) var(--th-ease-luxury) both !important;
}

@keyframes thScreenIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Headings breathe in gently */
.screen.active .step-header{
  animation: thHeaderIn var(--th-motion-slow) var(--th-ease-luxury) both !important;
}

@keyframes thHeaderIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Cards feel alive without being loud */
.mode-card,
.service-card,
.tech-option-card,
.tech-card,
.form-card,
.confirm-card,
.book-for-card,
.promo-block,
.group-option-card,
.cx-client-card{
  transition:
    transform var(--th-motion-med) var(--th-ease-luxury),
    box-shadow var(--th-motion-med) var(--th-ease-luxury),
    border-color var(--th-motion-med) var(--th-ease-luxury),
    background var(--th-motion-med) var(--th-ease-luxury) !important;
}

@media (hover:hover){
  .mode-card:hover,
  .service-card:hover,
  .tech-option-card:hover,
  .tech-card:hover,
  .cx-client-card:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 42px rgba(35,26,16,.12) !important;
  }
}

/* Service selection final refinement */
#bk_serviceMenu .service-card.selected,
#grp_serviceList .service-card.selected{
  border-color: rgba(10,10,10,.92) !important;
  background: linear-gradient(180deg,#FFFDF8 0%,#F8F1E8 100%) !important;
  box-shadow: 0 18px 42px rgba(10,10,10,.13), 0 0 0 1px rgba(200,169,77,.18) inset !important;
  transform: translateY(-1px) !important;
}

#bk_serviceMenu .service-card.selected::after,
#grp_serviceList .service-card.selected::after{
  content: "✓" !important;
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:26px !important;
  height:26px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  box-shadow:0 10px 22px rgba(10,10,10,.22) !important;
  animation: thCheckPop var(--th-motion-med) var(--th-ease-luxury) both !important;
}

@keyframes thCheckPop{
  from{ opacity:0; transform: scale(.7); }
  to{ opacity:1; transform: scale(1); }
}

/* Technician page already works — final polish only */
#screen-technician .tech-option-card.selected{
  background: linear-gradient(180deg,#FFFDF8 0%,#F8F1E8 100%) !important;
  box-shadow:0 18px 42px rgba(10,10,10,.13), 0 0 0 1px rgba(200,169,77,.20) inset !important;
}

#techCard_any::after{
  box-shadow:0 10px 24px rgba(10,10,10,.18) !important;
}

/* Date/time slots — confident but calm */
#bk_slots button,
#grp_slots button,
.slot-btn{
  transition:
    transform var(--th-motion-med) var(--th-ease-luxury),
    box-shadow var(--th-motion-med) var(--th-ease-luxury),
    background var(--th-motion-med) var(--th-ease-luxury),
    border-color var(--th-motion-med) var(--th-ease-luxury) !important;
}

#bk_slots button.selected,
#grp_slots button.selected,
.slot-btn.selected,
#bk_slots button.active,
#grp_slots button.active,
.slot-btn.active{
  box-shadow:0 16px 34px rgba(10,10,10,.18) !important;
  transform: translateY(-1px) !important;
}

/* Confirm page trust finish */
#screen-confirm .confirm-card{
  animation: thConfirmIn var(--th-motion-slow) var(--th-ease-luxury) both !important;
}

@keyframes thConfirmIn{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

#btnConfirmBooking{
  position:relative !important;
  overflow:hidden !important;
}

#btnConfirmBooking::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 44%, transparent 72%) !important;
  transform:translateX(-120%) !important;
  transition:transform .75s var(--th-ease-luxury) !important;
  pointer-events:none !important;
}

@media (hover:hover){
  #btnConfirmBooking:hover::after{
    transform:translateX(120%) !important;
  }
}

/* Success moment — small reward without disturbing logic */
#screen-success.active .success-icon,
#screen-group-success.active .success-icon{
  animation: thSuccessPop .72s var(--th-ease-luxury) both !important;
}

@keyframes thSuccessPop{
  0%{ opacity:0; transform: scale(.72) rotate(-8deg); }
  58%{ opacity:1; transform: scale(1.08) rotate(2deg); }
  100%{ opacity:1; transform: scale(1) rotate(0); }
}

#screen-success.active .success-title,
#screen-group-success.active .success-title{
  animation: thSuccessText .58s var(--th-ease-luxury) .08s both !important;
}

@keyframes thSuccessText{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Make disabled buttons feel intentional, not broken */
.btn-primary:disabled,
#btnToTech:disabled,
#btnToConfirm:disabled,
#grp_toDateTimeBtn:disabled,
#grp_toConfirmBtn:disabled{
  filter:saturate(.85) !important;
  opacity:.92 !important;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* === END THURAYA FINAL POLISH === */


/* =========================================================
   THURAYA MY ACCOUNT LAYER — FINAL PRODUCT NAV
   Scope: account/profile/payment/wallet screens only.
   ========================================================= */
.th-account-entry-card{
  border-color:rgba(10,10,10,.16) !important;
}

.th-account-profile-card{
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  padding:18px !important;
  margin-bottom:16px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.84) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
}

.th-account-avatar{
  width:54px !important;
  height:54px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
}

.th-account-profile-copy{min-width:0 !important;}
.th-account-name{
  font-size:1.02rem !important;
  font-weight:900 !important;
  color:#0a0a0a !important;
  letter-spacing:-.02em !important;
}
.th-account-meta{
  margin-top:5px !important;
  color:rgba(47,41,34,.68) !important;
  font-size:.82rem !important;
  line-height:1.35 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.th-account-menu{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.th-account-menu-card{
  width:100% !important;
  min-height:76px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 18px !important;
  gap:14px !important;
  align-items:center !important;
  padding:16px !important;
  border-radius:22px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.84) !important;
  box-shadow:0 12px 26px rgba(35,26,16,.055) !important;
  text-align:left !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.th-account-menu-card:active{transform:scale(.982) !important;}
@media(hover:hover){.th-account-menu-card:hover{transform:translateY(-1px) !important;border-color:rgba(10,10,10,.22) !important;box-shadow:0 16px 34px rgba(35,26,16,.085) !important;}}

.th-account-menu-icon{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#F4EFE8 !important;
}

.th-account-menu-card strong{
  display:block !important;
  color:#0a0a0a !important;
  font-size:.98rem !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
}

.th-account-menu-card em{
  display:block !important;
  margin-top:4px !important;
  color:rgba(47,41,34,.68) !important;
  font-style:normal !important;
  font-size:.82rem !important;
  line-height:1.3 !important;
}

.th-account-menu-card i{
  color:#8F7638 !important;
  font-style:normal !important;
  font-size:1.35rem !important;
}

.th-profile-summary-card .confirm-row{
  align-items:flex-start !important;
}
.th-profile-summary-card .confirm-value{
  max-width:58% !important;
  overflow-wrap:anywhere !important;
}

.th-empty-state-card{
  padding:26px 20px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.84) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
  text-align:center !important;
}

.th-empty-icon{
  width:62px !important;
  height:62px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 auto 16px !important;
  background:#F4EFE8 !important;
  font-size:1.6rem !important;
}

.th-empty-state-card h3{
  margin:0 0 8px !important;
  color:#0a0a0a !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
}

.th-empty-state-card p{
  margin:0 0 18px !important;
  color:rgba(47,41,34,.72) !important;
  line-height:1.5 !important;
}

.th-wallet-balance-card{
  margin-bottom:16px !important;
  padding:24px !important;
  border-radius:26px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  box-shadow:0 20px 46px rgba(0,0,0,.22) !important;
}

.th-wallet-balance-card span,
.th-wallet-balance-card em{
  display:block !important;
  color:rgba(255,255,255,.62) !important;
  font-size:.72rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-style:normal !important;
}

.th-wallet-balance-card strong{
  display:block !important;
  margin:10px 0 12px !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:2.2rem !important;
  font-weight:600 !important;
}
/* === END THURAYA MY ACCOUNT LAYER === */


/* =========================================================
   THURAYA MY BOOKINGS PREMIUM UPGRADE
   Scope: Booking history screen only. Logic-safe UI polish.
   ========================================================= */
#screen-mybookings #myBookingsList{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}

.th-bookings-section{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.th-bookings-section-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 4px !important;
  color:#2F2922 !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
}

.th-bookings-section-head span{
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

.th-bookings-section-head em{
  min-width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:rgba(255,253,248,.88) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  color:#0a0a0a !important;
  font-size:.72rem !important;
  font-style:normal !important;
  font-weight:900 !important;
}

.th-booking-card{
  width:100% !important;
  padding:18px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.95) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 16px 36px rgba(35,26,16,.075) !important;
  overflow:hidden !important;
}

.th-booking-card.featured{
  background:linear-gradient(180deg,#FFFDF8 0%,#F7EFE4 100%) !important;
  border-color:rgba(10,10,10,.16) !important;
  box-shadow:0 22px 48px rgba(35,26,16,.12) !important;
}

.th-booking-topline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:12px !important;
}

.th-booking-kicker{
  color:rgba(47,41,34,.62) !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.th-booking-status{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:.66rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  background:#0a0a0a !important;
  color:#fff !important;
}

.th-booking-status.completed{background:#F4EFE8 !important;color:#2F2922 !important;}
.th-booking-status.active{background:#8F7638 !important;color:#fff !important;}
.th-booking-status.cancelled{background:#F1E6E3 !important;color:#8A2D22 !important;}

.th-booking-card h3{
  margin:0 0 16px !important;
  color:#0a0a0a !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.42rem !important;
  line-height:1.05 !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
}

.th-booking-mini-pill{
  display:inline-flex !important;
  margin-left:8px !important;
  transform:translateY(-3px) !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

.th-booking-meta-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-bottom:16px !important;
}

.th-booking-meta-grid div{
  min-width:0 !important;
  padding:12px !important;
  border-radius:16px !important;
  background:rgba(244,239,232,.78) !important;
}

.th-booking-meta-grid small{
  display:block !important;
  margin-bottom:5px !important;
  color:rgba(47,41,34,.58) !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.th-booking-meta-grid strong{
  display:block !important;
  color:#0a0a0a !important;
  font-size:.86rem !important;
  line-height:1.22 !important;
  font-weight:850 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.th-booking-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

.th-booking-action{
  appearance:none !important;
  border:1px solid rgba(221,211,197,.95) !important;
  background:#FFFDF8 !important;
  color:#0a0a0a !important;
  min-height:46px !important;
  border-radius:999px !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.74rem !important;
  font-weight:900 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.th-booking-action.primary{
  background:#0a0a0a !important;
  color:#fff !important;
  border-color:#0a0a0a !important;
  box-shadow:0 12px 24px rgba(10,10,10,.16) !important;
}

.th-booking-action:active{transform:scale(.975) !important;}

.th-bookings-empty{
  padding:28px 20px !important;
  text-align:center !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 16px 36px rgba(35,26,16,.075) !important;
  color:#2F2922 !important;
}

.th-bookings-empty-icon{
  width:58px !important;
  height:58px !important;
  margin:0 auto 14px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:1.35rem !important;
}

.th-bookings-empty strong{
  display:block !important;
  color:#0a0a0a !important;
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.45rem !important;
  line-height:1.05 !important;
  margin-bottom:8px !important;
}

.th-bookings-empty span{
  display:block !important;
  color:rgba(47,41,34,.72) !important;
  font-size:.92rem !important;
  line-height:1.42 !important;
  margin-bottom:18px !important;
}

@media(max-width:430px){
  .th-booking-card{padding:16px !important;border-radius:22px !important;}
  .th-booking-card h3{font-size:1.32rem !important;}
  .th-booking-meta-grid{gap:8px !important;}
  .th-booking-meta-grid div{padding:11px !important;}
  .th-booking-actions{grid-template-columns:1fr !important;}
}
/* === END THURAYA MY BOOKINGS PREMIUM UPGRADE === */


/* =========================================================
   THURAYA BOTTOM NAV — PREMIUM SHORTCUT LAYER
   Scope: Home / Services / My Bookings. Logic-safe navigation only.
   ========================================================= */
.thuraya-bottom-nav{
  position:fixed !important;
  left:50% !important;
  bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(354px, calc(100vw - 32px)) !important;
  min-height:68px !important;
  z-index:9996 !important;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:6px !important;
  padding:8px !important;
  border-radius:999px !important;
  background:rgba(10,10,10,.82) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(22px) !important;
  -webkit-backdrop-filter:blur(22px) !important;
}

.thuraya-bottom-nav-item{
  appearance:none !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:rgba(255,255,255,.66) !important;
  min-height:52px !important;
  padding:7px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  cursor:pointer !important;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.thuraya-bottom-nav-item:active{
  transform:scale(.96) !important;
}

.thuraya-bottom-nav-icon{
  font-size:1.05rem !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.thuraya-bottom-nav-label{
  font-size:.62rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}

.thuraya-bottom-nav-item.active{
  background:#FFFDF8 !important;
  color:#090807 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

/* Give account/history pages breathing room above nav. */
#screen-booking-mode,
#screen-services,
#screen-mybookings,
#screen-my-account,
#screen-technician,
#screen-datetime,
#screen-confirm{
  padding-bottom:118px !important;
}

/* Hide legacy sticky breakdown bar from fighting the bottom nav. */
#bk_stickyBar{
  display:none !important;
}

@media(min-width:780px){
  .thuraya-bottom-nav{
    bottom:calc(var(--thuraya-shell-gap, 14px) + 16px) !important;
    width:354px !important;
  }
}

@media(max-width:430px){
  .thuraya-bottom-nav{
    width:calc(100vw - 28px) !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
  }
}
/* === END THURAYA BOTTOM NAV === */


/* =========================================================
   THURAYA PROFILE EDIT UPGRADE — CONTACT ACCURACY LAYER
   Scope: My Account profile summary + edit profile screen only.
   ========================================================= */
#screen-account-profile-edit .th-profile-edit-card{
  padding:22px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.86) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
}

#screen-account-profile-edit .form-group label{
  color:rgba(47,41,34,.72) !important;
  font-size:.72rem !important;
  letter-spacing:.14em !important;
  font-weight:900 !important;
}

#screen-account-profile-edit input,
#screen-account-profile-edit select{
  min-height:52px !important;
  border-radius:18px !important;
  background:#FFFDF8 !important;
  border:1px solid rgba(221,211,197,.92) !important;
}

#screen-account-profile-edit input:focus,
#screen-account-profile-edit select:focus{
  border-color:rgba(10,10,10,.45) !important;
  box-shadow:0 0 0 3px rgba(10,10,10,.07) !important;
}

#screen-account-profile-edit .field-hint{
  display:block !important;
  margin-top:7px !important;
  color:rgba(47,41,34,.56) !important;
  font-size:.76rem !important;
  line-height:1.35 !important;
}

#btnSaveAccountProfile{
  margin-top:4px !important;
  min-height:58px !important;
  border-radius:22px !important;
}

#screen-account-profile .th-profile-summary-card .confirm-label{
  min-width:42% !important;
}

#screen-account-profile .th-profile-summary-card .confirm-value{
  max-width:56% !important;
}
/* === END THURAYA PROFILE EDIT UPGRADE === */


/* =========================================================
   THURAYA CLIENT NOTIFICATION LAYER
   In-app notifications + upcoming appointment preview.
   ========================================================= */
.th-upcoming-appointment-card{
  width:100% !important;
  margin:0 0 16px !important;
  padding:18px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg,#111 0%,#050505 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 22px 48px rgba(10,10,10,.20) !important;
}
.th-upcoming-kicker{
  color:rgba(255,255,255,.62) !important;
  font-size:.66rem !important;
  font-weight:850 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin-bottom:8px !important;
}
.th-upcoming-title{
  font-family:var(--font-serif, Georgia, serif) !important;
  font-size:1.22rem !important;
  line-height:1.12 !important;
  font-weight:500 !important;
  margin-bottom:8px !important;
}
.th-upcoming-meta{
  color:rgba(255,255,255,.72) !important;
  font-size:.88rem !important;
  line-height:1.35 !important;
}
.th-upcoming-actions{
  display:flex !important;
  gap:10px !important;
  margin-top:14px !important;
}
.th-mini-action{
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-size:.76rem !important;
  font-weight:850 !important;
}
.th-mini-action.primary{
  background:#fff !important;
  color:#111 !important;
  border-color:#fff !important;
}
#thNotificationList{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding-bottom:100px !important;
}
.th-notification-card{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  padding:16px !important;
  border-radius:22px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  box-shadow:0 14px 32px rgba(35,26,16,.07) !important;
}
.th-notification-card.unread{
  border-color:rgba(200,169,77,.52) !important;
  box-shadow:0 18px 40px rgba(200,169,77,.12) !important;
}
.th-notification-icon{
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#111 !important;
  color:#fff !important;
  font-weight:900 !important;
}
.th-notification-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
.th-notification-copy strong{
  color:#0a0a0a !important;
  font-size:.98rem !important;
  line-height:1.2 !important;
}
.th-notification-copy span{
  color:#2F2922 !important;
  font-size:.88rem !important;
  line-height:1.4 !important;
  opacity:.82 !important;
}
.th-notification-copy em{
  color:rgba(47,41,34,.52) !important;
  font-size:.74rem !important;
  font-style:normal !important;
  font-weight:750 !important;
  margin-top:2px !important;
}
.th-notification-empty{
  text-align:center !important;
  padding:30px 20px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.90) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  color:#2F2922 !important;
}
.th-notification-empty strong{font-size:1rem !important;color:#0a0a0a !important;}
.th-notification-empty span{font-size:.88rem !important;color:rgba(47,41,34,.64) !important;line-height:1.45 !important;}
/* === END THURAYA CLIENT NOTIFICATION LAYER === */


/* =========================================================
   THURAYA UPCOMING APPOINTMENT SMART ACTIONS
   Directions + WhatsApp + View + Book Again.
   ========================================================= */
.th-upcoming-smart{
  position:relative !important;
  overflow:hidden !important;
}
.th-upcoming-smart::after{
  content:"" !important;
  position:absolute !important;
  top:-70px !important;
  right:-70px !important;
  width:150px !important;
  height:150px !important;
  border-radius:999px !important;
  background:radial-gradient(circle, rgba(200,169,77,.22), transparent 62%) !important;
  pointer-events:none !important;
}
.th-upcoming-topline{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:8px !important;
}
.th-upcoming-topline .th-upcoming-kicker{
  margin-bottom:0 !important;
}
.th-upcoming-status-pill{
  flex:0 0 auto !important;
  min-height:26px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.th-upcoming-smart.is-soon .th-upcoming-status-pill{
  background:#fff !important;
  color:#111 !important;
  border-color:#fff !important;
}
.th-upcoming-guidance{
  position:relative !important;
  z-index:1 !important;
  margin-top:12px !important;
  padding:12px 13px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.76) !important;
  font-size:.82rem !important;
  line-height:1.38 !important;
}
.th-upcoming-actions-grid{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:14px !important;
}
.th-upcoming-actions-grid .th-mini-action{
  width:100% !important;
  min-height:42px !important;
  justify-content:center !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease !important;
}
.th-upcoming-actions-grid .th-mini-action:active{
  transform:scale(.97) !important;
}
.th-reschedule-link{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  margin-top:10px !important;
  min-height:36px !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.66) !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
}


/* =========================================================
   THURAYA PRODUCTION MENU SYNC + OPTION A STICKY CTA
   Reference-approved client menu hierarchy. Logic-safe UI layer.
   ========================================================= */
#bk_stickyBar.thuraya-option-a-sticky{
  display:block !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(var(--thuraya-shell-gap, 14px) + 10px) !important;
  transform:translateX(-50%) !important;
  width:min(390px, calc(100vw - 24px)) !important;
  max-width:390px !important;
  border-radius:28px !important;
  padding:10px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.92) !important;
  box-shadow:0 24px 56px rgba(10,10,10,.24) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  z-index:9997 !important;
}
#bk_stickyBar .sticky-empty{
  display:block;
  padding:12px 14px !important;
  color:rgba(47,41,34,.68) !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
  text-align:center !important;
}
#bk_stickyBar .sticky-summary{max-height:132px !important;overflow:auto !important;padding:2px 4px 8px !important;}
#bk_stickyBar .sticky-line-item{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:10px !important;padding:5px 2px !important;color:#2F2922 !important;font-size:.78rem !important;line-height:1.25 !important;}
#bk_stickyBar .sticky-line-item strong{color:#0a0a0a !important;white-space:nowrap !important;font-weight:900 !important;}
#bk_stickyBar .sticky-line-item.tax{opacity:.72 !important;font-size:.72rem !important;}
#bk_stickyBar .sticky-footer{display:grid !important;grid-template-columns:1fr auto !important;gap:10px !important;align-items:center !important;padding:8px 2px 0 !important;}
#bk_stickyBar .sticky-totals{display:flex !important;flex-direction:column !important;gap:3px !important;}
#bk_stickyBar .sticky-total-line{display:flex !important;align-items:baseline !important;gap:4px !important;color:#0a0a0a !important;}
#bk_stickyBar .sticky-total-label{font-size:.62rem !important;text-transform:uppercase !important;letter-spacing:.12em !important;color:rgba(47,41,34,.58) !important;font-weight:900 !important;}
#bk_stickyBar .sticky-total-value{font-family:var(--font-serif, Georgia, serif) !important;font-size:1.06rem !important;font-weight:700 !important;}
#bk_stickyBar .sticky-total-unit{font-size:.66rem !important;color:rgba(47,41,34,.62) !important;font-weight:800 !important;}
#bk_stickyBar .sticky-actions{display:flex !important;gap:7px !important;align-items:center !important;}
#bk_stickyBar .sticky-clear-btn{min-height:44px !important;border-radius:999px !important;border:1px solid rgba(221,211,197,.92) !important;background:#FFFDF8 !important;color:#0a0a0a !important;font-size:.68rem !important;font-weight:900 !important;letter-spacing:.12em !important;text-transform:uppercase !important;padding:0 12px !important;}
#bk_stickyBar #btnToTech{min-height:46px !important;border-radius:999px !important;padding:0 15px !important;font-size:.72rem !important;letter-spacing:.14em !important;white-space:nowrap !important;}
.th-menu-main{border-radius:24px !important;}
.th-menu-submenu,
.th-menu-system{
  width:100% !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:rgba(250,246,239,.78) !important;
  border:1px solid rgba(221,211,197,.78) !important;
  margin:10px 0 !important;
}
.th-menu-system{background:rgba(255,253,248,.92) !important;border-radius:18px !important;}
.th-menu-submenu > .thuraya-accordion-head,
.th-menu-system > .thuraya-accordion-head{min-height:66px !important;padding:15px !important;background:transparent !important;}
.th-menu-submenu .thuraya-accordion-title{font-size:.82rem !important;letter-spacing:.10em !important;}
.th-menu-system .thuraya-accordion-title{font-size:.88rem !important;letter-spacing:.04em !important;text-transform:none !important;}
.th-menu-badge{display:inline-flex !important;width:max-content !important;margin-bottom:3px !important;padding:4px 9px !important;border-radius:999px !important;border:1px solid rgba(200,169,77,.35) !important;color:var(--gold-dark) !important;font-size:.58rem !important;font-weight:900 !important;letter-spacing:.12em !important;text-transform:uppercase !important;}
.th-menu-level-0,.th-menu-level-1,.th-menu-level-2{gap:10px !important;}
#screen-services{padding-bottom:180px !important;}
#screen-services .thuraya-inline-continue{display:none !important;}
@media(max-width:430px){
  #bk_stickyBar.thuraya-option-a-sticky{width:calc(100vw - 20px) !important;bottom:10px !important;border-radius:24px !important;}
  #bk_stickyBar .sticky-footer{grid-template-columns:1fr !important;}
  #bk_stickyBar .sticky-actions{display:grid !important;grid-template-columns:.7fr 1.3fr !important;}
}
/* === END THURAYA PRODUCTION MENU SYNC + OPTION A STICKY CTA === */


/* =========================================================
   THURAYA FINAL CORRECTION — COMPLETE REFERENCE MENU
   Adds nested submenu/system accordion support and Option A sticky CTA.
   Source: approved reference file thuraya_menu_simulated_after_edit (5).html.
   ========================================================= */
#bk_stickyBar.thuraya-option-a-sticky{display:block !important;}
.th-menu-submenu.thuraya-accordion-section,
.th-menu-system.thuraya-accordion-section{
  width:100% !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:rgba(250,246,239,.78) !important;
  border:1px solid rgba(221,211,197,.78) !important;
  margin:10px 0 !important;
  box-shadow:0 12px 26px rgba(35,26,16,.045) !important;
}
.th-menu-system.thuraya-accordion-section{
  background:rgba(255,253,248,.92) !important;
  border-radius:18px !important;
}
.th-menu-submenu.thuraya-accordion-section > .thuraya-accordion-head,
.th-menu-system.thuraya-accordion-section > .thuraya-accordion-head{
  min-height:66px !important;
  padding:15px !important;
  background:transparent !important;
}
.th-menu-submenu .thuraya-accordion-title{font-size:.82rem !important;letter-spacing:.10em !important;}
.th-menu-system .thuraya-accordion-title{font-size:.88rem !important;letter-spacing:.04em !important;text-transform:none !important;}
.th-menu-badge{display:inline-flex !important;width:max-content !important;margin-bottom:3px !important;padding:4px 9px !important;border-radius:999px !important;border:1px solid rgba(200,169,77,.35) !important;color:var(--gold-dark) !important;font-size:.58rem !important;font-weight:900 !important;letter-spacing:.12em !important;text-transform:uppercase !important;}
#screen-services .thuraya-inline-continue{display:none !important;}
#screen-services{padding-bottom:180px !important;}
/* === END THURAYA FINAL CORRECTION === */

/* =========================================================
   THURAYA FINAL MICRO POLISH — PRODUCTION INTERACTION LAYER
   Scope: Client App service-selection feel only. Logic untouched.
   ========================================================= */
#bk_stickyBar,
#bk_stickyBar.thuraya-option-a-sticky{
  display:none !important;
  pointer-events:none !important;
}

#screen-services #bk_serviceMenu{
  padding-bottom:18px !important;
}

#screen-services .thuraya-accordion-section{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease !important;
  will-change:transform !important;
}

#screen-services .thuraya-accordion-section:active{
  transform:scale(.992) !important;
}

#screen-services .thuraya-accordion-section.open{
  border-color:rgba(10,10,10,.18) !important;
  box-shadow:0 20px 46px rgba(35,26,16,.105) !important;
  background:rgba(255,253,248,.98) !important;
}

#screen-services .thuraya-accordion-head{
  -webkit-tap-highlight-color:transparent !important;
}

#screen-services .thuraya-accordion-chevron{
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease !important;
}

#screen-services .thuraya-accordion-section.open > .thuraya-accordion-head .thuraya-accordion-chevron{
  transform:rotate(90deg) !important;
  background:#0a0a0a !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(10,10,10,.16) !important;
}

#screen-services .thuraya-accordion-body{
  transition:max-height .36s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
  opacity:.98 !important;
}

#screen-services .thuraya-accordion-section:not(.open) .thuraya-accordion-body{
  opacity:0 !important;
}

#screen-services .thuraya-accordion-inner{
  padding-top:2px !important;
  padding-bottom:18px !important;
}

#screen-services .service-card{
  position:relative !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}

#screen-services .service-card:active{
  transform:scale(.985) !important;
}

#screen-services .service-card.selected{
  border-color:#0a0a0a !important;
  border-width:1.7px !important;
  background:linear-gradient(180deg,#FFFDF8 0%,#F8F1E8 100%) !important;
  box-shadow:0 18px 38px rgba(10,10,10,.13), inset 0 0 0 1px rgba(200,169,77,.10) !important;
}

#screen-services .service-card.selected::after{
  content:"✓" !important;
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:1rem !important;
  font-weight:900 !important;
  box-shadow:0 12px 26px rgba(10,10,10,.18) !important;
}

#screen-services .service-card.selected .service-card-name{
  padding-right:42px !important;
}

#screen-services .service-card input[type="radio"],
#screen-services .service-card input[type="checkbox"]{
  transition:transform .18s ease, box-shadow .18s ease !important;
}

#screen-services .service-card.selected input[type="radio"],
#screen-services .service-card.selected input[type="checkbox"]{
  transform:scale(1.08) !important;
  box-shadow:0 0 0 5px rgba(10,10,10,.06) !important;
}

#screen-services .service-card-name{
  letter-spacing:-.02em !important;
}

#screen-services .service-card-desc{
  color:rgba(47,41,34,.78) !important;
  line-height:1.46 !important;
}

#screen-services .service-price-pill{
  margin-top:7px !important;
  letter-spacing:.015em !important;
}

#bk_serviceContinueWrap{
  opacity:0 !important;
  transform:translateY(14px) !important;
  transition:opacity .24s ease, transform .28s cubic-bezier(.2,.8,.2,1) !important;
}

#bk_serviceContinueWrap.th-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}

#btnToTechInline{
  min-height:58px !important;
  border-radius:999px !important;
  box-shadow:0 20px 44px rgba(10,10,10,.20) !important;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s ease,
    opacity .2s ease !important;
}

#btnToTechInline:active{
  transform:scale(.985) !important;
}

#btnToTechInline:not(:disabled){
  animation:thurayaCtaReady .42s ease both !important;
}

@keyframes thurayaCtaReady{
  0%{transform:translateY(8px);opacity:.72;}
  100%{transform:translateY(0);opacity:1;}
}

@media(hover:hover){
  #screen-services .service-card:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(143,118,56,.32) !important;
    box-shadow:0 16px 34px rgba(35,26,16,.085) !important;
  }
  #screen-services .service-card.selected:hover{
    border-color:#0a0a0a !important;
    box-shadow:0 20px 42px rgba(10,10,10,.14) !important;
  }
}
/* === END THURAYA FINAL MICRO POLISH === */


/* =========================================================
   THURAYA GROUP CONFIRM PAGE POLISH — FIX ONLY
   Scope: Group booking review/confirm page payment + member cards.
   No booking logic, Firebase, auth, or menu rendering changed.
   ========================================================= */
#screen-group-confirm .screen-inner{
  padding-top:18px !important;
}

#screen-group-confirm .grp-member-card{
  width:100% !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:flex-start !important;
  padding:18px 18px !important;
  margin:0 0 12px !important;
  border-radius:22px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 14px 30px rgba(35,26,16,.07) !important;
  overflow:hidden !important;
}

#screen-group-confirm .grp-member-index{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F1EEE8 !important;
  color:#0a0a0a !important;
  font-weight:950 !important;
  font-size:1rem !important;
  line-height:1 !important;
}

#screen-group-confirm .grp-member-info{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}

#screen-group-confirm .grp-member-info strong{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  color:#0a0a0a !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

#screen-group-confirm .grp-lead-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:4px 9px !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:.58rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}

#screen-group-confirm .grp-member-info > span{
  display:block !important;
  color:#1f1a16 !important;
  font-size:.92rem !important;
  line-height:1.32 !important;
  font-weight:650 !important;
  word-break:normal !important;
}

#screen-group-confirm .group-billing-panel{
  margin-top:18px !important;
  padding:22px 20px !important;
  border-radius:26px !important;
  background:rgba(255,253,248,.96) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 18px 38px rgba(35,26,16,.08) !important;
}

#screen-group-confirm .group-billing-panel h3{
  margin:0 0 12px !important;
  color:#0a0a0a !important;
  font-size:1.18rem !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

#screen-group-confirm .group-billing-panel > p{
  margin:0 0 18px !important;
  color:#2F2922 !important;
  font-size:.96rem !important;
  line-height:1.42 !important;
  opacity:.86 !important;
}

#screen-group-confirm .group-billing-card{
  width:100% !important;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:flex-start !important;
  min-height:auto !important;
  padding:16px 0 !important;
  margin:0 !important;
  border:0 !important;
  border-top:1px solid rgba(35,26,16,.08) !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#screen-group-confirm .group-billing-card:first-of-type{
  border-top:0 !important;
}

#screen-group-confirm .group-billing-card input[type="radio"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  border-radius:999px !important;
  border:2px solid rgba(10,10,10,.38) !important;
  background:#FFFDF8 !important;
  box-shadow:inset 0 0 0 4px #FFFDF8 !important;
}

#screen-group-confirm .group-billing-card input[type="radio"]:checked{
  border-color:#0a0a0a !important;
  background:#0a0a0a !important;
}

#screen-group-confirm .group-billing-card.selected{
  border-color:rgba(35,26,16,.08) !important;
}

#screen-group-confirm .group-billing-card .group-option-body{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

#screen-group-confirm .group-billing-card .group-option-body strong{
  display:block !important;
  color:#0a0a0a !important;
  font-size:1rem !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

#screen-group-confirm .group-billing-card .group-option-body > span:not(.amount-pill){
  display:block !important;
  color:#2F2922 !important;
  font-size:.92rem !important;
  line-height:1.34 !important;
  font-weight:600 !important;
  opacity:.84 !important;
}

#screen-group-confirm .amount-pill{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:3px !important;
  padding:6px 11px !important;
  border-radius:999px !important;
  background:#C8A94D !important;
  color:#fff !important;
  font-size:.76rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}

#screen-group-confirm .grp-info-box{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:flex-start !important;
  padding:18px 20px !important;
  margin-top:14px !important;
  border-radius:24px !important;
  background:rgba(255,253,248,.92) !important;
  border:1px solid rgba(221,211,197,.82) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.065) !important;
}

#screen-group-confirm .grp-info-box p{
  margin:0 !important;
  color:#1F1A16 !important;
  font-size:.94rem !important;
  line-height:1.42 !important;
}

@media(max-width:430px){
  #screen-group-confirm .grp-member-card{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:14px !important;
    padding:16px !important;
  }

  #screen-group-confirm .group-billing-panel{
    padding:20px 18px !important;
  }

  #screen-group-confirm .group-billing-card{
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:13px !important;
  }
}
/* === END THURAYA GROUP CONFIRM PAGE POLISH — FIX ONLY === */


/* =========================================================
   THURAYA GROUP BOOKING — FINAL CONFIRMATION POLISH
   Scope: group review/payment/confirm CTA only.
   Safe: CSS-only, no booking/Firebase/menu logic touched.
   ========================================================= */

#screen-group-confirm{
  padding-bottom:142px !important;
}

#screen-group-confirm .screen-inner{
  padding-bottom:132px !important;
}

#screen-group-confirm .confirm-card{
  border-radius:26px !important;
  background:linear-gradient(180deg,#0f0f0f 0%,#050505 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.22) !important;
}

#screen-group-confirm .confirm-card .confirm-row{
  padding:15px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
}

#screen-group-confirm .confirm-card .confirm-row:last-child{
  border-bottom:0 !important;
}

#screen-group-confirm .confirm-card .confirm-label{
  color:rgba(255,255,255,.58) !important;
}

#screen-group-confirm .confirm-card .confirm-value{
  color:#fff !important;
  font-weight:850 !important;
}

#screen-group-confirm #grp_conf_members{
  gap:12px !important;
  margin-bottom:18px !important;
}

#screen-group-confirm .grp-member-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

#screen-group-confirm .grp-member-card:active{
  transform:scale(.985) !important;
}

#screen-group-confirm .group-billing-panel{
  margin-top:20px !important;
  padding:22px 20px 20px !important;
  border-radius:28px !important;
  background:rgba(255,253,248,.97) !important;
  border:1px solid rgba(221,211,197,.90) !important;
  box-shadow:0 20px 44px rgba(35,26,16,.09) !important;
}

#screen-group-confirm .group-billing-panel h3{
  font-size:1.22rem !important;
  margin-bottom:10px !important;
}

#screen-group-confirm .group-billing-panel > p{
  margin-bottom:16px !important;
  max-width:94% !important;
}

#screen-group-confirm .group-billing-card{
  position:relative !important;
  display:block !important;
  padding:16px 54px 16px 16px !important;
  margin:10px 0 0 !important;
  border:1px solid rgba(35,26,16,.08) !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:0 10px 22px rgba(35,26,16,.035) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

#screen-group-confirm .group-billing-card:first-of-type{
  margin-top:0 !important;
  border-top:1px solid rgba(35,26,16,.08) !important;
}

#screen-group-confirm .group-billing-card:active{
  transform:scale(.985) !important;
}

#screen-group-confirm .group-billing-card input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
}

#screen-group-confirm .group-billing-card::before{
  content:"" !important;
  position:absolute !important;
  right:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  border:2px solid rgba(10,10,10,.32) !important;
  background:#FFFDF8 !important;
  box-shadow:inset 0 0 0 5px #FFFDF8 !important;
}

#screen-group-confirm .group-billing-card:has(input[type="radio"]:checked),
#screen-group-confirm .group-billing-card.selected{
  border-color:#0a0a0a !important;
  background:#FFFFFF !important;
  box-shadow:0 16px 34px rgba(10,10,10,.10) !important;
}

#screen-group-confirm .group-billing-card:has(input[type="radio"]:checked)::before,
#screen-group-confirm .group-billing-card.selected::before{
  border-color:#0a0a0a !important;
  background:#0a0a0a !important;
}

#screen-group-confirm .group-billing-card .group-option-body{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  min-width:0 !important;
}

#screen-group-confirm .group-billing-card .group-option-body strong{
  display:block !important;
  margin:0 !important;
  color:#0a0a0a !important;
  font-size:1.02rem !important;
  line-height:1.18 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

#screen-group-confirm .group-billing-card .group-option-body > span:not(.amount-pill){
  display:block !important;
  margin:0 !important;
  color:#2F2922 !important;
  font-size:.92rem !important;
  line-height:1.34 !important;
  font-weight:600 !important;
  opacity:.84 !important;
}

#screen-group-confirm .amount-pill{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:2px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  background:#E7D8A5 !important;
  color:#55441B !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}

#screen-group-confirm .grp-info-box{
  margin-top:16px !important;
  margin-bottom:18px !important;
  background:rgba(255,253,248,.88) !important;
}

#screen-group-confirm .step-footer{
  position:sticky !important;
  bottom:0 !important;
  z-index:20 !important;
  margin:22px calc(var(--thuraya-page-pad,18px) * -1) -96px !important;
  padding:16px var(--thuraya-page-pad,18px) calc(16px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,rgba(249,243,234,0) 0%,rgba(249,243,234,.96) 28%,rgba(239,233,223,.98) 100%) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#screen-group-confirm #grp_btnConfirm{
  min-height:58px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#151515 0%,#050505 100%) !important;
  color:#fff !important;
  border:1px solid #050505 !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  box-shadow:0 18px 40px rgba(10,10,10,.24) !important;
}

#screen-group-confirm #grp_btnConfirm:active{
  transform:scale(.985) !important;
}

#screen-group-confirm .confirm-note{
  margin:10px 0 0 !important;
  color:rgba(47,41,34,.68) !important;
  font-size:.74rem !important;
  line-height:1.35 !important;
  text-align:center !important;
}

@media(max-width:430px){
  #screen-group-confirm .group-billing-card{
    padding:15px 52px 15px 15px !important;
    border-radius:21px !important;
  }

  #screen-group-confirm .group-billing-card::before{
    right:16px !important;
    width:23px !important;
    height:23px !important;
  }

  #screen-group-confirm .step-footer{
    margin-left:-18px !important;
    margin-right:-18px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
/* === END THURAYA GROUP BOOKING FINAL CONFIRMATION POLISH === */


/* =========================================================
   THURAYA TECH SELECTION PAGE — FINAL PREMIUM POLISH
   Scope: #screen-technician only. UI/CSS only; no booking logic changed.
   ========================================================= */

#screen-technician{
  padding-bottom:128px !important;
}

#screen-technician .screen-inner{
  padding-top:18px !important;
}

#screen-technician .back-btn{
  margin:0 0 18px !important;
  color:#8A7136 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

#screen-technician .step-header{
  margin-bottom:22px !important;
}

#screen-technician .step-badge{
  margin-bottom:18px !important;
}

#screen-technician .step-header h2{
  font-size:clamp(2.05rem,7.5vw,2.75rem) !important;
  line-height:1.02 !important;
}

#screen-technician .step-header p{
  max-width:92% !important;
  color:rgba(47,41,34,.82) !important;
}

#screen-technician .tech-option-cards{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin-top:4px !important;
}

#screen-technician .tech-option-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 32px !important;
  align-items:center !important;
  gap:16px !important;
  min-height:108px !important;
  padding:20px 18px !important;
  border-radius:26px !important;
  background:rgba(255,253,248,.94) !important;
  border:1px solid rgba(221,211,197,.88) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.075) !important;
  overflow:visible !important;
}

#screen-technician .tech-option-card.selected{
  background:linear-gradient(180deg,#FFFDF8 0%,#F7F0E6 100%) !important;
  border-color:#0a0a0a !important;
  box-shadow:0 20px 46px rgba(10,10,10,.14), inset 0 0 0 1px rgba(200,169,77,.14) !important;
  transform:translateY(-1px) !important;
}

#screen-technician #techCard_any{
  border-color:rgba(10,10,10,.20) !important;
}

#screen-technician #techCard_any::after{
  content:'Recommended' !important;
  position:absolute !important;
  top:-10px !important;
  right:18px !important;
  min-height:24px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:.58rem !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  box-shadow:0 10px 22px rgba(10,10,10,.20) !important;
}

#screen-technician .tech-option-icon{
  width:48px !important;
  height:48px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#F2ECE3 !important;
  color:#0a0a0a !important;
  font-size:1.18rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}

#screen-technician .tech-option-card strong{
  display:block !important;
  color:#0a0a0a !important;
  font-size:1.06rem !important;
  line-height:1.12 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  margin-bottom:6px !important;
}

#screen-technician .tech-option-card span{
  display:block !important;
  color:rgba(47,41,34,.76) !important;
  font-size:.90rem !important;
  line-height:1.36 !important;
  font-weight:650 !important;
}

#screen-technician .tech-option-check{
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#0a0a0a !important;
  color:#fff !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  box-shadow:0 10px 22px rgba(10,10,10,.20) !important;
}

#screen-technician #techSelectPanel{
  margin-top:16px !important;
  padding:18px !important;
  border-radius:26px !important;
  background:rgba(255,253,248,.72) !important;
  border:1px solid rgba(221,211,197,.80) !important;
  box-shadow:0 16px 34px rgba(35,26,16,.06) !important;
}

#screen-technician #bk_techList.tech-list{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

#screen-technician .tech-item{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  min-height:66px !important;
  padding:13px 14px !important;
  border-radius:20px !important;
  background:#FFFDF8 !important;
  border:1px solid rgba(221,211,197,.86) !important;
  box-shadow:0 10px 24px rgba(35,26,16,.055) !important;
  color:#0a0a0a !important;
  font-weight:850 !important;
}

#screen-technician .tech-item.selected{
  border-color:#0a0a0a !important;
  background:linear-gradient(180deg,#FFFDF8 0%,#F7F0E6 100%) !important;
  box-shadow:0 16px 34px rgba(10,10,10,.10) !important;
}

#screen-technician .tech-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  background:#0a0a0a !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:950 !important;
  box-shadow:0 10px 22px rgba(10,10,10,.18) !important;
}

#screen-technician .step-footer{
  margin-top:22px !important;
}

#screen-technician #btnToDateTime{
  min-height:58px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#17130F 0%,#050505 100%) !important;
  border:1px solid #050505 !important;
  color:#fff !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  box-shadow:0 18px 40px rgba(10,10,10,.22) !important;
}

@media(max-width:430px){
  #screen-technician .tech-option-card{
    min-height:102px !important;
    grid-template-columns:48px minmax(0,1fr) 30px !important;
    gap:14px !important;
    padding:18px 16px !important;
    border-radius:24px !important;
  }

  #screen-technician .tech-option-icon{
    width:44px !important;
    height:44px !important;
  }

  #screen-technician .tech-option-card strong{
    font-size:1rem !important;
  }

  #screen-technician .tech-option-card span{
    font-size:.86rem !important;
  }

  #screen-technician #techSelectPanel{
    padding:16px !important;
  }
}
/* === END THURAYA TECH SELECTION PAGE FINAL PREMIUM POLISH === */

/* =========================================================
   THURAYA GROUP BOOKING FLOW — CTA VISIBILITY LOCK
   Scope: Group booking service/date CTAs only.
   Purpose: prevents the Pick/Choose Time CTA from washing out white,
   while keeping group flow separate from the individual technician page.
   ========================================================= */
#screen-group-services #grp_toDateTimeBtn,
#screen-group-datetime #grp_toConfirmBtn,
#screen-group-datetime #grp_manualContinueBtn,
#screen-group-datetime .group-manual-planner > .btn-primary,
#screen-group-confirm #grp_btnConfirm{
  width:100% !important;
  min-height:58px !important;
  border-radius:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  opacity:1 !important;
  -webkit-text-fill-color:currentColor !important;
}

#screen-group-services #grp_toDateTimeBtn:not(:disabled),
#screen-group-datetime #grp_toConfirmBtn:not(:disabled),
#screen-group-datetime #grp_manualContinueBtn:not(:disabled),
#screen-group-datetime .group-manual-planner > .btn-primary:not(:disabled),
#screen-group-confirm #grp_btnConfirm:not(:disabled){
  background:linear-gradient(180deg,#17130F 0%,#050505 100%) !important;
  border:1px solid #050505 !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(10,10,10,.22) !important;
  cursor:pointer !important;
}

#screen-group-services #grp_toDateTimeBtn:disabled,
#screen-group-datetime #grp_toConfirmBtn:disabled,
#screen-group-datetime #grp_manualContinueBtn:disabled,
#screen-group-datetime .group-manual-planner > .btn-primary:disabled,
#screen-group-confirm #grp_btnConfirm:disabled{
  background:#CEC8BE !important;
  border:1px solid #CEC8BE !important;
  color:#756F66 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

#screen-group-services .step-footer,
#screen-group-datetime .step-footer,
#screen-group-confirm .step-footer{
  margin-top:24px !important;
}
/* === END THURAYA GROUP BOOKING FLOW CTA VISIBILITY LOCK === */


/* =========================================================
   THURAYA GROUP BOOKING — PICK TIME CTA VISIBILITY FINAL FIX
   Scope: Group booking only. No workflow / logic changes.
   Purpose: keep the Pick Time CTA clearly visible in all states.
   ========================================================= */
#screen-group-services #grp_toDateTimeBtn{
  width:100% !important;
  min-height:60px !important;
  border-radius:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}

#screen-group-services #grp_toDateTimeBtn:not(:disabled){
  background:linear-gradient(180deg,#17130F 0%,#050505 100%) !important;
  border:1px solid #050505 !important;
  color:#FFFFFF !important;
  box-shadow:0 18px 40px rgba(10,10,10,.24) !important;
  cursor:pointer !important;
}

#screen-group-services #grp_toDateTimeBtn:disabled{
  background:#D8D2C8 !important;
  border:1px solid #C8C0B4 !important;
  color:#4D473F !important;
  box-shadow:0 10px 22px rgba(35,26,16,.08) !important;
  cursor:not-allowed !important;
}

#screen-group-services #grp_toDateTimeBtn:active:not(:disabled){
  transform:scale(.985) !important;
}
/* === END THURAYA GROUP BOOKING PICK TIME CTA VISIBILITY FINAL FIX === */


/* =========================================================
   THURAYA GROUP DATE/TIME — PICK BUTTON VISIBILITY HARD FIX
   Scope: Group booking date/time screen only.
   Purpose: Fixes the washed-out white "PICK" button inside the
   Smart Booking recommendation card without changing group logic.
   ========================================================= */
#screen-group-datetime #grp_slots button:not(.slot-btn),
#screen-group-datetime #grp_slots .btn-primary,
#screen-group-datetime #grp_slots [class*="pick"],
#screen-group-datetime #grp_slots [class*="Pick"],
#screen-group-datetime #grp_slots [class*="cta"],
#screen-group-datetime #grp_slots [class*="CTA"],
#screen-group-datetime [class*="smart"] button,
#screen-group-datetime [class*="Smart"] button,
#screen-group-datetime [class*="recommend"] button,
#screen-group-datetime [class*="Recommend"] button{
  background:linear-gradient(180deg,#17130F 0%,#050505 100%) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:1px solid #050505 !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  box-shadow:0 14px 30px rgba(10,10,10,.22) !important;
  cursor:pointer !important;
}

#screen-group-datetime #grp_slots button:not(.slot-btn):disabled,
#screen-group-datetime #grp_slots .btn-primary:disabled,
#screen-group-datetime #grp_slots [class*="pick"]:disabled,
#screen-group-datetime #grp_slots [class*="Pick"]:disabled,
#screen-group-datetime #grp_slots [class*="cta"]:disabled,
#screen-group-datetime #grp_slots [class*="CTA"]:disabled,
#screen-group-datetime [class*="smart"] button:disabled,
#screen-group-datetime [class*="Smart"] button:disabled,
#screen-group-datetime [class*="recommend"] button:disabled,
#screen-group-datetime [class*="Recommend"] button:disabled{
  background:#0A0A0A !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#0A0A0A !important;
  opacity:1 !important;
  cursor:pointer !important;
}

#screen-group-datetime #grp_slots button:not(.slot-btn)::before,
#screen-group-datetime #grp_slots button:not(.slot-btn)::after,
#screen-group-datetime #grp_slots .btn-primary::before,
#screen-group-datetime #grp_slots .btn-primary::after,
#screen-group-datetime [class*="smart"] button::before,
#screen-group-datetime [class*="smart"] button::after,
#screen-group-datetime [class*="recommend"] button::before,
#screen-group-datetime [class*="recommend"] button::after{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  opacity:1 !important;
}
/* === END THURAYA GROUP DATE/TIME PICK BUTTON VISIBILITY HARD FIX === */

/* =========================================================
   THURAYA SIGN-IN TRUE BLACK BACKGROUND FIX — 2026-05-04
   Scope: Welcome / sign-in screen only.
   Purpose: remove gradient/texture glow and force premium pure black.
   Logic untouched.
   ========================================================= */
html,
body{
  background:#000000 !important;
}

.bg-texture{
  background:#000000 !important;
  background-image:none !important;
}

#app:has(#screen-welcome.active){
  background:#000000 !important;
}

#screen-welcome,
#screen-welcome.active{
  background:#000000 !important;
  background-image:none !important;
  color:#F8F7F3 !important;
}

#screen-welcome::before,
#screen-welcome::after{
  content:"" !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

#screen-welcome .welcome-inner,
#screen-welcome .logo-block,
#screen-welcome .welcome-actions{
  background:transparent !important;
  background-image:none !important;
}

#screen-welcome #btnGuestSignIn{
  background:#000000 !important;
}
/* === END THURAYA SIGN-IN TRUE BLACK BACKGROUND FIX === */


/* =========================================================
   THURAYA SIGN-IN TRUE BLACK BACKGROUND FIX v2 — HARD OVERRIDE
   Scope: Welcome / sign-in screen only.
   Purpose: remove all radial glow, gradients, texture and shell background bleed.
   Logic untouched.
   ========================================================= */
html,
body,
.bg-texture{
  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;
}

/* Keep the app shell black underneath the welcome screen; other screens paint their own background. */
#app{
  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;
}

#screen-welcome,
#screen-welcome.active,
#screen-welcome .welcome-inner,
#screen-welcome .logo-block,
#screen-welcome .welcome-actions{
  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;
  box-shadow:none !important;
}

#screen-welcome::before,
#screen-welcome::after,
#screen-welcome .welcome-inner::before,
#screen-welcome .welcome-inner::after,
#screen-welcome .logo-block::before{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Remove inherited decorative glows on welcome only. */
#screen-welcome *,
#screen-welcome *::before,
#screen-welcome *::after{
  text-shadow:none !important;
}

#screen-welcome #btnGuestSignIn{
  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;
}
/* === END THURAYA SIGN-IN TRUE BLACK BACKGROUND FIX v2 === */


/* =========================================================
   THURAYA SIGN OUT CTA — FINAL NON-OVERLAP LOCK
   Scope: floating Sign Out only. CSS-only; no app logic changed.
   Purpose: prevent the CTA from overlapping the booking hero/title.
   ========================================================= */
.bk-floating-signout{
  position:fixed !important;
  top:calc(var(--thuraya-shell-gap, 0px) + 76px) !important;
  left:auto !important;
  right:calc((100vw - min(var(--thuraya-shell-w, 430px), 100vw)) / 2 + 18px) !important;
  transform:none !important;
  z-index:9999 !important;

  width:auto !important;
  max-width:86px !important;
  min-height:30px !important;
  padding:5px 11px !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(10,10,10,.78) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;

  box-shadow:0 10px 24px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;

  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.58rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

/* Give the booking landing hero enough right-side air if the Sign Out CTA is visible. */
#screen-booking-mode .step-header{
  position:relative !important;
  padding-right:0 !important;
}

@media(max-width:430px){
  .bk-floating-signout{
    top:72px !important;
    right:14px !important;
    max-width:82px !important;
    min-height:30px !important;
    padding:5px 10px !important;
    font-size:.56rem !important;
  }

  #screen-booking-mode .step-header{
    padding-right:0 !important;
  }
}
/* === END THURAYA SIGN OUT CTA FINAL NON-OVERLAP LOCK === */


/* =========================================================
   THURAYA SIGN OUT INLINE HOME FIX — FINAL
   Scope: booking-mode page only.
   Purpose: place Sign Out adjacent to NEW BOOKING and override older floating rules.
   ========================================================= */
#screen-booking-mode .th-booking-action-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 0 20px !important;
}

#screen-booking-mode .th-booking-action-row .step-badge{
  margin:0 !important;
  flex:0 0 auto !important;
}

#screen-booking-mode .bk-floating-signout.th-signout-inline{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  z-index:2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:none !important;
  min-height:32px !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  border:1px solid rgba(10,10,10,.14) !important;
  background:rgba(255,253,248,.92) !important;
  color:#111 !important;
  box-shadow:0 10px 24px rgba(35,26,16,.08) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.62rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

#screen-booking-mode .step-header{
  margin-top:0 !important;
}

@media(max-width:430px){
  #screen-booking-mode .th-booking-action-row{
    gap:10px !important;
    margin-bottom:18px !important;
  }

  #screen-booking-mode .bk-floating-signout.th-signout-inline{
    min-height:31px !important;
    padding:7px 12px !important;
    font-size:.58rem !important;
    letter-spacing:.12em !important;
  }
}
/* === END THURAYA SIGN OUT INLINE HOME FIX === */

/* =========================================================
   THURAYA SIGN OUT INLINE VISIBILITY FIX — FINAL HARD LOCK
   Scope: booking-mode Sign Out only.
   Purpose: make Sign Out readable while staying adjacent to NEW BOOKING.
   Logic untouched.
   ========================================================= */
#screen-booking-mode .th-booking-action-row #bkFloatingSignOut.bk-floating-signout.th-signout-inline,
#screen-booking-mode #bkFloatingSignOut.bk-floating-signout.th-signout-inline{
  position:static !important;
  inset:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-height:32px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(10,10,10,.18) !important;
  background:#0A0A0A !important;
  background-color:#0A0A0A !important;
  background-image:none !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  box-shadow:0 12px 26px rgba(10,10,10,.16) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.62rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

#screen-booking-mode .th-booking-action-row #bkFloatingSignOut.bk-floating-signout.th-signout-inline:hover,
#screen-booking-mode .th-booking-action-row #bkFloatingSignOut.bk-floating-signout.th-signout-inline:focus{
  background:#0A0A0A !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

@media(max-width:430px){
  #screen-booking-mode .th-booking-action-row #bkFloatingSignOut.bk-floating-signout.th-signout-inline,
  #screen-booking-mode #bkFloatingSignOut.bk-floating-signout.th-signout-inline{
    min-height:31px !important;
    padding:7px 12px !important;
    font-size:.58rem !important;
    letter-spacing:.12em !important;
  }
}
/* === END THURAYA SIGN OUT INLINE VISIBILITY FIX === */

/* =========================================================
   THURAYA GROUP CONFIRM CTA FIT FIX — 2026-05-04
   Scope: Group booking confirmation screen only.
   Purpose: return Confirm Group Booking to normal page flow so it no
   longer floats over member cards or payment options.
   Logic untouched.
   ========================================================= */
#screen-group-confirm,
#screen-group-confirm .screen-inner{
  padding-bottom:128px !important;
}

#screen-group-confirm .step-footer{
  position:static !important;
  inset:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  z-index:auto !important;
  width:100% !important;
  margin:24px 0 34px !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#screen-group-confirm #p9GroupConfirmNudge{
  position:static !important;
  margin:18px 0 16px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  background:#FFF8EF !important;
  color:#6A4B2F !important;
  border:1px solid rgba(140,98,57,.14) !important;
  box-shadow:0 10px 24px rgba(35,26,16,.055) !important;
  opacity:1 !important;
}

#screen-group-confirm #grp_btnConfirm{
  position:static !important;
  width:100% !important;
  min-height:60px !important;
  border-radius:24px !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:auto !important;
}

#screen-group-confirm .confirm-note{
  position:static !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
}

#screen-group-confirm #grp_billingPanel{
  margin-bottom:22px !important;
}
/* === END THURAYA GROUP CONFIRM CTA FIT FIX === */


/* =========================================================
   THURAYA FINAL CONVERSION POLISH — 2026-05-04
   Scope: Review & Confirm pages only. UI/UX trust layer.
   Safe: CSS + CTA copy only; no booking/Firebase/auth logic changed.
   ========================================================= */
#screen-confirm .step-header,
#screen-group-confirm .step-header{
  margin-bottom:18px !important;
}

#screen-confirm .step-header p,
#screen-group-confirm .step-header p{
  max-width:94% !important;
  color:rgba(47,41,34,.78) !important;
}

#screen-confirm .confirm-card,
#screen-group-confirm .confirm-card{
  position:relative !important;
  margin-bottom:16px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:0 24px 56px rgba(0,0,0,.22) !important;
}

#screen-confirm .confirm-card::before,
#screen-group-confirm .confirm-card::before{
  content:"Booking Summary" !important;
  display:block !important;
  margin:0 0 8px !important;
  color:rgba(255,255,255,.58) !important;
  font-family:var(--font-sans, system-ui, sans-serif) !important;
  font-size:.62rem !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

#screen-confirm .confirm-row,
#screen-group-confirm .confirm-card .confirm-row{
  padding:13px 0 !important;
}

#screen-confirm .book-for-card,
#screen-confirm .promo-block,
#screen-group-confirm .grp-info-box{
  margin-top:14px !important;
  border-radius:22px !important;
  box-shadow:0 12px 28px rgba(35,26,16,.055) !important;
}

#screen-group-confirm .grp-info-box{
  padding:14px 16px !important;
  background:#FFF8EF !important;
  border:1px solid rgba(140,98,57,.12) !important;
}

#screen-group-confirm .grp-info-box p,
#screen-confirm .confirm-note,
#screen-group-confirm .confirm-note{
  font-size:.78rem !important;
  line-height:1.42 !important;
}

#screen-confirm .step-footer,
#screen-group-confirm .step-footer{
  margin-top:18px !important;
}

#screen-confirm #btnConfirmBooking,
#screen-group-confirm #grp_btnConfirm{
  position:relative !important;
  min-height:64px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#181818 0%,#000000 100%) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:1px solid #000 !important;
  box-shadow:0 22px 50px rgba(0,0,0,.26) !important;
  font-size:.80rem !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  overflow:hidden !important;
}

#screen-confirm #btnConfirmBooking::after,
#screen-group-confirm #grp_btnConfirm::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 72%) !important;
  transform:translateX(-125%) !important;
  transition:transform .72s cubic-bezier(.22,.8,.22,1) !important;
  pointer-events:none !important;
}

@media(hover:hover){
  #screen-confirm #btnConfirmBooking:hover::after,
  #screen-group-confirm #grp_btnConfirm:hover::after{
    transform:translateX(125%) !important;
  }
}

#screen-confirm #btnConfirmBooking:active,
#screen-group-confirm #grp_btnConfirm:active{
  transform:scale(.982) !important;
  box-shadow:0 15px 34px rgba(0,0,0,.22) !important;
}

#screen-confirm .confirm-note,
#screen-group-confirm .confirm-note{
  margin-top:12px !important;
  color:rgba(47,41,34,.68) !important;
  font-weight:700 !important;
}

#screen-confirm .confirm-note::before,
#screen-group-confirm .confirm-note::before{
  content:"✓ " !important;
  color:#0a0a0a !important;
  font-weight:950 !important;
}

#screen-confirm .promo-block{
  padding-top:16px !important;
  border-top:1px solid rgba(35,26,16,.08) !important;
}

#screen-confirm .promo-toggle-btn{
  min-height:48px !important;
  border-radius:999px !important;
  background:#FFFDF8 !important;
  border:1px solid rgba(221,211,197,.92) !important;
}

#screen-group-confirm #grp_conf_members{
  gap:12px !important;
  margin-bottom:14px !important;
}

#screen-group-confirm .grp-member-card{
  border-radius:24px !important;
}

#screen-group-confirm .group-billing-panel,
#screen-group-confirm #grp_billingPanel{
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(35,26,16,.08) !important;
}

#screen-group-confirm .group-billing-panel h3,
#screen-group-confirm #grp_billingPanel h3{
  font-size:1.18rem !important;
  line-height:1.18 !important;
}

@media(max-width:430px){
  #screen-confirm #btnConfirmBooking,
  #screen-group-confirm #grp_btnConfirm{
    min-height:62px !important;
    font-size:.76rem !important;
    letter-spacing:.14em !important;
  }

  #screen-confirm .confirm-card,
  #screen-group-confirm .confirm-card{
    border-radius:26px !important;
  }
}
/* === END THURAYA FINAL CONVERSION POLISH === */

/* =========================================================
   THURAYA ISSUE 02B — MOBILE DATE FIELD VISIBILITY FIX
   Scope: booking date inputs only. Native picker + booking logic untouched.
   Fixes mobile WebView/Safari cases where the date field appears blank.
   ========================================================= */
#bk_date,
#grp_date{
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background-color: #FFFDF8 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  caret-color: transparent !important;
  border: 1px solid rgba(221,211,197,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  color-scheme: light !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

#bk_date:focus,
#grp_date:focus{
  outline: none !important;
  border-color: rgba(143,118,56,.62) !important;
  box-shadow: 0 0 0 3px rgba(200,169,77,.12) !important;
}

#bk_date::-webkit-date-and-time-value,
#grp_date::-webkit-date-and-time-value{
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  text-align: left !important;
  min-height: 24px !important;
}

#bk_date::-webkit-calendar-picker-indicator,
#grp_date::-webkit-calendar-picker-indicator{
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

#bk_date::-webkit-clear-button,
#grp_date::-webkit-clear-button{
  display: none !important;
}
/* === END THURAYA ISSUE 02B === */


/* =========================================================
   THURAYA ISSUE 02C — DATE FIELD VISIBLE AFFORDANCE FIX
   Scope: date field visual layer only. Native picker + onchange logic untouched.
   Adds a visible "Select date" cue and calendar icon for mobile browsers
   that render empty date inputs without an indicator.
   ========================================================= */
.thuraya-date-field{
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.thuraya-date-field input[type="date"]{
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 15px 54px 15px 16px !important;
  border-radius: 18px !important;
  background: #FFFDF8 !important;
  border: 1px solid rgba(35,26,16,.18) !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  color-scheme: light !important;
}

.thuraya-date-field .thuraya-date-placeholder,
.thuraya-date-field .thuraya-date-icon{
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.thuraya-date-field .thuraya-date-placeholder{
  left: 16px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: rgba(17,17,17,.72) !important;
  letter-spacing: .01em !important;
}

.thuraya-date-field .thuraya-date-icon{
  right: 18px !important;
  font-size: 1.12rem !important;
  line-height: 1 !important;
  opacity: .88 !important;
}

.thuraya-date-field.has-value .thuraya-date-placeholder{
  display: none !important;
}

.thuraya-date-field:focus-within input[type="date"]{
  border-color: rgba(143,118,56,.62) !important;
  box-shadow: 0 0 0 3px rgba(200,169,77,.12) !important;
}
/* === END THURAYA ISSUE 02C === */

/* =========================================================
   THURAYA ISSUE 02D — DATE PLACEHOLDER OVERLAP FIX
   Scope: visual layer only. Keeps native date picker and onchange logic intact.
   Fixes PC/mobile overlap where the browser's native empty date format
   appears underneath the custom "Select date" cue.
   ========================================================= */
.thuraya-date-field:not(.has-value) input[type="date"]{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

.thuraya-date-field.has-value input[type="date"]{
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.thuraya-date-field input[type="date"]::-webkit-datetime-edit,
.thuraya-date-field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.thuraya-date-field input[type="date"]::-webkit-datetime-edit-text,
.thuraya-date-field input[type="date"]::-webkit-datetime-edit-month-field,
.thuraya-date-field input[type="date"]::-webkit-datetime-edit-day-field,
.thuraya-date-field input[type="date"]::-webkit-datetime-edit-year-field{
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit,
.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-text,
.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-month-field,
.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-day-field,
.thuraya-date-field:not(.has-value) input[type="date"]::-webkit-datetime-edit-year-field{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* === END THURAYA ISSUE 02D === */