:root{
  /* Adjust these to match your About Us page */
  --yt-font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --yt-text: #101828;
  --yt-muted: #667085;
  --yt-border: rgba(16,24,40,.12);

  --yt-primary: #0b5fff;
  --yt-primary-2: #0aa6ff;

  --yt-bg: #ffffff;
  --yt-card: #ffffff;

  --yt-shadow: 0 10px 30px rgba(16,24,40,.10);
  --yt-radius: 14px;
}

/* OceanWP sometimes adds spacing; keep ours consistent */
.yt-wrap{
  font-family: var(--yt-font);
  color: var(--yt-text);
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 12px 0;
}
.yt-hero-wrap{ padding-top: 6px; }

/* Breadcrumb */
.yt-breadcrumb{
  font-size: 13px;
  color: var(--yt-muted);
  margin: 0 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.yt-breadcrumb a{ color: inherit; text-decoration:none; }
.yt-breadcrumb a:hover{ text-decoration:underline; }
.yt-breadcrumb .sep{ opacity:.8; }

/* Heading row */
.yt-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.yt-title{
  margin:0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  font-weight: 800;
}
.yt-submeta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:8px;
  color: var(--yt-muted);
  font-size: 14px;
  font-weight: 600;
}
.yt-mi{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.yt-ico{
  width:auto;
  font-size: 16px;
  line-height: 1;
  opacity:.95;
}
.yt-tagline{
  margin-top:8px;
  font-size: 14px;
  color: var(--yt-muted);
  font-weight: 500;
}

/* Badge */
.yt-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--yt-border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #d92d20;
  width: fit-content;
  margin-top: 4px;
}
.yt-chip .yt-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d92d20;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12);
}

/* Gallery grid */
.yt-gallery{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.yt-g-left{
  position:relative;
  border-radius: var(--yt-radius);
  overflow:hidden;
  min-height: 320px;
  background: #f2f4f7;
  box-shadow: var(--yt-shadow);
  border:1px solid var(--yt-border);
  cursor:pointer;
}
.yt-g-right{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.yt-g-tile{
  position:relative;
  border-radius: var(--yt-radius);
  overflow:hidden;
  background: #f2f4f7;
  min-height: 154px;
  box-shadow: var(--yt-shadow);
  border:1px solid var(--yt-border);
  cursor:pointer;
}
.yt-g-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.01);
}
.yt-g-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.45));
  color:#fff;
  font-weight:400;
  font-size:14px;
  letter-spacing:.2px;
}
.yt-g-overlay span{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

/* Sticky nav */
.yt-sticky{
  position: sticky;
  top: 0;
  z-index: 50;
  margin-top: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--yt-border);
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
  border-radius: 12px;
  overflow:hidden;
}
.yt-nav{
  display:flex;
  gap: 6px;
  overflow:auto;
  padding: 10px;
  scrollbar-width: thin;
}
.yt-nav::-webkit-scrollbar{ height: 8px; }
.yt-nav::-webkit-scrollbar-thumb{ background: rgba(16,24,40,.18); border-radius: 999px; }
.yt-nav a{
  flex: 0 0 auto;
  text-decoration:none !important;
  color: var(--yt-muted);
  font-weight: 550;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: .15s ease;
  white-space: nowrap;
}
.yt-nav a:hover{
  color: var(--yt-text);
  background: #f8fafc;
  border-color: var(--yt-border);
}
.yt-nav a.is-active{
  color: #fff;
  background: linear-gradient(90deg, var(--yt-primary), var(--yt-primary-2));
  border-color: transparent;
}

/* Modal */
.yt-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 18px;
}
.yt-modal.is-open{ display:flex; }
.yt-modal-card{
  width: min(1100px, 96vw);
  max-height: 88vh;
  overflow:auto;
  background: #0b1220;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
}
.yt-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: sticky;
  top: 0;
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
}
.yt-modal-top b{ font-size: 14px; font-weight: 800; }
.yt-modal-close{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900;
  cursor:pointer;
}
.yt-modal-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}
.yt-modal-grid img{
  width:100%;
  height: 210px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}

/* Responsive */
@media (max-width: 980px){
  .yt-title{ font-size: 26px; }
  .yt-gallery{ grid-template-columns: 1fr; }
  .yt-g-left{ min-height: 260px; }
  .yt-modal-grid{ grid-template-columns: repeat(2, 1fr); }
  .yt-modal-grid img{ height: 190px; }
}
@media (max-width: 560px){
  .yt-g-right{ grid-template-columns: 1fr; }
  .yt-g-tile{ min-height: 140px; }
  .yt-modal-grid{ grid-template-columns: 1fr; }
  .yt-modal-grid img{ height: 220px; }
}

/* Center sticky nav items */
.yt-tour-packages .yt-nav{
  display: flex;
  justify-content: center;   /* ⬅️ this is the key */
  align-items: center;
  gap: 10px;
  overflow-x: auto;
}

/* Keep center on desktop, allow scroll on mobile */
@media (max-width: 1024px){
  .yt-tour-packages .yt-nav{
    justify-content: flex-start; /* better UX on small screens */
  }
}
/* =========================================================
   YT — Premium Compact (Overview + Booking)
   Scope: only tour pages
   ========================================================= */

body.yt-tour-packages .yt2-sec{ padding: 14px 0 22px; }
body.yt-tour-packages .yt2-wrap{ max-width: 1350px; margin: 0 auto; padding: 0 14px; }

/* TRUE 70/30 (tight) */
body.yt-tour-packages .yt2-grid{
  display:grid;
  grid-template-columns: minmax(0, 70fr) minmax(320px, 30fr);
  gap: 18px;
  align-items:start;
}

