/* Riverside Hotel — Classic Cream & Teal
   Global Montserrat/Cairo via includes/fonts.php
   This sheet defines the full UI + a responsive type scale.
   v: mobetypo-2
*/

/* ---------------- Font Vars (fallback if fonts.php not loaded) ---------------- */
:root{
  --font-latin: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-arabic: "Cairo", Tahoma, Arial, sans-serif;
}
html,body{ font-family: var(--font-latin); }
:lang(ar),[dir="rtl"],body.rtl{ font-family: var(--font-arabic); }

/* ---------------- Theme Variables ---------------- */
/* LIGHT (default) */
:root{
  --bg:#f5fbfa;
  --card:#ffffff;
  --text:#0f2a2b;
  --muted:#5d7a7a;
  --brand:#0da3a3;
  --acc:#9be2d9;
  --border:#e1f0ee;
  --field:#ffffff;
  --shadow:rgba(13,163,163,.12);

  /* Responsive type scale (tuned down on phones with clamp) */
  --fs-base: clamp(14px, 1.5vw + .2rem, 16px);
  --fs-small: clamp(12px, 1.1vw + .1rem, 14px);
  --fs-h1: clamp(22px, 3.6vw + .4rem, 36px);
  --fs-h2: clamp(20px, 2.8vw + .35rem, 28px);
  --fs-h3: clamp(18px, 2.2vw + .3rem, 22px);
  --fs-lead: clamp(14px, 1.5vw + .25rem, 18px);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}
/* DARK */
:root[data-theme="dark"]{
  --bg:#0e0f13; --card:#171922; --text:#e7e9ef; --muted:#a9b0c0;
  --brand:#b0892f; --acc:#e8d8a6; --border:#252a36; --field:#0b0d12; --shadow:rgba(0,0,0,.35);
}

/* ---------------- Base ---------------- */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-size: var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}
::selection{ background:rgba(13,163,163,.18) }
a{ color:var(--brand); text-decoration:none }
a:hover{ opacity:.9 }
.container{ max-width:1100px; margin:0 auto; padding:20px }
.container.narrow{ max-width:520px }
.muted{ color:var(--muted) }
.inline{ display:flex; gap:8px; align-items:center }

/* ---------------- Typography ---------------- */
h1,h2,h3,h4,h5,h6{ margin:0 0 .6em; line-height:1.25; letter-spacing:.1px }
h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold) }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold) }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-semibold) }
.lead{ font-size:var(--fs-lead); color:var(--text) }
b,strong{ font-weight:var(--fw-semibold) } /* less chunky than 800 on mobile */

/* Arabic fine-tune */
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{ letter-spacing:0 }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block; background:var(--brand); color:#0a1718;
  padding:10px 16px; border-radius:12px; font-weight:var(--fw-semibold);
  border:1px solid transparent; cursor:pointer;
  box-shadow:0 6px 16px var(--shadow);
  transition:transform .08s ease, filter .15s;
  font-family:inherit;
}
.btn:hover{ filter:brightness(1.03) }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent; border:1px solid var(--brand); color:var(--text) }
.btn.danger{ background:#ef4444; color:#fff; border-color:#ef4444 }
.btn.small{ padding:6px 10px; border-radius:10px; font-size:var(--fs-small) }

/* ---------------- Alerts ---------------- */
.alert{ padding:12px 16px; border-radius:12px; margin:10px 0; background:var(--card); border:1px solid var(--border) }
.alert.success{ border-color:#16a34a }

/* ---------------- Tables ---------------- */
.table{ width:100%; border-collapse:collapse; font-size:inherit }
.table th,.table td{ padding:10px; border-bottom:1px solid var(--border); text-align:left }

/* ---------------- Forms ---------------- */
input,select,textarea{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid var(--border); background:var(--field); color:var(--text);
  font: inherit;
}
label{ display:block; margin:8px 0; font-weight:var(--fw-medium) }
input:focus,select:focus,textarea:focus{ outline:2px solid rgba(13,163,163,.25) }

/* ---------------- Grid ---------------- */
.grid{ display:grid; gap:20px }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:820px){ .grid.two,.grid.three{ grid-template-columns:1fr } }

/* ---------------- Header / Nav ---------------- */
/* logo sizes come from header.php as CSS variables:
   --logo-h-desktop / --logo-h-mobile / --logo-pad */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .site-header{ background:rgba(14,15,19,.85) }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:var(--logo-pad); padding-bottom:var(--logo-pad) }

