/* =========================================================
   SenaMeet — Booking Page Styles
   هوية الموقع: خلفية #32353a / ذهبي #c18a32 / نص #fffdf7
   كل القواعد معزولة تحت .sm-booking لتفادي التعارض مع main.css
   ========================================================= */

/* نفس عرض app-wrapper المستعمل في باقي الصفحة (هيدر/فوتر) - بلا تمديد زايد */
.sm-app-wrapper{
  background-color:#32353a;
}

.sm-booking{
  --bg:#32353a;
  --text:#fffdf7;
  --text-soft:rgba(255,253,247,0.58);
  --text-faint:rgba(255,253,247,0.36);
  --gold:#c18a32;
  --gold-soft:rgba(193,138,50,0.14);
  --gold-line:rgba(193,138,50,0.35);
  --gold-strong:rgba(193,138,50,0.55);

  --panel:rgba(255,253,247,0.035);
  --panel-open:rgba(255,253,247,0.05);
  --panel-hover:rgba(255,253,247,0.045);
  --line:rgba(255,253,247,0.09);
  --line-soft:rgba(255,253,247,0.06);

  --danger:#c1673a;

  font-family:'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  color:var(--text);
  background-color:var(--bg);
  max-width:760px;
  margin:0 auto;
  padding:32px 16px 64px;
}

.sm-booking *{ box-sizing:border-box; }

/* ---------- generic step scaffolding ---------- */

.sm-step{ margin-bottom:36px; }

.sm-eyebrow{
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.5px;
  color:var(--gold);
  margin-bottom:6px;
}

.sm-step h2{
  font-family:'Tajawal', sans-serif;
  font-weight:900;
  font-size:21px;
  margin:0 0 18px;
  color:var(--text);
}

.sm-step[data-locked="true"]{
  opacity:.4;
  pointer-events:none;
  filter:grayscale(.4);
  transition:opacity .3s ease, filter .3s ease;
}

/* ---------- intro card ---------- */

.sm-intro{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px;
  margin-bottom:40px;
}

.sm-intro h1{
  font-family:'Tajawal', sans-serif;
  font-weight:900;
  font-size:26px;
  margin:0 0 6px;
}

.sm-intro .sm-subtitle{
  color:var(--gold);
  font-weight:600;
  font-size:14px;
  margin-bottom:16px;
}

.sm-intro p{
  color:var(--text-soft);
  line-height:1.9;
  font-size:14.5px;
  margin:0 0 14px;
}

.sm-intro h3{
  font-family:'Tajawal', sans-serif;
  font-size:15.5px;
  font-weight:700;
  color:var(--text);
  margin:20px 0 10px;
}

.sm-intro ul{
  margin:0;
  padding-inline-start:20px;
  color:var(--text-soft);
  font-size:14px;
  line-height:2;
}

/* ---------- text inputs ---------- */

.sm-field{ margin-bottom:16px; }

.sm-field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-soft);
  margin-bottom:7px;
}

.sm-field input[type="text"],
.sm-field input[type="email"],
.sm-field textarea{
  width:100%;
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:inherit;
  font-size:14.5px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
}

.sm-field input::placeholder,
.sm-field textarea::placeholder{ color:var(--text-faint); }

.sm-field input:focus,
.sm-field textarea:focus{
  border-color:var(--gold);
  background:var(--panel-open);
}

.sm-field textarea{ resize:vertical; min-height:110px; }

.sm-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width:560px){
  .sm-row{ grid-template-columns:1fr; }
}

/* ---------- selectable cards (shared: type + service) ---------- */

.sm-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sm-card{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(6px);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.sm-card.open{
  background:var(--panel-open);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

.sm-card.selected{
  border-color:var(--gold-strong);
}

.sm-card-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
}

.sm-seal{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  border:1.5px dashed var(--line);
  background:rgba(255,253,247,0.02);
  color:var(--text-soft);
  filter:grayscale(1) opacity(0.75);
  transition:all .25s ease;
}

.sm-card.open .sm-seal,
.sm-card.selected .sm-seal{
  background:var(--gold-soft);
  border-color:var(--gold);
  border-style:solid;
  filter:none;
}

.sm-card-title{
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}

.sm-check-badge{
  display:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--gold);
  color:var(--bg);
  font-size:11px;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.sm-card.selected .sm-check-badge{ display:flex; }

.sm-card-sub{
  font-size:12.5px;
  color:var(--text-soft);
  margin-top:2px;
}

.sm-chev{
  margin-right:auto;
  margin-left:0;
  font-size:12px;
  color:var(--text-faint);
  transition:transform .25s ease, color .25s ease;
}

.sm-card.open .sm-chev{ transform:rotate(180deg); color:var(--gold); }

.sm-card-body{
  max-height:0;
  opacity:0;
  transition:max-height .35s ease, opacity .3s ease, padding .3s ease;
  padding:0 18px;
}

.sm-card.open .sm-card-body{
  max-height:420px;
  opacity:1;
  padding:0 18px 18px;
}

.sm-divider{
  height:1px;
  background:var(--line);
  margin-bottom:14px;
}

/* type card facts grid */

.sm-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}

