/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/


:root {
  /* primary colors */
  --color-dark-green: #3A4330;
  --color-body-text: #5C6354;
  --color-body-text2: #717968;
  --color-sand: #B26E39;
  /* secondary colors */
  --color-green: #9BA58F;
  --color-light-green: #CDD1C3;
  --color-highlight-bg1: #EEDBAD;
  --color-highlight-bg2: #E7ECB0;
  --color-hover: #A15E29;
  --color-hot-deal: #CF1515;
  --color-body-bg: #FFFEF8;
}

/* Google Fonts */
/* Headings: Anton, normal style, weight 400 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Anton', sans-serif;
  font-style: normal;
  font-weight: 400;
  color:var(--color-dark-green);
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1 {font-size:5rem;}
h2 {font-size:3rem;}
h3 {font-size:2rem;}
h4 {font-size:1.5rem;}

@media (max-width: 768px) {
  h1 {font-size:2rem;}
  h2 {font-size:1.75rem;}
  h3 {font-size:1.25rem;}
  h4 {font-size:1.125rem;}  
}

input, select, textarea {
  font-family: 'Manrope', sans-serif;
}

@media (max-width: 768px) {
  .mob-hide {
    display:none!important;
  }
}

a:focus {
  outline: none;
  border:none;
}

/* Menu - Disable Destinations Top Link */
.mega-menu-item-7873 > a.mega-menu-link {
  pointer-events: none!important;
}


/* Subheadings: Manrope, normal style, weight 600 */
.subheading,
.wp-block-subheading {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 600;
  color:var(--color-dark-green);
  font-size:1.125rem;
  line-height: 1.2;
  text-transform: none;
}

@media (max-width: 768px) {
  .subheading, .wp-block-subheading {font-size:1rem;}
}

.wp-block-template-part {
  margin-block-start: 0rem;
}

.gz-brown-btn {
  display:inline-block;
  background: var(--color-sand);
  padding:15px 20px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight:600;
}

/* Default agination Styling Override */
.package-pagination a, .package-pagination span {
  border-radius: 12px!important;
  font-size:1.1rem!important;
}

.package-pagination .current {
  background-color:var(--color-sand)!important;
}

/* Inner Page CSS */
.page-template-default .entry-content,
.page-template .entry-content {
  margin:0;
  padding:0!important;
}


/* Body text / Paragraphs: Manrope, normal style, weight 400 */
body,
p,
.wp-block-paragraph {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 400;
  color:#5C6354;
}

/* Card text: Manrope, normal style, weight 600 */
.card,
.card-text,
.wp-block-group.card {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 600;
  color:#5C6354;
}




/* Announcement Bar */
.gz-announce-bar a {
  font-size:14px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  text-align: center;
}

/* Header Phone Number */
.head-phone {
  text-decoration:none;
  font-size:15px;
}

.icon-phone {
  color:#fff;
  border-radius:50px;
  background:#B26E39;
  font-size:15px;
  padding:4px;
  transform: scaleX(-1);
}



.gz-container {
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
}

/* Header Nav - Categories Col */
.gz-navdest-container {
  display:none;
}

.gz-dest-cats > a {
  display:block;
  width:100%;
  padding:15px;
}

.gz-dest-cats > a.active {
  border-bottom:1px solid #b9c1b0;
  background:#ecf0e6;
}

.gz-dest-cats > a {
  font-weight:600;
  font-size:16px;
  text-decoration:none;
}

.gz-dest-cats > a::after {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: "\f054";
  margin-left: 8px;
  float: right;   
}

/* Header Nav - Destination Mega Menu */
.gz-navdest-container.active {
  display: flex;
}

.gz-mob-cat {
  display:none;
}

.gz-navdest-col {
  flex: 1; 
  padding: 10px;
  box-sizing: border-box;
}

.gz-navdest-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gz-navdest-col ul a {
  color:var(--color-dark-green);
  text-decoration:none;
}

.gz-navdest-col > ul > li > a {
  font-weight:600;
  text-transform:uppercase;
}

.gz-navdest-col > ul > li > a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3c5";
  display: inline-block;
  margin-right: 8px;
  color:#B26E39;
}

.gz-navdest-col > ul > li {
  margin: 0 0 15px 0;
  padding: 0;
}

/* Header Nav - Destination Mega Menu - Mobile */
@media (max-width: 768px) {
  .gz-navdest-container.active {
    display:block;
  }
  .gz-navdest-destlink {
    display:none;
  }
  .gz-navdest-col {
    padding:0 10px;
  }
  .gz-mob-cat {
    display:block;margin-bottom:10px;
  }
  .gz-mob-cat a {
    text-decoration:none;
    font-weight:600;
    font-size: 16px;
    color:var(--color-dark-green);
  }
  /* Add Font Awesome chevron */
  .gz-mob-cat::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078"; /* fa-chevron-down */
    transition: transform 0.3s ease;
    margin-left:10px;
  }

  /* Rotate chevron when active */
  .gz-mob-cat.active::after {
    transform: rotate(180deg); /* points up */
  }

  /* For Custom Logo in Mobile Menu */
  #mega-menu-item-8104 .mega-menu-link, #mega-menu-item-8108 .mega-menu-link {
    display:none!important;
  }
  #mega-menu-item-8104 .mega-sub-menu, #mega-menu-item-8108 .mega-sub-menu {
    display:block!important;
  }
  #mega-menu-item-8104 .mega-sub-menu li, #mega-menu-item-8108 .mega-sub-menu li {
    padding:0!important;
  }
  .gz-mob-logo {
    display:block;
  }
  .gz-mob-logo img {
    width:70%;
    max-width:300px!important;
  }

  .gz-mob-menu-contact {
      text-align: center;
      border-top:1px solid #CDD1C3;
      margin-top:20px;
      padding-top:20px;
  }  

  .gz-mob-menu-contact a {
    display: block;
    margin-bottom:15px;
  }

  .gz-mob-menu-contact .mob-phone {
    color:var(--color-dark-green);
    font-size:18px;
    text-decoration: none;
    font-weight:600;
  }

  .gz-mob-menu-contact .mob-phone i {
    color:#B26E39;
  }

  .gz-mob-menu-contact .wp-block-button__link {
    background:#B26E39;
    border-radius:12px;
  }

  header .mega-menu-toggle {
    background: #CDD1C3 !important;
    border-radius: 8px !important;  
  }

  header .mega-toggle-block-1:after {
    color: #5C6354 !important;
    margin: 0 !important;
  }    

  header .mega-close {
    background: #CDD1C3 !important;
    margin: 10px !important;
    border-radius: 8px !important;    
  }  
  header .mega-close:before {
    color: #5C6354 !important;
  }  
  
  
}

/* Hides Phone and CTA on header */
@media screen and (max-width: 1105px) {
  .hide-phone {
    display: none !important;
  }
  .show-phone {
    display: none !important;
  }
}



@media screen and (max-width: 768px) {
  .wp-block-navigation__responsive-container-open  {
    display: block !important;
  }

  /* full menu */
  .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
    display: none !important;
  }
}

/* Footer Classes */

footer {
  margin-top:0!important;
}

.gz-footer-nav {
  align-items:flex-start;  
}

/* Style Footer Nav List */
.gz-footer-nav summary {
  font-size:24px;
  font-family: 'Anton', sans-serif;
  font-style: normal;
  font-weight: 400;  
}

.gz-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;  
}

.gz-footer-nav ul li a {
  text-decoration:none;
  font-size:16px;
}

/* Target the summary inside your custom class */
.details-arrow-right summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Hide the default triangle */
.details-arrow-right summary::-webkit-details-marker {
  display: none;
}

/* Add a custom arrow using ::after */
.details-arrow-right summary::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078"; /* fa-chevron-down */
  margin-left: 0.5em;
  transition: transform 0.3s ease;
  font-size:20px;
}

/* Rotate arrow when open */
.details-arrow-right[open] summary::after {
  transform: rotate(180deg);
}

.gz-footer-card > div {
  margin:0!important;
  max-width:100%!important;
}

/* Footer CSS - for Desktop Only */
@media screen and (min-width: 769px) {

  .gz-footer-nav details {
    width:33%;
  }
  /* Make Footer Nav Uncollabisible in Desktop */
  footer summary {
    pointer-events:none;
  }
  footer .details-arrow-right summary::after {
    display:none;
  }

}

/* Footer Newsletter Sign Up */

/* Title styling */
.gz-footer-newsletter {
  margin-bottom:30px!important;
}
.gz-footer-newsletter h4 {
  margin-bottom: 1em;
  font-size: 24px;
  color:#fff;
}

/* Row layout for input and button */
.gz-footer-news-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Input field styling */
.gz-footer-news-row input[type="email"] {
  flex: 1;
  padding: 16px;
  width:300px;
  font-size: 16px;
  background:#fff;
  border: 1px solid #ccc;
  color:var(--color-dark-green);
  border-radius: 12px;
}

/* Button styling */
.gz-footer-news-row button {
  padding: 16px;
  font-size: 16px;
  background-color: #B26E39;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.gz-footer-news-row button:hover {
  background-color: #2e3526;
}


/* Footer CSS - for Mobile Only */
@media screen and (max-width: 768px) {

  .gz-footer-nav {
    display:block!important;
  }

  .gz-footer-nav details {
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom:30px;
  }
  
  .details-arrow-right summary {
    display:block!important;
  }

  .gz-footer-card {
    display:none;
  }

  .gz-footer-newsletter {
    text-align:center!important;
  }

  .gz-footer-newsletter-cont, .gz-footer-news-row {
    display: block!important;
  }

  .gz-footer-news-row input[type="email"] {
    width:100%;
    margin-bottom:15px;
  } 

  .gz-footer-news-row button {
    width:50%;
  }

  .gz-footer-logos {
    flex-direction: column-reverse!important;
    justify-content: center;
  }

  .gz-footer-last-row {
    justify-content: center!important;
  }

}

/* Content Classes */
.page-hero {
  margin:0!important;
  overflow: visible;
}

.page-hero h1 {
  text-transform: uppercase;
  color:#fff;
  text-align: center;
}

.page-hero h1.left {
  text-align: left;
}

.shopapp-box-hero p,
.shopapp-box-hero a {
  font-size:16px;
  text-decoration:none;
}

.sec-contact {
  margin:0;
}

/* Hot Deals Section */
.sec-deals .sec-deal-btn-desk {
  margin:0!important;
}

.sec-packages-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll; /* Ensures horizontal scrollbar appears when needed */
    padding: 20px 0;
    list-style: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.sec-packages-grid::-webkit-scrollbar {
    display: none; /* or width: 0; */
    width: 0;
    height: 0;
}

.sec-package-scroll-wrapper {
    position: relative; 
}

.sec-package-scroll-wrapper br {
  display:none;
}

.sec-package-scroll-nav {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    z-index: 10;
    
    /* Circle Appearance */
    background: var(--color-sand);
    color:#fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    line-height: 40px; /* Vertically center the text/icon */
    text-align: center;
    border:none;
}
.sec-package-scroll-nav:focus {
  outline: none;
  border:none;
}

.sec-package-nav-left {
    left: -10px; /* Position button just inside the left padding area */
}

.sec-package-nav-right {
    right: -10px; /* Position button just inside the right padding area */
}

.sec-package-scroll-nav.inactive {
    opacity: 0.4; /* Visually dim the button */
    cursor: default; /* Change cursor to indicate no action */
    pointer-events: none; /* Crucially disables click events on the button */
    color:var(--color-dark-green);
    background:var(--color-light-green)
}

/* Optional: Ensure inactive buttons still look inactive on hover */
.sec-package-scroll-nav.inactive:hover {
    /* Reset any hover effects you have on the base button */
    background-color: transparent; 
    border-color: #ccc;
    box-shadow: none;
}

/* --- 2. STYLE THE CARD ITEMS (THE FLEX ITEMS) --- */
.sec-package-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: calc(100% / 3);
    width: calc(100% / 3); 
    max-width: 400px;
    padding:0 10px;
    scroll-snap-align: center;
}

.sec-package-item > p {
  display:none;
}
.sec-package-inner {
  border: 1px solid #ddd;
  border-radius: 24px;
  background-color: #fff;
  min-height: 400px; /* Adjust this value as needed for your design */
  height: 100%;

  /* CRITICAL FOR OVERLAP */
  position: relative; /* Establish positioning context for absolute children */
  overflow: hidden; /* Ensure image corners are clipped by border-radius */
  padding: 0;  
}