/* ---------- LEFT (overview) ---------- */
body.yt-tour-packages .yt2-left{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

body.yt-tour-packages .yt2-left-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.yt-tour-packages .yt2-title{
  margin:0;
  font-size: 28px;     /* was too big */
  font-weight: 700;
  letter-spacing:-0.02em;
  color:#0f172a;
}

/* Best time pill — smaller, premium */
body.yt-tour-packages .yt2-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.9);
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(15,23,42,.70);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}
body.yt-tour-packages .yt2-pill i{ font-size: 13px; opacity:.8; }
body.yt-tour-packages .yt2-pill b{ color:#0f172a; }

/* Prose — compact & clean */
body.yt-tour-packages .yt2-prose{
  color: rgba(15,23,42,.84);
  font-size: 15px;
  line-height: 1.7;
}
body.yt-tour-packages .yt2-prose p{ margin: 0 0 10px; }
body.yt-tour-packages .yt2-prose h2,
body.yt-tour-packages .yt2-prose h3,
body.yt-tour-packages .yt2-prose h4{
  margin: 14px 0 8px;
  font-size: 18px;
  font-weight: 600;
  color:#0f172a;
}
body.yt-tour-packages .yt2-prose ul{ padding-left: 18px; margin: 10px 0 0; }
body.yt-tour-packages .yt2-prose li{ margin: 7px 0; }

/* Facts strip — make it “thin cards”, not big blocks */
body.yt-tour-packages .yt2-facts{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
body.yt-tour-packages .yt2-fact{
  border:1px solid rgba(15,23,42,.10);
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
}
body.yt-tour-packages .yt2-fact-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.75);
}
body.yt-tour-packages .yt2-fact-ico i{ font-size: 14px; }
body.yt-tour-packages .yt2-fact-k{
  margin:0;
  font-size: 11px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  font-weight: 600;
}
body.yt-tour-packages .yt2-fact-v{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color:#0f172a;
  line-height: 1.2;
}

/* ---------- RIGHT (booking) ---------- */
body.yt-tour-packages .yt2-card{
  position: sticky;
  top: 16px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}

/* Price area — make it compact like premium checkout widgets */
body.yt-tour-packages .yt2-price{
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  padding: 12px;
  margin-bottom: 10px;
}

body.yt-tour-packages .yt2-price-label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(15,23,42,.55);
}

body.yt-tour-packages .yt2-price-row{
  display:flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
body.yt-tour-packages .yt2-price-now{
  font-size: 24px;          /* was too big */
  font-weight: 650;
  letter-spacing:-0.02em;
  color:#0f172a;
}
body.yt-tour-packages .yt2-price-old{
  font-size: 12px;
  font-weight: 400;
  color: rgba(15,23,42,.35);
  text-decoration: line-through;
}
body.yt-tour-packages .yt2-save{
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.30);
  color: #065f46;
  font-weight: 450;
  font-size: 10px;
}

/* Labels smaller, tighter */
body.yt-tour-packages .yt2-field{ margin: 10px 0; }
body.yt-tour-packages .yt2-label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  color:#0f172a;
  margin-bottom: 6px;
}
body.yt-tour-packages .yt2-label i{
  font-size: 14px;
  color: rgba(15,23,42,.55);
}

/* Select — cleaner, no chunky look */
body.yt-tour-packages .yt2-select{
  width:100%;
  height: 46px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color:#0f172a;
  outline:none;
}
body.yt-tour-packages .yt2-select:focus{
  border-color: rgba(22,119,255,.55);
  box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}

body.yt-tour-packages .yt2-help{
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(15,23,42,.55);
}

/* Guests — compact */
body.yt-tour-packages .yt2-guests{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.yt-tour-packages .yt2-gbox{
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  border-radius: 14px;
  padding: 10px;
}
body.yt-tour-packages .yt2-gname{
  font-weight: 650;
  font-size: 13px;
  color:#0f172a;
  margin-bottom: 6px;
}

body.yt-tour-packages .yt2-counter{ display:flex; align-items:center; gap: 8px; }

body.yt-tour-packages .yt2-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-size: 13px;
  font-weight: 650;
  color:#0f172a;
  cursor:pointer;
}
body.yt-tour-packages .yt2-inp{
  width:100%;
  height: 38px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-size: 15px;
  font-weight: 450;
  text-align:center;
  color:#0f172a;
  outline:none;
}
body.yt-tour-packages .yt2-inp::-webkit-outer-spin-button,
body.yt-tour-packages .yt2-inp::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
body.yt-tour-packages .yt2-inp[type=number]{ -moz-appearance:textfield; }

body.yt-tour-packages .yt2-total{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color:#0f172a;
}
body.yt-tour-packages .yt2-total span{ color: rgba(15,23,42,.70); }

/* CTA — slimmer and aligned */
body.yt-tour-packages .yt2-cta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.yt-tour-packages .yt2-cta-primary,
body.yt-tour-packages .yt2-cta-wa{
  height: 48px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 9px;
  font-weight: 550;
  font-size: 14px;
  text-decoration:none !important;
  border:1px solid rgba(15,23,42,.14);
}

body.yt-tour-packages .yt2-cta-primary{
  background:#fff;
  color:#0f172a;
}
body.yt-tour-packages .yt2-cta-primary:hover{
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

body.yt-tour-packages .yt2-cta-wa{
  background:#22c55e;
  color:#fff;
  border-color: rgba(34,197,94,.55);
}
body.yt-tour-packages .yt2-cta-wa.is-disabled{ opacity:.55; pointer-events:none; }

body.yt-tour-packages .yt2-pdf{
  margin-top: 10px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  background:#2a5b70;
  color:#fff;
  font-weight: 550;
  font-size: 14px;
  text-decoration:none !important;
  border:1px solid rgba(42,91,112,.55);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  body.yt-tour-packages .yt2-grid{ grid-template-columns: 1fr; }
  body.yt-tour-packages .yt2-card{ position: relative; top:auto; }
}
@media (max-width: 820px){
  body.yt-tour-packages .yt2-title{ font-size: 26px; }
  body.yt-tour-packages .yt2-facts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  body.yt-tour-packages .yt2-guests{ grid-template-columns: 1fr; }
  body.yt-tour-packages .yt2-cta{ grid-template-columns: 1fr; }
}
/* Force facts grid to 2x2 */
body.yt-tour-packages .yt2-facts{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* =========================================================
   BOOKING CARD — THEME MATCHED (ytHeader / ytFooter)
   ========================================================= */

body.yt-tour-packages .yt2-card{
  position: sticky;
  top: 16px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
  padding: 14px;
  box-shadow: 0 18px 55px rgba(2,12,27,.10);
}

/* ---------- Price Box ---------- */
body.yt-tour-packages .yt2-price{
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.12);
  background: linear-gradient(135deg, rgba(22,119,255,.06), rgba(11,87,208,.04));
  padding: 14px;
  margin-bottom: 12px;
}

body.yt-tour-packages .yt2-price-label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #5b6475; /* --mut */
}

