/* =========================================================
   Covai Glide - International Tour Packages Page
   File: international.css
   Use this after style.css
   ========================================================= */

/* ---------- Breadcrumb ---------- */

.cg-breadcrumb-wrap{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:12px 0;
}

.cg-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
}

.cg-breadcrumb a{
  color:#444;
  text-decoration:none;
  font-weight:600;
}

.cg-breadcrumb a:hover{
  color:var(--primary-yellow);
}

.cg-breadcrumb span{
  color:#777;
}

.intl-enquiry-anchor{
  scroll-margin-top:120px;
}


/* ---------- International enquiry form ---------- */

.intl-smart-form{
  max-width:650px;
  padding:14px 16px;
  margin:18px auto;
  border:1.5px solid var(--primary-yellow);
  border-radius:14px;
}

.intl-smart-form .form-title{
  font-size:1.25rem;
  margin-bottom:2px;
}

.intl-smart-form .whatsapp-subtitle{
  font-size:12px;
  line-height:1.4;
  margin-bottom:12px;
}

.intl-smart-form .form-group{
  margin-bottom:8px;
}

.intl-smart-form .form-label{
  font-size:12px;
  margin-bottom:3px;
}

.intl-smart-form .submit-btn{
  padding:10px 16px;
  font-size:14px;
  border-radius:9px;
}


/* ---------- Step heading ---------- */

.intl-mini-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:#111;
}

.intl-mini-title span{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary-yellow);
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}


/* ---------- Destination rows ---------- */

.destination-rows{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.destination-row{
  display:grid;
  grid-template-columns:1fr 95px 26px;
  gap:6px;
  align-items:center;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:6px;
  transition:.25s ease;
}

.destination-row:focus-within{
  border-color:var(--primary-yellow);
  box-shadow:0 0 0 .16rem rgba(230,172,0,.16);
}

.destination-select-wrap,
.night-select-wrap{
  position:relative;
}

.destination-select-wrap i,
.night-select-wrap i{
  position:absolute;
  left:9px;
  top:50%;
  transform:translateY(-50%);
  color:#777;
  pointer-events:none;
  font-size:11px;
}

.destination-select,
.night-select{
  width:100%;
  height:34px;
  border:1px solid #ddd;
  border-radius:7px;
  background:#fff;
  padding:0 8px 0 28px;
  font-size:13px;
  font-weight:600;
  color:#222;
  outline:none;
}

.destination-select:focus,
.night-select:focus{
  border-color:var(--primary-yellow);
}

.remove-destination-btn{
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:#f2f2f2;
  color:#555;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:.2s ease;
}

.remove-destination-btn:hover{
  background:#111;
  color:#fff;
}

.add-destination-btn{
  margin-top:6px;
  border:0;
  background:transparent;
  color:#0077cc;
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 0;
}

.add-destination-btn:hover{
  color:#111;
}


/* ---------- Tiny nights/days summary ---------- */
/* Works for both new .trip-summary-mini and old .trip-total-box HTML */

.trip-summary-mini,
.trip-total-box{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:4px 0 10px;
}

.trip-summary-mini div,
.trip-total-box div{
  min-width:64px;
  height:34px;
  background:#fff7dc;
  border:1px solid #f1d06a;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px 8px;
}

.trip-summary-mini span,
.trip-total-box span{
  color:#555;
  font-size:11px;
  font-weight:700;
}

.trip-summary-mini b,
.trip-total-box strong{
  color:#111;
  font-size:15px;
  line-height:1;
}


/* ---------- Date input ---------- */

.date-click-box{
  position:relative;
  cursor:pointer;
}

.date-click-box i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:#777;
  pointer-events:none;
}

.date-click-box input{
  height:36px;
  padding-left:38px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
}


/* ---------- Plus / minus counters ---------- */
/* Works for both .mini-counter and old .counter-box HTML */

.mini-counter,
.counter-box{
  width:100%;
  height:36px;
  display:grid;
  grid-template-columns:34px 1fr 34px;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.mini-counter button,
.counter-box button{
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:#f4f4f4;
  color:#111;
  font-size:17px;
  font-weight:900;
  line-height:1;
  padding:0;
  transition:.2s ease;
}

.mini-counter button:hover,
.counter-box button:hover{
  background:var(--primary-yellow);
  color:#111;
}

.mini-counter input,
.counter-box input{
  width:100%;
  min-height:34px;
  border:0;
  background:#fff;
  color:#111;
  text-align:center;
  font-size:14px;
  font-weight:700;
  padding:0;
}


/* ---------- Child age section ---------- */

.child-age-section{
  background:#fff;
  border:1.5px dashed var(--primary-yellow);
  border-radius:10px;
  padding:10px;
  margin-top:8px;
}

.child-note,
.intl-form-small-note{
  font-size:12px;
  color:#666;
  margin-bottom:8px;
}

.child-age-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:7px;
}

