/* ═══════════════════════════════════════
   HALL DETAIL PAGE — Single hall view
   ═══════════════════════════════════════ */

/* ── Detail Section ────────── */
.detail-section {
  padding: var(--y-space-xxl) 0 var(--y-space-5xl);
}

/* ── Image Grid ────────────── */
.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--y-space-s);
  border-radius: var(--y-radius-2xl);
  overflow: hidden;
  max-height: 440px;
  margin-bottom: var(--y-space-3xl);
}

.detail-gallery__main {
  overflow: hidden;
  position: relative;
}

.detail-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--y-transition-long);
}

.detail-gallery__main:hover img {
  transform: scale(1.03);
}

/* BUG 29 FIX: Image Action Buttons */
.gallery-actions {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.gallery-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--y-color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--y-shadow-m);
  color: var(--y-color-text-muted);
  transition: all var(--y-transition-fast);
}

.gallery-btn:hover {
  color: var(--y-color-primary);
  transform: translateY(-2px);
}

.gallery-btn.active {
  color: var(--y-color-danger);
}

.detail-gallery__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--y-space-s);
}

.detail-gallery__side-img {
  overflow: hidden;
  position: relative;
}

.detail-gallery__side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--y-transition-long);
}

.detail-gallery__side-img:hover img {
  transform: scale(1.03);
}

/* ── Content Layout ────────── */
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--y-space-3xl);
}

.detail-content {
  min-width: 0;
}

/* ── Hall Title Area ────────── */
.detail-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
  flex-wrap: wrap;
  margin-bottom: var(--y-space-l);
}

.detail-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--y-weight-bold);
}

/* ── Meta Row ──────────────── */
.detail-meta {
  display: flex;
  align-items: center;
  gap: var(--y-space-xl);
  color: var(--y-color-text-muted);
  margin-bottom: var(--y-space-xxl);
  font-size: var(--y-font-s);
}

.detail-meta__item {
  display: flex;
  align-items: center;
  gap: var(--y-space-xs);
}

.detail-meta__item i,
.detail-meta__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Info Card ─────────────── */
.detail-info-card {
  background: var(--y-color-white);
  border-radius: var(--y-radius-2xl);
  padding: var(--y-space-xxl);
  border: 1px solid var(--y-color-border);
  margin-bottom: var(--y-space-xxl);
}

.detail-info-card__title {
  font-weight: var(--y-weight-bold);
  margin-bottom: var(--y-space-l);
  font-size: var(--y-font-xl);
}

.detail-info-card__text {
  color: var(--y-color-text-muted);
  line-height: 1.8;
}

/* ── Features Grid ─────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--y-space-m);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  padding: var(--y-space-s) 0;
}

.feature-item__icon {
  color: var(--y-color-primary);
  flex-shrink: 0;
}

.feature-item__icon i,
.feature-item__icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Sticky Sidebar ────────── */
.detail-sidebar {
  position: sticky;
  top: calc(var(--y-header-height) + var(--y-space-3xl));
  height: fit-content;
}

/* BUG 29 & 31 FIX: Pricing Card Restructure */
.detail-price-card {
  background: var(--y-color-white);
  border-radius: var(--y-radius-2xl);
  padding: var(--y-space-xxl);
  border: 1px solid var(--y-color-border);
  margin-bottom: var(--y-space-l);
  box-shadow: var(--y-shadow-s);
}

.detail-price {
  font-size: var(--y-font-xxxl);
  font-weight: var(--y-weight-extrabold);
  color: var(--y-color-primary);
}

.detail-price-unit {
  display: block;
  margin-top: var(--y-space-s);
  font-size: var(--y-font-s);
  color: var(--y-color-text-muted);
}

.detail-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--y-space-m);
}

/* ── Similar Halls ─────────── */
.similar-halls {
  margin-top: var(--y-space-5xl);
}

.similar-halls__title {
  font-weight: var(--y-weight-bold);
  font-size: var(--y-font-xxl);
  margin-bottom: var(--y-space-xxl);
}

/* ═══════════════════════════════════════
   RESPONSIVE — Large desktops
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .detail-gallery {
    max-height: 380px;
  }

  .detail-layout {
    gap: var(--y-space-xxl);
  }

  .detail-price-card,
  .detail-info-card {
    padding: var(--y-space-xl);
  }

  .detail-sidebar {
    top: calc(var(--y-header-height) + var(--y-space-xxl));
  }
}

/* ═══════════════════════════════════════
   RESPONSIVE — Tablets
   ═══════════════════════════════════════ */