.sec-package-image-cover,
.sec-package-content {
    position: absolute; /* Take them out of flow and stack them */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sec-package-none-msg {
  text-align: center;
}

.sec-package-none-msg p {
  font-size: 1.125rem;
  display: inline-block;
  background:var(--color-light-green);
  padding:10px 20px;
  border-radius:16px;
}

/* Background image styling */
.sec-package-image {
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    /* Optional: Add a transition for hover effects */
    transition: transform 0.4s ease;
}
.sec-package-inner:hover .sec-package-image {
    transform: scale(1.05); /* Subtle zoom effect on hover */
}


/* --- 3. CONTENT STYLING (Overlay and Bottom Alignment) --- */
.sec-package-content {
    z-index: 2; /* Ensure content is on top of the image */
    padding: 20px; 
    
    /* Use Flexbox to push content to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    
    /* Add a dark gradient at the bottom for readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0) 100%
    );
}

.sec-package-content h3,
.sec-package-content .sec-package-destination,
.sec-package-content .sec-package-price {
  color:#fff;
}

.sec-price-from {
  display:block;
  font-size:1rem;
  line-height:0.9rem;
}

.sec-price-value {
  font-family: 'Anton', sans-serif;
  font-size:1.2rem;
}

.sec-package-content .sec-package-destination {
  font-size:0.95rem;
}

.sec-package-content h3 {
  margin: 10px 0 15px;
}

.sec-package-nav-mobile {
    display: none;
}
.sec-nav-mobile {
    display: none;
}

/* Ensure the desktop buttons are shown by default */
.sec-nav-desktop {
    display: block; 
}

body .is-layout-flex.sec-deal-btn-mob {
  display:none;
}

@media (max-width: 768px) {
    body .is-layout-flex.sec-deal-btn-desk {
      display:none;
    }

    body .is-layout-flex.sec-deal-btn-mob {
      display:block;
      text-align:center;
    }

    .sec-packages-grid {
      scroll-snap-type: x mandatory;
    }

    .sec-package-content {
      text-align: left;
    }

    .sec-package-item {
      min-width: calc(100% ); 
      width: calc(100%);
      scroll-snap-align: start;
    }

    .sec-package-scroll-nav {
        /* OVERRIDE ABSOLUTE POSITIONING */
        position: static;
        transform: none;
        
        /* Make them inline-block to sit side-by-side */
        display: inline-block;
        margin: 10px 5px; /* Add margin for spacing */
    }
    
    /* New: Center the buttons by targeting their container (the scroll wrapper) */
    .sec-package-scroll-wrapper {
        text-align: center; /* Center the inline-block buttons */
    }

    .sec-nav-desktop {
        display: none;
    }
    
    /* SHOW and position the new mobile button wrapper */
    .sec-package-nav-mobile {
        display: block; /* Make the wrapper visible */
        text-align: center; /* Center the buttons inside */
        margin-top: 15px; /* Add spacing below the scroll row */
    }

    /* SHOW the mobile-specific buttons (overriding the base .sec-nav-mobile {display: none;}) */
    .sec-nav-mobile {
        display: inline-block;
        position: static;
        transform: none;
        margin: 0 5px; 
    }    

}

/* Why Choose Section */
.sec-why-choose-inner {
  background-repeat: no-repeat !important; 
  background-position: bottom right !important; 
  background-size: auto !important;   
}

.why-choose-cols {
  background-image: url("https://golfzoo.net/wp-content/uploads/2025/11/whychoose-col-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
}

.why-choose-icon {
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 22px;  
}

@media screen and (max-width: 768px) {
  .sec-why-choose-inner {
    background-size: 100% auto !important;   
  }  

  .why-choose-cols {
    background:none;
  }  

  .is-layout-flow > .why-choose-icon {
    float:left;
    margin-right:20px!important;
  }

  .why-choose-cols h4, .why-choose-cols p {
    text-align:left;
  }
 
}


/* Testimonials Section */
.sec-reviews .strong-view {
  margin:50px 0 30px;
}

.sec-reviews .testimonial-inner {
  background:#fff;
  border-radius:24px;
  display:flex!important;
  flex-direction: column;
  min-height:300px;
}

.sec-reviews .testimonial-content {
  font-size:16px;
  color:var(--color-dark-green);
  order: 3; 
}

.sec-reviews a.readmore-toggle {display:none;}

.sec-reviews .testimonial-name {
  order: 1;
  font-weight: bold;
  font-size: 18px;
  color:var(--color-dark-green);
}

.sec-reviews .strong-rating-wrapper .star svg path {
  fill: var(--color-sand);
}

.sec-reviews .testimonial-star {
  order: 2;
}

.sec-reviews .wpmslider-controls.wpmslider-has-pager.disabled {
  display:block!important;
}

.sec-reviews .strong-view.pager-style-buttons .wpmslider-pager-link:before {
    content: "\f111";
    -webkit-mask: none;
    mask: none;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 10px;
    color: var(--color-green);
    background:none;
    opacity: 0.5;
}

.sec-reviews .strong-view.pager-style-buttons .wpmslider-pager-link.active:before {
    color: var(--color-sand);
    opacity: 1;
}

/* Specialty Section */

.sec-specialty {
  display: flex;
  gap: 15px;
  width: 100%;
}

.sec-specialty > * {
  flex: 1 1 33.33%; 
  transition: flex-basis 0.3s ease-in-out;
  box-sizing: border-box;
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow > div {
  height:420px;
  border-radius:24px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow > div:before {
  content: ""; /* Essential for pseudo-elements */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom, 
    /* Starting color: Black at 0% opacity (fully transparent) */
    rgba(0, 0, 0, 0),
    /* Ending color: Black at 50% opacity */
    rgba(0, 0, 0, 0.5)
  );
  z-index: 2;
  border-radius:24px;
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow > div > * {
  z-index: 3;
  position: relative; 
}

@media screen and (min-width: 769px) {

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover {
  flex-basis: 50%; /* Card expands to 50% */
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover ~ * {
  flex-basis: 25%; /* Remaining siblings shift to 25% */
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:has(~ *:hover) {
  flex-basis: 25%;
}

.sec-specialty-cols.wp-block-columns.is-layout-flex {
  align-items:flex-end!important;
  width:100%;
}
.sec-specialty-cols > div.wp-block-column:nth-child(1) {
  flex-basis:100%;
}
.sec-specialty-cols > div:nth-child(2) {
  width:0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top; /* Ensures the scaling happens from the top edge */
  overflow: hidden; /* Hides content during the zero-scale state */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}    

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover .sec-specialty-cols > div.wp-block-column:nth-child(2) {
  flex-basis:40%;
}

.sec-specialty > .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:hover .sec-specialty-cols > div.wp-block-column:nth-child(2) {
  opacity: 1; 
  transform: scaleY(1);
  flex-basis:60%
}

}

@media screen and (max-width: 768px) {
  .sec-specialty-cols > div.wp-block-column h4,
  .sec-specialty-cols > div.wp-block-column p {
    text-align:center;
    margin:10px 0 0 ;
  }
  .sec-specialty-cols > div.wp-block-column > .wp-block-buttons {
    display:block;
    text-align: center;
  }
  
}

/* Map Section */
.sec-map-container {
    position: relative;
    overflow: hidden;
}

.sec-map-container > .wp-block-image {
    width: 100%;
    height: 100%;
    /* Ensures the image fills the container without being distorted or leaving gaps */
    object-fit: cover; 
    /* Ensures the image is below the overlay content */
    z-index: 1; 
}

.sec-map-overlay {
/* Critical: Takes the block out of the normal flow and allows precise positioning */
    position: absolute;
    
    /* Position the content block to the lower-left corner */
    bottom: 0;
    left: 0;
    
    /* Ensures the content is visible above the map image */
    z-index: 10;
    
    /* Optional Styling: Add internal padding and a background for readability */
   
    /* Optional: Set a max width for the overlay content to keep it tidy */
    max-width: 40%;
}
.sec-overlay-cols {
  display: flex;
  align-items: flex-end !important;
  height: 100%;
}
.region-content-item {
  background:#fff;
  border-radius:24px;
  border:1px solid var(--color-light-green);
  padding:20px;
  margin:0;
  width:250px;
}

.region-content-item > .wp-block-group {
  margin:0;
}

.region-content-item h4 {
  margin:0;
}
.region-desc {
  font-size:18px;
  color:var(--color-dark-green);
}
.region-link a,
.region-link span {
  font-size:16px;
  color:var(--color-sand);
  text-decoration: none;
}
.region-prev:hover a, .region-next:hover a {
  color:#ffffff!important;
  background:var(--color-sand)!important;
}
.sec-map-mob {
 display:none!important; 
}

.sec-map-points p {
  font-size: 16px;
}

@media (max-width: 768px) {
  .sec-map-desk {
    display:none!important;
  }
  .sec-map-mob {
    display:block!important;
    margin-bottom:20px;
  }
  .sec-map-overlay {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  .region-content-item {
    width:100%;
    padding:0;
    border:none;
  }
  .region-content-item > .wp-block-group {
    border-radius:24px;
    border:1px solid var(--color-dark-green);
    padding:20px;
    margin:0;
  }
  .regional-arrow-col > .wp-block-buttons {
    width:100%;
    display: block;
    text-align: center;
  }
}

/* Top Destinations */

.featured-destinations-section {
    margin: 4rem 0;
}

.featured-destinations-section br {
  display:none;
}

/* 1. Set up the main container */
.destinations-grid {
    display: flex; /* Enable Flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line on desktop */
    gap: 20px; /* Space between the cards on desktop */
    margin: 0 auto; /* Center the container if needed */
}

/* 2. Style all individual cards */
.destination-card {
    background-color: #ffffff;
    border: 1px solid var(--color-light-green);
    border-radius: 24px;
    overflow: hidden; /* Keeps image corners rounded */
    margin-bottom: 30px; /* Important: use gap for spacing */
}

/* 3. Apply the 100% width to the unique 'primary feature' card (Desktop) */
.destinations-grid .is-primary-feature.is-desktop-only {
    width: 100%; /* Takes up the full width */
}

/* 4. Apply the 33.33% width to all NON-primary feature cards (Applies to all cards on desktop/large screens) */
.destinations-grid .destination-card:not(.is-primary-feature),
.destinations-grid .is-mobile-only {
    /* Calculation for three items per row with gaps */
    width: calc(33.333% - 14px); /* (100% / 3) - adjusted for the 20px gap */
}
/* Initially hide the mobile version on desktop */
.is-mobile-only {
    display: none; 
}


/* --- Image and Content Styling (Universal) --- */
.destination-image-container {
    position: relative;
}

.destination-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.destination-title {
    margin: 15px 0;
}

.destination-title a {
    text-decoration: none;
}

.destination-content {
    padding: 15px;
}

.destination-sub-description {
    font-size: 16px;
}

.destination-card:not(.is-primary-feature) .destination-content,
.is-mobile-only .destination-content { 
    text-align: center;
} 

/* --- State Name Styling (Conditional) --- */

/* Style for the overlay state name (Non-primary cards + Mobile Version) */
.destination-image-container .destination-state-name {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: white;
    color: var(--color-dark-green);
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 32px;
}
.destination-state-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from the contained span */
}
.destination-state-link:focus,
.destination-state-link:active {
    outline: none; /* Crucial: Removes the ugly default rectangular box */
    /* If you were adding a custom link, you might add a subtle box-shadow here */
}
.destination-image-container .destination-state-name svg {
    margin-right: 3px;
}
.destination-image-container .destination-state-name svg path {
    fill: var(--color-sand);
}

/* Style for the state name below the title (Primary card - DESKTOP version only) */
.is-primary-feature .destination-state-name-content-area {
    margin: 25px 0;
}

.is-primary-feature .destination-state-name-content-area .destination-state-name {
    font-size: 0.9em;
    color: var(--color-dark-green);
    margin-bottom: 10px;
    background: var(--color-light-green);
    border-radius: 32px;
    padding: 8px 15px;
}
.is-primary-feature .destination-state-name-content-area .destination-state-name svg {
    margin-right: 3px;
}
.is-primary-feature .destination-state-name-content-area .destination-state-name svg path {
    fill: var(--color-sand);
}


/* ------------------------------------------------------------------- */
/* 5. PRIMARY FEATURE TWO-COLUMN LAYOUT (DESKTOP RULES) 🌟 */
/* ------------------------------------------------------------------- */

.is-primary-feature .card-row {
    display: flex; 
    flex-wrap: nowrap;
    align-items: stretch;
}

.is-primary-feature .card-row .card-column {
    flex: 1;
    width: 50%;
}

/* --- IMAGE HEIGHT FIX --- */
.is-primary-feature .image-column .destination-image-container {
    height: 100%; 
    position: relative;
}
.is-primary-feature .destination-image-container a {
    display: block;
    height: 100%;
}
.is-primary-feature .destination-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Column spacing and padding */
.is-primary-feature .card-row .image-column {
    padding: 0;
    margin-right: 20px; 
}
.is-primary-feature .card-row .content-column {
    padding: 30px;
    box-sizing: border-box;
}
.is-primary-feature .destination-image-container {
    padding: 0;
}
.is-primary-feature .destination-state-name-content-area .destination-state-link {
    display: inline-block; /* Ensure it wraps nicely */
}

/* --- Primary Button Styling --- */
.destination-button-wrapper a {
    display: inline-block;
    text-decoration: none;
    border: 1px solid var(--color-sand);
    color: var(--color-sand);
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 12px;
    text-transform: uppercase;
    margin-top: 25px;
}

/* --- CAROUSEL NAVIGATION STYLES (Global) --- */
.carousel-nav-wrapper {
    display: none; /* Default hidden */
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.carousel-nav-btn {
    background: var(--color-sand);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
}
.carousel-nav-btn:disabled {
  background: var(--color-light-green);
  color: var(--color-dark-green); 
}


/* ------------------------------------------------------------------- */
/* 6. RESPONSIVE CAROUSEL LOGIC (MOBILE $\leq 768\text{px}$) 📱 */
/* ------------------------------------------------------------------- */

@media (max-width: 768px) {
    
    /* A. HIDE THE DESKTOP VERSION of the primary card */
    .is-desktop-only {
        display: none !important; 
    }

    /* B. SHOW THE MOBILE VERSION of the primary card */
    .is-mobile-only {
        display: block; /* Make the mobile version visible */
    }
    
    /* C. RESET GRID CONTAINER FOR HORIZONTAL SCROLLING */
    .destinations-grid {
        flex-wrap: nowrap; /* Forces all cards into a single row */
        overflow-x: scroll; /* Enables horizontal scrolling */
        overflow-y: hidden;
        scroll-snap-type: x mandatory; /* Makes cards snap into view */
        
        /* Remove gap set on desktop, add padding/negative margin to frame the carousel */
        gap: 0; 
        padding: 0 20px; 
        margin-left: -20px; /* Compensate for the left padding */
    }
    
    /* D. Set ALL cards to take up the majority of the viewport width for 1-up view */
    .destinations-grid .destination-card,
    .destinations-grid .destination-card:not(.is-primary-feature),
    .destinations-grid .is-mobile-only {
        flex-shrink: 0; /* Prevents cards from shrinking */
        width: 85vw; /* Each card takes 85% of the viewport width */
        margin-right: 20px; /* Space between cards, replacing the grid gap */
        scroll-snap-align: center; /* Center the card when snapped */
    }
    .destinations-grid .destination-card:last-child {
        margin-right: 40px; /* Extra margin on the last card for better scrolling end */
    }
    
    /* E. Show navigation buttons */
    .carousel-nav-wrapper {
        display: flex; 
    }
}


/* Golf Rep section */

.sec-specialists {
  position:relative;
}

.sec-specialists br {
  display:none;
}

.sec-specialists-bg {
  position:absolute;
  top: -100px;
}

.sec-specialists-inner {
  background-size: initial!important;
  background-repeat: no-repeat;
  background-position: top left;  
}

/* ======================================= */
/* 1. SLIDER VIEWPORT: sec-rep-slider-col */
/* ======================================= */
/* This is the 66% column container (the parent of the track) */
.sec-rep-slider-col {
    /* CRITICAL: Hides the cards that are off-screen. */
    overflow: hidden; 
    /* The slider track inside this column will handle the horizontal movement. */
}

/* ======================================= */
/* 2. SLIDER TRACK: .specialists-card-home-row */
/* ======================================= */
.specialists-card-home-row {
    /* Essential settings for horizontal flow and transition */
    display: flex;
    flex-wrap: nowrap; /* CRITICAL FIX: Ensures cards stay in a single line */
    position: relative;
    transition: transform 0.3s ease-in-out; 
    gap: 20px; /* Space between cards */
    /* Width should be auto/content-driven */
    justify-content: flex-start;
}

/* ======================================= */
/* 3. INDIVIDUAL CARDS: .specialist-card */
/* ======================================= */

/* --- Default Layout (For Screens > 500px): Two Cards Per View --- */
.specialist-card {
    /* Essential: Prevents cards from shrinking */
    flex-shrink: 0; 
    /* Card width for two per view, accounting for the 20px gap */
    width: calc(50% - 10px); 
    text-align: center;
}

/* Image Styling */
.specialist-card__image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.specialist-card__image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* Content and Link Styling */
.specialist-card__content p.specialist-card__rep-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.specialist-card__content h3 {
  margin: 15px 0 10px;
}
.specialist-card__content a {
    text-decoration: none;
}

.specialist-card-contact {
  text-align: left;
  display: inline-block;
}

.specialist-card-contact p {
  font-size:18px;
  font-weight:600;
  color:var(--color-dark-green);
  white-space: nowrap;
}

.specialist-card__content p {
  margin: 0 0 5px;
}

.specialist-card__content svg {
  background-color: var(--color-sand);
  padding:5px;
  border-radius:8px;
  margin-right:3px;
  width:25px!important;
  height:25px!important;
}

.specialist-card__content svg path {
  fill: #fff;
}


/* ======================================= */
/* 4. DOT NAVIGATION: .specialists-nav */
/* ======================================= */
.specialists-nav {
    text-align: center;
    margin-top: 20px;
}

.specialists-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.specialists-dot.active {
    background: var(--color-sand);
}

body .is-layout-flex.sec-specialist-btn-mob {display:none;}

/* ======================================= */
/* 5. RESPONSIVENESS (Mobile View < 500px) */
/* ======================================= */
@media (max-width: 500px) {
    .sec-specialists-bg {
      top: -40px;
      padding:0 20px;
    }
    /* When 1 card is visible, the container must be full width */
    
    .specialist-card {
        /* Show one card per slide */
        width: 100%; 
        min-width: unset;
    }
    .sec-specialist-btn-desk {display:none!important;}
    .sec-specialist-btn-mob {display:block;}
}


/* Search Bar */

/* ==========================================================================
   1. Search Bar Layout (Flexbox & Responsiveness)
   ========================================================================== */

.hero-search-bar-wrapper {
    /* FIX: Ensures dropdown panels are not clipped by the container */
    overflow: visible; 
    position: relative;
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
    color:var(--color-dark-green);
}

.hero-search-bar-wrapper p {
  display:none;
}

.custom-search-form {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    padding: 12px 4px 10px;
    margin-top:20px;
}

.search-input-group {
    flex-grow: 1;
    min-width: 150px; /* Base minimum width for inputs */
    margin: 0 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    border-right:1px solid #ded4cc;
}

.search-input-group.search-button-group {
  border-right:none;
}

.custom-select-destinations {
    flex-grow: 2; /* Give it 3 times the space of a 'flex-grow: 1' item */
}

/* 2. Date Range (MEDIUM/DEFAULT) */
.custom-date-range {
    flex-grow: 1; /* Remains the default size */
}

/* 3. Golfer (SHORTEST) */
.custom-golfer-count {
    flex-grow: 0.5; /* Makes it half the size of the Date Range field */
    min-width: 120px; /* Set a specific minimum width to ensure the counter fits */
    border:none;
}

/* Base style for all input group icons */
.search-input-group::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    width: 28px;
    height: 28px;
    background-size: cover;
    background-repeat: no-repeat;
    /* Adjust top based on the height of the label (14px font) + margin, so 50% puts it roughly centered between the label and the trigger */
    transform: translateY(calc(-50% + 7px)); /* Shift 7px down to compensate for the label height */
}

/* 1. Destination Icon */
.custom-select-destinations::before {
    background-image: url("https://golfzoo.net/wp-content/uploads/2025/12/search-dest-icon.png");
}

/* 2. Date Icon */
.custom-date-range::before {
    background-image: url("https://golfzoo.net/wp-content/uploads/2025/12/search-cal-icon.png");
}

/* 3. Golfer Icon */
.custom-golfer-count::before {
    background-image: url("https://golfzoo.net/wp-content/uploads/2025/12/search-golfer-icon.png");
}

.search-button-group {
    flex-grow: 0;
    min-width: 180px;
    padding-left:0;
}
.search-input-group.search-button-group::before {
  display:none;
}

#destinations-select span,
#destinations-select #dest-searchbar-input {
    display: block; 
    /* The single 'width' property ensures the box is always 180px wide. */
    width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}



/* ==========================================================================
   2. Input Labels and Triggers
   ========================================================================== */

.search-input-group label {
    font-size: 14px;
    font-weight: bold;
    color:var(--color-dark-green);
    text-transform:uppercase;
}

.custom-dropdown-trigger,
.custom-dropdown-trigger-input-wrapper {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    height: 30px; /* Ensure consistent height */
    box-sizing: border-box;
}

/* State for open/active triggers */
.custom-dropdown-trigger.active {
    border:none;
}

.custom-dropdown-trigger i {
    margin-left: 10px;
    font-size: 1em;
    color: #aaa;
}

/* ==========================================================================
   3. Date Range Field (Flatpickr Integration)
   ========================================================================== */

/* NEW: Style the Flatpickr input directly to act as the trigger */
#flatpickr-range-input.date-input-field {
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    height: 30px; 
    box-sizing: border-box; 
    width: 100%;
    border:none;
    margin-top:2px;
}

/* Hides the default Flatpickr "Calendar" icon in the input if present */
.flatpickr-input[data-input] {
    padding-right: 15px !important;
}

/* --- Flatpickr Calendar Fixes (Comprehensive Alignment) --- */

/* 1. Ensure all day cells occupy exactly 1/7th of the space */
.flatpickr-day {
    /* Critical: Forces the day cell width to be one-seventh of the calendar width. */
    width: 14.28% !important; 
    max-width: 14.28% !important; 
    flex-basis: 14.28% !important; 
    
    /* Ensure they are visible and behave like block elements for sizing */
    display: inline-block !important; 
}

/* 2. CRITICAL: Ensure the previous month's padding cells are not collapsed */
.flatpickr-day.prevMonth {
    /* Set opacity to 0 to hide the number, but ensure they are still fully rendered */
    opacity: 0 !important; 
    
    /* Ensure sizing properties are not overwritten by the library's "hidden" styles */
    visibility: visible !important; 
    pointer-events: none !important; /* Makes them unclickable */
}

/* 3. Ensure the container holding the days is structured correctly */
.flatpickr-days .dayContainer {
    width: 100% !important; 
    
    /* Reset Flexbox properties if they are causing centering */
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: var(--color-body-text);
  border-color: var(--color-body-text);
}

/* Cleanup: REMOVED all styles for .date-range-panel, .flatpickr-container, and .date-done-btn */


/* ==========================================================================
   4. Dropdown Panels (Destinations and Golfer)
   ========================================================================== */

.custom-dropdown-panel {
    display: none; /* Controlled by jQuery slideToggle */
    position: absolute;
    top: 100%; /* Position below the trigger */
    /* UPDATED: Need to offset the panel to the left by the amount of padding added to the group */
    left: -0;
    z-index: 1000;
    /* UPDATED: Need to widen the panel by the amount of padding added to the group */
    width: calc(100% + 35px); 
    margin-top: 5px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    /* USER PREFERENCE: Sets text color */
    color:var(--color-dark-green);
}

/* --- Destinations Panel Specific Styles --- */
.destinations-panel {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.custom-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-dark-green);
}

.custom-options-list li {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    font-size:16px;
}

.custom-options-list li:hover {
    background-color: #f0f0f0;
}

.custom-options-list li.region-heading {
    font-weight: 600;
    cursor: default;
    margin: 10px 0;
    font-size: 18px;
    background: #eee;
}

/* Parent state options (like US states) */
.custom-options-list li.state-option {
    font-weight: bold;
    padding-left: 10px;
    margin-top:10px;
}

.custom-options-list li.state-option svg {
  margin-right:8px;
  color: var(--color-sand);
}

/* Child destination options */
.custom-options-list li.destination-option {
    font-weight: normal;
    padding-left: 30px; /* Indentation for destinations */
    padding:3px 15px 3px 30px;
}

/* Icons for the list items */
.custom-options-list li i {
    margin-right: 8px;
    font-size: 0.9em;
    color: inherit;
}

/* Highlight for top destinations
.custom-options-list li.top-dest {
    background-color: #fff3cd;
}
.custom-options-list li.top-dest:hover {
    background-color: #ffe8a1;
}
 */

/* --- Golfer Panel Specific Styles --- */
.golfer-panel {
    padding: 15px;
    width: 250px;
}

.golfer-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.9em;
    font-weight:600;
    color: var(--color-dark-green);
}

.golfer-counter {
    display: flex;
    align-items: center;
}

.golfer-counter span {
    margin: 0 15px;
    min-width: 20px;
    text-align: center;
    font-weight: bold;
}

.golfer-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 24px;
    color: var(--color-green);
    transition: color 0.15s;
}

.golfer-btn:hover {
    color: var(--color-dark-green);
}

.golfer-done-btn {
    width: 100%;
    padding: 15px;
    background-color: #fff;
    color: var(--color-sand);
    border:1px solid var(--color-sand);
    font-family:inherit;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    text-transform: uppercase;
    font-weight: 600;
}

.golfer-done-btn:hover {
    background-color: var(--color-hover);
    color:#fff;
}

#golfer-display {
    display: inline-block; /* Ensure width/min-width properties apply */
    min-width: 75px; /* Adjust this value based on font size. 75px should fit "99 Adults" comfortably. */
    text-align: left; /* Aligns the text to the left within the fixed width */
    margin-right: 5px; /* Add some space before the icons */
}

/* ==========================================================================
   5. Search Button
   ========================================================================== */

.search-deals-btn {
    width: 100%;
    padding: 12px 20px;
    background-color: var(--color-sand);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform:uppercase;
    font-family: inherit;
}

.search-deals-btn:hover {
    background-color: var(--color-hover);
}




/* ==========================================================================
   6. Media Queries (Mobile Optimization)
   ========================================================================== */

@media (max-width: 992px) {
    .custom-search-form {
        padding: 10px;
    }
    .search-input-group {
        width: 100%;
        min-width: 100%;
        margin: 5px 0;
        padding: 5px 15px 5px 40px;
        border-radius:12px;
        border: 1px solid var(--color-light-green);
    }
    .search-input-group::before {
      left:5px;
    }
    .search-button-group {
        width: 100%;
        min-width: 100%;
        margin-top: 10px;
        border:none;
        padding:0;
        margin-top: 20px;
    }
    .custom-dropdown-panel {
        width: 100%;
        /* On mobile, panels can stretch across the full width of the parent group */
    }
    .golfer-panel {
        width: 100%; /* Stretch golfer panel for easier interaction */
        box-sizing: border-box;
    }
}


/* State Page Style */
.single-state .state-direc-btns .wp-element-button {
  font-weight:600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.single-state .state-direc-btns .wp-element-button:hover {
  background:none;
  border-color:var(--color-sand)!important;
  color:var(--color-sand)!important;
}
/* Custom CSS for the Combined Marker Icon */
.state-map .custom-combined-marker {
    /* Hides the default Leaflet icon wrapper */
    border: none !important; 
    background: none !important;
}

.state-map .marker-container {
    /* Styles the main white box container */
    background-color: white;
    padding: 10px 10px 5px;
    border: 1px solid #ccc;
    border-radius: 26px;
    text-align: left;
    position: relative;
    white-space: nowrap;
}

.state-map .marker-symbol {
    /* Creates a visual cue to replace the default blue pin */
    width: 10px;
    height: 10px;
    background-color: #337ab7; /* Blue color similar to a default pin */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 8px; /* Position to the left of the text */
    transform: translateY(-50%);
}

/* Custom CSS for the image icon inside the marker */
.state-map .map-golf-ball-icon {
    width: 26px; /* Set the size of your icon */
    height: 26px;
    vertical-align: middle;
    margin-right: 5px; /* Spacing between icon and text */
}

/* Ensure the destination label can hold the content */
.state-map .destination-label {
    line-height: 1.2;
    display: inline-flex; 
    align-items: center;
}

.state-map .destination-label a {
  color:var(--color-dark-green);
  text-decoration: none;
  font-size: 14px;
}

.state-map .leaflet-marker-icon.leaflet-interactive {
  width:auto!important;
}



/** ----------------------------------------
 * STATE DESTINATION CARDS & SCROLL NAVIGATION (SCROLL SNAP APPLIED)
 * ---------------------------------------- */

/* NEW: Layout for Title and Buttons (FLUSH EDGES) */
.state-destination-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    /* The header padding is aligned with the card padding below (20px total gap) */
    padding: 0 20px; 
}

/* Ensure the title doesn't break the layout */
.state-destination-header h2 {
    margin: 0;
    font-size: 1.5em;
    padding-left: 0; /* Align H2 with the left edge of the content padding */
}

.state-destination-header p {
    font-size:18px;
    font-weight: 600;
}  

/* Container for the two buttons */
.state-destination-header > div {
  white-space: nowrap!important;
}
.state-destination-nav-buttons {
    display: flex;
    gap: 5px; 
    padding-right: 0;
    white-space: nowrap!important;
}
.state-destination-nav-buttons br {
  display: none;
}

/* 1. Scrollable Container */
.state-destination-cards-container {
    display: flex; 
    overflow-x: scroll;
    overflow-y: hidden;
    
    /* ONLY bottom padding for scrollbar space. */
    padding-bottom: 20px; 
    
    /* SCROLLBAR HIDING RULES */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.state-destination-cards-container::-webkit-scrollbar {
    display: none;
}

/* 2. Individual Card Item */
.state-destination-card {
    flex-shrink: 0; 
    
    /* --- NEW SCROLL SNAP CARD RULE --- */
    scroll-snap-align: start;
    
    /* Width and Padding from your latest version */
    width: calc(33.333%);
    padding: 0 10px;
}

.state-destination-card-inner {
    border: 1px solid rgba(155, 165, 143, 0.5);
    border-radius: 24px;
    background: #fff;
    overflow:hidden;
    text-align: center;
}

.state-destination-card-inner a {
    text-decoration:none;
}

.state-destination-card-inner .card-image {
    width: 100%;
    height: 250px; 
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.state-destination-card-inner .card-content h3 {
    margin:20px 0;
}

.state-destination-card-inner .card-description {
    font-size: 15px;
    color: var(--color-body-text2);
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
    padding:0 15px;
}

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


/* 3. Arrow Button Styles (Simplified) */
.state-scroll-button {
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--color-light-green);
    color: var(--color-body-text);
    font-size: 0.8em;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    padding: 0;
    transition: background 0.2s;
}

.state-scroll-button:hover {
    background: var(--color-sand);
    color:#fff;
}


/* 4. Responsive Adjustments */

@media (max-width: 992px) {
    .state-destination-card {
        /* scroll-snap will work on these widths too */
        width: calc(50%); 
    }
}

@media (max-width: 768px) {
    .state-destination-cards-container {
      scroll-snap-type: x mandatory;
    }
    /* On mobile, stack the title and buttons */

    .state-destination-header h2 {
        padding-left: 0; 
    }
    .state-destination-nav-buttons {
        display: none; 
    }
    
    /* Mobile width for single card snap */
    .state-destination-card {
        width: calc(100%); 
    }
    
}



/* ======================================= */
/* NEW 3X SLIDER TRACK: .specialists-card-3x-row */
/* ======================================= */
.specialists-card-3x-row {
    /* Essential settings for horizontal flow and transition */
    display: flex;
    flex-wrap: nowrap; /* Ensures cards stay in a single line */
    position: relative;
    transition: transform 0.3s ease-in-out; 
    gap: 20px; /* Space between cards */
    justify-content: flex-start;
}

/* ======================================= */
/* NEW 3X INDIVIDUAL CARDS: .specialist-card-3x */
/* ======================================= */

/* --- Desktop Layout (For Screens > 500px): Three Cards Per View --- */
.specialist-card-3x {
    /* Essential: Prevents cards from shrinking */
    flex-shrink: 0; 
    /* Card width for three per view, using stable calc() */
    width: calc(33.33% - 13.33px); 
    text-align: center;
}

/* ======================================= */
/* 3X DOT NAVIGATION: .specialists-nav-3x */
/* ======================================= */
.specialists-nav-3x {
    text-align: center;
    margin-top: 20px;
}
/* Re-use dot styling or define new, e.g., .specialists-dot-3x */
/* For simplicity, we'll reuse the original .specialists-dot styling for now, 
   but you should ensure it is styled to be visible. */

@media (min-width: 501px) and (max-width: 768px) {
    .specialist-card-3x {
        /* Two cards per view, accounting for the 20px gap */
        /* Calculation: (100% - 20px) / 2 = 50% - 10px */
        width: calc(50% - 10px) !important; 
    }
}   

/* ======================================= */
/* 3X RESPONSIVENESS (Mobile View < 500px) */
/* ======================================= */
@media (max-width: 500px) {
    .specialist-card-3x {
        /* Show one card per slide */
        width: 100%; 
        min-width: unset;
    }
}

/* Rep Slider OVerrides */

.specialist-row-wrapper {
    display: flex !important; /* Force horizontal alignment */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 20px !important; 
    border: 1px solid var(--color-light-green); 
    border-radius: 24px;
    margin-bottom: 20px;
    background-color: #fff; 
    /* The width should still be handled by .specialist-card-3x */
}
.specialist-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensure the flex container itself spans the full width */
    margin-bottom: 15px; /* Add separation above the full-width section */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-light-green);    
}
.specialist-flex-container .specialist-card-contact p {
  font-size:16px;
}
.specialist-flex-container .specialist-card__content svg {
  width: 20px !important;
  height: 20px !important;  
}
.specialist-flex-container .specialist-info-container {
    /* Inherits from the original .specialist-card__content styles, but scoped to the new wrapper */
    flex-grow: 1; 
    padding: 0 15px 0 0; 
    text-align: left !important;
}

