/* Fonts are loaded via <link> tags in each HTML page — don't duplicate with @import. */

/* ══════════════════════════════════════
   MOROCCAN BERBER DESIGN SYSTEM
   ══════════════════════════════════════ */
:root {
  --green-deep: #1B3B4D; /* Deep Indigo (Desert Night) */
  --orange: #D98A2C; /* Saffron / Ochre */
  --green-leaf: #4A6B53; /* Oasis Palm */
  --sage: #4A6B53; /* alias for --green-leaf (legacy class names) */
  --terracotta: #B84A39; /* Paprika / True Terracotta */
  --sand: #E6D4BE; /* Sahara Sand */
  --clay: #753C28; /* Baked Mud-brick */
  --blue-moroccan: #2E5DB0; /* Majorelle Blue */
  --cream: #F4EFEB; /* Raw Wool / Tadelakt */
  --off-white: #FAF7F2; /* Lighter Wool */
  --border-warm: #D5C7B4;
  --border-green: #A3B5A9;
  --black: #2A2624; /* Kohl */
  --white: #fff;
  --nav-height: 72px;
  --pattern-opacity: 0.05;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--black); line-height: 1.7;
  background: var(--cream);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--green-deep); line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.section-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px;
  color: var(--terracotta); font-weight: 700; margin-bottom: 0.5rem;
}

