body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #4A0E73; /* page background */
    color: #333;
    display: flex; /* For centering the page-container */
    justify-content: center; /* For centering the page-container */
    }
    
    .page-container {
    width: 100%;
    max-width: 1000px; /* controls width of main content area */
    background-color: #FAF7FD; /* main content area */
    border-radius: 12px 12px 0 0; /* Rounded top corners */
    margin-top: 20px; /* Space from top of browser window */
    margin-bottom: 20px; /* Space from bottom */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Ensures children conform to border-radius */
    }
    
    header {
    background-color: #6A0DAD; 
    padding: 1rem 2rem; 
    }
    
    .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px; 
    margin: 0 auto; 
    }
    
    .logo {
    font-size: 1.8rem; 
    font-weight: 700; 
    margin: 0;
    }
    
    nav {
    display: flex;
    gap: 1.5rem; 
    }
    
    nav a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    position: relative;
    }
    nav a:hover {
    color: #E0C6F5; /* Lighter purple for hover */
    }
 
    nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #E0C6F5;
    transition: width 0.3s ease-in-out;
    }
    nav a:hover::after {
    width: 100%;
    }
    
    .hero {
    background: url('images/66e8475c-bfbb-4319-9223-1270bf7f5a66.JPG') center/cover no-repeat; /* Replace 'banner.jpg' with your image */
    color: white;
    padding: 5rem 2rem; /* More padding for hero section */
    text-align: center;
    position: relative; /* For potential overlay */
    }
    /* Optional: Darken the hero image slightly for better text readability */
    .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3); /* Adjust darkness */
    }
    
    .hero-text {
    position: relative; /* To ensure text is above the overlay */
    z-index: 1;
    }
    
    .hero h1 {
    font-size: 2.8rem; /* Larger hero title */
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Subtle text shadow */
    }
    
    .hero p {
    font-size: 1.25rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4); /* Subtle text shadow */
    }
    
    .content-area {
    padding: 1rem; /* Padding around the group of sections */
    background-color: #FAF7FD; 
    
    }
    
    .content-section {
    background-color: #F3E5F5; /* Light lavender/pale purple for section cards - adjust to match image */
    padding: 2rem;
    max-width: 900px; /* Max width of content inside sections */
    margin: 0 auto 2rem auto; /* Centered, with bottom margin */
    border-radius: 8px; /* Rounded corners for section cards */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle shadow for cards */
    }
    
    .section-title {
    font-size: 2.2rem; /* Larger section titles */
    color: #6A0DAD; /* Jethro's purple */
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 600; /* Match image's title weight */
    text-align: left; /* As per image (not centered) */
    }
    
    .content-section p {
    line-height: 1.7;
    margin-bottom: 2.5rem;
    }
    .content-section p:last-child {
    margin-bottom: 0;
    }
    .content-section em { /* Style for the quote */
    display: block;
    padding-left: 1rem;
    border-left: 3px solid #6A0DAD;
    margin: 1rem 0;
    font-style: italic;
    }
    
    /* Contact Us */
    .contact-methods {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 2rem; /* Space between contact method blocks */
    margin-top: 1.5rem;
    }
    
    .contact-method {
    flex: 1; /* Allows them to grow and share space */
    min-width: 280px; /* Minimum width before wrapping */
    background-color: #FAF7FD; /* Slightly lighter than section, or use #F3E5F5 to match */
    padding: 1.5rem;
    border-radius: 8px; /* Consistent with context [2] */
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Lighter shadow for nested cards */
    }
    
    .contact-method h3 {
    font-size: 1.5rem; /* Slightly smaller than section-title */
    color: #6A0DAD; /* Jethro's purple, from context [2] */
    margin-top: 0;
    margin-bottom: 1rem;
    }
    
    .contact-method h3 i { /* Style for Font Awesome icons */
    margin-right: 0.75rem;
    color: #6A0DAD; /* Jethro's purple */
    }
    
    .contact-method p {
    line-height: 1.7; /* From context [2] */
    margin-bottom: 0.8rem; /* Slightly less than default p for tighter grouping */
    }
    
    .contact-method p:last-child {
    margin-bottom: 0;
    }
    
    .contact-method a {
    color: #6A0DAD; /* Jethro's purple for links */
    text-decoration: none;
    font-weight: 600;
    }
    
    .contact-method a:hover {
    text-decoration: underline;
    }
    
    /* Responsive adjustments for contact methods if needed */
    @media (max-width: 768px) { /* From context [2] */
    .contact-methods {
    flex-direction: column; /* Stack vertically on smaller screens */
    }
    }
    
    footer {
    background-color: #6A0DAD; /* Jethro's purple */
    color: white;
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.9rem;
    }
    
    /* Responsive adjustments */