.brand{ display:flex; gap:12px; align-items:center }
.brand-logo img{ height:var(--logo-h-desktop); width:auto; display:block }
@media (max-width:980px){ .brand-logo img{ height:var(--logo-h-mobile) } }

/* If both variants exist, dark one shows in dark mode (header.php already sets the data-variant attributes) */
.brand-logo img[data-variant="dark"]{ display:none }
:root[data-theme="dark"] .brand-logo img[data-variant="light"]{ display:none }
:root[data-theme="dark"] .brand-logo img[data-variant="dark"]{ display:block }

.top-nav{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:flex-end }
.top-nav a{ padding:8px 10px; border-radius:8px; font-weight:var(--fw-medium) }
.top-nav a:hover{ background:rgba(13,163,163,.08) }
.top-nav .btn{ padding:8px 12px }

/* Mobile menu toggle (hamburger is hidden on desktop) */
.hamburger{ display:none !important; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:transparent }
.hamburger svg{ width:20px; height:20px }
@media (max-width:980px){
  .top-nav{ display:none !important; }
  .hamburger{ display:inline-flex !important; }
}

/* Mobile drawer */
.mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:1000 }
.mobile-overlay.open{ opacity:1; pointer-events:auto }
.mobile-nav{ position:fixed; top:0; bottom:0; right:0; width:86%; max-width:340px; background:var(--card); border-left:1px solid var(--border); transform:translateX(110%); transition:transform .25s; z-index:1001; box-shadow:0 10px 30px var(--shadow) }
html[dir="rtl"] .mobile-nav{ left:0; right:auto; border-left:0; border-right:1px solid var(--border); transform:translateX(-110%) }
.mobile-nav.open{ transform:translateX(0) }
.mobile-nav .head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; border-bottom:1px solid var(--border) }
.mobile-close{ width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:transparent }
.mobile-nav .links{ display:flex; flex-direction:column; gap:6px; padding:12px }
.mobile-nav .links a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px dashed var(--border); background:transparent; font-weight:var(--fw-medium) }
.mobile-nav .links a.active{ border-style:solid }
.mobile-nav .footer{ margin-top:auto; padding:12px; border-top:1px solid var(--border) }
body.no-scroll{ overflow:hidden }

/* ---------------- Hero Slider ---------------- */
.hero{ position:relative; height:60vh; min-height:360px }
.slider{ height:100%; position:relative; overflow:hidden; border-radius:18px }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s }
.slide.active{ opacity:1 }

/* Overlay text — smaller on phones now */
.slide .overlay{ position:absolute; inset:auto 0 0 0; padding:30px; color:#fff }
:root .slide .overlay{ background:linear-gradient(180deg,transparent,rgba(0,0,0,.25)) }
:root[data-theme="dark"] .slide .overlay{ background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)) }
.slide .overlay h2{ font-size: clamp(20px, 3.4vw + .3rem, 30px); font-weight:var(--fw-bold); margin:0 }
.slide .overlay p{ margin:6px 0 0; opacity:.95; font-size: clamp(13px, 1.2vw + .2rem, 16px) }

/* ---------------- Search Box ---------------- */
.search-box form{
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
  background:var(--card); padding:12px; border-radius:14px;
  margin-top:-30px; position:relative; z-index:5; border:1px solid var(--border)
}
.search-box label{ font-size:var(--fs-small) }
.search-box input,.search-box select{ font-size:var(--fs-base) }
.search-box .btn{ grid-column:span 1 }
@media(max-width:980px){
  .search-box form{ grid-template-columns:1fr 1fr }
  .search-box .btn{ grid-column:1/-1 }
}

