:root {
  --silver: #C0C0C0;
  --green: #228B22;
  --green-600: #1b6d1b;
}

/* ---------- GLOBAL ---------- */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f8f9fa;
  color: #222;
  margin: 0;
  padding: 0;
}

/* Brand logo in navbar */
.brand-logo{
  height: 36px;
  width: auto;
  display: inline-block;
  object-fit: contain;
}
@media (max-width: 576px){
  .brand-logo{ height: 30px; }
}

/* ---------- NAVBAR ---------- */
.navbar {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.navbar .navbar-brand {
  color: var(--green) !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar .nav-link {
  color: #333;
  transition: color 0.2s ease;
}
.navbar .nav-link:hover {
  color: var(--green);
}

/* ---------- BUTTONS ---------- */
.btn-success {
  background: var(--green);
  border-color: var(--green);
  transition: all 0.2s ease;
}
.btn-success:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  transform: translateY(-2px);
}

/* ===========================================================
   HERO (Cross-fade slider using two buffered layers)
   =========================================================== */
.hero{
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg-a);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 18%;
  transition: opacity 800ms ease-in-out;
  will-change: opacity;
}
.hero::after{
  background-image: var(--bg-b);
  opacity: 0;
}
.hero.show-b::before{ opacity: 0; }
.hero.show-b::after { opacity: 1; }
.hero .hero-content{ position: relative; z-index: 2; }
.hero h1 { font-size: 3rem; font-weight: 800; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero p { font-size: 1.2rem; margin-top: 0.5rem; }
.hero .hero-search{ max-width: 1100px; margin: 0 auto; }
.glass{
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 12px;
}
@media (max-width: 991.98px) {
  .hero::before, .hero::after{ background-position: 50% 25%; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
}

/* ---------- CARDS ---------- */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-5px); }
.card img { border-top-left-radius: 16px; border-top-right-radius: 16px; width: 100%; height: auto; }

/* ===========================================================
   HERO BOOKING STRIP (thin & translucent over hero)
   =========================================================== */
.booking-strip-shell{
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 6px 10px;             /* thin strip */
  border-radius: 16px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.booking-strip{
  display: grid; gap: 8px;
  grid-template-columns: 1.1fr 1fr 1fr 1.1fr auto auto;
  align-items: end;
}
.booking-strip label{
  font-size: 11px; font-weight: 700; color:#2e7d32; margin: 0 0 2px 2px;
}
.booking-strip .btn{ height: 42px; }

/* ===========================================================
   BOOKING BAR (used on other pages)
   =========================================================== */
.booking-bar {
  background: #fff;
  border: 2px solid var(--silver);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.7fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.booking-bar .btn { height: 48px; }

/* ---- INPUTS & SELECTS (shared fixes for strip + bar) ---- */
.booking-strip .form-control,
.booking-strip .form-select,
.booking-bar select,
.booking-bar input {
  height: 44px;                   /* keeps strip slim */
  min-height: 44px;
  line-height: 1.2;               /* FIX: prevents date text clipping */
  padding: 10px 12px;             /* real vertical padding */
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Improve native date input rendering on mobile/WebKit */
.booking-strip input[type="date"],
.booking-bar   input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;                /* avoids zoom & cropping */
}
.booking-strip input[type="date"]::-webkit-date-and-time-value,
.booking-bar   input[type="date"]::-webkit-date-and-time-value{
  text-align: left;
}
.booking-strip input[type="date"]::-webkit-calendar-picker-indicator,
.booking-bar   input[type="date"]::-webkit-calendar-picker-indicator{
  padding: 6px;
}

/* ---------- BOOKING STRIP / BAR RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .booking-bar { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
}
@media (max-width: 767.98px) {
  .booking-bar { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .booking-strip-shell{ padding: 8px 10px; border-radius:12px; }
  .booking-strip{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .booking-strip .form-control,
  .booking-strip .form-select{
    min-height: 48px;             /* extra headroom on small screens */
  }
}
@media (max-width: 767.98px){ .booking-bar .btn { width: 100%; } }