.specialist-flex-container .specialist-image-container {
    /* Inherits from the original .specialist-card__image styles */
    flex-shrink: 0 !important; 
    width: 120px !important;
    height: 120px !important;
    display: block !important; 
}
.specialist-card-review {
    width: 100%; /* Takes full width of the column parent */
    /* Add any custom styling for this section */
    text-align: center;   
}
.specialist-review-icons svg {
  color: var(--color-sand);
  margin:2px;
}
.specialist-review-text {
  font-size:16px;
  font-weight:600;
  color:var(--color-dark-green);
  font-style:italic;
}
.specialist-review-name {
  font-size:14px;
  font-weight:400;
  color:var(--color-dark-green);
  margin-top:20px;
}
.specialist-row-wrapper br {
  display:none;
}
.specialist-row-wrapper a {
  text-decoration:none;
}
/* Left Side: Content Container */
.specialist-row-wrapper .specialist-card__content {
    flex-grow: 1; 
    padding: 0 15px 0 0; /* Remove top/bottom padding, add right padding */
    text-align: left !important;
}


.specialist-row-wrapper .specialist-card__name-text {
  margin: 0 0 20px;
}
.specialist-row-wrapper .specialist-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 16px; /* Circular image */
}

/* ======================================= */
/* Mobile Overrides (Stack Vertically) */
/* ======================================= */
@media (max-width: 1250px) {
    
    /* Existing rule is correct: stacks the content section and the review section */
    .specialist-row-wrapper {
        flex-direction: column !important; 
        text-align: center !important;
    }
    
    /* NEW CRITICAL RULE: Stack the info and image inside the inner flex container */
    .specialist-flex-container {
        flex-direction: column !important; 
    }

    .specialist-row-wrapper .specialist-card__content {
        padding: 10px 0 0 0;
        order: 2; /* Move info below image */
        text-align: center !important;
    }
    
    .specialist-row-wrapper .specialist-card__image {
        order: 1; /* Move image above info */
        margin-bottom: 10px;
        /* The image container's width/height is fixed, so it naturally centers when the parent is column */
    }
}


