/* ============================================================
   The Kodai Mist Valley — Modern Premium Light Theme (Bento UI)
   ============================================================ */

/* ---- RESET & BASE ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

:root {
   --bg-color: #FAFAFA;
   --surface-color: #FFFFFF;
   --surface-hover: #F9FAFB;
   --border-color: #E5E7EB;

   --primary-color: #111827;
   --secondary-color: #4B5563;

   /* --gold: #D4AF37;
   --gold-hover: #B5952F; */
   --gold-light: #FDF8E8;

   --gold: #1eb916;
   --gold-hover: #4f951b;

   --text-main: #111827;
   --text-muted: #6B7280;

   --radius: 20px;
   --radius-sm: 12px;
   --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
   --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
   --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

   --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   --font-heading: 'Playfair Display', serif;
   --font-body: 'Poppins', sans-serif;

   /* Fallbacks for inline styles */
   --dark: var(--text-main);
   --text-light: var(--text-muted);
   --cream-dark: var(--border-color);
   --cream: transparent;
}

body {
   font-family: var(--font-body);
   background-color: var(--bg-color);
   color: var(--text-main);
   overflow-x: hidden;
   line-height: 1.7;
}

img {
   max-width: 100%;
   display: block;
   border-radius: var(--radius-sm);
}

a {
   text-decoration: none;
   color: inherit;
   transition: var(--transition);
}

ul {
   list-style: none;
}

button {
   cursor: pointer;
   border: none;
   outline: none;
   font-family: inherit;
}

/* ======================================================
   HEADER
   ====================================================== */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 1.2rem 2rem;
   transition: var(--transition);
   background: transparent;
}

.site-header.scrolled {
   padding: 0.8rem 2rem;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow-sm);
   border-bottom: 1px solid var(--border-color);
}

.header-inner {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.logo-link {
   display: flex;
   align-items: center;
   gap: 15px;
}

.logo-img {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   border: 2px solid var(--gold);
}

.logo-name {
   font-family: var(--font-heading);
   font-size: 1.3rem;
   font-weight: 700;
   color: #fff;
   letter-spacing: 0.5px;
   transition: var(--transition);
}

.logo-sub {
   display: block;
   font-size: 0.65rem;
   color: rgba(255, 255, 255, 0.8);
   text-transform: uppercase;
   letter-spacing: 2px;
   transition: var(--transition);
}

.site-header.scrolled .logo-name {
   color: var(--text-main);
}

.site-header.scrolled .logo-sub {
   color: var(--text-muted);
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 2rem;
}

.nav-link {
   font-size: 0.9rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #fff;
   position: relative;
   transition: var(--transition);
}

.site-header.scrolled .nav-link {
   color: var(--text-main);
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--gold);
   transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 100%;
}

.nav-link:hover,
.nav-link.active {
   color: var(--gold) !important;
}

.nav-cta {
   background: var(--gold);
   color: #fff;
   padding: 10px 24px;
   border-radius: 30px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 0.85rem;
   box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.nav-cta:hover {
   background: var(--gold-hover);
   transform: translateY(-2px);
   color: #fff !important;
}

.mobile-toggle {
   display: none;
   flex-direction: column;
   gap: 6px;
   background: transparent;
   z-index: 1001;
}

.mobile-toggle span {
   display: block;
   width: 28px;
   height: 2px;
   background: #fff;
   transition: var(--transition);
   border-radius: 2px;
}

.site-header.scrolled .mobile-toggle span {
   background: var(--text-main);
}

.mobile-toggle.active span:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
   background: var(--text-main);
}

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

.mobile-toggle.active span:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
   background: var(--text-main);
}

.mobile-menu-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(3px);
   z-index: 998;
}

.mobile-menu-overlay.active {
   display: block;
}

/* ======================================================
   HERO
   ====================================================== */
.hero {
   position: relative;
   height: 100vh;
   min-height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #111;
   overflow: hidden;
}

.hero-slider-wrap {
   position: absolute;
   inset: 0;
}

.hero-slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 1s ease;
}

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

.hero-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0;
   animation: scaleUp 15s ease infinite alternate;
}

@keyframes scaleUp {
   from {
      transform: scale(1);
   }

   to {
      transform: scale(1.1);
   }
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
   z-index: 2;
}

.hero-content {
   position: relative;
   z-index: 3;
   text-align: center;
   max-width: 900px;
   padding: 0 20px;
   margin-top: 50px;
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 20px;
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(5px);
   border-radius: 30px;
   color: #fff;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 2rem;
}

