/* ===== MAIN STYLES ===== */
:root {
    --primary-color: #2c5530;
    --secondary-color: #8b4513;
    --accent-color: #d4a574;
    --dark-green: #1a3d1f;
    --light-green: #4a7c59;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --border-color: #e0e6ed;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}

/* ===== LAYOUT ===== */
/* Account for the fixed navbar — measured heights: 66px desktop (≥992px),
   56px mobile/tablet. Hero-first CMS pages cancel this via a rule at the
   bottom of this file. */
main {
    margin-top: 66px !important;
}

@media (max-width: 991.98px) {
    main {
        margin-top: 56px !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* ===== NAVIGATION ===== */
.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--accent-color) !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--accent-color) !important;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        flex-grow: 1;
    }

    .navbar-end.navbar-end--right {
        flex-grow: 1;
        justify-content: flex-end;
    }

    .navbar-end .navbar-nav {
        flex-direction: row;
        align-items: center;
    }
}

.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
}

/* ===== HERO SECTION ===== */
.hero-section {
    background: linear-gradient(rgba(44, 85, 48, 0.7), rgba(26, 61, 31, 0.8));
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-search {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

/* ===== BUTTONS ===== */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}

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

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* ===== CARDS ===== */
.listing-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    height: 100%;
}

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

.listing-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.listing-card .card-body {
    padding: 1.5rem;
}

