/* ===== Toast Style (بقي كما هو) ===== */
#toast {
  position: fixed;
  inset-inline: 0;
  bottom: 18px;
  display: grid;
  place-items: center;
  z-index: 9999;
}
.toast-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(12, 12, 12, 0.92);
  border: 1px solid #94621c;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 14px 16px;
  color: #eee;
  min-width: 280px;
  max-width: 92vw;
  transform: translateY(12px);
  opacity: 0;
  transition: 0.35s ease;
}
#toast.show .toast-card {
  transform: translateY(0);
  opacity: 1;
}
.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: #1d1d1d;
  border: 1px solid #94621c;
  color: #20c997;
  font-weight: 700;
  flex: 0 0 28px;
  margin-top: 2px;
}
.toast-title {
  color: #f6f6f6;
  font-weight: 700;
}
.toast-msg {
  margin: 2px 0 0;
  color: #cfcfcf;
  font-size: 14px;
}
.toast-close {
  margin-inline-start: 10px;
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
  padding: 0 4px;
}
.toast-close:hover {
  color: #fff;
}
#toast.success .toast-icon {
  color: #22c55e;
  border-color: #22c55e;
}
#toast.error .toast-icon {
  color: #ef4444;
  border-color: #ef4444;
}
#toast.info .toast-icon {
  color: #38bdf8;
  border-color: #38bdf8;
}
:root {
  --brand: #94621c; /* Bronze hoofd */
  --brand2: #f0c87a; /* Highlight goud */
  --bg: #080a0d; /* Donkere basis */
  --card: #0e131a; /* Panel */
  --text: #f3f5f8; /* Tekst */
  --muted: #b8c0ca; /* Secundaire tekst */
  --err: #ef4444; /* Error kleur */
  --border: rgba(240, 200, 122, 0.45);
  --bronze: rgba(240, 200, 122, 0.45);
}

* {
  box-sizing: border-box;
}

/* ✅ الخلفية الآن من mf-background.css فقط */
body {
  margin: 0;
  font-family:
    'Cormorant Garamond',
    'Poppins',
    'Cairo',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  color: var(--text);
}

h1,
h2,
h3,
p {
  margin: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
  transition: 0.25s ease;
}
a {
  text-decoration: none;
  color: inherit;
}

/* حالة التوافر في واجهة العميل (بقي كما هو) */
.slot-available {
  background: #11381f !important;
  border-color: #22c55e !important;
  color: #d9fbe3 !important;
}
.slot-full {
  background: #402222 !important;
  border-color: #ef4444 !important;
  color: #ffd9d9 !important;
  cursor: not-allowed !important;
}
.slot-past {
  background: #2a2f38 !important;
  border-color: #3b4252 !important;
  color: #b8c0ca !important;
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* رأس البطاقة وأزراره (بقي كما هو) */
.head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.head-actions .actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.add-btn {
  padding: 10px 12px;
}
.add-btn .icon {
  font-size: 16px;
  line-height: 1;
  margin-inline-end: 6px;
  display: inline-block;
}

.btn-sm {
  width: auto;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
}

.info-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: #0f141b;
  color: var(--brand2);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: 0.15s;
}

.compact-card {
  padding: 12px 14px;
}
.compact-card .toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Dialog */
#appDialog {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 5600;
  place-items: center;
}
#appDialog.open {
  display: grid;
}
#appDialog .dlg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
#appDialog .dlg-card {
  position: relative;
  width: min(420px, 90vw);
  background: #0f141b;
  color: #eaeaea;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  padding: 16px;
}
.dlg-title {
  margin: 0 0 8px;
  color: var(--brand2);
  text-align: center;
}
.dlg-body {
  margin: 0 0 14px;
  color: #cfd6df;
  text-align: center;
  font-size: 15px;
}
.dlg-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.dlg-actions .primary,
.dlg-actions .ghost {
  min-width: 120px;
}

#partyCard {
  display: none !important;
}

/* حالات السلوكات للتايم سلوتس... (بقي كما هو) */
.time-slot,
.slot,
.option-time {
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid #2a2f38;
  background: #0f141b;
}

.slot.available,
.time-slot.available,
.option-time.available {
  border: 1px dashed #22c55e !important;
  box-shadow: 0 0 8px #22c55e99 !important;
  background: #0f141b !important;
  color: #d9fbe3 !important;
}
.slot.available:hover,
.time-slot.available:hover {
  transform: scale(1.03);
  box-shadow: 0 0 8px #22c55ebb !important;
  background: #171e27 !important;
}

.slot.booked,
.time-slot.booked,
.option-time.booked {
  position: relative !important;
  border: 1px dashed #ef4444 !important;
  box-shadow: 0 0 8px #ef444499 !important;
  background: #1a0f0f !important;
  color: #ffbaba !important;
  opacity: 0.85 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.slot.booked::after,
.time-slot.booked::after,
.option-time.booked::after {
  content: attr(data-badge) !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  color: #ff4444 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 10px !important;
  text-shadow: 0 0 6px #ff000088 !important;
}

.slot.booked:hover,
.time-slot.booked:hover,
.option-time.booked:hover {
  transform: none !important;
  box-shadow: 0 0 8px #ef444499 !important;
  background: #1a0f0f !important;
}

.calendar {
  border-radius: 10px;
  overflow: hidden;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #121720;
  color: #fff;
  border-radius: 8px;
}
.nav {
  all: unset;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}
.title {
  font-weight: 800;
}

.calendar .week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  background: #10161d;
  padding: 4px 6px;
  font-size: 11px;
  color: #b7bec8;
}
.calendar .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 4px;
}

html[dir='rtl'] .calendar .week,
html[dir='rtl'] .calendar .grid {
  direction: ltr !important;
  text-align: center;
}

.calendar .day {
  box-sizing: border-box;
  text-align: center;
  padding: 2px 0;
}

/* === Booking-page base: background + mobile scroll === */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: auto !important;

  background: linear-gradient(
    150deg,
    #06080c 0%,
    #0a0f1a 15%,
    #3a3f46 40%,
    #94621c 70%,
    #f2e8d8 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}