.hero-title {
   font-family: var(--font-heading);
   font-size: clamp(3rem, 7vw, 6rem);
   line-height: 1.1;
   margin-bottom: 1.5rem;
   color: #fff;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-title .gold {
   color: var(--gold);
   font-style: italic;
}

.hero-sub {
   font-size: clamp(1.1rem, 2vw, 1.4rem);
   color: rgba(255, 255, 255, 0.9);
   font-weight: 300;
   letter-spacing: 1px;
   max-width: 600px;
   margin: 0 auto 2.5rem;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.slider-dots {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   gap: 10px;
}

.slider-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: var(--transition);
   border: 2px solid transparent;
}

.slider-dot.active {
   background: transparent;
   border-color: var(--gold);
   transform: scale(1.2);
}

.slider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: #fff;
   font-size: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(5px);
   transition: var(--transition);
}

.slider-arrow:hover {
   background: var(--gold);
   border-color: var(--gold);
}

.slider-arrow.prev {
   left: 20px;
}

.slider-arrow.next {
   right: 20px;
}

/* ======================================================
   SECTION UTILS
   ====================================================== */
section {
   padding: 100px 2rem;
   position: relative;
}

.container {
   max-width: 1400px;
   margin: 0 auto;
}

.section-tag {
   color: var(--gold);
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
   margin-bottom: 10px;
}

.section-title {
   font-family: var(--font-heading);
   font-size: clamp(2.2rem, 4vw, 3.5rem);
   line-height: 1.2;
   color: var(--text-main);
   margin-bottom: 20px;
}

.section-title .italic {
   font-style: italic;
   color: var(--gold);
}

.section-desc {
   color: var(--text-muted);
   font-size: 1.1rem;
   max-width: 600px;
   margin: 0 auto 40px;
   line-height: 1.7;
}

.section-divider {
   width: 60px;
   height: 3px;
   background: var(--gold);
   margin: 20px auto;
   border-radius: 2px;
}

/* ======================================================
   COTTAGES GRID
   ====================================================== */
.cottages-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 40px;
}

.cottage-card {
   background: var(--surface-color);
   border-radius: var(--radius);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   transition: var(--transition);
   display: flex;
   flex-direction: column;
}

.cottage-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-lg);
   border-color: var(--gold);
}

.card-img-wrap {
   width: 100%;
   height: 300px;
   position: relative;
   overflow: hidden;
   border-radius: 0;
}

.card-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
   border-radius: 0;
}

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

.card-badge {
   position: absolute;
   top: 20px;
   left: 20px;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(5px);
   color: var(--text-main);
   padding: 8px 16px;
   border-radius: 30px;
   font-size: 0.8rem;
   font-weight: 600;
   box-shadow: var(--shadow-sm);
   z-index: 2;
}

.card-badge i {
   color: var(--gold);
   margin-right: 5px;
}

.card-wishlist {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   background: #fff;
   color: #E11D48;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   border: none;
   cursor: pointer;
}

.card-wishlist:hover {
   background: #E11D48;
   color: #fff;
   transform: scale(1.1);
}

.card-body {
   padding: 30px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.card-title {
   font-family: var(--font-heading);
   font-size: 1.6rem;
   color: var(--text-main);
   margin-bottom: 10px;
}

.card-desc {
   color: var(--text-muted);
   font-size: 0.95rem;
   margin-bottom: 25px;
   line-height: 1.6;
}

.card-amenities {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 25px;
}

.amenity-tag {
   background: var(--bg-color);
   border: 1px solid var(--border-color);
   padding: 6px 14px;
   border-radius: 8px;
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--text-main);
   display: flex;
   align-items: center;
   gap: 6px;
}

.amenity-tag i {
   color: var(--gold);
}

.card-footer-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   padding-top: 20px;
   border-top: 1px solid var(--border-color);
   margin-top: auto;
   margin-bottom: 25px;
}

.card-price .orig {
   font-size: 0.9rem;
   text-decoration: line-through;
   color: var(--text-muted);
}

.card-price .current {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 700;
   color: var(--text-main);
   line-height: 1;
}

.card-price .per {
   font-size: 0.95rem;
   color: var(--text-muted);
   font-weight: 400;
}