.child-age-item{
  background:#f8f9fa;
  border-radius:10px;
  padding:7px;
}

.child-age-item label{
  display:block;
  margin-bottom:5px;
  font-size:12px;
  font-weight:700;
}


/* ---------- Preview ---------- */

.preview-box{
  background:#fff9e6;
  border-left:4px solid var(--primary-yellow);
  border-radius:12px;
  padding:12px;
  margin-top:12px;
}

.preview-box h3{
  font-size:17px;
  font-weight:700;
  margin-bottom:8px;
}

.preview-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:6px 0;
  font-size:13px;
}

.preview-line:last-child{
  border-bottom:0;
}

.preview-line span:first-child{
  font-weight:700;
  color:#333;
}

.preview-line span:last-child{
  text-align:right;
  color:#555;
}

.back-btn{
  background:#111;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px;
  font-size:14px;
  font-weight:700;
}

.back-btn:hover{
  background:#333;
}


/* ---------- Region hub cards ---------- */

.intl-region-strip{
  background:#fff;
  padding:2rem 0;
}

.intl-region-card{
  height:100%;
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
  border:2px solid transparent;
  text-decoration:none;
  color:var(--black);
  display:block;
  transition:.3s ease;
}

.intl-region-card:hover{
  transform:translateY(-8px);
  border-color:var(--primary-yellow);
  color:var(--black);
}

.intl-region-card i{
  font-size:34px;
  color:var(--primary-yellow);
  margin-bottom:12px;
}

.intl-region-card h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
}

.intl-region-card p{
  color:#666;
  margin-bottom:0;
  font-size:14px;
}


/* ---------- Search and filters ---------- */

.intl-filter-section{
  background:var(--light-gray);
  padding:3rem 0;
}

.intl-search-box{
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:28px;
}

.intl-filter-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:16px;
}

.intl-filter-btn{
  border:2px solid var(--primary-yellow);
  background:#fff;
  color:#111;
  padding:8px 18px;
  border-radius:30px;
  font-weight:700;
  transition:.25s ease;
}

.intl-filter-btn.active,
.intl-filter-btn:hover{
  background:var(--primary-yellow);
  color:#000;
}


/* ---------- Destination cards ---------- */

.intl-destination-card{
  height:100%;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:#111;
  display:block;
  transition:.3s ease;
  border:2px solid transparent;
}

.intl-destination-card:hover{
  color:#111;
  transform:translateY(-8px);
  border-color:var(--primary-yellow);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}

.intl-destination-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.intl-card-body{
  padding:18px;
}

.intl-card-body small{
  display:inline-block;
  background:#fff4cc;
  color:#111;
  border-radius:20px;
  padding:4px 10px;
  font-weight:700;
  margin-bottom:10px;
}

.intl-card-body h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
}

.intl-card-body p{
  color:#666;
  font-size:14px;
  margin-bottom:14px;
}

.intl-card-body b{
  color:var(--primary-yellow);
}

.no-result{
  display:none;
  text-align:center;
  background:#fff;
  padding:28px;
  border-radius:16px;
  box-shadow:var(--shadow);
  font-weight:700;
}


/* ---------- SEO content and FAQ ---------- */

.intl-seo-block{
  background:#fff;
  padding:4rem 0;
}

.intl-seo-block h2{
  font-weight:700;
  margin-bottom:18px;
}

.intl-seo-block p{
  color:#555;
  font-size:1.03rem;
}

.intl-keyword-box{
  background:#fff9e6;
  border-left:5px solid var(--primary-yellow);
  padding:18px;
  border-radius:12px;
  margin-top:20px;
}

.intl-faq-section{
  background:var(--light-gray);
  padding:4rem 0;
}


/* ---------- Responsive ---------- */