/* CSS for Destination Pages */
.dest-title-tag br {
  display: none;
}
.dest-title-tag {
  text-align: center;
  margin-top: 0;
}
.dest-title-tag a {
  text-decoration: none;
  color: #fff;
}
.dest-title-tag a:focus {
  outline:none;
  border:none;
}
.dest-title-tag a svg {
  margin-right: 4px;
}
/* Media query targets typical mobile screen sizes (e.g., 768px and below) */
@media (max-width: 782px) {
    .dest-content-cols {
        display: flex; 
        flex-direction: column-reverse;
        flex-wrap: wrap; 
    }
    
    .dest-content-cols > .wp-block-column {
        width: 100% !important;
    }
}
.dest-tbl-cont span.wp-font-awesome-icon {
  display: inline-block;
  width: 25px;
}
.dest-tbl-cont-green {
  border-radius: 0 0 16px 16px!important;
}
.dest-inline-heading > h3,
.dest-inline-heading > h2 {
  display:inline;
}

/* Dest Graph CSS */
.destination-chart-container {
  /* max-width: 800px; */
  height: 400px;
  margin: 40px 0;
  background: #F4F6F1;
  padding: 50px 30px 30px;
  border-radius: 12px;    
}

.destination-chart-container canvas {
  max-height: 100%;
  max-width: 100%;
}

