/* --- New: Container for the main page heading --- */
.itinerary-main-heading-container {
  background-color: #ffffff;
  padding: 10px 10% 0 10%; /* Adjust padding as needed */
}

/* --- New: Main page heading style --- */
.itinerary-main-heading {
  text-align: center;
  font-weight: bold;
  color: red;
  font-size: 20px;
  font-family: Verdana, sans-serif;
  margin: 0 0 5px 0;
  line-height: 1.4;
}

/* --- General Itinerary Section Container (renamed from overallcoverbox for clarity if you wish) --- */
/* This is your flex container for the main two-column layout */
.itinerary-overallcoverbox {
  background-color: #ffffff;
  padding: 10px 10% 20px 10%;
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  align-items: flex-start;
  margin: 0 auto;
  /* DEFAULT (Desktop/Tablet > 768px): Side-by-side */
  flex-direction: row;
}

/* --- TOUR SUMMARY Text Column --- */
.itinerary-toursummary {
  flex: 1 1 64%;
  line-height: 1.5;
  min-width: 300px;
  margin: 0 0 1px 0;
  order: 1; /* Desktop: Text first */
}
/* --- Style for sub-headings like 'TOUR SUMMARY' --- */
.itinerary-section-title {
  text-align: justify; /* Changed from CENTER to justify for consistency with other text */
  font-weight: bold;
  color: red;
  font-size: 20px;
  font-family: Verdana, sans-serif;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* --- Style for general text paragraphs --- */
.itinerary-paragraph {
  font-size: 16px;
  text-align: justify;
  color: black;
  margin-bottom: 10px; /* Add some spacing between paragraphs */
}

/* --- Map Image Column --- */
.itinerary-map-column {
  flex: 1 1 30%;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  height: 600px; /* Desktop/Tablet height */
  overflow: hidden;
  margin-top: 0;
  order: 2; /* Desktop: Map after text */
}
.itinerary-map-column img {
  width: 100%;
  height: 100%; /* Make the image fill its container's height */
  object-fit: contain; /* 'contain' will ensure the whole map is visible, potentially leaving whitespace */
  border-radius: 0px;
  display: block; /* Remove any extra spacing below the image */
  margin: 0; /* Ensure no external margins interfere */
}

/* --- Image Caption Style (if you use it for the map) --- */
.itinerary-image-caption {
  color: red;
  margin-top: 0px; /* Adjust margin to place caption correctly relative to image */
  margin-bottom: 0px;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-family: Verdana, sans-serif;
  font-size: 12px;
}


.featured-hotels-cell.featured-hotels-nights-header,
.featured-hotels-cell.featured-hotels-nights-data {
    text-align: center; /* Change this from left to center globally */
}
.itinerary-day-image-with-caption {
  /* You can give it a width or margin to center it, for example */
  width: 50%;
  margin: 20px auto;
  
}

/* --- Media Queries for Responsiveness --- */

@media (max-width: 1024px) {

    /* Consolidated width/padding adjustments for main containers */
    .itinerary-overallcoverbox,
    .itinerary-day-section-container,
    .featured-hotels-section,
    .exclusions-overall-container,
    .itinerary-cta-section,
    .unlock-itinerary-box {
        width: 95%; /* Adjust width for tablets/larger mobile */
        padding: 1px 5% 20px 5%; /* Adjust padding */
    }

    /* Force all day sections to stack vertically on mobile/tablet */
    .itinerary-day-section-container {
        flex-direction: column !important; /* This should only apply here */
        /* display: flex; is already globally set, so no need to repeat it unless you are removing it somewhere specific for mobile */
        align-items: flex-start;
    }

    /* Apply mobile order: Image/Map first, Text second */
    .itinerary-map-column {
        order: 1; /* Map column (in tour summary) comes first */
        height: auto; /* Tablet map height */
    }
    .itinerary-day-image-column {
        order: 1; /* Image column comes first in day sections */
        height: auto;
        max-height: 1000px; /* Mobile image max-height */
        overflow: hidden;
    }
    .itinerary-map-column img,
    .itinerary-day-image {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    /* Ensure consistent width/margin/padding for other main containers */
    .featured-hotels-section,
    .exclusions-overall-container,
    .inclusions-overall-container,
    .itinerary-cta-section,
    .unlock-itinerary-box {
        width: 95%;
        margin: 10px auto;
        box-sizing: border-box;
        padding: 0 15px;
    }
    .itinerary-toursummary,
    .itinerary-day-text-column {
        order: 2; /* Text columns come second */
        margin-top: 20px; /* Spacing for stacked content */
        min-width: unset; /* Allow shrinking on mobile */
    }

    /* Font size adjustments for this breakpoint */
    .itinerary-main-heading,
    .itinerary-section-title {
        font-size: 18px;
    }
    .itinerary-paragraph,
    .itinerary-day-paragraph {
        font-size: 15px;
    }
    .itinerary-day-image-caption {
        font-size: 11px;
    }

    /* Adjust day image/text columns to take full width on mobile */
    .itinerary-day-image-column,
    .itinerary-day-text-column {
        width: 100% !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* Adjust width for hotel night cells on mobile/tablet */
    .featured-hotels-cell.featured-hotels-nights-header,
    .featured-hotels-cell.featured-hotels-nights-data {
        width: 60px;
        min-width: 60px;
        flex-basis: auto;
    }

}


@media (max-width: 768px) {
  .itinerary-main-heading-container,
  .itinerary-overallcoverbox,
  .itinerary-day-section-container 
  .featured-hotels-section
  .exclusions-overall-container
  .itinerary-cta-section
  .unlock-itinerary-box{
    /* flex-direction: column; is already applied by 1024px query, no need to repeat */
    width: 95%; /* Mobile width */
    padding: 15px;
    margin: 15px auto;
    box-sizing: border-box;
  }

  /* Order properties are already set by 1024px query, no need to repeat unless different */
  .itinerary-map-column,
  .itinerary-day-image-column {
    margin-top: 15px; /* Adjust spacing as needed for this smaller breakpoint */
  }

  .itinerary-toursummary,
  .itinerary-day-text-column {
    margin-top: 20px; /* Spacing for stacked mobile content */
  }

  /* Font size adjustments for this breakpoint */
  .itinerary-main-heading,
  .itinerary-section-title {
    font-size: 16px;
  }
  .itinerary-paragraph,
  .itinerary-day-paragraph {
    font-size: 14px;
  }
  .itinerary-day-image-caption {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  /* Apply consistent full width and minimal padding for very small screens */
  .itinerary-main-heading-container,
  .itinerary-overallcoverbox {
    width: 100%; /* Go full width on very small screens */
    padding: 10px; /* Minimal padding */
    margin: 10px auto;
    box-sizing: border-box;
  }


  .itinerary-map-column {
    height: auto; /* Ensure auto height for smaller screens too */
    max-height: 300px; /* Adjust max-height if needed for very small screens */
    margin-top: 10px; /* Adjust spacing for very small screens */
  }
  
  .itinerary-map-column img {
   object-fit: cover !important; /* Change from 'contain' to 'cover' */
    height: 100% !important; /* Ensure it stretches vertically to fill column */
    width: 100% !important; /* Ensure it fills horizontally */
  }

  .itinerary-main-heading,
  .itinerary-section-title {
    font-size: 14px;
  }

  .itinerary-paragraph {
    font-size: 13px;
  }
   .itinerary-day-image-column {
    order: 1; /* Image column comes first in day sections */
    height: auto;
    max-height: 1000px; /* Mobile image max-height */
    overflow: hidden; 
  }
}

/* Overall container for the Featured Hotels section */
.featured-hotels-section {
  width: 80%; /* Adjust width as desired */
  margin: 5px auto; /* Centered with top/bottom margin */
  font-family: Verdana, sans-serif;
  font-size: 12px;
  /* Add horizontal scroll if content overflows on smaller screens */
  overflow-x: auto; 
}

/* Common styles for all rows (header and data) */
.featured-hotels-row {
  display: flex; /* Makes cells align horizontally */
  align-items: stretch; /* Ensures cells in a row have equal height */
  /* Ensure it doesn't wrap on desktop or mobile if scaled */
  flex-wrap: nowrap; 
}

/* Header row specific styles */
.featured-hotels-header {
  display: flex; /* Ensure header is a flex container on desktop */
  background-color: green;
  color: white;
  font-weight: bold;
}

/* Data row alternating colors */
.featured-hotels-data-odd {
  background-color: white;
  color: black;
}

.featured-hotels-data-even {
  background-color: grey;
  color: white;
}

/* Common styles for all cells (header and data) */
.featured-hotels-cell {
  padding: 8px;
  text-align: center; /* Default text alignment */
  border-bottom: 1px solid #ccc; /* Add subtle border between rows */
  /* This border will be overridden by the last row's special styling if applicable */
  flex-shrink: 0; /* Prevent cells from shrinking too much by default */
}

/* Specific column widths using flex-basis */
.featured-hotels-nights-header,
.featured-hotels-nights-data {
  flex: 0 0 3%; /* Fixed width, no grow/shrink */
  min-width: 40px; /* Ensure a minimum width even if 3% is too small */
  text-align: left; /* Specific alignment for the 'NIGHTS' column */
}

.featured-hotels-city-header,
.featured-hotels-city-data {
  flex: 0 0 18%; /* Fixed width */
  min-width: 100px; /* Ensure a minimum width */
}

.featured-hotels-hotels-header,
.featured-hotels-hotels-data {
  flex: 1 1 79%; /* Grow/shrink, takes remaining space */
  min-width: 200px; /* Ensure a minimum width */
}

/* Remove bottom border from the last data row to prevent double border */
.featured-hotels-row:last-of-type .featured-hotels-cell {
  border-bottom: none;
}


/* --- Responsive Adjustments for Featured Hotels --- */

@media (max-width: 768px) {
  .featured-hotels-section {
    width: 95%; /* Make the table wider on smaller screens */
    font-size: 11px; /* **Shrunk font size more aggressively** */
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
  }

  /* REVERTING MOBILE STACKING FOR FEATURED HOTELS */
  .featured-hotels-row {
    flex-direction: row; /* Keep cells horizontal */
    margin-bottom: 0; /* Remove extra margin between "stacked" rows */
    border: none; /* Remove border around each "card" */
    border-radius: 0;
    padding: 0; /* Remove internal padding for each "card" */
    /* Add a min-width to the row to ensure desktop-like columns */
    min-width: 320px; /* **Adjusted min-width for the entire row** */
  }

  /* Adjust cell styling to be more compact on mobile */
  .featured-hotels-cell {
    padding: 4px; /* **Slightly smaller padding** */
    border-bottom: 1px solid #ccc; /* Keep existing border */
    flex-shrink: 1; /* Allow cells to shrink to fit */
    flex-basis: auto; /* Allow content to dictate base size */
    min-width: 0; /* **Allow cells to shrink to 0 if necessary, relies on flex-basis and flex-shrink to manage** */
    white-space: nowrap; /* **Prevent text from wrapping inside cells** */
    overflow: hidden; /* **Hide overflowing text** */
    text-overflow: ellipsis; /* **Add ellipsis for overflowed text** */
  }

  /* You might want to remove specific min-widths or make them smaller if content is too large */
  /* Specific column widths when scaled down */
  .featured-hotels-nights-header,
  .featured-hotels-nights-data {
    flex-basis: 15%; /* **Give nights more space, as 3% is too small for "Nights" text itself** */
    min-width: 30px; /* Even smaller min-width if needed */
  }

  .featured-hotels-city-header,
  .featured-hotels-city-data {
    flex-basis: 30%; /* **Adjust basis to balance columns** */
    min-width: 70px;
  }

  .featured-hotels-hotels-header,
  .featured-hotels-hotels-data {
    flex-basis: 55%; /* **Adjust basis to balance columns** */
    min-width: 100px;
  }

  /* Keep the header visible on mobile, just scaled down */
  .featured-hotels-header {
    display: flex; /* Ensure it stays visible */
    font-size: 15px;
  }

  /* REMOVING LABELS FOR MOBILE (::before pseudo-elements) */
  .featured-hotels-nights-data::before,
  .featured-hotels-city-data::before,
  .featured-hotels-hotels-data::before {
    content: none; /* Remove the labels */
  }

  /* Apply background colors directly to the original row container, not stacked rows */
  .featured-hotels-data-odd {
    background-color: white;
    color: black;
  }
  .featured-hotels-data-even {
    background-color: grey; /* Keep original grey */
    color: white; /* Keep original white */
  }
}

@media (max-width: 480px) {
  .featured-hotels-section {
    font-size: 12px; /* **Even smaller font for very small screens** */
  }
  .featured-hotels-row {
    min-width: 280px; /* **Even smaller min-width for very small screens** */
  }
  .featured-hotels-cell {
    padding: 2px; /* **Even smaller padding** */
  }
}

.exclusions-overall-container {
  width: 80%; /* Match width with other main sections */
  margin: 10px auto; /* Centered with top/bottom margin */
  font-family: Verdana, sans-serif;
  /* Optional: Add a subtle border around the entire combined section */
  border: 0px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* Ensures borders/backgrounds are clipped at corners */
}

/* --- New: Style for the 'EXCLUSIONS' title bar --- */
.exclusions-title {
  background-color: red;
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center; /* Center the text horizontally */
  margin: 0; /* Remove default paragraph margins to make it flush with container */
  font-size: 16px; /* Adjust font size as needed */
  text-transform: uppercase; /* Optional: Make text all caps */
  /* border-bottom: 1px solid #ccc; /* Optional: Add a subtle border at the bottom of the title */ */
}

/* --- Exclusions List Body (This is the section that holds the rows) --- */
/* This replaces the previous .exclusions-section */
.exclusions-list-body {
  /* No direct width or margin here, as it's controlled by .exclusions-overall-container */
  /* No top border if it's visually connected to the title */
  /* You can add a background color here if the entire list body needs one */
  /* background-color: white; */
  font-family: Verdana, sans-serif;
    font-size: 12px; 
}

/* Styles for each individual exclusion row */
.exclusions-row {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ccc; /* Border between rows */
}

/* Remove bottom border from the very last row */
.exclusions-row:last-of-type {
  border-bottom: none;
}

/* Alternating row colors */
.exclusions-row-odd {
  background-color: white;
  color: black;
}

.exclusions-row-even {
  background-color: grey;
  color: white;
}

/* Style for the exclusion description text (left side) */
.exclusions-item-description {
  flex: 1;
  padding-right: 10px;
  line-height: 1.5;
}

/* Style for the icon (❌) (right side) */
.exclusions-item-icon {
  width: 40px;
  text-align: center;
  color: green;
  font-size: 1.2em;
  font-weight: bold;
}

/* --- Responsive Adjustments for Exclusions (Update these to match new structure) --- */

@media (max-width: 768px) {
  .exclusions-overall-container {
    width: 95%; /* Make the overall container wider on smaller screens */
  }

  .exclusions-title {
    font-size: 12px; /* Slightly smaller font for mobile title */
  }

  .exclusions-list-body {
    font-size: 13px; /* Apply font size to the list body */
  }

 .exclusions-row {
  display: flex; /* Ensure display:flex is also present, if not already */
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  padding: 10px;
  border-bottom: 1px dashed #eee;
  flex-wrap: nowrap;
}
  .exclusions-row:last-of-type {
    border-bottom: none;
  }

  /* NEW: Style for the content wrapper within exclusion row */
  .exclusions-row-content {
    display: flex !important; /* Make it a flex container */
    flex-direction: row !important; /* Arrange children (description & icon) side-by-side */
    justify-content: space-between !important; /* Push them to opposite ends */
    align-items: center !important; /* Vertically center them */
    width: 100%; /* Ensure it takes full width of its parent */
    flex-wrap: nowrap;
    min-width: 0; /* Allow it to shrink if needed */
}

.exclusions-item-description {
  padding-right: 5px;
  flex-grow: 1;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Crucial for text ellipsis in flex items */
}

  .exclusions-item-icon {
    width: auto;
    text-align: left;
    margin-left: 0; /* Adjust or remove left margin */
    flex-shrink: 0; /* **Crucial: Prevent icon from shrinking** */
    min-width: 20px;
    white-space: nowrap; /* **Crucial: Keep icon and its ::before content on one line** */
  }

  /* Apply background colors directly to the stacked row container */
  .exclusions-row-odd {
    background-color: white;
    color: black;
  }
  .exclusions-row-even {
    background-color: #f0f0f0; /* Lighter grey for stacked rows */
    color: black;
  }
}

@media (max-width: 480px) {
  .exclusions-overall-container {
    font-size: 12px; /* Smaller overall font for very small screens */
  }
}


/* --- Inclusions Section --- */

/* Overall container for the Inclusions title and list */
.inclusions-overall-container {
  width: 80%; /* Match width with other main sections */
  margin: 20px auto; /* Centered with top/bottom margin */
  font-family: Verdana, sans-serif;
  border: 0px solid #ccc; /* Optional: Add a subtle border around the whole section */
  border-radius: 5px;
  overflow: hidden; /* Ensures borders/backgrounds are clipped at corners */
  /* Add horizontal scroll if content overflows on smaller screens */
  overflow-x: auto;
}

/* Style for the 'INCLUSIONS' title bar */
.inclusions-title {
  background-color: green; /* Green background as per your request */
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  margin: 0; /* Remove default paragraph margins */
  font-size: 16px; /* Adjust font size as needed */
  text-transform: uppercase;
}

/* Inclusions List Body (This is the section that holds the rows) */
.inclusions-list-body {
  font-size: 12px; /* Set base font size to match Featured Hotels & Exclusions */
}

/* Styles for each individual inclusion row */
.inclusions-row {
  display: flex;
  justify-content: space-between; /* Spreads content and icon to ends */
  align-items: center; /* Vertically aligns content */
  padding: 8px;
  border-bottom: 1px solid #ccc; /* Border between rows */
  /* Ensure it doesn't wrap on desktop or mobile if scaled */
  flex-wrap: nowrap; 
}

/* Remove bottom border from the very last row */
.inclusions-row:last-of-type {
  border-bottom: none;
}

/* Alternating row colors */
.inclusions-row-odd {
  background-color: white;
  color: black;
}

.inclusions-row-even {
  background-color: grey;
  color: white;
}

/* Style for the inclusion description text (left side) */
.inclusions-item-description {
  flex: 1; /* Allows this div to take up all available space */
  padding-right: 10px; /* Space between text and icon */
  min-width: 150px; /* Ensure description has some minimal width */
}

/* Style for the icon (✓) (right side) */
.inclusions-item-icon {
  width: 20px; /* Adjust width as needed for the checkmark */
  text-align: center;
  color: green; /* Color for the checkmark icon */
  font-size: 1.2em; /* Make the checkmark slightly larger */
  font-weight: bold;
  flex-shrink: 0; /* Prevent icon from shrinking */
  white-space: nowrap; /* Keep icon and its ::before content on one line */
}

/* --- Responsive Adjustments for Inclusions --- */

@media (max-width: 768px) {
  .inclusions-overall-container {
    width: 95%; /* Make the overall container wider on smaller screens */
    font-size: 10px; /* **Shrunk font size** */
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
  }

  .inclusions-title {
    font-size: 15px; /* Slightly smaller font for mobile title */
  }

  .inclusions-list-body {
    font-size: 10px; /* **Shrunk font size** */
  }

  /* REVERTING MOBILE STACKING FOR INCLUSIONS */
  .inclusions-row {
    flex-direction: row; /* Keep description and icon horizontal */
    align-items: center; /* Align items vertically */
    padding: 4px; /* **Smaller padding** */
    border-bottom: 1px solid #ccc; /* Keep desktop border style */
    min-width: 200px; /* **Adjusted min-width for the entire row** */
  }

  .inclusions-row:last-of-type {
    border-bottom: none;
  }

  /* Keep the content wrapper as it helps with flex layout, but adjust its internal flex properties */
  .inclusions-row-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Keep original spacing behavior */
  }

  .inclusions-item-description {
    padding-bottom: 0;
    padding-right: 5px;
    flex-grow: 1;
    flex-shrink: 1; /* Allow description to shrink */
    min-width: 0; /* **Allow greater shrinking on mobile** */
    white-space: nowrap; /* **Prevent text from wrapping inside cells** */
    overflow: hidden; /* **Hide overflowing text** */
    text-overflow: ellipsis; /* **Add ellipsis for overflowed text** */
  }

  .inclusions-item-icon {
    width: auto;
    text-align: center; /* Center the icon within its auto width */
    padding-top: 0;
    margin-left: 0;
    flex-shrink: 0; /* Prevent icon from shrinking */
    white-space: nowrap; /* Keep icon on one line */
  }

  /* REMOVING LABELS FOR MOBILE (::before pseudo-elements) */
  .inclusions-item-description::before,
  .inclusions-item-icon::before {
    content: none; /* Make sure this line is present for BOTH description and icon */
  }

  /* Apply background colors directly to the original row container, not stacked rows */
  .inclusions-row-odd {
    background-color: white;
    color: black;
  }
  .inclusions-row-even {
    background-color: grey; /* Keep original grey */
    color: white; /* Keep original white */
  }
}

@media (max-width: 480px) {
  .inclusions-list-body {
    font-size: 9px; /* **Even smaller font for very small screens** */
  }
  .inclusions-row {
    min-width: 180px; /* **Even smaller min-width for very small screens** */
  }
  .inclusions-item-description {
    padding-right: 2px; /* **Even less padding** */
  }
  .inclusions-item-icon {
    font-size: 1em; /* **Slightly smaller icon** */
  }
}

/* --- Call To Action (CTA) Section (placed before itinerary content) --- */

/* Overall container for the CTA text and button */
.itinerary-cta-section {
  background-color: #ffffff;
  padding: 2px 10% 5px 10%; /* Matches original inline padding */
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto the next line if no space */
  gap: 20px; /* Space between text and button columns */
  align-items: center; /* Vertically aligns items in the center of the container */
  width: 80%; /* Match width with other main sections */
  margin: 0 auto; /* Reduced space above */
  border: 0px solid #ccc; /* Optional: Add a subtle border around the whole section */
  border-radius: 5px; /* Optional: rounded corners */
  font-family: Verdana, sans-serif;
}

/* Left Section: Text Column */
.itinerary-cta-text-column {
  flex: 1 1 55%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 55% */
  min-width: 300px; /* Minimum width before it's forced to wrap */
  line-height: 1.3;
}

/* Style for the text paragraph inside the left column */
.itinerary-cta-text {
  text-align: justify;
  font-weight: bold;
  color: red;
  font-size: 20px;
  font-family: Verdana, sans-serif;
  margin: 0 0 10px 0; /* Remove default paragraph margins, add bottom margin */
  line-height: 1.4;
}

/* Right Section: Button Column */
.itinerary-cta-button-column {
  flex: 1 1 35%; /* Gives the button column 35% basis, allowing it to grow/shrink */
  min-width: 280px; /* Example min-width for the button column */
  display: flex; /* Make this a flex container itself for aligning its button */
  flex-direction: column; /* Stack items vertically within this column (if any) */
  align-items: flex-end; /* Align button to the right end of its column */
}

/* Style for the 'Print Itinerary' button (name remains generic as it's a direct action) */
.itinerary-print-button {
  padding: 8px 16px;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.itinerary-print-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* --- Responsive Adjustments for CTA Section --- */

@media (max-width: 1024px) {
  .itinerary-cta-section {
    padding: 5px 5% 5px 5%; /* Adjust overall padding for smaller screens */
    width: 95%; /* Adjust overall width */
    margin: 15px auto 0 auto; /* Adjusted top margin for tablets */
  }

  .itinerary-cta-text {
    font-size: 18px; /* Slightly reduce font size for smaller screens */
  }
    .itinerary-cta-button-column {
    align-items: center; /* OVERRIDE: Center the button when stacked on smaller screens */
    width: 100%; /* Ensure button column takes full width to center effectively */
    flex-basis: auto; /* Override desktop flex-basis to allow for 100% width */
    min-width: 0; /* Override desktop min-width if 280px is too much for small screens */
  }
    p.itinerary-cta-text { /* Target the paragraph directly */
        text-align: center; /* Change this from 'justify' to 'center' */
        /* You might also want to adjust margins or padding on the p tag here for responsive spacing */
    }
}

@media (max-width: 768px) {
  .itinerary-cta-section {
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center items when stacked */
    padding: 5px 3% 15px 3%; /* More padding when stacked */
    margin: 5px auto 0 auto; /* Adjusted top margin for mobile */
  }

  .itinerary-cta-text-column,
  .itinerary-cta-button-column {
    flex: 1 1 100%; /* Each column takes full width, forcing them to stack */
    min-width: unset; /* Remove min-width constraint when stacking */
  }

  .itinerary-cta-text {
    text-align: center; /* Center text when stacked */
    font-size: 16px;
    margin-bottom: 15px; /* Add more space below text when stacked */
  }

  .itinerary-cta-button-column {
    align-items: center; /* Center the button when stacked */
    width: 100%; /* Ensure button column takes full width to center effectively */
  }

  .itinerary-print-button {
    width: 80%; /* Make button wider when stacked */
    max-width: 250px; /* Prevent button from becoming too wide on large screens */
    font-size: 13px; /* Smaller font for mobile button */
  }
}

@media (max-width: 480px) {
  .itinerary-cta-section {
    padding: 10px 3% 10px 3%;
    margin: 10px auto 0 auto; /* Adjusted top margin for very small screens */
  }

  .itinerary-cta-text {
    font-size: 14px;
  }

  .itinerary-print-button {
    width: 90%;
    font-size: 12px;
  }
   
}

/* --- Day Itinerary Section (e.g., Day 1, Day 2 etc.) --- */

/* Overall container for a single day's itinerary */
.itinerary-day-section-container {
  background-color: #ffffff;
  padding: 10px 10% 5px 10%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 80%;
  margin: 20px auto;
  border: 0px solid #eee;
  border-radius: 5px;
  overflow: hidden;
  font-family: Verdana, sans-serif;
  /* DEFAULT (Desktop/Tablet > 768px): Side-by-side */
  flex-direction: row;
}

/* Left Section: Text Column for itinerary details */
.itinerary-day-text-column {
  flex: 1 1 48%;
  line-height: 1.5;
  min-width: 300px;
  order: 1; /* Desktop: Text first */
}

/* Style for the 'DAY 1: ...' heading */
.itinerary-day-title {
  text-align: justify; /* Matches your original inline style */
  font-weight: bold;
  color: red;
  font-size: 20px;
  font-family: Verdana, sans-serif; /* Explicitly set as per your original */
  margin: 0 0 10px 0; /* Remove default paragraph margins, add bottom margin */
  line-height: 1.4;
}

/* Style for the general paragraph text within the day's itinerary */
.itinerary-day-paragraph {
  font-size: 16px;
  text-align: justify;
  color: black;
  margin-bottom: 10px; /* Add some spacing between paragraphs */
}

/* Right Section: Image Column for day's photo */
.itinerary-day-image-column {
  flex: 1 1 48%;
  max-width: 600px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  align-items: center;
  order: 1; /* Desktop: Image after text */
}

/* Style for the image itself */
.itinerary-day-image {
  width: 100%;
  height: 100%; /* Maintain aspect ratio */
  flex-grow: 1;
  border-radius: 0px;
  object-fit: cover; /* Fill the container, cropping if necessary */
  display: block; /* Remove any extra spacing below the image */
  margin: 0; /* Remove original inline margin, parent handles spacing */
}

/* Style for the image caption */
.itinerary-day-image-caption {
  color: red;
  margin-top: 0; /* Recreate your negative margin for placement, or adjust gap in parent */
  margin-bottom: 0;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-family: Verdana, sans-serif;
  font-size: 12px;
}


/* --- Responsive Adjustments for Day Itinerary Sections --- */
@media (max-width: 1024px) {
  /* Adjust overall padding for tablets/larger phones */
  .itinerary-overallcoverbox,
  .itinerary-day-section-container {
    padding: 10px 5% 20px 5%;
    width: 95%; /* Make it wider on tablets */
    margin: 5px auto;
    box-sizing: border-box;
    /* flex-direction remains 'row' from default here, as per your request */
  }

  /* Adjust map/image height for tablets, but still side-by-side */
  .itinerary-map-column {
    height: 350px; /* Slightly shorter height for tablets */
    margin-top: 0; /* No top margin as they are side by side */
  }
  /* No change in order, they remain side-by-side */

  /* Font sizes for tablets */
  .itinerary-main-heading,
  .itinerary-section-title {
    font-size: 18px;
  }
  .itinerary-paragraph,
  .itinerary-day-paragraph {
    font-size: 15px;
  }
  .itinerary-day-image-caption {
    font-size: 11px;
  }
  .itinerary-day-section-container:nth-of-type(even) {
  flex-direction: row-reverse; /* <-- This makes it alternate for EVEN rows on desktop/tablet */
}
}

@media (max-width: 768px) {
  /* Apply consistent mobile width and padding to these top containers */
  .itinerary-main-heading-container,
  .itinerary-overallcoverbox,
  .itinerary-day-section-container {
    width: 95%; /* Match other sections like featured-hotels-section */
    padding: 15px; /* Use fixed padding for mobile */
    margin: 15px auto; /* Consistent vertical margin */
    box-sizing: border-box;
    /* IMPORTANT: Force stacking for all mobile devices (portrait and landscape <= 768px) */
    flex-direction: column;
  }

  /* Adjust height for the map container when it stacks */
  .itinerary-map-column,
  .itinerary-day-image-column {
    height: auto; /* Let content dictate height */
    max-height: 400px; /* Optional: Prevent excessively tall maps/images */
    margin-top: 15px; /* Add some space when stacked */
    order: 1; /* Mobile: Image/Map appears first when stacked */
  }

  .itinerary-map-column img,
  .itinerary-day-image {
    height: auto; /* Ensure image scales freely within its 'height: auto' parent */
    object-fit: contain; /* Stick to contain to ensure the whole map is visible */
  }

  .itinerary-toursummary,
  .itinerary-day-text-column {
    order: 2; /* Mobile: Text appears second when stacked */
    min-width: unset; /* Remove min-width constraint when stacking */
  }

  .itinerary-main-heading,
  .itinerary-section-title {
    font-size: 16px;
  }

  .itinerary-paragraph,
  .itinerary-day-paragraph {
    font-size: 14px;
  }
  .itinerary-day-image-caption {
    font-size: 12px; /* Default desktop caption size */
    text-align: center;
    color: #666;
}
.itinerary-day-section-container:nth-of-type(even) {
  flex-direction: row-reverse; /* Reverses the order for even sections */
}
}

@media (max-width: 480px) {
  /* Apply consistent full width and minimal padding for very small screens */
  .itinerary-main-heading-container,
  .itinerary-overallcoverbox,
  .itinerary-day-section-container {
    width: 100%; /* Go full width on very small screens */
    padding: 10px; /* Minimal padding */
    margin: 10px auto;
    box-sizing: border-box;
    /* flex-direction: column; already applies from 768px */
  }

  /* Max-height for images on very small screens */
  .itinerary-map-column,
  .itinerary-day-image-column {
    max-height: 1000px; /* Even shorter max-height for very small screens */
  }

  /* Further font size reductions */
  .itinerary-main-heading,
  .itinerary-section-title {
    font-size: 14px;
  }

  .itinerary-paragraph,
  .itinerary-day-paragraph {
    font-size: 13px;
  }
  .itinerary-day-image-caption {
    font-size: 9px;
  }
}


.unlock-itinerary-box {
  background-color: #fef4e8; /* Light yellow background */
  border: 1px solid #f4d35e; /* Yellow border */
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-family: Verdana, sans-serif;
  max-width: 500px; /* Limits the maximum width of the box */
  margin: 30px auto; /* Centered with top/bottom margin */
}

.unlock-itinerary-heading {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* Dark grey text color */
  margin: 0 0 5px 0; /* Adjust margin to control spacing below heading */
}

.unlock-itinerary-text {
  font-size: 14px;
  color: #555; /* Medium grey text color */
  margin-top: 5px; /* Space above this paragraph */
  margin-bottom: 15px; /* Space below this paragraph before the button */
  line-height: 1.4; /* Improve readability */
}

.unlock-itinerary-button {
  margin-top: 15px; /* Space above the button */
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  background-color: #f4d35e; /* Yellow button background */
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.unlock-itinerary-button:hover {
  background-color: #e0c14c; /* Slightly darker yellow on hover */
}

/* --- Responsive Adjustments for Unlock Itinerary Box --- */

@media (max-width: 768px) {
  .unlock-itinerary-box {
    width: 90%; /* Make the box wider on smaller screens */
    margin: 20px auto; /* Adjust margin for mobile */
    padding: 15px; /* Slightly less padding on mobile */
  }

  .unlock-itinerary-heading {
    font-size: 15px; /* Smaller font for mobile heading */
  }

  .unlock-itinerary-text {
    font-size: 13px; /* Smaller font for mobile text */
    margin-bottom: 10px; /* Adjust spacing */
  }

  .unlock-itinerary-button {
    font-size: 13px; /* Smaller font for mobile button */
    padding: 8px 15px; /* Adjust button padding */
    width: 90%; /* Make button fill more width */
  }
}

@media (max-width: 480px) {
  .unlock-itinerary-box {
    padding: 10px; /* Even less padding on very small screens */
  }

  .unlock-itinerary-heading {
    font-size: 14px;
  }

  .unlock-itinerary-text {
    font-size: 12px;
  }

  .unlock-itinerary-button {
    font-size: 12px;
    padding: 7px 12px;
  }
}

@media (min-width: 600px) and (max-width: 991px) and (orientation: landscape) {
  /* Apply styles that should specifically activate for landscape phones/small tablets */
  .exclusions-overall-container {
    width: 95%; /* Ensure it takes 95% width in this landscape range */
    /* You might want a slightly different font size or padding for landscape to optimize space */
    font-size: 11px; /* Adjust font size for landscape */
  }

  .exclusions-row {
    /* In landscape, we might want the description and icon to be side-by-side (flex-direction: row)
       This means overrides specific to landscape are needed. */
    flex-direction: row; /* Keep them horizontal in landscape */
    justify-content: space-between; /* Spread description and icon */
    align-items: center; /* Vertically center them */
    padding: 8px; /* Slightly more padding for landscape */
    min-width: 300px; /* Ensure enough min-width for the row to prevent wrapping */
  }

  .exclusions-row-content {
    /* If row is now 'row', this wrapper might not be strictly necessary,
       or its flex properties need to align with the parent.
       Let's ensure it doesn't cause issues if it's still used. */
    flex-direction: row; /* Ensure inner content is also row if needed */
    flex-wrap: nowrap;
    justify-content: space-between;
    width: auto; /* Let content dictate width within the row's flex */
    min-width: unset; /* Remove min-width if the description and icon handle their own widths well */
  }

  .exclusions-item-description {
    /* Override portrait stacking specific padding/margin if necessary */
    padding-right: 10px; /* Give more space to description */
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100px; /* Ensure description always has a reasonable minimum */
  }

  .exclusions-item-icon {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 20px;
  }

  /* Ensure the font size for the list body remains consistent or adjusted for landscape */
  .exclusions-list-body {
      font-size: 11px; /* Match the exclusions-overall-container font size */
  }
  
  .itinerary-overallcoverbox { /* Or whatever the parent div's class is */
    display: flex !important;
    flex-direction: column !important; /* <--- CHANGE THIS TO COLUMN */
    /* Add any other necessary styles like width, padding, margin: auto */
    width: 95% !important; /* Ensure it's consistent with other sections */
    margin: auto !important;
    box-sizing: border-box !important;
}
  
  .itinerary-overallcoverbox,
  .itinerary-day-section-container,
  .featured-hotels-section,
  .exclusions-overall-container,
  .itinerary-cta-section,
  .unlock-itinerary-box{
    width: 95%; /* Adjust width for tablets/larger mobile */
    padding: 3px 5% 3px 5%;
    
  }
   .itinerary-cta-button-column {
        display: flex;
        flex-direction: column;
        align-items: center; /* <--- CHANGE THIS from flex-end to center */
        /* ... other styles ... */
    }
}

@media (max-width: 1024px) {
  /* ... existing rules for itinerary and other sections ... */

  /* --- ADD THESE RULES FOR EXCLUSIONS HERE --- */
  .exclusions-row-content {
      display: flex !important; /* Make it a flex container */
      flex-direction: row !important; /* Arrange children (description & icon) side-by-side */
      justify-content: space-between !important; /* Push them to opposite ends */
      align-items: center !important; /* Vertically center them */
      width: 100%; /* Ensure it takes full width of its parent */
      flex-wrap: nowrap;
      min-width: 0; /* Allow it to shrink if needed */
  }

  /* Ensure the description itself handles overflowing text if needed */
  .exclusions-item-description {
    padding-right: 5px;
    flex-grow: 1;
    font-size: 14px;
    flex-shrink: 1;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Crucial for text ellipsis in flex items */
  }
  
  .exclusions-item-icon {
    /* Reset common properties that might be causing misalignment */
    margin: 0; /* Removes any unexpected external spacing */
    padding: 0; /* Removes any unexpected internal padding */
    line-height: 1; /* Ensures its own line height doesn't cause vertical offset */
    /* Your computed width is 40px, and height is 17.7778px.
       If the X is too far right, or its containing box is too wide, check if
       .exclusions-item-description also has flex-grow: 1 or if it needs a max-width. */

    /* If the X mark is still not perfectly aligned vertically, a small adjustment might help: */
    /* transform: translateY(-1px); */ /* Experiment with -1px, 1px, -2px etc. */

    /* You mentioned the X mark is green. If you want it to be black or red, uncomment and set: */
    /* color: #000; */ /* For black */
    /* color: red; */  /* For red */
}

  /* ... rest of your 1024px styles ... */
}