@media (max-width: 992px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  /* عرض كامل مثل React / التصميم المرجعي — لا تقييد 400px على الجوال */
  .detail-sidebar {
    position: static;
    max-width: none;
    width: 100%;
    margin: 0;
  }

  .detail-sidebar .detail-price-card.eh-booking-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .detail-section {
    padding: var(--y-space-l) 0 var(--y-space-3xl);
  }

  .detail-gallery {
    grid-template-columns: 1fr;
    max-height: none;
    border-radius: var(--y-radius-xl);
  }

  .detail-gallery__side {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }

  .detail-gallery__main img,
  .detail-gallery__side-img img {
    height: 200px;
  }

  .detail-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--y-space-s);
  }

  .detail-title {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .detail-meta {
    flex-wrap: wrap;
    gap: var(--y-space-m);
    font-size: var(--y-font-xs);
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .detail-info-card {
    padding: var(--y-space-l);
    border-radius: var(--y-radius-xl);
  }

  .detail-price-card {
    padding: var(--y-space-l);
    border-radius: var(--y-radius-xl);
    max-width: 100%;
  }

  .detail-price-card.eh-booking-card {
    padding: var(--y-space-xl) var(--y-space-l);
  }

  .detail-price {
    font-size: var(--y-font-xxl);
  }

  .similar-halls {
    margin-top: var(--y-space-3xl);
  }

  .similar-halls__title {
    font-size: var(--y-font-xl);
    margin-bottom: var(--y-space-l);
  }
}

/* ═══════════════════════════════════════
   RESPONSIVE — Small phones
   ═══════════════════════════════════════ */

@media (max-width: 480px) {
  .detail-section {
    padding: var(--y-space-m) 0 var(--y-space-xxl);
  }

  .detail-gallery {
    border-radius: var(--y-radius-l);
    gap: var(--y-space-xs);
    margin-bottom: var(--y-space-xxl);
  }

  .detail-gallery__main img {
    height: 180px;
  }

  .detail-gallery__side-img img {
    height: 100px;
  }

  .gallery-btn {
    width: 36px;
    height: 36px;
  }

  .detail-title {
    font-size: 1.25rem;
  }

  .detail-meta {
    gap: var(--y-space-s);
    margin-bottom: var(--y-space-l);
  }

  .detail-info-card {
    padding: var(--y-space-m);
    border-radius: var(--y-radius-l);
    margin-bottom: var(--y-space-l);
  }

  .detail-info-card__title {
    font-size: var(--y-font-l);
  }

  .detail-price-card {
    padding: var(--y-space-m);
    border-radius: var(--y-radius-l);
  }

  .detail-price-card.eh-booking-card {
    padding: var(--y-space-l) var(--y-space-m);
  }

  .detail-price {
    font-size: var(--y-font-xl);
  }

  .feature-item {
    font-size: var(--y-font-s);
  }

  .similar-halls {
    margin-top: var(--y-space-xxl);
  }

  .similar-halls__title {
    font-size: var(--y-font-l);
    margin-bottom: var(--y-space-l);
  }
}

/* ═══ Figma / React hall detail (WordPress) ═══ */
.eh-breadcrumb {
  margin-bottom: 0;
}

.eh-gallery-react {
  margin-bottom: var(--y-space-3xl);
}

.eh-gallery-react__main {
  position: relative;
  border-radius: var(--y-radius-2xl);
  overflow: hidden;
  height: 300px;
  background: var(--y-color-bg-subtle);
}

@media (min-width: 768px) {
  .eh-gallery-react__main {
    height: 450px;
  }
}

.eh-gallery-react__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eh-gallery-react__actions {
  position: absolute;
  top: var(--y-space-m);
  left: var(--y-space-m);
  display: flex;
  gap: var(--y-space-s);
  z-index: 5;
}

.eh-gallery-react__category {
  position: absolute;
  top: var(--y-space-m);
  right: var(--y-space-m);
  background: var(--y-color-accent);
  color: var(--y-color-white);
  border-radius: var(--y-radius-m);
  padding: var(--y-space-xs) var(--y-space-m);
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-semibold);
  z-index: 5;
}

.eh-gallery-react__counter {
  position: absolute;
  bottom: var(--y-space-m);
  left: var(--y-space-m);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: var(--y-radius-m);
  padding: var(--y-space-xs) var(--y-space-m);
  font-size: var(--y-font-s);
  z-index: 5;
}

.eh-gallery-react__thumbs {
  display: flex;
  gap: var(--y-space-s);
  overflow-x: auto;
  padding: var(--y-space-s) 0;
  margin-top: var(--y-space-s);
  -webkit-overflow-scrolling: touch;
}

.eh-gallery-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  border-radius: var(--y-radius-xl);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--y-transition-fast), border-color var(--y-transition-fast), box-shadow var(--y-transition-fast);
  background: none;
}

@media (min-width: 768px) {
  .eh-gallery-thumb {
    width: 112px;
    height: 80px;
  }
}

.eh-gallery-thumb:hover,
.eh-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--y-color-primary);
  box-shadow: var(--y-shadow-s);
}

.eh-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eh-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--y-space-l);
  margin-bottom: var(--y-space-xxl);
}

.eh-detail-title {
  margin-bottom: var(--y-space-s);
}

.eh-detail-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y-space-xl);
  font-size: var(--y-font-s);
}

