/* Live-site additions on top of the Passport Stamps mockup styles. */
.ad { text-decoration: none; color: var(--ad-ink, inherit); }
.ad-fallback { gap: 4px; text-align: center; }
.ad-fallback b { font-size: 15px; }
.ad-fallback:hover { background: var(--sun); }
.ad-live { background: none; border-style: solid; height: auto; min-height: 0; }
.ad-banner img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ad-rect.ad-fallback, .ad-rail.ad-fallback { flex-direction: column; }
.flash { padding: 14px 18px; margin: 14px 0 0; background: var(--mint); font-weight: 700; }
.draft-badge { display: inline-block; background: var(--coral); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font: 700 11px "Space Mono"; letter-spacing: .06em; }
.newsmsg.err { color: #b3261e; }
.form-errors { background: #ffe1df; border: 2.5px solid var(--ink); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.form-errors li { margin: 2px 0; }
.vembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vembed { position: relative; }
.pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pager a, .pager span { border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 800; background: #fff; text-decoration: none; color: var(--ink); }
.pager .on { background: var(--ink); color: var(--sun); }
.pager .off { opacity: .4; }
.bgrid-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bcard { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.bcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 2.5px solid var(--ink); }
.bcard .in { padding: 14px 16px 16px; display: grid; gap: 6px; }
.bcard h3 { font-size: 20px; line-height: 1.2; }
.bcard p { margin: 0; font-size: 15px; opacity: .85; }
.chipbar a { text-decoration: none; color: inherit; }
.empty { padding: 30px; text-align: center; }
.legalpage { max-width: 780px; }
.legalpage h2 { font-size: 26px; margin-top: 28px; }
@media (max-width: 1000px) { .bgrid-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bgrid-list { grid-template-columns: 1fr; } }
.cx-svcs a.cxsvc { text-align: left; color: inherit; text-decoration: none; background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: var(--c-radius); padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; transition: transform .15s; }
.cx-svcs a.cxsvc:hover { transform: translateY(-2px); }
.cx-slots .none { grid-column: 1 / -1; font: 400 13px "Space Mono"; opacity: .7; }
.chipbar a.chip { font: 700 14px "Bricolage Grotesque"; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.chipbar a.chip.active { background: var(--ink); color: var(--sun); }
.route-list { list-style: none; margin: 0; padding: 18px; display: grid; gap: 10px; }
.route-list li { display: flex; gap: 12px; align-items: center; font-weight: 800; font-size: 18px; }
.route-list li b { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sun); display: grid; place-items: center; font-size: 14px; flex: none; }
@media print { header, footer, .ad, .side, .wa-cta, .news, .remix, .actions, .crumbs, .ticker { display: none !important; } }
.mapbox.listonly { height: auto; aspect-ratio: auto; min-height: 0; }
.pin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ink); color: #fff; display: grid; place-items: center; font: 800 13px "Bricolage Grotesque"; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.livemap { position: relative; height: 420px; }
.livemap .maplibregl-map, .livemap > div { position: absolute; inset: 0; }
.maplibregl-popup-content { font: 700 14px "Bricolage Grotesque"; border: 2px solid var(--ink); border-radius: 10px; }
.acbox { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; }
.acbox[hidden] { display: none; }
.picks { padding: 20px; margin: 28px 0; background: #fff; }
.picks h3 { font-size: 24px; margin: 6px 0 12px; }
.picks .bk { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.prose a.aff { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.shopcard { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: var(--sun); color: inherit; text-decoration: none; margin-top: 14px; }
.shopcard b { display: block; font-size: 18px; }
.bkc { display: flex; align-items: center; gap: 12px; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #fff; transition: transform .15s, box-shadow .15s; }
.bkc:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.bkc .ic { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 20px; flex: none; }
.bkc b { display: block; font-size: 15px; line-height: 1.2; }
.bkc small { font: 400 11px "Space Mono"; }
.bkc .go { margin-left: auto; font-weight: 800; white-space: nowrap; font-size: 14px; }
.bkc { color: inherit; text-decoration: none; }
.fx, .checklist { padding: 18px; }
.fx h3, .checklist h3 { font-size: 22px; margin: 6px 0 10px; }
.fxrow { display: flex; gap: 8px; }
.fxrow input, .fxrow select { border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px; font: 700 16px "Bricolage Grotesque"; min-width: 0; background: #fff; }
.fxrow input { flex: 1; } .fxrow select { flex: 1.3; }
.fxout { font-size: 24px; margin: 10px 0 2px; }
.checklist .check { display: grid; gap: 8px; }
.checklist .check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.checklist .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); flex: none; }
.checklist .check label:has(input:checked) { text-decoration: line-through; opacity: .6; }
.questions .qa { padding: 14px 16px; margin-bottom: 12px; display: grid; gap: 12px; }
.questions .q, .questions .a { display: flex; gap: 12px; }
.questions .a { margin-left: 30px; padding-top: 12px; border-top: 2px dashed #12121233; }
.questions p { margin: 4px 0 0; }
.questions .av { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--mint); display: grid; place-items: center; font-weight: 800; flex: none; font-size: 13px; }
.questions .av.us { background: var(--blue); color: #fff; font-size: 11px; }
.qform { padding: 14px; display: grid; gap: 10px; margin-top: 14px; position: relative; }
.qform textarea, .qform input { border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; font: 600 15px "Bricolage Grotesque"; width: 100%; min-width: 0; }
.qform textarea { min-height: 90px; }
.qrow { display: flex; gap: 8px; flex-wrap: wrap; } .qrow input { flex: 1 1 180px; }
.disclosure { font-size: 11px; line-height: 1.5; background: #fff7d6; border: 1.5px dashed var(--ink); border-radius: 10px; padding: 8px 12px; margin: 0 0 18px; }
.disclosure a { text-decoration: underline; }
.wa-pill { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 8px; background: #25d366; color: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 10px 14px 10px 12px; font: 800 14px "Bricolage Grotesque"; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }
.wa-pill small { font: 400 11px "Space Mono"; opacity: .9; }
.wa-pill .x { margin-left: 4px; background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; padding: 0 2px; }
.wa-pill[hidden] { display: none; }
@media (max-width: 760px) { .wa-pill { bottom: 70px; right: 12px; padding: 9px 12px; } .wa-pill .t { display: none; } }
@media print { .wa-pill, .disclosure { display: none !important; } }
.igrid a { position: relative; }
.igrid a.carousel::after { content: "❏"; position: absolute; top: 8px; right: 10px; color: #fff; font-size: 18px; text-shadow: 0 1px 3px #0009; }
/* Sidebar boxes always fit their 320px column, whatever is inside them (e.g. long currency names). */
.side { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.side > * { min-width: 0; }
.fxrow { min-width: 0; }
.fxrow input, .fxrow select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.fxrow input { flex: 1 1 40%; } .fxrow select { flex: 1 1 60%; }
.fx small.mono { overflow-wrap: anywhere; }
/* The "Married 3 yrs" stamp pokes out 20px on purpose; keep it inside the screen on narrower windows. */
@media (max-width: 1280px) { .about .ph .stamp { right: 8px; } }
/* Safety net: decorative extras can never make the page scroll sideways. */
html, body { overflow-x: clip; }
/* Columns never grow past the screen because of a fixed-width partner widget (Agoda 320px, 12Go 400px…). */
.book { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.book > *, .pass .main, .bookbox, .split > *, .layout > * { min-width: 0; }
.g12w, .klw, .agw-box, .tripw { max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  .hero-grid, .vgrid, .social-grid, .planner, .book, .about, .news { grid-template-columns: minmax(0, 1fr); }
}
.curpick { display: inline-flex; align-items: center; gap: 6px; font: 700 11px "Space Mono"; letter-spacing: .04em; text-transform: uppercase; }
.curpick select { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 26px 4px 10px; font: 800 13px "Bricolage Grotesque"; background: #fff; color: var(--ink); cursor: pointer; }
footer .curpick { margin-top: 10px; }
.money[data-approx]::before { content: "≈ "; opacity: .7; font-weight: 400; }
.fxall { display: grid; gap: 6px; margin-top: 10px; }
.fxall div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-size: 15px; }
.fxall div b { font-size: 16px; } .fxall div.from { opacity: .55; }

/* Header: 8 menu items + one button must fit on one line; switch to the ☰ menu before anything wraps. */
.nav > .btn { white-space: nowrap; flex: none; }
.nav ul { flex-wrap: nowrap; }
.nav ul a { white-space: nowrap; }
.nav-golink { color: var(--blue); font-weight: 800; }
.nav-mobile-only { display: none; }
@media (max-width: 1360px) { .nav { gap: 14px; } .nav ul { gap: 2px; } .nav ul a { padding: 8px 10px; font-size: 15px; } }
@media (max-width: 1180px) {
  .nav ul, .nav > .btn { display: none; } .menu-btn { display: block; }
  body.menu-open .nav ul { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--bg); padding: 16px; border-bottom: 2.5px solid var(--ink); z-index: 50; }
  body.menu-open .nav-mobile-only { display: list-item; }
}

/* Deals: a long code like SUNNSHANT fits the boarding-pass stub; friendly empty state. */
.pass .stub.stub-code { min-width: 0; }
.pass .stub.stub-code b { font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .02em; white-space: nowrap; }
.pass .stub.stub-code .btn { justify-content: center; padding: 8px 12px; font-size: 13px; }
.deals-empty { max-width: 720px; margin: 0 auto; }
.deals-empty p { max-width: 560px; margin: 8px auto 16px; }

/* Shop */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.pcard { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.pcard-img { position: relative; aspect-ratio: 4/3; background: var(--sun); border-bottom: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 56px; }
.pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-type { position: absolute; left: 10px; top: 10px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font: 700 11px "Space Mono"; }
.pcard .in { padding: 14px 16px 16px; display: grid; gap: 6px; flex: 1; }
.pcard h3 { font-size: 20px; line-height: 1.2; } .pcard p { margin: 0; font-size: 14px; opacity: .85; }
.pcard-price { margin-top: auto; display: flex; gap: 8px; align-items: baseline; }
.pcard-price b { font-size: 22px; } .pcard-price s { opacity: .55; } .pcard-price .owned { color: #138a5a; font-size: 17px; }
.pshow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }
.pshow-media { display: grid; gap: 12px; } .pshow-media img { width: 100%; padding: 0; overflow: hidden; }
.pshow-media .btn { justify-content: center; }
.lock-list { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 6px; font-weight: 600; }
.buybox { padding: 20px; display: grid; gap: 12px; background: #fff; }
.buy-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.buy-price b { font-size: 34px; } .buy-price s { opacity: .55; font-size: 18px; } .buy-price small { color: #138a5a; }
.buyform { display: grid; gap: 10px; }
.buyform input[type=email], .buyform input[name=name], .buyform input[name=coupon] { border: 2.5px solid var(--ink); border-radius: 12px; padding: 11px 12px; font: 600 15px "Bricolage Grotesque"; width: 100%; min-width: 0; }
.buyrow { display: flex; gap: 8px; } .buyrow > * { flex: 1 1 0; min-width: 0; } .coupon-row .btn { flex: 0 0 auto; }
.buy-btn { justify-content: center; font-size: 17px; padding: 14px; }
.coupon-msg { color: #138a5a; } .coupon-msg.err { color: #b3261e; }
.buyform .consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.buyform .consent input { margin-top: 3px; flex: none; }
.product-lock { position: relative; padding: 26px; margin: 10px 0 30px; background: var(--sun); }
.product-lock .lock-fade { position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.product-lock h3 { font-size: 26px; margin: 8px 0; }
.lock-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.purchase { padding: 16px 18px; margin-bottom: 14px; }
.purchase-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.purchase-head b { font-size: 19px; }
.purchase-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 2px dashed #12121226; }
.purchase-actions { display: flex; gap: 8px; flex-wrap: wrap; } .purchase-actions .btn { padding: 8px 12px; font-size: 13px; }
@media (max-width: 860px) { .pshow { grid-template-columns: 1fr; } .buyrow { flex-direction: column; } .coupon-row { flex-direction: row; } }

/* Courses */
.notice { background: #e6f7df; padding: 12px 16px; margin-bottom: 14px; font-weight: 700; }
.course-head { padding: 18px 20px; margin-bottom: 18px; }
.course-bar { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.course-bar span { display: block; height: 100%; background: var(--sun); border-right: 2px solid var(--ink); }
.curriculum { list-style: none; margin: 0; padding: 0; }
.cur-module { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 18px 0 6px; }
.cur-lesson { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 6px; background: #fff; }
.cur-lesson a { color: inherit; font-weight: 700; text-decoration: none; }
.cur-lesson a:hover { text-decoration: underline; }
.cur-lesson small { font-size: 11px; white-space: nowrap; }
.cur-lesson.done .cur-tick { color: #1b8a2e; font-weight: 800; }
.cur-lesson.locked { background: #f4f1ea; }
.cur-lesson.current { background: var(--sun); }
.cur-free { background: var(--blue); color: #fff; border-radius: 999px; padding: 1px 8px; margin-right: 4px; }
.learn { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.learn-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; background: #000; }
.learn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-yt { font-size: 11px; margin: 8px 0 16px; }
.learn-yt a { text-decoration: underline; }
.learn-locked { padding: 24px; }
.learn-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.learn-side .box { padding: 14px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.learn-side .cur-lesson { grid-template-columns: 20px 1fr; padding: 8px 10px; font-size: 14px; }
.learn-side .cur-lesson small { grid-column: 2; }
@media (max-width: 900px) { .learn { grid-template-columns: 1fr; } .learn-side .box { position: static; max-height: none; } }