@media(max-width:768px){

  .hero h1{
    font-size:2rem;
  }

  .hero-stats{
    margin-top:1.5rem;
  }

  .intl-smart-form{
    max-width:95%;
    padding:12px;
    margin:14px auto;
  }

  .intl-smart-form .form-title{
    font-size:1.18rem;
  }

  .intl-smart-form .whatsapp-subtitle{
    font-size:12px;
  }

  .destination-row{
    grid-template-columns:1fr 88px 24px;
    gap:5px;
    padding:5px;
  }

  .destination-select,
  .night-select{
    height:32px;
    padding-left:25px;
    font-size:12px;
  }

  .destination-select-wrap i,
  .night-select-wrap i{
    left:8px;
    font-size:10px;
  }

  .remove-destination-btn{
    width:24px;
    height:24px;
  }

  .trip-summary-mini,
  .trip-total-box{
    justify-content:flex-start;
  }

  .trip-summary-mini div,
  .trip-total-box div{
    min-width:58px;
    height:30px;
  }

  .trip-summary-mini span,
  .trip-total-box span{
    font-size:10px;
  }

  .trip-summary-mini b,
  .trip-total-box strong{
    font-size:14px;
  }

  .mini-counter,
  .counter-box{
    height:34px;
    grid-template-columns:32px 1fr 32px;
  }

  .intl-smart-form .submit-btn{
    padding:10px 14px;
    font-size:14px;
  }

  /* ===== CHILD AGE COMPACT 3 IN A ROW ===== */

  .child-age-section{
    padding:10px;
    border-radius:10px;
    border:1px dashed var(--primary-yellow);
  }

  .child-age-section .intl-mini-title{
    margin-bottom:6px;
  }

  .child-note{
    font-size:11px;
    margin-bottom:8px;
  }

  .child-age-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
  }

  .child-age-item{
    background:#f8f9fa;
    border-radius:8px;
    padding:7px;
  }

  .child-age-item label{
    font-size:11px;
    font-weight:700;
    margin-bottom:4px;
    display:block;
  }

  .child-age-item .counter-box,
  .child-age-item .mini-counter{
    height:30px;
    grid-template-columns:28px 1fr 28px;
    border-radius:7px;
  }

  .child-age-item .counter-box input,
  .child-age-item .mini-counter input{
    min-height:28px;
    font-size:13px;
  }

  .child-age-item .counter-box button,
  .child-age-item .mini-counter button{
    font-size:15px;
  }

  /* Mobile: still keep 3 in a row */
  @media(max-width:768px){
    .child-age-grid{
      grid-template-columns:repeat(3, 1fr);
      gap:6px;
    }

    .child-age-item{
      padding:6px;
    }

    .child-age-item label{
      font-size:10px;
    }

    .child-age-item .counter-box,
    .child-age-item .mini-counter{
      height:28px;
      grid-template-columns:24px 1fr 24px;
    }
  }

  .preview-line{
    flex-direction:column;
    gap:2px;
  }

  .preview-line span:last-child{
    text-align:left;
  }

  .intl-destination-card img{
    height:170px;
  }

  .intl-search-box{
    padding:16px;
  }

  .intl-filter-btn{
    padding:7px 13px;
    font-size:13px;
  }
}
.night-select{
  padding:0 8px;
  text-align:left;
}
/* ===== FINAL COUNTER BORDER FIX - PASTE AT END ===== */

.mini-counter,
.counter-box{
  width:100% !important;
  height:34px !important;
  display:grid !important;
  grid-template-columns:32px 1fr 32px !important;
  background:#fff !important;
  border-radius:8px !important;
  overflow:hidden !important;
  border:1px solid #d8d8d8 !important;
  box-shadow:none !important;
}

.mini-counter button,
.counter-box button{
  height:100% !important;
  min-height:34px !important;
  border:0 !important;
  background:#f5f5f5 !important;
  color:#111 !important;
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:0 !important;
}

.mini-counter button:hover,
.counter-box button:hover{
  background:var(--primary-yellow) !important;
  color:#111 !important;
}

.mini-counter input,
.counter-box input{
  width:100% !important;
  height:34px !important;
  min-height:34px !important;
  border:0 !important;
  border-left:1px solid #e1e1e1 !important;
  border-right:1px solid #e1e1e1 !important;
  background:#fff !important;
  text-align:center !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding:0 !important;
  margin:0 !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Hide number input arrows */
.mini-counter input::-webkit-outer-spin-button,
.mini-counter input::-webkit-inner-spin-button,
.counter-box input::-webkit-outer-spin-button,
.counter-box input::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  margin:0 !important;
}

.mini-counter input[type=number],
.counter-box input[type=number]{
  -moz-appearance:textfield !important;
}

/* Child age counters compact */
.child-age-item .mini-counter,
.child-age-item .counter-box{
  height:28px !important;
  grid-template-columns:26px 1fr 26px !important;
  border-radius:7px !important;
}

.child-age-item .mini-counter button,
.child-age-item .counter-box button{
  min-height:28px !important;
  height:28px !important;
  font-size:14px !important;
}

