/* Modern CSS Reset - Cassalena Ecolodge
   Consistent cross-browser baseline styles */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* HTML and Body setup */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  height: auto;
}

body {
  font-family: var(--font-primary);
  color: var(--text);
  line-height: 1.6;
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  overflow-y: auto !important;
  overflow: visible !important;
  position: relative;
  min-height: 100vh;
}

/* No scroll utility for modals */
body.no-scroll {
  overflow: hidden;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Remove button styling */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Form elements */
fieldset {
  border: none;
}

legend {
  padding: 0;
}

/* Hidden attribute */
[hidden] {
  display: none !important;
}

/* Focus styles */
:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}/* Typography Styles - Cassalena Ecolodge
   Font styling and text treatments */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--dark);
}

h1 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
}

h3 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

h5 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}

h6 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

/* Paragraph and text */
p {
  margin-bottom: var(--space-6);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

/* Small text */
small {
  font-size: var(--fs-sm);
  color: var(--dark);
}

/* Strong and emphasis */
strong, b {
  font-weight: var(--fw-bold);
}

em, i {
  font-style: italic;
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--dark);
  text-decoration: underline;
}

/* Blockquotes */
blockquote {
  padding: var(--space-6);
  margin: var(--space-8) 0;
  border-left: 4px solid var(--primary);
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

blockquote p {
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

blockquote cite {
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--dark);
}

/* Lists */
ul, ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

/* Code and preformatted text */
code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--fs-sm);
  background-color: var(--light);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-base);
}

pre {
  background-color: var(--light);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

pre code {
  background: none;
  padding: 0;
}

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-light { font-weight: var(--fw-light); }
.font-normal { font-weight: var(--fw-normal); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold { font-weight: var(--fw-bold); }

.italic { font-style: italic; }

/* Color utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-dark { color: var(--dark); }
.text-light { color: var(--light); }
.text-white { color: var(--white); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Responsive typography */
@media (max-width: 768px) {
  h1 {
    font-size: var(--fs-4xl);
  }
  
  h2 {
    font-size: var(--fs-3xl);
  }
  
  h3 {
    font-size: var(--fs-2xl);
  }
  
  h4 {
    font-size: var(--fs-xl);
  }
  
  .lead {
    font-size: var(--fs-lg);
  }
}/* CSS Custom Properties - Cassalena Ecolodge
   Centralized color, spacing, and design tokens */

:root {
  /* Primary Color Palette */
  --primary: #8f7d75;
  --secondary: #b2a299;
  --accent: #a6958d;
  --light: #efeae3;
  --dark: #6c5e58;
  --forest: #2c5e4a;
  --forest-green: #2c5e4a;
  --sage: #7a9e7e;
  --gold: #d4b254;
  --cream: #f7f4f0;
  --text: #232323;
  --white: #ffffff;
  --black: #000000;

  /* Semantic Colors */
  --success: #28a745;
  --warning: #ffc107;
  --error: #dc3545;
  --info: #17a2b8;

  /* Typography */
  --font-primary: 'Raleway', sans-serif;
  --font-secondary: 'Cormorant Garamond', serif;
  
  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Font Sizes */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 3rem;       /* 48px */
  --fs-6xl: 3.75rem;    /* 60px */

  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* Border Radius */
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;

  /* Breakpoints (for JS use) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Icon Spacing (commonly used) */
  --icon-margin: var(--space-2); /* 8px - replaces margin-right: 5px */
  
  /* Language Flag Dimensions */
  --flag-width: 20px;
  --flag-height: 15px;
}/* Layout and Grid System - Cassalena Ecolodge
   Container, grid, and layout utilities */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
    padding: 0 var(--space-6);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Flexbox Grid System */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}

.col {
  flex: 1;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Column sizes */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive columns */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1024px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; min-width: 0; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Flexbox utilities */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.align-start { align-content: flex-start; }
.align-center { align-content: center; }
.align-end { align-content: flex-end; }
.align-between { align-content: space-between; }
.align-around { align-content: space-around; }
.align-stretch { align-content: stretch; }

/* Position utilities */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Width utilities */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* Height utilities */
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-1\/2 { height: 50%; }
.min-h-screen { min-height: 100vh; }

/* Overflow utilities */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* Responsive utilities */
@media (max-width: 767px) {
  .d-md-none { display: none; }
  .d-sm-block { display: block; }
  
  /* Force all columns to full width on mobile */
  .col,
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .d-md-block { display: block; }
  .d-md-flex { display: flex; }
  .d-sm-none { display: none; }
}/* Section Layouts - Cassalena Ecolodge
   Common section and layout patterns */

/* Section Padding */
.section-padding {
  padding: var(--space-20) 0;
}

.section-padding:first-of-type {
  padding-top: var(--space-20);
}

.section-padding:last-of-type {
  margin-bottom: var(--space-16);
}

/* Hero Sections */
.hero {
  height: 100vh;
  min-height: 700px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  text-shadow: 0 2px 15px rgba(0,0,0,0.6);
  animation: fadeInUp 1.2s ease;
}

.hero-content h1 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  color: var(--white) !important;
}

.hero-content h3 {
  font-weight: var(--fw-normal);
  margin-bottom: var(--space-8);
  font-size: var(--fs-2xl);
  color: var(--white) !important;
}

.hero-buttons {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* About Section */
.about {
  padding: var(--space-20) 0;
  position: relative;
  overflow: hidden;
}

.leaf-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  opacity: 0.1;
  background-image: url('../images/leaf-pattern.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  z-index: 0;
}

.section-intro {
  margin-bottom: var(--space-16);
}

.lead {
  font-size: var(--fs-xl);
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  color: var(--dark);
}

.features {
  position: relative;
  z-index: 1;
}

/* Cabins Section */
.cabins {
  padding: var(--space-20) 0;
  background-color: var(--light);
  position: relative;
}

.cabins .container {
  max-width: 1400px;
  width: 100%;
}

@media (min-width: 1024px) {
  .cabins .container {
    padding: 0 var(--space-8);
  }
}

.cabins .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: 0;
}

@media (min-width: 768px) {
  .cabins .row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .cabins .row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.cabins .row > [class*="col-"] {
  display: flex;
  padding: 0;
  width: auto;
  max-width: none;
  flex: none;
}

/* Section Titles */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-12);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, var(--forest-green), var(--sage));
}

/* Hero Badge */
.hero-badge {
  position: absolute;
  top: 35%;
  right: 8%;
  width: 180px;
  height: 180px;
  background-color: rgba(44, 94, 74, 0.85);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  z-index: 2;
  text-align: center;
  animation: badgeFloat 3s ease-in-out infinite !important;
}

.hero-badge h4 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-1);
  letter-spacing: 1px;
  color: var(--white) !important;
}

.hero-badge p {
  font-size: var(--fs-base);
  margin: 0;
  font-weight: var(--fw-light);
  color: var(--white) !important;
}

/* Common Section Margins */
.amenities,
.attractions,
.booking-cta,
.cabin-gallery,
.cabin-overview,
.reviews {
  margin-bottom: var(--space-16);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-badge {
    width: 150px;
    height: 150px;
    padding: var(--space-5);
  }
  
  .hero-badge h4 {
    font-size: var(--fs-xl);
  }
  
  .hero-badge p {
    font-size: var(--fs-sm);
  }
}

@media (max-width: 768px) {
  .section-padding:first-of-type {
    padding-top: var(--space-16);
  }
  
  .amenities,
  .attractions,
  .booking-cta,
  .cabin-gallery,
  .cabin-overview,
  .reviews,
  .section-padding:last-of-type {
    margin-bottom: var(--space-10);
  }
  
  .hero {
    min-height: 600px;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  
  .hero-content {
    padding: 0 var(--space-4);
  }
  
  .hero-content h1 {
    font-size: var(--fs-4xl);
  }
  
  .hero-content h3 {
    font-size: var(--fs-xl);
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: none;
    text-align: center;
    justify-content: center;
    margin-left: 0 !important;
    margin-right: 0;
  }
  
  .hero-buttons .btn i {
    margin-right: var(--space-2);
    margin-left: 0;
  }
  
  .hero-badge {
    position: relative;
    top: auto;
    right: auto;
    margin: var(--space-8) auto 0;
    width: 120px;
    height: 120px;
    animation: badgeFloat 3s ease-in-out infinite !important;
  }
  
  .hero-badge h4 {
    font-size: var(--fs-lg);
  }
  
  .hero-badge p {
    font-size: var(--fs-xs);
  }
  
  .leaf-background {
    display: none;
  }
}

/* Mobile portrait specific adjustments */
@media (max-width: 768px) and (orientation: portrait) {
  .hero {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .hero {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}/* Button Components - Cassalena Ecolodge
   All button styles consolidated */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none !important;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-base);
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--transition-base);
  user-select: none;
  white-space: nowrap;
  position: relative;
  z-index: var(--z-dropdown);
  pointer-events: auto;
}

.btn:hover {
  text-decoration: none !important;
}

.btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary button */
.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: var(--shadow-base);
}

.btn-primary:hover {
  background-color: var(--dark);
  border-color: var(--dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--white) !important;
  text-decoration: none !important;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary button */
.btn-secondary {
  background-color: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
  box-shadow: var(--shadow-base);
}

.btn-secondary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Outline button */
.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Light button */
.btn-light {
  background-color: var(--white);
  color: var(--primary);
  border-color: var(--white);
  box-shadow: var(--shadow-base);
}

.btn-light:hover {
  background-color: var(--light);
  color: var(--dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Outline light button */
.btn-outline-light {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-outline-light:hover {
  background-color: var(--white);
  color: var(--primary);
}

/* Dark button */
.btn-dark {
  background-color: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  box-shadow: var(--shadow-base);
}

.btn-dark:hover {
  background-color: var(--black);
  border-color: var(--black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Button sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-base);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--fs-xl);
  border-radius: var(--radius-xl);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Block button */
.btn-block {
  display: flex;
  width: 100%;
}

/* Button groups */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-base);
}

.btn-group .btn {
  border-radius: 0;
  margin: 0;
  border-right-width: 1px;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-right-width: 2px;
}

/* Special button styles for specific contexts */

/* Hero buttons */
.hero-btn {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* CTA buttons */
.cta-btn {
  padding: var(--space-4) var(--space-10);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
}

/* Pricing buttons */
.pricing-btn {
  padding: var(--space-4) var(--space-6);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  margin-bottom: var(--space-3);
}

/* Icon buttons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-icon i,
.btn-icon svg {
  width: 1em;
  height: 1em;
}

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Responsive button adjustments */
@media (max-width: 768px) {
  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
  }
  
  .btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-base);
  }
  
  .btn-xl {
    padding: var(--space-4) var(--space-8);
    font-size: var(--fs-lg);
  }
  
  .hero-btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--fs-base);
  }
  
  .cta-btn {
    padding: var(--space-3) var(--space-8);
    font-size: var(--fs-base);
  }
}

/* Button spacing utilities */
.btn + .btn {
  margin-left: var(--space-3);
}

