/* ============================================================================
 * Nature Holiday - Main Stylesheet (Production)
 * Pre-compiled from SCSS. Bootstrap 5 color overrides + custom components.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ----------------------------------------------------------------------------
 * 1. CSS Variables (Nature Holiday brand - Premium Travel & Minimalist)
 * ---------------------------------------------------------------------------- */
:root {
    --nh-primary:      #3E6547;
    --nh-primary-rgb:  62, 101, 71;
    --nh-dark-green:   #1B3622;
    --nh-light-green:  #87B390;
    --nh-orange:       #E69230;
    --nh-orange-rgb:   230, 146, 48;
    --nh-dark-orange:  #C5771D;
    --nh-cream:        #FAF9F5;
    --nh-charcoal:     #1D261F;
    --nh-muted:        #687669;
    --nh-white:        #ffffff;

    --nh-radius:       0.85rem;
    --nh-radius-sm:    0.5rem;
    --nh-radius-lg:    1.25rem;
    --nh-radius-xl:    1.75rem;

    --nh-shadow-sm:    0 2px 10px rgba(27, 54, 34, 0.03);
    --nh-shadow:       0 10px 30px rgba(27, 54, 34, 0.06);
    --nh-shadow-lg:    0 20px 50px rgba(27, 54, 34, 0.10);

    --nh-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --nh-font-serif:   'Playfair Display', Georgia, serif;

    /* Bootstrap overrides */
    --bs-primary:      #3E6547;
    --bs-primary-rgb:  62, 101, 71;
    --bs-secondary:    #E69230;
    --bs-secondary-rgb: 230, 146, 48;
    --bs-success:      #1B3622;
    --bs-success-rgb:  27, 54, 34;
    --bs-warning:      #E69230;
    --bs-warning-rgb:  230, 146, 48;
    --bs-body-bg:      #FAF9F5;
    --bs-body-color:   #1D261F;
    --bs-body-font-family: var(--nh-font-sans);
    --bs-link-color:   #3E6547;
    --bs-link-hover-color: #E69230;
    --bs-border-radius: 0.85rem;
}

/* ----------------------------------------------------------------------------
 * 2. Reset & Base
 * ---------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--nh-font-sans);
    background-color: var(--nh-cream);
    color: var(--nh-charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nh-font-serif);
    font-weight: 700;
    color: var(--nh-dark-green);
    line-height: 1.3;
}

a { color: var(--nh-dark-green); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--nh-orange); }

img { max-width: 100%; height: auto; }

.text-muted-nature { color: var(--nh-muted) !important; }

/* ----------------------------------------------------------------------------
 * 3. Bootstrap 5 Color Overrides
 * ---------------------------------------------------------------------------- */
.bg-primary    { background-color: var(--nh-primary) !important; }
.bg-secondary  { background-color: var(--nh-orange) !important; }
.bg-success    { background-color: var(--nh-dark-green) !important; }
.bg-light      { background-color: var(--nh-cream) !important; }
.bg-dark       { background-color: var(--nh-charcoal) !important; }
.bg-warning    { background-color: var(--nh-orange) !important; }
.bg-nature     { background-color: var(--nh-light-green) !important; }

.text-primary   { color: var(--nh-primary) !important; }
.text-secondary { color: var(--nh-orange) !important; }
.text-success   { color: var(--nh-dark-green) !important; }
.text-warning   { color: var(--nh-orange) !important; }

.btn {
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: var(--nh-radius);
    transition: all 0.25s ease-in-out;
}

.btn-primary {
    background-color: var(--nh-primary);
    border-color: var(--nh-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--nh-dark-green);
    border-color: var(--nh-dark-green);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--nh-primary-rgb), 0.4);
}

.btn-outline-primary {
    color: var(--nh-primary);
    border-color: var(--nh-primary);
}
.btn-outline-primary:hover {
    background-color: var(--nh-primary);
    color: #fff;
}

