.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  width: min(1100px, 96%);
  margin: 0 auto 16px;
}
.panel h2 {
  color: var(--brand2);
  margin-bottom: 8px;
}

.hours-grid {
  display: grid;
  gap: 8px;
}
.hours-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f141b;
  border: 1px solid rgba(240, 200, 122, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
}
.hours-grid strong {
  font-weight: 900;
  color: var(--text);
}
.hours-grid span {
  color: var(--muted);
  font-weight: 800;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  width: min(1100px, 96%);
  margin: 0 auto 10px;
}
h3 {
  color: var(--brand2);
  text-align: center;
  margin-bottom: 6px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.subhint {
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
  font-size: 17px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 760px) {
  .row {
    grid-template-columns: 1fr;
  }
}

.field {
  position: relative;
  margin-top: 18px;
}
.row .field {
  margin-top: 0;
}
.label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  margin: 6px 2px;
  font-size: 17px;
}
.req {
  color: #ef4444;
  font-weight: 900;
  margin-inline-start: 6px;
}

input,
textarea,
button {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #2a2f38;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  transition: 0.2s;
}
input::placeholder,
textarea::placeholder {
  font-size: 15px;
  opacity: 0.7;
}
input:focus,
textarea:focus,
.pick-btn:focus {
  border-color: var(--brand2);
  box-shadow: 0 0 0 4px rgba(240, 200, 122, 0.2);
  outline: 0;
}
.error input,
.error .pick-btn {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

button.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #121212;
  border: none;
  font-weight: 800;
  border-radius: 12px;
}
button.primary:hover {
  filter: saturate(1.05) brightness(1.03);
}
button.ghost {
  background: transparent;
  border: 1px solid #2a2f38;
}
.mt {
  margin-top: 12px;
}

/* People */
.people-selector {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #2a2f38;
  border-radius: 12px;
  background: #0f141b;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.person-option {
  all: unset;
  cursor: pointer;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #2a2f38;
  border-radius: 10px;
  background: #0c1117;
  color: #eaeaea;
  font-weight: 800;
  transition: 0.15s;
}
.person-option:hover {
  transform: translateY(-1px);
  background: #121720;
}
.person-option.selected {
  outline: 2px solid var(--brand2);
}
.person-option .person-note {
  display: block;
  font-size: 16px;
  color: #b7bec8;
  margin-top: 6px;
  font-weight: 500;
}
/* إخفاء الملاحظة للبالغين */
.person-option[data-person='man'] .person-note,
.person-option[data-person='woman'] .person-note {
  display: none !important;
}

/* Pickers */
.picker {
  position: relative;
  margin-top: 6px;
  overflow: visible;
  z-index: 1;
}
.pick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #121720;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 16px;
}
.pick-btn .left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.pick-btn svg {
  width: 22px;
  height: 22px;
  color: var(--brand2);
}
.pick-btn .summary {
  font-size: 15px;
  color: var(--muted);
}
.pick-btn .chev {
  transition: 0.2s transform;
}
.picker.open .pick-btn .chev {
  transform: rotate(180deg);
}

.picker .popover {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  width: 100%;
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 5000;
  pointer-events: none;
  background: #0c1117;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  display: none;
  animation: fade 0.12s ease-out;
  padding: 6px;
}
.picker.open .popover {
  display: block !important;
  pointer-events: auto;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 🎴 كرت خلفية للـ Booking (نفس روحية ساعات العمل) */
#bookingForm.card {
  background:
    linear-gradient(180deg, rgba(14, 19, 26, 0.92), rgba(14, 19, 26, 0.92)),
    radial-gradient(1200px 400px at 80% -100px, rgba(148, 98, 28, 0.14), transparent 70%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  padding: 20px;
}

/* 🌓 طبقة تعتيم عند فتح أي Popover (تمنع ظهور وتحسس العناصر تحتها) */
/* 🔔 النقطة 6: توحيد قواعد #overlay و .picker .popover */
#overlay {
  z-index: 4000;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
}
#overlay.show {
  display: block;
}

/* النقطة 6: layering للـ picker المفتوح (pointer-events/max-height اندمجت في قاعدة .picker .popover) */
.picker.open {
  z-index: 6000;
}
.week span {
  text-align: center;
}

.day {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: 0.12s;
  background: #0f141b;
  font-size: 14px;
  border: 1px solid #1d2530;
  padding: 4px 0;
}
.day:hover {
  transform: translateY(-1px);
  background: #16202b;
}
.day.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.day.selected {
  outline: 2px solid var(--brand2);
  box-shadow: 0 0 0 3px rgba(240, 200, 122, 0.18) inset;
}
.selected-info {
  font-size: 14px;
  color: var(--muted);
  padding: 4px 6px 6px;
}

.slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 250px;
  overflow: auto;
  padding: 6px;
}

.slot {
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  font-size: 16px;
}
.slot:hover {
  transform: translateY(-1px);
  background: #171e27;
}
.slot.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot.selected {
  outline: 2px solid var(--brand2);
}

/* 🔄 خدمات مثل الأوقات تماماً */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 6px;
  max-height: 180px; /* نفس قائمة الأوقات */
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.svc {
  all: unset;
  border: 1px solid #2a2f38;
  border-radius: 10px;
  padding: 10px 12px;
  background: #0f141b;
  color: #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.svc:hover {
  background: #171e27;
  transform: translateY(-1px);
}
.svc.selected {
  outline: 2px solid var(--brand2);
}

/* (html, body base now consolidated in booking-ui.css) */
.slot,
.svc,
.person-option,
.day,
.pick-btn,
button.primary {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

#servicePicker .popover {
  max-height: 320px; /* فقط الخدمات */
}

/* Date picker: compact 6-row grid fits without vertical scroll */
#datePicker .popover {
  max-height: none;
  overflow: visible;
}

/* 4) كبّر مساحات الضغط الدنيا (44px توصيّة أبل/جوجل) */
.pick-btn,
.slot,
.svc,
.person-option,
button.primary,
button.ghost {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 12px;
}
/* تصغير الزر الإضافي */
.btn-sm {
  min-height: 38px !important;
  padding: 10px 14px !important;
}
/* تصغير زر المعلومات (مُحدّث بالقيم الجديدة) */
.info-dot {
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

/* 5) خفّف الانتقالات عشان ما تحس بثقل */
.pick-btn,
.slot,
.svc,
.person-option,
.day,
button.primary,
button.ghost {
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease;
}

/* 6) لمسة/ضغط مرئي وسريع */
@media (hover: none) {
  .pick-btn:active,
  .slot:active,
  .svc:active,
  .person-option:active,
  .day:active,
  button.primary:active,
  button.ghost:active {
    transform: scale(0.98);
    filter: brightness(1.02);
  }
}

/* 7) عطّل تأثير “هوفر” على الشاشات اللمسية (يمنع قفزات مزعجة) */
@media (hover: none) {
  .person-option:hover,
  .svc:hover,
  .slot:hover,
  .day:hover,
  button.primary:hover,
  button.ghost:hover {
    transform: none;
  }
}

/* 8) اضاءة خفيفة عند الفوكس (للكيبورد/قارئ شاشة) بدون حدود مزعجة */
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(240, 200, 122, 0.25);
  border-color: rgba(240, 200, 122, 0.6) !important;
}

/* 9) احرص أن عناصر عائمة ما تحجب الأزرار */
#toast,
#sidebar {
  pointer-events: none;
}
#toast.show,
#sidebar.show,
#appDialog.open {
  pointer-events: auto;
}

/* 10) تحسين ملامسة عناصر الشبكات */
.day,
.slot,
.svc,
.person-option {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 11) تحسينات صغيرة للكاليندر والسلوتس */
.day {
  font-size: 15px;
}
.slot,
.svc {
  text-align: center;
  font-weight: 700;
}

/* ترتيب عنوان الملاحظات مع الأيقونة عالطرف اليمين */
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* العنوان على اليسار، الأيقونة على اليمين في RTL */
  margin-bottom: 6px;
  gap: 10px;
}
.notes-label {
  font-size: 0.9rem;
  color: #ddd;
}

/* لو ما عندك هالكلاس من قبل، خليه هون (أو اتركه لو كان موجود) */
.booking-help-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #b88a3b;
  background: transparent;
  color: #b88a3b;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.party-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0f141b;
}
.party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.party-pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #171e27;
  border: 1px solid rgba(240, 200, 122, 0.25);
  color: #cfd6df;
}
.party-actions {
  display: flex;
  gap: 8px;
}
.party-btn {
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid #2a2f38;
  border-radius: 8px;
  background: #0c1117;
  color: #eaeaea;
}
.party-btn:hover {
  background: #121720;
}

.booking-help-modal[aria-hidden='true'] {
  display: none;
}
.booking-help-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.booking-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.booking-help-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 520px;
  width: 90%;
  background: #101319;
  border: 1px solid #b88a3b;
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  font-size: 0.95rem;
  color: #eee;
}

.booking-help-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #f5d08a;
}
.booking-help-p {
  margin: 4px 0;
  line-height: 1.55;
}
.booking-help-phone a {
  color: #f5d08a;
  text-decoration: none;
}
.booking-help-phone a:hover {
  text-decoration: underline;
}

.error-msg {
  color: #ff3b3b; /* أحمر واضح */
  font-size: 14px;
  margin-top: 6px;
}