/* Product Page Custom Styling */

/* Hero Section */
.custom-product-hero {

    color: #ffffff;
    text-align: center;
    padding: 120px 20px; /* Adjust padding as needed */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Adjust height as needed */
    overflow: hidden; /* Contain absolutely positioned background */
}

.custom-product-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 0; /* Behind overlay and content */
}

.custom-product-hero::before { /* Optional overlay for better text readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
    z-index: 1; /* Above background, below content */
}

.custom-product-hero .hero-content {
    position: relative;
    z-index: 2; /* Above overlay */
}

.custom-product-hero h1,
.custom-product-hero p {
    position: relative; /* To ensure text is above the overlay */
    z-index: 2; /* Above overlay */
}

.custom-product-hero h1 {
    font-size: 3.5em; /* Adjust size */
    font-weight: bold;
    margin-bottom: 0.2em;
    line-height: 1.2;
}

.custom-product-hero p { /* For the excerpt/year below title */
    font-size: 1.5em; /* Adjust size */
    margin-top: 0;
    opacity: 0.9;
}

/* General Tour Section Styling */
.tour-section {
    padding: 50px 20px; /* Padding for each section */
    max-width: 1100px; /* Max width for content area */
    margin: 0 auto; /* Center content area */
    border-bottom: 1px solid #e0e0e0; /* Separator line */
}

.tour-section:last-child {
    border-bottom: none;
}

.tour-section-title {
    font-size: 2.2em; /* Adjust size */
    color: #222222; /* Dark title color */
    margin-bottom: 25px;
    text-align: left; /* Or center, depending on preference */
}

.tour-section-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444; /* Content text color */
}

.tour-section-content p,
.tour-section-content ul,
.tour-section-content ol {
    margin-bottom: 1.5em;
}

.tour-section-content ul,
.tour-section-content ol {
    padding-left: 20px;
}

/* Specific styling for Inclusions (icon list) - basic example */
.tour-inclusions .tour-section-content ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns on larger screens */
    gap: 15px;
}

.tour-inclusions .tour-section-content li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tour-inclusions .tour-section-content li::before { /* Placeholder for icon */
    content: '✔'; /* Example icon, replace with SVG or font icon */
    font-size: 1.2em;
    color: #0073aa; /* Example icon color */
    margin-right: 10px;
    min-width: 20px; /* Ensure space for icon */
}

/* Basic styling for Itinerary (if you have a two-column layout in HTML) */
.tour-itinerary .itinerary-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.tour-itinerary .itinerary-days {
    flex: 1;
    min-width: 280px;
}

.tour-itinerary .itinerary-map-area {
    flex: 2;
    min-width: 300px;
}

.tour-itinerary .itinerary-map-area img { /* If map is an image */
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Basic styling for Highlights (if you have image elements) */
.tour-highlights .highlights-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.tour-highlights .highlight-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.tour-highlights .highlight-item p {
    font-size: 0.9em;
    color: #555;
}

/* Map Section */
.tour-map .tour-section-content img { /* If map is an image */
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Ensure your theme's main content area allows full width for hero if needed */
/* This might require inspecting your theme's structure and overriding its container */
body.single-product .site-content > .container { /* Example selector, adjust to your theme */
    /* max-width: 100%; */
    /* padding-left: 0; */
    /* padding-right: 0; */
}

/* Custom Tour Details Section Styling */
.custom-tour-details-section {
    padding: 80px 0 40px 0; /* Increased top padding to prevent sticky nav from covering content */
    border-top: 1px solid #e0e0e0; /* This will now be above the breadcrumbs */
    border-bottom: 1px solid #e0e0e0; /* Separator from content below */
    background-color: #fff; /* Optional: if you want a white background for this section */
}

.tour-details-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Adjust ratio as needed, e.g., 3fr 2fr or 1fr 1fr */
    gap: 40px; /* Space between columns */
    max-width: 1100px; /* Match other sections if applicable */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Padding inside the container */
}

.tour-summary-column {
    min-width: 0; /* Fix for Swiper in CSS Grid */
}

.tour-summary-column .tour-summary-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444;
}