@media (max-width: 600px) {
    .header-content {
      flex-direction: column;
      gap: 0.5rem;
    }
    nav {
      justify-content: center;
      gap: 1rem;
    }
    .hero {
      padding: 3rem 1rem;
    }
    .hero h1 {
      font-size: 2rem;
    }
    .hero p {
      font-size: 1rem;
    }
    .section-title {
      font-size: 1.8rem;
    }
    .content-section {
      padding: 1.5rem;
    }
  
    /* --- REVIEWS LINK --- 
    .nav-link-reviews {
      display: none !important; /* Hide the "Reviews" link on screens 768px wide or less */
    }
    /* ----------------------------------------- */ 
  
  /* /* End of the (max-width: 768px) media query */
    
    /* Photo Gallary CSS About Section */
    .photo-gallery-interlude {
    display: flex;
    gap: 1rem; /* Space between images */
    justify-content: center;
    padding: 2rem 1rem; /* Padding around the gallery */
    max-width: 900px; /* Match other content width */
    margin: 0 auto 2rem auto; /* Centered, with bottom margin */
    }
    
    .photo-gallery-interlude img {
    width: calc(50% - 0.5rem); /* Example for two images, adjust as needed */
    /* Or for 3 images: width: calc(33.333% - 0.66rem); */
    max-width: 300px; /* Max width for individual images */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    /* new Photo Gallery */
    .image-gallery-about {
    display: flex;
    gap: 1rem; /* Space between images, similar to context [2] */
    justify-content: center;
    padding: 1rem 0;
    max-width: 700px; /* Consistent with .image-gallery-about in context [2] */
    margin: 2rem auto; /* Consistent with .image-gallery-about in context [2] */
    overflow: hidden; /* Prevents content spill during transitions */
    }
    
    .image-gallery-about img {
    width: calc(50% - 0.5rem); /* For two images, accounting for 1rem gap */
    height: 250px; /* Adjust height as needed, or use 'auto' if you prefer varying heights */
    object-fit: cover; /* Ensures images fill the slot without distortion */
    border-radius: 8px; /* From context [2] */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* From context [2] */
    opacity: 1; /* Start fully visible */
    transition: opacity 0.5s ease-in-out; /* Smooth fade transition, from context [2] */
    }
    
    /* Mobile specific styles */
    @media screen and (max-width: 600px) { /* Mobile breakpoint from context [2] */
    .image-gallery-about img {
    width: 100%; /* Single image takes full width on mobile */
    max-width: 100%; /* Ensure it uses the full width available */
    /* Consider adjusting height for mobile if needed, e.g., height: 200px; */
    }
    
    /* This CSS rule hides the second image on mobile */
    .image-gallery-about img:nth-child(2) {
    display: none !important; /* Ensures the second image placeholder is hidden on mobile */
    }
    }
    
    /* Google Maps Style */
    .map-container {
    max-width: 100%; /* Ensures it doesn't overflow its parent in the "Find Us" card */
    /* If your "Find Us" section is a card itself, you might not need a separate shadow here,
    but if the map is a distinct block _within_ the "Find Us" card, this helps: */
    border-radius: 8px; /* Matches image gallery styles [2] */
    overflow: hidden; /* This is KEY to make the iframe respect the border-radius */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow, similar to gallery images [2] */
    margin: 1rem auto; /* Adds some spacing around the map, adjust as needed */
    background-color: #e0e0e0; /* A light background if the map takes time to load */
    }
    
    .map-container iframe {
    display: block; /* Removes extra space below the iframe */
    width: 100%; /* Makes the iframe responsive within its container */
    height: 450px; /* Adjust default height as needed. Can also be controlled by aspect ratio. */
    border: none; /* Ensures no default iframe border interferes */
    }
    
    /* For a responsive height based on aspect ratio (e.g., 16:9) */
    
    .map-container.aspect-ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%; /* 9 / 16 = 0.5625 or 56.25% */
    height: 0;
    overflow: hidden;
    }
    
    .map-container.aspect-ratio-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    
    /* If using aspect ratio, your HTML would be: <div class="map-container aspect-ratio-16-9">...</div> */
    /* <><><>*/
/* --- TripAdvisor Reviews Section Styling --- */

/* Styling for the TripAdvisor Reviews Section */

