/* =====================================================
   Surmount Trek Location Sync
   - Keeps your booking UI structure & itinerary UI classes
   - Only adds NEW styles for Men/Women selector + tabs
   ===================================================== */

/* --------- Booking box: Men/Women (2x2) --------- */
.sa-book-box--v2 .sa-mw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.sa-book-box--v2 .sa-mw-item{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
}

.sa-book-box--v2 .sa-mw-head{
  font-size:12px;
  font-weight:600;
  color:#111827;
  margin-bottom:8px;
}

.sa-book-box--v2 .sa-qty-wrap--mw{
  display:flex;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#ffffff;
}

.sa-book-box--v2 .sa-qty-wrap--mw .sa-qty-btn{
  width:42px;
  height:42px;
  border:none;
  background:#f3f4f6;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
}

.sa-book-box--v2 .sa-qty-wrap--mw .sa-mw-input{
  width:100%;
  height:42px;
  border:none;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:#111827;
  outline:none;
  background:#ffffff;
}

/* Remove spinners */
.sa-book-box--v2 input[type=number]::-webkit-outer-spin-button,
.sa-book-box--v2 input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sa-book-box--v2 input[type=number]{ -moz-appearance:textfield; }

.sa-book-box--v2 .sa-mw-note{
  margin-top:10px;
  font-size:12px;
  color:#374151;
}

/* --------- Booking box: Travellers (single stepper) --------- */
.sa-book-box--v2 .sa-qty-wrap--travellers{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
  max-width:360px;
}

.sa-book-box--v2 .sa-qty-wrap--travellers .sa-qty-btn{
  width:44px;
  height:44px;
  border:none;
  background:#f3f4f6;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}

.sa-book-box--v2 .sa-qty-wrap--travellers .sa-travellers-input{
  flex:1;
  height:44px;
  border:none;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#111827;
  outline:none;
  background:#ffffff;
}

/* Subtle bump animation on +/- */
@keyframes sa_stepper_bump{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.04); }
  100%{ transform:scale(1); }
}

.sa-book-box--v2 .sa-qty-wrap--travellers.is-bump{
  animation: sa_stepper_bump 0.22s ease-out;
}

.sa-book-box--v2 .sa-travellers-total.is-bump{
  display:inline-block;
  animation: sa_stepper_bump 0.22s ease-out;
}

/* Mobile */
@media (max-width:640px){
  .sa-book-box--v2 .sa-mw-grid{ grid-template-columns:1fr; }
}

/* --------- Policy line (match your existing intent) --------- */
.sa-book-box--v2 .sa-book-policy{
  margin-top:8px;
  font-size:11px;
  text-align:center;
  color:#4B5563;
}
.sa-book-box--v2 .sa-book-policy a{
  color:#ff7a1a;
  font-weight:400;
  text-decoration:underline;
}

/* --------- Itinerary tabs above itinerary --------- */
.sa-it-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 6px;
}

.sa-it-tab{
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.sa-it-tab.is-active{
  background:#111827;
  color:#ffffff;
  border-color:#111827;
}

/* ===================== CSS (Desktop + Mobile) ===================== */

/* ---------- Base ---------- */
.ti-wrap{
  margin:30px 0;
  border-top:1px solid #ddd;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.ti-day{
  display:flex;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid #eee;
}

/* Left badge */
.ti-left{
  width:90px;
  text-align:center;
  flex:0 0 90px;
}
.ti-circle{
  width:54px;
  height:54px;
  line-height:54px;
  margin:0 auto;
  border-radius:999px;
  background:rgba(248,165,45,.12);
  color:#F8A52D;
  font-size:20px;
  font-weight:700;
}
.ti-label{
  margin-top:6px;
  font-size:12px;
  color:#6B7280;
  letter-spacing:.12em;
}

/* =====================================================
   Inclusion / Exclusion (content only)
   - Keeps your original list-marker UI (✔ / ✘)
   ===================================================== */

.sa-inex{ margin:20px 0; }

.sa-inex__grid{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:26px;
  align-items:start;
}

.sa-inex__divider{
  width:1px;
  background:#e5e7eb;
  height:100%;
}

@media (max-width:768px){
  .sa-inex__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .sa-inex__divider{ display:none; }
}

/* Inclusions List - Green Checkmark */
.inclusions-list{ list-style:none; padding:0; margin:0; }
.inclusions-list li{ position:relative; padding-left:28px; margin-bottom:8px; }
.inclusions-list li::before{
  content:"✔";
  color:#008000;
  font-weight:700;
  position:absolute;
  left:0;
  top:0;
}

/* Exclusions List - Red Cross */
.exclusions-list{ list-style:none; padding:0; margin:0; }
.exclusions-list li{ position:relative; padding-left:28px; margin-bottom:8px; }
.exclusions-list li::before{
  content:"✘";
  color:#c0392b;
  font-weight:700;
  position:absolute;
  left:0;
  top:0;
}

/* Right content */
.ti-right{ flex:1; }
.ti-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:600;
  color:#111827;
}