.btn-warning, .btn-secondary {
    background-color: var(--nh-orange);
    border-color: var(--nh-orange);
    color: #fff;
}
.btn-warning:hover, .btn-secondary:hover {
    background-color: var(--nh-dark-orange);
    border-color: var(--nh-dark-orange);
    color: #fff;
}

.btn-success {
    background-color: var(--nh-dark-green);
    border-color: var(--nh-dark-green);
    color: #fff;
}

/* ----------------------------------------------------------------------------
 * 4. Navbar Nature
 * ---------------------------------------------------------------------------- */
header {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar-nature {
    background-color: #ffffff;
    box-shadow: 0 1px 0 rgba(36, 46, 35, 0.04);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.75rem 0;
}
.navbar-nature::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--nh-primary) 0%, var(--nh-light-green) 50%, var(--nh-orange) 100%);
}
.navbar-nature .navbar-brand img {
    max-height: 50px;
    transition: transform 0.25s ease;
}
.navbar-nature .navbar-brand img:hover { transform: scale(1.05); }

.navbar-nature .nav-link {
    color: var(--nh-charcoal);
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: color 0.2s ease;
}
.navbar-nature .nav-link:hover,
.navbar-nature .nav-link.active {
    color: var(--nh-primary);
}
.navbar-nature .nav-link.active::before {
    content: '';
    position: absolute;
    bottom: -4px; left: 1rem; right: 1rem;
    height: 2px;
    background: var(--nh-primary);
    border-radius: 2px;
}

.navbar-nature .navbar-toggler {
    border-color: var(--nh-primary);
}
.navbar-nature .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--nh-primary-rgb), .25); }

/* ----------------------------------------------------------------------------
 * 5. Hero Section
 * ---------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    background-color: var(--nh-dark-green);
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg,
        rgba(27, 54, 34, 0.82) 0%,
        rgba(62, 101, 71, 0.6) 60%,
        rgba(230, 146, 48, 0.45) 100%);
}
.hero-section .hero-content {
    position: relative;
    z-index: 2;
}
.hero-section h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    text-shadow: 0 4px 20px rgba(27, 54, 34, 0.4);
    margin-bottom: 1.25rem;
}
.hero-section p.lead { color: rgba(255,255,255,0.95); font-size: 1.25rem; }
.hero-dot.active {
    background: #ffffff !important;
    width: 24px !important;
    border-radius: 5px !important;
}

.hero-search-sticky-wrapper {
    margin-top: -65px;
    margin-bottom: 35px;
    position: relative;
    z-index: 1010;
}
@media (min-width: 768px) {
    .hero-search-sticky-wrapper {
        position: sticky;
        top: 89px;
    }
}

.hero-search {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--nh-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--nh-shadow-lg) !important;
    margin-top: 2rem;
}

/* ----------------------------------------------------------------------------
 * 6. Cards (Package, Destination, Hotel, Restaurant)
 * ---------------------------------------------------------------------------- */
.card-package,
.card-destination,
.card-hotel,
.card-restaurant {
    border: 1px solid rgba(27, 54, 34, 0.05);
    border-radius: var(--nh-radius-lg);
    overflow: hidden;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--nh-shadow-sm);
    height: 100%;
}
.card-package .card-img-wrap,
.card-destination .card-img-wrap,
.card-hotel .card-img-wrap,
.card-restaurant .card-img-wrap {
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--nh-light-green);
}
.card-package .card-img-wrap img,
.card-destination .card-img-wrap img,
.card-hotel .card-img-wrap img,
.card-restaurant .card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-package:hover,
.card-destination:hover,
.card-hotel:hover,
.card-restaurant:hover {
    transform: translateY(-8px);
    box-shadow: var(--nh-shadow-lg);
    border-color: rgba(62, 101, 71, 0.2);
}
.card-package:hover .card-img-wrap img,
.card-destination:hover .card-img-wrap img,
.card-hotel:hover .card-img-wrap img,
.card-restaurant:hover .card-img-wrap img {
    transform: scale(1.06);
}
.card-package .card-title,
.card-destination .card-title,
.card-hotel .card-title,
.card-restaurant .card-title {
    font-family: var(--nh-font-serif);
    color: var(--nh-dark-green);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}