/* ---------------- Cards & Rooms ---------------- */
.card{
  background:var(--card); padding:16px; border-radius:18px;
  border:1px solid var(--border); box-shadow:0 6px 16px var(--shadow)
}
.card-img{ padding-top:62%; background:#f2efe8 center/cover; border-radius:12px }
.rooms{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:980px){ .rooms{ grid-template-columns:1fr } }

/* ---------------- Room Detail ---------------- */
.room-detail{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }
.room-detail .gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.room-detail .gallery img{ width:100%; border-radius:12px }
.room-detail .amenities{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:10px 0 0 }
.room-detail .amenities li{ list-style:none; border:1px dashed var(--border); padding:6px 10px; border-radius:20px; color:var(--muted); font-size:var(--fs-small) }

/* ---------------- Feature (home text blocks) ---------------- */
/* These headings were too large on mobile — trimmed here */
.feature-split h2{ font-size: var(--fs-h2); }
.feature-split .lead{ font-size: var(--fs-lead); }
@media (max-width:480px){
  .feature-split h2{ font-size: clamp(18px, 4.2vw + .2rem, 22px); }
  .feature-split .lead{ font-size: clamp(13px, 1.3vw + .2rem, 15px); }
}

/* ---------------- Gallery (public) ---------------- */
.grid.gallery{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g-item{ position:relative; overflow:hidden; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:0 6px 16px var(--shadow) }
.g-item::before{ content:""; display:block; aspect-ratio:4/3; background:#f2efe8 }
.g-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.g-item:hover img{ transform:scale(1.04) }
@media (max-width:980px){ .grid.gallery{ grid-template-columns:1fr 1fr } }
@media (max-width:620px){ .grid.gallery{ grid-template-columns:1fr } }

/* ---------------- Footer & Admin ---------------- */
.site-footer{ border-top:1px solid var(--border); margin-top:30px; padding:20px 0; color:var(--muted); background:var(--card) }

.admin-header{ background:var(--card); border-bottom:1px solid var(--border); padding:10px 0; margin-bottom:20px }
.admin-header .container{ display:flex; gap:16px; align-items:center; justify-content:space-between }
.admin-header nav a{ margin-right:12px }
.stat{ font-size: clamp(22px, 2.4vw + .3rem, 34px); font-weight:800; margin-top:8px }

/* ---------------- Media & Map ---------------- */
.video-wrap{ max-width:960px; margin:auto }
.map-embed{ position:relative; aspect-ratio:var(--ratio, 3/2); min-height:260px; overflow:hidden; border-radius:12px; background:var(--field); border:1px dashed var(--border) }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ---------------- WhatsApp FAB ---------------- */
.wa-fab{ position:fixed; right:18px; bottom:18px; display:flex; align-items:center; gap:12px; z-index:99999; text-decoration:none }
.wa-fab::before{
  content:""; width:56px; height:56px; border-radius:50%;
  background:#25D366; box-shadow:0 10px 24px rgba(0,0,0,.25);
  display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M19.11 17.28c-.29-.16-1.7-.88-1.96-.98-.26-.1-.45-.16-.64.16-.19.32-.73.98-.9 1.18-.16.19-.33.21-.61.08-.29-.16-1.23-.45-2.35-1.44-.87-.77-1.45-1.71-1.62-2-.17-.29-.02-.45.13-.61.13-.13.29-.33.42-.5.14-.17.19-.29.29-.48.1-.19.05-.37-.02-.53-.08-.16-.64-1.54-.88-2.1-.23-.56-.47-.48-.64-.48-.16 0-.35-.02-.53-.02-.19 0-.5.07-.76.37-.26.29-1 1-.1 2.43.9 1.42 2.06 2.46 2.37 2.73.29.27 4.04 2.66 4.97 3.06.93.4 1.25.34 1.7.32.45-.03 1.7-.69 1.94-1.37.24-.69.24-1.28.18-1.37-.06-.08-.24-.16-.53-.32zM15.98 4C9.9 4 5 8.89 5 15c0 2.19.63 4.23 1.73 5.95L5 28l7.22-1.89C13.88 26.69 14.92 27 16 27c6.07 0 11-4.89 11-11S22.05 4 15.98 4zm0 20.06c-1 0-1.97-.27-2.8-.74l-.2-.12-4.17 1.09 1.11-4.07-.13-.21A8.96 8.96 0 0 1 7 15c0-5 4.01-9.06 8.98-9.06 4.96 0 8.98 4.06 8.98 9.06 0 5-4.02 9.06-8.98 9.06z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:60% 60%;
  animation: waFloat 2s ease-in-out infinite;
}
.wa-label{
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  border-radius:9999px; padding:8px 12px;
  font-weight:var(--fw-semibold); font-size:var(--fs-small);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  animation: waFloat 2s ease-in-out infinite .12s;
}
@keyframes waFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@media (max-width:480px){ .wa-fab{ right:14px; bottom:14px } .wa-label{ display:none } }
.rtl .wa-fab{ right:18px; left:auto }

/* ---------------- RTL Tweaks ---------------- */
body.rtl .site-title{ letter-spacing:.2px }
body.rtl input, body.rtl select, body.rtl textarea{ direction:rtl; text-align:right }

/* ---------------- Admin areas inherit fonts ---------------- */
.admin-topbar,.admin-sidebar,.admin-main,.card,.btn,.nav-link,.kpi,.mini-table,
.admin-header,.container,.quick,.badge{ font-family: inherit }