.btn-stack .btn {
  margin-bottom: var(--space-3);
}

.btn-stack .btn:last-child {
  margin-bottom: 0;
}

/* WhatsApp button */
.btn-whatsapp {
  background-color: #25D366;
  color: var(--white);
  border-color: #25D366;
  box-shadow: var(--shadow-base);
}

.btn-whatsapp:hover {
  background-color: #128C7E;
  border-color: #128C7E;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}

.btn-whatsapp:focus {
  outline-color: #25D366;
}

/* Airbnb button */
.btn-airbnb {
  background-color: #FF5A5F;
  color: var(--white);
  border-color: #FF5A5F;
  box-shadow: var(--shadow-base);
}

.btn-airbnb:hover {
  background-color: #E00007;
  border-color: #E00007;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}

.btn-airbnb:focus {
  outline-color: #FF5A5F;
}

/* Ensure all buttons are clickable (override any scroll interference) */
a.btn, 
button.btn, 
.btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 999;
  cursor: pointer;
}/* Cards Component - Cassalena Ecolodge
   Card layouts and styling */

/* Basic Card */
.card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-base);
  margin-bottom: var(--space-8);
  transition: transform var(--transition-base);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card-body {
  padding: var(--space-5);
}

/* Cabin Cards */
.cabin-card {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s ease;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-base);
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.cabin-card:hover {
  transform: translateY(-15px);
  box-shadow: var(--shadow-xl);
}

.cabin-card .card-img {
  height: 280px;
  transition: transform 1s ease;
  position: relative;
}

.card-img-container {
  position: relative;
  overflow: hidden;
}

.cabin-card:hover .card-img {
  transform: scale(1.05);
}

.cabin-card .type-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background-color: var(--forest);
  color: var(--white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  z-index: 1;
}

.cabin-card .card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cabin-card h4 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-1);
  color: var(--dark);
}

.cabin-card h5 {
  color: var(--gold);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-semibold);
}

.cabin-card p {
  margin-bottom: var(--space-5);
  color: var(--text);
}

.cabin-card .btn {
  width: 100%;
  margin-top: auto;
}

/* Feature Cards */
.feature-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-base);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, var(--forest), var(--sage));
}

.feature-card .icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  background-color: var(--light);
  font-size: var(--fs-2xl);
  color: var(--forest);
}

.feature-card h4 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
  color: var(--dark);
}

.feature-card p {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  flex-grow: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .card-body {
    padding: var(--space-4);
  }
  
  .cabin-card .card-body {
    padding: var(--space-5);
  }
  
  .feature-card {
    padding: var(--space-6) var(--space-4);
  }
  
  .feature-card .icon {
    width: 60px;
    height: 60px;
    font-size: var(--fs-xl);
  }
}/* Compatibility Layer - Cassalena Ecolodge
   Ensures backward compatibility with existing HTML structure */

/* Global margin utilities that might be missing */
.mt-4 { margin-top: 1.5rem; }

/* Gallery section specific styles */
.gallery-section {
  padding: var(--space-20) 0;
  background-color: var(--light);
}

/* Page banner compatibility - styles moved to faq.css for FAQ pages */

/* Page banner styles now handled in faq.css */

/* Footer link compatibility */
.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: var(--space-3);
}

/* Gallery filter compatibility - Moved to gallery.css for proper sticky implementation */

/* Ensure proper layering */
.lightbox {
  z-index: 9999 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .page-banner {
    margin-top: 100px;
    padding: var(--space-16) 0;
  }
  
  .page-banner h1 {
    font-size: var(--fs-4xl);
  }
  
  .page-banner p {
    font-size: var(--fs-lg);
  }
}/* FAQ Accordion Component - Cassalena Ecolodge
   Accordion styles for FAQ pages */

/* FAQ Content */
.faq-content {
  padding: var(--space-16) 0;
  background-color: var(--white);
  min-height: auto;
}

.faq-content .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Override Bootstrap-style classes to ensure proper centering */
.faq-content .row {
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

.faq-content .col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-content .offset-md-2 {
  margin-left: 0 !important;
}

.faq-category {
  margin-bottom: var(--space-12);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.faq-category h2 {
  color: var(--dark);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-8);
  text-align: center;
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1px;
}

/* Removed decorative bar for cleaner look */

/* Accordion Styles */
.accordion {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

.accordion-item {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--cream);
  box-shadow: 0 2px 15px rgba(143, 125, 117, 0.15);
  overflow: hidden;
  transition: all var(--transition-base);
  border: 1px solid rgba(143, 125, 117, 0.2);
}

.accordion-item:hover {
  box-shadow: 0 8px 30px rgba(143, 125, 117, 0.15);
  transform: translateY(-2px);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  background-color: var(--cream);
  border: none;
  width: 100%;
  text-align: left;
  transition: all var(--transition-base);
  user-select: none;
  position: relative;
}

.accordion-header:hover {
  background-color: rgba(143, 125, 117, 0.1);
}

.accordion-item.active .accordion-header {
  background-color: rgba(143, 125, 117, 0.15);
}

.accordion-header h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin: 0;
  flex: 1;
  line-height: 1.3;
  font-family: 'Raleway', sans-serif;
}

.accordion-icon {
  width: 28px;
  height: 28px;
  margin-left: var(--space-3);
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: rgba(143, 125, 117, 0.1);
  transition: all var(--transition-base);
}

.accordion-icon:hover {
  background-color: rgba(143, 125, 117, 0.2);
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--primary);
  transition: transform var(--transition-base);
  border-radius: 1px;
}

.accordion-icon::before {
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion-icon::after {
  width: 2px;
  height: 18px;
  transform: translate(-50%, -50%);
}

/* Rotate icon when active */
.accordion-item.active .accordion-icon {
  background-color: var(--primary);
}

.accordion-item.active .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after {
  background-color: var(--white);
}

.accordion-item.active .accordion-icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.accordion-body {
  padding: 0 var(--space-6);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out;
  background-color: rgba(143, 125, 117, 0.08);
  opacity: 0;
}

.accordion-item.active .accordion-body {
  max-height: 2000px; /* Very large value to ensure all content is visible */
  padding: var(--space-4) var(--space-6) var(--space-6);
  opacity: 1;
}

.accordion-body p {
  color: var(--text);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  font-size: var(--fs-base);
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-body ul {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: var(--space-3);
  padding-left: 0;
}

.accordion-body li {
  color: var(--text);
  margin-bottom: var(--space-2);
  line-height: 1.5;
  position: relative;
  padding-left: var(--space-5);
}

.accordion-body li::before {
  content: '•';
  color: var(--primary);
  font-weight: bold;
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: -2px;
}

.accordion-body strong {
  color: var(--dark);
  font-weight: var(--fw-semibold);
}

/* Page Banner (used in FAQ and other pages) */
.page-banner {
  margin-top: var(--space-16) !important;
  padding: var(--space-16) 0 !important;
  background-color: var(--white) !important;
  background-image: none !important;
  text-align: center !important;
  color: var(--dark) !important;
  position: relative !important;
}

.page-banner::before {
  display: none !important;
}

.page-banner .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.page-banner h1 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
  color: var(--dark);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.5px;
}

.page-banner p {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-normal);
  color: var(--text);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* FAQ Search (if implemented) */
.faq-search {
  max-width: 600px;
  margin: 0 auto var(--space-12);
  position: relative;
}

.faq-search input {
  width: 100%;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12);
  border: 2px solid var(--light);
  border-radius: var(--radius-full);
  font-size: var(--fs-base);
  background-color: var(--white);
  transition: border-color var(--transition-base);
}

.faq-search input:focus {
  outline: none;
  border-color: var(--primary);
}

.faq-search::before {
  content: '🔍';
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-lg);
  color: var(--text);
  z-index: 1;
}

/* FAQ Statistics or Quick Links */
.faq-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-16);
  text-align: center;
}

.faq-stat {
  background-color: var(--white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  transition: transform var(--transition-base);
}

.faq-stat:hover {
  transform: translateY(-2px);
}

.faq-stat h3 {
  color: var(--primary);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

.faq-stat p {
  color: var(--text);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-banner {
    margin-top: var(--space-12);
    padding: var(--space-12) 0;
  }
  
  .page-banner .container {
    padding: 0 var(--space-3);
  }
  
  .page-banner h1 {
    font-size: var(--fs-4xl);
  }
  
  .page-banner p {
    font-size: var(--fs-xl);
  }
  
  .faq-content {
    padding: var(--space-12) 0;
  }
  
  .faq-content .container {
    padding: 0 var(--space-3);
    max-width: 100%;
  }
  
  .faq-category {
    margin-bottom: var(--space-8);
  }
  
  .accordion-header {
    padding: var(--space-4) var(--space-5);
  }
  
  .accordion-header h3 {
    font-size: var(--fs-base);
    line-height: 1.3;
  }
  
  .accordion-body {
    padding: 0 var(--space-5);
  }
  
  .accordion-item.active .accordion-body {
    padding: var(--space-3) var(--space-5) var(--space-5);
    max-height: 2000px; /* Ensure mobile content is fully visible */
  }
  
  .faq-category h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-6);
  }
  
  .accordion-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .page-banner h1 {
    font-size: var(--fs-3xl);
  }
  
  .page-banner p {
    font-size: var(--fs-lg);
  }
  
  .accordion-header {
    padding: var(--space-3) var(--space-4);
  }
  
  .accordion-header h3 {
    font-size: var(--fs-sm);
  }
  
  .accordion-icon {
    width: 22px;
    height: 22px;
  }
  
  .accordion-icon::before {
    width: 14px;
  }
  
  .accordion-icon::after {
    height: 14px;
  }
  
  .faq-category h2 {
    font-size: var(--fs-xl);
  }
}/* Footer Component - Cassalena Ecolodge
   Footer and contact information styles */

/* Footer */
.footer {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 50%, var(--accent) 100%);
  color: var(--white);
  padding: var(--space-16) 0 var(--space-8);
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
}

.footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 40px;
}

.footer .container {
  position: relative;
  z-index: 1;
}

.footer h4 {
  color: var(--white);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-5);
  position: relative;
  display: inline-block;
}

.footer h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background-color: var(--light);
  transition: width var(--transition-base);
}

.footer .col:hover h4::after {
  width: 100%;
}

.footer p {
  color: rgba(255,255,255,0.9);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

.footer strong {
  color: var(--white);
}

.footer .row {
  margin-bottom: var(--space-8);
}

/* Footer Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.footer-links li {
  margin-bottom: var(--space-3);
}

.footer-links a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
  padding-left: var(--space-4);
  display: flex;
  align-items: center;
}

.footer-links a::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--light);
  transition: transform var(--transition-base);
}

.footer-links a:hover {
  color: var(--white);
  padding-left: var(--space-5);
}

.footer-links a:hover::before {
  transform: translateX(3px);
}

/* Contact Information */
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  margin-bottom: var(--space-3);
  display: flex;
  align-items: flex-start;
}

