/* =====================================================================
   Flora Hotel — design system
   Navy #002971 / Gold #C9A24B / Cream #FAF8F3 / Beige #EDE3D0
   Headings: Poppins · Body: Raleway
   Plain, hand-written CSS — no Tailwind/Sass build step, works as-is
   on any static Apache host.
   ===================================================================== */

:root {
  --navy: #002971;
  --navy-deep: #00143D;
  --gold: #C9A24B;
  --gold-light: #E4C983;
  --cream: #FAF8F3;
  --beige: #EDE3D0;
  --ink: #222222;
  --line: rgba(0, 41, 113, 0.13);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Theme Customizer (admin/theme-customizer.php) overrides these via
     a small inline <style> block injected in includes/header.php —
     see render_theme_style_block() in config/functions.php. Defaults
     below match the values above exactly, so nothing changes
     visually until an admin actually customizes something. */
  --bg-page: var(--cream);
  --text-main: var(--ink);
  --text-muted: #5A627A;
  --btn-bg: var(--gold);
  --btn-text: var(--navy);
  --btn-radius: 0px;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Raleway', sans-serif;
  --font-nav: 'Poppins', sans-serif;
  --header-bg: rgba(255, 255, 255, 0.96);
  --nav-text-color: #374162;
  --nav-active-color: var(--gold);
  --header-height: 78px;
  --logo-width: 160px;
  --footer-bg: var(--navy-deep);
  --footer-text-color: rgba(255, 255, 255, 0.55);
  --footer-accent-color: var(--gold);
}
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