/* Accordion */
.ti-accordion{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  width:100%;
}
.ti-toggle{
  width:100%;
  padding:12px 14px;
  background:#f5f5f5;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  text-align:left;
}
.ti-content{
  padding:14px;
  background:#ffffff;
  font-size:14px;
  line-height:1.65;
  color:#111827;
}

/* Remove focus glow (as you prefer) */
.ti-toggle:focus,
.ti-toggle:active{
  outline:none !important;
  box-shadow:none !important;
}

/* Bullet styling inside itinerary content */
.ti-content ul{
  padding-left:18px;
  margin:10px 0;
}

.ti-content ul li{
  list-style:disc;
  margin-bottom:6px;
}
/* Justified text inside View Details */
.ti-content{
  text-align:justify;
}
/* =========================================================
   SA FIX: TRUE 2x2 on mobile + remove gap near "+"
   Paste this at the VERY END of your CSS
   ========================================================= */

/* 1) Booking grid must stay 2 columns on mobile */
.sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:14px !important;
}

/* Travellers row spans both columns */
.sa-book-box.sa-book-box--v2 .sa-book-field.sa-book-field-full{
  grid-column:1 / -1 !important;
}

/* Men/Women must stay 2 columns on mobile */
.sa-book-box.sa-book-box--v2 .sa-mw-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
}

/* Kill any old “stack to 1 column” rules */
@media (max-width: 640px){
  .sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  .sa-book-box.sa-book-box--v2 .sa-mw-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}
@media (max-width: 420px){
  .sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  .sa-book-box.sa-book-box--v2 .sa-mw-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}

/* 2) Fix the “extra white space after +” in qty control */
.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  overflow:hidden !important;
}

.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw .sa-qty-btn{
  flex:0 0 42px !important;
  width:42px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
}

.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw .sa-mw-input{
  flex:1 1 0% !important;
  width:1% !important;          /* important: avoids phantom space in flex */
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}


/* --------- Location cards (replace old tabs) --------- */

/* --------- Location Cards (replace old tabs) --------- */
.sa-loc-cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin:14px 0 10px !important;
  align-items:stretch !important;
}

.sa-loc-card{
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  border-radius:16px !important;
  padding:14px !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px rgba(17,24,39,.06) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  overflow:hidden !important;
  text-align:center !important;
}

.sa-loc-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgba(17,24,39,.10) !important;
}

.sa-loc-card.is-active{
  border:2px solid #22c55e !important;
  box-shadow:0 16px 34px rgba(34,197,94,.18) !important;
}

.sa-loc-card__img{
  width:100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#f3f4f6 !important;
  margin:0 0 12px !important;
}

.sa-loc-card__img img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

.sa-loc-card__title{
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:#0f172a !important;
  margin:2px 0 10px !important;
}

.sa-loc-card__meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:14px !important;
  color:#111827 !important;
  margin-top:6px !important;
}

.sa-loc-card__price{
  font-weight:700 !important;
}

.sa-loc-card__duration{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
  font-weight:600 !important;
}

/* Tablet */
@media (max-width: 1024px){
  .sa-loc-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: horizontal slider */
@media (max-width: 767px){
  .sa-loc-cards{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:14px !important;
    padding:6px 2px 12px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .sa-loc-cards::-webkit-scrollbar{ height:8px; }
  .sa-loc-cards::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; }

  .sa-loc-card{
    flex:0 0 78% !important;
    max-width:340px !important;
    scroll-snap-align:start !important;
  }
}


.inclusions-list{ list-style:none; padding:0; margin:0; }
.inclusions-list li{ position:relative; padding-left:28px; margin-bottom:8px; }
.inclusions-list li::before{
  content:"✔";
  color:#008000;
  font-weight:700;
  position:absolute;
  left:0;
  top:0;
}

/* Exclusions List - Red Cross */
.exclusions-list{ list-style:none; padding:0; margin:0; }
.exclusions-list li{ position:relative; padding-left:28px; margin-bottom:8px; }
.exclusions-list li::before{
  content:"✘";
  color:#c0392b;
  font-weight:700;
  position:absolute;
  left:0;
  top:0;
}

/* Right content */
.ti-right{ flex:1; }
.ti-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:600;
  color:#111827;
}

/* Accordion */
.ti-accordion{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  width:100%;
}
.ti-toggle{
  width:100%;
  padding:12px 14px;
  background:#f5f5f5;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  text-align:left;
}
.ti-content{
  padding:14px;
  background:#ffffff;
  font-size:14px;
  line-height:1.65;
  color:#111827;
}