.contact-info li i {
  margin-right: var(--space-3);
  min-width: 20px;
  color: var(--light);
}

/* Footer Logo */
.footer-logo {
  max-width: 120px;
  margin-bottom: var(--space-5);
  opacity: 0.9;
  transition: opacity var(--transition-base);
}

.footer-logo:hover {
  opacity: 1;
}

/* Social Links */
.social-links {
  margin: var(--space-8) 0;
  display: flex;
  justify-content: center;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 var(--space-3);
  background-color: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: var(--fs-xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.social-links a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.social-links a:hover {
  transform: translateY(-5px);
  background-color: var(--light);
  color: var(--dark);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.social-links a:hover::before {
  opacity: 1;
}

.social-links a i {
  transition: transform var(--transition-base);
}

.social-links a:hover i {
  transform: scale(1.2);
}

/* Newsletter Form */
.newsletter-form {
  margin-top: var(--space-5);
  position: relative;
}

.newsletter-form input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255,255,255,0.1);
  border: none;
  border-radius: var(--radius-base);
  color: var(--white);
  font-family: var(--font-primary);
}

.newsletter-form input::placeholder {
  color: rgba(255,255,255,0.6);
}

.newsletter-form button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--light);
  color: var(--dark);
  border: none;
  border-radius: 3px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-base);
}

.newsletter-form button:hover {
  background-color: var(--white);
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Copyright */
.copyright {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  position: relative;
}

.copyright::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--light), transparent);
}

.copyright p {
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  color: rgba(255,255,255,0.8);
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer {
    padding: var(--space-12) 0 var(--space-5);
  }
  
  .footer .col {
    margin-bottom: var(--space-8);
    width: 100%;
    min-width: 100%;
  }
  
  .footer .row {
    flex-direction: column;
  }
  
  .social-links a {
    width: 40px;
    height: 40px;
    margin: 0 var(--space-1);
  }
  
  .footer-brand {
    text-align: center;
  }
  
  .footer-logo {
    max-width: 170px !important;
    margin-bottom: var(--space-12) !important;
  }
  
  .footer h4 {
    text-align: center;
  }
  
  .contact-info {
    text-align: center;
  }
  
  .footer-links {
    text-align: center;
  }
  
  .footer-links a {
    justify-content: center;
  }
}/* Form Components - Cassalena Ecolodge
   Booking forms, contact forms, and form elements */

/* Booking Section */
.booking-section {
  padding: var(--space-20) 0;
  background-color: var(--light);
}

.booking-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.booking-header {
  margin-top: var(--space-16);
  text-align: center;
  margin-bottom: var(--space-10);
}

.booking-header h1 {
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.booking-header p {
  color: var(--text);
  font-size: var(--fs-lg);
  max-width: 600px;
  margin: 0 auto;
}

/* Booking Tabs */
.booking-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--secondary);
}

.booking-tab {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-base);
  font-size: var(--fs-base);
}

.booking-tab:hover {
  color: var(--primary);
}

.booking-tab.active {
  color: var(--primary);
}

.booking-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}

/* Booking Content */
.booking-content {
  display: none;
}

.booking-content.active {
  display: block;
}

/* Form Elements */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--space-3) * -1) var(--space-5);
}

.form-group {
  flex: 1;
  min-width: 250px;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-5);
}

.form-group-full {
  flex: 1;
  width: 100%;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
  color: var(--dark);
  font-size: var(--fs-sm);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #ddd;
  border-radius: var(--radius-base);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  background-color: var(--white);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(143, 125, 117, 0.1);
}

.form-control:invalid {
  border-color: var(--error);
}

.form-control:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Select styling */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: var(--space-10);
}

/* Fix for mobile dropdown positioning */
select.form-control {
  position: relative;
  z-index: 1;
  transform: none !important;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Checkbox and Radio */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin-right: var(--space-3);
  accent-color: var(--primary);
}

.form-check-label {
  margin-bottom: 0;
  cursor: pointer;
  font-size: var(--fs-sm);
}

/* Form validation */
.form-error {
  color: var(--error);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
  display: none;
}

.form-group.error .form-error {
  display: block;
}

.form-group.error .form-control {
  border-color: var(--error);
}

.form-success {
  color: var(--success);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}

/* Calendar Container */
.calendar-container {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-base);
}

/* Booking Summary */
.booking-summary {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-base);
  margin: var(--space-8) 0;
}

.booking-summary h3 {
  color: var(--dark);
  margin-bottom: var(--space-5);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid #eee;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) 0;
  margin-top: var(--space-3);
  border-top: 2px solid var(--dark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}

/* Payment Options */
.payment-options {
  margin-top: var(--space-8);
}

.payment-heading {
  margin-bottom: var(--space-4);
  color: var(--dark);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.payment-method {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #ddd;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  background-color: var(--white);
}

.payment-method:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.payment-method.selected {
  border-color: var(--primary);
  background-color: rgba(143, 125, 117, 0.1);
}

.payment-method img {
  height: 24px;
  margin-right: var(--space-3);
}

.payment-method input[type="radio"] {
  margin-right: var(--space-3);
  accent-color: var(--primary);
}

/* Book Button */
.book-btn {
  width: 100%;
  padding: var(--space-4);
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-base);
}

.book-btn:hover {
  background-color: var(--dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.book-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.book-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Direct Booking Section */
.direct-booking {
  margin-top: var(--space-10);
  text-align: center;
  padding: var(--space-6);
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}

.direct-booking-title {
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.direct-booking-text {
  margin-bottom: var(--space-5);
  color: var(--text);
}

/* Airbnb Links */
.airbnb-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

.airbnb-link {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background-color: #FF5A5F;
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-base);
}

.airbnb-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}

.airbnb-link img,
.airbnb-link svg {
  height: 24px;
  margin-right: var(--space-3);
}

/* Loading States */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.loading-overlay.show {
  display: flex;
}

.loading-content {
  background: var(--white);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-xl);
  max-width: 300px;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary);
  border-radius: var(--radius-full);
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-5);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: var(--dark);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.loading-subtext {
  color: var(--text);
  font-size: var(--fs-sm);
}

/* Success Overlay */
.success-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.success-overlay.show {
  display: flex;
}

.success-content {
  background: var(--white);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  margin: var(--space-5);
}

.success-icon {
  font-size: 60px;
  color: #28a745;
  margin-bottom: var(--space-5);
}

.success-title {
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.success-message {
  color: var(--text);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.btn-success {
  background-color: var(--primary);
  color: var(--white);
  padding: var(--space-3) var(--space-8);
  border: none;
  border-radius: var(--radius-base);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background-color var(--transition-base);
  font-weight: var(--fw-medium);
}

.btn-success:hover {
  background-color: var(--dark);
}

/* Responsive Design */
@media (max-width: 768px) {
  .booking-container {
    padding: 0 var(--space-4);
  }
  
  /* Fix dropdown positioning issues */
  .booking-section {
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  .booking-container {
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  .form-group {
    min-width: 100%;
  }
  
  .booking-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .booking-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
  }
  
  .airbnb-links {
    flex-direction: column;
    align-items: center;
  }
  
  .payment-methods {
    flex-direction: column;
  }
  
  .payment-method {
    justify-content: flex-start;
  }
  
  .booking-summary {
    padding: var(--space-5);
  }
  
  .form-row {
    margin: 0 0 var(--space-4);
  }
  
  .form-group {
    padding: 0;
  }
}

@media (max-width: 480px) {
  .booking-header {
    margin-top: var(--space-12);
  }
  
  .booking-section {
    padding: var(--space-16) 0;
  }
  
  .form-control {
    padding: var(--space-3);
    font-size: var(--fs-base);
  }
  
  /* Fix dropdown positioning on mobile */
  select.form-control {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    /* Force proper dropdown positioning */
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  
  .form-group {
    position: relative;
    transform: none !important;
    -webkit-transform: none !important;
    /* Ensure container doesn't affect dropdown */
    contain: none !important;
    isolation: auto !important;
  }
  
  /* Force all form elements to use standard positioning */
  #booking-form * {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }
  
  /* Nuclear fix for mobile select dropdowns */
  body {
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  html {
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  /* Force select elements to use native behavior */
  select {
    position: relative !important;
    z-index: 9999 !important;
  }
  
  /* Override any potential viewport issues */
  .form-group select {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
  }
  
  /* Last resort: Force native select behavior on mobile */
  @supports (-webkit-touch-callout: none) {
    select.form-control {
      -webkit-appearance: menulist !important;
      appearance: menulist !important;
      background-image: none !important;
      padding-right: var(--space-3) !important;
    }
  }
  
  /* Ultimate mobile dropdown fix */
  .form-group {
    overflow: visible !important;
    position: static !important;
  }
  
  .booking-content {
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }
  
  .booking-container {
    overflow: visible !important;
    transform: none !important;
  }
  
  /* Force viewport to not interfere */
  @media (max-width: 768px) {
    * {
      -webkit-transform: none !important;
      transform: none !important;
    }
    
    select {
      position: fixed !important;
      position: static !important;
    }
    
    /* Complete select reset for mobile */
    select.form-control {
      all: revert !important;
      width: 100% !important;
      padding: var(--space-3) var(--space-4) !important;
      border: 1px solid #ddd !important;
      border-radius: var(--radius-base) !important;
      font-size: var(--fs-base) !important;
      background-color: var(--white) !important;
    }
  }
  
  .loading-content {
    padding: var(--space-8);
    margin: var(--space-4);
  }
  
  .success-message {
    padding: var(--space-6);
    margin: var(--space-6) var(--space-4);
  }
}/* Gallery and Lightbox Components - Cassalena Ecolodge
   Photo gallery, filters, and lightbox modal */

/* Gallery Section */
.gallery-section {
  padding: var(--space-20) 0;
  background-color: var(--light);
}

.gallery-header {
  margin-top: var(--space-16);
  text-align: center;
  margin-bottom: var(--space-12);
}

.gallery-header h1 {
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.gallery-header p {
  color: var(--text);
  font-size: var(--fs-lg);
  max-width: 700px;
  margin: 0 auto;
}

/* Filter Controls */
.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-button {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-4);
  margin: var(--space-1);
  cursor: pointer;
  font-weight: var(--fw-medium);
  color: var(--text);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  font-size: var(--fs-sm);
}

.filter-button:hover {
  color: var(--primary);
  background-color: rgba(143, 125, 117, 0.1);
}

.filter-button.active {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  grid-gap: var(--space-5); /* Legacy support */
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.gallery-item {
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-base) !important;
  transition: all var(--transition-base) !important;
  position: relative !important;
  height: 0 !important;
  padding-bottom: 75% !important; /* 4:3 aspect ratio */
  cursor: pointer !important;
  background-color: var(--white) !important;
  display: block !important;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.gallery-item img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: var(--white);
  padding: var(--space-6) var(--space-3) var(--space-3);
  transform: translateY(100%);
  transition: transform var(--transition-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.gallery-item:hover .caption {
  transform: translateY(0);
}

/* Hide filtered gallery items */
.gallery-item.hidden {
  display: none !important;
}

/* Ensure gallery items are clickable */
.gallery-item {
  cursor: pointer;
  text-decoration: none;
  display: block;
}

/* Gallery item as link */
a.gallery-item {
  text-decoration: none;
  color: inherit;
}

/* Lightbox Modal */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  object-fit: contain;
}

.lightbox-caption {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  max-width: 600px;
}

/* Lightbox Controls */
.lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--white);
  font-size: var(--fs-3xl);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
  z-index: 1;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close:focus {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  font-size: var(--fs-3xl);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-nav:focus {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.lightbox-prev {
  left: var(--space-5);
}

.lightbox-next {
  right: var(--space-5);
}

/* Loading state for images */
.gallery-item.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Cabin-specific gallery styles */
.cabin-gallery {
  padding: var(--space-16) 0 !important;
  background-color: var(--white) !important;
  height: auto !important;
  display: block !important;
  align-items: initial !important;
  box-sizing: border-box !important;
}

.cabin-gallery .gallery-heading {
  text-align: center;
  margin-bottom: var(--space-12);
}

.cabin-gallery .gallery-heading h2 {
  color: var(--dark);
  margin-bottom: var(--space-4);
}

.cabin-gallery .gallery-heading p {
  color: var(--text);
  font-size: var(--fs-lg);
  max-width: 600px;
  margin: 0 auto;
}

.cabin-gallery .gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--space-6) !important;
  max-width: var(--container-lg) !important;
  margin: 0 auto !important;
  padding: 0 var(--space-4) !important;
}

.cabin-gallery .gallery-item {
  padding-bottom: 80% !important; /* Taller aspect ratio for cabin photos */
  display: block !important;
  position: relative !important;
  height: 0 !important;
}

/* Hidden gallery items (for progressive loading) */
.hidden-gallery-item {
  display: none !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  
  .cabin-gallery .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: var(--space-16) 0;
  }
  
  .gallery-header {
    margin-top: var(--space-12);
    margin-bottom: var(--space-8);
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-3);
    padding: 0 var(--space-3);
  }
  
  .cabin-gallery .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .filter-container {
    margin-bottom: var(--space-6);
    background-color: var(--light);
    padding: var(--space-4) 0;
    transition: all var(--transition-base);
  }
  
  .filter-container.sticky {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: var(--white) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
    z-index: 500 !important;
    padding: var(--space-2) var(--space-3) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 10px;
  }
  
  .filter-container.sticky .filter-button {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }
  
  .filter-spacer {
    height: 0;
    transition: height var(--transition-base);
  }
  
  .filter-spacer.active {
    height: 50px; /* Height of the compact fixed filter bar */
  }
  
  .filter-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  
  .filter-button {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    margin: 0 !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  /* Lightbox adjustments for mobile */
  .lightbox-content {
    max-width: 95%;
    max-height: 90vh;
  }
  
  .lightbox-image {
    max-height: 75vh;
  }
  
  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: var(--fs-xl);
  }
  
  .lightbox-close {
    width: 40px;
    height: 40px;
    font-size: var(--fs-xl);
    top: var(--space-3);
    right: var(--space-3);
  }
  
  .lightbox-prev {
    left: var(--space-3);
  }
  
  .lightbox-next {
    right: var(--space-3);
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
  }
  
  .filter-container {
    flex-direction: column;
    align-items: center;
  }
  
  .lightbox-caption {
    font-size: var(--fs-base);
    margin-top: var(--space-3);
  }
}/* Header Component - Cassalena Ecolodge
   Navigation and header styles */

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--primary) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.header.scrolled {
  background-color: var(--primary) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-4);
}

.logo img {
  height: 70px;
  margin: 5px 0px;
  padding: var(--space-1);
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 25px;
}

.nav-menu li {
  margin-left: var(--space-5);
}

.nav-menu a {
  color: var(--white);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: all var(--transition-base);
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
}

.nav-menu a:hover {
  opacity: 0.8;
}

.nav-menu a.active {
  color: var(--light);
  font-weight: var(--fw-semibold);
}

/* Language Switch Dropdown */
.language-switch {
  position: relative;
}

.language-switch .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
}

.language-switch .dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-switch .dropdown-toggle::after {
  content: '▼';
  margin-left: var(--space-2);
  font-size: 0.8em;
  transition: transform var(--transition-base);
}

.language-switch.active .dropdown-toggle::after {
  transform: rotate(180deg);
}

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--white);
  border-radius: var(--radius-base);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: 1001;
  min-width: 120px;
}

