/* Step 5 – transfers, tours, restaurants, spas (assets/js/extras.js) */
.ex-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.ex-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.ex-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 999px; background: none; font: 600 14px var(--title); color: var(--navy); cursor: pointer; }
.ex-seg button .ic { width: 15px; height: 15px; }
.ex-seg button[aria-selected="true"] { background: var(--navy); color: #fff; }
.ex-dates { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--navy); }
.ex-dates .ic { width: 16px; height: 16px; color: var(--green-d); }
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ex-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r, 20px); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s, 0 8px 24px rgba(5, 56, 99, .08)); }
.ex-h { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.ex-h h3 { margin: 0; font: 600 18px/1.25 var(--title); color: var(--navy); }
.ex-h p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.ex-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--smoke2, #f2f6fa); }
.ex-ic .ic { width: 22px; height: 22px; color: var(--blue); }
.ex-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: border-color .2s, background .2s; }
.ex-link:hover { border-color: var(--green); background: rgba(34, 179, 168, .06); }
.ex-link b { display: block; font: 600 15px/1.3 var(--title); }
.ex-link small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ex-link .ic { flex: none; width: 16px; height: 16px; color: var(--green-d); }
.ex-more { margin: 2px 0 0; display: flex; gap: 16px; flex-wrap: wrap; font: 600 13.5px var(--title); }
.ex-more a { color: var(--green-d); text-decoration: none; }
.ex-more a:hover { text-decoration: underline; }
.ex-tip { display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0; padding-top: 4px; font-size: 13px; color: var(--muted); }
.ex-tip .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--green-d); }
.ex-warn { padding: 10px 12px; border-radius: 12px; background: #fff7e8; color: #7a5a12; }
.ex-warn .ic { color: #c98a10; }
.ex-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 860px) { .ex-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ex-seg { width: 100%; } .ex-seg button { flex: 1; justify-content: center; padding: 9px 8px; font-size: 13px; } }

/* ---------- v2 (Nov 2026): Your stay – destination chips, who-does-what, transfer feature, food & downtime,
   photo experience cards, spa with recovery callout, end banner ---------- */
.ex-top { margin-bottom: 14px; }
.ex-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line, #e3e9ee); }
.ex-dl { padding: 0 6px 0 8px; font: 600 11px var(--title); letter-spacing: .08em; text-transform: uppercase; color: #9aa8b5; }
.ex-dl:nth-of-type(2) { margin-left: 8px; padding-left: 14px; border-left: 1px solid #e3e9ee; }
.ex-dest button { padding: 9px 14px; border: 1.5px solid transparent; border-radius: 11px; background: none; font: 600 14px var(--title); color: #4a5b6b; cursor: pointer; }
.ex-dest button.hu[aria-selected="true"] { background: var(--blue-50); border-color: var(--blue-400); color: var(--blue-700); }
.ex-dest button.tr[aria-selected="true"] { background: var(--sand-50); border-color: var(--sand-400); color: var(--sand-800); }
.ex-dest button:hover { color: var(--navy); }
.ex-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.ex-who li { padding: 10px 14px; border-radius: 12px; background: #f5f8fa; font-size: 13px; line-height: 1.45; color: #5f6a80; }
.ex-who b { color: var(--navy); }
.ex-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 34px 0 14px; font: 700 22px var(--title); color: var(--navy); }
.ex-h2 small { font: 400 14px var(--text, inherit); color: #5f6a80; }
/* transfer feature */
.ex-feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); border: 1px solid #e3e9ee; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 16px 40px -32px rgba(5, 56, 99, .45); }
.ex-fimg img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }
.ex-fbody { padding: 22px 24px; }
.ex-flab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 12.5px var(--title); }
.ex-feat.hu .ex-flab { background: var(--blue-50); color: var(--blue-700); } .ex-feat.tr .ex-flab { background: var(--sand-50); color: var(--sand-800); }
.ex-flab .ic { width: 15px; height: 15px; }
.ex-fbody h3 { margin: 10px 0 12px; font: 700 21px/1.25 var(--title); color: var(--navy); }
.ex-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ex-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #4a5b6b; }
.ex-facts .ic { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: #eef8f7; color: #04847f; box-sizing: border-box; }
.ex-facts b { color: var(--navy); }
.ex-fgo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.ex-fgo .btn { border-radius: 999px; }
.ex-fgo small { font-size: 12.5px; color: #5f6a80; }
/* food & downtime */
.ex-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ex-two .ex-card { border-radius: 18px; }
.ex-two .ex-h { align-items: flex-start; } .ex-two .ex-h p { line-height: 1.5; }
.ex-two .ex-ic { border-radius: 12px; background: #d9f2ef; } .ex-two .ex-ic .ic { color: #04847f; width: 20px; height: 20px; }
.ex-calm { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ex-calm li { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #4a5b6b; }
.ex-calm .ic { flex: none; width: 15px; height: 15px; color: #04847f; }
/* experiences */
.ex-exp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ex-xc { display: flex; flex-direction: column; border: 1px solid #e3e9ee; border-radius: 18px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.ex-xc:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -24px rgba(5, 56, 99, .5); }
.ex-ximg { position: relative; display: block; aspect-ratio: 16 / 10; background: #1b3550 center/cover no-repeat; }
.ex-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #fff; font: 600 11.5px var(--title); color: #04645f; }
.ex-tag.warn { color: #8a5a10; background: #fff7e8; }
.ex-xb { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.ex-xb b { font: 600 15px/1.3 var(--title); color: var(--navy); }
.ex-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--title); color: #04847f; }
.ex-go .ic { width: 14px; height: 14px; }
.ex-more { margin-top: 12px; }
/* spa + recovery callout */
.ex-spa { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.ex-care { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; background: #fff7e8; border: 1px solid #f1dfb8; }
.ex-ci { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #b07a16; }
.ex-ci .ic { width: 20px; height: 20px; }
.ex-care b { display: block; font: 600 16px var(--title); color: #6b4a0d; }
.ex-care p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #6b5a36; }
.ex-xc.sm .ex-ximg { aspect-ratio: auto; flex: 1; min-height: 120px; }
/* end */
.ex-end .ex-endgo { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-end .btn { border-radius: 999px; }
.ex-end .btn.ghost { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px #cfe3e0; }
@media (max-width: 980px) { .ex-feat { grid-template-columns: 1fr; } .ex-fimg img { min-height: 0; aspect-ratio: 16 / 7; } .ex-spa { grid-template-columns: 1fr 1fr; } .ex-care { grid-column: 1 / -1; } .ex-who { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ex-two, .ex-exp { grid-template-columns: 1fr; } .ex-spa { grid-template-columns: 1fr; } .ex-dl:nth-of-type(2) { margin-left: 0; border-left: 0; padding-left: 8px; } .ex-dest { gap: 4px; } .ex-dest button { padding: 8px 11px; font-size: 13px; } .ex-end .ex-endgo { width: 100%; } .ex-end .ex-endgo .btn { flex: 1; justify-content: center; } }
/* v3 – style guide: same destination picker, section titles, pill buttons, tip cards and colours as Flights & Hotels */
.ex-pick { margin-bottom: 8px; }
.ex-pick .fl-dest { grid-template-columns: auto minmax(0, 1fr); }
.ex-who { margin: 4px 0 0 !important; }
.ex-pick .ex-who .fl-t3 { border: 0; background: #f5f8fa; padding: 12px 14px; }
.ex-hh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 40px 0 14px !important; }
.ex-hh small { font: 400 13.5px var(--text, inherit); color: #5f6a80; }
.ex-fgo .fl-go { margin-left: 0; text-decoration: none; }
.ex-feat .ex-flab, .ex-feat.hu .ex-flab, .ex-feat.tr .ex-flab { background: #d9f2ef; color: #04645f; }
.ex-tag, .ex-tag.warn { background: #fff; color: #04645f; }
.ex-care { background: #eef8f7; border: 1px solid #cfece8; border-left: 4px solid #04847f; }
.ex-ci { background: #d9f2ef; color: #04847f; }
.ex-care b { color: var(--navy); } .ex-care p { color: #4a5b6b; }
.ex-go { color: #04847f; }
.ex-two .ex-ic { width: 40px; height: 40px; }
.ex-end .btn.ghost { box-shadow: inset 0 0 0 1px #cfe3e0; }
@media (max-width: 640px) { .ex-pick .fl-dest { grid-template-columns: 1fr; } }
/* step marker and trip dates live in the planner panel, not the hero */
.ex-pickh { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 14px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid #eef2f5; }
.ex-step, .ex-dates2 { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--title); }
.ex-step { padding: 5px 12px 5px 8px; border-radius: 999px; background: #d9f2ef; color: #04645f; }
.ex-step .ic, .ex-dates2 .ic { width: 15px; height: 15px; }
.ex-dates2 { color: #4a5b6b; font-weight: 500; } .ex-dates2 .ic { color: #04847f; } .ex-dates2 b { color: var(--navy); font-weight: 600; }

/* dates sit on the left of the card, clearly visible */
.ex-dates2 { padding: 6px 12px 6px 9px; border-radius: 999px; background: #f2f6f7; color: #4a5b6b; font-size: 13.5px; }
.ex-dates2.on { background: #d9f2ef; color: #04645f; }
.ex-dates2 b { margin-left: 4px; color: var(--navy); }
.ex-dchg { font: 600 13px var(--title); color: #04847f; text-decoration: underline; text-underline-offset: 3px; }
/* end banner buttons never wrap their label */
.ex-end .ex-endgo .btn { white-space: nowrap; }
@media (max-width: 760px) { .ex-end .ex-endgo { flex-wrap: nowrap; } .ex-end .ex-endgo .btn { flex: 1 1 0; justify-content: center; padding-left: 14px; padding-right: 14px; } }