.btn-book {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 16px;
   background: var(--surface-color);
   color: var(--text-main);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.95rem;
   letter-spacing: 1px;
   border-radius: var(--radius-sm);
   border: 2px solid var(--gold);
   transition: var(--transition);
}

.btn-book:hover {
   background: var(--gold);
   color: #fff;
}

/* ======================================================
   BENTO GRID (EXPERIENCE)
   ====================================================== */
.bento-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: minmax(250px, auto);
   gap: 20px;
}

.bento-card {
   background: #fff;
   border-radius: var(--radius);
   padding: 40px;
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   position: relative;
   overflow: hidden;
}

.bento-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
   border-color: var(--gold);
}

.bento-card::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 150px;
   height: 150px;
   background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
   opacity: 0;
   transition: var(--transition);
   border-radius: 50%;
   pointer-events: none;
}

.bento-card:hover::after {
   opacity: 0.5;
   transform: translate(30%, -30%);
}

.bento-icon {
   width: 60px;
   height: 60px;
   margin-bottom: 20px;
   background: var(--gold-light);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   color: var(--gold);
}

.bento-card h4 {
   font-family: var(--font-heading);
   font-size: 1.4rem;
   margin-bottom: 12px;
   color: var(--text-main);
}

.bento-card p {
   color: var(--text-muted);
   font-size: 1rem;
   line-height: 1.6;
}

/* Bento specific sizing */
.bento-card.large {
   grid-column: span 2;
   grid-row: span 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: var(--primary-color);
   color: #fff;
}

.bento-card.large .bento-icon {
   background: rgba(255, 255, 255, 0.1);
   color: var(--gold);
}

.bento-card.large h4 {
   color: #fff;
   font-size: 2.2rem;
}

.bento-card.large p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.1rem;
}

.bento-card.wide {
   grid-column: span 2;
}

/* ======================================================
   GALLERY (VISUAL JOURNEY)
   ====================================================== */
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   margin-top: 40px;
}

.gallery-item {
   position: relative;
   height: 300px;
   border-radius: var(--radius-sm);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
}

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

.gallery-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition);
}

.gallery-overlay i {
   color: #fff;
   font-size: 2rem;
   transform: scale(0.5);
   transition: var(--transition);
}

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

.gallery-item:hover .gallery-overlay {
   opacity: 1;
}

.gallery-item:hover .gallery-overlay i {
   transform: scale(1);
}

/* ======================================================
   TESTIMONIALS (REVIEWS)
   ====================================================== */
.testimonials-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 30px;
   margin-top: 40px;
}

.testi-card {
   background: var(--surface-color);
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   padding: 40px;
   position: relative;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
}

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

.testi-card::before {
   content: '\201C';
   position: absolute;
   top: 20px;
   right: 30px;
   font-family: var(--font-heading);
   font-size: 6rem;
   color: var(--gold-light);
   line-height: 1;
   z-index: 0;
}

.testi-stars {
   color: var(--gold);
   font-size: 1.2rem;
   margin-bottom: 15px;
   position: relative;
   z-index: 1;
}

.testi-text {
   font-size: 1.05rem;
   font-style: italic;
   color: var(--secondary-color);
   margin-bottom: 30px;
   position: relative;
   z-index: 1;
   line-height: 1.8;
}

.testi-author {
   display: flex;
   align-items: center;
   gap: 15px;
   border-top: 1px solid var(--border-color);
   padding-top: 20px;
   position: relative;
   z-index: 1;
}

.testi-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--gold);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-heading);
   font-size: 1.3rem;
   font-weight: 700;
   text-transform: uppercase;
}

.testi-name {
   font-weight: 600;
   font-size: 1.1rem;
   color: var(--text-main);
}

.testi-meta {
   font-size: 0.85rem;
   color: var(--text-muted);
}

/* ======================================================
   CTA SECTION (FLOATING BANNER)
   ====================================================== */
.cta-banner {
   max-width: 1200px;
   margin: 0 auto;
   background: var(--primary-color);
   border-radius: var(--radius);
   padding: 80px 40px;
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   color: #fff;
}

.cta-banner::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
   z-index: 0;
   pointer-events: none;
}

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

.cta-banner .section-title {
   color: #fff;
   margin-bottom: 10px;
}

.cta-banner .section-desc {
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 30px;
}

/* ======================================================
   FOOTER
   ====================================================== */
.site-footer {
   border-top: 1px solid var(--border-color);
   padding: 100px 2rem 20px;
   background: #fff;
   margin-top: 100px;
}

