/* =========================================================
   TMA • SINGLE TOUR CSS (2026) — FINAL
   ✅ Departures: Date → Type → Details
   ✅ Calendar + chips
========================================================= */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --soft2:#f8fafc;

  --brand:#ff6a00;
  --brand2:#ff8a00;

  --shadow:0 18px 44px rgba(2,6,23,.10);
  --shadow2:0 10px 24px rgba(2,6,23,.08);

  --r16:16px;
  --r20:20px;

  --max:1140px;

  /* header offset */
  --tmaStickyTop: 74px;
}

/* Base */
.tmaTour{ background:var(--bg); color:var(--text); overflow-x:hidden; }
.tmaTour *{ box-sizing:border-box; }
.tmaTour img{ max-width:100%; height:auto; display:block; }
.tmaTour svg{ width:16px; height:16px; fill:currentColor; display:block; }

.tmaContainer{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

.tmaPage{ padding:16px 0 98px; }
.tmaPageGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 380px;
  gap:18px;
  align-items:start;
}
.tmaLeft{ min-width:0; }

/* Animation */
@keyframes tmaUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.tmaFadeIn{ animation:tmaUp .35s ease both; }
.tmaFadeIn2{ animation:tmaUp .45s ease both; }
.tmaFadeIn3{ animation:tmaUp .55s ease both; }

/* Gallery */
.tmaGallery{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r20);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.tmaGalleryMain{
  position:relative;
  background:#0b1220;
  height:380px;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  isolation:isolate;
  transform: translateZ(0);
}
.tmaGalImg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:1;
  transform: translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change: opacity, transform;
}
.tmaGalNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:#fff;
  font-size:18px;
  font-weight:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:999;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.tmaGalPrev{ left:12px; }
.tmaGalNext{ right:12px; }

.tmaThumbs{
  display:flex;
  gap:10px;
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}
.tmaThumb{
  border:2px solid transparent;
  border-radius:14px;
  padding:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
  width:86px;
}
.tmaThumb img{
  width:86px;
  height:56px;
  border-radius:12px;
  object-fit:cover;
  object-position:center;
}
.tmaThumb.isActive{ border-color:rgba(255,106,0,.55); }

@media (min-width: 521px){
  .tmaGallery .tmaThumbs{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    min-height:72px;
    padding:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    background:#fff !important;
    border-top:1px solid rgba(15,23,42,.10);
  }
}

/* Sticky Tabs */
.tmaStickyNav{
  position: sticky;
  top: var(--tmaStickyTop);
  z-index: 9999;
  margin-top: 14px;
  padding: 10px 10px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
  border-radius: 18px;
}
.tmaStickyNav.isFixed{
  position: fixed !important;
  top: var(--tmaStickyTop) !important;
  left: var(--tmaStickLeft, 16px);
  width: var(--tmaStickWidth, calc(100% - 32px));
  margin-top:0 !important;
}
.tmaStickyInner{
  display:flex; gap:10px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding: 2px 4px;
}
.tmaTab{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  font-weight:1100;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  color:var(--text);
}
.tmaTab.isActive{ border-color:rgba(255,106,0,.42); background:rgba(255,242,234,.92); }

/* Cards */
.tmaCard{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r20);
  box-shadow:var(--shadow2);
  padding:16px;
}
.tmaCardHead{ display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; align-items:flex-start; }
.tmaH2{ margin:0; font-size:19px; font-weight:1100; letter-spacing:.1px; }
.tmaCardHint{ color:var(--muted); font-weight:900; font-size:12px; padding-top:4px; text-align:right; }
.tmaMuted{ color:var(--muted); font-weight:800; }