.language-switch.active .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-dropdown a {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  padding: var(--space-3);
  transition: all var(--transition-base);
}

.language-dropdown a:hover {
  background-color: var(--light);
}

.language-dropdown a:first-child {
  border-radius: var(--radius-base) var(--radius-base) 0 0;
}

.language-dropdown a:last-child {
  border-radius: 0 0 var(--radius-base) var(--radius-base);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  padding: var(--space-2);
  background: none;
  border: none;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--white);
  border-radius: 3px;
  transition: all var(--transition-base);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Page Spacing for Fixed Header */
.page-banner,
.hero,
.cabin-hero {
  padding-top: 80px;
}

.hero-content,
.cabin-hero-content {
  padding-top: 60px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header {
    padding: var(--space-4) 0;
  }
  
  .navbar {
    padding: 0 var(--space-4);
    align-items: center;
  }
  
  .page-banner,
  .hero,
  .cabin-hero {
    padding-top: 70px;
  }
  
  .hero-content,
  .cabin-hero-content {
    padding-top: 40px;
  }
  
  /* Mobile Navigation */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--primary);
    flex-direction: column;
    padding: 80px var(--space-5) var(--space-5);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  }
  
  .nav-menu.active {
    right: 0;
  }
  
  /* Mobile menu overlay */
  body.menu-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  body.menu-active {
    overflow: hidden;
  }
  
  .nav-menu li {
    margin: 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .nav-menu li:last-child {
    border-bottom: none;
  }
  
  .nav-menu a {
    font-size: var(--fs-lg);
    display: block;
    padding: var(--space-4);
    color: var(--white);
  }
  
  .nav-menu a:hover,
  .nav-menu a.active {
    background-color: rgba(255,255,255,0.1);
  }
  
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    pointer-events: auto !important;
    touch-action: manipulation;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9999 !important;
    background: transparent;
    border-radius: var(--radius-base);
  }
  
  .mobile-menu-toggle span {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--white);
    border-radius: 1px;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-toggle span:nth-child(1) {
    top: 11px;
  }
  
  .mobile-menu-toggle span:nth-child(2) {
    top: 19px;
  }
  
  .mobile-menu-toggle span:nth-child(3) {
    top: 27px;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
  }
  
  .nav-menu {
    display: flex;
    margin-top: 0;
  }
  
  .nav-menu.active {
    display: flex;
    right: 0;
  }
  
  .logo img {
    height: 60px;
    padding: var(--space-1);
  }
  
  /* Mobile Language Switch - Show stacked flags */
  .language-switch {
    position: static;
  }
  
  .language-switch .dropdown-toggle {
    display: none;
  }
  
  .language-dropdown {
    position: static;
    background-color: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .language-dropdown a {
    color: var(--white);
    padding: var(--space-3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    justify-content: center;
    text-align: center;
  }
  
  .language-dropdown a:hover {
    background-color: rgba(255,255,255,0.1);
  }
  
  .language-dropdown a:last-child {
    border-bottom: none;
  }
}/* Section Components - Cassalena Ecolodge
   Common section patterns used across pages */

/* Section Padding and Margins */
.section-padding {
  padding: var(--space-20) 0;
}

.section-padding:first-of-type {
  padding-top: 100px;
}

.section-padding:last-of-type {
  margin-bottom: var(--space-16);
}

/* Common Section Margins */
.amenities,
.attractions,
.booking-cta,
.cabin-gallery,
.cabin-overview,
.reviews {
  margin-bottom: var(--space-16);
}

/* CTA Sections */
.cta-section {
  margin-top: var(--space-16);
  padding: var(--space-8);
  background-color: rgba(178, 162, 153, 0.1);
  border-radius: var(--radius-lg);
  text-align: center;
}

.cta-section h3 {
  margin-bottom: var(--space-4);
  color: var(--dark);
}

.cta-section p {
  margin-bottom: var(--space-6);
  color: var(--text);
}

.more-questions {
  margin-top: var(--space-16);
  padding: var(--space-8);
  background-color: rgba(178, 162, 153, 0.1);
  border-radius: var(--radius-lg);
}

.more-questions h3 {
  margin-bottom: var(--space-4);
  color: var(--dark);
}

/* List Styling for Content Areas */
.faq-content ul, 
.faq-content ol,
.cabin-overview ul, 
.cabin-overview ol,
.amenities ul, 
.amenities ol,
.about ul,
.about ol {
  padding-left: 40px;
  margin-bottom: var(--space-4);
  list-style: revert;
}

.faq-content ul li, 
.faq-content ol li,
.cabin-overview ul li, 
.cabin-overview ol li,
.amenities ul li, 
.amenities ol li,
.about ul li,
.about ol li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

/* Nested lists spacing */
ul ul, ol ol, ul ol, ol ul {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Paragraph-list spacing */
p + ul, p + ol {
  margin-top: -5px;
}

/* Feature and amenity lists */
.feature-list li, 
.amenity-list li {
  margin-bottom: var(--space-3);
}

/* Bullet point styles */
ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

/* FAQ Preview Section */
.faq-preview {
  padding: 100px 0;
  background: linear-gradient(135deg, #2c5e4a 0%, #7a9e7e 100%);
  position: relative;
  overflow: hidden;
  margin-top: 80px;
}

.faq-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
}

.faq-preview .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.faq-preview .row {
  justify-content: center;
  margin: 0;
}

.faq-preview .text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.faq-preview h2 {
  color: white;
  font-size: 3rem;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.faq-preview p {
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 40px;
  font-size: 1.2rem;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.faq-preview .btn,
.faq-preview .btn-light {
  background-color: white !important;
  color: #2c5e4a !important;
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  border: none;
}

.faq-preview .btn:hover,
.faq-preview .btn-light:hover {
  background-color: #f7f4f0 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: #2c5e4a !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-padding:first-of-type {
    padding-top: 80px;
  }
  
  .amenities,
  .attractions,
  .booking-cta,
  .cabin-gallery,
  .cabin-overview,
  .reviews,
  .section-padding:last-of-type {
    margin-bottom: var(--space-10);
  }
  
  .cta-section,
  .more-questions {
    padding: var(--space-6);
    margin-top: var(--space-12);
  }
  
  .faq-preview {
    padding: 80px 0;
    margin-top: 60px;
  }
  
  .faq-preview h2 {
    font-size: 2.2rem;
  }
  
  .faq-preview p {
    font-size: 1.1rem;
    padding: 0 15px;
  }
  
  .faq-preview .btn,
  .faq-preview .btn-light {
    padding: 12px 30px;
    font-size: 1rem;
  }
}/* Blog Styles */

/* Blog Hero Section */
.blog-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
}

/* Blog Categories Section */
.blog-categories {
  padding: 40px 0;
  background-color: #f8f6f3;
  border-bottom: 1px solid #e5e5e5;
}

.category-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.category-tag {
  padding: 8px 20px;
  border: 2px solid var(--secondary);
  background-color: white;
  color: var(--dark);
  border-radius: 25px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.category-tag:hover {
  background-color: var(--secondary);
  color: white;
  transform: translateY(-2px);
}

.category-tag.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Blog Grid Section */
.blog-grid-section {
  padding: 60px 0;
  background-color: #fafafa;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

/* Blog Card Styles */
.blog-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.blog-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-category {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--primary);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.blog-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #666;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-content h3 {
  font-size: 1.4rem;
  color: var(--dark);
  margin-bottom: 15px;
  line-height: 1.4;
  font-weight: 600;
}

.blog-content p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.read-more {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s ease;
}

.read-more:hover {
  color: var(--dark);
  gap: 12px;
}

.read-more i {
  font-size: 0.9rem;
}

/* Newsletter Section */
.newsletter-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 20s linear infinite;
}

@keyframes float {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.newsletter-box {
  background: rgba(255,255,255,0.95);
  padding: 50px;
  border-radius: 15px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

.newsletter-box h2 {
  color: var(--dark);
  margin-bottom: 15px;
}

.newsletter-box p {
  color: #666;
  margin-bottom: 30px;
}

.newsletter-form-inline {
  display: flex;
  gap: 15px;
  max-width: 450px;
  margin: 0 auto;
}

.newsletter-form-inline input {
  flex-grow: 1;
  padding: 12px 20px;
  border: 2px solid #e5e5e5;
  border-radius: 50px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.newsletter-form-inline input:focus {
  outline: none;
  border-color: var(--primary);
}

.newsletter-form-inline button {
  white-space: nowrap;
  border-radius: 50px;
  padding: 12px 30px;
}

/* Load More Button */
.load-more {
  background-color: white;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 12px 40px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.load-more:hover {
  background-color: var(--primary);
  color: white;
}

/* Individual Blog Post Styles */
.blog-post-hero {
  padding: 150px 0 80px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.blog-post-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
}

.blog-post-header {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: white;
}

.blog-post-meta {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
  font-size: 1.1rem;
  opacity: 0.9;
}

.blog-post-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-post-header h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.blog-post-content {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 15px;
}

.blog-post-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 25px;
}

.blog-post-content h2 {
  font-size: 2rem;
  color: var(--dark);
  margin: 40px 0 20px;
}

.blog-post-content h3 {
  font-size: 1.5rem;
  color: var(--dark);
  margin: 30px 0 15px;
}

.blog-post-content ul,
.blog-post-content ol {
  margin: 20px 0;
  padding-left: 30px;
}

.blog-post-content li {
  margin-bottom: 10px;
  line-height: 1.8;
}

.blog-post-content blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 20px;
  margin: 30px 0;
  font-style: italic;
  color: #666;
}

.blog-post-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 30px 0;
}

/* Author Box */
.author-box {
  background-color: #f8f6f3;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 40px 0;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h4 {
  color: var(--dark);
  margin-bottom: 5px;
}

.author-info p {
  color: #666;
  margin: 0;
}

/* Related Posts */
.related-posts {
  padding: 60px 0;
  background-color: #fafafa;
}

.related-posts h2 {
  text-align: center;
  margin-bottom: 40px;
  color: var(--dark);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  /* Fix blog hero background on mobile */
  .blog-hero {
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }
  
  .blog-post-hero {
    background-attachment: scroll;
    background-size: 120% auto;
    background-position: center 20%;
  }
  
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .category-tags {
    padding: 0 15px;
    gap: 10px;
  }
  
  .category-tag {
    font-size: 0.85rem;
    padding: 6px 15px;
  }
  
  .newsletter-box {
    padding: 30px 20px;
  }
  
  .newsletter-form-inline {
    flex-direction: column;
  }
  
  .newsletter-form-inline input {
    width: 100%;
  }
  
  .blog-post-header h1 {
    font-size: 2rem;
  }
  
  .blog-post-meta {
    flex-direction: column;
    gap: 10px;
    font-size: 1rem;
  }
  
  .author-box {
    flex-direction: column;
    text-align: center;
  }
  
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}/* Cabin Pages New Design - Cassalena Ecolodge
   Modern, beautiful, and performant cabin detail pages */

/* CSS Variables for consistent theming */
:root {
  --cabin-primary: #8f7d75;
  --cabin-secondary: #6c5e58;
  --cabin-accent: #b2a299;
  --cabin-dark: #3a3330;
  --cabin-light: #f8f7f5;
  --cabin-white: #ffffff;
  --cabin-text: #4a4340;
  --cabin-text-light: #666666;
  --cabin-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --cabin-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
  --cabin-radius: 12px;
  --cabin-radius-lg: 20px;
  --cabin-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.cabin-page {
  color: var(--cabin-text);
  line-height: 1.6;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

/* Prevent horizontal overflow */
.cabin-page * {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Common h2 styles for sections (except CTA) */
.cabin-overview h2,
.key-features-section h2,
.cabin-pricing-section h2,
.gallery-heading h2,
.amenities h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--cabin-dark) !important;
  text-align: center !important;
  margin-bottom: 60px;
  position: relative;
  padding-bottom: 20px;
  width: 100%;
}

.cabin-overview h2::after,
.key-features-section h2::after,
.cabin-pricing-section h2::after,
.gallery-heading h2::after,
.amenities h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--cabin-primary), var(--cabin-accent));
  border-radius: 2px;
}

/* Scroll Container */
.scroll-container {
  position: relative;
  width: 100%;
}

/* Desktop snap scrolling - removed due to scrolling issues */
@media (min-width: 769px) {
  /* Ensure smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Hero takes full viewport */
  .cabin-hero {
    height: 100vh;
  }
}

/* Fix for dead space after footer */
.scroll-container > *:last-child {
  margin-bottom: 0 !important;
}

/* Footer specific fixes */
#footer,
.footer {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Hide any content after footer */
.footer ~ *:not(.section-nav):not(.back-to-top),
.scroll-container > .footer ~ * {
  display: none !important;
}

/* Remove any default margins/padding that might cause space */
.scroll-container {
  padding-bottom: 0 !important;
}

.scroll-container::after {
  display: none !important;
}

/* Section Navigation Dots */
.section-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  width: auto;
  height: auto;
}

.section-nav a {
  display: block;
  width: 12px;
  height: 12px;
  margin: 15px 0;
  border-radius: 50%;
  background: rgba(143, 125, 117, 0.3);
  border: 2px solid rgba(143, 125, 117, 0.6);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-nav a.active {
  background: var(--cabin-primary);
  border-color: var(--cabin-primary);
  transform: scale(1.3);
  box-shadow: 0 3px 8px rgba(143, 125, 117, 0.3);
}

.section-nav a:hover {
  background: rgba(143, 125, 117, 0.5);
  border-color: var(--cabin-primary);
}

.section-nav a {
  position: relative;
}

.section-nav a span {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 15px;
  background: var(--cabin-primary);
  color: var(--cabin-white);
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(143, 125, 117, 0.3);
}

.section-nav a span::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--cabin-primary);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.section-nav a:hover span {
  opacity: 1;
  visibility: visible;
  margin-right: 20px;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--cabin-primary);
  color: var(--cabin-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--cabin-secondary);
  transform: translateY(-3px);
}