/* Ensure the main section has its usual card styling - already defined by .content-section [2] */
/* .content-section { ... } */

/* Ensure section title is styled - already defined by .section-title [2] */
/* .section-title { ... } */

/* Style for the introductory paragraph */
.reviews-intro-text {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: 1.6;
}

/* Container for the TripAdvisor Widget */
.tripadvisor-widget-container {
  margin: 1rem auto 1.5rem auto;
  padding: 1rem;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Hide mobile widget by default */
.mobile-widget {
  display: none;
}

/* Show mobile widget and hide desktop widget on screens ≤700px */
@media (max-width: 700px) {
  .tripadvisor-widget-container {
    justify-content: flex-start;
  }

  .mobile-widget {
    display: block;
    transform: scale(0.85);
    transform-origin: top left;
    padding: 0;
    margin-top: -0.5rem;
    overflow-x: hidden;
  }

  .mobile-widget iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  .desktop-widget {
    display: none;
  }
}

    /*<><><>*/
    
    
    /* --- MENU CSS (EXISTING STYLES) --- */
    /* Styles for the interactive menu */
    /* New styles for the grid layout of menu categories */
    /* --- MENU SECTION STYLES --- */
    
    /* --- This is the grid container for your menu titles --- */
    .menu-categories-grid {
    display: grid;
    /* --- Sets 2 columns on desktop, adjusted later for mobile --- */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    }
    
    /* --- Individual category block (title + content wrapper) --- */
    .menu-category {
    display: block; /* Default state */
    /* --- IMPORTANT: When 'is-open-fullwidth' class is added by JS, this changes --- */
    }
    
    /* --- CRITICAL RULE 1: Allows content to break out of its parent's grid cell --- */
    /* --- Applied by JS when a category is opened --- */
    .menu-category.is-open-fullwidth {
    display: contents; /* Children become direct grid items of .menu-categories-grid */
    }
    
    /* --- Category Title (clickable header) Styling --- */
    .menu-category-title.clickable-category {
    background-color: #F3E5F5; /* Lavender from theme [2] */
    color: #6A0DAD; /* Main purple from theme [2] */
    padding: 0.85rem 1.25rem;
    margin: 0 0 0.2rem 0; /* Small space below title before content if it were inline */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-weight: 600; /* Poppins bold for titles */
    }
    
    .menu-category-title.clickable-category:hover {
    background-color: #E0C6F5; /* Lighter purple for hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    /* --- Styling for the title when its content is open (JS adds 'active' class) --- */
    .menu-category-title.clickable-category.active {
    background-color: #DCC1F0; /* Slightly different shade for active state */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Consider changing text color too if needed: color: white; */
    /* border-bottom-left-radius: 0; -- Removed for display:contents compatibility */
    /* border-bottom-right-radius: 0; -- Removed for display:contents compatibility */
    }
    
    .toggle-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    }
    
    .menu-category-title.clickable-category.active .toggle-icon {
    transform: rotate(180deg); /* Rotates the icon (e.g. plus to minus, or chevron) */
    }
    
    /* --- Collapsible Content Area Styling --- */
    .menu-category-content {
    max-height: 0; /* Hidden by default */
    overflow: hidden; /* Hide content when collapsed */
    padding: 0 1.25rem; /* Horizontal padding, vertical comes with .open */
    background-color: #FAF7FD; /* Very light background for content, from page-container [2] */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) inset, 0 3px 6px rgba(0,0,0,0.07);
    /* --- Smooth animation for opening/closing --- */
    transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0),
    padding-top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0),
    padding-bottom 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    /* --- Default grid behavior (important!) --- */
    grid-column: auto;
    }
    
    /* --- Styling for the content when it IS open (JS adds 'open' class) --- */
    .menu-category-content.open {
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* max-height is set by JS to animate open */
    }
    
    /* --- CRITICAL RULE 2: Makes the OPEN content span the FULL width of the grid --- */
    /* --- Applied ONLY when JS has added BOTH 'is-open-fullwidth' to parent AND 'open' to content --- */
    .menu-category.is-open-fullwidth .menu-category-content.open {
    grid-column: 1 / -1; /* Span all columns of .menu-categories-grid */
    margin-top: 0.2rem; /* Space between title row and this full-width content */
    }
    
    /* Notes within content (e.g., "Served with salad") */
    .menu-category-note {
    font-style: italic;
    color: #555;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    }

    /* Purely to style the Wide selection of drinks in my sleepiness */
    .menu-category-note-3 {
      font-style: italic;
      color: #555;
      margin-bottom: 1rem;
      font-size: 1.1rem;
      text-align: center;
      }
    
    /* Individual Menu Items */
    .menu-item {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #E0C6F5; /* Light lavender separator */
    }
    .menu-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    }
    
    .menu-item-name {
    font-weight: 600; /* Poppins bold */
    color: #4A0E73; /* Darker purple for item names, from page bg [2] */
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    }
    
    .menu-item-description {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    }
    
    /* Inner Columns (for Jacket Potato toppings, Salad Box options etc.) */
    .menu-columns {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 0.5rem;
    }
    
    .menu-column {
    flex: 1;
    min-width: 0; /* Helps flex items shrink properly */
    }
    
    /* Sub-categories (for Drinks section) */
    .menu-sub-category {
    margin-top: 1.5rem;
    padding-top: 1rem;
    }
    
    .menu-sub-category:first-child {
    margin-top: 0.5rem;
    padding-top: 0;
    }
    
    .menu-sub-category-title {
    font-size: 1.25rem;
    color: #6A0DAD; /* Main purple [2] */
    margin-bottom: 1rem;
    font-weight: 600; /* Poppins bold */
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #E0C6F5; /* Light lavender underline */
    display: inline-block;
    }
    
    /* --- Responsive Adjustments for MENU --- */
    @media (max-width: 768px) { /* Tablet and mobile breakpoint from context [2] */
      /* --- Switch menu categories to single column --- */
      .menu-categories-grid {
        grid-template-columns: 1fr; /* Single column for categories */
        gap: 1rem; /* Adjust gap for single column */
      }
    
      .menu-category-title.clickable-category {
        padding: 0.75rem 1rem; /* Adjust padding for smaller screens */
      }
    
      .menu-item-name {
        font-size: 1rem; /* Adjust font size */
      }
    
      /* --- On mobile, the full-width behavior might not be needed/desired --- */
      /* --- Resetting these ensures content opens directly below its title --- */
      .menu-category.is-open-fullwidth {
        display: block; /* Revert from 'contents' to 'block' */
      }
      .menu-category.is-open-fullwidth .menu-category-content.open {
        grid-column: auto; /* Reset grid span */
        margin-top: 0; /* Remove top margin specific to full-width */
      }
    
      /* Inner columns stack on mobile */
      .menu-columns {
        flex-direction: column;
        gap: 0; /* Items stack directly */
      }
      .menu-column .menu-item:last-child {
        margin-bottom: 1rem; /* Maintain spacing when columns stack */
      }
      .menu-column:last-child .menu-item:last-child {
        margin-bottom: 0;
      }
    }
    
    /* Footer T&C + Privacy Policy colour change + Formatting*/
    
    .social-media-icons a img { 
      height: 24px; /* Adjust this value as needed */ 
      width: auto; /* This will maintain the aspect ratio */ 
      vertical-align: middle; /* Helps align it nicely with text if any */
    }
    .footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 1rem; /* space between links */
    margin-top: 0.5rem;
    font-size: 12px;
    align-items: center;
    }
    
    .footer-legal-links a {
    color: white;
    text-decoration: none;
    }
    
    .footer-legal-links a:hover {
    text-decoration: underline;
    }
    
    .footer-legal-links span {
    color: white;
    }