/* ── Berber Geometric Pattern (reusable SVG background) ── */
.zellige-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z' fill='none' stroke='%23B84A39' stroke-width='1.5' opacity='0.08'/%3E%3Cpath d='M0 20L20 40L40 20' fill='none' stroke='%231B3B4D' stroke-width='1.5' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* ── Section Divider (Berber Zigzag) ── */
.section-divider {
  height: 20px; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L10 0L20 10L30 0L40 10' fill='none' stroke='%23D98A2C' stroke-width='2' opacity='0.45'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* ── Navigation ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(250,246,240,0.96); backdrop-filter: blur(12px);
  border-bottom: 2px solid transparent;
  height: var(--nav-height); transition: all 0.4s;
}
.navbar.scrolled {
  box-shadow: 0 4px 30px rgba(139,69,19,0.08);
  border-bottom-color: var(--terracotta);
  background: rgba(250,246,240,0.98);
}
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; height: 100%;
}
.nav-logo { display: flex; flex-direction: column; }
.nav-logo .logo-main {
  font-family: 'Cormorant Garamond', serif; font-size: 1.4rem;
  font-weight: 700; color: var(--green-deep); line-height: 1.1;
}
.nav-logo .logo-sub {
  font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a {
  font-size: 0.85rem; font-weight: 600; color: var(--black);
  transition: color 0.2s; position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--green-deep); }
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: var(--terracotta); transition: width 0.3s;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta {
  background: var(--orange) !important; color: var(--white) !important;
  padding: 0.5rem 1.4rem !important; border-radius: 24px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.nav-cta:hover {
  background: #b8440f !important; transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,81,26,0.3) !important;
}
.nav-cta::after { display: none !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--black); margin: 5px 0; transition: 0.3s; border-radius: 2px; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Hero ── */
.hero {
  margin-top: var(--nav-height);
  min-height: 88vh;
  min-height: 88dvh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden; padding: 4rem 1.5rem;
  background: linear-gradient(160deg, #1B3B4D 0%, #2E5DB0 35%, #753C28 70%, #B84A39 100%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z' fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.08'/%3E%3Cpath d='M0 30L30 60L60 30' fill='none' stroke='%23fff' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(to top, rgba(27,59,77,0.5), transparent);
  z-index: 1;
}
.hero > .img-placeholder {
  position: absolute; inset: 0; z-index: 0;
}
/* When hero has a real photo — strip the opaque gradient, use dark overlay instead */
.hero--photo {
  background: #111;
}
.hero--photo::before {
  background-image: none;
  background: linear-gradient(160deg, rgba(10,25,35,0.68) 0%, rgba(30,20,15,0.55) 100%);
}
.hero--photo::after {
  background: linear-gradient(to top, rgba(10,25,35,0.6), transparent);
}
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero h1 { color: var(--white); margin-bottom: 1rem; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero p {
  color: rgba(255,255,255,0.92); font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 2rem; max-width: 580px; margin-left: auto; margin-right: auto;
}
.hero-sub { min-height: 50vh; }

/* ── Buttons ── */
.btn {
  display: inline-block; padding: 0.8rem 2.2rem; border-radius: 28px;
  font-weight: 600; font-size: 0.9rem; transition: all 0.25s; cursor: pointer;
  border: none; font-family: 'Open Sans', sans-serif; letter-spacing: 0.3px;
}
.btn-primary {
  background: var(--orange); color: var(--white);
  box-shadow: 0 4px 15px rgba(212,81,26,0.25);
}
.btn-primary:hover {
  background: #b8440f; transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212,81,26,0.35);
}
.btn-outline { border: 2px solid var(--white); color: var(--white); background: transparent; }
.btn-outline:hover { background: var(--white); color: var(--green-deep); }
/* Outline on light backgrounds (cards, forms) — default outline above is for dark hero only */
.coming-later-panel .btn-outline,
.heads-up-card .btn-outline,
.booking-form .btn-outline {
  border-color: var(--green-deep);
  color: var(--green-deep);
}
.coming-later-panel .btn-outline:hover,
.heads-up-card .btn-outline:hover,
.booking-form .btn-outline:hover {
  background: var(--green-deep);
  color: var(--white);
}
.btn-green {
  background: var(--green-deep); color: var(--white);
  box-shadow: 0 4px 15px rgba(26,74,40,0.2);
}
.btn-green:hover {
  background: #15391f; transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26,74,40,0.3);
}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── Sections ── */
.section { padding: 5rem 1.5rem; }
.section-alt { background: var(--off-white); }
.container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header p { max-width: 600px; margin: 0.5rem auto 0; color: #666; }

/* ── Image Placeholder ── */
.img-placeholder {
  width: 100%; height: 100%; min-height: 200px;
  background: linear-gradient(135deg, var(--sand) 0%, var(--terracotta) 50%, var(--clay) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-radius: inherit;
}
.img-placeholder::before {
  content: attr(data-label);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,0.55); font-weight: 600;
  z-index: 1; text-align: center; padding: 0 1rem;
}
.img-placeholder::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z' fill='none' stroke='%23fff' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.img-placeholder img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; opacity: 0;
  transition: opacity 0.6s ease;
}
.img-placeholder img.loaded { opacity: 1; }
/* When the image file is missing, hide the broken-image icon so the branded
   placeholder gradient + label stays visible. Lets us ship pages before every
   photo exists. */
.img-placeholder img.img-load-error { display: none; }

/* ── Cards ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.card {
  background: var(--white); overflow: hidden;
  box-shadow: 0 2px 12px rgba(139,69,19,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 12px 12px 8px 8px;
  clip-path: polygon(0 4%, 8% 0, 92% 0, 100% 4%, 100% 100%, 0 100%);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(139,69,19,0.12); }
.card-img {
  height: 220px; position: relative; overflow: hidden;
}
/* Portrait photos on activity cards — keeps tall dunes from being cropped as a short strip. */
.card-img.card-img--portrait {
  height: 280px;
  width: 210px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.card-img .img-placeholder { border-radius: 0; }
.card-body { padding: 1.5rem; }
.card-body h3 { margin-bottom: 0.5rem; }
.card-body p { color: #666; font-size: 0.9rem; margin-bottom: 1rem; }
.card-body .btn { width: 100%; text-align: center; }

/* ── Home: three entry CTA cards ── */
.home-cta-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.home-cta-card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--border-warm); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit;
  background: var(--white); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.home-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26,74,40,0.10);
  border-color: var(--green-deep);
}
.home-cta-img { height: 200px; overflow: hidden; flex-shrink: 0; }
.home-cta-img .img-placeholder { border-radius: 0; height: 100%; }
.home-cta-body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.home-cta-body h3 { font-size: 1.1rem; margin: 0; color: var(--black); }
.home-cta-body p  { font-size: 0.88rem; color: #666; margin: 0; line-height: 1.55; }
.home-cta-link { font-size: 0.85rem; font-weight: 600; color: var(--green-deep); margin-top: auto; padding-top: 0.5rem; }
@media (max-width: 768px) {
  .home-cta-grid { grid-template-columns: 1fr; }
  .home-cta-img { height: 180px; }
}

/* ── Home: three pillars (image-backed) ── */
.pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.pillar-card {
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--border-warm); background: var(--white);
}
.pillar-img { height: 240px; overflow: hidden; flex-shrink: 0; }
.img-placeholder--pillar { border-radius: 0; height: 100%; }
.pillar-body { padding: 1.4rem; }
.pillar-body h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.pillar-body p { font-size: 0.88rem; color: #666; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-img { height: 200px; }
}

/* ── Features Grid ── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.feature-item { text-align: center; padding: 2rem 1.5rem; }
.feature-item h3 { margin: 1rem 0 0.5rem; font-size: 1.15rem; }
.feature-item p { color: #666; font-size: 0.9rem; }
.feature-icon {
  width: 100px; height: 76px; border-radius: 16px;
  background: linear-gradient(160deg, var(--white) 0%, rgba(26, 74, 40, 0.06) 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 2rem;
  border: 3px solid var(--green-deep);
  box-shadow: 0 6px 20px rgba(26, 74, 40, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.feature-icon:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(26, 74, 40, 0.18);
}
.feature-icon:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px;
}
.feature-icon-emoji, .feature-icon--tile-emoji { display: block; line-height: 1; }

/* Restaurant home: two cards on top, Same Family centered below */
.features-grid--restaurant-home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.features-grid--restaurant-home .feature-item--family {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 28rem;
  width: 100%;
}
@media (max-width: 640px) {
  .features-grid--restaurant-home { grid-template-columns: 1fr; }
}

/* ── Package Cards ── */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.package-card {
  background: var(--white); border-radius: 12px; padding: 2rem;
  border: 2px solid var(--border-warm); text-align: center;
  transition: all 0.3s; position: relative;
}
.package-card.featured { border-color: var(--orange); }
/* Pseudo-badge only shows when the card has no explicit .package-badge element. */
.package-card.featured:not(:has(.package-badge))::before {
  content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--orange), var(--terracotta));
  color: white; padding: 3px 18px; border-radius: 16px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.package-card:hover { border-color: var(--green-deep); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(26,74,40,0.08); }
.package-card.selected { border-color: var(--green-deep); background: var(--off-white); box-shadow: 0 0 0 3px rgba(26,74,40,0.12); }
.package-price {
  font-size: 2.6rem; font-weight: 700; color: var(--green-deep);
  margin: 1rem 0 0.25rem; font-family: 'Cormorant Garamond', serif;
}
.package-price span { font-size: 1rem; font-weight: 400; color: #999; }
.package-duration { color: #999; font-size: 0.88rem; margin-bottom: 1.5rem; }
.package-features { text-align: left; margin-bottom: 1.5rem; }
.package-features li { padding: 0.45rem 0; border-bottom: 1px solid var(--off-white); font-size: 0.9rem; }
.package-features li::before { content: '✓'; color: var(--green-leaf); font-weight: 700; margin-right: 0.5rem; }
.package-features li.not-included { color: #ccc; }
.package-features li.not-included::before { content: '—'; color: #ccc; }

/* ── Two Column Layout ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.two-col:last-child { margin-bottom: 0; }
.two-col p { color: #555; margin-bottom: 0.75rem; }
.two-col-img {
  height: 380px; border-radius: 12px; overflow: hidden;
  position: relative;
}
.two-col-img .img-placeholder { border-radius: 12px; }
/* Use for portrait photos so they are not squeezed into a short landscape frame. */
.two-col-img.two-col-img--portrait {
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: min(520px, 72vh);
  max-width: min(100%, 400px);
  margin-left: auto;
  margin-right: auto;
}

/* ── Photo Grid ── */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.photo-item {
  aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  transition: transform 0.3s; cursor: pointer; position: relative;
}
.photo-item .img-placeholder { border-radius: 10px; }
.photo-item:hover { transform: scale(1.03); }
.photo-item.tall { grid-row: span 2; aspect-ratio: auto; min-height: 400px; }

/* Gallery page: Polaroid-style frames + hover title from data-label */
.gallery-empty-hint {
  text-align: center; color: #666; font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 36rem; margin-left: auto; margin-right: auto;
}
body[data-page="gallery"] .photo-item {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background: #faf9f7;
  padding: 12px 12px 36px 12px;
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
body[data-page="gallery"] .photo-item .img-placeholder {
  flex: 1 1 auto;
  min-height: 200px;
  aspect-ratio: 4 / 3;
  border-radius: 1px;
  overflow: hidden;
}
body[data-page="gallery"] .photo-item.tall .img-placeholder {
  aspect-ratio: 3 / 4;
  min-height: 280px;
}
body[data-page="gallery"] .photo-item .img-placeholder::before {
  display: none;
}

/* ── Gallery Filters ── */
.gallery-filters { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn {
  padding: 0.5rem 1.25rem; border: 1.5px solid var(--border-warm); border-radius: 24px;
  background: var(--white); font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
  font-family: 'Open Sans', sans-serif;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--green-deep); color: var(--white); border-color: var(--green-deep);
}

/* ── Booking Form ── */
.booking-form { max-width: 700px; margin: 0 auto; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; color: var(--green-deep); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border-warm);
  border-radius: 8px; font-family: 'Open Sans', sans-serif; font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s; background: var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(26,74,40,0.08);
}
.checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.25rem; }
.checkbox-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.9rem; color: var(--black); cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: auto; accent-color: var(--green-deep); }
.price-summary {
  background: var(--off-white); border-radius: 12px; padding: 1.5rem;
  margin: 1.5rem 0; border: 1.5px solid var(--border-warm);
}
.price-line { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.95rem; }
.price-total {
  font-size: 1.4rem; font-weight: 700; color: var(--green-deep);
  border-top: 2px solid var(--green-deep); margin-top: 0.5rem; padding-top: 0.5rem;
  font-family: 'Cormorant Garamond', serif;
}

/* ── Restaurant: menu list ── */
.menu-section { margin-bottom: 2.5rem; }
.menu-section h3 { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--terracotta); }
.menu-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--border-warm);
}
.menu-item-desc { color: #888; font-size: 0.85rem; margin-top: 0.25rem; max-width: 70%; }
.menu-item-price { font-weight: 700; color: var(--green-deep); white-space: nowrap; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }
.order-line {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border-warm); flex-wrap: wrap;
}
.order-line input[type="number"] {
  width: 4rem; padding: 0.35rem; text-align: center;
  border-radius: 8px; border: 1.5px solid var(--border-warm);
}