.card-package .card-body,
.card-destination .card-body,
.card-hotel .card-body,
.card-restaurant .card-body {
    padding: 1.25rem;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--nh-muted);
    margin-bottom: 0.5rem;
}
.card-meta i { color: var(--nh-primary); }

/* ----------------------------------------------------------------------------
 * 7. Book Button (Orange CTA)
 * ---------------------------------------------------------------------------- */
.btn-book {
    background: linear-gradient(135deg, var(--nh-orange) 0%, var(--nh-dark-orange) 100%);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: var(--nh-radius);
    box-shadow: 0 4px 12px rgba(var(--nh-orange-rgb), 0.4);
    transition: all 0.25s ease;
    display: inline-block;
    text-decoration: none;
}
.btn-book:hover, .btn-book:focus {
    background: linear-gradient(135deg, var(--nh-dark-orange) 0%, var(--nh-orange) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--nh-orange-rgb), 0.5);
    text-decoration: none;
}
.btn-book-lg { padding: 1rem 2.5rem; font-size: 1.125rem; }
.btn-book-block { display: block; width: 100%; text-align: center; }

/* ----------------------------------------------------------------------------
 * 8. Price tag
 * ---------------------------------------------------------------------------- */
.price-tag {
    display: inline-block;
    background: var(--nh-orange);
    color: #fff;
    padding: 0.35rem 0.85rem;
    font-weight: 700;
    border-radius: var(--nh-radius-sm);
    transform: rotate(-2deg);
    box-shadow: 0 2px 6px rgba(var(--nh-orange-rgb), 0.3);
    font-size: 0.95rem;
}
.price-tag-lg { font-size: 1.35rem; padding: 0.5rem 1.1rem; }

.price-original {
    text-decoration: line-through;
    color: var(--nh-muted);
    font-size: 0.85rem;
    margin-right: 0.4rem;
}

/* ----------------------------------------------------------------------------
 * 9. Footer Nature
 * ---------------------------------------------------------------------------- */
.footer-nature {
    background: var(--nh-dark-green);
    color: rgba(255, 255, 255, 0.85);
    padding: 4rem 0 1.5rem;
    margin-top: 5rem;
}
.footer-nature h5 {
    color: var(--nh-light-green);
    margin-bottom: 1.25rem;
    font-family: var(--nh-font-serif);
    font-size: 1.15rem;
}
.footer-nature a {
    color: rgba(255, 255, 255, 0.75);
    display: inline-block;
    padding: 0.25rem 0;
    transition: all 0.2s;
}
.footer-nature a:hover {
    color: var(--nh-orange);
    transform: translateX(4px);
}
.footer-nature ul { list-style: none; padding: 0; margin: 0; }
.footer-nature .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: all 0.25s;
    transform: none;
}
.footer-nature .social-icons a:hover {
    background: var(--nh-orange);
    transform: translateY(-3px);
}
.footer-nature .newsletter input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}
.footer-nature .newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.footer-nature .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
    padding-top: 1.5rem;
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
 * 10. Breadcrumb Nature
 * ---------------------------------------------------------------------------- */
.breadcrumb-nature {
    background: rgba(197, 220, 92, 0.25);
    padding: 0.75rem 1.25rem;
    border-radius: var(--nh-radius);
    margin-bottom: 1.5rem;
}
.breadcrumb-nature .breadcrumb-item + .breadcrumb-item::before { color: var(--nh-muted); }
.breadcrumb-nature .breadcrumb-item a { color: var(--nh-dark-green); }
.breadcrumb-nature .breadcrumb-item.active { color: var(--nh-charcoal); }

/* ----------------------------------------------------------------------------
 * 11. Badge Featured
 * ---------------------------------------------------------------------------- */