.child-age-item .mini-counter input,
.child-age-item .counter-box input{
  height:28px !important;
  min-height:28px !important;
  font-size:12px !important;
}

/* Make child age 3 in a row */
.child-age-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
}

.child-age-item{
  background:#f8f9fa !important;
  border-radius:8px !important;
  padding:7px !important;
}

.child-age-item label{
  font-size:11px !important;
  font-weight:700 !important;
  margin-bottom:4px !important;
  display:block !important;
}

/* Mobile */
@media(max-width:768px){
  .child-age-grid{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:6px !important;
  }

  .child-age-item{
    padding:6px !important;
  }

  .child-age-item label{
    font-size:10px !important;
  }

  .child-age-item .mini-counter,
  .child-age-item .counter-box{
    height:26px !important;
    grid-template-columns:24px 1fr 24px !important;
  }

  .child-age-item .mini-counter button,
  .child-age-item .counter-box button{
    min-height:26px !important;
    height:26px !important;
    font-size:13px !important;
  }

  .child-age-item .mini-counter input,
  .child-age-item .counter-box input{
    height:26px !important;
    min-height:26px !important;
    font-size:12px !important;
  }
}
/* ===== MAKE DESTINATION SEARCH BAR NOTICEABLE ===== */

.intl-search-box{
  background:linear-gradient(135deg,#111,#2b2b2b) !important;
  border:2px solid var(--primary-yellow) !important;
  border-radius:16px !important;
  padding:18px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.22) !important;
  position:relative !important;
}

.intl-search-box::before{
  content:"Search Your International Destination";
  display:block !important;
  color:var(--primary-yellow) !important;
  font-size:15px !important;
  font-weight:700 !important;
  margin-bottom:10px !important;
  letter-spacing:.2px !important;
}

#destinationSearch{
  height:46px !important;
  border:2px solid var(--primary-yellow) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111 !important;
  font-size:15px !important;
  font-weight:700 !important;
  padding:0 16px 0 44px !important;
  box-shadow:0 0 0 4px rgba(230,172,0,.18) !important;
  background-image:linear-gradient(transparent,transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e6ac00' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:17px !important;
  background-position:16px center !important;
}

#destinationSearch::placeholder{
  color:#555 !important;
  font-weight:600 !important;
}

#destinationSearch:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 4px rgba(230,172,0,.45), 0 8px 24px rgba(0,0,0,.2) !important;
  outline:none !important;
}

.intl-filter-buttons{
  margin-top:14px !important;
}

.intl-filter-btn{
  background:#fff !important;
  color:#111 !important;
  border:1px solid var(--primary-yellow) !important;
  font-size:13px !important;
  padding:7px 14px !important;
}

.intl-filter-btn.active,
.intl-filter-btn:hover{
  background:var(--primary-yellow) !important;
  color:#111 !important;
}

/* Mobile */
@media(max-width:768px){
  .intl-search-box{
    padding:14px !important;
    border-radius:14px !important;
  }

  .intl-search-box::before{
    font-size:13px !important;
    margin-bottom:8px !important;
  }

  #destinationSearch{
    height:42px !important;
    font-size:13px !important;
    padding-left:40px !important;
    background-size:15px !important;
    background-position:14px center !important;
  }

  .intl-filter-buttons{
    gap:6px !important;
  }

  .intl-filter-btn{
    font-size:12px !important;
    padding:6px 10px !important;
  }
}

/* ===== SMALL YES / NO ADDON TOGGLES ===== */

.trip-addon-row{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:8px !important;
  margin:8px 0 12px !important;
}

.trip-addon-box{
  background:#fff !important;
  border:1px solid #e2e2e2 !important;
  border-radius:10px !important;
  padding:8px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.04) !important;
}

.trip-addon-label{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#111 !important;
  margin-bottom:6px !important;
}

.trip-addon-label i{
  color:var(--primary-yellow) !important;
  font-size:13px !important;
}

.yes-no-toggle{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
}

.yes-no-toggle input{
  display:none !important;
}

.yes-no-toggle label{
  margin:0 !important;
  height:30px !important;
  border-radius:8px !important;
  border:1px solid #ddd !important;
  background:#f7f7f7 !important;
  color:#333 !important;
  font-size:12px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:.2s ease !important;
}

.yes-no-toggle input:checked + label{
  background:var(--primary-yellow) !important;
  color:#111 !important;
  border-color:var(--primary-yellow) !important;
  box-shadow:0 4px 12px rgba(230,172,0,.25) !important;
}