.wp-block-buttons.dest-vendor-btns {
    display: flex;
    gap: 16px;
}

.dest-vendor-btns .wp-element-button {
  border-radius: 12px;
  background:#fff;
  color:var(--color-sand);
  border:1px solid var(--color-sand);
}

.dest-vendor-btns .wp-element-button:hover {
  background:var(--color-sand);
  color:#fff;
}


/* Dest Map CSS */

/* --- CSS for Destination Map and Vendor List --- */

/* 1. Main 50/50 Layout Container */
.dest-map-list-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Space between the map and list columns */
  margin-top: 60px;
}

/* 2. Column Structure (Applies to both the List and the Map) */
.dest-map-list-column {
  flex: 1 1 50%; /* Each column takes up roughly 50% */
}

/* 3. Specific List Column Styling */
.dest-vendor-list-column {
    height: 600px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 15px; /* Give some space for the scrollbar to prevent overlap */
}

.dest-vendor-list-column::-webkit-scrollbar-track {
    background: #ecf0e6; /* Light gray background */
    border-radius: 10px;
}

/* 2. Target the scrollbar itself (the width/height) */
.dest-vendor-list-column::-webkit-scrollbar {
    width: 10px; /* Width for vertical scrollbar */
    height: 10px; /* Height for horizontal scrollbar (less relevant here) */
}

/* 3. Target the thumb (the moveable handle) */
.dest-vendor-list-column::-webkit-scrollbar-thumb {
    background-color: var(--color-dark-green); /* A primary brand color for the thumb */
    border-radius: 10px;
    border: 3px solid #ecf0e6; /* Creates a slight margin/padding effect inside the track */
}

/* 4. Thumb hover state for better usability */
.dest-vendor-list-column::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark-green); /* Darker color on hover */
}


/* --- Firefox Scrollbar Styling (less customization possible) --- */

.dest-vendor-list-column {
    /* Auto: uses system default. Thin: minimizes size. */
    scrollbar-width: thin; 
    
    /* Sets the color of the thumb and track (thumb track) */
    scrollbar-color: var(--color-dark-green) #ecf0e6; 
}


.dest-vendor-list-cont br {
  display:none;
}

/* 4. Map Container (You may need to adjust height) */
.destination-map {
    height: 660px;
    width: 100%;
    border-radius:16px;
}

/* 5. Individual Vendor Item Container */
.dest-vendor-item-container {
    background:#fff;
    border-radius:16px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex; /* Enables flexible layout for content/button */
    justify-content: space-between;
    align-items: center;
}

/* 6. Content/Text Area (Left Side) */
.dest-vendor-item-content {
    flex-grow: 1;
    margin-right: 15px;
}
.dest-vendor-item-content small {
    display: inline-block;
    background:#CEDA69;
    padding:5px 10px;
    border-radius:32px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    margin-bottom:10px;
    font-size: 0.65em;
}
.dest-vendor-item-content h4 {
    margin: 0; /* Resetting default H4 margin */
}
.dest-vendor-item-content h4 span {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-style: italic;
  text-transform: none;
  display: block;
  color: #9d000f;
  margin:10px 0;
}

.dest-vendor-item-content h4 a {
    text-decoration: none;
    color: #0073aa; /* Standard WordPress Blue */
}
.dest-vendor-item-content p {
    margin: 5px 0 0;
    font-size: 0.8em;
    line-height: 1.3;
}

/* 7. Read More Button (Right Side) */
.dest-vendor-item-button {
    flex-shrink: 0;
}
.dest-vendor-item-container[data-type="airport"] .dest-vendor-item-button {
    display:none;
}
.dest-vendor-item-button a {
    display: inline-block;
    padding: 8px 12px;
    background:none;
    border:1px solid var(--color-sand);
    color: var(--color-sand);
    text-decoration: none;
    border-radius: 12px;
    font-size: 0.85em;
    white-space: nowrap;
    transition: background-color 0.3s ease-in-out;
}
.dest-vendor-item-button a:hover {
  background: var(--color-sand);
  color: #fff;
}

/* --- New CSS for Filter Buttons --- */
.dest-filter-buttons-wrapper {
    margin-bottom: 20px;
    display: flex; /* Arrange buttons horizontally */
    gap: 10px; /* Space between buttons */
}
.dest-filters-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-dark-green);
  display: inline-block;
  margin-top: 5px;
}

.dest-filter-btn {
    padding: 10px 15px;
    border: none;
    background-color: var(--color-light-green);
    color: var(--color-body-text2);
    font-weight: 400;
    cursor: pointer;
    border-radius: 32px;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.dest-filter-btn:hover {
    background-color: #CEDA69;
}
.dest-filter-btn:focus {
  border:none!important;
  outline:none!important;
}

/* Active/Selected button style */
.dest-filter-btn.active {
    background-color: #CEDA69; 
    color: var(--color-dark-green);
}

/* --- New CSS for Search Bar --- */
.dest-search-bar-wrapper {
    display: flex;
    margin: 25px 0;
    padding: 10px;
    max-width: 80%;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 16px;
}

#dest-search-input,
#dest-searchbar-input {
    flex-grow: 1;
    padding: 10px;
    border: none;
    font-size: 1.1em;
}

.custom-dropdown-trigger-input-wrapper #dest-searchbar-input {
  padding-left:0;
}

#dest-search-button {
    padding: 10px 15px;
    background-color: var(--color-sand);
    color: white;
    border: 1px solid var(--color-sand);
    border-radius: 12px; /* Rounded on right */
    cursor: pointer;
    font-weight: 400;
    font-size: 1em;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#dest-search-button:hover {
    background-color: var(--color-hover);
}

/* Hide the main H2 when there is no list visible (optional cleanup) */
.dest-vendor-list-column.no-results h2 {
    display: none;
}

.packages-grid .no-results p {
  font-size:16px;
  font-style: italic;
}


/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
    .dest-map-list-wrapper {
        flex-direction: column; /* Stacks the children (map and list columns) vertically */
    }  
    .dest-map-list-column {
        width: 100%;
        flex: 0 0 auto;
    }
    .dest-vendor-list-column {
        padding-right: 0;
        margin-bottom: 20px; /* Space between list and map on mobile */
    }
    .dest-vendor-item-container {
        /* Keep flex row but allow button to wrap */
        flex-direction: column;
        align-items: flex-start;
    }
    .dest-vendor-item-button {
        margin-top: 10px;
        align-self: flex-end; /* Push button to the right */
    }
    .destination-map {
        /* CHANGE: Make map shorter on mobile */
        height: 400px; 
    }
    .dest-filter-buttons-wrapper {
      flex-wrap: wrap;
    }
    .dest-filter-buttons-wrapper .dest-filters-label {
      display:none;
    }
    #map-section-anchor.dest-search-bar-wrapper {
      max-width: 100%;
    }
}


/* Dest Package Packages CSS */
/* ------------------------------------------- */
/* --- Destination Packages Show/Hide CSS --- */
/* ------------------------------------------- */

/* 1. Base Setup for Animation and Maximum Height */
/* ---------------------------------------------- */
#destination-packages-container .package-item {
    /* Sets the duration and easing for the animation */
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, 
                padding 0.4s ease-in-out, margin 0.4s ease-in-out;
    overflow: hidden; /* Critical: Hides content that exceeds max-height */
    
    /* Sets a maximum height larger than your tallest package item. 
       Use a generous value (e.g., 200px) to ensure items fully display when expanded. 
       If your packages are taller than 200px, increase this value. */
    max-height: 250px; 
    opacity: 1; /* Default visible state */
}

/* 2. The Hiding Class (Toggled by JavaScript) */
/* ------------------------------------------ */
.package-hidden {
    /* Critical properties to hide the element smoothly */
    max-height: 0 !important;
    opacity: 0 !important;
    
    /* Ensure padding and margins are also collapsed to eliminate spacing/gaps */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Link Styling (Optional but helpful) */
/* -------------------------------------- */
.show-more-link:focus {
  outline:none;
  border:none;
}
.show-more-link {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    /* Add any styling here (e.g., color, border, font-weight) */
    font-weight: 500;
    color: var(--color-sand);
    text-decoration: none;
    text-transform: uppercase;
    font-size:1.2rem;
}

.show-more-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------- */
/* --- PACKAGE ITEM CARD LAYOUT (Desktop) --- */
/* ------------------------------------------- */

/* Container for the Card */
.package-item {
    display: flex; /* Enables horizontal layout */
    border: 1px solid #ddd;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 24px;
    overflow: hidden; /* Keeps the border-radius clean */
}

.package-item a {
  text-decoration: none;
}
.package-item a:focus {
  outline:none;
  border:none;
}

/* LEFT HALF: IMAGE */
.package-card-image {
    flex: 0 0 40%; /* CHANGED from 35% */
    max-width: 40%; /* CHANGED from 35% */
    height: auto; 
    overflow: hidden;
    position: relative;
}

.package-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the space without distortion */
}

/* RIGHT HALF: CONTENT */
.package-card-content {
    flex: 1; /* Takes up the remaining space (65%) */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Stacks title, excerpt, and footer vertically */
}

/* Titles */
.package-card-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Excerpt area */
.package-excerpt {
    flex-grow: 1; /* Pushes the footer to the bottom */
    margin-bottom: 15px;
    color: var(--color-body-text2);
    font-size:18px;
}

/* Price and Button Footer */
.package-card-footer {
    display: flex;
    /* FIX: Revert to space-between. This pushes .package-footer-left to the left 
       and .package-footer-right (containing the button) to the right. */
    justify-content: space-between; 
    align-items: center;
    padding-top: 10px;
    /* Ensure the footer sections fill all available space */
    width: 100%;  
}

.package-footer-right {
    display: flex;
    justify-content: flex-end; /* Ensures button sticks to the right within its wrapper */
}

/* Price styling */
.package-price {
    font-size: 1.1em;
}
.package-price .price-from {
    font-size: 16px;
    font-weight:600;
    margin-right: 5px;
    display: inline-block;  
}
.package-price .price-value {
  font-family: 'Anton', sans-serif;
}

/* Button styling */
.view-details-button {
    background-color: none; /* Example color */
    color: var(--color-sand);
    border: 1px solid var(--color-sand);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: background-color 0.2s;
    text-transform: uppercase;
    font-size:1.1rem;
}

.view-details-button:hover {
    background-color: var(--color-sand);
    color:#fff;
}

.package-controls-wrapper {
  position:relative;
  z-index: 0;
}

.package-controls-wrapper br {
  display:none;
}

.package-sort-controls,
.package-filter-controls {
    display: flex; /* Makes children (label and select) lay out horizontally */
    align-items: center; /* Vertically aligns the label and the select field */
    gap: 5px; /* Adds space between the label text and the dropdown */
    margin-bottom: 20px; /* Space below the controls before the package list */
}

/* Optional: Styling for the label text if needed */
.package-sort-controls label,
.package-filter-controls label {
    font-weight: 600;
    white-space: nowrap; /* Prevents "Sort Packages By:" from wrapping onto multiple lines */
}

.package-sort-controls select#package-sorter,
.package-filter-controls select#package-course-filter {
    width:auto;
    font-family: 'Manrope', sans-serif;
    color: var(--color-dark-green);
    border-radius: 12px;
}