.coming-later-panel {
  background: var(--off-white);
  border: 2px solid var(--border-green);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.coming-later-panel h3 { margin-bottom: 0.5rem; }
.coming-later-panel p { color: #555; font-size: 0.95rem; margin-bottom: 1rem; }
.coming-later-expanded { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-warm); }
.dine-in-banner {
  background: linear-gradient(135deg, rgba(26,74,40,0.08), rgba(212,81,26,0.08));
  border-left: 4px solid var(--orange);
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: #444;
}

/* ── Reserve: minimal visit heads-up ── */
.heads-up-wrap { max-width: 520px; margin: 0 auto; }
.heads-up-card {
  background: var(--off-white);
  border: 2px solid var(--border-green);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}
.heads-up-title { font-size: 1.35rem; margin-bottom: 0.5rem; }
.heads-up-lead { color: #555; font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.5; }
.heads-up-hours-note {
  font-size: 0.85rem; color: #555; line-height: 1.45; margin-bottom: 1.15rem;
  padding: 0.65rem 0.85rem; background: rgba(212, 81, 26, 0.08); border-radius: 8px;
}
.heads-up-reply-note {
  font-size: 0.88rem; color: #444; line-height: 1.45; margin-top: 0.85rem; margin-bottom: 0;
}
.coming-later-panel .heads-up-reply-note { margin-top: 0.75rem; }

.order-pay-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}
.order-pay-actions .btn { width: 100%; justify-content: center; text-align: center; }
.hour-chip-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-bottom: 1rem;
}
.hour-chip {
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 0.55rem 1rem; border-radius: 999px;
  border: 2px solid var(--border-warm);
  background: #fff; color: var(--green-deep); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hour-chip:hover { border-color: var(--terracotta); }
.hour-chip.is-selected {
  border-color: var(--green-deep);
  background: rgba(26, 74, 40, 0.08);
}
.hours-custom-wrap {
  max-width: 220px; margin: 0 auto 1rem; text-align: left;
}
.hours-custom-wrap label { display: block; font-size: 0.85rem; margin-bottom: 0.35rem; color: #555; }
.hours-custom-wrap input {
  width: 100%; padding: 0.5rem; border-radius: 8px; border: 1.5px solid var(--border-warm);
  font-size: 1rem;
}
.hours-summary {
  min-height: 1.5rem; font-size: 0.9rem; color: var(--green-deep); font-weight: 600;
  margin-bottom: 1.25rem;
}
.heads-up-actions {
  display: flex; flex-direction: column; gap: 0.65rem;
}
.heads-up-actions .btn { width: 100%; justify-content: center; }
.heads-up-foot {
  margin-top: 1.25rem; font-size: 0.85rem; color: #666; line-height: 1.45;
}
.heads-up-foot a { font-weight: 600; }

/* Reserve page: order online CTA — visually close to primary WhatsApp action */
.heads-up-order-cta {
  margin-top: 1.75rem;
  padding: 1.35rem 1.1rem 1.25rem;
  border-radius: 14px;
  border: 2px solid rgba(212, 81, 26, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(212, 81, 26, 0.06));
  text-align: center;
}
.heads-up-order-cta-label {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-deep);
  font-family: 'Cormorant Garamond', serif;
}
.heads-up-order-cta-btn {
  width: 100%;
  padding: 1rem 1.25rem !important;
  font-size: 1rem !important;
  box-shadow: 0 6px 22px rgba(212, 81, 26, 0.28);
}

/* ── Map ── */
.map-container { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.map-container iframe { width: 100%; height: 400px; border: none; }

/* ── CTA Banner ── */
.cta-banner {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2d5a33 40%, var(--terracotta) 100%);
  padding: 5rem 1.5rem; text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z' fill='none' stroke='%23fff' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); margin-bottom: 1rem; }
.cta-banner p { color: rgba(255,255,255,0.88); margin: 0 auto 2rem; max-width: 500px; }

/* ── Airbnb Link ── */
.airbnb-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #FF5A5F; color: white; padding: 0.75rem 1.5rem;
  border-radius: 10px; font-weight: 600; transition: background 0.2s;
}
.airbnb-link:hover { background: #e0484d; }

/* ── WhatsApp + Instagram contact links ── */
.contact-whatsapp::before { content: '💬 '; }
.contact-instagram::before { content: '📷 '; }
.whatsapp-float {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: white; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }

/* ── Content Blocks ── */
.content-block { margin-bottom: 2rem; }
.content-block h3 { margin-bottom: 0.75rem; }
.content-block p { color: #555; margin-bottom: 0.75rem; }
.content-list { margin-left: 1.5rem; list-style: disc; }
.content-list li { color: #555; margin-bottom: 0.4rem; }

/* ── Footer ── */
.site-footer {
  background: var(--black); color: rgba(255,255,255,0.7); padding: 3.5rem 1.5rem 1.5rem;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z' fill='none' stroke='%23D4511A' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem; max-width: 1200px; margin: 0 auto;
}
.site-footer h4 {
  color: var(--sand); font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  font-weight: 600; margin-bottom: 1rem;
}
.site-footer a { color: rgba(255,255,255,0.7); transition: color 0.2s; font-size: 0.9rem; }
.site-footer a:hover { color: var(--terracotta); }
.site-footer ul li { margin-bottom: 0.5rem; }
.site-footer p { font-size: 0.9rem; line-height: 1.6; }
.footer-bottom {
  max-width: 1200px; margin: 2rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 0.8rem;
}

/* ── Meal rule strip ── */
.meal-rule-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--border-warm);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}
.meal-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 0.75rem;
  gap: 0.25rem;
  border-right: 1px solid var(--border-warm);
  background: var(--cream);
  text-align: center;
}
.meal-rule:last-child { border-right: none; }
.meal-rule--full { background: var(--off-white); }
.meal-rule-time { font-size: 0.78rem; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.meal-rule-arrow { font-size: 0.75rem; color: var(--terracotta); }
.meal-rule-meals { font-size: 0.9rem; font-weight: 600; color: var(--black); }
@media (max-width: 600px) {
  .meal-rule-strip { grid-template-columns: 1fr 1fr; }
  .meal-rule:nth-child(2) { border-right: none; }
  .meal-rule:nth-child(1), .meal-rule:nth-child(2) { border-bottom: 1px solid var(--border-warm); }
  .meal-rule:nth-child(3) { border-bottom: 1px solid var(--border-warm); }
}

/* ── Nav back link ── */
.nav-back-link { font-size: 0.82rem !important; color: #999 !important; }
.nav-back-link:hover { color: var(--terracotta) !important; }

/* ── Activity Picker ── */
.activity-picker { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.activity-option {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem;
  border: 1.5px solid var(--border-warm); border-radius: 8px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.activity-option:hover { border-color: var(--terracotta); background: var(--off-white); }
.activity-option input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--terracotta); }
.activity-option input[type="checkbox"]:checked + .activity-label { color: var(--black); }
.activity-option:has(input:checked) { border-color: var(--terracotta); background: #fdf6f2; }
.activity-option--featured { border-color: var(--sage); }
.activity-option--featured:has(input:checked) { background: #f2f7f4; border-color: var(--sage); }
.activity-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.activity-label strong { font-size: 0.95rem; }
.activity-tag { color: #888; font-size: 0.8rem; }
.activity-price { color: var(--terracotta); font-weight: 600; font-size: 0.85rem; }

/* ── Card extras ── */
.card-tag { font-size: 0.78rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.card-price { font-size: 1.15rem; font-weight: 700; color: var(--terracotta); margin: 0.75rem 0; }
.card-price .price-mad { font-size: 0.85rem; font-weight: 400; color: #888; margin-left: 0.3rem; }

/* ── Price MAD badge ── */
.price-mad { font-size: 0.82rem; font-weight: 400; color: #888; margin-left: 0.3rem; }

/* ── Package badge ── */
.package-badge {
  display: inline-block; background: var(--terracotta); color: #fff;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 20px;
  margin-bottom: 0.5rem;
}
.package-badge--nomad { background: #4a6fa5; }

/* ── Nomad Month card ── */
.package-card--nomad { border-color: #4a6fa5; }
.package-card--nomad:hover { border-color: #4a6fa5; box-shadow: 0 10px 30px rgba(74,111,165,0.12); }
.btn-nomad {
  display: inline-block; padding: 0.8rem 2.2rem; border-radius: 28px;
  font-weight: 600; font-size: 0.9rem; transition: all 0.25s; cursor: pointer;
  border: none; font-family: 'Open Sans', sans-serif; letter-spacing: 0.3px;
  background: #4a6fa5; color: #fff;
  box-shadow: 0 4px 15px rgba(74,111,165,0.25);
}
.btn-nomad:hover { background: #3a5a8a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(74,111,165,0.35); }

/* ── Package grid single-column variant ── */
.package-grid--single { grid-template-columns: minmax(300px, 560px); justify-content: center; }

/* ── Feature list extra item (grayed, smaller) ── */
.package-features .feature-extra {
  color: #aaa; font-size: 0.82rem; font-style: italic;
}
.package-features .feature-extra::before { content: none; }
.package-features .feature-extra { padding-left: 1rem; }

/* ── Accommodation page entry actions ── */
.entry-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem;
}
.entry-action-card {
  background: var(--off-white); border: 1.5px solid var(--border-warm);
  border-radius: 14px; padding: 2rem;
}
.entry-action-card--primary { border-color: var(--green-deep); background: #f4f8f5; }
.entry-action-card h2 { margin-top: 0.25rem; margin-bottom: 0.75rem; }
.accom-outline {
  border: 2px solid var(--green-deep) !important;
  color: var(--green-deep) !important;
  background: transparent !important;
}
.accom-outline:hover { background: var(--green-deep) !important; color: var(--white) !important; }
@media (max-width: 768px) {
  .entry-actions { grid-template-columns: 1fr; }
}

/* ── Book page: form section labels + dividers ── */
.form-section-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--green-deep);
  margin: 1.75rem 0 0.75rem;
}
.form-divider {
  border: none; border-top: 1px solid var(--border-warm); margin: 1.75rem 0 0;
}

/* ── Nights display (inline with guests row) ── */
.nights-display {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0.75rem 1rem; background: var(--off-white);
  border: 1.5px solid var(--border-warm); border-radius: 8px;
  font-size: 0.9rem; color: #555; min-height: 48px; line-height: 1.5;
}

/* ── Package suggestion banner (book.html from packages.html) ── */
.package-suggestion-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  background: #f0f7f2; border-bottom: 2px solid var(--green-deep);
  padding: 0.85rem 2rem; font-size: 0.9rem; color: #333;
}

/* ── Day Visit strip (book.html) ── */
.day-select-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 1.5rem; padding: 1.1rem 1.5rem;
  border: 2px solid var(--border-warm); border-radius: 10px;
  background: var(--off-white); transition: border-color 0.2s;
}
.day-select-strip.selected { border-color: var(--green-deep); background: #f4f8f5; }
.day-select-strip-text { display: flex; flex-direction: column; gap: 0.2rem; }
.day-select-strip-text strong { font-size: 0.95rem; }
.day-select-strip-text span { font-size: 0.85rem; color: #888; }
.day-select-strip .btn-outline {
  border-color: var(--green-deep); color: var(--green-deep); background: transparent;
}
.day-select-strip .btn-outline:hover,
.day-select-strip.selected .btn-outline {
  background: var(--green-deep); color: var(--white);
}

/* ── Small button variant ── */
.btn-sm { padding: 0.5rem 1.4rem; font-size: 0.82rem; }

/* ── Activity added banner (book.html, from experiences page) ── */
.activity-added-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  background: #e8f4ea; border-bottom: 2px solid var(--green-deep);
  padding: 0.85rem 2rem; font-size: 0.9rem; color: var(--green-deep); font-weight: 600;
}
.activity-added-hint { font-weight: 400; color: #555; }

/* ── Info strip (meal summary / rental upsell) ── */
.info-strip {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: var(--off-white); border-radius: 8px;
  border: 1px solid var(--border-warm); font-size: 0.9rem; color: #555;
}

/* ── Activity option — just-added highlight ── */
@keyframes addedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,74,40,0.3); }
  60%  { box-shadow: 0 0 0 6px rgba(26,74,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,74,40,0); }
}
.activity-option.just-added {
  border-color: var(--green-deep) !important;
  background: #f0f7f2 !important;
  animation: addedPulse 1.2s ease-out 2;
}

/* ── Day visit accommodation strip (accommodation.html) ── */
.day-visit-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: 2rem; padding: 1.1rem 1.5rem;
  border: 2px dashed var(--border-warm); border-radius: 10px;
  background: var(--off-white);
}
.day-visit-strip strong { font-size: 0.95rem; }
.day-visit-strip span  { font-size: 0.85rem; color: #888; margin-left: 0.5rem; }
.day-visit-strip .btn-outline {
  border-color: var(--green-deep); color: var(--green-deep); background: transparent;
}
.day-visit-strip .btn-outline:hover { background: var(--green-deep); color: var(--white); }

/* ── Notification ── */
.notification {
  position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 999;
  padding: 1rem; text-align: center; font-weight: 600;
  transform: translateY(-100%); transition: transform 0.4s;
}
.notification.show { transform: translateY(0); }
.notification.success { background: #d4edda; color: #155724; }
.notification.error { background: #f8d7da; color: #721c24; }

/* ── Animations ── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.reveal {
  opacity: 0; transform: translateY(30px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0) scale(1); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-height); right: -100%; width: 280px;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    background: var(--cream);
    flex-direction: column; padding: 2rem; gap: 1.2rem;
    box-shadow: -5px 0 30px rgba(0,0,0,0.1); transition: right 0.3s;
  }
  .nav-links.open { right: 0; }
  .hero {
    min-height: 70vh;
    min-height: 70dvh;
  }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .two-col { grid-template-columns: 1fr; gap: 2rem; }
  .two-col-img { height: 260px; }
  .two-col-img.two-col-img--portrait { height: auto; max-height: none; aspect-ratio: 3 / 4; max-width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .package-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .checkbox-group { grid-template-columns: 1fr; }
  .menu-item-desc { max-width: 100%; }
  .card { clip-path: none; border-radius: 10px; }
}