.sm-fact{
  background:rgba(255,253,247,0.025);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 12px;
}

.sm-fact-label{ font-size:11px; color:var(--text-faint); margin-bottom:3px; }
.sm-fact-value{ font-family:'Tajawal', sans-serif; font-weight:700; font-size:14px; color:var(--text); }

.sm-select-btn{
  width:100%;
  padding:11px;
  border-radius:10px;
  border:1.5px solid var(--gold-line);
  background:transparent;
  color:var(--gold);
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  transition:all .2s ease;
}

.sm-card.selected .sm-select-btn{
  background:var(--gold);
  color:var(--bg);
  border-color:var(--gold);
}

.sm-select-btn:hover{ opacity:.9; }

/* service card sub-checkboxes */

.sm-sub-label{
  font-size:11.5px;
  color:var(--text-faint);
  margin-bottom:9px;
}

.sm-subs{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sm-sub-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,253,247,0.025);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 13px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}

.sm-sub-item input{
  accent-color:var(--gold);
  width:16px;
  height:16px;
}

.sm-sub-item.checked{
  background:var(--gold-soft);
  border-color:var(--gold-line);
}

.sm-sub-item span{ font-size:13.5px; font-weight:500; color:var(--text); }

/* ---------- calendar ---------- */

.sm-calendar-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size:14.5px;
  margin-bottom:12px;
}

.sm-calendar-nav button{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  width:32px;
  height:32px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  transition:border-color .2s ease;
}

.sm-calendar-nav button:hover{ border-color:var(--gold-line); }

#calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin-bottom:24px;
}

#calendar > div{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:13.5px;
  color:var(--text-soft);
}

#calendar .day.available{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}

#calendar .day.available:hover{
  border-color:var(--gold-line);
  background:var(--panel-open);
}

#calendar .day.selected{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--bg);
  font-weight:700;
}

#calendar .disabled{
  color:var(--text-faint);
  opacity:.35;
}

#timeSlots{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(78px,1fr));
  gap:8px;
}

.slot{
  text-align:center;
  padding:10px 6px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--panel);
  font-size:13.5px;
  cursor:pointer;
  transition:all .2s ease;
}

.slot:hover{ border-color:var(--gold-line); }

.slot.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--bg);
  font-weight:700;
}

/* ---------- summary / preview ---------- */

.sm-summary{
  margin-top:14px;
  background:var(--panel);
  border:1px solid var(--gold-line);
  border-radius:12px;
  padding:16px 18px;
  font-size:14px;
  line-height:2;
  display:none;
}

.sm-summary.visible{ display:block; }

/* ---------- actions ---------- */

.sm-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.sm-btn{
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  font-size:14.5px;
  padding:13px 22px;
  border-radius:11px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:all .2s ease;
}

.sm-btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}

.sm-btn-ghost:hover{ border-color:var(--gold-line); }

.sm-btn-primary{
  background:var(--gold);
  color:var(--bg);
  flex:1;
}

.sm-btn-primary:hover{ opacity:.92; }

/* ---------- popup ---------- */

.popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:20px;
}

.popup-box{
  background:var(--bg, #32353a);
  border:1px solid rgba(193,138,50,0.35);
  border-radius:16px;
  padding:32px 26px;
  max-width:380px;
  text-align:center;
  color:#fffdf7;
  font-family:'IBM Plex Sans Arabic', sans-serif;
}

.popup-box h2{
  font-family:'Tajawal', sans-serif;
  color:#c18a32;
  margin:0 0 12px;
}

.popup-box p{
  color:rgba(255,253,247,0.7);
  line-height:1.8;
  margin:0 0 20px;
}

.popup-btn{
  background:#c18a32;
  color:#32353a;
  border:none;
  padding:12px 20px;
  border-radius:10px;
  font-family:'Tajawal', sans-serif;
  font-weight:700;
  cursor:pointer;
}