@media(max-width:768px){
  .trip-addon-row{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .trip-addon-box{
    padding:7px !important;
  }

  .trip-addon-label{
    font-size:11px !important;
  }

  .yes-no-toggle label{
    height:28px !important;
    font-size:11px !important;
  }
}
/* ===== HOTEL CATEGORY TOGGLE ===== */

.hotel-category-toggle{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:6px !important;
  background:#fff !important;
}

.hotel-category-toggle input{
  display:none !important;
}

.hotel-category-toggle label{
  height:36px !important;
  border:1px solid #ddd !important;
  border-radius:8px !important;
  background:#f7f7f7 !important;
  color:#111 !important;
  font-size:12px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  margin:0 !important;
  transition:.2s ease !important;
}

.hotel-category-toggle input:checked + label{
  background:var(--primary-yellow) !important;
  border-color:var(--primary-yellow) !important;
  color:#111 !important;
  box-shadow:0 4px 12px rgba(230,172,0,.25) !important;
}

@media(max-width:768px){
  .hotel-category-toggle label{
    height:32px !important;
    font-size:11px !important;
  }
}
/* ================= REGION IMAGE GRID ================= */

.intl-region-image-section{
  background:#fff;
  padding:3rem 0;
}

.intl-region-image-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.intl-region-image-card{
  position:relative;
  min-height:280px;
  border-radius:18px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  border:2px solid transparent;
  transition:.3s ease;
}

.intl-region-image-card:hover{
  transform:translateY(-8px);
  border-color:var(--primary-yellow);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  color:#fff;
}

.intl-region-image-card img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
  transition:.5s ease;
}

.intl-region-image-card:hover img{
  transform:scale(1.08);
}

.region-overlay{
  position:absolute;
  inset:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.88) 100%
  );
}

.region-overlay span{
  width:max-content;
  background:var(--primary-yellow);
  color:#111;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
}

.region-overlay h3{
  color:#fff;
  font-size:21px;
  font-weight:900;
  margin-bottom:8px;
}

.region-overlay p{
  color:#f1f1f1;
  font-size:13px;
  line-height:1.4;
  margin-bottom:10px;
}

.region-overlay b{
  color:var(--primary-yellow);
  font-size:14px;
}

/* Tablet and mobile: 2 x 2 grid */
@media(max-width:991px){
  .intl-region-image-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  .intl-region-image-card{
    min-height:230px;
    border-radius:15px;
  }

  .intl-region-image-card img{
    min-height:230px;
  }

  .region-overlay{
    padding:15px;
  }

  .region-overlay h3{
    font-size:17px;
  }

  .region-overlay p{
    font-size:12px;
  }
}

/* Small phones: still 2 x 2 but compact */
@media(max-width:480px){
  .intl-region-image-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }

  .intl-region-image-card{
    min-height:190px;
    border-radius:13px;
  }

  .intl-region-image-card img{
    min-height:190px;
  }

  .region-overlay{
    padding:11px;
  }

  .region-overlay span{
    font-size:10px;
    padding:3px 8px;
    margin-bottom:7px;
  }

  .region-overlay h3{
    font-size:14px;
    margin-bottom:5px;
  }

  .region-overlay p{
    font-size:10.5px;
    line-height:1.3;
    margin-bottom:6px;
  }

  .region-overlay b{
    font-size:11px;
  }
}
/* ===== TRAVEL INSURANCE ADDON FIX FOR MAIN HUB FORM ===== */

.trip-addon-row{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:8px !important;
  margin:8px 0 12px !important;
}

.trip-addon-box{
  background:#fff !important;
  border:1px solid #e2e2e2 !important;
  border-radius:10px !important;
  padding:8px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.04) !important;
}

.trip-addon-label{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#111 !important;
  margin-bottom:6px !important;
}

.trip-addon-label i{
  color:var(--primary-yellow) !important;
  font-size:13px !important;
}

.yes-no-toggle{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:5px !important;
}

.yes-no-toggle input{
  display:none !important;
}

.yes-no-toggle label{
  margin:0 !important;
  height:30px !important;
  border-radius:8px !important;
  border:1px solid #ddd !important;
  background:#f7f7f7 !important;
  color:#333 !important;
  font-size:12px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:.2s ease !important;
}

.yes-no-toggle input:checked + label{
  background:var(--primary-yellow) !important;
  color:#111 !important;
  border-color:var(--primary-yellow) !important;
  box-shadow:0 4px 12px rgba(230,172,0,.25) !important;
}

.intl-form-small-note{
  font-size:11px !important;
  color:#666 !important;
  margin-top:-4px !important;
  margin-bottom:8px !important;
}

@media(max-width:991px){
  .trip-addon-row{
    grid-template-columns:1fr !important;
  }
}