.pkg-book .hero-search-bar-wrapper,
.pkg-book .custom-search-form {
  margin:0;
  padding:0
}

.pkg-book br {
  display:none;
}

.pkg-book .search-input-group {
  width: 100%;
  border: none;
  margin: 0 0 20px 0;
  border-radius: 12px;
  
}

.pkg-book .custom-date-range,
.pkg-book .custom-golfer-count {
  padding: 5px 10px 5px 40px;
  bordeR:1px solid var(--color-sand);
}

.pkg-book .search-input-group::before {
  left:5px;
}

/* ------------------------------------------- */
/* --- MEDIA QUERY: MOBILE CAROUSEL LAYOUT (Max 768px) --- */
/* ------------------------------------------- */
@media (max-width: 768px) {
    
    /* 1. Disable Vertical Flow and Set up Horizontal Carousel */
    .related-packages-list {
        display: flex; /* Enable horizontal flow */
        flex-wrap: nowrap; /* CRITICAL: Prevents items from wrapping to the next line (forces a single row) */
        overflow-x: scroll; /* Enables horizontal scrolling */
        overflow-y: hidden; 
        scroll-snap-type: x mandatory; /* CRITICAL: Enables smooth, mandatory snapping on the X-axis */
        -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS devices */
        padding-bottom: 20px; /* Add space below the scrollbar */
        gap: 20px; /* Space between the cards */
        /* Set align-items back to flex-start or center if you want the cards to align vertically */
        align-items: flex-start; 
        width: 100%;
        margin-bottom: 0; /* Clear previous margin */
    }

    /* 2. Configure Individual Package Card for Carousel */
    .package-item {
        flex-direction: column; /* Stacks image (top) and content (bottom) */
        flex-shrink: 0; /* Prevents items from shrinking below their defined width */
        width: 85vw; /* Sets card width to 85% of the viewport width */
        max-width: 300px; /* Optional: Sets a maximum size for very large screens in mobile view */
        scroll-snap-align: start; /* CRITICAL: Defines the snap point for each card */
        max-height: none !important; /* Allow natural stacking height for mobile */
        margin-right: 0; /* Use gap for spacing instead of margin */
        margin-bottom: 0;
    }

    /* 3. Disable Hide/Show Logic on Mobile */
    /* By explicitly overriding the hide class, we ensure all cards are visible in the scrollable list */
    .package-hidden {
        max-height: none !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important; /* Ensure the item is visible */
    }
    
    /* 4. Image and Content Widths (from previous steps) */
    .package-card-image {
        /* Set a fixed height for the image wrapper */
        height: 250px; 
        /* Ensure the content inside the card does not influence the image's flex size */
        flex: 0 0 auto; 
        max-width: 100%;
        display:block;
        overflow: hidden; /* Important: Clips image if it's too large for the fixed height */
    }
    
    .package-card-image img {
        width: 100%;
        height: 100%;
        /* CRITICAL: Ensures the image covers the fixed area without distortion, cropping as necessary */
        object-fit: cover; 
    }
    .package-card-content {
        padding: 15px; 
    }

    .package-card-content h4 {
      text-align: center;
    }

    .package-excerpt,
    .view-details-button {
        display: none !important; /* Hides the excerpt entirely on mobile */
    }    

    /* 5. Handle Footer for Stacked Content */
    .package-card-footer {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px;
    }
    .package-footer-right,
    .view-details-button {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .package-controls-wrapper {
      flex-direction: column;
    }
 
    .package-sort-controls,
    .package-filter-controls {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px; /* Add padding to match the carousel's spacing */
        margin-bottom: 15px; /* Ensure space below the dropdown */
        z-index: 10; /* Ensure it sits above other elements */
        position: relative;
    }

    #package-sorter {
        width: 100%;
        /* Ensure the select box is visible and not collapsed */
        min-height: 40px; 
    }    
    
    /* 6. Sorting Control (Already correctly stacking) */
    .show-more-link {
        display: none !important;
    }

    /* For WebKit browsers (Chrome, Safari) */
    .related-packages-list::-webkit-scrollbar {
        display: none;
    }

    /* For IE and Edge */
    .related-packages-list {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }    

}


/* Salesrep Page CSS */
.spec-profile-contact br {
  display:none;
}

.rep-fname-string {
  gap: 0;
}

.spec-profile-contact svg {
  background-color: var(--color-sand);
  padding:5px;
  border-radius:8px;
  margin-right:3px;
  width:25px!important;
  height:25px!important;
}

.spec-profile-contact .rep-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

.spec-profile-contact svg path {
  fill: #fff;
}

.spec-profile-contact .rep-contact-item a {
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 768px) {

  .spec-profile-contact .rep-contact-info {
    gap: 15px;
  }  

}

/* --- Global List Cleanup --- */
.specialist-exp-list-grouped a {
  text-decoration: none;
}

.specialist-exp-list-grouped a:hover {
  text-decoration: underline;
}

.specialist-exp-list-state-group-title a {
  color:var(--color-dark-green);
  font-weight: 600;
  font-size: 1.125rem;
}

.specialist-exp-list-destination-list a {
  color:var(--color-body-text);
  font-size: 1rem;
}

/* Target the ul that contains the destinations inside the state group */
.specialist-exp-list-grouped .specialist-exp-list-destination-list {
    /* Remove all bullet points */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Target the main ul that contains the state groups */
.specialist-exp-list-grouped .specialist-exp-list-state-groups {
    list-style: none; /* Remove bullets from main groups */
    margin: 0;
    padding: 0;
}

/* --- Spacing and Column Layout --- */

/* Add bottom margin to give space between each "state-group-item" */
.specialist-exp-list-grouped .specialist-exp-list-state-group-item {
    margin-bottom: 20px; 
}

/* Arrange the list to display in two columns */
@media (min-width: 769px) {


    /* Apply column layout to the main container */
    .specialist-exp-list-grouped .specialist-exp-list-state-groups {
        column-count: 2; 
        column-gap: 40px; 
    }

    /* Prevent the list items (state groups) from breaking across columns */
    .specialist-exp-list-grouped .specialist-exp-list-state-group-item {
        break-inside: avoid;
        page-break-inside: avoid; 
    }
}

/* Profile Page Gallery CSS */

/* Container & Layout */
.rep-gallery-container {
    margin-top: 20px;
    padding: 10px 0;
}

.rep-gallery-container br {
  display: none;
}

.rep-mosaic-grid {
    display: flex; /* Use flex for the main two columns */
    height: 450px;
    gap: 10px;
    width: 100%;
}

/* Left Side (60%) */
.rep-mosaic-item.featured {
    flex: 0 0 60%; 
    height: 100%;
    overflow: hidden;
    border-radius: 24px 0 0 24px;
}

/* Right Side Column (40%) */
.rep-mosaic-sidebar {
    flex: 0 0 calc(40% - 10px); /* Adjust for the gap */
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 10px;
    height: 100%;
    overflow:hidden;
    border-radius:  0 24px 24px 0;
}

.rep-mosaic-sidebar .sidebar-item:nth-child(n+4) {
    display: none !important;
}

/* Sidebar individual items */
.sidebar-item {
    flex: 1; /* THIS IS THE KEY: They will split the height equally */
    width: 100%;
    overflow: hidden;
}

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

/* Mobile Gallery */
@media (max-width: 768px) {
    .rep-mosaic-grid {
        display: flex;
        flex-direction: column; 
        height: auto; /* Let the container grow to fit both rows */
        gap: 10px;
    }

    .rep-mosaic-item.featured {
        flex: none; /* Disables the 60% rule from desktop */
        width: 100%;
        height: 300px !important; /* Forces the height */
        min-height: 300px;
        border-radius: 24px 24px 0 0;
    }

    .rep-mosaic-sidebar {
        flex: none; /* Disables the 40% rule from desktop */
        flex-direction: row; 
        width: 100%;
        height: 150px; /* The row height for the two small images */
        border-radius:  0  0 24px 24px;
    }

    .sidebar-item {
        flex: 1; 
        height: 100%;
    }
}

/* Salesrep Profile Testims */
.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial {
  border:1px solid rgba(115, 115, 115, 0.3);
  border-radius: 24px;
  padding:5px;
}

.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial-content p {
  font-weight: 600;
  font-size:1.125rem;
}

.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial-field {
  text-align: left;
  font-size:1.125rem;
  margin-top:15px;
}

.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial-field::before {
  content: "-";
  margin-right: 10px;
}

.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial-heading {
  background:none;
  padding-left:0;
  font-size: 0;
}

.rep-profile-testims .strong-view.wpmtst-default .wpmtst-testimonial-heading::before {
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  margin-right: 10px;
  font-weight:900;
  color: var(--color-sand);
  font-size: 1.125rem;
}


/* Packages CSS */
/* Container Layout */
.pkg-gallery {
    display: flex;
    gap: 12px;
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensures padding/gap don't break width */
    border-radius:16px;
    overflow:hidden;
}

.pgk-gall-feat-col {
    flex: 0 0 70%;
    height: 100%;
}

.pgk-gall.side-col {
    flex: 1; /* Automatically takes the remaining 30% minus the gap */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    height: 100%;
}

/* Item Styles */
.pgk-gall-item {
    position: relative;
    overflow: hidden;
}

.pgk-gall-item br {
  display:none;
}

.pgk-gall-item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ensure images inside the link still behave correctly */
.pgk-gall-item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pgk-gall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pgk-gall-item:hover img {
    transform: scale(1.03);
}

.pgk-gall-item.hero {
    height: 100%;
}

/* Visibility Toggle */
.pgk-gall-item.is-hidden {
    display: none !important;
}

/* Saved Preference: Custom Dropdown */
.custom-dropdown-panel {
    color: black !important;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
    .pkg-gallery {
        flex-direction: column;
        height: auto;
    }
    .pgk-gall-feat-col, 
    .pgk-gall.side-col {
        flex: 0 0 100%;
        width: 100%;
    }
    .pgk-gall-feat-col {
        height: 300px;
    }
    .pgk-gall.side-col {
        height: 450px;
    }
}

/* Package Pricing */
.pkg-price-heading {
  text-transform: uppercase;
  color:var(--color-dark-green);
  font-size: 12px;
  font-weight: 600;
}
.pkg-price-line {
  margin:0;
}
.pkg-price-val {
  color:var(--color-sand);
  font-family: 'Anton', sans-serif;
  font-size:2rem;
  font-weight:400;
  margin-right:3px;
}
.pkg-price-suffix {
  font-size: 1rem;
  font-weight: 600;
}

.pkg-price-contact {
  text-align: center;
  font-size: 1.2rem;
}

.pkg-parent-dest {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--color-light-green);
  border-radius:32px;
  padding:5px 15px;
  display:inline-block;  
}

.pkg-parent-dest svg {
  margin-right:5px;
}

.pkg-parent-dest svg path {
    fill: var(--color-sand);
}

/* Package Details */
.pkg-details p {
  margin:0;
  color: var(--color-green);
  font-family:600;
  font-size:1rem;
}

.pkg-details h4 {
  color: var(--color-dark-green);
  margin-top:10px;
  margin-bottom:0;
}

/* Package Map and Vendors */
#package-map {
  height: 450px;
  width: 100%;
  border-radius: 12px;
}