/* Remove default snap scrolling - handled by JavaScript */

/* Hero Section - Clean Design */
.cabin-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cabin-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.cabin-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.cabin-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 30px;
  animation: fadeInUp 1s ease-out;
}

.cabin-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--cabin-white);
  margin-bottom: 25px;
  text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: -1px;
  line-height: 1.1;
}

.cabin-hero .lead {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--cabin-white);
  margin-bottom: 40px;
  font-weight: 300;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.cabin-hero .btn {
  display: inline-flex;
  align-items: center;
  padding: 18px 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  transition: var(--cabin-transition);
  text-transform: uppercase;
  letter-spacing: 1px;
  gap: 10px;
}

.cabin-hero .btn-airbnb {
  background: #FF5A5F;
  color: var(--cabin-white);
  border: 2px solid #FF5A5F;
}

.cabin-hero .btn-airbnb:hover {
  background: #E00007;
  border-color: #E00007;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 85, 95, 0.4);
}

/* Floating Amenities - Redesigned */
.floating-amenities {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 40px 0;
}

.amenity-icon-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.amenity-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--cabin-radius);
  transition: var(--cabin-transition);
  min-width: 120px;
}

.amenity-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
}

.amenity-icon i {
  font-size: 1.5rem;
  color: var(--cabin-white);
}

.amenity-icon span {
  font-size: 0.85rem;
  color: var(--cabin-white);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

/* Overview Section */
.cabin-overview {
  padding: 140px 0 140px;
  background: var(--cabin-white);
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.cabin-overview::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50Q300 0 600 50T1200 50L1200 100L0 100Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: cover;
}

.section-content {
  max-width: 1000px;
  margin: 0 auto;
}

.cabin-overview h2 {
  margin-top: 65px;
}

.cabin-overview p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--cabin-text);
  margin-bottom: 25px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px;
}

/* Key Features Section */
.key-features-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8f7f5 0%, #fff 100%);
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Key Features h2 uses common styling */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 25px;
  background: #ffffff;
  border-radius: var(--cabin-radius);
  transition: var(--cabin-transition);
  border: 1px solid rgba(143, 125, 117, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: var(--cabin-primary);
  background: #ffffff;
}

.feature-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cabin-primary);
  color: var(--cabin-white);
  border-radius: 50%;
  font-size: 1.2rem;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--cabin-white);
}

.feature-text {
  flex: 1;
}