.footer-grid {
   max-width: 1400px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 50px;
   margin-bottom: 60px;
}

.footer-logo {
   width: 200px;
   height: 200px;
   border: 2px solid var(--gold);
   border-radius: 50%;
   margin-bottom: 20px;
}

.footer-brand h3 {
   font-family: var(--font-heading);
   font-size: 1.5rem;
   margin-bottom: 15px;
   color: var(--text-main);
}

.footer-brand p {
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 25px;
   font-size: 0.95rem;
}

.footer-links h4,
.footer-contact h4,
.footer-map h4 {
   font-family: var(--font-heading);
   font-size: 1.3rem;
   margin-bottom: 25px;
   color: var(--text-main);
}

.footer-links ul li,
.footer-contact ul li {
   margin-bottom: 15px;
}

.footer-links a,
.footer-contact a {
   color: var(--text-muted);
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1rem;
}

.footer-links a:hover,
.footer-contact a:hover {
   color: var(--gold);
   transform: translateX(5px);
}

.footer-contact i {
   color: var(--gold);
   width: 20px;
}

.footer-bottom {
   text-align: center;
   border-top: 1px solid var(--border-color);
   padding-top: 30px;
   color: var(--text-muted);
   font-size: 0.9rem;
}

/* ======================================================
   DETAIL PAGES
   ====================================================== */
.page-banner {
   position: relative;
   height: 35vh;
   min-height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: url('../images/banner/banner3.jpeg') center/cover;
   text-align: center;
   padding-top: 80px;
}

.banner-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
}

.banner-content {
   position: relative;
   z-index: 2;
   margin-top: 40px;
}

.banner-content h1 {
   font-family: var(--font-heading);
   font-size: clamp(2.5rem, 5vw, 4rem);
   color: #fff;
   margin-bottom: 10px;
}

.breadcrumb {
   display: flex;
   gap: 10px;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.9rem;
   justify-content: center;
}

.breadcrumb a:hover {
   color: var(--gold);
}

.detail-body {
   max-width: 1400px;
   margin: -50px auto 60px;
   padding: 0 2rem;
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 50px;
   position: relative;
   z-index: 10;
   align-items: start;
}

.detail-body>div {
   min-width: 0;
}

.detail-gallery {
   background: #fff;
   padding: 15px;
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
   border: 1px solid var(--border-color);
   min-width: 0;
   overflow: hidden;
}

.gallery-swiper {
   width: 100%;
   height: 500px;
   border-radius: var(--radius-sm);
   overflow: hidden;
   position: relative;
   background: var(--surface-hover);
   display: flex;
   align-items: center;
   justify-content: center;
}

.gallery-main-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 0;
   transition: opacity 0.3s ease;
}

.gallery-thumbs {
   display: flex;
   gap: 12px;
   margin-top: 15px;
   overflow-x: auto;
   padding-bottom: 8px;
   scroll-behavior: smooth;
}

.gallery-thumbs::-webkit-scrollbar {
   height: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
   background: var(--bg-color);
   border-radius: 10px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
   background: var(--gold);
   border-radius: 10px;
}

.gallery-thumb {
   width: 100px;
   height: 75px;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
   border: 2px solid transparent;
   opacity: 0.5;
   transition: var(--transition);
   flex-shrink: 0;
   background: #000;
}

.gallery-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0;
   transition: transform 0.4s ease;
}

.gallery-thumb.active,
.gallery-thumb:hover {
   border-color: var(--gold);
   opacity: 1;
}

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

.booking-card {
   position: sticky;
   top: 120px;
   background: #fff;
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   padding: 40px;
   box-shadow: var(--shadow-md);
}

.price-display {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 20px;
   margin-bottom: 30px;
}

.price-main {
   font-family: var(--font-heading);
   font-size: 2.5rem;
   color: var(--gold);
   font-weight: 700;
   line-height: 1;
}

.price-info {
   font-size: 0.9rem;
   color: var(--text-muted);
}

.amenities-wrapper {
   background: #fff;
   padding: 35px;
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
   border: 1px solid var(--border-color);
   margin-top: 3rem;
}

.amenities-wrapper h3 {
   font-family: var(--font-heading);
   font-size: 1.6rem;
   color: var(--text-main);
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.amenities-wrapper h3 i {
   color: var(--gold);
}

.amenities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 15px;
}