/* Container holds both columns */
.package-directory-grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Base style: 100% width for mobile first */
.package-dir-col {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.package-dir-col h4 {
  margin-bottom: 15px;
  text-transform: none;
}

/* Simple clean list resets */
.package-dir-list {
    padding: 0 0 0 20px;
    margin: 0;
}
.package-dir-list li {
    margin-bottom: 8px;
    font-size:1rem;
}

/* Desktop screen sizing */
@media (min-width: 768px) {
    .package-dir-col {
        width: 50%;
        padding-right: 20px; /* Adds space between columns */
    }
}

/* Responsive (Mobile) */
@media (min-width: 769px) {
  .pkg-details-row {
    gap: 4rem;
  }
}

/* Vendor Page CSS */
.vendor-hero > div {
  padding:0!important;
}

.vendor-hero-slider br {
  display:none;
}
/* Vendor Hero Slider */
.vendor-hero-slider {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 0;
    max-width: 100%;    
}

.vendor-hero-container {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.vendor-hero-container .slide {
    position: relative;
    flex: 0 0 80%; /* 80% width for the 'peek' effect */
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.vendor-hero-container .slide.active {
    opacity: 1; /* Highlight center slide */
}

.vendor-hero-container .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Navigation */
.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 20px;
}

.slider-nav button {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .vendor-hero-container .slide img {
        border-radius: 0;
    }    
    .vendor-hero-slider {
        height: 350px;
        padding: 0;
    }

    .vendor-hero-container .slide {
        flex: 0 0 100%;
        padding: 0;
        /* CHANGE: Ensure slides are visible so they don't 'flash' in */
        opacity: 1; 
        transition: opacity 0.6s ease;
    }

    /* Optional: Slightly dim the slides that aren't 'active' 
       if you want a focus effect, but keep them visible. */
    .vendor-hero-container .slide:not(.active) {
        opacity: 0.9; 
    }
}


/* Vendor Map CSS */

.vendor-map-container br {
  display:none;
}

#vendor-map {
  height: 450px;
  width: 100%;
  border-radius: 12px;
}

.vendor-directions-cont {
  margin-top:25px;
}
 
.vendor-directions-btn {
  display:inline-block;
  background: var(--color-sand);
  padding:15px 20px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight:600;
}

/* Why Choose Page - "page-id-3545" */
.gz-why-cont {
  background-size: 40%!important;
  background-repeat: no-repeat;
  background-position: 40% bottom;
}

.why-reasons-cont figure {
  width:70px;
}


.gz-why-rev-cont .SA__customer_reviews {
  border: 1px solid var(--color-light-green);
  border-bottom: 1px solid var(--color-light-green)!important;
  padding:0 20px;
  background:#fff;
  border-radius:16px;
}


/* Africa Page */
.afr-pkg-row {
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--color-light-green);
  max-width:90%;
  gap:0;
}

.afr-pkg-row a {
  text-decoration:none;
}

.africa-pkg-img-cont {
  height: 100%;
  width: 100%;  
}

.africa-pkg-img-cont a,
.africa-pkg-img-cont img {
  height: 100%;
  width: 100%;
  object-fit: cover;  
}

@media (max-width: 768px) {
  .afr-pkg-row {
    max-width:100%;
  }
}

/* Masters Page */

.mast-pkgs-price-tbl thead,
.mast-pkgs-price-tbl tr {
  border-bottom: 1px dashed var(--color-light-green);
}

.mast-pkgs-price-tbl tr:last-child {
  border-bottom:none;
}

.mast-pkgs-price-tbl th,
.mast-pkgs-price-tbl td {
  padding: 0.5rem 0.2rem;
  text-align: left;
  border:none;
}

.mast-pkgs-price-tbl td {
  vertical-align: top;
}

.mast-pkgs-price-tbl th strong {
  font-size: 1rem;
  text-transform: uppercase;
  color:var(--color-dark-green);
}

.mast-pkgs-price-tbl tbody td {
  font-size: 1rem;
  }

.mast-pkg-gst-line {
  font-size: 0.8rem;
}

.mast-pkgs-cont .mast-pkg-line-price {
  font-family: 'Anton', sans-serif;
  font-style: normal;
  font-weight: 400;
  color:var(--color-dark-green);
  text-transform: uppercase;  
}

/* Gift Certificate Page */

/* Create the flex container */
.gc-req-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Force the heading to take up 100% width so fields start on the next line */
.gc-req-fields h3 {
    width: 100%;
}

/* Set the individual field groups to 50% width */
.gc-req-fields .agile-group {
    width: 48%; /* 48% allows for a small gap between columns */
    box-sizing: border-box;
}

/* Ensure inputs and their containers fill the 48% width */
.gc-req-fields .agile-field-xlarge,
.gc-req-fields .agile-field input {
    width: 100% !important;
}

/* Optional: Clean up the "clear" divs used in the original HTML */
.gc-req-fields .agile-custom-clear {
    display: none;
}

/* Mobile Responsive: Stack them back to 100% on small screens */
@media (max-width: 600px) {
    .gc-req-fields .agile-group {
        width: 100%;
    }
}

.sa-widget-left > div {
  justify-content: left;
}

.sa-widget-left > div > div {
  padding-left:0!important;
  padding-right:0!important;
}

.gc-form-inner > fieldset {
  padding:0;
  margin:0;
  border:none;
}

.gc-form-inner h3 {
  margin:0 0 10px 0;
}
.gc-form-inner h3.subheading {
  margin-bottom:10px;
}

.gc-form-sec {
  margin-bottom:2rem;
}

.gc-form-sec input,
.gc-form-sec select,
.gc-form-sec textarea,
.gc-form-sec button {
  font-family: 'Manrope', sans-serif;
  font-size:1.1rem;
  margin:15px 0;
  border:1px solid var(--color-light-green);
  border-radius: 12px;
}

.gc-form-btn-cont {
  width:100%;
  text-align: center;
}

.gc-form-btn-cont button {
  width:100%;
  background:var(--color-sand);
  padding:15px;
  border-radius: 12px;
  text-transform: uppercase;
  border:none;
  color:#fff;
  margin:2rem 0;
  font-size: 1.1rem;
  cursor: pointer;
}

.gc-form-btn-cont button:hover {
  background:var(--color-hover);
}

/* About Us Page */

/* 1. Grid Container */
/* --- 1. YOUR EXISTING GRID & CARD STYLING --- */
.staff-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 2rem 0;
}

.staff-card {
    position: relative;
    flex: 0 1 calc(25% - 15px);
    min-height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.staff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.staff-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.staff-card-content {
    padding: 40px 20px 25px;
    color: #ffffff;
    z-index: 1;
    pointer-events: none;
}

.staff-card-content h4 {
    margin: 0;
    color:#fff;
    line-height: 1.1;
    font-size: 1.25rem;
}

.staff-rep-title {
    margin: 5px 0 0 0;
    font-size: 0.95rem;
    color: #fff;
    text-transform: none;
}

/* --- 2. ADDED MODAL STYLES --- */
.about-us-team-slider {
  margin-top:-150px;
  text-align: center;
}

.about-team-photo {
  text-decoration: none;
}

.about-team-photo h4 {
  margin-bottom:0;
  text-decoration: none;
}

a.about-team-photo img {
  max-height: 600px;
  object-fit: cover;
  height: 600px!important;
  border-radius:16px;
}

.staff-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    max-width:100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.staff-modal-container {
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    margin: 5vh auto;
    width: 90%;
    max-width: 1000px;
    height: 85vh; /* Prevents modal from being taller than screen */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.staff-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 35px;
    color: #333;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.staff-modal-body {
    display: flex;
    height: 100%;
    width: 100%;
}

.staff-modal-left {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.staff-modal-right {
    flex: 1.3;
    padding: 50px;
    overflow-y: auto;
    background: #fff;
    color: #333;
    text-align: left;
}

.staff-modal-right h2 {
    margin: 0 0 5px 0;
}

.staff-rep-title-modal {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #666;
}

.staff-modal-right hr {
    border: 0;
    border-top: 1px solid #eee;
    margin-bottom: 25px;
}

/* Bio Content Formatting */
.staff-bio-render p {
    line-height: 1.6;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    color: #444;
}

/* --- 3. UPDATED RESPONSIVE DESIGN --- */

@media (max-width: 1100px) {
    .staff-card {
        flex: 0 1 calc(33.33% - 14px);
    }
}

@media (max-width: 850px) {
    /* Stack the modal vertically on tablets/phones */
    .staff-modal-body {
        flex-direction: column;
    }
    
    .staff-modal-left {
        height: 300px;
        flex: none;
    }
    
    .staff-modal-right {
        padding: 30px;
    }

    .staff-modal-container {
        height: 90vh;
        margin: 5vh auto;
    }
}

@media (max-width: 768px) {

    a.about-team-photo img {
      max-height: 300px;
      height: 300px !important;
    }  
    .staff-card {
        flex: 0 1 calc(50% - 10px);
        min-height: 350px;
    }
}

@media (max-width: 480px) {
    .staff-card {
        flex: 0 1 100%;
    }
    
    .staff-modal-right h2 {
        font-size: 1.5rem;
    }
}

.staff-rep-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--color-sand);
    text-decoration: none !important;
    border-radius: 12px;
    color:#fff;
    transition: background 0.3s ease;
    text-transform: uppercase;
    font-size: 01rem;
}

.staff-rep-button:hover {
    background-color: var(--color-hover);
}


/* Packages Archive Page */

/* Search Bar */
.packages-search-bar {
  margin-block-start: 0!important;
}
.packages-search-bar p {
  display:none;
}

.packages-search-bar .hero-search-bar-wrapper {
  padding:0;
  margin:0;
}

.packages-search-bar .custom-search-form {
  margin-top:0;
}

/* 1. GRID CONTAINER & CONTROLS */
.packages-archive-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.packages-grid-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(115,115,115,0.3);
}

.packages-grid-controls br {
  display:none;
}

.packages-count {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
}

.packages-sort select {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

/* 2. THE GRID LAYOUT */
.packages-grid {
    display: grid;
    /* Forces 3 columns on desktop, drops to 2 or 1 on smaller screens */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
}

/* Responsive adjustment: 2 columns on tablets, 1 on mobile */
@media (max-width: 1024px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}

.packages-grid br,
.packages-grid > p {
  display:none;
}

/* 3. THE CARD STYLING */
.package-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: 16px;
    overflow: hidden; /* Clips the image and overlay to the border radius */
}

.package-card.overlay-style {
    position: relative;
    height: 300px; /* You can adjust this for taller or shorter cards */
    background-color: #222; /* Fallback color */
    display: flex;
    flex-direction: column;
}

/* 4. BACKGROUND IMAGE LOGIC */
.package-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.package-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the card without stretching */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Zoom effect on hover */
.package-card-link:hover .package-bg-image img {
    transform: scale(1.1);
}

/* 5. OVERLAY & TEXT PROTECTION */
.package-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* This gradient makes sure white text is readable regardless of the image */
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.2) 50%, 
        rgba(0,0,0,0.85) 100%
    );
    display: flex;
    align-items: flex-end; /* Aligns text to the bottom */
    padding: 30px;
    transition: background 0.3s ease;
}

/* Slightly darken overlay on hover */
.package-card-link:hover .package-overlay {
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.1) 0%, 
        rgba(0,0,0,0.3) 50%, 
        rgba(0,0,0,0.95) 100%
    );
}

/* 6. CONTENT TYPOGRAPHY */
.package-content {
    width: 100%;
}

.package-title {
    margin: 0 0 8px 0;
    color: #ffffff;
}