body.yt-tour-packages .yt2-price-now{
  font-size: 26px;
  font-weight: 700;
  letter-spacing:-0.02em;
  color:#0b1220; /* --ink */
}

body.yt-tour-packages .yt2-price-old{
  font-size: 13px;
  font-weight: 400;
  color: rgba(11,18,32,.45);
  text-decoration: line-through;
}

/* Save badge -> orange accent */
body.yt-tour-packages .yt2-save{
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(255,122,24,.12);
  border: 1px solid rgba(255,122,24,.35);
  color: #ff7a18; /* --orange */
  font-weight: 600;
  font-size: 11px;
}

/* ---------- Labels ---------- */
body.yt-tour-packages .yt2-label{
  font-size: 14px;
  font-weight: 600;
  color:#0b1220; /* --ink */
}

body.yt-tour-packages .yt2-label i{
  color:#1677ff; /* --blue */
  font-size: 13px;
}

/* ---------- Select ---------- */
body.yt-tour-packages .yt2-select{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color:#0b1220;
  outline:none;
}

body.yt-tour-packages .yt2-select:focus{
  border-color:#1677ff;
  box-shadow: 0 0 0 3px rgba(22,119,255,.15);
}

body.yt-tour-packages .yt2-help{
  font-size: 12px;
  color:#5b6475;
}

/* ---------- Guests ---------- */
body.yt-tour-packages .yt2-gbox{
  border:1px solid rgba(15,23,42,.12);
  background: #f8fbff;
  border-radius: 14px;
}

body.yt-tour-packages .yt2-gname{
  font-weight: 600;
  font-size: 13px;
  color:#0b1220;
}

body.yt-tour-packages .yt2-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size: 14px;
  font-weight: 600;
  color:#0b1220;
}

body.yt-tour-packages .yt2-btn:hover{
  background:#1677ff;
  color:#fff;
  border-color:#1677ff;
}

body.yt-tour-packages .yt2-inp{
  height: 36px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size: 14px;
  font-weight: 500;
  color:#0b1220;
}

/* ---------- Total ---------- */
body.yt-tour-packages .yt2-total{
  font-size: 13px;
  font-weight: 600;
  color:#0b1220;
}

body.yt-tour-packages .yt2-total span{
  color:#5b6475;
}

/* ---------- CTA ---------- */
body.yt-tour-packages .yt2-cta-primary{
  background:#ffffff;
  color:#0b1220;
  border:1px solid rgba(15,23,42,.12);
  font-weight: 600;
}

body.yt-tour-packages .yt2-cta-primary:hover{
  background:#1677ff;
  color:#ffffff;
  border-color:#1677ff;
}

body.yt-tour-packages .yt2-cta-wa{
  background:#22c55e;
  border-color:#22c55e;
  font-weight:600;
}

/* ---------- PDF Button ---------- */
body.yt-tour-packages .yt2-pdf{
  background:linear-gradient(90deg, var(--yt-primary), var(--yt-primary-2));
  border-color:#0b57d0;
  font-weight:600;
}

body.yt-tour-packages .yt2-pdf:hover{
  background:#1677ff;
}

/* =========================================================
   YT2 — Itinerary Accordion (Premium)
   ========================================================= */

body.yt-tour-packages .yt2-it-sec{
  padding: 16px 0 8px;
}

body.yt-tour-packages .yt2-it-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 12px;
}

body.yt-tour-packages .yt2-it-title{
  margin:0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing:-0.02em;
  color: #0b1220;
}

body.yt-tour-packages .yt2-it-sub{
  font-size: 13px;
  font-weight: 300;
  color: #5b6475;
  white-space: nowrap;
}

body.yt-tour-packages .yt2-it-acc{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow:hidden;
  background:
    radial-gradient(900px 260px at 12% -30%, rgba(22,119,255,.10), transparent 60%),
    radial-gradient(900px 260px at 88% -30%, rgba(255,122,24,.10), transparent 60%),
    rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(2,12,27,.06);
}

/* each item */
body.yt-tour-packages .yt2-it-item{
  border-top: 1px solid rgba(15,23,42,.10);
}
body.yt-tour-packages .yt2-it-item:first-child{
  border-top: 0;
}

/* remove default marker */
body.yt-tour-packages .yt2-it-item > summary{
  list-style: none;
}
body.yt-tour-packages .yt2-it-item > summary::-webkit-details-marker{
  display:none;
}

body.yt-tour-packages .yt2-it-sum{
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 14px;
  user-select:none;
}

body.yt-tour-packages .yt2-it-day{
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 750;
  color:#0b1220;
  line-height: 1;
}

body.yt-tour-packages .yt2-it-main{
  flex:1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}

body.yt-tour-packages .yt2-it-h{
  font-size: 15px;
  font-weight: 550;
  color:#0b1220;
  line-height: 1.25;
}

body.yt-tour-packages .yt2-it-k{
  font-size: 13px;
  font-weight: 450;
  color:#5b6475;
  line-height: 1.45;
}

body.yt-tour-packages .yt2-it-ico{
  flex:0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#1677ff;
  transition: transform .18s ease;
  margin-top: 1px;
}

body.yt-tour-packages .yt2-it-item[open] .yt2-it-ico{
  transform: rotate(180deg);
}

/* body content */
body.yt-tour-packages .yt2-it-body{
  padding: 0 14px 14px;
}

body.yt-tour-packages .yt2-it-rich{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
  color: rgba(11,18,32,.88);
  font-size: 14px;
  line-height: 1.75;
}
body.yt-tour-packages .yt2-it-rich p{ margin: 0 0 10px; }
body.yt-tour-packages .yt2-it-rich ul{ padding-left: 18px; }
body.yt-tour-packages .yt2-it-rich li{ margin: 6px 0; }