.amenity-item {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg-color);
   padding: 16px 20px;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-color);
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--text-main);
   transition: var(--transition);
}

.amenity-item i {
   color: var(--gold);
   font-size: 1.2rem;
   width: 24px;
   text-align: center;
}

.amenity-item:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-sm);
   border-color: var(--gold);
   background: #fff;
}

/* Contact Specific */
.contact-wrapper {
   max-width: 1400px;
   margin: 80px auto;
   padding: 0 2rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
}

.contact-lead {
   font-size: 1.1rem;
   color: var(--text-muted);
   line-height: 1.8;
}

.contact-method-item {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 25px;
   background: #fff;
   padding: 20px;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
}

.contact-method-item:hover {
   border-color: var(--gold);
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
}

.method-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--gold-light);
   color: var(--gold);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.3rem;
}

.method-details h4 {
   font-size: 0.85rem;
   color: var(--text-muted);
   text-transform: uppercase;
   margin-bottom: 5px;
   font-weight: 600;
}

.method-details p {
   font-size: 1.05rem;
   font-weight: 500;
   color: var(--text-main);
}

.form-card {
   background: #fff;
   border: 1px solid var(--border-color);
   border-radius: var(--radius);
   padding: 40px;
   box-shadow: var(--shadow-md);
}

.form-group {
   margin-bottom: 25px;
}

.form-group label {
   display: block;
   margin-bottom: 8px;
   color: var(--text-main);
   font-size: 0.9rem;
   font-weight: 600;
}

.input-icon-wrap {
   position: relative;
}

.input-icon-wrap i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gold);
}

.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea {
   width: 100%;
   background: var(--bg-color);
   border: 1px solid var(--border-color);
   color: var(--text-main);
   padding: 14px 15px 14px 45px;
   border-radius: var(--radius-sm);
   font-family: inherit;
   font-size: 1rem;
   transition: var(--transition);
}

.input-icon-wrap textarea {
   padding-top: 14px;
}

.input-icon-wrap input:focus,
.input-icon-wrap select:focus,
.input-icon-wrap textarea:focus {
   border-color: var(--gold);
   outline: none;
   background: #fff;
   box-shadow: 0 0 0 4px var(--gold-light);
}

.btn-submit {
   background: var(--gold);
   color: #fff;
   border: none;
   width: 100%;
   padding: 16px;
   border-radius: var(--radius-sm);
   font-size: 1.05rem;
   font-weight: 600;
   text-transform: uppercase;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   transition: var(--transition);
   margin-top: 10px;
   box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.btn-submit:hover {
   background: var(--gold-hover);
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
   .bento-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .bento-card.large {
      grid-column: span 2;
   }

   .bento-card.wide {
      grid-column: span 2;
   }

   .detail-body {
      grid-template-columns: 1fr;
      margin-top: 40px;
   }

   .booking-card {
      position: static;
      margin-top: 20px;
   }

   .contact-wrapper {
      grid-template-columns: 1fr;
      gap: 50px;
   }
}

@media (max-width: 768px) {
   .bento-grid {
      grid-template-columns: 1fr;
   }

   .bento-card.large,
   .bento-card.wide {
      grid-column: span 1;
   }

   .site-header {
      padding: 1rem;
      background: #fff;
      border-bottom: 1px solid var(--border-color);
   }

   .logo-name {
      font-size: 1.1rem;
      color: var(--text-main);
   }

   .logo-sub {
      color: var(--text-muted);
   }

   .mobile-toggle {
      display: flex;
   }

   .mobile-toggle span {
      background: var(--text-main);
   }

   .main-nav {
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: #fff;
      border-left: 1px solid var(--border-color);
      flex-direction: column;
      padding: 100px 30px;
      transition: 0.4s ease;
      align-items: flex-start;
      z-index: 999;
      box-shadow: var(--shadow-lg);
   }

   .main-nav.open {
      right: 0;
   }

   .nav-link {
      color: var(--text-main);
      font-size: 1.1rem;
   }

   .nav-cta {
      margin-top: 20px;
      width: 100%;
      text-align: center;
   }

   .hero-title {
      font-size: 2.5rem;
   }

   .slider-arrow {
      display: none;
   }

   section {
      padding: 70px 1.5rem;
   }

   .section-title {
      font-size: 2rem;
   }

   .card-img-wrap {
      height: 220px;
   }

   .form-card {
      padding: 30px 20px;
   }

   .gallery-swiper {
      height: 300px;
   }
}