.packages-grid .package-price {
  color:#fff;
  line-height:1.7rem;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 7. PAGINATION */
.package-pagination {
    margin-top: 50px;
    text-align: center;
}

.package-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.package-pagination a, 
.package-pagination span {
    padding: 10px 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.package-pagination .current {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.package-destination {
    display: block;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.package-destination svg {
  margin-right: 3px;
}

/* Adjust title margin to look tighter with the destination label */
.package-title {
    margin-top: 0;
    margin-bottom: 8px;
}

/* ==========================================================================
   PACKAGES ARCHIVE SIDEBAR & SEARCH HEADER
   ========================================================================== */

/* --- 1. SIDEBAR CONTAINER --- */
.packages-sidebar {
  background-color: #fff;
  border: 1px solid rgba(115,115,115,0.3);
  border-radius: 16px;
  /*position: sticky;  Keeps sidebar in view while scrolling grid */
  top: 20px;
}

.packages-sidebar hr {
  color: rgba(115, 115, 115, 0.3);
  background-color: rgba(115, 115, 115, 0.3);
  height: 1px;
  border-width: 0;
}

.filter-sec {
  padding: 0 25px;
  border-bottom: 1px solid rgba(115, 115, 115, 0.3);
}

.filter-sec:last-child {
  border-bottom: none;
}

.filter-sec h4 {
  margin:20px 0;
}

/* --- 2. THE CHECKBOX UI --- */
.checkbox-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #cccccc;
    border-radius: 4px;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    background-color: #ffffff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Hover effect on box */
.filter-link:hover .checkbox-box,
.region-heading-link:hover .checkbox-box {
    border-color: var(--color-hover);
}

/* Active State: Box fill */
.is-active .checkbox-box,
.region-is-active .checkbox-box {
    background-color: var(--color-sand);
    border-color: var(--color-sand);
}

/* Active State: Draw the checkmark */
.is-active .checkbox-box::after,
.region-is-active .checkbox-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- 3. FILTER LINKS & TYPOGRAPHY --- */
.filter-group {
    margin-bottom: 15px;
}

.state-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.state-filter-list.state-indiv {
  margin: 0 0 0 15px !important;
}

.state-filter-list br {
  display:none;
}

.filter-link, 
.region-heading-link {
    text-decoration: none !important;
    display: flex;
    align-items: center;
    padding: 6px 0;
    transition: all 0.2s ease;
    color: var(--color-body-text);
}

.filter-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Region Header (US / International) */
.region-heading-link {
    font-size: 0.8rem;
    font-weight: 800;
    /*text-transform: uppercase;
    letter-spacing: 1.2px;*/
    margin: 0 0 10px 0;
}

/* Active State Colors */
.is-active .filter-link,
.region-is-active .region-heading-link {
    color: var(--color-sand);
    font-weight: 700;
}

/* Package Count (x) Styling */
.count-tag {
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: 5px;
}

.is-active .count-tag,
.region-is-active .count-tag {
    opacity: 1;
}

/* "All Regions" Primary Anchor */
.all-regions-link {
    font-weight: 700;
    color: var(--color-body-text) !important;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(115, 115, 115, 0.3);
}

/* --- 4. RESET BUTTON --- */
.sidebar-reset {
    padding: 25px;
}

.sidebar-reset svg {
  margin-right: 5px;
}

.reset-link {
    display: inline-flex;
    align-items: center;
    color: #d93025;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.reset-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* --- 5. SEARCH RESULTS HEADER (Above the Grid) --- */
.archive-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px 25px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.search-results-title {
    margin: 0;
}

.search-results-title span {
    color: var(--color-sand);
}

.clear-search-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #d93025;
    text-decoration: none;
    background: #fff0f0;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid #ffdada;
    transition: all 0.2s;
}

.clear-search-tag br {
    display: none;
}

.clear-search-tag svg {
  margin-right: 5px;
}

.clear-search-tag:hover {
    background: #d93025;
    color: #fff;
}

/* --- 6. MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .packages-sidebar {
        position: static;
        margin-bottom: 30px;
    }

    .state-filter-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns for states on mobile */
        gap: 0 15px;
    }

    .region-heading-link,
    .all-regions-link,
    .sidebar-reset {
        grid-column: span 2; /* These items take full width */
    }

    .archive-search-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}


/* Bucket List Page */
.buck-tab-box .uagb-tabs__wrap ul.uagb-tabs__panel li.uagb-tab a {
  text-decoration: none;
}


/* Top Destinations Page */
#top-map-cont {
  height: 500px;
  width: 100%;
  margin:0;
}

#top-map-cont .leaflet-popup-content-wrapper {
  border-radius:16px;
  overflow:hidden;
  padding:0;
}

#top-map-cont .leaflet-popup-content {
  margin:0;
  text-align: center;
  width:100%!important;
}

#top-map-cont.leaflet-container a.leaflet-popup-close-button {
  padding: 10px 25px 0 0;
}

.top-map-dest-custom-icon svg.fa-map-marker-alt {
    color: var(--color-sand);
    font-size: 26px;
}

/* THE TWO-COLUMN MAGIC */
.top-map-sidebar-wrapper .top-map-column-flow {
    column-count: 2;
    column-gap: 30px;
}

/* Prevent a State Header from being separated from its list at the bottom of a column */
.top-map-sidebar-wrapper .state-group {
    break-inside: avoid;
    display: inline-block; /* Fix for older browser column rendering */
    width: 100%;
    margin-bottom: 25px;
}

.top-map-sidebar-wrapper .state-header {
    margin-bottom: 10px;
    margin-top: 0;
}

.top-map-sidebar-wrapper .dest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-map-sidebar-wrapper  .dest-list li {
    margin-bottom: 6px;
}

.top-map-sidebar-wrapper .dest-item {
  position: relative;
  padding-left: 18px; /* Space for the icon */
  margin-bottom: 6px;
  line-height: 1.3;
}

.top-map-sidebar-wrapper .dest-item:before {
  content: "\f3c5"; /* Unicode for fa-map-marker-alt */
  font-family: "Font Awesome 5 Free"; /* Ensure this matches your FA version */
  font-weight: 900; /* Required for solid icons */
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 14px;
  color: var(--color-sand);
}

.top-map-dest-sidebar-link {
    text-decoration: none;
    font-size: 16px;
    display: block;
    line-height: 1.3;
}

.top-map-dest-sidebar-link:hover {
  text-decoration: underline;
}

/* Tab Styles */
.top-map-region-toggle {
  display: flex;
  margin: 15px 0;
  border: 1px solid var(--color-light-green);
  border-radius: 30px;
  overflow: hidden;
  padding:10px;
  background-color: #F4F6F1;
}

.top-map-sidebar-wrapper .region-tab {text-transform: uppercase;border-radius:16px;}
.top-map-sidebar-wrapper .region-tab:focus {
  outline: none !important;
  box-shadow: none !important;  
}
.top-map-sidebar-wrapper .region-tab.active { background: var(--color-sand) !important; color: #fff !important; }
.top-map-sidebar-wrapper .region-tab:not(.active) { background: none !important; color: var(--color-dark-green) !important; }

.all-dest .top-map-region-toggle {
  max-width:60%;
  margin-right:auto;
  margin-left:auto;
}

.top-map-sidebar-wrapper.all-dest .top-map-column-flow {
  column-count: 3;
}


/* Responsive: Drop to 1 column on smaller screens */
@media (max-width: 768px) {

    .all-dest .top-map-region-toggle {
      max-width:100%;
      margin-right:auto;
      margin-left:auto;
    }  

    .top-map-sidebar-wrapper  .top-map-column-flow,
    .top-map-sidebar-wrapper.all-dest .top-map-column-flow { column-count: 1; }
}




/* CSS for Custom Quote Form */
.qf-container {
    margin: 0;
    background: #ecf0e6;
    padding: 30px;
    border-radius: 12px;
}

.qf-group input,
.qf-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-sizing: border-box; /* Ensures padding doesn't add to the width/height */
    font-size: 16px;
    line-height: 1.5; /* Uniform text height */
    height: 48px; /* Force a specific height for perfect alignment */
}

.qf-group textarea {
  border-radius: 12px;
}

.qf-group input,
.qf-group input,
.qf-group select,
.qf-group textarea {
  background:#fff;
}

/* Specific fix for select elements in some browsers */
.qf-group select {
    display: block;
    appearance: none;
    -webkit-appearance: none;
}    

/* Container and Layout */
.qf-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.qf-group {
    flex: 1; /* Ensures 50/50 split */
}

/* Input Styling */
.qf-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Critical for width calculation */
    font-size: 16px;
}

.qf-group input:focus {
    background:#fff;
    outline: none;
    border-color: #0073aa; /* Standard WordPress Blue */
}

/* Headings */

.qf-section {
  /*border-bottom: 1px solid var(--color-light-green);*/
  padding:15px 0;
  /*margin-bottom:15px;*/
}

.qf-section-first {
  padding-top:0;
}

.qf-main-heading {
    margin: 5px 0 20px;
}

.qf-subheading {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
    font-weight: normal;
}

/* Button */
.qf-btn-submit {
    padding: 12px 25px;
    background-color: var(--color-sand);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    font-size: 1rem;
}

.qf-btn-submit:hover {
    background-color: var(--color-hover);
}

.qf-radio-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.qf-radio-group input[type="radio"] {
    width: auto; /* Overrides the 100% width from general input styling */
    margin: 0;
    cursor: pointer;
}

.qf-radio-group label {
    cursor: pointer;
    font-size: 16px;
}

.qf-custom-select-wrapper {
    position: relative;
}

.qf-dropdown-trigger {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #fff;
    cursor: pointer;
    font-size: 16px;
    color: #757575; /* Placeholder color */
}

.qf-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.qf-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qf-options-list li {
    padding: 10px 15px;
    cursor: pointer;
}

.qf-options-list li:hover {
    background-color: #f5f5f5;
}

.qf-region-heading {
    background: #eee;
    font-weight: bold;
    cursor: default !important;
}

.qf-destination-option {
    padding-left: 30px !important;
}

.qf-label-text {
    margin: 10px 0 15px 0;
    font-weight: 600;
    color: #333;
    font-size:18px;
}

#qf_date_range {
    cursor: pointer;
    background-color: #fff;
}

.qf-row-dates {
    justify-content: space-between; /* Pushes the 70% and 25% to the edges */
    gap: 0; /* We handle the gap via width percentages for precision */
}

.qf-row-trips {
    justify-content: space-between;
    gap: 0;
}

.qf-col-70 {
    flex: none;
    width: 70%;
}

.qf-col-50 {
    flex: none;
    width: 48%;
}

.qf-col-25 {
    flex: none;
    width: 25%;
}

.qf-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px; /* Space between input and checkbox */
}

.qf-checkbox-group input[type="checkbox"] {
    width: 18px !important; /* Overrides the 100% width */
    height: 18px !important; /* Overrides the 48px height */
    margin: 0;
    cursor: pointer;
}

.qf-checkbox-group label {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    user-select: none;
}

#qf_lodging_type:invalid, 
#qf_lodging_option:invalid,
#qf_preferred_course:invalid {
    color: #757575;
}

#qf_preferred_course option {
    color: #333; /* Ensures actual options are dark even if placeholder is light */
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .qf-row {
        flex-direction: column;
        gap: 15px;
    }

    .qf-col-70, .qf-col-50, .qf-col-25 {
        width: 100%;
    }

    #qf_rounds_count {
        height: 48px;
        color: #333;
    }    

}


/* Temp CSS - Hide Chat References */

.dest-tbl-cont > .wp-block-group {
  padding-bottom:var(--wp--preset--spacing--30)!important; /* Disable chat button temporarirly */
}

.dest-tbl-cont-green {
  display:none; /* Disable chat button in dest page */
}

.chat-btn-vend {
  display:none!important; /* Disable chat button in vendor pages */
}


/* Sticky Search Bar Overlapping Fixex */
#dest-search-input,
.leaflet-container {
  z-index: 0!important;
}


/* ==========================================================================
   STICKY SEARCH BAR LAYOUT
   ========================================================================== */
@media (min-width: 993px) {
/* 1. Pinned Sticky State */
  .hero-search-bar-wrapper.gz-sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      max-width:100%;
      z-index: 99999; /* Keeps it above theme headers, navigation, and page elements */
      background-color: #ffffff; /* Prevents underlying text from bleeding through */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Adds a shadow to separate it from the page */
      padding: 10px 0; /* Tightens vertical spacing */
      transition: all 0.3s ease;
      animation: stickySlideDown 0.25s ease-out; /* Smooth entry animation */
  }

  /* Optional Entrance Animation */
  @keyframes stickySlideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
  }

  .gz-sticky-placeholder {
      display: none;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
  }

  /* 2. Visual Compacting (Shrinking elements when sticky) */
  .hero-search-bar-wrapper.gz-sticky .custom-search-form {
      max-width: 1200px; /* Aligns with your main site container width */
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 0 20px;
  }

  /* 3. Managing Dropdown Panels in Sticky Mode */
  .hero-search-bar-wrapper.gz-sticky .custom-dropdown-panel {
      position: absolute;
      top: 100%; /* Forces panels to deploy cleanly directly below the shrunken bar */
      left: 0;
      width: 100%;
      min-width: 280px;
      background: #ffffff;
      
      /* 
        CRITICAL PERFORMANCE FIX: 
        Prevents long dropdowns from extending past the bottom of the visible screen 
      */
      max-height: calc(100vh - 80px); 
      overflow-y: auto;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  /* Adjust Flatpickr position context when attached to a fixed parent */
  .hero-search-bar-wrapper.gz-sticky .flatpickr-calendar {
      z-index: 10000 !important; /* Forces the calendar frame above the fixed wrapper wrapper */
  }
}


/* Breadcrumbs CSS */
.gz-custom-breadcrumbs {
  margin:2rem 0;
}
.gz-custom-breadcrumbs br {
  display:none;
}

.gz-custom-breadcrumbs li.breadcrumb-item {
  margin-right:5px;
}

.gz-custom-breadcrumbs li.breadcrumb-item,
.gz-custom-breadcrumbs li.breadcrumb-item a {
  color:var(--color-sand);
  font-size:1rem;
  text-decoration: none;
}