/* gallery - only visible when open because it's inside details */
body.yt-tour-packages .yt2-it-gal{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.yt-tour-packages .yt2-it-gal-a{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 24px rgba(2,12,27,.06);
  transition: transform .12s ease;
}
body.yt-tour-packages .yt2-it-gal-a:hover{
  transform: translateY(-1px);
}

body.yt-tour-packages .yt2-it-gal-img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
}

/* responsive */
@media (max-width: 980px){
  body.yt-tour-packages .yt2-it-head{
    align-items:flex-start;
    flex-direction:column;
  }
  body.yt-tour-packages .yt2-it-gal{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.yt-tour-packages .yt2-it-gal-img{ height: 160px; }
}
@media (max-width: 560px){
  body.yt-tour-packages .yt2-it-sum{
    padding: 12px 12px;
  }
  body.yt-tour-packages .yt2-it-gal{
    grid-template-columns: 1fr;
  }
  body.yt-tour-packages .yt2-it-gal-img{ height: 200px; }
}
/* =========================================================
   YT2 — Inclusions/Exclusions + Add-ons + Policies + FAQ
   ========================================================= */

body.yt-tour-packages .yt2-ix-sec,
body.yt-tour-packages .yt2-ad-sec,
body.yt-tour-packages .yt2-pol-sec,
body.yt-tour-packages .yt2-terms-sec,
body.yt-tour-packages .yt2-faq-sec{
  padding: 16px 0 8px;
}

/* pills row (meal plan / stay type) */
body.yt-tour-packages .yt2-ix-pills{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
body.yt-tour-packages .yt2-ix-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.85);
  font-size: 12.5px;
  font-weight: 450;
  color: rgba(11,18,32,.78);
}
body.yt-tour-packages .yt2-ix-pill b{ color:#0b1220; font-weight: 650; }
body.yt-tour-packages .yt2-ix-pill i{ opacity:.8; }

/* 2-column inclusion/exclusion */
body.yt-tour-packages .yt2-ix-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 820px){
  body.yt-tour-packages .yt2-ix-grid{ grid-template-columns: 1fr; }
  body.yt-tour-packages .yt2-ix-pills{ justify-content:flex-start; }
}

body.yt-tour-packages .yt2-ix-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background:
    radial-gradient(900px 260px at 12% -30%, rgba(22,119,255,.08), transparent 60%),
    radial-gradient(900px 260px at 88% -30%, rgba(255,122,24,.08), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(2,12,27,.06);
  padding: 14px;
}

