/*
 * نموذج حجز الطاولة.
 */

.dm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
  background: #fff;
}

.dm-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.dm-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dm-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dm-dark);
}

.dm-field__label em {
  font-style: normal;
  color: var(--dm-primary);
}

.dm-field input,
.dm-field select,
.dm-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius-sm);
  font: inherit;
  font-size: 0.93rem;
  color: var(--dm-text);
  background: var(--dm-bg-alt);
  transition: border-color 0.25s var(--dm-ease), box-shadow 0.25s var(--dm-ease),
    background-color 0.25s var(--dm-ease);
}

.dm-field textarea {
  resize: vertical;
  min-height: 90px;
}

.dm-field input:focus,
.dm-field select:focus,
.dm-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 4px rgba(var(--dm-primary-rgb), 0.12);
}

.dm-field input.is-error,
.dm-field select.is-error,
.dm-field textarea.is-error {
  border-color: var(--dm-primary);
  background: var(--dm-primary-soft);
}

/* حقل الفخ المخفي عن الزائر */
/* يُخفى بالقصّ لا بالإزاحة، لأن الإزاحة في rtl تمدّ عرض الصفحة. */
.dm-hp {
  position: absolute !important;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.dm-form__submit {
  align-self: flex-start;
  margin-top: 4px;
}

.dm-form__submit.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.dm-form__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--dm-text-muted);
}

.dm-form__message {
  display: none;
  padding: 14px 18px;
  border-radius: var(--dm-radius-sm);
  font-size: 0.9rem;
}

.dm-form__message.is-visible {
  display: block;
}

.dm-form__message.is-success {
  color: #1f6b3a;
  background: #e8f6ed;
  border: 1px solid #bfe3cd;
}

.dm-form__message.is-error {
  color: var(--dm-primary-dark);
  background: var(--dm-primary-soft);
  border: 1px solid rgba(var(--dm-primary-rgb), 0.24);
}

@media (max-width: 560px) {
  .dm-form__submit {
    align-self: stretch;
  }
}

/* ------------------------------------------------------------------ */
/* تخطيط صفحة الحجز وقسم الحجز                                         */
/* ------------------------------------------------------------------ */

/*
 * التخطيط هنا لا في ملف الأقسام: كتلة dm-book تظهر في صفحة الحجز
 * وفي قسم الحجز داخل صفحة الفروع، وكلاهما يُحمِّل هذا الملف. حين كان
 * التخطيط في sections.css كانت صفحة الحجز لا تُحمِّله فيسقط الـ grid
 * ويصير العمودان مرصوفين بعرض الصفحة كاملًا.
 */
.dm-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: start;
  gap: clamp(24px, 3.5vw, 56px);
}

.dm-book__media {
  border-radius: var(--dm-radius);
  overflow: hidden;
}

.dm-book__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-book__body {
  min-width: 0;
}

.dm-book__body .dm-prose {
  margin-bottom: 22px;
}

/* العمود الجانبي يلاحق النزول لأن النموذج أطول منه بكثير. */
.dm-book__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--dm-header-h) + 20px);
}

/*
 * صندوق الطلب المباشر داكن لا كريمي: النموذج الأبيض بجانبه هو بطل
 * الصفحة، وسطحٌ داكن يفصل البديل عنه بدل أن يتنافسا على الانتباه.
 */
.dm-book__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border: 1px solid rgba(var(--dm-secondary-rgb), 0.38);
  border-radius: var(--dm-radius);
  color: #fff;
  background: var(--dm-dark);
}

.dm-book__box h2 {
  margin: 0 0 2px;
  font-size: 1.1rem;
  color: var(--dm-secondary);
}

.dm-book__box .dm-btn {
  width: 100%;
}

/* الزر الشبح داخل صندوق داكن يحتاج لونًا فاتحًا. */
.dm-book__box .dm-btn--ghost {
  color: #fff;
}

.dm-book__box .dm-btn--ghost:hover {
  color: var(--dm-dark);
  background: #fff;
  border-color: #fff;
}

.dm-book__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
}

.dm-book__hours i {
  color: var(--dm-secondary);
}

.dm-book__aside .dm-qr {
  background: #fff;
  border: 1px solid var(--dm-border);
}

@media (max-width: 900px) {
  .dm-book__grid {
    grid-template-columns: 1fr;
  }

  /* بلا تثبيت في عمود واحد: الالتصاق أعلى الشاشة بلا معنى هنا. */
  .dm-book__aside {
    position: static;
  }
}

/*
 * في العمود الواحد يصير الصندوق بعرض الصفحة، وزرٌّ بعرض 800 بكسل
 * يبدو شريطًا لا زرًّا. فيُصفّ الزران جنبًا إلى جنب ويبقى العنوان
 * والمواعيد على عرض الصندوق كاملًا.
 */
@media (min-width: 561px) and (max-width: 900px) {
  .dm-book__box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 14px;
  }

  .dm-book__box h2,
  .dm-book__hours {
    grid-column: 1 / -1;
  }
}