/* ============================================
   المجموعة الطيبة زغار ابراهيم — تنسيق صفحة الحجز
   ============================================ */

.btn-full{width:100%;}

/* ===== مؤشر الخطوات ===== */
.progress-wrap{background:var(--card); border-bottom:1px solid var(--line); padding:16px 20px;}
.progress-inner{display:flex; align-items:center; max-width:420px; margin:0 auto;}
.step-dot{display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0;}
.step-dot span{
  width:30px; height:30px; border-radius:50%; background:var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
  transition:.25s;
}
.step-dot label{font-size:10.5px; color:var(--muted); font-weight:700;}
.step-dot.active span{background:var(--copper); color:#fff;}
.step-dot.active label{color:var(--ink);}
.step-dot.done span{background:var(--green); color:#fff;}
.step-line{flex:1; height:2px; background:var(--line); margin:0 6px 18px;}

/* ===== لوحات الخطوات ===== */
.booking-main{padding-bottom:20px;}
.step-panel{display:none; padding:28px 20px;}
.step-panel.active{display:block;}
.step-panel .section-inner{max-width:520px;}

/* ===== الحقول ===== */
.field-block{margin-bottom:24px;}
.field-label{display:block; font-size:14px; font-weight:800; margin-bottom:10px;}
.req{color:var(--red);}
.text-input{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); font-size:15px; color:var(--ink); min-height:48px;
}
.text-input:focus{border-color:var(--copper); outline:none;}
textarea.text-input{resize:vertical; min-height:100px;}
.field-block.invalid .text-input{border-color:var(--red);}
.field-error{
  display:none; color:var(--red); font-size:12.5px; font-weight:700; margin-top:8px;
}
.field-block.invalid .field-error{display:block;}
.field-block.invalid .chip-grid{outline:2px solid var(--red); outline-offset:6px; border-radius:14px;}

/* ===== شبكة الاختيار (ماركات/موديلات) ===== */
.chip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.chip{
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; text-align:center; transition:.15s;
}
.chip .chip-emoji{font-size:22px;}
.chip.selected{border-color:var(--copper); background:rgba(193,113,47,.06); box-shadow:0 4px 12px rgba(193,113,47,.15);}

/* ===== تبويبات الوصف ===== */
.tabs{display:flex; gap:8px; margin-bottom:14px;}
.tab-btn{
  flex:1; padding:11px; border-radius:12px; border:1.5px solid var(--line); background:var(--card);
  font-weight:700; font-size:13.5px; color:var(--muted);
}
.tab-btn.active{border-color:var(--copper); color:var(--copper); background:rgba(193,113,47,.06);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ===== مسجل الصوت ===== */
.voice-recorder{background:var(--card); border:1.5px dashed var(--line); border-radius:14px; padding:20px; text-align:center;}
.record-btn{
  width:76px; height:76px; border-radius:50%; background:var(--copper); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  margin:0 auto; box-shadow:var(--shadow-copper); transition:.2s;
}
.record-btn.recording{background:var(--red); animation:pulse 1.4s infinite;}
.record-btn .rec-icon{font-size:18px;}
.record-btn span:last-child{font-size:9px; font-weight:700; max-width:60px;}
#recordLabel{font-size:9px; padding:0 4px;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.4);} 50%{box-shadow:0 0 0 12px rgba(192,57,43,0);}}
.rec-timer{margin-top:10px; font-size:15px; font-weight:700; color:var(--ink);}
.mic-hint{font-size:11.5px; color:var(--muted); margin-top:10px;}

/* ===== اختيار الورشة (داخل الحجز) ===== */
.workshop-select{display:grid; gap:12px;}
.ws-option{
  background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:16px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.ws-option.selected{border-color:var(--copper); box-shadow:0 6px 16px rgba(193,113,47,.12);}
.ws-option-name{font-weight:800; font-size:14.5px;}
.ws-option-meta{font-size:12px; color:var(--muted); margin-top:2px;}
.ws-option-badge{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; background:rgba(47,158,100,.12);
  color:var(--green); padding:4px 8px; border-radius:100px; white-space:nowrap;
}

/* ===== الفترة المقترحة والشبكة ===== */
.suggested-slot{
  background:linear-gradient(135deg, rgba(193,113,47,.08), rgba(193,113,47,.02));
  border:1.5px solid var(--copper); border-radius:14px; padding:16px; text-align:center;
}
.suggested-slot .sug-label{font-size:11px; color:var(--copper); font-weight:700; font-family:var(--font-mono);}
.suggested-slot .sug-value{font-size:17px; font-weight:900; margin:6px 0;}
.suggested-slot button{margin-top:8px;}
.slot-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px;}
.slot-chip{
  background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px;
  text-align:center; font-size:12.5px; font-weight:700;
}
.slot-chip .sc-day{display:block; margin-bottom:4px;}
.slot-chip .sc-count{display:block; font-family:var(--font-mono); font-size:11px; color:var(--green); font-weight:700;}
.slot-chip.full{opacity:.4; pointer-events:none;}
.slot-chip.full .sc-count{color:var(--red);}
.slot-chip.selected{border-color:var(--copper); background:rgba(193,113,47,.06);}

/* ===== أزرار التنقل ===== */
.nav-row{display:flex; gap:10px; margin-top:8px;}
.nav-row .btn-primary{flex:1;}

/* ===== شاشة التأكيد ===== */
.success-icon{
  width:64px; height:64px; border-radius:50%; background:var(--green); color:#fff;
  font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.tracking-card{
  background:var(--ink); color:#fff; border-radius:16px; padding:20px; margin-top:22px;
}
.tracking-label{font-size:11px; color:#9FB1CC; font-family:var(--font-mono);}
.tracking-code{font-size:26px; font-weight:800; margin-top:6px; letter-spacing:.05em;}

@media (min-width:860px){
  .step-panel{padding:56px 40px;}
  .progress-inner{max-width:520px;}
}