body.yt-tour-packages .yt2-ix-cardhead{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
body.yt-tour-packages .yt2-ix-ico{
  width: 32px; height: 32px;
  display:grid; place-items:center;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
}
body.yt-tour-packages .yt2-ix-ico.is-inc{ color:#16a34a; }
body.yt-tour-packages .yt2-ix-ico.is-exc{ color:#ef4444; }
body.yt-tour-packages .yt2-ix-h{
  margin:0;
  font-size: 16px;
  font-weight: 700;
  color:#0b1220;
}

body.yt-tour-packages .yt2-ix-list{
  margin:0;
  padding: 0;
  list-style: none;
}
body.yt-tour-packages .yt2-ix-list li{
  display:flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(15,23,42,.08);
  color: rgba(11,18,32,.84);
  font-size: 14px;
  line-height: 1.5;
}
body.yt-tour-packages .yt2-ix-list li:first-child{ border-top: 0; }
body.yt-tour-packages .yt2-ix-list.is-inc li::before{
  content:"✓";
  font-weight: 900;
  color:#16a34a;
}
body.yt-tour-packages .yt2-ix-list.is-exc li::before{
  content:"×";
  font-weight: 900;
  color:#ef4444;
}
body.yt-tour-packages .yt2-ix-empty{
  padding: 10px 0;
  color: rgba(11,18,32,.55);
  font-size: 13px;
}

/* Add-ons cards */
body.yt-tour-packages .yt2-ad-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 820px){
  body.yt-tour-packages .yt2-ad-grid{ grid-template-columns: 1fr; }
}

body.yt-tour-packages .yt2-ad-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(2,12,27,.06);
  padding: 14px;
}
body.yt-tour-packages .yt2-ad-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
body.yt-tour-packages .yt2-ad-name{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#0b1220;
  font-size: 14px;
}
body.yt-tour-packages .yt2-ad-name i{ opacity:.8; }
body.yt-tour-packages .yt2-ad-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
}
body.yt-tour-packages .yt2-ad-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  color: rgba(11,18,32,.78);
}
body.yt-tour-packages .yt2-ad-badge.is-req{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
  color:#991b1b;
}
body.yt-tour-packages .yt2-ad-badge.is-opt{
  background: rgba(22,119,255,.10);
  border-color: rgba(22,119,255,.22);
  color:#0b57d0;
}
body.yt-tour-packages .yt2-ad-price{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
  color:#065f46;
  font-weight: 750;
  font-size: 12px;
}
body.yt-tour-packages .yt2-ad-desc{
  color: rgba(11,18,32,.78);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Optional activities rate card */
body.yt-tour-packages .yt2-oa-wrap{
  margin-top: 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow:hidden;
  background:
    radial-gradient(900px 260px at 12% -30%, rgba(22,119,255,.08), transparent 60%),
    radial-gradient(900px 260px at 88% -30%, rgba(255,122,24,.08), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(2,12,27,.06);
}
body.yt-tour-packages .yt2-oa-head{ padding: 14px; }
body.yt-tour-packages .yt2-oa-title{
  margin:0;
  font-size: 16px;
  font-weight: 750;
  color:#0b1220;
}
body.yt-tour-packages .yt2-oa-sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(11,18,32,.55);
}
body.yt-tour-packages .yt2-oa-table{ padding: 0 14px 14px; }
body.yt-tour-packages .yt2-oa-row{
  display:grid;
  grid-template-columns: 1.1fr 1.5fr .6fr;
  gap: 10px;
  padding: 12px 10px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 13.5px;
  color: rgba(11,18,32,.85);
}
body.yt-tour-packages .yt2-oa-th{
  border-top: 0;
  font-weight: 750;
  color: rgba(11,18,32,.70);
  background: rgba(248,250,252,.7);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  margin-top: 10px;
}
body.yt-tour-packages .yt2-oa-rate{ font-weight: 800; }

/* Terms list */
body.yt-tour-packages .yt2-terms-box{
  padding: 12px 12px;
}
body.yt-tour-packages .yt2-terms-list{
  list-style:none;
  margin:0;
  padding:0;
}
body.yt-tour-packages .yt2-terms-list li{
  display:flex;
  gap: 10px;
  padding: 10px 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  color: rgba(11,18,32,.84);
  font-size: 14px;
  line-height: 1.55;
}
body.yt-tour-packages .yt2-terms-list li:first-child{ border-top: 0; }
body.yt-tour-packages .yt2-terms-list i{
  margin-top: 2px;
  color:#16a34a;
}

/* FAQ tweaks (reuses itinerary accordion base) */
body.yt-tour-packages .yt2-faq-q{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
body.yt-tour-packages .yt2-faq-qico{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  color:#0b57d0;
  flex: 0 0 auto;
}
/* =========================================================
   MOBILE-ONLY FIX PACK (DESKTOP UNTOUCHED)
   - Unified left/right spacing across ALL sections
   - Overview/Booking/Itinerary width matches Inc/Exc
   - No 100vw hacks (prevents overflow + uneven margins)
   - Best Time moves BELOW overview on mobile
   - Meal/Pick/Drop/Stay responsive grid
   - Text justify for overview + itinerary
   - Gallery desktop untouched; mobile slider ok (JS injected)
========================================================= */
@media (max-width:820px){

  /* ---------- GLOBAL: stop horizontal scroll ---------- */
  html, body{ overflow-x:hidden; }

  /* one consistent mobile gutter for every section */
  :root{ --yt-mob-gutter:8px; }

  /* ---------- UNIFY WIDTH (this fixes the “shrieked” sections) ---------- */
  /* Make all main blocks use the SAME padding system */
  body.yt-tour-packages .yt-wrap{
    padding-left: var(--yt-mob-gutter) !important;
    padding-right: var(--yt-mob-gutter) !important;
  }

  /* If any internal wrappers add extra padding and cause shrink, normalize them */
  body.yt-tour-packages .yt2-wrap,
  body.yt-tour-packages .yt2-sec,
  body.yt-tour-packages .yt2-card,
  body.yt-tour-packages .yt2-left,
  body.yt-tour-packages .yt2-right{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* Some sections get “double padding” (outer + inner). Keep only one. */
  body.yt-tour-packages .yt2-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------- BREADCRUMB + TAGLINE: full usable width, equal margins ---------- */
  /* No 100vw. Just let them follow the same gutter as everything else. */
  body.yt-tour-packages .yt-breadcrumb,
  body.yt-tour-packages .yt-tagline{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* ---------- MAIN GRID: single column on mobile ---------- */
  body.yt-tour-packages .yt2-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Booking card should not “stick out” */
  body.yt-tour-packages .yt2-card{
    position:relative;
    top:auto;
  }

  /* ---------- HERO GALLERY: desktop untouched, mobile uses injected slider ---------- */
  /* Keep desktop gallery rules intact; only hide the grid on mobile */
  body.yt-tour-packages .yt-gallery{ display:none !important; }

  .yt-mg-slider{
    position:relative;
    border-radius: var(--yt-radius);
    overflow:hidden;
    background:#f2f4f7;
    box-shadow: var(--yt-shadow);
    border:1px solid var(--yt-border);
  }
  .yt-mg-track{
    display:flex;
    width:100%;
    transition: transform .35s ease;
    will-change: transform;
    touch-action: pan-y;
  }
  .yt-mg-slide{
    min-width:100%;
    position:relative;
    aspect-ratio: 4 / 3;
    background:#f2f4f7;
  }
  .yt-mg-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .yt-mg-btn{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:38px;
    height:38px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.88);
    display:grid;
    place-items:center;
    box-shadow: 0 12px 26px rgba(2,6,23,.18);
    cursor:pointer;
    z-index:5;
  }
  .yt-mg-btn:active{ transform: translateY(-50%) scale(.98); }
  .yt-mg-prev{ left:10px; }
  .yt-mg-next{ right:10px; }

  .yt-mg-dots{
    position:absolute;
    left:50%;
    bottom:10px;
    transform: translateX(-50%);
    display:flex;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    background: rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
    z-index:5;
  }
  .yt-mg-dot{
    width:7px;
    height:7px;
    border-radius:99px;
    border:0;
    background: rgba(255,255,255,.55);
    cursor:pointer;
  }
  .yt-mg-dot.is-on{
    width:18px;
    background:#fff;
  }

  /* ---------- OVERVIEW: justify + stop overflow ---------- */
  body.yt-tour-packages .yt2-prose{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap:anywhere;
    word-break: break-word;
  }

  /* Move “Best Time” below overview (mobile only)
     Uses your own selectors from previous CSS attempts */
  body.yt-tour-packages .yt2-overview-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  body.yt-tour-packages .yt2-besttime{
    order: 99;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* ---------- FACTS: Meal / Pickup / Drop / Stay responsive 1x1 / 2x2 ---------- */
  body.yt-tour-packages .yt2-facts{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap:10px !important;
  }
  body.yt-tour-packages .yt2-fact{
    min-width:0;
  }

  /* ---------- BOOKING FORM: prevent overflow ---------- */
  body.yt-tour-packages .yt2-select,
  body.yt-tour-packages .yt2-btn,
  body.yt-tour-packages .yt2-inp{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  body.yt-tour-packages .yt2-guests{
    grid-template-columns: 1fr !important;
  }

  /* ---------- ITINERARY: justify + gallery slider ---------- */
  body.yt-tour-packages .yt2-it-rich{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap:anywhere;
    word-break: break-word;
  }

  /* hide original itinerary gallery grid only on mobile */
  body.yt-tour-packages .yt2-it-gal{ display:none !important; }

  body.yt-tour-packages .yt-it-ms{
    position:relative;
    border-radius: 14px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.10);
    background:#f2f4f7;
  }
  body.yt-tour-packages .yt-it-ms-track{
    display:flex;
    width:100%;
    transition: transform .35s ease;
    will-change: transform;
    touch-action: pan-y;
  }
  body.yt-tour-packages .yt-it-ms-slide{
    min-width:100%;
    aspect-ratio: 4 / 3;
    position:relative;
    background:#f2f4f7;
  }
  body.yt-tour-packages .yt-it-ms-slide img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }
  body.yt-tour-packages .yt-it-ms-btn{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.88);
    display:grid;
    place-items:center;
    box-shadow: 0 10px 22px rgba(2,6,23,.16);
    cursor:pointer;
    z-index:5;
  }
  body.yt-tour-packages .yt-it-ms-prev{ left:10px; }
  body.yt-tour-packages .yt-it-ms-next{ right:10px; }

  body.yt-tour-packages .yt-it-ms-dots{
    position:absolute;
    left:50%;
    bottom:10px;
    transform: translateX(-50%);
    display:flex;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    background: rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
    z-index:5;
  }
  body.yt-tour-packages .yt-it-ms-dot{
    width:7px;
    height:7px;
    border-radius:99px;
    border:0;
    background: rgba(255,255,255,.55);
    cursor:pointer;
  }
  body.yt-tour-packages .yt-it-ms-dot.is-on{
    width:18px;
    background:#fff;
  }

  /* ---------- ADDONS subheading overflow ---------- */
  body.yt-tour-packages .yt2-ad-name{
    flex-wrap: wrap;
    overflow-wrap:anywhere;
    word-break: break-word;
    line-height: 1.25;
    min-width:0;
  }

}
/* ==============================
   MOBILE: FACTS = 1×1 (single column)
   (Meal / Pick / Drop / Stay)
============================== */
@media (max-width:820px){

  /* Force 1 column */
  body.yt-tour-packages .yt2-facts{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:10px !important;
  }

  /* Each card full width */
  body.yt-tour-packages .yt2-fact{
    width:100% !important;
    min-width:0 !important;
  }

  /* If Best time pill is moved into bottom, keep it full width and not circular */
  body.yt-tour-packages .yt2-pill{
    width:100% !important;
    max-width:100% !important;
    border-radius:14px !important;   /* prevents big circle */
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Fix inner label spacing */
  body.yt-tour-packages .yt2-pill span,
  body.yt-tour-packages .yt2-pill b{
    display:inline !important;
  }
}
/* =========================================================
   YATRA TRIPS — MOBILE ONLY PATCH (Desktop untouched)
   ✅ DOES NOT touch .yt-gallery (your hero gallery grid stays as-is)
   ✅ Fixes overflow + same left/right padding everywhere
   ✅ Fixes Overview/Booking/Itinerary “shrieked” width mismatch
   ✅ Fixes Best Time pill layout on mobile (icon+label 1 line, dates below)
   ✅ Fixes facts cards to be 1x1 when screen is small
   ✅ Fixes Inclusion/Exclusion ✓ × icons (encoding-safe)
   ✅ Improves Add-ons / Cancellation / Booking spacing on mobile
   ========================================================= */

/* ✅ IMPORTANT: Tick/Cross fix (encoding-safe) — applies everywhere */
body.yt-tour-packages .yt2-ix-list li::before{
  display:inline-block;
  flex:0 0 18px;
  width:18px;
  line-height:1.1;
  margin-top:2px;
}
body.yt-tour-packages .yt2-ix-list.is-inc li::before{
  content:"\2713"; /* ✓ */
  font-weight:900;
  color:#16a34a;
}
body.yt-tour-packages .yt2-ix-list.is-exc li::before{
  content:"\00D7"; /* × */
  font-weight:900;
  color:#ef4444;
}

/* ✅ MOBILE ONLY */
@media (max-width: 820px){

  /* never allow horizontal scroll from long text */
  body.yt-tour-packages{ overflow-x:hidden; }

  /* ---------------------------------------------------------
     GLOBAL: make left/right padding SAME for ALL sections
     (this fixes “overview/booking/itinerary shrieked”)
  --------------------------------------------------------- */
  body.yt-tour-packages .yt-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body.yt-tour-packages .yt2-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
    max-width:100% !important;
  }

  /* breadcrumb + tagline stay aligned with same padding (NOT full-bleed) */
  body.yt-tour-packages .yt-breadcrumb,
  body.yt-tour-packages .yt-tagline{
    max-width:100%;
    width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* ---------------------------------------------------------
     HERO HEADER: hide Instant on mobile + keep meta clean
  --------------------------------------------------------- */
  body.yt-tour-packages .yt-chip{ display:none !important; } /* hide "Instant" on mobile */

  body.yt-tour-packages .yt-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  body.yt-tour-packages .yt-title{
    font-size:30px;
    line-height:1.12;
  }

  /* meta row: try to keep in one line; wraps naturally on smaller screens */
  body.yt-tour-packages .yt-submeta{
    gap:10px;
    row-gap:8px;
  }
  body.yt-tour-packages .yt-mi{ white-space:nowrap; }
  @media (max-width: 420px){
    body.yt-tour-packages .yt-mi{ white-space:normal; }
  }

  /* ---------------------------------------------------------
     OVERVIEW + BOOKING GRID: mobile = single column
  --------------------------------------------------------- */
  body.yt-tour-packages .yt2-grid{
    grid-template-columns: 1fr !important;
    gap:14px !important;
  }
  body.yt-tour-packages .yt2-left,
  body.yt-tour-packages .yt2-card{
    max-width:100%;
    min-width:0;
  }

  /* booking card should not look squeezed */
  body.yt-tour-packages .yt2-card{
    position:relative !important;
    top:auto !important;
    padding:12px !important;
  }

  /* overview text justified (safe wrapping) */
  body.yt-tour-packages .yt2-prose,
  body.yt-tour-packages .yt2-it-rich{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* ---------------------------------------------------------
     BEST TIME (Overview pill):
     icon + “Best time:” in ONE line, dates on next line
  --------------------------------------------------------- */
  body.yt-tour-packages .yt2-left-head{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }

  body.yt-tour-packages .yt2-pill{
    white-space:normal !important;        /* override desktop nowrap */
    display:grid !important;
    grid-template-columns: auto 1fr;
    grid-auto-rows:auto;
    column-gap:8px;
    row-gap:2px;
    align-items:center;
    max-width:100%;
  }
  body.yt-tour-packages .yt2-pill i{
    grid-column:1;
    grid-row:1;
  }
  body.yt-tour-packages .yt2-pill span{
    grid-column:2;
    grid-row:1;
    white-space:nowrap;                  /* keep “Best time:” on one line */
  }
  body.yt-tour-packages .yt2-pill b{
    grid-column:1 / -1;
    grid-row:2;
    display:block;
    padding-left:21px;                   /* aligns dates under label (after icon) */
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* ---------------------------------------------------------
     FACTS CARDS (Meal / Pick / Drop / Stay):
     2 columns on normal mobile, 1x1 on small screens
  --------------------------------------------------------- */
  body.yt-tour-packages .yt2-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  @media (max-width: 520px){
    body.yt-tour-packages .yt2-facts{
      grid-template-columns: 1fr !important; /* ✅ 1*1 */
    }
  }

  /* keep the KEY (MEAL / PICK / DROP / STAY) always in one line */
  body.yt-tour-packages .yt2-fact-k{
    white-space:nowrap;
  }
  /* value can wrap nicely */
  body.yt-tour-packages .yt2-fact-v{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* guests grid already becomes 1 col at 560 in base css, enforce earlier if needed */
  body.yt-tour-packages .yt2-guests{
    grid-template-columns: 1fr;
  }

  /* ---------------------------------------------------------
     ADD-ONS / CANCELLATION / BOOKING: cleaner mobile layout
  --------------------------------------------------------- */
  body.yt-tour-packages .yt2-ad-card,
  body.yt-tour-packages .yt2-ix-card{
    padding:12px;
    border-radius:16px;
  }

  /* add-ons header stack (name + badges) */
  body.yt-tour-packages .yt2-ad-top{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  body.yt-tour-packages .yt2-ad-badges{
    justify-content:flex-start;
  }
  body.yt-tour-packages .yt2-ad-name{
    flex-wrap:wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* make CTA area not cramped */
  body.yt-tour-packages .yt2-cta{
    grid-template-columns: 1fr;
  }
  body.yt-tour-packages .yt2-pdf{
    width:100%;
  }

  /* ---------------------------------------------------------
     GENERAL: prevent any “sub heading” overflow (addons etc.)
  --------------------------------------------------------- */
  body.yt-tour-packages h1,
  body.yt-tour-packages h2,
  body.yt-tour-packages h3,
  body.yt-tour-packages h4,
  body.yt-tour-packages .yt2-it-sub{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  body.yt-tour-packages .yt2-it-sub{
    white-space:normal; /* it was nowrap in base css */
  }
}
/* =========================================
   MOBILE: UN-SHRINK Overview / Booking / Itinerary
   (keep other mobile fixes)
========================================= */
@media (max-width:820px){

  /* 1) Let your original container width work (remove forced extra padding) */
  body.yt-tour-packages .yt-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Keep your original yt2-wrap spacing (it was correct before) */
  body.yt-tour-packages .yt2-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  /* 3) Do NOT force smaller booking padding (keeps previous nice look) */
  body.yt-tour-packages .yt2-card{
    padding: inherit !important; /* cancels forced 12px */
  }
}
/* =========================================
   MOBILE: Restore Booking Box inner padding
   (desktop untouched)
========================================= */
@media (max-width:820px){

  /* booking card wrapper */
  body.yt-tour-packages .yt2-card{
    padding: 14px !important;          /* restore comfortable inner padding */
    border-radius: 18px;               /* keep your style */
  }

  /* ensure sections inside don't stick to edges */
  body.yt-tour-packages .yt2-price,
  body.yt-tour-packages .yt2-field,
  body.yt-tour-packages .yt2-guests,
  body.yt-tour-packages .yt2-cta{
    padding: 0 !important;
    margin: 0 0 10px !important;
  }

  /* CTA buttons full width & balanced */
  body.yt-tour-packages .yt2-cta{
    gap: 10px !important;
  }
  body.yt-tour-packages .yt2-cta-primary,
  body.yt-tour-packages .yt2-cta-wa,
  body.yt-tour-packages .yt2-pdf{
    width: 100% !important;
  }
}
/* =========================================
   MOBILE: Fix PRICING panel inside Booking card
   (Desktop untouched)
========================================= */
@media (max-width:820px){

  /* Pricing panel box */
  body.yt-tour-packages .yt2-card .yt2-price{
    padding: 14px !important;
    border-radius: 18px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Title spacing */
  body.yt-tour-packages .yt2-card .yt2-price .yt2-price-k{
    letter-spacing: .18em !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  /* Main price row: allow wrap cleanly */
  body.yt-tour-packages .yt2-card .yt2-price .yt2-price-row{
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;        /* IMPORTANT: prevents squeeze */
  }

  /* Big price */
  body.yt-tour-packages .yt2-card .yt2-price .yt2-price-now{
    font-size: 40px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    white-space: nowrap !important;    /* keep ₹35,000.00 in one line */
  }

  /* Striked price */
  body.yt-tour-packages .yt2-card .yt2-price .yt2-price-was{
    font-size: 18px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    opacity: .65 !important;
  }

  /* Save pill: full width below on mobile */
  body.yt-tour-packages .yt2-card .yt2-price .yt2-save{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    width: 100% !important;            /* makes it look clean */
    max-width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Safety: never overflow due to long currency/values */
  body.yt-tour-packages .yt2-card .yt2-price *{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* =========================================================
   YT — MOBILE MODERN TABLE REPLACEMENT
   Targets:
   - Optional Activities (.yt2-oa-row)
   - Any <table> inside Cancellation / Booking rich content
   Desktop unchanged.
========================================================= */
@media (max-width: 820px){

  /* ---------- OPTIONAL ACTIVITIES: convert rows to premium cards ---------- */
  body.yt-tour-packages .yt2-oa-table{
    padding: 0 12px 12px;
  }

  /* hide the header row on mobile */
  body.yt-tour-packages .yt2-oa-row.yt2-oa-th{
    display:none !important;
  }

  /* each row becomes a card */
  body.yt-tour-packages .yt2-oa-row{
    display:block !important;
    padding: 12px 12px !important;
    margin: 10px 0 !important;

    border: 1px solid rgba(15,23,42,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 26px rgba(2,12,27,.06);
  }

  /* each cell becomes a labeled line */
  body.yt-tour-packages .yt2-oa-row > div{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;

    padding: 10px 0;
    border-top: 1px dashed rgba(15,23,42,.10);

    font-size: 14px;
    line-height: 1.35;
    color: rgba(11,18,32,.88);
    min-width:0;
  }
  body.yt-tour-packages .yt2-oa-row > div:first-child{
    border-top: 0;
    padding-top: 0;
  }
  body.yt-tour-packages .yt2-oa-row > div:last-child{
    padding-bottom: 0;
  }

  /* labels via nth-child (works because markup is 3 divs per row) */
  body.yt-tour-packages .yt2-oa-row > div:nth-child(1)::before{
    content:"Location";
  }
  body.yt-tour-packages .yt2-oa-row > div:nth-child(2)::before{
    content:"Activity";
  }
  body.yt-tour-packages .yt2-oa-row > div:nth-child(3)::before{
    content:"Rack Rate (PP)";
  }

  body.yt-tour-packages .yt2-oa-row > div::before{
    flex:0 0 auto;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(11,18,32,.55);
    margin-top: 2px;
  }

  /* make value wrap safely */
  body.yt-tour-packages .yt2-oa-row > div{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* make the rate look like a pill */
  body.yt-tour-packages .yt2-oa-row > div:nth-child(3){
    align-items:center;
  }
  body.yt-tour-packages .yt2-oa-row > div:nth-child(3) .yt2-oa-rate{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,.22);
    background: rgba(34,197,94,.10);
    color:#065f46;
    font-weight: 800;
    white-space:nowrap;
  }

  /* ---------- CANCELLATION / BOOKING: convert any rich tables to cards ---------- */
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable thead{
    display:none !important;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable tr{
    display:block;
    margin: 12px 0;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 26px rgba(2,12,27,.06);
    overflow:hidden;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable td{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px dashed rgba(15,23,42,.10);
    min-width:0;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable tr td:first-child{
    border-top:0;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable td::before{
    content: attr(data-label);
    flex:0 0 auto;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(11,18,32,.55);
    margin-top: 2px;
  }
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}
/* =========================================================
   FIX: long values should still stay RIGHT aligned
   (Optional Activities + Cancellation/Booking card tables)
========================================================= */
@media (max-width: 820px){

  /* ----- OPTIONAL ACTIVITIES rows: force "value" to be right-aligned always ----- */
  body.yt-tour-packages .yt2-oa-row > div{
    position: relative !important;
    display: block !important;              /* kill flex for this line */
    padding-left: 120px !important;         /* space reserved for label */
    text-align: right !important;           /* value always right */
  }

  body.yt-tour-packages .yt2-oa-row > div::before{
    position: absolute !important;
    left: 0;
    top: 10px;                              /* aligns label nicely */
    width: 110px;
    text-align: left !important;
    white-space: nowrap;
  }

  /* keep rate pill aligned right */
  body.yt-tour-packages .yt2-oa-row > div:nth-child(3) .yt2-oa-rate{
    margin-left: auto;
  }

  /* ----- Cancellation/Booking tables (converted to cards): same fix ----- */
  body.yt-tour-packages .yt2-it-rich table.yt2-rtable td{
    position: relative !important;
    display: block !important;              /* kill flex */
    padding-left: 120px !important;
    text-align: right !important;
  }

  body.yt-tour-packages .yt2-it-rich table.yt2-rtable td::before{
    position: absolute !important;
    left: 12px;
    top: 10px;
    width: 110px;
    text-align: left !important;
    white-space: nowrap;
  }
}
/* =========================================================
   FIX: Hide the "CATEGORY / DETAILS" header row on mobile
   (prevents the broken floating header look)
========================================================= */
@media (max-width: 820px){

  /* hide thead always */
  body.yt-tour-packages .yt2-pol-rich table.yt2-rtable thead{
    display:none !important;
  }

  /* hide first row if JS marked it as header */
  body.yt-tour-packages .yt2-pol-rich table.yt2-rtable tr.yt2-rhead{
    display:none !important;
  }
}
/* =========================================================
   FINAL FIX: label vertically centered for single-line values
   (Optional Activities cards only)
========================================================= */
@media (max-width: 820px){

  /* Replace absolute-label layout with grid (more stable) */
  body.yt-tour-packages .yt2-oa-row > div{
    display: grid !important;
    grid-template-columns: 118px 1fr;  /* label | value */
    align-items: center;              /* ✅ centers label when value is 1 line */
    column-gap: 12px;

    padding-left: 0 !important;       /* remove previous reserved space */
    text-align: left !important;      /* reset */
    position: static !important;      /* reset */
  }

  body.yt-tour-packages .yt2-oa-row > div::before{
    position: static !important;      /* stop absolute positioning */
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Value column: always right aligned, wraps nicely */
  body.yt-tour-packages .yt2-oa-row > div{
    /* nothing else */
  }
  body.yt-tour-packages .yt2-oa-row > div > *{
    justify-self: end;
    text-align: right;
  }

  /* If value is plain text (no child element), force right alignment */
  body.yt-tour-packages .yt2-oa-row > div{
    justify-items: stretch;
  }

  /* Rate pill stays right */
  body.yt-tour-packages .yt2-oa-row > div:nth-child(3) .yt2-oa-rate{
    justify-self: end;
  }

  /* OPTIONAL: when value wraps to 2+ lines, make label align to top for nicer look */
  body.yt-tour-packages .yt2-oa-row > div:has(br),
  body.yt-tour-packages .yt2-oa-row > div:has(.yt2-oa-rate){
    align-items: center;
  }
}