.badge-featured {
    background: var(--nh-orange);
    color: #fff;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: var(--nh-radius-sm);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
.badge-nature {
    background: var(--nh-primary);
    color: #fff;
    padding: 0.35rem 0.7rem;
    border-radius: var(--nh-radius-sm);
    font-weight: 500;
    font-size: 0.8rem;
}

/* ----------------------------------------------------------------------------
 * 12. Star Rating
 * ---------------------------------------------------------------------------- */
.star-rating {
    color: var(--nh-orange);
    font-size: 1rem;
    letter-spacing: 1px;
    display: inline-block;
}
.star-rating .empty { color: rgba(107, 123, 90, 0.3); }

/* ----------------------------------------------------------------------------
 * 13. Filter Sidebar
 * ---------------------------------------------------------------------------- */
/* Strong border treatment for cards across public + admin + partner. */
.nature-body .card,
.admin-body .card {
    border: 2px solid var(--nh-dark-green) !important;
    border-radius: var(--nh-radius-lg);
    box-shadow: 0 2px 8px rgba(45, 62, 31, 0.06);
}
.nature-body .card .card-header,
.admin-body .card .card-header {
    background: rgba(var(--nh-primary-rgb), 0.06);
    border-bottom: 2px solid rgba(var(--nh-primary-rgb), 0.25);
    font-weight: 600;
    color: var(--nh-dark-green);
}
.nature-body .card-title,
.nature-body .card h5,
.nature-body .card h6,
.admin-body .card-title,
.admin-body .card h5,
.admin-body .card h6 {
    color: var(--nh-dark-green);
}

/* Strong borders on form controls inside admin too. */
.admin-body .form-control,
.admin-body .form-select {
    border: 1.5px solid rgba(var(--nh-primary-rgb), 0.4);
    border-radius: var(--nh-radius-md, 8px);
}
.admin-body .form-control:focus,
.admin-body .form-select:focus {
    border-color: var(--nh-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--nh-primary-rgb), 0.15);
}
.admin-body .nav-tabs .nav-link.active {
    border-color: var(--nh-dark-green) var(--nh-dark-green) #fff;
    color: var(--nh-dark-green);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Tom Select — stronger highlight & matched-text colors
 * ---------------------------------------------------------------------------- */
.ts-wrapper .ts-control {
    border: 1.5px solid rgba(var(--nh-primary-rgb), 0.4) !important;
    border-radius: var(--nh-radius-md, 8px);
    min-height: calc(1.5em + 0.75rem + 2px);
}
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--nh-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--nh-primary-rgb), 0.18) !important;
}

.ts-dropdown {
    border: 2px solid var(--nh-dark-green) !important;
    box-shadow: 0 4px 16px rgba(45, 62, 31, 0.18) !important;
    border-radius: var(--nh-radius-md, 8px) !important;
    margin-top: 2px;
}