/* Remove focus glow (as you prefer) */
.ti-toggle:focus,
.ti-toggle:active{
  outline:none !important;
  box-shadow:none !important;
}

/* ---------- MOBILE: header row (day badge + title + icon). Tap header to expand. ---------- */

/* Hide the mobile toggle by default (desktop keeps your original View Details button). */
.ti-mtoggle{ display:none; }

@media (max-width:640px){
  /* On mobile: the header itself toggles the content; remove the separate "View Details" button. */
  .ti-dtoggle{ display:none !important; }
  .ti-mtoggle{ display:block !important; }

  /* Keep list spacing clean */
  .ti-day{ gap:0 !important; padding:16px 0 !important; }

  /* Keep the original day badge + title hidden on mobile (header contains them) */
  .ti-left{ display:none !important; }
  .ti-title{ display:none !important; }

  /* Mobile header layout */
  .ti-mtoggle{ padding:0 !important; background:transparent !important; }
  .ti-mhead{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px;
    background:#f5f5f5;
  }

  .ti-mday{
    width:64px;
    flex:0 0 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .ti-mnum{
    width:46px;
    height:46px;
    line-height:46px;
    border-radius:999px;
    background:rgba(248,165,45,.12);
    color:#F8A52D;
    font-size:18px;
    font-weight:700;
    text-align:center;
  }

  .ti-mlabel{
    margin-top:4px;
    font-size:11px;
    letter-spacing:.12em;
    color:#6B7280;
    text-transform:uppercase;
  }

  .ti-mtitle{
    flex:1;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    color:#111827;
  }

  .ti-micon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111827;
    opacity:.9;
  }

  /* Content spacing */
  .ti-content{ padding:12px !important; font-size:13px !important; }

  /* Active/open state */
  .ti-mtoggle[aria-expanded="true"] .ti-mhead,
  .ti-mtoggle:hover .ti-mhead{
    background:#F89C30;
  }
  .ti-mtoggle[aria-expanded="true"] .ti-mtitle,
  .ti-mtoggle[aria-expanded="true"] .ti-micon,
  .ti-mtoggle[aria-expanded="true"] .ti-mlabel,
  .ti-mtoggle:hover .ti-mtitle,
  .ti-mtoggle:hover .ti-micon,
  .ti-mtoggle:hover .ti-mlabel{
    color:#ffffff;
  }
  .ti-mtoggle[aria-expanded="true"] .ti-mnum,
  .ti-mtoggle:hover .ti-mnum{
    background:rgba(255,255,255,.22);
    color:#ffffff;
  }
}
/* Bullet styling inside itinerary content */
.ti-content ul{
  padding-left:18px;
  margin:10px 0;
}

.ti-content ul li{
  list-style:disc;
  margin-bottom:6px;
}
/* Justified text inside View Details */
.ti-content{
  text-align:justify;
}
/* =========================================================
   SA FIX: TRUE 2x2 on mobile + remove gap near "+"
   Paste this at the VERY END of your CSS
   ========================================================= */

/* 1) Booking grid must stay 2 columns on mobile */
.sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:14px !important;
}

/* Travellers row spans both columns */
.sa-book-box.sa-book-box--v2 .sa-book-field.sa-book-field-full{
  grid-column:1 / -1 !important;
}

/* Men/Women must stay 2 columns on mobile */
.sa-book-box.sa-book-box--v2 .sa-mw-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
}

/* Kill any old “stack to 1 column” rules */
@media (max-width: 640px){
  .sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  .sa-book-box.sa-book-box--v2 .sa-mw-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}
@media (max-width: 420px){
  .sa-book-box.sa-book-box--v2 form.sa-book-form .sa-book-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  .sa-book-box.sa-book-box--v2 .sa-mw-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}

/* 2) Fix the “extra white space after +” in qty control */
.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  overflow:hidden !important;
}

.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw .sa-qty-btn{
  flex:0 0 42px !important;
  width:42px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
}

.sa-book-box.sa-book-box--v2 .sa-qty-wrap.sa-qty-wrap--mw .sa-mw-input{
  flex:1 1 0% !important;
  width:1% !important;          /* important: avoids phantom space in flex */
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* Mobile arrow (down/up) */
.ti-micon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.ti-micon .ti-arrow{
  display:block;
  transition: transform .25s ease;
  transform: rotate(0deg);
}

/* When accordion is open (JS adds .is-open on .ti-micon) */
.ti-micon.is-open .ti-arrow{
  transform: rotate(180deg);
}

@media (max-width: 767px){
  .ti-micon .ti-arrow{
    width:20px;
    height:20px;
  }
}