/* ============================================================
   نظام التصميم المشترك — الدار البيضاء للشقق الفندقية
   نفس الهوية البصرية المستخدمة في index.php: أقواس معمارية،
   بلاطات زليج، ألوان رملية/بحرية/نحاسية، خط Cairo
   ============================================================ */

:root{
  --sand:#EFEAE0;
  --sand-dark:#E2DACB;
  --ink:#20241F;
  --sea:#345847;
  --sea-dark:#263F33;
  --brass:#C9A272;
  --clay:#A6503B;
  --white:#FFFFFF;
  --radius-arch: 140px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:'Cairo', sans-serif;
  font-weight:400;
  overflow-x:hidden;
}
/* عناصر النماذج لا ترث خط الصفحة تلقائياً في المتصفحات — نفرضه هنا */
button, input, select, textarea{ font-family:'Cairo', sans-serif; }

h1,h2,h3,.display{
  font-family:'Cairo', sans-serif;
  font-weight:700;
  line-height:1.25;
}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

.arch{ border-radius: var(--radius-arch) var(--radius-arch) 0 0; overflow:hidden; }
.arch-frame{
  position:relative; border:1px solid rgba(201,162,114,.5); padding:10px;
  border-radius: calc(var(--radius-arch) + 10px) calc(var(--radius-arch) + 10px) 0 0;
}

.tile-divider{
  height:26px;
  background-image: radial-gradient(circle at 50% 100%, transparent 12px, var(--sea) 13px);
  background-size: 26px 26px; background-repeat: repeat-x; background-position: bottom;
}
.tile-divider.on-dark{ background-image: radial-gradient(circle at 50% 100%, transparent 12px, var(--sand) 13px); }

/* NAV */
header{
  position:fixed; top:0; right:0; left:0; z-index:100;
  background:rgba(239,234,224,.92); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(32,36,31,.08); transition:.3s;
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.logo{ font-size:26px; color:var(--sea-dark); letter-spacing:1px; }
.logo span{ color:var(--brass); }
.nav-links{ display:flex; gap:34px; font-size:15px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; bottom:-2px; right:0; width:0; height:1px; background:var(--brass); transition:.3s; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 32px; border-radius:6px;
  background:var(--sea); color:var(--white); font-weight:700; font-size:14.5px;
  font-family:'Cairo', sans-serif; line-height:1.6;
  letter-spacing:.2px; border:1px solid var(--sea); cursor:pointer; text-align:center;
  transition:background .25s, border-color .25s, box-shadow .25s, transform .2s;
}
.btn:hover{
  background:var(--sea-dark); border-color:var(--sea-dark);
  box-shadow:0 8px 20px rgba(38,63,51,.22); transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); box-shadow:none; }
/* سهم يتقدّم عند التمرير — يوحي بالانتقال لخطوة الحجز */
.btn .arw{ display:inline-block; transition:transform .25s; font-size:15px; line-height:1; }
.btn:hover .arw{ transform:translateX(-4px); }
[dir="ltr"] .btn:hover .arw{ transform:translateX(4px); }

.btn-outline{ background:transparent; color:var(--sea); border:1px solid var(--sea); box-shadow:none; }
.btn-outline:hover{ background:var(--sea); color:var(--white); }
.menu-toggle{ display:none; font-size:26px; background:none; border:none; color:var(--sea-dark); }

/* PAGE HERO (for interior pages: about/services/offers/news) */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:160px 24px 70px;
  background: linear-gradient(180deg, rgba(38,63,51,.6), rgba(38,63,51,.8));
  background-size:cover; background-position:center;
}
.page-hero .hero-eyebrow{ color:var(--brass); letter-spacing:4px; font-size:13px; font-weight:700; margin-bottom:16px; }
.page-hero h1{ color:var(--white); font-size:clamp(32px,5vw,54px); margin-bottom:14px; }
.page-hero p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto; font-size:16px; line-height:1.8; }

/* Full hero (home page style, in case reused) */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px;
}
.hero-eyebrow{ color:var(--brass); letter-spacing:4px; font-size:13px; font-weight:700; margin-bottom:18px; }
.hero h1{ color:var(--white); font-size:clamp(38px,6vw,72px); margin-bottom:20px; }
.hero p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 34px; font-size:17px; line-height:1.9; }
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .btn-outline{ color:var(--white); border-color:rgba(255,255,255,.7); }
.hero .btn-outline:hover{ background:var(--white); color:var(--sea-dark); }