.ts-dropdown .option {
    padding: 0.55rem 0.85rem;
    color: var(--nh-charcoal);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--nh-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
/* Matched fragment of the search term — high-contrast highlight. */
.ts-dropdown .option .highlight,
.ts-dropdown .highlight {
    background-color: rgba(255, 230, 110, 0.85) !important;
    color: #1a1a1a !important;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 700;
}
.ts-dropdown .option.active .highlight {
    background-color: #fff35a !important;
    color: #1a1a1a !important;
}

/* Selected items (multi-select chips) */
.ts-wrapper.multi .item {
    background: var(--nh-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--nh-radius-md, 8px);
    padding: 0.15rem 0.55rem;
    font-weight: 500;
}
.ts-wrapper.multi .item.active {
    background: var(--nh-dark-green) !important;
}

/* Single-select selected option (highlight current value when dropdown opens) */
.ts-dropdown .option[aria-selected="true"]:not(.active) {
    background-color: rgba(var(--nh-primary-rgb), 0.12);
    color: var(--nh-dark-green);
    font-weight: 600;
}

/* Panel-style blocks that mimic cards without using the .card class
   (e.g. hero header, hotel description box, facilities grid). */
.nature-body .bg-white.rounded-3,
.nature-body .bg-white.rounded-2,
.nature-body section.bg-white.border-bottom {
    border: 2px solid var(--nh-dark-green) !important;
    box-shadow: 0 2px 8px rgba(45, 62, 31, 0.06);
}
/* The hero section is already full-width with its own border-bottom;
   keep it from looking like a floating card. */
.nature-body section.bg-white.border-bottom {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: none;
}

/* Filter sidebar — sticky variant of the strong card. */
.filter-sidebar,
aside.col-lg-3 > .card {
    background: #fff;
    border-radius: var(--nh-radius-lg);
    padding: 0;
    box-shadow: var(--nh-shadow-sm);
    border: 2px solid var(--nh-dark-green) !important;
    position: sticky;
    top: 90px;
}
aside.col-lg-3 > .card > .card-body { padding: 1.25rem; }

.filter-sidebar h6,
aside.col-lg-3 > .card h6 {
    color: var(--nh-dark-green);
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid rgba(var(--nh-primary-rgb), 0.25);
    font-family: var(--nh-font-serif, var(--nh-font-sans));
    letter-spacing: 0.3px;
}

.filter-sidebar .form-control,
.filter-sidebar .form-select,
aside.col-lg-3 .form-control,
aside.col-lg-3 .form-select {
    border: 1.5px solid rgba(var(--nh-primary-rgb), 0.4);
    border-radius: var(--nh-radius-md, 8px);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-sidebar .form-control:focus,
.filter-sidebar .form-select:focus,
aside.col-lg-3 .form-control:focus,
aside.col-lg-3 .form-select:focus {
    border-color: var(--nh-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--nh-primary-rgb), 0.15);
}

.filter-sidebar .form-check-input,
aside.col-lg-3 .form-check-input {
    border: 1.5px solid rgba(var(--nh-primary-rgb), 0.5);
}
.filter-sidebar .form-check-label,
aside.col-lg-3 .form-check-label { color: var(--nh-charcoal); }
.filter-sidebar .form-check-input:checked,
aside.col-lg-3 .form-check-input:checked {
    background-color: var(--nh-primary);
    border-color: var(--nh-primary);
}

.filter-sidebar .form-label,
aside.col-lg-3 .form-label {
    color: var(--nh-dark-green);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* ----------------------------------------------------------------------------
 * 14. Booking Box
 * ---------------------------------------------------------------------------- */
.booking-box {
    background: #fff;
    border: 2px solid rgba(var(--nh-primary-rgb), 0.2);
    border-radius: var(--nh-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--nh-shadow);
    position: sticky;
    top: 100px;
}
.booking-box .booking-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--nh-orange);
    font-family: var(--nh-font-serif);
}
.booking-box .booking-price small {
    font-size: 0.85rem;
    color: var(--nh-muted);
    font-weight: 400;
    font-family: var(--nh-font-sans);
}
.booking-box hr { border-color: rgba(107, 123, 90, 0.2); }
.booking-box .total-row {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nh-dark-green);
}

@media (min-width: 992px) {
    aside.col-lg-3 {
        position: sticky;
        top: 92px;
        align-self: flex-start;
        z-index: 10;
    }
    
    .booking-box {
        position: sticky;
        top: 92px;
        z-index: 10;
    }
    
    .detail-sidebar-sticky {
        position: sticky;
        top: 92px;
        z-index: 10;
    }
}

/* ----------------------------------------------------------------------------
 * 15. Partner Banner
 * ---------------------------------------------------------------------------- */