/* ---------- TAGS & LABELS ---------- */
.tag { display: inline-block; background: var(--silver); color: #064; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; }
.badge-left { color: #d6336c; background: #fde2e7; border-radius: 999px; padding: 0.25rem 0.5rem; }

/* ---------- GALLERY GRID ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.gallery-grid img:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
@media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-grid img { height: auto; } }

/* ---------- BOOKING PAGE IMAGES ---------- */
.room-image { width: 100%; height: auto; border-radius: 12px; margin: 12px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.room-image:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

/* ---------- RATING STARS ---------- */
.rating { color: #f1b400; }

/* ---------- FOOTER ---------- */
footer { background: #1b1b1b; color: #eee; text-align: center; padding: 20px 0; font-size: 0.9rem; }
footer a { color: var(--silver); text-decoration: none; }
footer a:hover { color: var(--green); }

/* ===========================================================
   ROOM CARD SLIDER (bookings.php)
   =========================================================== */
.room-slider{ position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-top-left-radius: 16px; border-top-right-radius: 16px; background: #ddd; }
.room-slider::before, .room-slider::after{ content:""; position:absolute; inset:0; background-image: var(--room-a); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; transition: opacity 700ms ease-in-out; will-change: opacity; }
.room-slider::after{ background-image: var(--room-b); opacity: 0; }
.room-slider.show-b::before{ opacity: 0; }
.room-slider.show-b::after { opacity: 1; }

/* ===========================================================
   WATERMARK BACKGROUND (about/testimonials/contact)
   =========================================================== */
body.has-village-bg::before{
  content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/logo.png") center center / contain no-repeat, #ffffff;
  opacity: .06;
}
@media (min-width: 1400px){ body.has-village-bg::before{ opacity: .08; } }

/* ===========================================================
   MOBILE ENHANCEMENTS
   =========================================================== */
@media (max-width: 575.98px) {
  .navbar { padding-top: .35rem; padding-bottom: .35rem; }
  .navbar .navbar-brand { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
  .navbar .btn { padding: .375rem .6rem; font-size: .875rem; }
}
h1, .h1 { font-size: clamp(1.6rem, 2.6vw + 1rem, 2.6rem); }
h2, .h2 { font-size: clamp(1.3rem, 2vw + .9rem, 2rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.6vw + .9rem, 1.6rem); }
.btn, .form-control, .form-select { min-height: 46px; }
@media (max-width: 575.98px) { .card { box-shadow: 0 2px 12px rgba(0,0,0,.06); border-radius: 14px; } .container, .container-fluid { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 767.98px) { .hero .hero-content { padding: 0 12px; } .glass { background: rgba(255,255,255,.9); } }
@media (max-width: 575.98px) { .room-slider { aspect-ratio: 4 / 3; } }
@media (max-width: 420px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-grid img { height: 48vw; } }
@media (max-width: 767.98px) {
  .mobile-cta { position: sticky; bottom: 0; left: 0; right: 0; background: rgba(34,139,34,.97); display: flex; gap: 10px; justify-content: center; align-items: center; padding: 10px; z-index: 1030; box-shadow: 0 -6px 18px rgba(0,0,0,.12); }
  .mobile-cta a { color: #fff; font-weight: 600; text-decoration: none; }
  .mobile-cta .btn { background: #fff; color: #145; }
}
@media (prefers-reduced-motion: reduce) { .room-slider::before, .room-slider::after { transition: none; } }

/* ===========================================================
   TESTIMONIALS – Banana Leaf Cards
   =========================================================== */
.testimonials-section h2{ margin-bottom:16px; }
.leaf-grid{ display:grid; grid-template-columns: repeat(5, minmax(220px,1fr)); gap:22px; align-items:stretch; }
@media (max-width: 1200px){ .leaf-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); } }
@media (max-width: 900px)  { .leaf-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 540px)  { .leaf-grid{ grid-template-columns: 1fr; } }
.leaf-card{ position: relative; background-image: url('/assets/img/banana.jpg'), url('/assets/img/banana%20leaf.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; aspect-ratio: 5 / 2; border-radius: 18px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.08)); overflow: hidden; }
.leaf-content{ position:absolute; inset: 11% 12% 16% 12%; display:flex; flex-direction:column; justify-content:flex-end; color:#000; font-family: 'Comic Sans MS','Comic Sans',cursive; text-shadow:none; }
.leaf-quote{ position:absolute; top:10px; left:16px; font-size:40px; line-height:1; color:rgba(0,0,0,.32); font-weight:800; pointer-events:none; }
.leaf-name{ margin:0 0 6px 0; font-weight:700; font-size:1.05rem; color:#000; }
.leaf-stars{ color:#f1b400; letter-spacing:2px; margin-bottom:6px; font-size:1rem; }
.leaf-text{ margin:0; font-size:.98rem; line-height:1.38; }
.quote-open, .quote-close, .leaf-stem, .leaf-avatar { display:none !important; }

/* ===========================================================
   NEW: Checkout fixes (aligned policies + always-visible button)
   =========================================================== */
.checks { margin: 12px 0 16px; }
.checkrow { display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.checkrow .check { width:18px; height:18px; margin-top:2px; flex:0 0 auto; }
.checkrow .checktext { font-size:14px; line-height:1.4; color:#444; }

/* Custom primary button that remains visible when disabled */
.primary-btn{
  width:100%;
  border:none;
  border-radius:10px;
  padding:14px 18px;
  font-size:17px;
  cursor:pointer;
  background:#cfd4da;   /* disabled look */
  color:#555;
  opacity:1;            /* keep visible even when disabled */
  transition:background .15s ease;
}
.primary-btn:not([disabled]){ background:#1b6d1b; color:#fff; }
.primary-btn:not([disabled]):hover{ background:#228B22; }

/* Guard in case any global style hides disabled buttons */
button[disabled]{ opacity:1 !important; pointer-events:auto; }