/* =========================================
   1. CORE STYLES & VARIABLES
   ========================================= */
:root {
    --primary-color: #0f766e;
    /* Teal */
    --accent-color: #f97316;
    /* Orange */
    --text-dark: #1e293b;
    --text-light: #f1f5f9;
    --bg-light: #f8fafc;
    /* Destinations Tab Colors */
    --tab-accent-1: var(--primary-color);
    --tab-accent-2: var(--primary-color);
    --tab-accent-3: var(--primary-color);
    --tab-accent-4: var(--primary-color);
    --tab-accent-5: var(--primary-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

a:hover {
    color: #ea580c;
}

/* Standard hover color */

ul {
    list-style: none;
}

/* =========================================
   2. NAVIGATION
   ========================================= */
.hamburger {
    display: none;
    /* Hidden by default on Desktop */
}

html,
body {
    overflow-x: hidden;
    /* Prevent horizontal scroll from mobile menu slide-out */
}

nav {
    display: flex;
    justify-content: center;
    /* Center main content (text) by default */
    align-items: center;
    padding: 0 5%;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 140px;
    /* Increased height for Desktop Stack */
    /* Ensure relative positioning for absolute children */
    position: sticky;
    /* Keep sticky */
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    position: absolute;
    /* Take out of flow to allow links below */
    top: 0;
    left: 0;
    pointer-events: none;
    /* Let clicks pass through to links below */
}

/* Isolate Image and Text for separate positioning */
.logo img {
    height: 100%;
    /* Cover full height as requested */
    width: auto;
    position: absolute;
    left: 5%;
    /* Anchor Left */
    top: 0;
    /* Align top */
    pointer-events: auto;
    /* Re-enable clicks */
    object-fit: contain;
    /* Keep aspect ratio */
    padding: 5px 0;
    /* Optional: tiny breathing room or remove if 'full' means edge-to-edge */
}

.logo span {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
    pointer-events: auto;
    /* Re-enable clicks */
    position: absolute;
    top: 30px;
    /* Align with image roughly */
    left: 50%;
    transform: translateX(-50%);
    /* Center Horizontally */
    white-space: nowrap;
}

/* Nav Links Container */
.nav-links {
    display: flex;
    gap: 2rem;
    position: absolute;
    bottom: 20px;
    /* Bottom of header */
    left: 0;
    width: 100%;
    justify-content: center;
    /* Center links */
}

.nav-links a:hover {
    color: var(--accent-color);
}

.btn-nav {
    display: none;
    /* Hide default button placement in this layout OR restructure HTML to include in links? 
                      Current HTML has it outside .nav-links. We need to handle it. */
}

/* Re-add button properly if possible, or assume user wants it in the list. 
   Actually, the HTML structure is: Logo, UL.nav-links, A.btn-nav.
   We need to move btn-nav to the center bottom row too. 
*/
.btn-nav {
    display: block;
    position: absolute;
    right: 5%;
    top: 50%;
    /* Vertically Center */
    bottom: auto;
    transform: translateY(-50%);
    /* Perfect Center */
    padding: 0.5rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border-radius: 5px;
    font-weight: bold;
}

/* Better plan for Desktop: Put button in the link row? 
   Let's keep separate for now but align correctly. 
   Actually, let's force the button to be part of the bottom row centering if possible,
   or leave it right-aligned which creates a nice triangle balance (Img Left, Text Top-Center, Btn Bottom-Right).
   BUT User said: "Links stacked below".
   Let's leave btn-nav absolute right bottom for now to avoid HTML restructure.
*/

.btn-nav:hover {
    background: #0d5f57;
    color: white;
}

/* =========================================
   MOBILE LAYOUT (<= 768px)
   ========================================= */
@media (max-width: 768px) {
    nav {
        height: 80px;
        /* Return to smaller height */
        justify-content: center;
        /* Helper */
    }

    /* Icon Left - Reset to Flex Flow */
    .logo img {
        height: 60%;
        /* Reduced from 100% to fit better with text in row */
        width: auto;
        position: static;
        /* Remove absolute */
        padding: 0;
        margin-right: 10px;
        /* Spacing between icon and text */
        object-fit: contain;
    }

    /* Text Center - Reset to Flex Flow */
    .logo span {
        position: static;
        /* Remove absolute */
        transform: none;
        /* Remove centering transform */
        font-size: 1.2rem;
        /* Adjusted for better fit */
        width: auto;
        white-space: nowrap;
    }

    /* Hamburger Right */
    .hamburger {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: block !important;
        /* Force visibility overrides */
        z-index: 1001;
        cursor: pointer;
    }

    .hamburger div {
        width: 25px;
        height: 3px;
        background-color: var(--primary-color);
        margin: 5px;
        transition: all 0.3s ease;
    }

    /* Animate Hamburger to X */
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .toggle .line2 {
        opacity: 0;
    }

    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Global Text Scaling for Mobile */
    html {
        font-size: 14px;
        /* Scales down 1rem from 16px to 14px */
    }

    /* Additional Typography Tweaks */
    body {
        font-size: 1rem;
        /* 14px effective */
    }

    h1 {
        font-size: 2.2rem;
        /* Was 2.5rem or 4rem */
    }

    h2 {
        font-size: 1.8rem;
    }

    footer p {
        font-size: 0.9rem;
    }

    /* Nav Links Slide-in */
    .nav-links {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 100px;
        /* spacing from top */
        position: fixed;
        /* Fixed to cover screen */
        top: 0;
        right: 0;
        height: 100vh;
        background: white;
        width: 70%;
        /* Slide out width */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        /* Smooth slide */
        bottom: auto;
        /* Reset desktop absolute */
        left: auto;
        /* Reset desktop absolute */
        gap: 0;
        z-index: 999;
        /* Below hamburger (1001) */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .nav-links.nav-active {
        transform: translateX(0%);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }

    /* Move button into mobile menu visually? 
       Currently it's outside. We might need to hide the external button on mobile. */
    .btn-nav {
        display: none;
        /* Hide the desktop button on mobile */
    }

    /* Add Book Link inside UL for mobile? 
       Or make .btn-nav visible inside the slide menu? 
       The current HTML has .btn-nav outside .nav-links. 
       We will need to add a "Book Now" LI to the HTML or move the button via JS/CSS.
       Simplest: Hide external button, rely on "Contact Us" or add Book link.
       Wait, the user wants mobile responsive. Breaking the Book button is bad.
       Let's use a specific mobile selector for the button if needed, or rely on the user adding it to the list.
       Actually, let's keep it simple: Hide the absolute button, maybe add one to list? 
       For now, just hiding it to prevent layout break. User can click Contact.
    */

    /* .hero-content h1 rule removed to use global clamp */

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

/* =========================================
   3. FOOTER
   ========================================= */
footer {
    background: var(--text-dark);
    color: white;
    padding: 3rem 5%;
    text-align: center;
    margin-top: 50px;
}

footer p {
    opacity: 0.7;
    margin-top: 1rem;
}

/* =========================================
   4. HOME PAGE STYLES (index.html)
   ========================================= */
/* Hero Section */
header.hero-header {
    /* Specific class added implicitly via logic or keep generic header if only used here? index.html uses <header> element */
    width: 100%;
    aspect-ratio: 3436 / 1868;
    /* Lock to image's natural aspect ratio */
    min-height: auto;
    height: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('../images/Glencoe%20-%203%20Sisters%20Waterfall.jpg');
    background-size: cover;
    /* Will effectively be 'contain' because container matches ratio */
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 2rem 20px;
    /* Minimal padding to avoid pushing height beyond ratio */
    position: relative;
    /* Add padding for mobile edges */
}

/* Mobile Typography & Layout Fixes */
/* Unified Hero Heading Scaling (Mobile & Desktop) */
.hero-content h1,
.page-header h1 {
    /* Strict scaling to prevent wrapping on small screens */
    /* Min 0.7rem (~11px) to align with long titles on mobile */
    font-size: clamp(0.7rem, 2.8vw, 3rem);
    white-space: nowrap;
    width: 100%;
    margin-bottom: 0.3rem;
    line-height: 1.1;
}

/* Unified Hero Paragraph Scaling */
.hero-content p,
.page-header p {
    /* Must be smaller than H1 at all viewports */
    /* Min 0.6rem (~9.6px) */
    font-size: clamp(0.6rem, 2vw, 1.1rem);
    padding: 0 1rem;
    line-height: 1.3;
    color: #f1f5f9;
    /* Ensure visibility */
}

@media (max-width: 768px) {

    /* Hero Banner Mobile - Dynamic Content Sizing */
    header.hero-header {
        /* Allow global aspect-ratio to dictate sizing */
        min-height: auto;
        height: auto;
        padding: 1rem;
        /* Reduced padding on mobile to fit text in smaller box */
    }

    .hero-content p {
        /* Rule removed to allow global unified clamp to work */
        padding: 0 1rem;
    }

    /* Hamburger Menu Visible */
    .nav-links {
        position: absolute;
        right: 0;
        top: 100px;
        /* Height of nav */
        height: calc(100vh - 100px);
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 2rem;
        width: 100%;
        /* Full width or 50% */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -2px 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 2000;
        /* Ensure above everything */
    }

    /* FORCE Mobile Hero Scaling */

    /* 1. Sub-Pages (Destinations, etc) - Short Titles, Keep Single Line */
    .page-header h1 {
        font-size: clamp(1rem, 5vw, 2.5rem) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 2. Home Page - Long Title, MUST Wrap on Mobile */
    .hero-content h1 {
        /* "Your Journey..." is too long for one line. Allow wrap but keep tight sizing. */
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        white-space: normal !important;
        /* Allow wrap */
        line-height: 1.2;
    }

    .hero-content p,
    .page-header p {
        font-size: clamp(0.8rem, 3.5vw, 1.1rem) !important;
        /* Ensure distinct hierarchy */
        color: #f1f5f9;
        margin-bottom: 1.5rem;
    }

    /* Shrink Hero Button on Mobile */
    .btn-hero {
        padding: 0.4rem 0.8rem;
        /* Extremely compact */
        font-size: clamp(0.6rem, 2vw, 0.9rem) !important;
        /* Smaller base and max */
        line-height: 1.1;
        /* Reduce vertical height */
        width: auto !important;
        display: inline-block;
        margin-top: 0.8rem;
    }

    .nav-links.nav-active {
        transform: translateX(0%);
    }

    .nav-links li {
        margin: 1.5rem 0;
    }

    .hamburger {
        display: block;
        /* Visible on mobile */
        cursor: pointer;
    }
}

.hamburger {
    display: none;
    /* Hidden on desktop */
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 5px;
    transition: all 0.3s ease;
}

/* Animate Hamburger to X */
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* .hero-content h1 Removed - Uses Unified Global Clamp above */

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    /* white-space: nowrap; Removed to allow wrapping */
}

.btn-hero {
    padding: 1rem 3rem;
    background: var(--accent-color);
    color: white;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-hero:hover {
    background: #ea580c;
    color: white;
}

/* Removed conflicting .hero-content h1 override to allow global clamp to work */

/* Home Sections */
section {
    padding: 4rem 5%;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-color);
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Home Grid Layout */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Common Tour Card (Base) */
.tour-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    scroll-margin-top: 150px;
    /* Prevent sticky header overlap on anchor jump */
}

.tour-card:hover {
    transform: translateY(-5px);
}

/* Home Page Card Specifics */
.tour-grid .tour-card .tour-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.tour-grid .tour-card .tour-details {
    padding: 1.5rem;
}

.tour-grid .tour-card .tour-meta {
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.tour-grid .tour-card .tour-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 1rem;
}

.tour-grid .tour-card .btn-book {
    /* specific to home */
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem 0;
    background: var(--accent-color);
    color: white;
    border-radius: 5px;
    font-weight: bold;
}

.tour-grid .tour-card .btn-book:hover {
    background: #ea580c;
    color: white;
}


/* =========================================
   5. PAGE HEADER (Shared by Tours, Destinations, Contact, etc.)
   ========================================= */
.page-header {
    background-color: var(--primary-color);
    color: white;
    padding: 4rem 5%;
    text-align: center;
}

/* Removed conflicting .page-header h1 to allow global clamp to work */

/* =========================================
   6. TOURS PAGE STYLES (tours.html)
   ========================================= */
.tours-content {
    display: flex;
    gap: 2rem;
    padding: 3rem 5%;
}

/* Sidebar / Filters */
.sidebar {
    width: 300px;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    height: fit-content;
    position: sticky;
    top: 7rem;
}

.sidebar h3 {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.filter-group {
    margin-bottom: 2rem;
}

.filter-group label {
    display: block;
    margin: 0.5rem 0;
}

.filter-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-note {
    padding: 1rem;
    background: #e0f2f1;
    color: var(--text-dark);
    border-left: 5px solid var(--primary-color);
    border-radius: 8px;
    margin-top: 2rem;
}

/* Tours List Layout */
.tour-list {
    flex: 1;
}

/* Tour List Card (Specifics override base .tour-card) */
.tour-list .tour-card {
    display: flex;
    /* Flex row */
    margin-bottom: 2rem;
}

.tour-list .tour-img {
    width: 20%;
    height: 250px;
    /* Fixed height for uniformity */
    object-fit: cover;
    /* Crop to fill */
    object-position: center;
    /* Center focus */
    flex-shrink: 0;
}

.tour-list .tour-details {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.tour-list .tour-details h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.tour-list .tour-meta {
    display: flex;
    gap: 1.5rem;
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.tour-list .tour-details p {
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Tour Footer / Actions */
.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.tour-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tour-price-details {
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.tour-price-details .price-main {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1;
}

.tour-price-details .price-small {
    font-size: 0.85rem;
    font-weight: normal;
    color: #64748b;
    line-height: 1;
}

.btn-view-details {
    padding: 10px 20px;
    background: var(--accent-color);
    color: white;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.btn-view-details:hover {
    background: #ea580c;
    color: white;
}

.btn-view-itinerary {
    padding: 10px 20px;
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
}

.btn-view-itinerary:hover {
    background: var(--primary-color);
    color: white;
}

@media (max-width: 768px) {
    .tour-section h2 {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .price-tag {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    /* Fix image height only on mobile for better viewability */
    .gallery-slider {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 1000px) {
    .tours-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
        margin-bottom: 2rem;
    }

    .tour-list .tour-card {
        flex-direction: column;
    }

    .tour-list .tour-img,
    .tour-list .tour-details {
        width: 100%;
    }

    .tour-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .tour-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .btn-view-itinerary,
    .btn-view-details {
        flex: 1;
    }
}

/* =========================================
   7. DESTINATIONS PAGE STYLES (destinations.html)
   ========================================= */
.container-destinations {
    /* Derived from .container in destinations.html */
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Tabs */
.tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2.5rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab-button:hover:not(.active) {
    color: var(--accent-color);
}

.tab-button.active {
    color: var(--primary-color);
}

/* Tab Active States */
#tab-HighlandsLochs.active {
    border-bottom-color: var(--tab-accent-1);
    color: var(--tab-accent-1);
}

#tab-CastlesMarvels.active {
    border-bottom-color: var(--tab-accent-2);
    color: var(--tab-accent-2);
}

#tab-Speyside.active {
    border-bottom-color: var(--tab-accent-3);
    color: var(--tab-accent-3);
}

#tab-Edinburgh.active {
    border-bottom-color: var(--tab-accent-4);
    color: var(--tab-accent-4);
}

#tab-Glasgow.active {
    border-bottom-color: var(--tab-accent-5);
    color: var(--tab-accent-5);
}

/* Gallery */
/* Gallery */
.gallery-content {
    display: none;
    flex-wrap: wrap;
    /* Replaced Grid with Flex to center orphan items */
    justify-content: center;
    gap: 2rem;
    animation: fadeIn 0.5s ease-out;
}

.gallery-content.active {
    display: flex;
    /* Active state is Flex */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.gallery-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
    /* Base width 300px, can grow/shrink but stays uniform */
    max-width: 400px;
    /* Prevent becoming too wide on large screens */
}

.gallery-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Taller images (was 16/9) */
    background-color: #f0f0f0;
    /* placeholder bg */
    border-bottom: 3px solid var(--accent-color);
    overflow: hidden;
}

.gallery-slider .slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-slider .slides img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
}

.gallery-slider .slides img.active {
    opacity: 1;
    z-index: 1;
}

/* Slider Controls */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    font-size: 1.2rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    user-select: none;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

/* Specific Border Colors for Sliders (replacing old .gallery-img overrides) */
.HighlandsLochs .gallery-slider {
    border-bottom-color: var(--tab-accent-1);
}

.CastlesMarvels .gallery-slider {
    border-bottom-color: var(--tab-accent-2);
}

.Speyside .gallery-slider {
    border-bottom-color: var(--tab-accent-3);
}

.Edinburgh .gallery-slider {
    border-bottom-color: var(--tab-accent-4);
}

.Glasgow .gallery-slider {
    border-bottom-color: var(--tab-accent-5);
}

.CastlesMarvels .gallery-img {
    border-bottom-color: var(--tab-accent-2);
}

.Speyside .gallery-img {
    border-bottom-color: var(--tab-accent-3);
}

.Edinburgh .gallery-img {
    border-bottom-color: var(--tab-accent-4);
}

.Glasgow .gallery-img {
    border-bottom-color: var(--tab-accent-5);
}

.gallery-details {
    padding: 1.2rem;
    /* Slightly Reduced padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gallery-details h3 {
    font-size: 1.4rem;
    /* Reduced from 1.75rem */
    margin-bottom: 0.5rem;
}

.HighlandsLochs h3 {
    color: var(--tab-accent-1);
}

.CastlesMarvels h3 {
    color: var(--tab-accent-2);
}

.Speyside h3 {
    color: var(--tab-accent-3);
}

.Edinburgh h3 {
    color: var(--tab-accent-4);
}

.Glasgow h3 {
    color: var(--tab-accent-5);
}

.gallery-details p {
    margin-bottom: 1rem;
    color: #475569;
    font-size: 0.95rem;
    /* Reduced slightly (default was likely 1rem) */
    line-height: 1.4;
}

.btn-view-tours {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--accent-color);
    color: white;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background 0.3s, transform 0.1s;
    margin-top: auto;
}

.btn-view-tours:hover {
    background: #d9580a;
    transform: translateY(-2px);
    color: white;
}

@media (max-width: 600px) {
    .tabs-nav {
        justify-content: space-around;
        gap: 5px;
    }

    .tab-button {
        flex: 1 1 45%;
        font-size: 1rem;
        padding: 0.75rem 0.5rem;
        text-align: center;
    }
}

/* =========================================
   8. TOUR DETAILS STYLES (tour-detail.html)
   ========================================= */
.container-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.tour-section {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 0;
    scroll-margin-top: 150px;
    /* Prevent sticky header overlap */
}

/* Jump Links */
.container-detail>div:first-child:not(.tour-section) {
    margin-bottom: 0;
}

.tour-content-body {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}

.tour-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0f2f1;
    padding: 1.5rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    gap: 2rem;
}

.price-and-action-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tour-section h2 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    /* Scaled from 2.2rem desktop to ~1.5rem mobile */
    color: var(--primary-color);
    padding-left: 0;
    margin-bottom: 0;
    flex-shrink: 1;
    line-height: 1.2;
}

.price-tag {
    /* distinct block context, was flex/col but that separated £ from number */
    display: block;
    text-align: center;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    /* Scaled from 2.5rem desktop to ~1.8rem mobile */
    font-weight: bold;
    color: var(--accent-color);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.price-tag [data-field="price"]::before {
    content: '£';
}

.price-tag .price-small-text {
    font-size: 0.8rem;
    font-weight: normal;
    color: #475569;
    display: block;
    line-height: 1.2;
    margin-top: 3px;
}

/* Tour Meta repeated from earlier but specific context */
.tour-content-body .tour-meta {
    display: flex;
    gap: 1.5rem;
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 10px;
}

.itinerary-list {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.pricing-link-note {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
    font-style: italic;
    color: var(--accent-color);
    text-decoration: none;
}

.pricing-link-note:hover {
    text-decoration: underline;
}

.itinerary-list li {
    margin-bottom: 0.75rem;
    color: var(--text-dark);
    font-size: 1.05rem;
}

.tour-info-box {
    padding: 1.5rem;
    border-left: 4px solid var(--primary-color);
    background-color: #f8fafc;
    margin-top: 1.5rem;
    color: #475569;
}

.tour-info-box p {
    margin-bottom: 0.5rem;
}

.tour-info-box strong {
    color: var(--text-dark);
}

.jump-links {
    text-align: center;
    margin-bottom: 3rem;
}

.jump-links a {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
}

.jump-links a:hover {
    text-decoration: underline;
    color: var(--accent-color);
}

.btn-book-now {
    padding: 10px 25px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    transition: background 0.3s;
    flex-shrink: 0;
    height: fit-content;
}

.btn-book-now:hover {
    background: #ea580c;
}

@media (max-width: 768px) {
    .tour-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tour-section h2 {
        margin-bottom: 0.5rem;
    }

    .price-and-action-group {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        flex-wrap: wrap;
        /* Allow button to drop to next line if needed */
        gap: 10px;
    }

    .price-tag {
        align-items: flex-start;
    }

    .tour-content-body,
    .tour-header-row {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =========================================
   9. BOOKING FORM & CONTACT STYLES (booking-form.html, contact-us.html)
   ========================================= */
.container-form {
    max-width: 700px;
    margin: 3rem auto;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-intro-text {
    text-align: center;
    margin-bottom: 2rem;
    color: #dc2626;
    font-style: italic;
    font-weight: normal;
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 1.5rem;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-row.duration-row .form-group.half-group {
    flex: 1;
    margin-bottom: 0;
}

.form-row.duration-row .form-group.quarter-group {
    flex: 1;
    min-width: 20%;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

/* Terms and Conditions Google Doc Embed */
.doc-embed {
    width: 100%;
    min-height: 100vh;
    /* Full viewport height */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
    width: 100%;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.vehicle-note {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
}

.phone-input-group {
    display: flex;
    gap: 10px;
    width: 100%;
}

.phone-input-group .country-code-select {
    flex-shrink: 0;
    width: 25%;
}

.phone-input-group input[type="tel"] {
    flex-grow: 1;
    width: auto;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit:hover {
    background: #ea580c;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        margin-bottom: 1.5rem;
    }
}

/* =========================================
   10. FOOTER ADJUSTMENTS
   ========================================= */
footer p:last-of-type {
    white-space: nowrap;
    /* Scale font on mobile to prevent overflow with nowrap */
    font-size: clamp(0.6rem, 2.5vw, 1rem);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.social-links a {
    color: var(--primary-color);
    transition: transform 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: translateY(-3px);
}

.social-links svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* =========================================
   11. TERMS AND CONDITIONS CUSTOM STYLES
   ========================================= */
.terms-container {
    max-width: 800px;
    margin: 3rem auto;
    text-align: left;
    padding-top: 0;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.terms-wrapper {
    overflow: hidden;
    /* Crops the top of the Google Doc via negative margin */
    /* Crops the top of the Google Doc via negative margin */
    width: 100%;
    height: 60vh;
    /* Increased to 60vh to provide more reading space on desktop */
    min-height: 450px;
    /* Increased min-height */
    position: relative;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 1rem;
    background: white;
    /* Ensure visible background */
}

.terms-iframe {
    width: 100%;
    height: calc(100% - 40px);
    /* Reduced height to guarantee safety gap at bottom */
    margin-top: -60px;
    /* Hide Google Doc Header */
    border: none;
    display: block;
}

.terms-actions {
    text-align: center;
    margin-top: 6rem;
    /* Increased from 4rem to 6rem per user request */
}

@media (max-width: 768px) {
    .terms-container {
        padding-left: 0;
        /* Fully remove padding to maximize width */
        padding-right: 0;
        margin-top: 0.5rem;
        margin-bottom: 0;
        width: 100%;
    }

    .terms-wrapper {
        height: 75vh;
        /* Increased to 75vh for maximum visibility */
        min-height: auto;
        border: none;
        border-radius: 0;
        width: 100%;
    }

    .terms-iframe {
        /* Scale down to reduce text size (0.85x) */
        width: 117.65%;
        /* 100% / 0.85 */
        height: 100%;
        /* Set to 100% base height. Scaled = 85%. Minus margin = ~80% effective. HUGE safety gap. */
        transform: scale(0.85);
        transform-origin: top left;
        margin-top: -51px;
        /* Keep header crop */
        margin-bottom: 0;
    }
}