.partner-banner {
    background: linear-gradient(135deg, var(--nh-primary) 0%, var(--nh-dark-green) 100%);
    color: #fff;
    padding: 3rem 2rem;
    border-radius: var(--nh-radius-lg);
    text-align: center;
    margin: 3rem 0;
    position: relative;
    overflow: hidden;
}
.partner-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: rgba(240, 141, 42, 0.15);
    border-radius: 50%;
}
.partner-banner h2 { color: #fff; font-family: var(--nh-font-serif); }
.partner-banner .btn-book { background: linear-gradient(135deg, var(--nh-orange) 0%, var(--nh-dark-orange) 100%); }

/* ----------------------------------------------------------------------------
 * 16. Section helpers
 * ---------------------------------------------------------------------------- */
.section-light  { background: var(--nh-cream); padding: 4rem 0; }
.section-nature { background: rgba(197, 220, 92, 0.15); padding: 4rem 0; }
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}
.section-title h2 {
    font-family: var(--nh-font-serif);
    color: var(--nh-dark-green);
    margin-bottom: 0.75rem;
}
.section-title p { color: var(--nh-muted); max-width: 600px; margin: 0 auto; }
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--nh-orange);
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* ----------------------------------------------------------------------------
 * 17. Flash messages
 * ---------------------------------------------------------------------------- */
.flash-wrapper { margin: 1rem 0; }
.alert-nature-success {
    background: rgba(143, 183, 62, 0.15);
    border-left: 4px solid var(--nh-primary);
    color: var(--nh-dark-green);
}
.alert-nature-warning {
    background: rgba(240, 141, 42, 0.15);
    border-left: 4px solid var(--nh-orange);
    color: var(--nh-dark-orange);
}
.alert-nature-info {
    background: rgba(197, 220, 92, 0.2);
    border-left: 4px solid var(--nh-light-green);
    color: var(--nh-dark-green);
}

/* ----------------------------------------------------------------------------
 * 18. Forms
 * ---------------------------------------------------------------------------- */
.form-control, .form-select {
    border-color: rgba(107, 123, 90, 0.25);
    padding: 0.6rem 0.85rem;
    border-radius: var(--nh-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--nh-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--nh-primary-rgb), 0.15);
}
.form-label { font-weight: 500; color: var(--nh-charcoal); }

/* ----------------------------------------------------------------------------
 * 19. Animations
 * ---------------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.fade-in   { animation: fadeIn 0.6s ease-in-out; }
.slide-up  { animation: slideUp 0.6s ease-out; }
.zoom-in   { animation: zoomIn 0.5s ease-out; }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 0.5s ease; }
.hover-zoom:hover img { transform: scale(1.08); }

/* ----------------------------------------------------------------------------
 * 20. Utility classes
 * ---------------------------------------------------------------------------- */
.divider-orange { height: 3px; background: var(--nh-orange); width: 60px; border-radius: 2px; }
.text-shadow    { text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.rounded-nature { border-radius: var(--nh-radius-lg) !important; }
.shadow-nature  { box-shadow: var(--nh-shadow) !important; }

.bg-gradient-nature {
    background: linear-gradient(135deg, var(--nh-primary) 0%, var(--nh-dark-green) 100%);
    color: #fff;
}
.bg-gradient-orange {
    background: linear-gradient(135deg, var(--nh-orange) 0%, var(--nh-dark-orange) 100%);
    color: #fff;
}

/* ----------------------------------------------------------------------------
 * 21. Responsive
 * ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-nature .nav-link.active::before { display: none; }
}

@media (max-width: 768px) {
    .hero-section { min-height: 50vh; }
    .filter-sidebar,
    .booking-box {
        position: static;
        margin-bottom: 1.5rem;
    }
    .footer-nature { padding: 3rem 0 1rem; text-align: center; }
    .footer-nature .social-icons { justify-content: center; }
    .section-light, .section-nature { padding: 2.5rem 0; }
    .partner-banner { padding: 2rem 1rem; }
}

@media (max-width: 576px) {
    .btn-book-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
    .booking-box .booking-price { font-size: 1.4rem; }
}

/* ----------------------------------------------------------------------------
 * 22. Print styles
 * ---------------------------------------------------------------------------- */
@media print {
    .navbar-nature,
    .footer-nature,
    .filter-sidebar,
    .booking-box,
    .btn-book,
    .partner-banner { display: none !important; }

    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
    .card-package, .card-destination, .card-hotel, .card-restaurant {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}