.feature-text strong {
  display: block;
  color: var(--cabin-dark);
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.feature-text span {
  color: var(--cabin-text-light);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Quote Section */
.cabin-quote {
  margin-top: 80px;
  padding: 60px 40px;
  background: linear-gradient(135deg, var(--cabin-primary), var(--cabin-secondary));
  border-radius: var(--cabin-radius-lg);
  color: var(--cabin-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cabin-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 40px;
  font-size: 150px;
  opacity: 0.1;
  font-family: Georgia, serif;
}

.cabin-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.cabin-quote p {
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: var(--cabin-white);
}

.quote-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.quote-avatar {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.quote-footer cite {
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Pricing Section - Completely Redesigned */
.cabin-pricing-section {
  padding: 60px 0;
  background: var(--cabin-light);
  position: relative;
  overflow: visible;
}

.pricing-title-row {
  margin-bottom: 40px;
  text-align: center;
}

.pricing-title-row .col-lg-6,
.pricing-title-row .col-md-8 {
  text-align: center;
}

.pricing-card-row {
  display: flex;
  justify-content: center;
}

/* Pricing h2 uses common styling */

.cabin-pricing-section .lead {
  font-size: 1.3rem;
  color: var(--cabin-text-light);
  text-align: center !important;
  margin: -35px auto 40px;
  max-width: 600px;
  line-height: 1.6;
  display: block;
  width: 100%;
}

.cabin-pricing-section .section-content {
  text-align: center;
}

.cabin-pricing-section .row {
  text-align: center;
}

.cabin-pricing-section .text-center {
  text-align: center !important;
}

.cabin-pricing {
  background: var(--cabin-white);
  border-radius: var(--cabin-radius-lg);
  overflow: hidden;
  box-shadow: var(--cabin-shadow);
  max-width: 600px;
  margin: 0 auto;
}

.cabin-pricing-header {
  background: linear-gradient(135deg, var(--cabin-primary), var(--cabin-secondary));
  padding: 20px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cabin-pricing-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

.cabin-pricing-header h3 {
  color: var(--cabin-white);
  font-size: 1.5rem;
  margin: 0;
  position: relative;
  z-index: 1;
}

.cabin-pricing-body {
  padding: 30px 40px;
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cabin-primary);
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.price span {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--cabin-text-light);
}

.cabin-pricing-body p {
  text-align: center;
  color: var(--cabin-text-light);
  margin-bottom: 25px;
}

.cabin-pricing-body .btn {
  display: block;
  width: 100%;
  padding: 18px 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--cabin-transition);
  margin-bottom: 15px;
}

.cabin-pricing-body .btn-primary {
  background: var(--cabin-primary);
  color: var(--cabin-white);
  border: 2px solid var(--cabin-primary);
}

.cabin-pricing-body .btn-primary:hover {
  background: var(--cabin-secondary);
  border-color: var(--cabin-secondary);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(143, 125, 117, 0.3);
}

.cabin-pricing-body .btn-outline {
  background: transparent;
  color: var(--cabin-primary);
  border: 2px solid var(--cabin-primary);
}

.cabin-pricing-body .btn-outline:hover {
  background: var(--cabin-primary);
  color: var(--cabin-white);
  transform: translateY(-2px);
}

.availability-info {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #eee;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.availability-info p {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  color: var(--cabin-text);
  text-align: left;
  justify-content: flex-start;
}

.availability-info i {
  color: var(--cabin-primary);
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

/* Gallery Section - 3x3 Grid */
.cabin-gallery {
  padding: 140px 0;
  background: var(--cabin-white);
  overflow: hidden;
  position: relative;
}

.cabin-gallery .container {
  max-width: 1400px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.gallery-heading {
  text-align: center;
  margin-bottom: 60px;
}

/* Gallery h2 uses common styling */

.gallery-heading p {
  font-size: 1.2rem;
  color: var(--cabin-text-light);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--cabin-radius);
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: var(--cabin-transition);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  min-height: 320px;
  width: 100%;
  max-width: 100%;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--cabin-shadow-lg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--cabin-white);
  font-size: 0.95rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery-item:hover .caption {
  transform: translateY(0);
}

/* Amenities Section */
.amenities {
  padding: 120px 0;
  background: #fdfcfa;
}

.amenities .section-content {
  max-width: 1200px;
  margin: 0 auto;
}

.amenities .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  margin: 0;
}

.amenities .col-lg-4 {
  flex: 1 1 0;
  padding: 0;
  margin-bottom: 0;
  min-width: 0;
}

/* Amenities h2 uses common styling */

.amenity-group {
  background: var(--cabin-white);
  padding: 40px;
  border-radius: var(--cabin-radius-lg);
  height: 100%;
  border: 1px solid rgba(143, 125, 117, 0.1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: none !important;
  transform: none !important;
}

.amenity-group:hover {
  transform: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(143, 125, 117, 0.1) !important;
}

.amenity-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--cabin-primary), var(--cabin-accent));
}

.amenity-group h3 {
  color: var(--cabin-primary);
  font-size: 1.5rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.amenity-group h3::before {
  content: '';
  width: 40px;
  height: 4px;
  background: var(--cabin-primary);
  border-radius: 2px;
  transition: none;
}

.amenity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amenity-list li {
  padding: 12px 0;
  padding-left: 30px;
  position: relative;
  color: var(--cabin-text);
  font-size: 1rem;
  line-height: 1.6;
  list-style-type: none;
}

.amenity-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cabin-primary);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Override any default list styling */
.amenity-group ul {
  list-style: none;
  padding-left: 0;
}

/* CTA Section */
.booking-cta {
  padding: 120px 0;
  background: linear-gradient(135deg, #2d5a2d 0%, #3a7a3a 100%);
  color: var(--cabin-white);
  text-align: center;
  position: relative;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  margin-top: 0;
  width: 100%;
  max-width: 100vw;
}

.booking-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
  animation: rotate 20s linear infinite;
  transform-origin: center center;
}

.booking-cta .container {
  position: relative;
  z-index: 1;
}

.booking-cta h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 25px;
  font-weight: 700;
  color: var(--cabin-white);
}

.booking-cta p {
  font-size: 1.3rem;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
  line-height: 1.6;
  color: var(--cabin-white);
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-buttons .btn {
  padding: 18px 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  transition: var(--cabin-transition);
  display: inline-block;
}

.cta-buttons .btn-airbnb {
  background: #FF5A5F;
  color: var(--cabin-white);
  border: 2px solid #FF5A5F;
}

.cta-buttons .btn-airbnb:hover {
  background: #E00007;
  border-color: #E00007;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 85, 95, 0.3);
}

.cta-buttons .btn-outline-light {
  background: transparent;
  color: var(--cabin-white);
  border: 2px solid var(--cabin-white);
}

.cta-buttons .btn-outline-light:hover {
  background: var(--cabin-white);
  color: var(--cabin-primary);
  transform: translateY(-3px);
}

/* Icon spacing for buttons */
.icon-spacing {
  margin-right: 10px;
  font-size: 1.2em;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Mobile Menu Toggle - Always hidden on desktop */
@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* Force mobile menu toggle to show on any touch device or small screen */
@media (max-width: 768px), (pointer: coarse), (hover: none) {
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Also ensure nav is properly set up on actual mobile devices */
  .header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* Responsive Design */
@media (max-width: 1440px) {
  /* Container adjustments */
  .container {
    max-width: 1200px;
  }
  
  /* Hero text adjustments */
  .cabin-hero h1 {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
  }
  
  .cabin-hero .lead {
    font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  }
}

@media (max-width: 1280px) {
  /* Hero adjustments for smaller screens */
  .cabin-hero h1 {
    font-size: clamp(2rem, 6vw, 4rem);
  }
  
  .cabin-hero .lead {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  }
  
  .cabin-hero-content {
    max-width: 800px;
  }
  
  /* Floating amenities adjustments */
  .amenity-icon-container {
    gap: 20px;
    padding: 0 15px;
  }
  
  .amenity-icon {
    min-width: 130px;
    padding: 15px 20px;
  }
  
  .amenity-icon i {
    font-size: 1.8rem;
  }
  
  .amenity-icon span {
    font-size: 0.85rem;
  }
  
  /* Gallery grid */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  /* Hero section adjustments */
  .cabin-hero h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
  }
  
  .cabin-hero .lead {
    font-size: clamp(1.1rem, 2vw, 1.6rem);
  }
  
  .cabin-hero .btn {
    padding: 16px 45px;
    font-size: 1.05rem;
  }
  
  /* Floating amenities - wrap on tablets */
  .floating-amenities {
    padding: 35px 0;
  }
  
  .amenity-icon-container {
    gap: 15px;
    max-width: 900px;
  }
  
  .amenity-icon {
    min-width: 120px;
    padding: 12px 15px;
  }
  
  .amenity-icon i {
    font-size: 1.6rem;
  }
  
  .amenity-icon span {
    font-size: 0.8rem;
  }
  
  /* Gallery and features */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 100%;
  }
  
  .feature-grid {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
  
  .amenities .row {
    flex-wrap: wrap;
  }
  
  .amenities .col-lg-4 {
    flex: 0 0 100%;
  }
}

/* Common mobile device widths */
@media screen and (max-width: 428px), /* iPhone 14 Pro Max */
       screen and (max-width: 414px), /* iPhone Plus models */
       screen and (max-width: 390px), /* iPhone 14 Pro */
       screen and (max-width: 375px), /* iPhone SE, older models */
       screen and (max-width: 360px)  /* Many Android devices */ {
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 768px) {
  /* Prevent horizontal scroll on mobile */
  html, body {
    max-width: 100%;
    overflow-x: hidden !important;
  }
  
  * {
    max-width: 100vw !important;
  }
  
  .scroll-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* Ensure all sections respect viewport width */
  section, .container, footer {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }
  
  /* Fix any absolutely positioned elements */
  .section-nav,
  .back-to-top {
    right: 20px !important;
  }
  
  /* Hero adjustments */
  .cabin-hero {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0;
  }
  
  /* Fix hero background image sizing on mobile */
  .cabin-hero-bg {
    object-fit: cover;
    object-position: center center;
  }
  
  .cabin-hero-content {
    padding: 80px 20px 40px;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .cabin-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 20px;
    line-height: 1.1;
  }
  
  .cabin-hero .lead {
    font-size: clamp(1rem, 3vw, 1.3rem);
    margin-bottom: 30px;
    padding: 0 10px;
  }
  
  .cabin-hero .btn {
    padding: 15px 35px;
    font-size: 1rem;
  }
  
  /* Floating amenities mobile - separate section at bottom */
  .floating-amenities {
    position: relative;
    padding: 20px 0;
    background: transparent;
    width: 100%;
    overflow: hidden;
    margin-top: auto;
  }
  
  .amenity-icon-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 20px;
    max-width: 100vw;
  }
  
  .amenity-icon {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
  }
  
  .amenity-icon i {
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  
  .amenity-icon span {
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: left;
  }
  
  /* Hide the word "Jacuzzi" on mobile */
  .amenity-icon span {
    display: inline-block;
  }
  
  .amenity-icon:nth-child(2) span::after {
    content: 'Hydromassage';
    display: block;
  }
  
  .amenity-icon:nth-child(2) span {
    font-size: 0;
  }
  
  .amenity-icon:nth-child(2) span::after {
    font-size: 0.8rem;
  }
  
  /* Header adjustments for mobile */
  .header {
    z-index: 9999 !important;
  }
  
  .header .navbar {
    justify-content: space-between;
    align-items: center;
  }
  
  /* Hide nav menu on mobile */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--cabin-primary);
    flex-direction: column;
    padding: 80px 0 20px;
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    display: flex;
  }
  
  .nav-menu.active {
    right: 0;
  }
  
  /* Mobile menu items */
  .nav-menu li {
    margin: 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
  }
  
  .nav-menu li:last-child {
    border-bottom: none;
  }
  
  .nav-menu a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    width: 100%;
  }
  
  .nav-menu a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
  }
  
  /* Language dropdown in mobile menu */
  .nav-menu .language-switch {
    position: relative;
    width: 100%;
  }
  
  .nav-menu .language-switch .dropdown-toggle {
    display: none !important;
  }
  
  .nav-menu .language-dropdown {
    position: static;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .nav-menu .language-dropdown a {
    padding: 15px 20px 15px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
  }
  
  .nav-menu .language-dropdown a:last-child {
    border-bottom: none;
  }
  
  .nav-menu .language-dropdown img {
    margin-right: 10px;
  }
  
  /* Sections padding */
  .cabin-overview,
  .key-features-section,
  .cabin-pricing-section,
  .cabin-gallery,
  .amenities,
  .booking-cta {
    padding: 80px 0;
    min-height: auto;
    display: block;
  }
  
  /* Fix overview section header overlap */
  .cabin-overview {
    padding-top: 100px;
  }
  
  .cabin-overview h2 {
    margin-top: 20px;
  }
  
  /* Add more padding on mobile for overview text */
  .cabin-overview p {
    padding: 0 25px;
  }
  
  /* Gallery mobile */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    max-width: 100%;
    padding: 0 20px;
  }
  
  .gallery-item {
    aspect-ratio: 16/9;
    min-height: 200px;
  }
  
  /* Features mobile */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .feature-item {
    padding: 20px;
  }
  
  /* Quote mobile */
  .cabin-quote {
    padding: 40px 25px;
  }
  
  .cabin-quote p {
    font-size: 1.2rem;
  }
  
  /* Pricing mobile */
  .cabin-pricing {
    margin: 0 20px;
    max-width: 100%;
  }
  
  .cabin-pricing-header {
    padding: 25px 20px;
  }
  
  .cabin-pricing-body {
    padding: 30px 20px;
  }
  
  .price {
    font-size: 2.5rem;
  }
  
  .cabin-pricing-section {
    padding: 60px 0;
  }
  
  /* Amenities mobile */
  .amenities .row {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .amenities .col-lg-4,
  .amenities .col-md-6 {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  
  /* CTA mobile */
  .booking-cta {
    overflow: hidden !important;
    position: relative;
  }
  
  .booking-cta::before {
    width: 100%;
    height: 100%;
    animation: none; /* Disable animation on mobile to prevent overflow */
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn {
    width: 250px;
    text-align: center;
  }
  
  /* Hide section nav on mobile */
  .section-nav {
    display: none;
  }
  
  /* Ensure mobile menu toggle is visible */
  .header nav {
    display: flex;
    align-items: center;
  }
  
  .header .navbar .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 20px;
  }
  
  .mobile-menu-toggle span {
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 1px;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-toggle span:nth-child(1) {
    top: 11px;
  }
  
  .mobile-menu-toggle span:nth-child(2) {
    top: 19px;
  }
  
  .mobile-menu-toggle span:nth-child(3) {
    top: 27px;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 19px;
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 19px;
  }
}

/* Mobile portrait specific adjustments for cabin hero */
@media (max-width: 768px) and (orientation: portrait) {
  .cabin-hero-bg {
    object-position: center 20%;
  }
}

@media (max-width: 480px) {
  /* Hero section for very small screens */
  .cabin-hero-content {
    padding: 60px 15px 30px;
  }
  
  .cabin-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    margin-bottom: 15px;
  }
  
  .cabin-hero .lead {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  
  .cabin-hero .btn {
    padding: 14px 30px;
    font-size: 0.95rem;
  }
  
  /* Floating amenities - maintain 2 column grid */
  .amenity-icon-container {
    gap: 10px;
    padding: 0 15px;
  }
  
  .amenity-icon {
    padding: 12px 10px;
    gap: 10px;
  }
  
  .amenity-icon i {
    font-size: 1.2rem;
  }
  
  .amenity-icon span {
    font-size: 0.75rem;
  }
  
  /* Adjust all h2 headings */
  .section-content h2,
  .cabin-pricing-section h2,
  .gallery-heading h2,
  .amenities h2,
  .booking-cta h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
  }
  
  /* Pricing adjustments */
  .price {
    font-size: 2rem;
  }
  
  /* Button adjustments */
  .cta-buttons .btn {
    width: 90%;
    max-width: 250px;
    padding: 14px 20px;
  }
  
  /* Back to top button smaller on mobile */
  .back-to-top {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    bottom: 20px;
    right: 20px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .header,
  .section-nav,
  .back-to-top,
  .floating-amenities,
  .booking-cta {
    display: none;
  }
  
  .cabin-hero {
    height: auto;
    min-height: auto;
    padding: 50px 0;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Footer logo fix */
.footer-logo {
  max-width: 120px !important;
  height: auto;
  width: auto;
}

/* Fix pricing section alignment */
.cabin-pricing-section .row {
  justify-content: center;
  text-align: center;
}

.cabin-pricing-section .col-lg-6,
.cabin-pricing-section .col-md-8,
.cabin-pricing-section .col-lg-5 {
  text-align: center !important;
}

.cabin-pricing-section h2,
.cabin-pricing-section .lead,
.cabin-pricing-section p {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Override grid system text alignment */
.cabin-pricing-section * {
  text-align: inherit;
}

.cabin-pricing-section .text-center,
.cabin-pricing-section .text-center * {
  text-align: center !important;
}

/* Ensure consistent h2 colors across all sections */
.cabin-page section h2:not(.booking-cta h2) {
  color: var(--cabin-dark) !important;
}/* Landing Page Styles - Cassalena Ecolodge
   Welcome page with slideshow and language selector */

/* Home page specific body styling */
.home-page {
  height: 100%;
  font-family: var(--font-primary);
  overflow: hidden;
  background-color: #111111;
}

.home-page html {
  height: 100%;
}

/* Welcome Container */
.welcome-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Slideshow Background */
.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slideshow overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 2;
}

/* Content Wrapper */
.content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--white);
  z-index: 3;
  padding: 0 10%;
}

.content {
  max-width: 600px;
  animation: slide-up 1s ease-out;
}

/* Logo Section */
.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-10);
}