/* Section titles */
.section{ padding:100px 0 90px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.eyebrow{ color:var(--brass); font-size:13px; letter-spacing:4px; font-weight:700; margin-bottom:14px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); color:var(--sea-dark); }
.section-head p{ margin-top:16px; color:#5a5f56; line-height:1.9; font-size:15.5px; }

/* FOOTER */
footer{ background:var(--ink); color:#cfd3c8; padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer-logo{ font-size:26px; color:var(--white); margin-bottom:16px; }
.footer-logo span{ color:var(--brass); }
.footer-col h4{ color:var(--white); font-size:15px; margin-bottom:18px; font-weight:700; }
.footer-col ul li{ margin-bottom:10px; font-size:14px; color:#a9ad9f; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; text-align:center; font-size:13px; color:#8a8f82; }

@media (max-width:860px){
  .nav-links, header .btn{ display:none; }
  .menu-toggle{ display:block; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ===================== تقويم الحجز ===================== */
.bc{ background:var(--white); border:1px solid #E4E0D5; border-radius:9px; padding:9px; }
.bc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.bc-title{ font-size:12px; font-weight:800; color:var(--sea-dark); }
.bc-nav{ width:23px; height:23px; border:1px solid #E4E0D5; background:transparent; border-radius:7px;
  color:var(--sea); font-size:15px; line-height:1; cursor:pointer; transition:.2s; }
.bc-nav:hover{ background:#F7F4EE; border-color:var(--sea); }

.bc{ max-width:330px; margin-inline:auto; }
.bc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bc-dow{ font-size:9px; font-weight:700; color:#9AA096; text-align:center; padding:3px 0 5px; }
.bc-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600; border-radius:5px; }
.bc-blank{ visibility:hidden; }

.bc-day{ cursor:pointer; color:var(--ink); background:#F7F4EE; transition:background .15s, color .15s; }
.bc-day:hover{ background:var(--sea); color:#fff; }

/* غير قابل للاختيار */
.bc-off{ cursor:not-allowed; }
.bc-off:hover{ background:transparent; }

/* يوم مضى — باهت فقط، بلا شطب حتى لا يُلتبس بالمحجوز */
.bc-past{ color:#D5CFC3; background:transparent; }
.bc-past:hover{ color:#D5CFC3; }

/* يوم محجوز — مشطوب بلون التنبيه وخلفية خفيفة */
.bc-busy{ color:#B4826B; background:rgba(180,130,107,.10);
  text-decoration:line-through; text-decoration-thickness:1.5px; }
.bc-busy:hover{ color:#B4826B; background:rgba(180,130,107,.10); }

/* يوم يصلح للمغادرة فقط (الضيف السابق يغادر صباحه) */
.bc-checkout-only{ background:repeating-linear-gradient(135deg,#F7F4EE,#F7F4EE 4px,#EDE7DA 4px,#EDE7DA 8px); }

.bc-start, .bc-end{ background:var(--sea) !important; color:#fff !important; font-weight:800; }
.bc-between{ background:#E3EAE4; color:var(--sea-dark); border-radius:0; }

.bc-legend{ display:flex; gap:14px; justify-content:center; margin-top:9px;
  padding-top:8px; border-top:1px solid #F1EDE3; font-size:10px; color:#8a8f82; font-weight:600; }
.bc-legend span{ display:flex; align-items:center; gap:5px; }
.bc-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.bc-i-free{ background:#F7F4EE; border:1px solid #DCD6C7; }
.bc-i-busy{ background:rgba(180,130,107,.14); border:1px solid #C9A78F; position:relative; }
.bc-i-busy::after{ content:''; position:absolute; inset:4px 1px; border-top:1.5px solid #B4826B; }
.bc-i-past{ background:transparent; border:1px solid #E2DACB; }

.bc-loading{ text-align:center; font-size:11.5px; color:#8a8f82; padding-top:9px; font-weight:600; }

.bc-summary{ margin-top:8px; padding:8px 11px; background:#F7F4EE; border-radius:8px;
  font-size:11.5px; font-weight:700; color:var(--sea-dark); text-align:center; line-height:1.65; }
.bc-summary.empty{ color:#8a8f82; font-weight:600; }