html[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-heading { font-family: var(--font-heading); font-weight: 600; margin: 0; color: var(--navy); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

[dir="rtl"] { direction: rtl; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

.container { max-width: 1300px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container, .container-wide { padding: 0 40px; } }

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 768px) { .section { padding: 64px 0; } .section-sm { padding: 44px 0; } }

.bg-navy { background: var(--navy); }
.bg-navy-deep { background: var(--navy-deep); }
.bg-cream { background: var(--cream); }
.bg-beige { background: var(--beige); }
.bg-white { background: #fff; }
.text-white { color: #fff; }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-center { text-align: center; }

.eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; font-weight: 600;
}
.eyebrow.dark { color: var(--gold-light); }

.heading { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; }
.heading.dark { color: #fff; }
.heading-lg { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; }
.heading-sm { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }

.diamond { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; }
.diamond .line { height: 1px; width: 32px; background: rgba(201, 162, 75, 0.55); }
.diamond .dot { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.diamond .dot.outline { background: transparent; border: 1px solid var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  border: none; font-weight: 600; position: relative; overflow: hidden;
  border-radius: var(--btn-radius);
  transition: transform .2s var(--ease);
}
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
[dir="rtl"] .btn:hover svg { transform: translateX(-3px) scaleX(-1); }
[dir="rtl"] .btn svg { transform: scaleX(-1); }

.btn-gold { background: var(--btn-bg); color: var(--btn-text); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-outline:hover { background: rgba(201, 162, 75, 0.12); }
.btn-sm { padding: 10px 20px; font-size: 10.5px; }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.photo {
  position: relative; overflow: hidden; display: block; background: var(--navy);
}
.photo.ratio-4-3 { aspect-ratio: 4 / 3; }
.photo.ratio-3-4 { aspect-ratio: 3 / 4; }
.photo.ratio-16-9 { aspect-ratio: 16 / 9; }
.photo.ratio-16-10 { aspect-ratio: 16 / 10; }
.photo.ratio-1-1 { aspect-ratio: 1 / 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.photo:hover img { transform: scale(1.08); }
.photo.placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, #0A2A5E 45%, var(--navy-deep) 100%);
}
.photo.placeholder.light {
  background: linear-gradient(135deg, var(--beige) 0%, #E6D9BC 60%, var(--beige) 100%);
}
.photo.placeholder::before {
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, var(--gold) 0px, var(--gold) 1px, transparent 1px, transparent 40px);
}
.photo .photo-label {
  position: absolute; bottom: 10px; inset-inline-start: 10px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(228, 201, 131, .9);
  z-index: 2;
}
.photo .photo-corner {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; opacity: .8; color: var(--gold-light);
}

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.navbar.solid { background: var(--header-bg); backdrop-filter: blur(10px); border-color: var(--line); }
.navbar-inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .navbar-inner { padding: 0 40px; } }
.nav-logo { display: flex; align-items: center; gap: 12px; font-family: var(--font-nav); font-weight: 600; font-size: 16px; letter-spacing: .08em; color: #fff; transition: color .4s; }
.nav-logo img, .nav-logo svg { width: var(--logo-width); height: auto; flex-shrink: 0; }
.navbar.solid .nav-logo { color: var(--navy); }
.nav-links { display: none; align-items: center; gap: 28px; }
@media (min-width: 1180px) { .nav-links { display: flex; } }
.nav-links a { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.85); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .3s; }
.navbar.solid .nav-links a { color: var(--nav-text-color); }
.nav-links a.active, .nav-links a:hover { color: var(--nav-active-color); border-color: var(--nav-active-color); }
.nav-actions { display: none; align-items: center; gap: 16px; }
@media (min-width: 1180px) { .nav-actions { display: flex; } }
.nav-lang-btn { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #fff; transition: color .4s; background:none; border:none; }
.navbar.solid .nav-lang-btn { color: var(--navy); }
.nav-mobile-toggle { display: flex; background: none; border: none; color: #fff; transition: color .4s; }
.navbar.solid .nav-mobile-toggle { color: var(--navy); }
@media (min-width: 1180px) { .nav-mobile-toggle, .nav-lang-mobile { display: none; } }
.nav-mobile-panel { display: none; background: var(--navy-deep); }
.nav-mobile-panel.open { display: block; }
.nav-mobile-panel .container { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.nav-mobile-panel a { color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.nav-lang-mobile { display: flex; align-items: center; gap: 12px; }
@media (min-width:1180px){ .nav-lang-mobile { display:none; } }
.nav-lang-mobile button { background:none;border:none;color:#fff;font-size:11px;font-weight:700; }

.hero {
  position: relative; min-height: 640px; height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--navy-deep); text-align: center;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  /* Background -> Overlay -> Content: this IS the Hero section's
     background layer. When an admin sets a dedicated Hero Image
     (picture/img below), it paints on top of this and is unaffected.
     When no Hero Image is set, the admin's Background Image (if any)
     shows here instead — falling back to the original radial gradient
     when neither is set, so an unconfigured Hero is pixel-identical
     to before this system existed. */
  background-image: var(--hero-bg-image, radial-gradient(ellipse at 50% 30%, #0A2A5E 0%, var(--navy-deep) 60%, #000a24 100%));
  background-color: var(--hero-bg-color, transparent);
  background-position: var(--hero-bg-position, center center);
  background-size: var(--hero-bg-size, cover);
  background-repeat: var(--hero-bg-repeat, no-repeat);
  background-attachment: var(--hero-bg-attachment, scroll);
}
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .15; background-image: repeating-linear-gradient(110deg, var(--gold) 0px, var(--gold) 1px, transparent 1px, transparent 64px); z-index: 2; }
.hero-section .section-overlay { z-index: 3; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,10,36,.9), transparent 45%); z-index: 4; }
.hero-content { position: relative; padding: 24px; max-width: 760px; }
/* Higher specificity than the generic `[class$="-section"] .hero-content
   { z-index: 1 }` rule further down (which would otherwise sit BELOW
   hero-bg::after/section-overlay/hero-fade at z-index 2-4 above) — see
   the layer stack built in .hero-bg's comment above. */
.hero.hero-section .hero-content,
.hero.hero-section .hero-scroll { z-index: 5; }
.hero-content .eyebrow { margin-bottom: 24px; }
.hero-content p.lead { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; max-width: 560px; margin: 24px auto 40px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; color: rgba(255,255,255,.5); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,10px);} }
.hero-scroll span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } }

.card { background: #fff; border: 1px solid var(--line); }
.card-pad { padding: 28px; }

.service-card { position: relative; background: #fff; border: 1px solid var(--line); padding: 32px; overflow: hidden; }
.service-card .fill { position: absolute; inset-inline-start: 32px; top: 32px; width: 40px; height: 40px; border-radius: 999px; background: var(--navy); transform: scale(1); transition: transform .6s var(--ease); z-index: 0; }
.service-card:hover .fill { transform: scale(22); }
.service-card .service-inner { position: relative; z-index: 1; }
.service-card .service-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--navy); transition: color .3s; }
.service-card:hover .service-icon { color: #fff; }
.service-card h3 { font-size: 15px; margin-bottom: 8px; transition: color .3s; }
.service-card:hover h3 { color: #fff; }
.service-card p { font-size: 12.5px; line-height: 1.6; color: #5A627A; transition: color .3s; }
.service-card:hover p { color: rgba(255,255,255,.75); }

.dest-card { position: relative; flex-shrink: 0; width: 220px; scroll-snap-align: start; transition: transform .4s var(--ease); }
.dest-card:hover { transform: scale(1.04); }
.dest-card .overlay { position: absolute; inset-inline: 0; bottom: 0; padding: 16px; z-index: 2; }
.dest-card .overlay p { color: #fff; font-family: 'Poppins', sans-serif; font-size: 12.5px; }

.scroll-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; flex-shrink: 0; }
.carousel-controls { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.carousel-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.carousel-btn.dark { border-color: rgba(255,255,255,.25); background: transparent; color: #fff; }

/* Rooms Showcase — main image (left, ~58% desktop) + details (right).
   Was previously an inline grid-template-columns, which (being inline)
   permanently overrode the responsive .grid-2 media query at EVERY
   viewport width, including mobile — forcing a cramped 2-column split
   on phones instead of stacking, which is the actual root cause of
   the room images rendering "very small" on mobile. A real class with
   a real media query fixes this: single column (image+thumbs, then
   details, matching the existing DOM order) below 1024px, 58/42 split
   at and above it. */
.room-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .room-showcase-grid { grid-template-columns: 1.4fr 1fr; gap: 56px; } }

.room-thumbs { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.room-thumb { width: 92px; flex-shrink: 0; position: relative; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; border: none; padding: 0; display: block; }
.room-thumb.active { outline-color: var(--gold); }
.room-thumb:not(.active)::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: none; }
.room-amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.room-amenity-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.room-amenity-list .dot, .amenity-dot { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); flex-shrink: 0; }

.testimonial-quote { max-width: 560px; margin: 0 auto; }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.testimonial-dots button { height: 6px; border-radius: 999px; border: none; background: rgba(0,41,113,.2); width: 8px; transition: width .3s, background .3s; }
.testimonial-dots button.active { width: 26px; background: var(--gold); }

.form-input, .form-textarea, .form-select {
  width: 100%; border: none; border-bottom: 1px solid var(--line); padding: 12px 0;
  font-size: 14px; background: transparent; font-family: inherit; outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--gold); }
.form-textarea { resize: vertical; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: rgba(0,41,113,.5); margin-bottom: 6px; }
.form-box { background: #fff; padding: 36px; border: 1px solid var(--line); }

.alert { padding: 14px 18px; border-radius: 6px; font-size: 13.5px; margin-bottom: 20px; }
.alert-success { background: #eafaf1; color: #14532d; border: 1px solid #a7e5bb; }
.alert-error { background: #fdecea; color: #7a1a13; border: 1px solid #f5c2c0; }

/* Honeypot field — off-screen rather than display:none, since some
   bots specifically skip visibility:hidden/display:none fields. Real
   visitors never see or reach it (tabindex="-1" also skips it via
   keyboard nav). */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.footer { background: var(--footer-bg); padding: 80px 24px 32px; }
@media (min-width: 768px) { .footer { padding: 80px 40px 32px; } }
.footer-grid { max-width: 1300px; margin: 0 auto; display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h4 { color: var(--footer-accent-color); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.footer p, .footer a, .footer li { color: var(--footer-text-color); font-size: 13.5px; margin-bottom: 12px; }
.footer a:hover { color: #fff; }
.footer-bottom { text-align: center; color: rgba(255,255,255,.3); font-size: 11.5px; margin-top: 32px; }

.whatsapp-float {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: pop-in .5s var(--ease) 1s both;
}
.whatsapp-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: #25D366;
  animation: pulse-ring 2.4s ease-out infinite;
}
.whatsapp-float svg { position: relative; z-index: 1; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.scroll-top-btn {
  position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 999px; background: var(--navy); border: none;
  display: none; align-items: center; justify-content: center; color: var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.scroll-top-btn.visible { display: flex; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.js-disabled .reveal { opacity: 1; transform: none; }

.filter-pill { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 7px 14px; border: 1px solid var(--line); background: transparent; color: var(--navy); }
.filter-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;} .mt-5{margin-top:40px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;}
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 12px; }
.text-sm { font-size: 13px; } .text-xs { font-size: 11px; }

/* =====================================================================
   Homepage Section Editor (admin/homepage-editor.php) — per-section
   overrides only. Each section reads ONLY its own --{section}-*
   custom properties (set as an inline style on that section's own
   <section> tag in pages/home.php) — there is no shared/global
   variable here, so customizing one section can never affect another.
   Every var() has a fallback matching the site's original hardcoded
   default, so an unconfigured section renders exactly as before.
   ===================================================================== */

[class$="-section"] { position: relative; }
[class$="-section"] > .container,
[class$="-section"] .hero-content,
[class$="-section"] > div > .container { position: relative; z-index: 1; }

/* Restaurant's content wrapper (.grid.grid-2 — text panel + photo
   grid) isn't a .container, so it needs the same treatment explicitly
   now that .section-overlay is a direct section-level sibling (see
   pages/home.php) instead of nested only inside the inner .bg-navy
   panel — otherwise it would paint UNDER the overlay. */
.restaurant-section > .grid { position: relative; z-index: 1; }

.section-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Background Image layer (migration 014) — an independent CSS
   background-image per section, on top of/behind bg-color, fully
   optional (var(...,none) fallback = no image, unchanged from before
   these properties existed). Applied via a shared selector list so
   each section only needs one added rule instead of 5 repeated lines. */
.hero-bg,
.about-section,
.rooms-section,
.restaurant-section,
.services-section,
.gallery-section,
.discover-section,
.testimonials-section,
.cta-section,
.custom-section {
  background-repeat: no-repeat;
}
/* Hero is intentionally NOT in this list — its background-image is
   applied directly to .hero-bg (see the .hero-bg rule above), not to
   .hero-section, so it can never be hidden behind the Hero photo
   layer. See that rule's comment for the full explanation. */
.about-section { background-image: var(--about-bg-image, none); background-position: var(--about-bg-position, center center); background-size: var(--about-bg-size, cover); background-repeat: var(--about-bg-repeat, no-repeat); background-attachment: var(--about-bg-attachment, scroll); }
.rooms-section { background-image: var(--rooms-bg-image, none); background-position: var(--rooms-bg-position, center center); background-size: var(--rooms-bg-size, cover); background-repeat: var(--rooms-bg-repeat, no-repeat); background-attachment: var(--rooms-bg-attachment, scroll); }
.restaurant-section { background-image: var(--restaurant-bg-image, none); background-position: var(--restaurant-bg-position, center center); background-size: var(--restaurant-bg-size, cover); background-repeat: var(--restaurant-bg-repeat, no-repeat); background-attachment: var(--restaurant-bg-attachment, scroll); }
.services-section { background-image: var(--services-bg-image, none); background-position: var(--services-bg-position, center center); background-size: var(--services-bg-size, cover); background-repeat: var(--services-bg-repeat, no-repeat); background-attachment: var(--services-bg-attachment, scroll); }
.gallery-section { background-image: var(--gallery-bg-image, none); background-position: var(--gallery-bg-position, center center); background-size: var(--gallery-bg-size, cover); background-repeat: var(--gallery-bg-repeat, no-repeat); background-attachment: var(--gallery-bg-attachment, scroll); }
.discover-section { background-image: var(--discover-bg-image, none); background-position: var(--discover-bg-position, center center); background-size: var(--discover-bg-size, cover); background-repeat: var(--discover-bg-repeat, no-repeat); background-attachment: var(--discover-bg-attachment, scroll); }
.testimonials-section { background-image: var(--testimonials-bg-image, none); background-position: var(--testimonials-bg-position, center center); background-size: var(--testimonials-bg-size, cover); background-repeat: var(--testimonials-bg-repeat, no-repeat); background-attachment: var(--testimonials-bg-attachment, scroll); }
.cta-section { background-image: var(--cta-bg-image, none); background-position: var(--cta-bg-position, center center); background-size: var(--cta-bg-size, cover); background-repeat: var(--cta-bg-repeat, no-repeat); background-attachment: var(--cta-bg-attachment, scroll); }
.custom-section { background-image: var(--custom-bg-image, none); background-position: var(--custom-bg-position, center center); background-size: var(--custom-bg-size, cover); background-repeat: var(--custom-bg-repeat, no-repeat); background-attachment: var(--custom-bg-attachment, scroll); }

.hero-section .section-overlay { background: var(--hero-overlay-color, transparent); opacity: var(--hero-overlay-opacity, 0%); }
.hero-section .hero-content { color: var(--hero-text-color, inherit); }
.hero-section .heading-lg { color: var(--hero-heading-color, inherit); }
.hero-section .btn-gold { background: var(--hero-btn-bg, var(--btn-bg)); color: var(--hero-btn-text, var(--btn-text)); }

.about-section { background-color: var(--about-bg-color, var(--cream)); color: var(--about-text-color, inherit); }
.about-section .section-overlay { background: var(--about-overlay-color, transparent); opacity: var(--about-overlay-opacity, 0%); }
.about-section .heading { color: var(--about-heading-color, var(--navy)); }
.about-section .btn-outline { border-color: var(--about-btn-bg, var(--gold)); color: var(--about-btn-bg, var(--gold)); }

.rooms-section { background-color: var(--rooms-bg-color, var(--navy)); color: var(--rooms-text-color, inherit); }
.rooms-section .section-overlay { background: var(--rooms-overlay-color, transparent); opacity: var(--rooms-overlay-opacity, 0%); }
.rooms-section .heading.dark { color: var(--rooms-heading-color, #fff); }
.rooms-section .btn-gold { background: var(--rooms-btn-bg, var(--btn-bg)); color: var(--rooms-btn-text, var(--btn-text)); }

/* Restaurant: background now belongs to the WHOLE section (was
   previously scoped to only the inner .bg-navy info panel — see
   pages/home.php for the matching markup change). The inner panel
   keeps its own navy "reveal" scrim below for legibility, applied ON
   TOP of this section-wide background/overlay, at 94% opacity rather
   than a fully solid color — so a Background Image set from admin
   still shows through it slightly, and shows fully in any gap in the
   photo grid on the right, while the default look is unchanged. */
.restaurant-section { background-color: var(--restaurant-bg-color, var(--cream)); color: var(--restaurant-text-color, inherit); }
.restaurant-section .section-overlay { background: var(--restaurant-overlay-color, transparent); opacity: var(--restaurant-overlay-opacity, 0%); }
.restaurant-section .bg-navy { background-color: rgba(0, 41, 113, .94); }
.restaurant-section .heading.dark { color: var(--restaurant-heading-color, #fff); }
.restaurant-section .btn-gold { background: var(--restaurant-btn-bg, var(--btn-bg)); color: var(--restaurant-btn-text, var(--btn-text)); }

.services-section { background-color: var(--services-bg-color, var(--beige)); color: var(--services-text-color, inherit); }
.services-section .section-overlay { background: var(--services-overlay-color, transparent); opacity: var(--services-overlay-opacity, 0%); }
.services-section .heading { color: var(--services-heading-color, var(--navy)); }

.gallery-section { background-color: var(--gallery-bg-color, var(--navy)); color: var(--gallery-text-color, inherit); }
.gallery-section .section-overlay { background: var(--gallery-overlay-color, transparent); opacity: var(--gallery-overlay-opacity, 0%); }
.gallery-section .heading.dark { color: var(--gallery-heading-color, #fff); }

.discover-section { background-color: var(--discover-bg-color, var(--cream)); color: var(--discover-text-color, inherit); }
.discover-section .section-overlay { background: var(--discover-overlay-color, transparent); opacity: var(--discover-overlay-opacity, 0%); }
.discover-section .heading { color: var(--discover-heading-color, var(--navy)); }
.discover-section .btn-outline { border-color: var(--discover-btn-bg, var(--gold)); color: var(--discover-btn-bg, var(--gold)); }

.testimonials-section { background-color: var(--testimonials-bg-color, var(--beige)); color: var(--testimonials-text-color, inherit); }
.testimonials-section .section-overlay { background: var(--testimonials-overlay-color, transparent); opacity: var(--testimonials-overlay-opacity, 0%); }
.testimonials-section .heading { color: var(--testimonials-heading-color, var(--navy)); }

.cta-section { background-color: var(--cta-bg-color, var(--navy-deep)); color: var(--cta-text-color, inherit); }
.cta-section .section-overlay { background: var(--cta-overlay-color, transparent); opacity: var(--cta-overlay-opacity, 0%); }
.cta-section .heading.dark { color: var(--cta-heading-color, #fff); }
.cta-section .btn-gold { background: var(--cta-btn-bg, var(--btn-bg)); color: var(--cta-btn-text, var(--btn-text)); }

/* Generic Custom Section (admin/homepage-editor.php → "Add Section")
   — image+text+button block matching the site's existing visual
   language (same as .about-section), used for any admin-added section
   that isn't one of the 9 fixed types above. */
.custom-section { background-color: var(--custom-bg-color, var(--cream)); color: var(--custom-text-color, inherit); }
.custom-section .section-overlay { background: var(--custom-overlay-color, transparent); opacity: var(--custom-overlay-opacity, 0%); }
.custom-section .heading { color: var(--custom-heading-color, var(--navy)); }
.custom-section .btn-outline { border-color: var(--custom-btn-bg, var(--gold)); color: var(--custom-btn-bg, var(--gold)); }
.custom-section.section { padding-top: var(--custom-padding, 96px); padding-bottom: var(--custom-padding, 96px); }
.custom-section .custom-section-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.custom-section--img-right .custom-section-grid > *:first-child { order: 2; }
@media (max-width: 900px) {
  .custom-section .custom-section-grid { grid-template-columns: 1fr; gap: 32px; }
  .custom-section .custom-section-grid > * { order: initial !important; }
}

/* Section spacing (Homepage Editor "padding_size"). Applies to the 7
   sections built on the standard .section class (96px default) — Hero
   uses full-viewport height and Restaurant uses a fixed split-panel
   layout, so padding_size isn't visually applicable to those two the
   same way; the field is still stored for consistency/future use. */
.about-section.section { padding-top: var(--about-padding, 96px); padding-bottom: var(--about-padding, 96px); }
.rooms-section.section { padding-top: var(--rooms-padding, 96px); padding-bottom: var(--rooms-padding, 96px); }
.services-section.section { padding-top: var(--services-padding, 96px); padding-bottom: var(--services-padding, 96px); }
.gallery-section.section { padding-top: var(--gallery-padding, 96px); padding-bottom: var(--gallery-padding, 96px); }
.discover-section.section { padding-top: var(--discover-padding, 96px); padding-bottom: var(--discover-padding, 96px); }
.testimonials-section.section { padding-top: var(--testimonials-padding, 96px); padding-bottom: var(--testimonials-padding, 96px); }
.cta-section.section { padding-top: var(--cta-padding, 96px); padding-bottom: var(--cta-padding, 96px); }
.hero:not(.hero--split) .hero-content h1 {
    color: #FFFFFF !important;
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    line-height: 1.05;
}
/* Dining / Restaurant section */
.restaurant-section,
.restaurant-section .bg-navy {
    background-color: #FFFFFF !important;
    color: #002971 !important;
}

.restaurant-section .heading,
.restaurant-section .heading.dark,
.restaurant-section h1,
.restaurant-section h2,
.restaurant-section h3,
.restaurant-section h4 {
    color: #002971 !important;
}

.restaurant-section p {
    color: #002971 !important;
}

.restaurant-section .eyebrow {
    color: #C9A24B !important;
}

.restaurant-section .btn-gold {
    background: #C9A24B !important;
    color: #002971 !important;
}
/* Clear separator between Testimonials and Footer */
.testimonials-section {
    border-bottom: 20px solid #FFFFFF;
}
/* Dining page */
.dining-page,
.dining-page main,
.dining-page .section {
    background: #FFFFFF !important;
}

.dining-page h1,
.dining-page h2,
.dining-page h3,
.dining-page h4,
.dining-page p {
    color: #002971 !important;
}
.whatsapp-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.whatsapp-label {
    color: #25D366;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.whatsapp-float {
    position: static;
}
/* ---------------------------------------------------------------------
   Hero — art-directed responsive desktop/mobile variant. Active only
   when both a desktop and a mobile Hero image are set (Homepage
   Editor); otherwise the original full-bleed dark-photo Hero above is
   completely unchanged. The two supplied images have a large light/
   white negative-space area (not a dark photo), so this variant
   positions the content INSIDE that space instead of centering it
   over the whole image, and switches text color from white to navy/
   gold since white-on-white would be invisible.
   ===================================================================== */

.hero--split .hero-bg picture { display: block; width: 100%; height: 100%; }
.hero--split .hero-bg img { object-position: center 30%; }
@media (max-width: 767px) { .hero--split .hero-bg img { object-position: center top; } }

/* Desktop/tablet positioning is grounded in the actual artwork: the
   suitcase occupies roughly the left 24% of the frame, the phone sits
   centered around 30-40% width (top of screen ~19% down), and the
   navy/gold decorative shapes only appear past ~80% width. The clean
   negative-space rectangle the content sits in is therefore
   approximately 42%-77% horizontally and the full top ~37% vertically
   — verified against the source artwork at its native resolution, not
   assumed. */
.hero-content--split {
  position: absolute;
  top: 11%;
  left: 44%;
  width: 34%;
  max-width: 460px;
  min-width: 280px;
  margin: 0;
  padding: 0;
  text-align: left;
}
[dir="rtl"] .hero-content--split { text-align: right; }

.hero-content--split .eyebrow {
  font-size: 11px; margin-bottom: 0;
}
.hero-content--split .heading-lg {
  font-size: clamp(1.6rem, 2.15vw, 2.15rem);
  line-height: 1.28;
  font-weight: 600;
  max-width: 400px;
  margin-top: 16px;
}
.hero-content--split .heading-lg span { color: var(--navy); }
.hero-content--split .heading-lg span:last-child { color: var(--gold); }
.hero-content--split .diamond { display: none; } /* the diamond divider was designed as a centered accent for the full-bleed dark hero; the editorial split layout uses spacing/color hierarchy instead, so it's dropped here rather than left centered in a left-aligned block. */
.hero-content--split p.lead {
  color: #4A5268; font-size: 14.5px; line-height: 1.75;
  max-width: 320px; margin: 22px 0 0; text-align: inherit;
}
.hero-content--split .hero-actions {
  justify-content: flex-start; margin-top: 32px;
}

/* Mobile: verified against the portrait artwork directly — the top
   ~30% of the frame (roughly the top 576px of 1920) is clean across
   the FULL width before the suitcase enters on the left; the phone
   doesn't appear until further down still. A centered top band is the
   natural fit for this composition, not a scaled-down copy of the
   desktop side-column layout. */
@media (max-width: 767px) {
  .hero-content--split {
    top: 5%; left: 6%; right: 6%; width: auto; max-width: none;
    text-align: center;
  }
  .hero-content--split .eyebrow { font-size: 10px; }
  .hero-content--split .heading-lg {
    font-size: clamp(1.3rem, 5.6vw, 1.65rem); line-height: 1.25;
    max-width: 320px; margin: 12px auto 0;
  }
  .hero-content--split p.lead {
    font-size: 13px; line-height: 1.7; max-width: 280px; margin: 16px auto 0;
  }
  .hero-content--split .hero-actions {
    justify-content: center; flex-wrap: wrap; margin-top: 24px; row-gap: 12px;
  }
}

/* Very narrow phones (320-360px) — tighten side margins slightly
   further and drop the heading a touch more so two-word CTA buttons
   have room to sit side by side before wrapping. */
@media (max-width: 359px) {
  .hero-content--split { left: 4%; right: 4%; }
  .hero-content--split .heading-lg { font-size: 1.25rem; }
}

/* The floating "scroll" hint sits low in the frame where the supplied
   images show hands/phone/suitcase (unpredictable backdrop for either
   a light or dark indicator) — hidden for this variant rather than
   guessing a color that might clash. */
.hero--split .hero-scroll { display: none; }
/* =========================================================
   FLORA HERO — FINAL ENGLISH + ARABIC
   ========================================================= */

@media (min-width: 769px) {

    /* =====================================================
       MAIN HERO CONTENT
       ===================================================== */

    .hero-content--split {
        position: absolute !important;

        /* Vertical position */
        top: 11% !important;

        /* Size of the whole content block */
        width: 34% !important;
        max-width: 500px !important;
        min-width: 280px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       ENGLISH
       Move the COMPLETE content slightly to the RIGHT
       ===================================================== */

    html:not([dir="rtl"]) .hero-content--split {
        left: 42% !important;
        right: auto !important;
        text-align: left !important;
    }


    /* English heading */
    html:not([dir="rtl"]) .hero-content--split h1 {
        font-size: clamp(40px, 3.4vw, 54px) !important;
        line-height: 1.15 !important;
        margin-bottom: 18px !important;
    }


    /* English paragraph */
    html:not([dir="rtl"]) .hero-content--split p {
        font-size: 17px !important;
        line-height: 1.75 !important;
    }


    /* English buttons — stacked */
    html:not([dir="rtl"]) .hero-content--split .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-top: 22px !important;

        /* Slightly to the right */
        transform: translateX(15px) !important;
    }


    /* =====================================================
       ARABIC
       Move the COMPLETE content slightly to the LEFT
       ===================================================== */

    [dir="rtl"] .hero-content--split {
        left: 33% !important;
        right: auto !important;

        width: 34% !important;
        max-width: 500px !important;

        text-align: right !important;
    }


    /* Arabic heading */
    [dir="rtl"] .hero-content--split h1 {
        font-size: clamp(40px, 3.4vw, 54px) !important;
        line-height: 1.2 !important;
        margin-bottom: 18px !important;
    }


    /* Arabic paragraph */
    [dir="rtl"] .hero-content--split p {
        font-size: 17px !important;
        line-height: 1.75 !important;
    }


    /* Arabic buttons — stacked vertically */
    [dir="rtl"] .hero-content--split .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-top: 22px !important;

        transform: none !important;
    }


    /* =====================================================
       BUTTONS
       Same size for English + Arabic
       ===================================================== */

    .hero-content--split .hero-actions .btn {
        width: 205px !important;
        min-width: 205px !important;
        height: 48px !important;

        font-size: 13px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   MOBILE
   Don't interfere with the existing mobile layout
   ========================================================= */

@media (max-width: 768px) {

    .hero-content--split {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    [dir="rtl"] .hero-content--split {
        left: auto !important;
        right: auto !important;
    }


    .hero-content--split .hero-actions {
        transform: none !important;
    }

}
@media (max-width: 768px) {

  .hero-content--split {
    position: absolute !important;
    top: 12% !important;
    right: 4% !important;
    left: auto !important;

    width: 52% !important;
    max-width: 240px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;

    z-index: 50 !important;
  }

  /* =========================
     ENGLISH — RIGHT A LITTLE
     ========================= */

  html[lang="en"] .hero-content--split {
    direction: ltr !important;
    text-align: left !important;

    margin-right: -12px !important;
  }

  html[lang="en"] .hero-content--split h1,
  html[lang="en"] .hero-content--split h2,
  html[lang="en"] .hero-content--split p {
    direction: ltr !important;
    text-align: left !important;
  }

  html[lang="en"] .hero-content--split .hero-actions {
    direction: ltr !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }


  /* =========================
     ARABIC — LEFT A LITTLE
     ========================= */

  html[lang="ar"] .hero-content--split {
    direction: rtl !important;
    text-align: right !important;

    right: 7% !important;
  }

  html[lang="ar"] .hero-content--split h1,
  html[lang="ar"] .hero-content--split h2,
  html[lang="ar"] .hero-content--split p {
    direction: rtl !important;
    text-align: right !important;
  }

  html[lang="ar"] .hero-content--split .hero-actions {
    direction: rtl !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }


  /* =========================
     TEXT
     ========================= */

  .hero-content--split h1 {
    font-size: 25px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px 0 !important;
  }

  .hero-content--split h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
  }

  .hero-content--split p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
  }


  /* =========================
     BUTTONS
     ========================= */

  .hero-content--split .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 6px !important;
    margin-top: 7px !important;
    width: 100% !important;
  }

  .hero-content--split .hero-actions a,
  .hero-content--split .hero-actions button {
    width: fit-content !important;
    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1.2 !important;

    padding: 7px 12px !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {

  /* العربي: نخلي الـ paragraph على سطرين */
  html[lang="ar"] .hero-content--split p {
    max-width: 180px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }

  /* الإنجليزي: يتحرك يمين أكثر */
  html[lang="en"] .hero-content--split {
    margin-right: -28px !important;
  }

  /* الإنجليزي: النص الطويل على سطرين */
  html[lang="en"] .hero-content--split p {
    max-width: 190px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
}
/* Mobile navbar spacing */
@media (max-width: 768px) {
    main {
        padding-top: 80px;
    }

    /* Keep homepage unchanged */
    .home main,
    body.home main {
        padding-top: 0;
    }
}
@media (max-width: 768px) {
    .hero-content--split .eyebrow {
        font-size: 7px !important;
    }
}
@media (min-width: 769px) {
    html:not([dir="rtl"]) .hero-content--split p {
        font-size: 11px !important;
        line-height: 1.75 !important;
    }
}