/* <><><> */
/* --- Custom TripAdvisor Fallback Styles (Purple/White Theme & Mobile Optimized) --- */
:root {
  --theme-purple: #7C3AED; /* A vibrant purple */
  --theme-purple-darker: #6D28D9; /* For hover states */
  --theme-text-dark: #1f2937; /* Dark gray for text */
  --theme-text-light: #ffffff; /* White text */
  --theme-background-white: #ffffff;
  --theme-background-light-gray: #f9fafb; /* Very light gray for subtle backgrounds */
  --theme-star-filled: #facc15; /* Yellow for stars */
  --theme-star-empty: #d1d5db;  /* Light gray for empty stars */
  --theme-border-color: #e5e7eb; /* Light gray for borders */
}

/* Assuming Inter font is loaded via your main stylesheet */
/* If not, you might need:
body, .custom-trip-fallback-container {
  font-family: 'Inter', sans-serif;
}
*/

/* Container for the entire fallback section */
.custom-trip-fallback-container {
  margin-top: 30px;
  padding: 20px;
  background-color: var(--theme-background-white);
  border-top: 4px solid var(--theme-purple);
  border-radius: 8px;
  font-family: 'Inter', sans-serif; /* Explicitly set for this section */
}

/* Grid container for review cards */
.custom-trip-reviews-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column, JS may override for desktop */
  gap: 20px; /* Default gap, ensure JS uses this or reads it if different */
  margin-bottom: 30px;
  position: relative; /* Useful for positioning absolutely positioned children if any */
  overflow: hidden; /* Crucial: clips content if fixed height is slightly off or during transitions */
  /* Height will be set by JavaScript */
  /* NO min-height here, height is set by JS */
}