.tour-summary-column .tour-summary-content p {
    margin-bottom: 1em;
    max-width: 100%; /* Override global p max-width if needed */
    text-align: left; /* Override global p text-align if needed */
}

.tour-info-column .tour-info-box {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tour-info-box .info-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
}

.tour-info-box .info-item:last-child,
.tour-info-box .info-item.tour-buttons { /* Ensure buttons don't have a bottom border */
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.tour-info-box .info-item label {
    display: block;
    font-size: 0.8em;
    color: #777;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: 600;
}

.tour-info-box .info-item p {
    font-size: 1rem;
    color: #333;
    margin: 0;
    font-weight: 500;
    max-width: 100%;
    text-align: left;
}

.tour-info-box .info-item select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.95rem;
    box-sizing: border-box; /* Important for width 100% */
}

.tour-info-box .tour-price-section {
    text-align: right; /* Align price to the right */
}

.tour-info-box .tour-price-section .price-label {
    font-size: 0.9em;
    color: #555;
    display: block; /* Or inline-block if preferred */
    margin-bottom: 5px;
}

.tour-info-box .tour-price-section .tour-dynamic-price {
    font-size: 2.2em;
    font-weight: bold;
    color: var(--primary-color, #244061); /* Use theme primary color */
    display: block; /* Or inline-block */
}

.tour-info-box .tour-price-section .tour-dynamic-price .woocommerce-Price-amount.amount {
    font-size: 1em; /* Inherit size from .tour-dynamic-price */
}
.tour-info-box .tour-price-section .tour-dynamic-price del .woocommerce-Price-amount.amount {
    font-size: 0.6em; /* Smaller strikethrough price */
    color: #888;
}


.tour-info-box .trip-code {
    font-size: 0.85em;
    color: #666;
    text-align: right;
    margin-top: -10px; /* Pull it up a bit */
}

.tour-info-box .tour-buttons button,
.tour-info-box .tour-buttons a.button {
    width: 100%;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
    line-height: 1.3; /* Ensure consistent line height for button and a tag */
}

.tour-info-box .tour-buttons button:last-child,
.tour-info-box .tour-buttons a.button:last-child {
    margin-bottom: 0;
}

.tour-info-box .tour-buttons .tour-check-availability {
    background-color: var(--primary-color, #244061); /* Dark button */
    color: #ffffff;
    border: none;
}

.tour-info-box .tour-buttons .tour-check-availability:hover {
    background-color: #1a3257; /* Darken primary color */
}

.tour-info-box .tour-buttons .tour-speak-to-expert {
    background-color: transparent;
    color: var(--primary-color, #244061);
    border: 1px solid var(--primary-color, #244061);
}

.tour-info-box .tour-buttons .tour-speak-to-expert:hover {
    background-color: #f0f0f0; /* Light background on hover */
    color: #1a3257;
    border-color: #1a3257;
}

/* Responsive adjustments for the tour details section */
@media (max-width: 992px) {
    .tour-details-container {
        grid-template-columns: 1fr; /* Stack columns */
    }
    .tour-info-column {
        margin-top: 30px; /* Add space when stacked */
    }
}

/* Styling for the new title in the tour summary column */
.tour-summary-title {
    font-size: 2.2em; /* Adjust as needed, similar to your target image */
    color: var(--primary-color, #244061); /* Or your desired title color */
    margin-bottom: 0.75em; /* Space below the title */
    line-height: 1.3;
    font-weight: bold; /* Or adjust as needed */
}

/* Styling for the breadcrumb wrapper */
.custom-breadcrumb-wrapper {
    max-width: 1100px; /* Match other content sections */
    margin: 0 auto 25px auto; /* Center and ensure space below breadcrumbs, before title */
    padding: 0 20px; /* Align with content padding */
    /* border-bottom: 1px solid #e0e0e0; /* Uncomment if you want a line directly under breadcrumbs */
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb {
    /* You can add specific styles for the breadcrumb itself if needed */
    /* For example, to match the font or color of your target image */
    font-size: 0.9em;
    color: #555;
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb a {
    color: var(--primary-color, #244061);
    text-decoration: none;
}

.custom-breadcrumb-wrapper .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* Hide Blocksy theme's default breadcrumbs in the entry header on single product pages */
/* This targets the <nav class="ct-breadcrumbs"> inside <header class="entry-header"> */
body.single-product header.entry-header nav.ct-breadcrumbs {
    display: none !important;
}

/* Custom Itinerary Section Styling */
.custom-itinerary-section {
    /* Uses .tour-section for padding, max-width, margin, border-bottom */
    padding-top: 80px !important; /* Increased top padding to prevent sticky nav from covering content */
}

.itinerary-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between map and accordion columns */
    align-items: flex-start; /* Align items to the top, important for sticky behavior */
}

.itinerary-map-column {
    flex: 1; /* Adjust flex basis as needed, e.g., 0 0 300px for fixed width */
    min-width: 280px; /* Minimum width before wrapping */
    position: sticky;
    top: 160px; /* Increased top value to create more space below sticky nav */
    align-self: flex-start; /* Prevents stretching if the accordion column is taller */
    padding-top: 0px; /* Align map with top of its container */
}

.itinerary-map-column img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.itinerary-accordion-column {
    flex: 2; /* Takes up more space */
    min-width: 300px; /* Minimum width */
    margin-top: -44px; /* Pull up to align with map */
}

.itinerary-header {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
    align-items: center;
    margin-bottom: 20px; /* Space below header before accordion items */
}

.itinerary-header .tour-section-title {
    margin-bottom: 0; /* Remove default margin from h2 if it's inside flex */
}

.itinerary-toggle-all.button-link {
    background: none;
    border: none;
    color: var(--primary-color, #244061);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
}

.itinerary-toggle-all.button-link:hover {
    color: #1a3257; /* Darken primary color */
}

.kwt-accordion {
    /* border-top: 1px solid #e0e0e0; */ /* Optional: if you want a line above all items */
}

.kwt-accordion .accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden; /* To contain background and rounded corners */
}
.kwt-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.kwt-accordion .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border: none;
    /* border-bottom: 1px solid #e0e0e0; */ /* Separator if items are not individually bordered */
    text-align: left;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

.kwt-accordion .accordion-header:hover {
    background-color: #f1f1f1;
}

.kwt-accordion .accordion-header .accordion-title {
    flex-grow: 1;
}

.kwt-accordion .accordion-header .accordion-icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.2s ease-in-out;
    margin-left: 15px;
}

.kwt-accordion .accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(-135deg);
}

.kwt-accordion .accordion-content {
    padding: 20px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0; /* Separator from header */
    /* display: none; */ /* JS will handle this */
}

.kwt-accordion .accordion-content-inner > div:not(:last-child) {
    margin-bottom: 20px; /* Space between description, accommodation, meals, etc. */
}

.itinerary-day-description p:last-child {
    margin-bottom: 0;
}

.item-subtitle {
    font-size: 1em;
    font-weight: bold;
    color: #444;
    margin-top: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.item-subtitle [class^="icon-"] { /* Basic styling for icon placeholders */
    margin-right: 8px;
    font-style: normal; /* If using text/emoji as icons */
}
.item-subtitle .icon-bed::before { content: "🛏️"; } /* Example emoji */
.item-subtitle .icon-utensils::before { content: "🍴"; } /* Example emoji */
.item-subtitle .icon-plus-circle::before { content: "+"; font-weight:bold; }


.itinerary-day-optional-activities ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.itinerary-day-optional-activities li {
    margin-bottom: 5px;
}


/* Responsive adjustments for itinerary section */
@media (max-width: 768px) {
    .itinerary-container {
        flex-direction: column; /* Stack map and accordion */
    }
    .itinerary-map-column,
    .itinerary-accordion-column {
        flex-basis: auto; /* Reset flex basis */
        width: 100%;
    }
    .itinerary-map-column {
        position: static; /* Disable sticky when stacked */
        padding-top: 0; /* Reset padding-top for stacked layout */
    }
    .itinerary-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .itinerary-header .tour-section-title {
        margin-bottom: 10px;
    }
    .itinerary-toggle-all.button-link {
        align-self: flex-start; /* Align to left under title */
    }
}

/* ==========================================================================
   Inclusions and Activities Section
   ========================================================================== */

.tour-inclusions-activities {
    /* Inherits from .tour-section for padding, max-width, etc. */
    padding-top: 80px !important; /* Increased top padding to prevent sticky nav from covering content */
}

.tour-inclusions-activities .tour-section-title {
    /* font-size removed to inherit from theme H2 */
    /* font-weight removed to inherit from theme H2 */
    color: #333;
    margin-bottom: 30px;
}

.inclusions-activities-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 40px; /* Space between columns */
}

.inclusions-column {
    flex: 1; /* Adjust ratio as needed, e.g., flex-basis: 35%; */
    min-width: 280px; /* Minimum width before stacking */
}

.activities-column {
    flex: 1; /* Adjust ratio as needed, e.g., flex-basis: 60%; */
    min-width: 300px; /* Minimum width */
}

/* .inclusion-category-grid is no longer used for the main layout of these items */
/* We can remove its specific grid display properties if they were solely for this */
/* .inclusion-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
} */

.inclusion-item {
    margin-bottom: 25px; /* Space between stacked items in the left column */
}
.inclusion-item:last-child {
    margin-bottom: 0;
}

.inclusion-item-header,
.activities-group-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Reduced space between icon/title and description */
}

.inclusion-item-icon,
.activities-group-icon {
    margin-right: 10px; /* Space between icon and title */
    font-size: 1.2em; /* Slightly smaller to match target */
    color: #555; /* Icon color from target */
    width: 20px; /* Consistent icon width */
    height: 20px; /* Consistent icon height */
    display: inline-flex; /* Helps with alignment if using SVGs */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Placeholder icons - replace with actual SVGs or font icons */
/* Ensure your actual icons match the target image's style */
.icon-meals::before { content: '🍴'; /* Placeholder - target uses a fork & knife icon */ }
.icon-transport::before { content: '🚌'; /* Placeholder - target uses a bus/train icon */ }
.icon-accommodation::before { content: '🏨'; /* Placeholder - target uses a building/bed icon */ }
.icon-included-activities::before { content: '✔'; font-weight: bold; color: #0073aa; /* Target uses a checkmark */ }
.icon-optional-activities::before { content: '+'; font-weight: bold; font-size: 1.2em; color: #555; /* Target uses a plus */ }


.inclusion-item-title,
.activities-group-title {
    /* font-size removed to inherit from theme H3/H5 */
    /* font-weight removed to inherit from theme H3/H5 */
    color: #333;
    margin: 0;
}

.inclusion-item-description {
    /* font-size removed to inherit base font style */
    color: #555;
    line-height: 1.6;
    padding-left: 30px; /* (icon width + icon margin-right) */
}

.activities-group .activity-list {
    /* font-size removed to inherit base font style */
    color: #555;
    line-height: 1.6;
    /* No padding-left needed here if icons are part of the header */
}

.activities-group .activity-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activities-group .activity-list li {
    margin-bottom: 6px; /* Spacing between list items */
}


/* Divider between Included and Optional Activities */
.inclusions-activities-divider.internal-activities-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0; /* Standard divider color */
    margin: 25px 0; /* Space around the divider */
}
/* Remove the old general divider if it's not needed elsewhere or conflicts */
/* hr.inclusions-activities-divider { display: none; } */


.activities-group {
    /* margin-top: 0; /* Resetting old margin if any */
}

.activities-group.optional-activities {
    background-color: #f9f9f9; /* Light grey background for optional activities */
    padding: 20px;
    border-radius: 4px; /* Optional: slight rounding */
}


.toggle-activities-link {
    display: inline-block;
    /* font-size removed to inherit base font style (or can be set to a specific smaller value if needed) */
    /* Example: font-size: 14px; if 16px is too large for this link */
    color: var(--primary-color, #c00); /* Target uses a reddish color */
    text-decoration: none;
    margin-top: 12px;
    cursor: pointer;
    font-weight: 500; /* Keeping a slightly bolder weight for emphasis if desired */
    /* padding-left: 36px; /* Removed, as it's now directly under the list */
}

.toggle-activities-link:hover {
    text-decoration: underline;
}

.toggle-activities-link .arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.9em; /* Relative to link font size */
}

.toggle-activities-link .arrow.up::before {
    content: '▲';
}

.toggle-activities-link .arrow.down::before {
    content: '▼';
}

.optional-activities .activity-list li .activity-price {
    color: #777;
    font-size: 0.9em; /* Relative to li */
    margin-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inclusions-activities-layout {
        flex-direction: column; /* Stack columns */
        gap: 30px; /* Adjust gap for stacked layout */
    }

    .inclusions-column,
    .activities-column {
        flex-basis: auto; /* Reset flex basis for stacking */
        width: 100%;
    }

    .inclusion-item-description {
        padding-left: 30px; /* Keep alignment if icons are still present */
    }
    /* If icons stack above title on mobile, padding-left might need to be 0 */
}

/* Styles for Show/Hide Activity List Items */
.activities-group .activity-list ul li:nth-child(n+6) { /* Hide items from the 6th onwards by default */
    display: none;
}

.activities-group .activity-list ul.show-all li { /* Show all items when .show-all class is present */
    display: list-item; /* Or whatever the original display type was, typically list-item for li */
}

/* ==========================================================================
   Optional Activities Section
   ========================================================================== */

.optional-activities-section {
    padding: 80px 20px 50px 20px; /* Increased top padding to prevent sticky nav from covering content */
    max-width: 1100px;
    margin: 0 auto;
    border-bottom: 1px solid #e0e0e0;
}

.optional-activities-section .section-title {
    font-size: 2.2em;
    color: #222222;
    margin-bottom: 25px;
    text-align: left;
}

/* Activity Card Styling (both single and in carousel) */
.activity-card {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
}

.activity-card.single {
    max-width: 1100px;
    margin: 0 auto;
}

.activity-image {
    flex: 1;
    min-width: 300px;
    height: 380px; /* Added fixed height for desktop */
    overflow: hidden; /* Ensure image doesn't overflow its container */
}

.activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.activity-content {
    flex: 1.5;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.activity-title {
    font-size: 2em;
    color: var(--primary-color, #244061);
    margin: 0 0 15px 0;
}

.activity-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
    flex-grow: 1;
}

.activity-price {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--secondary-color, #c00);
    align-self: flex-end;
    background-color: #f5f5f5;
    padding: 8px 15px;
    border-radius: 4px;
}

/* Swiper Carousel Styling */
.activities-carousel-container {
    position: relative;
    margin: 0 auto;
    padding: 10px 60px 40px 60px; /* Add horizontal padding for external arrows */
}

.swiper-button-prev,
.swiper-button-next {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 40px !important; 
    height: 40px !important;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    /* Hide default text-based arrows */
    font-size: 0;
    /* line-height: 0; */
    color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: ''; 
    font-size: 0; 
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

.swiper-button-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244061'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
}

.swiper-button-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244061'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
}

.swiper-button-prev {
    left: -50px; /* Position outside the carousel container */
}
.swiper-button-next {
    right: -50px; /* Position outside the carousel container */
}

/* Main Swiper container for optional activities */
.activities-carousel-container .swiper { /* Targeting .activities-swiper */
    overflow: hidden; /* Prevent slide bleeding */
    box-sizing: border-box; 
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: var(--primary-color, #244061);
}

/* Responsive adjustments for activities */
@media (max-width: 768px) {
    .activity-card {
        flex-direction: column;
    }
    
    .activity-image {
        min-width: 100%;
        height: 200px;
    }
    
    .activity-content {
        padding: 20px;
    }
    
    .activity-title {
        font-size: 1.5em;
    }
    
    .activity-price {
        align-self: flex-start;
        margin-top: 10px;
    }
    
    /* Adjust carousel container padding for mobile */
    .activities-carousel-container {
        padding: 10px 20px 40px 20px; /* Reduce horizontal padding on mobile */
    }
    
    /* Move arrows back inside on mobile to prevent cutoff */
    .swiper-button-prev {
        left: 10px;
    }
    .swiper-button-next {
        right: 10px;
    }
}

/* Tour Summary Slideshow */
.tour-summary-slideshow {
    margin-top: 25px;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    border-radius: 8px;
    overflow: hidden;
}

.tour-summary-slideshow .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-summary-slideshow .swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: 0.7;
}

.tour-summary-slideshow .swiper-pagination-bullet-active {
    background-color: var(--primary-color, #244061);
    opacity: 1;
}

/* ==========================================================================
   Accommodation Section
   ========================================================================== */

.accommodation-section {
    padding: 80px 20px 60px 20px; /* Increased top padding to prevent sticky nav from covering content */
    max-width: 1100px;
    margin: 0 auto;
    border-bottom: 1px solid #e0e0e0;
}

.accommodation-header {
    margin-bottom: 40px;
}

.accommodation-header h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
    font-weight: 400;
}

.accommodation-header p {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    margin: 0;
    max-width: none; /* Override global max-width */
}

.accommodation-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.pill-button {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
}

.pill-button:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-right: none;
}

.pill-button:last-child {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-left: none;
}

.pill-button.active {
    background-color: var(--primary-color, #244061);
    color: #ffffff;
    border-color: var(--primary-color, #244061);
}

.pill-button:hover:not(.active) {
    background-color: #e8e8e8;
    border-color: #ccc;
}

.accommodation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

/* Dynamic grid adjustments based on number of cards */
.accommodation-grid:has(.accommodation-card:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

.accommodation-grid:has(.accommodation-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.accommodation-grid:has(.accommodation-card:nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.accommodation-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4/3;
}

.accommodation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.accommodation-card .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.accommodation-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.accommodation-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #ffffff;
    padding: 30px 20px 20px 20px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.accommodation-card .card-info h3.hotel-name {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #ffffff;
    line-height: 1.2;
}

.accommodation-card .card-info .hotel-location {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Responsive adjustments for accommodation section */
@media (max-width: 768px) {
    .accommodation-section {
        padding: 40px 15px;
    }
    
    .accommodation-header h2 {
        font-size: 2em;
    }
    
    .accommodation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .accommodation-grid:has(.accommodation-card:nth-child(1):last-child),
    .accommodation-grid:has(.accommodation-card:nth-child(2):last-child),
    .accommodation-grid:has(.accommodation-card:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }
    
    .pill-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .accommodation-card .card-overlay {
        padding: 20px 15px 15px 15px;
    }
    
    .accommodation-card .card-info h3.hotel-name {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .accommodation-toggle {
        margin-bottom: 30px;
    }
    
    .pill-button {
        flex: 1;
        text-align: center;
    }
}

/* Accommodation Slideshow Styling */
.accommodation-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
}

.accommodation-slideshow .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.accommodation-slideshow .swiper-slide {
    width: 100%;
    height: 100%;
}

.accommodation-slideshow .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product Navigation Bar */
.product-nav-bar {
    background-color: var(--primary-color);
    padding: 0 20px;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.product-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

.product-nav-list li {
    margin: 0;
}

.product-nav-list .nav-link {
    display: block;
    padding: 15px 20px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}

.product-nav-list .nav-link:hover {
    background-color: var(--secondary-color);
    color: var(--text-light);
}

.product-nav-list .nav-link.active {
    background-color: var(--secondary-color);
    color: var(--text-light);
}