/* About clamp */
.tmaClamp{ max-height:220px; overflow:hidden; position:relative; }
.tmaClamp:after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:80px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
}
.tmaReadMore{
  margin-top:10px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:1100;
  cursor:pointer;
}
.tmaReadMore.isHide{ background:#fff2ea; border-color:rgba(255,106,0,.25); }
.tmaAboutFull{ margin-top:14px; }

/* Lists */
.tmaList{ margin:0; padding-left:18px; }
.tmaList li{ margin:6px 0; line-height:1.6; }

/* Itinerary */
.tmaIti{ display:grid; gap:12px; }
.tmaDay{
  border-radius:var(--r16);
  border:1px solid rgba(255,106,0,.20);
  background:#fff7f1;
  overflow:hidden;
}
.tmaDay > summary{ list-style:none; cursor:pointer; padding:12px; }
.tmaDay > summary::-webkit-details-marker{ display:none; }
.tmaDayHead{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.tmaDayLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.tmaDayChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:1100;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.tmaDayTitle{
  font-weight:1100;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tmaDayToggle{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,106,0,.25);
  background:#ffe9da;
  display:flex; align-items:center; justify-content:center;
  font-weight:1100; font-size:18px;
}
.tmaDayBody{
  padding:0 12px 12px;
  border-top:1px dashed rgba(255,106,0,.22);
  background:#fff;
}
.tmaDayBody p{ margin:10px 0; line-height:1.7; }

/* =========================
   ✅ Departures Picker UI
========================= */
.tmaDepPickRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.tmaDepPickLabel{ font-weight:1100; color:var(--muted); font-size:13px; }
.tmaDepPickHint{ color:var(--muted); font-weight:900; font-size:12px; }

.tmaDepPills{
  display:flex;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 2px 2px;
}
.tmaPillBtn{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:999px;
  padding:12px 14px;
  font-weight:1100;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.tmaPillBtn b{ color:var(--muted); font-weight:1100; margin-left:6px; }
.tmaPillBtn.isActive{
  border-color:rgba(255,106,0,.42);
  background:rgba(255,242,234,.92);
}

.tmaDepPanel{ margin-top:14px; }

.tmaDepCardXL{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r16);
  background:#fff;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  padding:16px;
}
.tmaDepTop{ display:flex; justify-content:space-between; gap:10px; }
.tmaDepDate{ font-weight:1100; font-size:18px; }
.tmaDepSeats{
  font-weight:1100;
  font-size:12px;
  border:1px solid rgba(15,23,42,.10);
  padding:8px 10px;
  border-radius:999px;
  background:#f8fafc;
}
.tmaDepPrice{ margin-top:10px; font-weight:1200; font-size:26px; }
.tmaDepPrice span{ display:block; color:var(--muted); font-size:12px; font-weight:900; margin-top:6px; }

.tmaDepBreak{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.tmaDepTag{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.05);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:1100;
  line-height:1;
}
.tmaDepTag b{ margin-right:6px; }
.tmaDepTag:first-child{
  border-color:rgba(255,106,0,.22);
  background:rgba(255,106,0,.06);
}

.tmaDepLabel{ margin-top:12px; color:var(--muted); font-weight:900; font-size:13px; }
.tmaTip{ margin-top:12px; color:var(--muted); font-weight:1100; }

/* Include/Exclude */
.tmaSplit{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tmaBox{ border:1px solid rgba(15,23,42,.10); border-radius:var(--r16); background:#fff; overflow:hidden; }
.tmaBoxTitle{ padding:12px 14px; font-weight:1100; background:#f8fafc; border-bottom:1px solid rgba(15,23,42,.08); }
.tmaBoxBody{ padding:12px 14px; }

/* FAQ */
.tmaFaq{ display:grid; gap:10px; }
.tmaFaqItem{ border:1px solid rgba(15,23,42,.10); border-radius:var(--r16); overflow:hidden; background:#fff; }
.tmaFaqItem > summary{
  list-style:none; padding:12px 14px; cursor:pointer;
  display:flex; justify-content:space-between; gap:12px;
  font-weight:1100;
}
.tmaFaqItem > summary::-webkit-details-marker{ display:none; }
.tmaFaqPlus{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,106,0,.25);
  background:#fff2ea;
  display:flex; align-items:center; justify-content:center;
  font-weight:1200;
}
.tmaFaqBody{ padding:0 14px 14px; border-top:1px dashed rgba(15,23,42,.12); }
.tmaFaqBody p{ margin:10px 0; line-height:1.7; }

/* Right Sidebar */
.tmaSideCard{
  position:sticky;
  top:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r20);
  box-shadow:var(--shadow);
  padding:16px;
}
.tmaTitleRow{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
.tmaTitle{ margin:0; font-size:22px; line-height:1.15; font-weight:1200; }
.tmaPrice{ text-align:right; min-width:120px; }
.tmaPriceBig{ display:block; font-weight:1200; font-size:22px; }
.tmaPriceSmall{ display:block; font-size:12px; font-weight:900; color:var(--muted); margin-top:2px; }

.tmaPills{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px; }
.tmaPill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff; font-size:12.5px; font-weight:1000;
}

/* Buttons */
.tmaBtn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:12px 14px;
  font-weight:1200;
  border:1px solid transparent;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
}
.tmaBtnPrimary{
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  color:#fff;
  box-shadow:0 14px 30px rgba(255,106,0,.22);
}
.tmaBtnGhost{ background:#fff; border-color:rgba(15,23,42,.14); color:var(--text); }
.tmaBtnSoft{ background:#fff2ea; border-color:rgba(255,106,0,.25); color:#0b1220; }
.tmaBtnTiny{ padding:10px 12px; border-radius:12px; font-size:13px; }
.tmaSideActions{ display:grid; gap:10px; }

/* Calendar */
.tmaCalWrap{ margin-top:6px; }
.tmaCal{
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.tmaCalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  background: #f8fafc;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.tmaCalMonth{ font-weight:1200; font-size:14px; }
.tmaCalNavBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  font-weight:1200;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tmaCalGrid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:0; }
.tmaCalDow{
  padding:10px 0;
  text-align:center;
  font-weight:1100;
  font-size:12px;
  color:var(--muted);
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.tmaCalCell{
  position:relative;
  padding:12px 0;
  text-align:center;
  font-weight:1000;
  font-size:13px;
  cursor:pointer;
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.06);
  border-right:1px solid rgba(15,23,42,.06);
  user-select:none;
}
.tmaCalCell:nth-child(7n){ border-right:none; }
.tmaCalCell.isMuted{ color:rgba(100,116,139,.55); background:#fcfdff; }
.tmaCalCell.isDep{ background: rgba(255,106,0,.06); }
.tmaCalCell.isActive{
  outline:2px solid rgba(255,106,0,.35);
  outline-offset:-2px;
  background: rgba(255,106,0,.10);
}
.tmaCalDot{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  width:6px; height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.tmaCalList{ padding:12px; background:#fff; }
.tmaCalItem{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#fff;
  margin-bottom:10px;
}
.tmaCalL{ font-weight:1100; }
.tmaCalR{ color:var(--muted); font-weight:1000; }

/* Related */
.tmaRelatedGrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.tmaRelCard{
  display:block; text-decoration:none; color:var(--text);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r16);
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.tmaRelImg{ height:150px; background:#0b1220; overflow:hidden; }
.tmaRelImg img{ width:100%; height:100%; object-fit:cover; }
.tmaRelBody{ padding:12px 12px 14px; }
.tmaRelTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tmaRelTitle{ font-weight:1200; font-size:14px; line-height:1.25; }
.tmaRelCta{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:1100; font-size:12.5px;
  padding:9px 11px; border-radius:999px;
  background:#fff2ea; border:1px solid rgba(255,106,0,.22);
  white-space:nowrap;
}

/* Mobile footer CTA */
.tmaFootCta{
  position:fixed; left:0; right:0; bottom:0;
  z-index:60;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(15,23,42,.10);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.tmaFootBtn{
  text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px;
  padding:12px 12px;
  font-weight:1200;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0b1220;
  cursor:pointer;
}
.tmaFootBtnPrimary{
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  border-color:transparent;
  color:#fff;
}

/* Responsive */
@media (max-width:1100px){
  .tmaPageGrid{ grid-template-columns:minmax(0,1fr) 360px; }
  .tmaGalleryMain{ height:340px; }
}
@media (max-width:980px){
  :root{ --tmaStickyTop: 8px; }
  .tmaPageGrid{ grid-template-columns:1fr; }
  .tmaSideCard{ position:static; }
  .tmaGalleryMain{ height:280px; }
  .tmaSplit{ grid-template-columns:1fr; }
  .tmaRelatedGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .tmaContainer{ width:calc(100% - 24px); }
  .tmaGalleryMain{ height:240px; }
  .tmaPillBtn{ padding:10px 12px; font-size:12.5px; }
  .tmaRelatedGrid{ grid-template-columns:1fr; }
}

/* Menu open hide sticky + footer CTA */
body.tmaMenuOpen #tmaStickyNav,
body.tmaMenuOpen .tmaStickyNav{
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease;
}
body.tmaMenuOpen .tmaFootCta{
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(14px) !important;
  transition: opacity .18s ease, transform .18s ease;
}
body.tmaMenuOpen .tmaStickyNav.isFixed{
  position: sticky !important;
  left:auto !important;
  width:auto !important;
}