.logo {
  width: 150px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.logo-divider {
  width: 2px;
  height: 60px;
  background-color: var(--light);
  margin: 0 var(--space-5);
  opacity: 0.6;
}

.tagline {
  font-family: var(--font-secondary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--white);
}

/* Main Heading */
.welcome-container h1 {
  font-family: var(--font-secondary);
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-5);
  text-shadow: 0 4px 12px rgba(0,0,0,0.4);
  line-height: 1.1;
  color: var(--white);
}

.subtitle {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  margin-bottom: var(--space-10);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.6;
  max-width: 500px;
  color: var(--white);
}

/* Language Selector */
.language-selector {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 600px;
}

.language-btn {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background-color: var(--forest);
  border: none;
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-base);
  min-width: 250px;
  width: 250px;
  text-align: center;
  justify-content: center;
}

.language-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: all 0.6s ease;
}

.language-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  text-decoration: none !important;
  color: var(--white) !important;
}

.language-btn:hover::before {
  left: 100%;
}

.language-btn img {
  width: 24px;
  height: 18px;
  margin-right: var(--space-3);
  border-radius: var(--radius-sm);
}

/* Activity Icons */
.activity-icons {
  position: absolute;
  right: 10%;
  bottom: 10%;
  display: flex;
  gap: var(--space-8);
  z-index: 3;
}

.activity-icon {
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 0;
  transition: all var(--transition-base);
}

.activity-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.activity-icon:nth-child(1) {
  animation-delay: 0.5s;
}

.activity-icon:nth-child(2) {
  animation-delay: 0.7s;
}

.activity-icon:nth-child(3) {
  animation-delay: 0.9s;
}

.activity-icon img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

/* Compass Decoration */
.compass {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  animation: rotate 20s linear infinite;
  z-index: 3;
}

.compass::before {
  content: '↑';
  font-size: var(--fs-2xl);
  color: var(--white);
}

/* Animations */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobile Pricing Fixes */
@media (max-width: 768px) {
  .pricing {
    padding: 60px 0;
  }
  
  .pricing .container {
    padding: 0 20px;
  }
  
  .price-card {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .content-wrapper {
    padding: 0 8%;
  }
  
  .activity-icons {
    right: 8%;
    bottom: 8%;
    gap: var(--space-6);
  }
  
  .compass {
    top: 4%;
    right: 4%;
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 768px) {
  /* Fix slideshow images on mobile */
  .slide-image {
    object-fit: cover;
    object-position: center center;
  }
  
  .content-wrapper {
    padding: 0 5%;
    justify-content: center;
    text-align: center;
  }
  
  .welcome-container h1 {
    font-size: var(--fs-5xl);
  }
  
  .subtitle {
    font-size: var(--fs-lg);
    margin-left: auto;
    margin-right: auto;
  }
  
  .language-selector {
    justify-content: center;
    flex-direction: row;
    width: 90%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-4);
  }
  
  .activity-icons {
    position: relative;
    right: auto;
    bottom: auto;
    justify-content: center;
    margin-top: var(--space-10);
    gap: var(--space-4);
  }
  
  .activity-icon {
    width: 60px;
    height: 60px;
  }
  
  .activity-icon img {
    width: 30px;
    height: 30px;
  }
  
  .logo-container {
    justify-content: center;
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .logo-divider {
    width: 60px;
    height: 2px;
    margin: 0;
  }
  
  .tagline {
    font-size: var(--fs-xl);
  }
  
  .compass {
    width: 60px;
    height: 60px;
    top: 3%;
    right: 3%;
  }
  
  .compass::before {
    font-size: var(--fs-xl);
  }
}

/* Mobile portrait specific adjustments for slideshow */
@media (max-width: 768px) and (orientation: portrait) {
  .slide-image {
    object-position: center 25%;
  }
}

@media (max-width: 480px) {
  .welcome-container h1 {
    font-size: var(--fs-4xl);
  }
  
  .subtitle {
    font-size: var(--fs-base);
  }
  
  .language-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
    min-width: 220px;
    width: 220px;
  }
  
  .language-btn img {
    width: 20px;
    height: 15px;
  }
  
  .tagline {
    font-size: var(--fs-lg);
  }
  
  .logo {
    width: 120px;
  }
  
  .activity-icon {
    width: 50px;
    height: 50px;
  }
  
  .activity-icon img {
    width: 25px;
    height: 25px;
  }
  
  .compass {
    width: 50px;
    height: 50px;
  }
  
  .compass::before {
    font-size: var(--fs-lg);
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
  
  .compass {
    animation: none;
  }
  
  .activity-icon {
    animation: none;
    opacity: 1;
  }
  
  .content {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .overlay {
    background: rgba(0,0,0,0.8);
  }
  
  .language-btn {
    border: 2px solid var(--white);
  }
  
  .activity-icon,
  .compass {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--white);
  }
}

/* Pricing Section for Language Home Pages */
.pricing {
  padding: 80px 0;
  background-color: white;
}

.pricing h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: var(--dark);
}

.price-card {
  background-color: #f7f4f0;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.price-card .accent-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.price-card:hover .accent-box {
  width: 8px;
}

/* Pine Cone Decoration */
.price-card::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%238f7d75'%3E%3Cpath d='M20 0C20 0 10 5 10 15C10 15 5 18 5 25C5 25 0 28 0 35C0 42 8 50 20 50C32 50 40 42 40 35C40 28 35 25 35 25C35 18 30 15 30 15C30 5 20 0 20 0Z' /%3E%3Cpath fill='%236c5e58' d='M20 10C20 10 15 12 15 17C15 17 12 19 12 23C12 23 10 25 10 28C10 31 14 35 20 35C26 35 30 31 30 28C30 25 28 23 28 23C28 19 25 17 25 17C25 12 20 10 20 10Z' /%3E%3Cg fill='%23a6958d'%3E%3Ccircle cx='15' cy='20' r='1.5'/%3E%3Ccircle cx='25' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='25' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='22' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-20px) rotate(-15deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.price-card:hover::before {
  opacity: 0.3;
  transform: translateY(0) rotate(0deg);
}