.eh-detail-submeta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--y-space-xs);
  flex-wrap: wrap;
}

.eh-detail-submeta .eh-attr-label {
  font-weight: 600;
  color: var(--y-color-text, #1e293b);
}

.eh-detail-submeta .eh-attr-value {
  color: inherit;
}

.eh-lucide-accent {
  color: var(--y-color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.eh-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--y-space-s);
  background: #f5f0e8;
  padding: var(--y-space-s) var(--y-space-l);
  border-radius: var(--y-radius-xl);
}

.eh-rating-pill__val {
  font-size: var(--y-font-xl);
  font-weight: var(--y-weight-bold);
}

.eh-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--y-space-m);
}

@media (min-width: 768px) {
  .eh-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.eh-feature-tile {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
  padding: var(--y-space-m);
  background: #f5f0e8;
  border-radius: var(--y-radius-xl);
  transition: background var(--y-transition-fast);
}

.eh-feature-tile:hover {
  background: #efe8d8;
}

.eh-feature-tile__icon {
  width: 40px;
  height: 40px;
  background: var(--y-color-white);
  border-radius: var(--y-radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--y-color-primary);
}

.eh-feature-tile__icon svg {
  width: 20px;
  height: 20px;
}

.eh-feature-tile__label {
  font-size: var(--y-font-s);
}

.eh-policies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y-space-m);
}

@media (min-width: 768px) {
  .eh-policies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.eh-policy-row {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  font-size: var(--y-font-s);
  color: var(--y-color-text-muted);
}

.eh-policy-row__icon {
  width: 16px;
  height: 16px;
  color: #16a34a;
  flex-shrink: 0;
}

.eh-availability-card {
  background: linear-gradient(to left, #f5f0e8, #faf8f5);
}

.eh-availability-card__head {
  display: flex;
  align-items: center;
  gap: var(--y-space-m);
  margin-bottom: var(--y-space-l);
}

.eh-availability-card__head svg {
  width: 20px;
  height: 20px;
  color: var(--y-color-primary);
}

.eh-availability-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y-space-m);
}

@media (min-width: 768px) {
  .eh-availability-slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.eh-availability-slot {
  background: var(--y-color-white);
  border-radius: var(--y-radius-xl);
  padding: var(--y-space-m);
  text-align: center;
}

.eh-booking-card__price {
  text-align: center;
  padding-bottom: var(--y-space-l);
  margin-bottom: var(--y-space-l);
  border-bottom: 1px solid var(--y-color-border);
}

.eh-sidebar-checks {
  list-style: none;
  margin: 0 0 var(--y-space-xl);
  padding: 0;
}

.eh-sidebar-checks li {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  font-size: var(--y-font-s);
  margin-bottom: var(--y-space-m);
}

.eh-sidebar-checks li:last-child {
  margin-bottom: 0;
}

.eh-sidebar-checks svg {
  width: 16px;
  height: 16px;
  color: #16a34a;
  flex-shrink: 0;
}

.eh-fee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--y-space-l);
}

.eh-fee-badge {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
}

.eh-fee-badge--dep {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.eh-fee-badge--ins {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.eh-fee-badge--lf {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.eh-rental-box {
  margin-bottom: var(--y-space-m);
}

.eh-rental-box__title {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  font-size: var(--y-font-m);
  font-weight: var(--y-weight-bold);
  margin-bottom: var(--y-space-m);
}

.eh-rental-box__title svg {
  width: 20px;
  height: 20px;
}

.date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--y-space-m);
  margin-bottom: var(--y-space-m);
}

@media (max-width: 480px) {
  .date-grid {
    grid-template-columns: 1fr;
  }
}

.rental-box .form-group label {
  display: block;
  margin-bottom: var(--y-space-xs);
  font-size: var(--y-font-s);
}

.rental-box .form-input {
  width: 100%;
  padding: var(--y-space-s) var(--y-space-m);
  border: 1px solid var(--y-color-border);
  border-radius: var(--y-radius-m);
  font-size: var(--y-font-s);
}

.eh-rental-summary .rental-summary {
  background: var(--y-color-bg-subtle);
  border-radius: var(--y-radius-m);
  padding: var(--y-space-m);
  margin-bottom: var(--y-space-m);
  font-size: var(--y-font-s);
}

.eh-rental-summary .rental-summary .row {
  display: flex;
  justify-content: space-between;
  gap: var(--y-space-m);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--y-color-border);
}

.eh-rental-summary .rental-summary .row:last-child {
  border-bottom: none;
}

.eh-rental-summary .total-row {
  font-weight: var(--y-weight-bold);
  margin-top: var(--y-space-xs);
}

.eh-booking-note {
  margin-top: var(--y-space-l);
}

.eh-similar {
  margin-top: var(--y-space-5xl);
}

.eh-back-shop {
  margin-top: var(--y-space-3xl);
  text-align: center;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-2 {
  gap: var(--y-space-s);
}