/* Individual review card styling */
.custom-trip-card {
  background-color: var(--theme-background-white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--theme-border-color);
  display: flex; /* For internal content alignment (e.g., flex-grow on quote) */
  flex-direction: column;

  /* Initial state for transition: hidden and collapsed */
  opacity: 0;
  visibility: hidden; /* Hidden but can be transitioned */
  transform: translateY(15px); /* Start slightly lower for a subtle slide-up */
  max-height: 0; /* Start collapsed - JS will set this to 0px initially as well */
  overflow: hidden; /* Clip content when collapsed */

  transition: opacity 0.4s ease-out,
              transform 0.4s ease-out,
              max-height 0.4s cubic-bezier(0.65, 0.05, 0.36, 1), /* Smooth easing for height */
              visibility 0s linear 0.4s; /* Delay 'hiding' visibility until after opacity/transform */
}

.custom-trip-card.review-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* max-height is set by JavaScript to '1500px' (or similar large value) to trigger the transition from 0px.
     This allows the card to expand to its content or stretch within its grid cell. */
  transition-delay: 0s; /* Apply all transitions immediately when becoming visible */
}


/* Optional: Title for each review card */
.custom-trip-review-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  color: var(--theme-purple);
  margin-bottom: 8px;
}

/* Star rating container */
.custom-trip-stars {
  margin-bottom: 12px;
  font-size: 1.25rem; /* text-xl */
}

/* Individual star */
.custom-trip-star {
  color: var(--theme-star-empty);
  margin-right: 3px;
}

.custom-trip-star.filled {
  color: var(--theme-star-filled);
}

/* Review quote text */
.custom-trip-quote {
  font-style: italic;
  color: #4b5563; /* text-gray-600 */
  margin-bottom: 12px;
  line-height: 1.6;
  flex-grow: 1; /* Allows quote to take available space, helping cards in same row match height */
}

/* Review author */
.custom-trip-author {
  font-weight: 500; /* font-medium */
  color: var(--theme-text-dark);
  font-size: 0.875rem; /* text-sm */
  text-align: right;
  margin-top: auto; /* Pushes author to bottom of the card */
}

/* Container for the TripAdvisor link/button */
.custom-trip-link-container {
  text-align: center;
  margin-top: 20px;
}

/* TripAdvisor button styling */
.custom-trip-button {
  display: inline-block;
  background-color: var(--theme-purple);
  color: var(--theme-text-light);
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem; /* text-base */
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
  border: 1px solid transparent;
}

.custom-trip-button:hover,
.custom-trip-button:focus {
  background-color: var(--theme-purple-darker);
  color: var(--theme-text-light);
  transform: translateY(-1px);
  outline: none;
}

/* Disclaimer text below the button */
.custom-trip-disclaimer {
  margin-top: 12px;
  font-size: 0.875rem; /* text-sm */
  color: #6b7280; /* text-gray-500 */
}

/* --- Responsive Adjustments --- */

/* Medium screens and up (e.g., tablets) */
@media (min-width: 768px) { /* Common tablet breakpoint */
  .custom-trip-fallback-container {
      padding: 30px;
  }

  .custom-trip-reviews-grid {
      /* JavaScript will set grid-template-columns, e.g., repeat(2, 1fr) */
      gap: 24px; /* Ensure JS accounts for this gap if calculating fixed height */
  }

  .custom-trip-card {
      padding: 24px; /* Adjust padding for larger cards if desired */
  }
}

/* Large screens and up (desktops) */
@media (min-width: 1024px) { /* Common desktop breakpoint */
  .custom-trip-fallback-container {
      padding: 40px;
  }

  /* JavaScript will set grid-template-columns, e.g., repeat(2, 1fr) for 4 reviews */

   .custom-trip-button {
      padding: 14px 28px;
      font-size: 1.125rem; /* text-lg */
  }
}
/* <><><> */


/* TripAdvisor thumb widget for hero image */
.tripadvisor-hero-thumb {
  position: absolute;
  top: 18px;
  left: 39px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.85);
  z-index: 2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,0.09);
  padding: 4px;
}

.tripadvisor-hero-thumb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}