:root{
  --blue:#3b82f6;
  --blue-50:#eff6ff;
  --border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;

  --available:#d1fae5;
  --booked:#fee2e2;
  --past:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial}
.bg{background:linear-gradient(180deg,var(--blue-50),#fff);min-height:100vh;color:var(--text)}
a{color:inherit;text-decoration:none}

.auth-wrap{max-width:420px;margin:0 auto;padding:28px}
.brand{text-align:center;margin-top:18px}
.logo{width:84px;height:84px;object-fit:cover}
.brand h1{margin:10px 0 0;font-size:28px}
.brand p{margin:6px 0 18px;color:var(--muted);font-size:14px}

.card{
  background:#fff;border:1px solid var(--border);
  border-radius:18px;padding:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
label{display:block;font-weight:700;margin-bottom:8px}
input,select{
  width:100%;padding:12px 12px;border:1px solid var(--border);
  border-radius:12px;font-size:15px;outline:none;
}
input:focus,select:focus{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
button{
  width:100%;margin-top:12px;padding:12px 14px;border:0;border-radius:12px;
  background:var(--blue);color:#fff;font-weight:800;font-size:15px;cursor:pointer;
}
button:hover{filter:brightness(.97)}
.msg{margin-top:10px;color:#ef4444;font-weight:700}

.container{max-width:1100px;margin:0 auto;padding:18px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px 14px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.topbar .left{display:flex;align-items:center;gap:10px}
.topbar .left img{width:44px;height:44px}
.topbar h2{margin:0;font-size:18px}
.topbar .right a{
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;font-weight:800;
}

.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:960px){ .grid{grid-template-columns:1.2fr .8fr} }

.box{
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.calendar-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.calendar-head .nav{display:flex;gap:8px}
.calendar-head .nav button{width:auto;margin:0;padding:8px 10px;border-radius:12px}
.hint{color:var(--muted);font-size:13px;margin:6px 0 12px}

.cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
}
.dow{font-weight:800;color:var(--muted);text-align:center;font-size:12px;padding:6px 0}
.day{
  border:1px solid var(--border);border-radius:14px;min-height:74px;padding:8px;
  display:flex;flex-direction:column;gap:6px;cursor:pointer;background:#fff;
}
.day.disabled{cursor:not-allowed;background:var(--past);opacity:.75}
.day .num{font-weight:900}
.day .sub{font-size:12px;color:var(--muted);margin-top:auto}

.day.available{background:var(--available)}
.day.booked{background:var(--booked)}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(2,6,23,.45);
  display:none;align-items:center;justify-content:center;padding:18px;z-index:50;
}
.modal{
  width:min(520px,100%);background:#fff;border-radius:18px;border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(15,23,42,.25);overflow:hidden;
}
.modal header{
  display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  background:var(--blue-50);
}
.modal header h3{margin:0;font-size:16px}
.modal header button{width:auto;margin:0;background:#fff;color:var(--text);border:1px solid var(--border)}
.modal .body{padding:12px 14px}
.shift-row{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-bottom:10px;
}
.badge{padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px}
.badge.ok{background:var(--available)}
.badge.no{background:var(--booked)}

.shift-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.shift-actions .badge{
  line-height:1;
  display:inline-flex;
  align-items:center;
  height:34px;
}

.shift-actions .book-btn{
  height:34px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--blue);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.shift-actions .book-btn:disabled{opacity:.6;cursor:not-allowed;}

.spacer{
  height: clamp(12px, 2.2vw, 24px);
}


/* تحسينات الموبايل للتقويم */
@media (max-width: 480px){

  /* تقليل حواف الحاوية العامة */
  .container{ padding: 12px; }

  /* تقليل Padding داخل الكروت */
  .box{ padding: 10px; border-radius: 16px; }

  /* تقليل مسافات الهيدر داخل التقويم */
  .calendar-head{ margin-bottom: 8px; gap: 8px; }
  .hint{ margin: 6px 0 10px; font-size: 12px; }

  /* تصغير شبكة التقويم ومسافاتها */
  .cal{ gap: 6px; }

  /* تصغير مربعات الأيام */
  .day{
    min-height: 58px;
    padding: 6px;
    border-radius: 12px;
  }

  /* تصغير رقم اليوم */
  .day .num{ font-size: 13px; }

  /* تصغير نصوص الحالة (إذا عندك نص تحت الرقم) */
  .day .sub{ font-size: 11px; }

  /* تصغير أسماء أيام الأسبوع */
  .dow{ font-size: 11px; padding: 4px 0; }

  /* تصغير أزرار السابق/التالي */
  .calendar-head .nav button{
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 13px;
  }

  /* تصغير عنوان الشهر */
  #monthTitle{ font-size: 14px; }
}

/* صورة الشاليه في الصفحة العامة */
.chalet-hero{
  padding: 0 !important;
  overflow: hidden;
}

.chalet-hero-media{
  width: 100%;
  aspect-ratio: 16 / 9;      /* نسبة جميلة */
  background: var(--blue-50);
  position: relative;
}

.chalet-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* قص ذكي بدون تمدد */
  display: block;
}

/* موبايل: خلّيها أطول شوي */
@media (max-width: 480px){
  .chalet-hero-media{
    aspect-ratio: 4 / 3;
  }
}

.chalet-hero-media{
  aspect-ratio: 21 / 9;   /* أقصر */
}

@media (max-width: 480px){
  .chalet-hero-media{
    aspect-ratio: 16 / 9; /* أقصر بالموبايل */
  }
}

.chalet-hero-media{
  aspect-ratio: 21 / 9;   /* أقصر */
}

@media (max-width: 480px){
  .chalet-hero-media{
    aspect-ratio: 16 / 9; /* أقصر بالموبايل */
  }
}

/* Fix Topbar buttons overlap on mobile */
@media (max-width: 600px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar .left{
    width: 100%;
  }

  .topbar .right{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .topbar .right a{
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 12px;
  }
}