/* ===========================================================
   Greenleaf Hotel & Resort — Booking page
   =========================================================== */

   :root{
    --green-950:#0e1f16;
    --green-900:#14301f;
    --green-800:#1c4029;
    --green-700:#26522f;
  
    --cream:#f7f3ea;
    --cream-dim:#efe8d8;
    --ink:#1c1a15;
    --ink-soft:#54503f;
    --paper:#fffdf8;
  
    --gold-100:#f6e6b8;
    --gold-300:#e9c877;
    --gold-500:#c9a24a;
    --gold-600:#a9812f;
  
    --font-display:'Cormorant Garamond', serif;
    --font-body:'Jost', sans-serif;
    --ease:cubic-bezier(.16,.8,.3,1);
  }
  
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }
  
  
  /* ===========================================================
     SECTION 1 — HERO + FLOATING BOOKING FORM
     =========================================================== */
  .b-hero{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; background:var(--green-950); padding-bottom:60px; }
  .b-hero-media{ position:absolute; inset:0; }
  .b-hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); animation:bHeroZoom 20s ease-out forwards; }
  @keyframes bHeroZoom{ to{ transform:scale(1); } }
  .b-hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(14,31,22,.96) 0%, rgba(14,31,22,.82) 34%, rgba(14,31,22,.28) 66%, rgba(14,31,22,.06) 100%);
  }
  .b-hero-content{ position:relative; z-index:2; max-width:600px; padding:96px 5vw 0; color:var(--cream); }
  .b-hero-title .line{ overflow:hidden; display:block; }
  .b-hero-title .line span{
    display:block; font-family:var(--font-display); font-size:clamp(2.4rem, 5.4vw, 3.8rem); font-weight:600;
    color:var(--cream); transform:translateY(112%); transition:transform 1s var(--ease);
  }
  .b-hero-title .line:nth-child(1) span{ transition-delay:.15s; }
  .b-hero-title .line:nth-child(2) span{ transition-delay:.3s; }
  .b-hero-title.in-view .line span{ transform:translateY(0); }
  .b-hero-sub{ font-size:.98rem; line-height:1.7; color:rgba(247,243,234,.8); max-width:420px; margin:20px 0 30px; font-weight:300; }
  
  .b-badges{ display:flex; gap:34px; }
  .b-badge{ display:flex; align-items:center; gap:10px; }
  .b-badge svg{ width:26px; height:26px; flex:none; fill:none; stroke:var(--gold-300); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .b-badge span{ font-size:.78rem; line-height:1.4; color:rgba(247,243,234,.85); }
  
  /* floating booking form bar */
  .book-form{
    position:relative; z-index:3; margin:56px 5vw 0;
    background:var(--paper); border-radius:8px;
    box-shadow:0 30px 60px -24px rgba(14,31,22,.5);
    padding:26px 28px;
    display:grid; grid-template-columns:repeat(4, 1fr) auto; gap:20px; align-items:end;
  }
  .bf-field{ display:flex; flex-direction:column; gap:8px; }
  .bf-field label{ font-size:.74rem; color:var(--ink-soft); font-weight:500; }
  .bf-input{ position:relative; display:flex; align-items:center; }
  .bf-input input, .bf-input select{
    width:100%; border:1px solid #ddd2b0; border-radius:4px; background:var(--cream);
    padding:12px 40px 12px 14px; font-family:var(--font-body); font-size:.88rem; color:var(--ink);
    outline:none; appearance:none; transition:border-color .3s ease, box-shadow .3s ease;
  }
  .bf-input input:focus, .bf-input select:focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,74,.16); }
  .bf-input svg{
    position:absolute; right:12px; width:16px; height:16px; pointer-events:none;
    fill:none; stroke:var(--gold-600); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  }
  .bf-input select{ padding-right:34px; }
  .bf-submit{ height:46px; white-space:nowrap; }
  
  /* ===========================================================
     SECTION 2 — ROOM CAROUSEL
     =========================================================== */
  .rooms-section{ background:var(--cream-dim); padding:100px 5vw 110px; }
  .room-carousel{ position:relative; max-width:1240px; margin:52px auto 0; display:flex; align-items:center; gap:14px; }
  .rc-arrow{
    flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
    background:var(--green-950); color:var(--gold-300);
    display:flex; align-items:center; justify-content:center;
    transition:background .3s ease, transform .3s ease; box-shadow:0 14px 26px -14px rgba(14,31,22,.5);
  }
  .rc-arrow:hover{ background:var(--gold-500); color:var(--green-950); transform:scale(1.06); }
  .rc-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  
  .rc-track-wrap{ flex:1; overflow:hidden; }
  .rc-track{ display:flex; gap:28px; transition:transform .6s var(--ease); }
  
  .room-card{
    flex:0 0 calc((100% - 56px) / 3);
    background:var(--paper); border:1px solid #e6ddc4; border-radius:6px; overflow:hidden;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s ease, background .5s ease;
  }
  .room-card:hover{
    transform:translateY(-8px); box-shadow:0 30px 55px -30px rgba(20,48,31,.35);
    border-color:var(--green-700); background:var(--green-900);
  }
  .room-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
  .room-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .room-card:hover .room-media img{ transform:scale(1.08); }
  .room-badge{
    position:absolute; top:14px; left:14px; z-index:1;
    padding:7px 14px; border-radius:20px;
    background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
    color:var(--green-950); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
  }
  
  .room-body{ padding:24px 22px 26px; }
  .room-body h3{ font-size:1.3rem; color:var(--green-900); margin-bottom:8px; transition:color .4s ease; }
  .room-card:hover .room-body h3{ color:var(--cream); }
  .room-body > p{ font-size:1rem; line-height:1.55; color:var(--ink-soft); margin:0 0 18px; font-weight:300; transition:color .4s ease; }
  .room-card:hover .room-body > p{ color:rgba(247,243,234,.85); }
  
  .room-feats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed #ddd2b0; transition:border-color .4s ease; }
  .room-card:hover .room-feats{ border-bottom-color:rgba(247,243,234,.18); }
  .room-feats li{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; font-size:.68rem; color:var(--ink-soft); transition:color .4s ease; }
  .room-card:hover .room-feats li{ color:rgba(247,243,234,.7); }
  .room-feats svg{ width:18px; height:18px; fill:none; stroke:var(--gold-600); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .room-card:hover .room-feats svg{ stroke:var(--gold-300); }
  
  .room-price{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--green-800); margin-bottom:16px; transition:color .4s ease; }
  .room-card:hover .room-price{ color:var(--gold-300); }
  .room-price .currency{ font-size:.95rem; vertical-align:2px; }
  .room-price .per{ font-family:var(--font-body); font-size:.72rem; color:var(--ink-soft); font-weight:400; transition:color .4s ease; }
  .room-card:hover .room-price .per{ color:rgba(247,243,234,.55); }
  .room-select{ width:100%; transition:background .4s ease, color .4s ease, transform .35s var(--ease), box-shadow .35s var(--ease); }
  .room-card:hover .room-select{ background:var(--gold-500); color:var(--green-950); }
  
  /* ===========================================================
     SECTION 3 — WHY BOOK DIRECT
     =========================================================== */
  .direct-section{ background:var(--cream-dim); padding:0 5vw 110px; }
  .direct-card{
    position:relative; overflow:hidden; max-width:1240px; margin:0 auto;
    background:var(--green-950); border-radius:10px;
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    box-shadow:0 40px 70px -36px rgba(14,31,22,.5);
  }
  .direct-leaf{ position:absolute; right:-20px; bottom:-20px; width:200px; opacity:.06; pointer-events:none; }
  .direct-leaf svg{ width:100%; fill:none; stroke:var(--gold-300); stroke-width:2; }
  
  .direct-text{ padding:56px 50px; position:relative; z-index:1; }
  .direct-text h2{ font-size:clamp(1.8rem, 3.2vw, 2.4rem); line-height:1.2; color:var(--cream); margin:0 0 26px; }
  .direct-list{ display:flex; flex-direction:column; gap:16px; }
  .direct-list li{ display:flex; align-items:center; gap:12px; font-size:.92rem; color:rgba(247,243,234,.85); }
  .direct-list svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--gold-300); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  
  .direct-media{ position:relative; min-height:320px; overflow:hidden; }
  .direct-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .direct-card:hover .direct-media img{ transform:scale(1.06); }
  
  .help-card{
    position:absolute; right:24px; bottom:24px; z-index:2;
    background:var(--paper); border-radius:10px; padding:20px 22px;
    box-shadow:0 24px 50px -20px rgba(0,0,0,.4);
    max-width:270px;
  }
  .help-icon{
    width:42px; height:42px; border-radius:50%; background:var(--gold-100);
    display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  }
  .help-icon svg{ width:19px; height:19px; fill:none; stroke:var(--gold-600); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .help-text strong{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--green-900); margin-bottom:4px; }
  .help-text p{ font-size:.8rem; line-height:1.5; color:var(--ink-soft); margin:0 0 14px; }
  .help-phone{
    display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:4px;
    background:var(--green-950); color:var(--gold-300); font-size:.82rem; font-weight:500;
    transition:background .3s ease;
  }
  .help-phone:hover{ background:var(--green-800); }
  .help-phone svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  
  /* ===========================================================
     SECTION 4 — TRUST BAR
     =========================================================== */
  .trust-bar{
    background:var(--cream); padding:56px 5vw 90px;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
    max-width:1240px; margin:0 auto;
  }
  .trust-item{ display:flex; align-items:flex-start; gap:14px; }
  .trust-icon{
    width:42px; height:42px; flex:none; border-radius:50%; border:1.5px solid var(--gold-500);
    display:flex; align-items:center; justify-content:center;
  }
  .trust-icon svg{ width:18px; height:18px; fill:none; stroke:var(--gold-600); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .trust-item h4{ font-size:.9rem; color:var(--green-900); margin-bottom:6px; }
  .trust-item p{ font-size:.8rem; line-height:1.5; color:var(--ink-soft); margin:0; font-weight:300; }
  
  /* ===========================================================
     BACK TO TOP
     =========================================================== */
  .back-to-top{
    position:fixed; right:26px; bottom:26px; z-index:90;
    width:46px; height:46px; border-radius:50%;
    background:var(--green-900); color:var(--gold-300); border:1px solid var(--gold-600);
    font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .back-to-top:hover{ background:var(--gold-500); color:var(--green-950); }
  
  /* ===========================================================
     RESPONSIVE
     =========================================================== */
  @media (max-width: 1080px){
    .room-card{ flex:0 0 calc((100% - 28px) / 2); }
  }
  @media (max-width: 980px){
    .nav-cta{ display:none; }
    .nav-toggle{ display:flex; }
    .book-form{ grid-template-columns:1fr 1fr; }
    .bf-submit{ grid-column:1 / -1; }
    .direct-card{ grid-template-columns:1fr; }
    .direct-media{ min-height:280px; }
    .trust-bar{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 720px){
    .b-hero{ padding-bottom:40px; }
    .b-badges{ gap:18px; flex-wrap:wrap; }
    .rooms-section, .trust-bar{ padding-left:6vw; padding-right:6vw; }
    .direct-section{ padding-left:6vw; padding-right:6vw; }
    .direct-text{ padding:44px 30px; }
    .room-card{ flex:0 0 100%; }
    .help-card{ position:static; margin:16px; max-width:none; }
    .trust-bar{ grid-template-columns:1fr; padding:50px 6vw 70px; }
  
    .main-nav{
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:0; position:fixed; top:0; right:0; bottom:0; z-index:99;
      width:78%; max-width:340px;
      padding:110px 30px 40px;
      background:var(--green-950);
      overflow-y:auto;
      transform:translateX(100%);
      visibility:hidden;
      transition:transform .5s cubic-bezier(.16,.8,.3,1), visibility .5s, box-shadow .5s ease;
      box-shadow:
        -20px 0 50px -18px rgba(0,0,0,0),
        -100vw 0 0 100vw rgba(14,31,22,0);
    }
    .main-nav.open{
      transform:translateX(0);
      visibility:visible;
      box-shadow:
        -20px 0 50px -18px rgba(0,0,0,.5),
        -100vw 0 0 100vw rgba(14,31,22,.6);
    }
    .main-nav a{
      display:flex; align-items:center; gap:14px;
      width:100%; padding:16px 4px;
      border-bottom:1px solid rgba(247,243,234,.08);
      font-family:var(--font-display); font-size:1.15rem; font-weight:500;
      opacity:0; transform:translateX(24px);
      transition:opacity .4s ease, transform .4s ease, color .3s ease;
    }
    .main-nav a::after{ display:none; }
    .main-nav.open a{ opacity:1; transform:translateX(0); }
    .main-nav.open a:nth-child(1){ transition-delay:.1s; }
    .main-nav.open a:nth-child(2){ transition-delay:.16s; }
    .main-nav.open a:nth-child(3){ transition-delay:.22s; }
    .main-nav.open a:nth-child(4){ transition-delay:.28s; }
    .main-nav.open a:nth-child(5){ transition-delay:.34s; }
  }