.listing-card .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.listing-card .card-text {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.rating {
    color: #ffc107;
    margin-bottom: 0.5rem;
}

/* ===== BADGES ===== */
.badge-category {
    background-color: var(--accent-color);
    color: var(--dark-green);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
}

.badge-featured {
    background-color: #dc3545;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

/* ===== SEARCH & FILTERS ===== */
.search-filters {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.filter-section {
    border-right: 1px solid var(--border-color);
    padding-right: 1.5rem;
    margin-right: 1.5rem;
}

.filter-section:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.form-select, .form-control {
    border-radius: 6px;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.form-select:focus, .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(44, 85, 48, 0.25);
}

/* ===== FEATURE SECTIONS ===== */
.feature-section {
    padding: 4rem 0;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--light-green));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    text-align: center;
    height: 100%;
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    border: 4px solid var(--accent-color);
}

/* ===== LISTING DETAIL ===== */
.listing-gallery {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.gallery-main {
    height: 400px;
    object-fit: cover;
    width: 100%;
}

.gallery-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gallery-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.gallery-thumb.active,
.gallery-thumb:hover {
    opacity: 1;
}

.listing-info {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.listing-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.spec-item {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.spec-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* ===== BOOKING FORM ===== */
.booking-form {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}

.date-picker {
    background: #f8f9fa;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ===== USER DASHBOARD ===== */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--primary-color), var(--light-green));
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stat-label {
    opacity: 0.9;
    font-size: 1.1rem;
}

/* ===== MESSAGES ===== */
.conversation-list {
    max-height: 400px;
    overflow-y: auto;
}

.conversation-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.conversation-item:hover {
    background-color: #f8f9fa;
}

.conversation-item.active {
    background-color: rgba(44, 85, 48, 0.1);
    border-left: 4px solid var(--primary-color);
}

.message-bubble {
    max-width: 70%;
    padding: 1rem;
    border-radius: 18px;
    margin-bottom: 1rem;
}

.message-sent {
    background-color: var(--primary-color);
    color: white;
    margin-left: auto;
}

.message-received {
    background-color: #f1f3f5;
    color: var(--text-dark);
}

/* ===== FORMS ===== */
.form-floating .form-control {
    border-radius: 8px;
}

.form-floating .form-select {
    border-radius: 8px;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ===== MAPS ===== */
.map-container {
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .hero-search {
        padding: 1.5rem;
    }

    .filter-section {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        padding-right: 0;
        margin-right: 0;
    }

    .filter-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .listing-specs {
        grid-template-columns: 1fr;
    }

    .booking-form {
        position: relative;
        top: auto;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .feature-section {
        padding: 2rem 0;
    }

    .listing-card .card-img-top {
        height: 200px;
    }
}

/* ===== ANIMATIONS ===== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 0.6s ease forwards;
}

@keyframes slideInLeft {
    to {
        transform: translateX(0);
    }
}

/* ===== UTILITY CLASSES ===== */
.text-primary-custom {
    color: var(--primary-color) !important;
}

.bg-primary-custom {
    background-color: var(--primary-color) !important;
}

.border-primary-custom {
    border-color: var(--primary-color) !important;
}

.shadow-custom {
    box-shadow: var(--shadow) !important;
}

.shadow-lg-custom {
    box-shadow: var(--shadow-lg) !important;
}

.rounded-custom {
    border-radius: 12px !important;
}

/* ===== LOADING STATES ===== */
.skeleton {
    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; }
}

.spinner-border-custom {
    color: var(--primary-color);
}

/* ===== NEWSLETTER ===== */
.newsletter-form .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.newsletter-form .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ===== SOCIAL LINKS ===== */
.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--accent-color);
    color: var(--dark-green) !important;
    transform: translateY(-2px);
}

/* ===== HOME2 PAGE STYLES ===== */
/* Enhanced Hero Section for Home2 */
.hero-section {
    background: linear-gradient(135deg, rgba(44, 85, 48, 0.8), rgba(26, 61, 31, 0.9)),
                url("/static/img/hero-bg.5d11ea905fad.jpg");
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    color: white;
    padding: 80px 0;
}

.hero-content {
    text-align: center;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content .lead {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhanced Search Form */
.hero-search {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.hero-search .form-floating {
    margin-bottom: 0;
}

.hero-search .form-control {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    height: 58px;
    transition: all 0.3s ease;
}

.hero-search .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(44, 85, 48, 0.25);
}

.hero-search .btn-primary {
    height: 58px;
    background: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-search .btn-primary:hover {
    background: var(--dark-green);
    border-color: var(--dark-green);
    transform: translateY(-2px);
}

/* Featured outfitter cards (CMS home sections) */
.featured-outfitter-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.featured-outfitter-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.featured-outfitter-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.featured-outfitter-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #adb5bd;
}

.min-width-0 {
    min-width: 0;
}

/* Enhanced Listing Cards */
.listing-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.listing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.listing-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: all 0.3s ease;
}

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

.badge-featured {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 3;
}

.badge-category {
    background: var(--primary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.price-tag {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.rating {
    color: #ffc107;
}

/* Category Cards */
.category-card {
    background: white;
    border: 2px solid #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
    height: 100%;
}

.category-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--light-green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
}

/* Testimonials */
.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    object-fit: cover;
}

/* Newsletter Section */
.newsletter-signup {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-signup .form-control {
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 10px;
    height: 58px;
}

.newsletter-signup .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-signup .form-control:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: white;
}

.newsletter-signup .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 10px;
    height: 58px;
    font-weight: 600;
}

.newsletter-signup .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Animation Effects */
.fade-in {
    animation: fadeIn 1s ease-in forwards;
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-search {
        padding: 1.25rem;
    }

    .hero-search .form-floating {
        margin-bottom: 0.75rem;
    }

    .hero-search .btn-primary {
        min-height: 52px;
        font-size: 1rem;
    }

    .hero-search .form-control,
    .hero-search .form-select {
        font-size: 16px;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ===== CMS HERO — FIXED-NAVBAR GAP & MOBILE FIXES ===== */
/* Hero-first CMS pages: cancel main's 76px navbar offset (see LAYOUT at the
   top of this file) and pad inside the hero instead, so the photo starts
   directly beneath the fixed navbar with no white/dark band above it.
   All other pages keep main's normal 76px offset. */
main:has(> .page-wrapper > section.hero-section:first-of-type) {
    margin-top: 0 !important;
}

.page-wrapper > section.hero-section:first-of-type {
    padding-top: 66px !important; /* overrides Bootstrap py-0 on CMS heroes; matches desktop navbar height */
}

/* Keep muted helper text readable on dark section backgrounds. */
section.bg-dark .text-muted,
section.bg-primary .text-white .text-muted,
section.text-white .text-muted,
.bg-dark .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Custom-HTML heroes set their background inline with no overlay gradient.
   Add one so white text stays readable over busy photos. */
.section-custom_html.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 1;
}

.section-custom_html.hero-section > .container {
    position: relative;
    z-index: 2;
}

/* Keep the hero lead readable over any photo (overrides text-white-50). */
.hero-section .hero-content .lead {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

/* Match the hero selects to the other hero inputs. */
.hero-search .form-select {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    height: 58px;
    transition: all 0.3s ease;
}

.hero-search .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(44, 85, 48, 0.25);
}

@media (max-width: 768px) {
    .page-wrapper > section.hero-section:first-of-type {
        padding-top: 100px !important; /* 56px navbar offset + breathing room */
    }

    .hero-section {
        min-height: 0 !important; /* let content define height; !important beats
                                     the inline min-height:500px on CMS heroes */
        background-position: center 35%; /* keep photo subjects in frame */
    }

    .hero-section .container {
        padding-bottom: 2rem;
    }

    /* Hide the floating search form on small screens — the CTAs above it
       already link to the outfitter directory and enquiry flow. */
    .hero-section .hero-search {
        display: none;
    }

    /* Scale Bootstrap's fixed display-* headings down on small screens */
    .display-3 { font-size: 2.6rem; }
    .display-4 { font-size: 2.1rem; }
    .display-5 { font-size: 1.75rem; }

    /* Species catalog stat numbers */
    .stats-number { font-size: 2.25rem; }
}

@media (max-width: 576px) {
    /* Stack the hero CTA buttons full-width so they are easy to tap. */
    .hero-section .hero-content .btn-lg {
        width: 100%;
    }
}