/* Second pine cone for visual interest */
.price-card::after {
  content: '';
  position: absolute;
  right: 60px;
  bottom: 15px;
  width: 30px;
  height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%23b2a299'%3E%3Cpath d='M20 0C20 0 10 5 10 15C10 15 5 18 5 25C5 25 0 28 0 35C0 42 8 50 20 50C32 50 40 42 40 35C40 28 35 25 35 25C35 18 30 15 30 15C30 5 20 0 20 0Z' /%3E%3Cpath fill='%238f7d75' d='M20 10C20 10 15 12 15 17C15 17 12 19 12 23C12 23 10 25 10 28C10 31 14 35 20 35C26 35 30 31 30 28C30 25 28 23 28 23C28 19 25 17 25 17C25 12 20 10 20 10Z' /%3E%3Cg fill='%23efeae3'%3E%3Ccircle cx='15' cy='20' r='1.5'/%3E%3Ccircle cx='25' cy='20' r='1.5'/%3E%3Ccircle cx='20' cy='25' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='22' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(20px) rotate(15deg) scale(0.8);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.1s;
}

.price-card:hover::after {
  opacity: 0.2;
  transform: translateY(0) rotate(-5deg) scale(0.8);
}

.price-card h4 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--dark);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.price-card p {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Gallery Section Adjustments */
.gallery h2.section-title {
  margin-top: 40px;
}/* Background Utility Classes - Cassalena Ecolodge
   Hero backgrounds and common background patterns */

/* Hero Background Base */
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Cabin Hero Backgrounds */
.hero-bg-a-frame {
  background-image: url('https://ik.imagekit.io/cassalena/a-frame-17.jpg?tr=w-1920,h-1080,fo-auto');
}

.hero-bg-glampod {
  background-image: url('https://ik.imagekit.io/cassalena/glampod-2.jpg?tr=w-1920,h-1080,fo-auto');
}

.hero-bg-skynest {
  background-image: url('https://ik.imagekit.io/cassalena/nest-65.jpeg?tr=w-1920,h-1080,fo-auto');
}

/* General Page Backgrounds */
.hero-bg-gallery {
  background-image: url('https://ik.imagekit.io/cassalena/general-42.jpeg?tr=w-1920,h-1080,fo-auto');
}

.hero-bg-faq {
  background-image: url('./../images/faq-banner.jpg');
}

.hero-bg-book {
  background-image: url('https://ik.imagekit.io/cassalena/general-28.jpg?tr=w-1920,h-1080,fo-auto');
}

.hero-bg-links {
  background-image: url('https://ik.imagekit.io/cassalena/general-15.jpeg?tr=w-1920,h-1080,fo-auto');
}

/* Landing Page Slide Backgrounds */
.slide-bg-1 {
  background-image: url('https://ik.imagekit.io/cassalena/general-1.jpg?tr=w-1920,h-1080,fo-auto');
}

.slide-bg-2 {
  background-image: url('https://ik.imagekit.io/cassalena/general-2.jpg?tr=w-1920,h-1080,fo-auto');
}

.slide-bg-3 {
  background-image: url('https://ik.imagekit.io/cassalena/general-3.jpeg?tr=w-1920,h-1080,fo-auto');
}

.slide-bg-4 {
  background-image: url('https://ik.imagekit.io/cassalena/general-4.jpeg?tr=w-1920,h-1080,fo-auto');
}

.slide-bg-5 {
  background-image: url('https://ik.imagekit.io/cassalena/general-5.jpeg?tr=w-1920,h-1080,fo-auto');
}

.slide-bg-6 {
  background-image: url('https://ik.imagekit.io/cassalena/general-6.jpeg?tr=w-1920,h-1080,fo-auto');
}

/* Background overlays */
.bg-overlay {
  position: relative;
}

.bg-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.bg-overlay-dark {
  position: relative;
}

.bg-overlay-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.bg-overlay-light {
  position: relative;
}

.bg-overlay-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, var(--dark) 0%, var(--black) 100%);
}

.bg-gradient-forest {
  background: linear-gradient(135deg, var(--forest) 0%, var(--dark) 100%);
}

/* Responsive background adjustments */
@media (max-width: 768px) {
  .hero-bg {
    background-attachment: scroll;
  }
  
  /* Mobile-optimized background images */
  .hero-bg-a-frame {
    background-image: url('https://ik.imagekit.io/cassalena/a-frame-17.jpg?tr=w-768,h-1024,fo-auto');
  }
  
  .hero-bg-glampod {
    background-image: url('https://ik.imagekit.io/cassalena/glampod-2.jpg?tr=w-768,h-1024,fo-auto');
  }
  
  .hero-bg-skynest {
    background-image: url('https://ik.imagekit.io/cassalena/nest-65.jpeg?tr=w-768,h-1024,fo-auto');
  }
  
  .hero-bg-gallery {
    background-image: url('https://ik.imagekit.io/cassalena/general-42.jpeg?tr=w-768,h-1024,fo-auto');
  }
}/* Icon Utility Classes - Cassalena Ecolodge
   Common icon styling and spacing utilities */

/* Icon spacing - replaces inline margin-right: 5px */
.icon-right {
  margin-right: var(--icon-margin);
}

.icon-left {
  margin-left: var(--icon-margin);
}

.icon-spacing {
  margin-right: var(--icon-margin);
}

/* Flag dimensions - replaces inline width/height styles */
.flag-img {
  width: var(--flag-width);
  height: var(--flag-height);
  margin-right: var(--icon-margin);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Icon sizes */
.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-base {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

/* Icon colors */
.icon-primary {
  color: var(--primary);
}

.icon-secondary {
  color: var(--secondary);
}

.icon-white {
  color: var(--white);
}

.icon-dark {
  color: var(--dark);
}

.icon-success {
  color: var(--success);
}

.icon-warning {
  color: var(--warning);
}

.icon-error {
  color: var(--error);
}

/* Special icon styles */
.icon-whatsapp {
  color: #25D366;
}

/* Icon positioning */
.icon-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon animations */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

.icon-bounce {
  animation: icon-bounce 1s ease-in-out infinite;
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes icon-bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(-2px);
  }
}

/* Icon containers */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--white);
  width: 40px;
  height: 40px;
}

.icon-circle-sm {
  width: 32px;
  height: 32px;
}

.icon-circle-lg {
  width: 48px;
  height: 48px;
}

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-base);
  background-color: var(--primary);
  color: var(--white);
  width: 40px;
  height: 40px;
}

/* Social media icons */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--white);
  transition: all var(--transition-base);
  text-decoration: none;
}

.social-icon:hover {
  background-color: var(--dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.social-icon-facebook {
  background-color: #1877F2;
}

.social-icon-instagram {
  background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}

.social-icon-whatsapp {
  background-color: #25D366;
}

.social-icon-youtube {
  background-color: #FF0000;
}

.social-icon-tiktok {
  background-color: #000000;
}

/* Navigation icons */
.nav-icon {
  margin-right: var(--space-2);
  font-size: var(--fs-sm);
}

/* Feature icons */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  background-color: var(--light);
  color: var(--primary);
  margin-right: var(--space-4);
  flex-shrink: 0;
  font-size: var(--fs-xl);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .flag-img {
    width: 18px;
    height: 14px;
  }
  
  .icon-circle,
  .icon-square,
  .social-icon {
    width: 36px;
    height: 36px;
  }
  
  .feature-icon {
    width: 40px;
    height: 40px;
    font-size: var(--fs-lg);
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .icon-circle,
  .icon-square,
  .social-icon {
    border: 2px solid var(--white);
  }
  
  .feature-icon {
    border: 2px solid var(--primary);
  }
}/* Spacing Utilities - Cassalena Ecolodge
   Margin and padding utility classes */

/* Margin utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-auto { margin: auto; }

/* Margin X-axis */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y-axis */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-8 { margin-right: var(--space-8); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-8 { margin-left: var(--space-8); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }

/* Padding X-axis */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

/* Padding Y-axis */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }

/* Common spacing utilities */
.icon-spacing { margin-right: var(--icon-margin); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }

/* Background utilities */
.bg-light { background-color: var(--light); }

/* Other utilities */
.no-decoration { text-decoration: none; }
.btn-block { display: block; width: 100%; }

/* Gap utilities for flexbox/grid */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: var(--space-1); }
.gap-x-2 { column-gap: var(--space-2); }
.gap-x-3 { column-gap: var(--space-3); }
.gap-x-4 { column-gap: var(--space-4); }
.gap-x-5 { column-gap: var(--space-5); }
.gap-x-6 { column-gap: var(--space-6); }
.gap-x-8 { column-gap: var(--space-8); }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: var(--space-1); }
.gap-y-2 { row-gap: var(--space-2); }
.gap-y-3 { row-gap: var(--space-3); }
.gap-y-4 { row-gap: var(--space-4); }
.gap-y-5 { row-gap: var(--space-5); }
.gap-y-6 { row-gap: var(--space-6); }
.gap-y-8 { row-gap: var(--space-8); }

/* Responsive spacing - Mobile first */
@media (min-width: 768px) {
  .md\:mt-0 { margin-top: 0; }
  .md\:mt-4 { margin-top: var(--space-4); }
  .md\:mt-8 { margin-top: var(--space-8); }
  .md\:mt-12 { margin-top: var(--space-12); }
  .md\:mt-16 { margin-top: var(--space-16); }
  .md\:mt-20 { margin-top: var(--space-20); }
  
  .md\:mb-0 { margin-bottom: 0; }
  .md\:mb-4 { margin-bottom: var(--space-4); }
  .md\:mb-8 { margin-bottom: var(--space-8); }
  .md\:mb-12 { margin-bottom: var(--space-12); }
  .md\:mb-16 { margin-bottom: var(--space-16); }
  .md\:mb-20 { margin-bottom: var(--space-20); }
  
  .md\:p-0 { padding: 0; }
  .md\:p-4 { padding: var(--space-4); }
  .md\:p-8 { padding: var(--space-8); }
  .md\:p-12 { padding: var(--space-12); }
  .md\:p-16 { padding: var(--space-16); }
  .md\:p-20 { padding: var(--space-20); }
}