/* ==========================================================================
   NOIR BARBER — customer booking management (my-booking.html)
   Extends main.css + booking.css (reuses .bk-form/.field, .cal, .bk-slots,
   .slot, .bk-empty, .btn, .eyebrow — nothing here duplicates those tokens).
   Sections: lookup form · ticket card · status badge · reschedule compare ·
             modal
   ========================================================================== */

.mb-wrap { max-width: 560px; }
.mb-view[hidden] { display: none; }
.mb-view { animation: fadeUp .5s var(--ease-out); }

.mb-lookup { max-width: none; }
.mb-lookup .field__err:not(:empty) { margin-top: -8px; }

/* ---------- Ticket card ---------- */
.mb-ticket {
  border: 1px solid var(--line-strong); background: var(--tobacco);
  padding: clamp(24px, 5vw, 40px); position: relative; overflow: hidden;
}
.mb-ticket::before { /* barber-pole accent edge, echoes the homepage motif */
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(-45deg, var(--bronze) 0 8px, var(--ivory) 8px 16px, var(--soot) 16px 24px);
  opacity: .85;
}
.mb-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mb-ticket__eyebrow { color: var(--ash); }
.mb-ticket__name { font: 800 1.75rem/1.2 var(--f-display); margin-top: 6px; }

.status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  font: 600 .75rem/1 var(--f-body); border: 1px solid currentColor; flex: none; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status--confirmed { color: var(--bronze-hi); }
.status--pending { color: var(--bronze-hi); } /* نفس لون confirmed — التمييز الفعلي بالنص داخل الشارة نفسه */
.status--cancelled { color: var(--ash); text-decoration: line-through; text-decoration-color: rgba(154,145,135,.5); }

.mb-ticket__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; border-top: 1px solid var(--line); padding-top: 20px; }
.mb-ticket__item dt { color: var(--ash); font: 500 .75rem/1 var(--f-body); margin-bottom: 6px; }
.mb-ticket__item dd { font: 700 1.0625rem/1.3 var(--f-body); }
.mb-ticket__ref { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--bronze-hi); font: 600 .875rem/1 var(--f-body); }

.mb-ticket__note { color: var(--ash); margin-top: 16px; }

.mb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mb-actions .btn { flex: 1 1 auto; min-width: 160px; }

/* ---------- Reschedule compare ---------- */
.mb-compare { display: grid; gap: 16px; margin-top: 20px; grid-template-columns: 1fr; }
.mb-compare__card { border: 1px solid var(--line-strong); padding: 20px; }
.mb-compare__card--new { border-color: var(--bronze); background: rgba(185, 130, 79, .06); }
.mb-compare__label { color: var(--ash); font: 600 .75rem/1 var(--f-body); margin-bottom: 10px; }
.mb-compare__date { font: 700 1.125rem/1.3 var(--f-display); }
.mb-compare__time { color: var(--bronze-hi); font: 600 1rem/1 var(--f-mono); margin-top: 4px; }
.mb-compare__arrow { display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 1.25rem; }
.mb-compare__service { margin-top: 16px; color: var(--ash); font-size: .9375rem; }

/* ---------- Modal ---------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 13, 11, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative; width: 100%; max-width: 460px; background: var(--tobacco); border: 1px solid var(--line-strong);
  border-bottom: none; padding: clamp(24px, 5vw, 36px); animation: fadeUp .4s var(--ease-out) both;
  margin-inline: var(--gutter);
}
.modal__title { font: 800 1.375rem/1.3 var(--f-display); margin-top: 8px; }
.modal__text { color: var(--ash); margin-top: 10px; }
.modal__actions { display: grid; gap: 10px; margin-top: 24px; }

/* ==========================================================================
   Tablet ≥ 700px
   ========================================================================== */
@media (min-width: 700px) {
  .mb-compare { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

/* ==========================================================================
   Desktop ≥ 1000px
   ========================================================================== */
@media (min-width: 1000px) {
  .modal { align-items: center; }
  .modal__panel { border-bottom: 1px solid var(--line-strong); margin-inline: 0; }
}