/* layout.css - الحل النهائي */
.site-content{
  position:relative;
  z-index:5;
  margin-top:100vh; /* نحافظ على هذا لتغطية الهيرو */
  background:#fff;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -18px 40px rgba(2,6,23,.16);
  padding-bottom: 0;
}

/* إضافة عنصر وهمي بعد المحتوى لضمان المسافة */
.site-content::after{
  content: '';
  display: block;
  clear: both;
}

/* تعديل body - لا نستخدم flex */
body{
  margin:0;
  background:#fff; /* ضمان خلفية بيضاء */
  min-height: 100vh;
}

/* تعديل hero - يبقى ثابت */
.hero{
  position:fixed;
  inset:0;
  height:100vh;
  background:url("https://placehold.co/1600x900/2c3e66/white?text=Hero+Luxury+Suite") center/cover no-repeat;
  z-index:0;
}

/* الفوتر - يبقى طبيعي */
.site-footer{
  position: relative;
  z-index: 20;
  background:#0b1220;
  color:#e5e7eb;
  padding:54px 0 26px;
  margin-top: 0;
  clear: both;
  width: 100%;
}

/* إضافة مساحة أسفل آخر قسم */
.section:last-child{
  margin-bottom: 0;
  padding-bottom: 72px;
}

/* الفئات المساعدة */
.mobile-only{
  display:none !important;
}

.desktop-only{
  display:inherit;
}

@media (max-width: 680px){
  .desktop-only{
    display:none !important;
  }
  .mobile-only{
    display:block !important;
  }
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:110px;
  background:rgba(2,6,23,.88);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  display:none;
  z-index:120;
  font-size:13px;
  white-space: nowrap;
}

/* Buttons */
.btn{
  border:1px solid transparent;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary{
  background:linear-gradient(135deg, var(--primary), #2563eb);
  color:#fff;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14,165,233,.3);
}

.btn-outline{
  background:#fff;
  border-color: var(--line);
  color:var(--text);
}

.btn-outline:hover{
  border-color:rgba(14,165,233,.35);
  background: rgba(14,165,233,.05);
}

.btn-chip{
  background:#fff;
  border-color: var(--line);
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
}

.btn-block{
  width:100%;
  justify-content: center;
}

.icon-person::before{
  content:"👤";
}

/* التقويم المحمول */
.calendar-mobile{
  margin-top:18px;
}

.cal-mobile-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.cal-mobile-title{
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}

.cal-mobile-grid{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
}

.cal-m-row{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  border-bottom:1px solid var(--line);
}

.cal-m-row:last-child{
  border-bottom:none;
}

.cal-m-cell{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  font-size:12px;
}

.cal-m-cell:last-child{
  border-right:none;
}

.cal-m-date{
  color:var(--muted);
  font-weight:600;
  background:#fafafa;
}

.cal-m-suitehead{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  color:var(--text);
  font-weight:700;
  background:#fff;
}

.cal-m-price.avail{
  color:#16a34a;
  font-weight:800;
}

.cal-m-price.unavail{
  background:#fee2e2;
  color:#b91c1c;
  font-weight:700;
}

.cal-m-price.selected{
  background:rgba(34,197,94,.16) !important;
}

.cal-m-price.checkout{
  background:rgba(14,165,233,.14) !important;
}

/* layout.css - إضافة إصلاح الفوتر */

/* تأكد من أن الجسم يأخذ ارتفاع كامل */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* المحتوى الرئيسي يتمدد لملء المساحة */
.site-content {
  position: relative;
  z-index: 5;
  margin-top: 100vh;
  background: #fff;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -18px 40px rgba(2, 6, 23, .16);
  flex: 1; /* هذا هو المفتاح - يجعل المحتوى يتمدد */
  padding-bottom: 0;
}

/* الفوتر يبقى في الأسفل */
.site-footer {
  position: relative;
  z-index: 20;
  background: #0b1220;
  color: #e5e7eb;
  padding: 54px 0 26px;
  margin-top: 0;
  width: 100%;
  flex-shrink: 0; /* يمنع الفوتر من الانكماش */
}

/* باقي التنسيقات كما هي */
.section {
  padding: 72px 0;
}

.section:last-child {
  margin-bottom: 0;
  padding-bottom: 72px;
}