/* ════════════════════════════════════════════════════════════
 DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {--teal: #0E918C;
--teal-dark: #0a6b67;
--teal-light: #e6f5f4;
--teal-pale: #f0f9f8;
--red: #8B1A2B;
--red-light: #fdf0f2;
--bordeaux: #722F37;
--bordeaux-dark: #4e1f24;
--bordeaux-light: #f6ebec;
--sky: #00B4E9;
--gold: #D4A843;
--text: #1e2d2c;
--muted: #607070;
--border: #dde8e7;
--bg: #f7fafa;
--white: #ffffff;
--shadow-sm: 0 2px 8px rgba(14,145,140,.08);
--shadow-md: 0 6px 24px rgba(14,145,140,.12);
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 22px; /* used by .place-card / .ai-recs — added so the var actually resolves */
--trans: all .25s ease;
--ff-head: "Playfair Display", serif;
--ff-body: "Poppins", sans-serif;
--max-content: 1200px;
--max-narrow: 1100px;}
/* ════════════════════════════════════════════════════════════
 RESET & BASE
════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { line-height: 1.25; }
/* ════════════════════════════════════════════════════════════
 TOP BAR
════════════════════════════════════════════════════════════ */
#top-bar { background: var(--teal-dark); color: #fff; font-size: 14px; padding: 8px 0; }
#top-bar .tb-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
#top-bar a { color: #fff; opacity: .9; transition: opacity .2s; }
#top-bar a:hover { opacity: 1; }
#top-bar i { margin-right: 6px; }
#top-bar .tb-left,
#top-bar .tb-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* ════════════════════════════════════════════════════════════
 HEADER & NAV
════════════════════════════════════════════════════════════ */
.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.menu-open > .nav-link { background: var(--teal-light); color: var(--teal-dark); }
.nav-link .fa-chevron-down { font-size: 11px; transition: transform .25s; }
.nav-item:hover > .nav-link .fa-chevron-down,
.nav-item.menu-open > .nav-link .fa-chevron-down { transform: rotate(180deg); }
/* Panels sit flush against the trigger (no dead gap) so the cursor never
   crosses empty space between the link and the panel; the extra grace
   period before closing is handled in JS (see .menu-open below). */
.dropdown, .mega-dropdown { position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateX(var(--mega-shift, 0px)) translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; z-index: 999; }
.nav-item:hover > .dropdown,
.nav-item.menu-open > .dropdown,
.nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateX(var(--mega-shift, 0px)) translateY(0); pointer-events: all; }
/* Fixed footprint: width/padding never change between items or on hover,
   so the panel never resizes or shifts while navigating. */
.dropdown { width: 300px; min-width: 300px; padding: 14px 0; }
.dropdown li a { display: block; padding: 15px 28px; font-size: 16px; line-height: 1.3; color: var(--text); transition: background .18s ease, color .18s ease, box-shadow .18s ease; box-shadow: inset 4px 0 0 transparent; }
.dropdown li a:hover { background: var(--teal-light); color: var(--teal-dark); box-shadow: inset 4px 0 0 var(--teal); }
.mega-dropdown { width: max-content; max-width: calc(100vw - 48px); padding: 32px 40px; left: 50%; transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(8px); }
.nav-item:hover > .mega-dropdown,
.nav-item.menu-open > .mega-dropdown,
.nav-item:focus-within > .mega-dropdown { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(0); }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(190px, max-content)); gap: 6px 56px; align-items: start; }
.mega-col h4 { font-size: 13px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; padding-bottom: 11px; margin-bottom: 6px; border-bottom: 2px solid var(--teal-light); }
.mega-col li a { display: block; padding: 8px 8px; font-size: 15px; line-height: 1.4; color: var(--muted); white-space: nowrap; border-radius: 6px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; box-shadow: inset 3px 0 0 transparent; }
.mega-col li a:hover { color: var(--teal-dark); background: var(--teal-light); box-shadow: inset 3px 0 0 var(--teal); }
/* Between full desktop and the 768px mobile breakpoint, drop to 2 columns
   so wide 4-column panels (sized to their longest label) can't run past
   the edge of smaller laptop screens. */
@media (max-width: 1200px) {
  .mega-cols { grid-template-columns: repeat(2, minmax(190px, max-content)); gap: 24px 56px; }
}
#menu-toggle { display: none; background: none; border: 2px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); font-size: 18px; }
/* ════════════════════════════════════════════════════════════
 HERO
════════════════════════════════════════════════════════════ */
.breadcrumb span { color: var(--gold); }
/* ════════════════════════════════════════════════════════════
 IMAGE SLIDER
════════════════════════════════════════════════════════════ */
#slider-section { background: var(--bg); padding: 40px 24px; }
.slider-wrap { max-width: var(--max-content); margin: 0 auto; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.slides { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 28px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 15px; font-weight: 500; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 17px; color: var(--teal-dark); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: var(--trans); z-index: 10; }
.slider-btn:hover { background: var(--white); box-shadow: var(--shadow-md); }
#prev-btn { left: 18px; }
#next-btn { right: 18px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); border: none; transition: var(--trans); }
.dot.active { background: var(--teal); width: 26px; border-radius: 4px; }
.stat-strip { max-width: var(--max-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; padding: 24px 0 32px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card .s-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.stat-card .s-val { font-size: 18px; font-weight: 700; color: var(--teal-dark); }
/* ════════════════════════════════════════════════════════════
 TAB NAV
════════════════════════════════════════════════════════════ */
.tab-nav { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; display: flex; gap: 2px; overflow-x: auto; }
/* Alternate tab-bar ID variant (used in some pages) */
#tab-bar { background: var(--white); border-bottom: 2px solid var(--border); position: sticky; top: 74px; z-index: 900; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
/* ════════════════════════════════════════════════════════════
 PAGE BODY & SECTION UTILITIES
════════════════════════════════════════════════════════════ */
.page-body { max-width: var(--max-content); margin: 0 auto; padding: 48px 24px; }
.tour-main { min-width: 0; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 48px 0; }
.section-block { padding: 56px 0 0; }
.wrapper { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
section { padding: 10px 0; }
hr.rule { border: none; border-top: 1px solid var(--border); margin: 1.3rem 0; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.text-muted { color: var(--muted); }
.text-sm-muted { font-size: 14px; color: var(--muted); line-height: 1.7; }
.itin-day-summary { margin-top: 14px; }
.icon-teal-mr { color: var(--teal); margin-right: 8px; }
.mcb-price-unit { font-weight: 400; }
footer #logo { color: #fff; }
/* ════════════════════════════════════════════════════════════
 SCROLL ANCHORS
════════════════════════════════════════════════════════════ */
#overview, #itinerary, #services, #hotel, #booking, #reviews { scroll-margin-top: 150px; }
/* ════════════════════════════════════════════════════════════
 OVERVIEW
════════════════════════════════════════════════════════════ */
.tour-desc { font-size: 16px; color: var(--muted); line-height: 1.85; text-align: justify; }
.tour-desc h3 { font-size: 19px; color: var(--text); font-weight: 600; margin: 28px 0 12px; }
.tour-desc ul { padding-left: 0; display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.tour-desc ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.tour-desc ul li::before { content: "✦"; color: var(--gold); flex-shrink: 0; margin-top: 3px; font-size: 12px; }
.tour-desc strong { color: var(--text); }
.overview-lead p { color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 16px; }
.overview-lead p:last-child { margin-bottom: 0; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 24px; }
.overview-text p { color: var(--muted); font-size: 1rem; margin-bottom: 14px; }
.highlights-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); padding: 28px; box-shadow: var(--shadow-sm); }
.highlights-card h3 { font-family: var(--ff-head); font-size: 1.1rem; color: var(--teal-dark); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.highlight-list { list-style: none; }
.highlight-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 0.9rem; color: var(--text); border-bottom: 1px solid var(--teal-light); }
.highlight-list li:last-child { border-bottom: none; }
.hl-icon { color: var(--gold); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
/* Quick facts bar */
.quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 36px; padding: 28px; background: var(--teal-dark); border-radius: var(--radius); }
.qf-item { text-align: center; }
.qf-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.qf-value { font-family: var(--ff-head); font-size: 1.25rem; font-weight: 700; color: var(--gold); }
.qf-sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* ════════════════════════════════════════════════════════════
 ITINERARY
════════════════════════════════════════════════════════════ */
.itin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.itin-title { font-family: var(--ff-head); font-size: 26px; display: flex; align-items: center; gap: 10px; }
.itin-title i { color: var(--teal); }
.btn-expand-all { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); transition: var(--trans); }
.btn-expand-all:hover { background: var(--teal-light); color: var(--teal-dark); border-color: var(--teal); }
.btn-expand-all.expanded .t-expand { display: none; }
.btn-expand-all .t-collapse { display: none; }
.btn-expand-all.expanded .t-collapse { display: inline; }
.expand-all-btn { background: none; border: 2px solid var(--teal); color: var(--teal-dark); border-radius: 50px; padding: 7px 18px; font-size: 13px; font-weight: 600; transition: var(--trans); }
.expand-all-btn:hover { background: var(--teal); color: #fff; }
/* expandAllBtn ID variant (alternate style used in some pages) */
.itin-day.open { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.day-badge { font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.itin-day-head h3 { font-size: 17px; font-weight: 600; color: var(--text); margin: 0; }
.btn-toggle { background: none; border: none; color: var(--muted); font-size: 20px; transition: transform .3s; }
.itin-day.open .btn-toggle { transform: rotate(180deg); color: var(--teal); }
.itin-body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.itin-day.open .itin-body { max-height: 1800px; }
.itin-inner { padding: 24px; }
.itin-body-inner { padding: 0 22px 22px; border-top: 1px solid var(--border); }
.itin-body-inner p { color: var(--muted); font-size: 0.93rem; margin-top: 14px; line-height: 1.75; }
/* Alternate accordion head layout (time-badge style) */
.itin-time { background: var(--teal-dark); color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.itin-arrow, .itin-chevron { color: var(--muted); font-size: 13px; flex-shrink: 0; transition: transform .25s; }
.itin-day.open .itin-arrow,
.itin-day.open .itin-chevron { transform: rotate(180deg); }
.itin-day-body p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 10px; }
.itin-day-body p:last-child { margin-bottom: 0; }
.step { display: flex; gap: 16px; margin-bottom: 24px; position: relative; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: -24px; width: 2px; background: var(--border); }
.step-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-light); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; z-index: 1; }
.step p { font-size: 15px; color: var(--muted); line-height: 1.75; margin: 0; }
.step p strong { color: var(--text); }
.step small { display: block; margin-top: 6px; font-size: 13px; font-style: italic; color: #9aacab; }
.sight-list { margin: 10px 0 0; padding-left: 0; display: flex; flex-direction: column; gap: 9px; }
.sight-list li { font-size: 15px; color: var(--muted); padding-left: 20px; position: relative; }
.sight-list li::before { content: "•"; position: absolute; left: 0; color: var(--teal); font-weight: bold; }
.day-footer { padding: 14px 24px; background: var(--bg); border-top: 1px solid var(--border); }
.btn-read-more { background: none; border: none; color: var(--teal); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.btn-read-more:hover { text-decoration: underline; }
.addon-strip { background: var(--bg); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; }
.addon-strip p { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.addon-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addon-c { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 14px; transition: var(--trans); text-decoration: none; color: inherit; }
.addon-c:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.addon-c .ico { font-size: 24px; }
.addon-c strong { font-size: 14px; display: block; margin-bottom: 2px; }
.addon-c span { font-size: 13px; color: var(--muted); }
.addon-c .arr { color: var(--teal); font-size: 20px; margin-left: auto; }
/* ════════════════════════════════════════════════════════════
 INCLUSIONS / EXCLUSIONS
════════════════════════════════════════════════════════════ */
.inc-box, .exc-box { border-radius: var(--radius-lg); padding: 32px; }
.inc-box { background: linear-gradient(135deg, rgba(14,145,140,.07), rgba(14,145,140,.02)); border: 1px solid rgba(14,145,140,.2); }
.exc-box { background: linear-gradient(135deg, rgba(139,26,43,.05), rgba(139,26,43,.02)); border: 1px solid rgba(139,26,43,.15); }
.box-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 24px; }
.inc-box .box-title { color: var(--teal-dark); }
.exc-box .box-title { color: var(--red); }
.svc-list { display: flex; flex-direction: column; gap: 14px; }
.svc-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.svc-list li i { flex-shrink: 0; margin-top: 2px; font-size: 14px; }
.inc-box .svc-list li i { color: var(--teal); }
.exc-box .svc-list li i { color: var(--red); }
/* Card variants */
.inc-card, .exc-card { border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); }
.exc-card { background: #fdf5f5; border-top: 3px solid var(--red); }
.inc-card h3, .exc-card h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.inc-card h3 i { color: var(--teal); }
.exc-card h3 { color: var(--red); }
.exc-card h3 i { color: var(--red); }
.inc-list, .exc-list { display: flex; flex-direction: column; gap: 10px; }
.inc-list li, .exc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.exc-list li i { color: var(--red); margin-top: 3px; flex-shrink: 0; }
/* Services grid variant */
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.service-card h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid; }
.service-card.included h3 { color: var(--teal-dark); border-color: var(--teal); }
.service-card.excluded h3 { color: var(--red); border-color: #C9384E; }
.service-list li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 0.88rem; color: var(--text); border-bottom: 1px dashed var(--border); }
.service-list li:last-child { border-bottom: none; }
.s-icon-yes { color: #22805A; font-weight: 700; }
.s-icon-no { color: #C9384E; font-weight: 700; }
.highlights-grid .inc-list li { font-size: 15px; color: var(--text); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.highlights-grid .inc-list li:last-child { border-bottom: none; }
.highlights-grid .inc-list li i.fa-check { color: var(--teal); font-size: 13px; margin-top: 4px; }
/* ════════════════════════════════════════════════════════════
 HOTEL / PRACTICAL INFO
════════════════════════════════════════════════════════════ */
.hotel-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.hotel-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 18px; color: var(--text); }
.hotel-card ul li { font-size: 15px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
.hotel-card ul li i { color: var(--teal); width: 18px; text-align: center; }
.hotel-note { margin-top: 20px; background: var(--teal-light); border-radius: 8px; padding: 16px 20px; font-size: 15px; color: var(--teal-dark); line-height: 1.7; }
.hotel-info-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 0; }
.hotel-info-row { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; border-bottom: 1px solid var(--border); }
.hotel-info-row:last-child { border-bottom: none; }
.hotel-info-row > i { color: var(--teal); font-size: 18px; margin-top: 3px; flex-shrink: 0; width: 20px; text-align: center; }
.hotel-info-row h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.hotel-info-row p { font-size: 14px; color: var(--muted); line-height: 1.7; }
/* ════════════════════════════════════════════════════════════
 BOOKING
════════════════════════════════════════════════════════════ */
.form-mode-tab:hover:not([aria-selected="true"]) { background: var(--teal-light); }
.form-panel-intro { color: var(--muted); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.price-display { font-family: var(--ff-head); margin-bottom: 28px; }
.price-display .amount { font-size: 48px; font-weight: 700; color: var(--gold); }
.price-display .per { font-size: 15px; opacity: .75; }
.trust-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.trust-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.trust-list li i { color: var(--gold); width: 16px; }
.alt-contact { font-size: 14px; opacity: .75; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
.alt-contact a { color: var(--gold); font-weight: 600; }
.booking-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.booking-panel { padding: 28px; }
/* Booking info cards */
.booking-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0 6px; }
.booking-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 22px 20px; }
.booking-card.gold-top { border-top-color: var(--gold); }
.booking-card h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark); margin-bottom: 12px; }
.booking-card.gold-top h4 { color: #a07a20; }
/* Payment pills */
.pay-methods { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.pay-pill { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 50px; padding: 8px 16px; font-size: 14px; color: var(--text); font-weight: 500; }
.pay-pill i { color: var(--teal); font-size: 15px; }
/* ════════════════════════════════════════════════════════════
 TICKET STEPPER
════════════════════════════════════════════════════════════ */
.stepper-section { margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--white); border-bottom: 1px solid var(--border); }
.t-name, .ticket-label { font-size: 15px; font-weight: 600; color: var(--text); }
.t-price, .ticket-price { font-size: 13px; color: var(--muted); }
.stepper-ctrl, .stepper { display: flex; align-items: center; gap: 14px; }
.step-val, .qty { font-size: 17px; font-weight: 700; width: 30px; text-align: center; min-width: 22px; }
.t-sub, .ticket-sub { font-size: 15px; font-weight: 600; color: var(--teal-dark); min-width: 52px; text-align: right; }
.stepper-total { display: flex; justify-content: space-between; padding: 16px 18px; background: var(--teal-dark); color: #fff; font-weight: 700; border-radius: 0 0 var(--radius) var(--radius); }
.grand-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 14px 0 0; border-top: 2px solid var(--border); }
.grand-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
#grandTotal { font-family: var(--ff-head); font-size: 1.6rem; font-weight: 700; color: var(--teal-dark); }
/* Price summary */
.price-summary { background: var(--teal-light); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.price-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.price-total { font-size: 16px; font-weight: 700; color: var(--teal-dark); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
/* ════════════════════════════════════════════════════════════
 FORM FIELDS
════════════════════════════════════════════════════════════ */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.field input,
.field textarea,
.field select { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; font-family: var(--ff-body); color: var(--text); background: var(--white); transition: var(--trans); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.1); }
.field textarea { resize: vertical; min-height: 90px; }
/* Form group variant */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group input,
.form-group textarea,
.form-group select { border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 14px; font-family: var(--ff-body); font-size: 14px; color: var(--text); background: var(--white); transition: border-color .2s; outline: none; }
.form-group input:focus,
.form-group textarea:focus { border-color: var(--teal); }
.form-group textarea { resize: vertical; }
/* Form row variant */
.form-row label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.9rem; font-family: var(--ff-body); background: var(--white); color: var(--text); transition: border-color 0.2s; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--teal); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Submit / CTA buttons */
/* NOTE: superseded by the later, wider .btn-submit rule further down this file
 (search for "WIDTH-CONSISTENCY FIX" section) which adds the gold border and
 pill shape used site-wide today. Left here only so nothing else that still
 references padding/border-radius from this rule breaks; do not edit the
 border here expecting it to show — edit the later rule instead. */
.submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%); color: var(--white); font-size: 1rem; font-weight: 700; border: 2px solid var(--gold); border-radius: 8px; cursor: pointer; margin-top: 16px; transition: opacity 0.2s; letter-spacing: 0.03em; }
.submit-btn:hover { opacity: 0.9; }
.btn-book-now { width: 100%; background: var(--red); color: #fff; border: 2px solid var(--gold); border-radius: 50px; padding: 14px 32px; font-size: 15px; font-weight: 700; font-family: var(--ff-body); cursor: pointer; transition: var(--trans); display: inline-block; text-align: center; }
.btn-book-now:hover { background: #6e1220; }
/* Form messages */
#formMsg { font-size: 14px; margin-top: 12px; display: none; line-height: 1.55; }
/* ════════════════════════════════════════════════════════════
 BOOKING FORM — reservation / inquiry (dedicated additions)
════════════════════════════════════════════════════════════ */
/* Bordeaux border around the whole booking area so it reads as
 a distinct, "signed" section at a glance. */
#booking .booking-wrap {border: 2px solid var(--bordeaux);
border-radius: var(--radius-lg);
padding: 28px;
background: var(--white);
/* Form column gets 2fr vs summary's 1fr, i.e. the form itself always
 occupies at least a third of the booking area's width. */
grid-template-columns: 1fr 2fr;}
#booking .booking-form { background: var(--bg); }
/* Two-inputs-per-row layout for the reservation / inquiry forms */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-grid-2 .form-group { margin-bottom: 0; }
@media (max-width: 560px) { .field-grid-2 { grid-template-columns: 1fr; } }
/* Private vs Group tour type toggle */
.tour-type-toggle { display: flex; gap: 12px; margin-bottom: 18px; }
.tour-type-option { flex: 1; position: relative; display: flex; }
.tour-type-option input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.tour-type-card { flex: 1; display: flex; flex-direction: column; gap: 3px; border: 2px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--white); transition: var(--trans); pointer-events: none; }
.tour-type-option input:checked + .tour-type-card { border-color: var(--bordeaux); background: var(--bordeaux-light); box-shadow: 0 0 0 1px var(--bordeaux); }
.tour-type-option input:focus-visible + .tour-type-card { outline: 2px solid var(--teal); outline-offset: 2px; }
.tour-type-name { font-size: 14px; font-weight: 700; color: var(--text); }
.tour-type-option input:checked + .tour-type-card .tour-type-name { color: var(--bordeaux-dark); }
.tour-type-price { font-size: 12.5px; color: var(--muted); }
/* Closed tour type (see TOUR_AVAILABILITY in scripts.js) */
.tour-type-option.unavailable { pointer-events: none; }
.tour-type-option.unavailable input { cursor: not-allowed; }
.tour-type-option.unavailable .tour-type-card { opacity: .5; background: var(--bg); border-style: dashed; }
/* Terms & privacy acceptance checkbox (replaces the old maths check) */
.terms-row { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; }
.terms-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bordeaux); flex-shrink: 0; cursor: pointer; }
.terms-row label { font-size: 13.5px; color: var(--muted); line-height: 1.55; cursor: pointer; }
.terms-row a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
 REVIEWS
════════════════════════════════════════════════════════════ */
.review-summary { display: flex; align-items: center; gap: 36px; background: var(--teal-light); border-radius: var(--radius-lg); padding: 32px; margin-bottom: 36px; }
.rs-score .big, .rs-big { font-size: 60px; font-family: var(--ff-head); font-weight: 700; color: var(--teal-dark); line-height: 1; }
.rs-score .stars, .rs-stars, .score-stars { color: var(--gold); font-size: 24px; margin: 4px 0; }
.rs-score small, .rs-count, .score-count { font-size: 13px; color: var(--muted); }
.bar-row { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 7px; }
.bar-label { width: 64px; color: var(--muted); }
.bar-track { flex: 1; background: var(--border); border-radius: 4px; height: 9px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--teal); border-radius: 4px; transition: width 1s ease; }
.bar-pct { width: 34px; color: var(--muted); }
.rc-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.rc-name { font-weight: 600; font-size: 16px; }
.rc-meta, .rc-date { font-size: 13px; color: var(--muted); }
.rc-stars, .review-stars, .star-picker .star-btn { color: var(--gold); font-size: 15px; }
.rc-tag { display: inline-block; margin-top: 12px; background: var(--teal-light); color: var(--teal-dark); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 50px; }
.score-big { font-family: var(--ff-head); font-size: 52px; color: var(--teal-dark); line-height: 1; }
/* ════════════════════════════════════════════════════════════
 LEAVE A COMMENT
════════════════════════════════════════════════════════════ */
.comment-section .section-label { margin-bottom: 8px; }
.comment-form { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); padding: 28px; margin-top: 8px; }
.comment-form h3 { font-family: var(--ff-head); font-size: 1.2rem; color: var(--teal-dark); margin-bottom: 16px; }
.comment-star-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.comment-star-pick label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.star-row, .star-btns, .star-picker { display: flex; gap: 4px; margin-bottom: 14px; align-items: center; }
.star-btn.lit,
.star-btn:hover { color: var(--gold); }
.comment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.comment-msg { display: none; font-size: 14px; margin-top: 10px; line-height: 1.5; }
/* ════════════════════════════════════════════════════════════
 SIMILAR TOURS / PREFERENCE CARDS
════════════════════════════════════════════════════════════ */
.similar-tours-section { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 40px; }
.pref-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); margin-bottom: 6px; }
.pref-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 6px; }
.pref-meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.pref-price { font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.pref-footer { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.btn-pref-submit { padding: 12px 28px; background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; transition: var(--trans); }
.btn-pref-submit:hover { background: var(--teal-dark); transform: translateY(-1px); }
.pref-hint { font-size: 13px; color: var(--muted); }
#prefMsg { font-size: 14px; color: var(--teal-dark); margin-top: 12px; display: none; }
/* Simple pill card variant */
.pref-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
/* ════════════════════════════════════════════════════════════
 FEATURED SUMMARY
════════════════════════════════════════════════════════════ */
.featured-tour { background: var(--bg); border: 2px solid var(--gold); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-md); margin-bottom: 2.5rem; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.featured-col h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .5rem; }
.featured-col li { font-size: 15px; color: var(--text); padding: .28rem 0 .28rem 1.6rem; position: relative; }
.featured-col li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.featured-col li.x::before { content: "✗"; color: var(--red); }
/* ════════════════════════════════════════════════════════════
 CANCELLATION TABLE
════════════════════════════════════════════════════════════ */
.cancel-table-wrap { overflow-x: auto; margin: 18px 0; }
.cancel-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cancel-table thead tr { background: var(--teal-dark); color: #fff; }
.cancel-table th { padding: 13px 18px; text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.cancel-table td { padding: 13px 18px; border-bottom: 1px solid var(--border); color: var(--muted); line-height: 1.55; }
.cancel-table tbody tr:last-child td { border-bottom: none; }
.cancel-table tbody tr:nth-child(even) td { background: var(--bg); }
.cancel-table .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 50px; }
.badge-green { background: #e6f5f4; color: var(--teal-dark); }
.badge-amber { background: #fef9ec; color: #a07a20; }
.badge-red { background: var(--red-light); color: var(--red); }
/* ════════════════════════════════════════════════════════════
 POLICY NOTICES
════════════════════════════════════════════════════════════ */
.policy-notice { background: var(--teal-light); border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin: 18px 0; display: flex; gap: 14px; align-items: flex-start; }
.policy-notice i { color: var(--teal); margin-top: 2px; flex-shrink: 0; }
.policy-notice p { font-size: 14.5px; color: var(--teal-dark); margin: 0; line-height: 1.65; }
.policy-warning { background: #fef9ec; border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin: 18px 0; display: flex; gap: 14px; align-items: flex-start; }
.policy-warning i { color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.policy-warning p { font-size: 14.5px; color: #6b5000; margin: 0; line-height: 1.65; }
/* ════════════════════════════════════════════════════════════
 POLICY PAGE
════════════════════════════════════════════════════════════ */
.policy-hero { background: linear-gradient(135deg, var(--teal-dark) 0%, #1a4a48 60%, #2d1a0e 100%); color: #fff; padding: 64px 24px 52px; text-align: center; position: relative; overflow: hidden; }
.policy-hero::before { content: ""; position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1641984745983-62e4c5e2ce35?w=1600&q=80") center/cover; opacity: .18; }
.policy-hero .hero-inner { position: relative; max-width: 860px; margin: 0 auto; }
.policy-hero h1 { font-family: var(--ff-head); font-size: clamp(26px, 4vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: 14px; }
.policy-hero h1 em { color: var(--gold); font-style: normal; }
.policy-hero p { font-size: 16px; opacity: .88; max-width: 620px; margin: 0 auto 28px; line-height: 1.75; }
.policy-tabs-bar { background: var(--white); border-bottom: 2px solid var(--border); position: sticky; top: 74px; z-index: 900; }
.policy-tabs-inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.policy-tabs-inner::-webkit-scrollbar { display: none; }
.ptab { flex-shrink: 0; padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border: none; background: none; border-bottom: 3px solid transparent; transition: var(--trans); cursor: pointer; white-space: nowrap; }
.ptab:hover { color: var(--teal-dark); }
.ptab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.policy-layout { max-width: var(--max-narrow); margin: 0 auto; padding: 56px 24px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.policy-sidebar { position: sticky; top: 130px; }
.sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.sidebar-links { list-style: none; }
.sidebar-links li + li { margin-top: 2px; }
.sidebar-links a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 13.5px; color: var(--text); border-radius: 7px; transition: var(--trans); }
.sidebar-links a:hover,
.sidebar-links a.active { background: var(--teal-light); color: var(--teal-dark); }
.sidebar-links a i { width: 16px; text-align: center; color: var(--teal); font-size: 13px; }
.sidebar-links a.active i { color: var(--teal-dark); }
.sidebar-cta { margin-top: 28px; background: var(--teal-dark); border-radius: var(--radius); padding: 20px 18px; color: #fff; }
.sidebar-cta p { font-size: 13px; opacity: .85; margin-bottom: 14px; line-height: 1.6; }
.sidebar-cta a { display: block; background: var(--gold); color: #1e2d2c; font-size: 13px; font-weight: 700; text-align: center; padding: 10px; border-radius: 7px; transition: var(--trans); }
.sidebar-cta a:hover { background: #c49435; }
.policy-content section { padding: 0 0 56px; border-bottom: 1px solid var(--border); }
.policy-content section:last-child { border-bottom: none; padding-bottom: 0; }
.policy-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 8px; }
.policy-content h2 { font-family: var(--ff-head); font-size: clamp(20px, 2.5vw, 28px); color: var(--text); margin-bottom: 18px; line-height: 1.25; }
.policy-content p { font-size: 15.5px; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }
.policy-content p:last-child { margin-bottom: 0; }
.policy-sub { font-size: 15px; font-weight: 700; color: var(--text); margin: 24px 0 10px; display: flex; align-items: center; gap: 9px; }
.policy-sub i { color: var(--teal); font-size: 14px; }
.info-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.info-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.info-list li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
/* ════════════════════════════════════════════════════════════
 COMMITMENT BANNER
════════════════════════════════════════════════════════════ */
.commitment-banner { background: linear-gradient(135deg, var(--teal-dark) 0%, #12504d 100%); border-radius: var(--radius-lg); padding: 40px 36px; text-align: center; color: #fff; margin-top: 56px; }
.commitment-banner i { font-size: 36px; color: var(--gold); margin-bottom: 16px; display: block; }
.commitment-banner h3 { font-family: var(--ff-head); font-size: 24px; margin-bottom: 12px; }
.commitment-banner p { font-size: 15px; opacity: .88; max-width: 540px; margin: 0 auto 24px; line-height: 1.75; }
.commitment-banner a { display: inline-block; background: var(--gold); color: #1e2d2c; font-weight: 700; font-size: 14px; padding: 13px 32px; border-radius: 50px; transition: var(--trans); }
.commitment-banner a:hover { background: #c49435; }
/* ════════════════════════════════════════════════════════════
 PERFECT FOR STRIP
════════════════════════════════════════════════════════════ */
.perfect-for-strip { background: var(--teal-light); padding: 36px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.perfect-for-inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
.perfect-for-inner h3 { font-family: var(--ff-head); font-size: 1.15rem; color: var(--teal-dark); margin-bottom: 20px; text-align: center; }
.pf-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pf-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 50px; padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--text); transition: var(--trans); }
.pf-pill i { color: var(--teal); font-size: 13px; }
.pf-pill:hover { border-color: var(--teal); color: var(--teal-dark); }
/* ════════════════════════════════════════════════════════════
 WHY TRAVELLERS LOVE
════════════════════════════════════════════════════════════ */
.why-love { background: var(--white); padding: 56px 0 48px; }
.why-love-inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 32px; }
.wl-card { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 24px 20px; text-align: center; }
.wl-card i { font-size: 28px; color: var(--teal); margin-bottom: 12px; }
.wl-card h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.wl-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }
/* ════════════════════════════════════════════════════════════
 ROUTE MAP
════════════════════════════════════════════════════════════ */
.route-map { background: var(--bg); padding: 48px 0; border-top: 1px solid var(--border); }
.route-map-inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
.route-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 28px; row-gap: 16px; }
.route-stop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; flex: 1; min-width: 90px; }
.route-dot { width: 42px; height: 42px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(14,145,140,.25); }
.route-label { font-size: 12px; font-weight: 600; color: var(--text); max-width: 90px; line-height: 1.3; }
.route-arrow { font-size: 18px; color: var(--teal); padding: 0 4px; flex-shrink: 0; align-self: flex-start; margin-top: 11px; }
/* ════════════════════════════════════════════════════════════
 FAQ
════════════════════════════════════════════════════════════ */
.faq-section { padding: 48px 0 56px; background: var(--white); }
.faq-inner { max-width: var(--max-narrow); margin: 0 auto; padding: 0 24px; }
.faq-list { margin-top: 24px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--white); overflow: hidden; }
.faq-q { width: 100%; text-align: left; padding: 16px 20px; background: none; border: none; font-size: 0.95rem; font-weight: 600; color: var(--teal-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-q:hover { background: var(--teal-light); }
.faq-chevron { transition: transform 0.25s; font-size: 0.8rem; flex-shrink: 0; }
.faq-a { display: none; padding: 0 20px 16px; font-size: 0.9rem; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--border); }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
/* ════════════════════════════════════════════════════════════
 MISC UTILITIES
════════════════════════════════════════════════════════════ */
.stop-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--teal-light); color: var(--teal-dark); padding: 3px 10px; border-radius: 4px; margin-bottom: 8px; }
.stop-name { font-family: var(--ff-head); font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.stop-desc { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 8px; }
.stop-note { display: inline-block; background: rgba(212,168,67,.1); border-left: 3px solid var(--gold); padding: 8px 14px; font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 6px; border-radius: 0 4px 4px 0; }
.timeline-bar { background: var(--teal-dark); color: #fff; border-radius: var(--radius); padding: 28px 32px; }
.timeline-row { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.timeline-row:last-child { border-bottom: none; }
.tl-time { font-family: var(--ff-head); font-size: 1.1rem; color: var(--gold); white-space: nowrap; min-width: 80px; }
.tl-event { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 28px; }
.card-title { font-family: var(--ff-head); font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.check-list li { font-size: 14px; color: var(--muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.check-list li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.seo-block { background: var(--bg); padding: 48px 0; }
.seo-prose p { font-size: 15px; color: var(--muted); line-height: 1.85; margin-bottom: 16px; }
.seo-prose h3 { font-family: var(--ff-head); font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 28px 0 10px; }
.social-links { display: flex; gap: 16px; }
.social-links a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: .7; transition: var(--trans); color: #fff; }
.social-links a:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }
.license-badge { background: rgba(139,26,43,.5); border-radius: 6px; padding: 8px 14px; font-size: 12px; margin-top: 12px; }
/* ════════════════════════════════════════════════════════════
 FOOTER
════════════════════════════════════════════════════════════ */
footer, #site-footer { background: #0d2424; color: rgba(255,255,255,.8); }
.footer-logo { font-family: var(--ff-head); font-size: 22px; color: #fff; margin-bottom: 14px; }
.footer-about { font-size: 13.5px; line-height: 1.8; opacity: .75; margin-bottom: 20px; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; transition: var(--trans); }
.footer-socials a:hover { background: var(--teal); }
.footer-col h4, .fg-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 16px; }
.footer-col ul, .fg-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-col ul li a, .fg-col a { font-size: 13.5px; color: #c8d8d7; opacity: .75; transition: var(--trans); display: block; padding: 3px 0; }
.footer-col ul li a:hover, .fg-col a:hover { opacity: 1; padding-left: 6px; color: var(--gold); }
/* Two links side by side in one footer row */
.fg-col li.footer-inline, .footer-col li.footer-inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.fg-col li.footer-inline a, .footer-col li.footer-inline a { display: inline-block; }
.fg-col li.footer-inline a:hover, .footer-col li.footer-inline a:hover { padding-left: 0; }
.footer-inline .footer-sep { font-size: 10px; color: var(--gold); opacity: .75; flex-shrink: 0; }
.footer-col p, .fg-col p { font-size: 13.5px; color: #c8d8d7; opacity: .75; }
.fg-col .phone { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.fg-col .email { color: var(--teal); margin-bottom: 14px; display: block; }
.page-footer { background: var(--teal-dark); color: rgba(255,255,255,0.7); text-align: center; padding: 28px 24px; font-size: 0.82rem; }
.page-footer a { color: var(--gold); text-decoration: none; }
.page-footer .footer-logo { font-family: var(--ff-head); font-size: 1.3rem; color: var(--white); margin-bottom: 8px; }
/* ════════════════════════════════════════════════════════════
 CASCADE-ORDER FIX — base rules relocated here from further down
 this file. Each one used to be declared AFTER the @media rule that
 was supposed to override it on tablet/mobile; since an unqualified
 rule always wins over an earlier media-scoped rule for the same
 property, that made every one of these "stuck" on its desktop
 layout regardless of screen width (this is also what was causing
 the footer to stay unfolded on mobile). Moving them above the
 RESPONSIVE section fixes that without changing any value except
 where noted.
════════════════════════════════════════════════════════════ */
/* Desktop nav bar (hidden on mobile by the 768px breakpoint below) */
#main-nav {display: flex; gap: 2px; align-items: center; flex-wrap: nowrap;}
.nav-link {display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 14.5px; line-height: 1; font-weight: 600; color: var(--text); letter-spacing: .01em; text-transform: uppercase; border-radius: 6px; transition: var(--trans); white-space: nowrap;}
/* Hero image-slider slide (shorter on mobile via the 768px breakpoint below) */
.slide {min-width: 100%; position: relative; height: 540px; overflow: hidden; background: #1a4a48;}
/* Page shell padding (tighter on small screens via the 480px breakpoint below) */
.tour-layout {max-width: 1400px; margin: 0 auto; padding: 52px 32px;}
/* Booking section layout (collapses to 1 column via the 1024px breakpoint below) */
.booking-wrap {display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; align-items: start;}
.booking-form-wrap {background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px;}
/* "Explore More" preference-card grid (collapses via the 1024/768/480px breakpoints below) */
.pref-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
/* Footer grid — first column 15% wider than an even split, that 15%
 taken evenly from the other three columns (1.15fr : 0.95fr : 0.95fr : 0.95fr).
 Collapses to 2/1 columns via the 1024/900/768px breakpoints below. */
.footer-inner {max-width: none; width: 100%; margin: 0 auto; padding: 56px 40px 40px; display: grid; grid-template-columns: 1.15fr 0.95fr 0.95fr 0.95fr; gap: 40px; text-align: left; box-sizing: border-box;}
/* Footer legal bar (centers on mobile via the 768px breakpoint below) */
.footer-bottom {max-width: none; width: 100%; margin: 0 auto; padding: 28px 40px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; text-align: left; font-size: 12px; opacity: .6; flex-wrap: wrap; gap: 8px; box-sizing: border-box;}
/* Review cards — single stacked column (long-form testimonial text reads
 better full-width than squeezed into a 3-up grid). This supersedes an
 older 3-column grid definition + its now-redundant 768px override,
 both removed further down this file. */
.reviews-grid {display: flex; flex-direction: column; gap: 24px;}
/* ════════════════════════════════════════════════════════════
 BACK TO TOP
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
 BREADCRUMB BAR (standalone variant)
════════════════════════════════════════════════════════════ */
.breadcrumb-bar { background: var(--teal-dark); padding: 10px 24px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.breadcrumb-bar a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--gold); }
.breadcrumb-bar span { margin: 0 6px; }
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 1100px
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {.policy-layout { grid-template-columns: 1fr; }
.policy-sidebar { position: static; }
.sidebar-links { display: none; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 1024px
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {:root { --max-content: 100%; }
.booking-wrap { grid-template-columns: 1fr; }
#booking .booking-wrap { grid-template-columns: 1fr; }
.pref-grid { grid-template-columns: 1fr 1fr; }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 900px
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {.footer-inner { grid-template-columns: 1fr 1fr; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 768px
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {body { font-size: 16px; }
#main-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 74px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
#main-nav.open { display: flex; }
.nav-item { border-bottom: 1px solid var(--border); width: 100%; }
.nav-link { padding: 14px 20px; border-radius: 0; width: 100%; justify-content: space-between; text-align: left; }
.mega-dropdown, .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-top: 1px solid var(--border); display: none; width: 100%; border-radius: 0; }
.nav-item.mob-open > .mega-dropdown,
.nav-item.mob-open > .dropdown { display: block; }
.mega-cols { grid-template-columns: 1fr; gap: 4px; }
.mega-col { padding: 14px 20px; }
.mega-col h4 { white-space: normal; }
.mega-col li a { white-space: normal; padding: 12px 4px; font-size: 15.5px; }
.dropdown { width: 100%; }
.dropdown li a { padding: 14px 20px; }
#menu-toggle { display: flex; align-items: center; }
.inc-exc-grid,
.booking-wrap,
.featured-grid { grid-template-columns: 1fr; }
#booking .booking-wrap { grid-template-columns: 1fr; padding: 20px; }
.field-row, .form-grid { grid-template-columns: 1fr; }
.addon-cards { grid-template-columns: 1fr; }
.review-summary { flex-direction: column; }
.slide { height: 260px; }
.itin-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.pref-grid { grid-template-columns: 1fr 1fr; }
.comment-form-grid { grid-template-columns: 1fr; }
.pref-cards-grid { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 28px; }
.footer-bottom { flex-direction: column; text-align: center; }
.overview-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 700px
════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {.two-col { grid-template-columns: 1fr; }
.services-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 640px
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {.booking-info-grid { grid-template-columns: 1fr; }
.route-arrow { display: none; }
.route-stop { min-width: 70px; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 500px
════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {.form-2col { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════
 RESPONSIVE — 480px
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {.pref-grid { grid-template-columns: 1fr; }
.pref-cards-grid { grid-template-columns: 1fr; }
.tour-layout { padding: 28px 16px; }
.booking-form-wrap { padding: 20px 16px; }
}
/* ════════════════════════════════════════════════════════════
 YALOVA PAGE — EXTENDED STYLES (no sidebar, full-width)
════════════════════════════════════════════════════════════ */
/* Full-width single column layout */
.yalova-main { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.yalova-section { padding-bottom: 60px; border-bottom: 1px solid var(--border); margin-bottom: 60px; }
.yalova-section:last-child { border-bottom: none; }
/* Hero slider enhancements — base .slide rule consolidated up into the
 CASCADE-ORDER FIX block above (was overriding the mobile breakpoint) */
/* Attractions grid */
.attractions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
@media (max-width: 900px) { .attractions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .attractions-grid { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════
 SHARED HOMEPAGE-TYPE COMPONENTS
 (hero slider shell, category sections, destination-focus panels,
 tour-card grid, reviews, cta banner, footer aliases, trust strip)
 Consolidated here so every page linking styles.css renders these
 consistently, instead of each page re-declaring its own copy.
════════════════════════════════════════════════════════════ */
/* Hero slider shell + pieces not already covered above */
#hero-slider { position: relative; overflow: hidden; }
#hero-slider #slides.slides { height: 600px; }
#hero-slider .slide img { height: 600px; }
@media (max-width: 768px) {
  #hero-slider #slides.slides { height: 260px; }
  #hero-slider .slide img { height: 260px; }
}
.slide-overlay { position: absolute; inset: 0; /* TEMP — SITE-WIDE MASK PREVIEW, disabled: background: linear-gradient(to right, rgba(10,60,58,.82) 0%, rgba(10,60,58,.55) 50%, rgba(10,60,58,.30) 100%); */ }
.slide-content { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 100px; max-width: 100%; color: #fff; }
@media (max-width: 640px) {
  .slide-content { padding: 0 72px; }
  .slider-btn { width: 38px; height: 38px; font-size: 14px; }
  #prev-btn { left: 10px; }
  #next-btn { right: 10px; }
}
.slide-content h2 { font-family: var(--ff-head); font-size: clamp(28px, 4.5vw, 54px); line-height: 1.1; margin-bottom: 16px; max-width: 100%; }
.slide-content p { font-size: 16px; opacity: .88; line-height: 1.75; margin-bottom: 28px; max-width: 100%; }
.slide-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.slide-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.slide-eyebrow::after { content: ''; width: 40px; height: 2px; background: var(--gold); display: inline-block; }
.hero-dots, .dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.slider-counter { position: absolute; bottom: 26px; right: 24px; color: #fff; font-size: 12.5px; font-weight: 600; opacity: .85; z-index: 5; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 2px solid rgba(255,255,255,.6); color: #fff; padding: 12px 22px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--trans); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* Trust strip */
.trust-strip, .trust-bar { background: var(--teal-dark); padding: 18px 0; }
.trust-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; }
.trust-item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13.5px; font-weight: 500; }
.trust-item i { color: var(--gold); font-size: 16px; }
.trust-sep { width: 1px; height: 24px; background: rgba(255,255,255,.2); }
/* Category section shell (Best Sale / package grids) */
.cat-section { padding: 64px 0; }
.cat-section:nth-child(odd) { background: var(--bg); }
.cat-section:nth-child(even) { background: var(--white); }
.cat-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; }
.cat-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; gap: 20px; }
.cat-header-left { flex: 1; min-width: 0; }
.cat-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 6px; }
.btn-view-all { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--teal); color: var(--teal-dark); background: transparent; padding: 10px 20px; border-radius: 50px; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: var(--trans); }
.btn-view-all:hover { background: var(--teal); color: #fff; }
@media (max-width: 640px) {
  .cat-header { flex-direction: column; align-items: stretch; }
  .cat-header-left { width: 100%; }
  .btn-view-all { width: 100%; justify-content: center; }
}
.section-center { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.section-center .cat-eyebrow { display: block; margin-bottom: 8px; }
/* Destination-focus panel (image + highlight checklist + POI grid) */
.dest-section { padding: 72px 0; }
.dest-section.alt { background: linear-gradient(135deg, #0a3d3a 0%, #123f3c 100%); color: #fff; }
.dest-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dest-inner.flip { direction: rtl; }
.dest-inner.flip > * { direction: ltr; }
.dest-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 10px; }
.dest-text h2 { font-family: var(--ff-head); font-size: clamp(26px, 3.5vw, 38px); line-height: 1.2; margin-bottom: 18px; }
.dest-text > p { font-size: 15.5px; line-height: 1.8; margin-bottom: 22px; opacity: .92; }
.float-badge { position: absolute; top: 20px; right: 20px; background: rgba(10,107,103,.92); backdrop-filter: blur(8px); color: #fff; padding: 12px 16px; border-radius: 10px; text-align: center; }
.float-badge strong { font-size: 20px; font-family: var(--ff-head); display: block; color: var(--gold); }
.float-badge span { font-size: 11px; opacity: .8; }
.dest-highlights { display: flex; flex-direction: column; gap: 10px; }
.dh-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.dh-item i { color: var(--teal); font-size: 15px; flex-shrink: 0; }
.dest-section.alt .dh-item { color: rgba(255,255,255,.85); }
.dest-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.dest-img-wrap img { width: 100%; height: 480px; object-fit: cover; display: block; }
.dest-img-badge { position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); padding: 10px 16px; border-radius: 10px; }
.dest-img-badge strong { display: block; font-family: var(--ff-head); font-size: 16px; color: var(--teal-dark); }
.dest-img-badge span { font-size: 11px; color: var(--muted); }
.dest-poi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.poi-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.dest-section.alt .poi-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.poi-card i { font-size: 22px; color: var(--teal); margin-bottom: 12px; display: inline-block; }
.dest-section.alt .poi-card i { color: var(--gold); }
.poi-card h4 { font-family: var(--ff-head); font-size: 16.5px; margin-bottom: 8px; color: var(--text); }
.dest-section.alt .poi-card h4 { color: #fff; }
.poi-card p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.dest-section.alt .poi-card p { color: rgba(255,255,255,.7); }
/* Tour-card grid — vertical photo-top cards */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#best-sale .tour-grid { row-gap: 36px; }
.tour-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.tour-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--teal); }
.tc-img { position: relative; height: 200px; overflow: hidden; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.tour-card:hover .tc-img img { transform: scale(1.06); }
.tc-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.95); color: var(--teal-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 50px; z-index: 2; }
.tc-badge.sale { background: var(--red); color: #fff; }
.tc-body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; }
.tc-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-meta span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tc-title { font-family: var(--ff-head); font-size: 1.1rem; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.tc-desc { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.tc-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tc-price { font-size: 12.5px; color: var(--muted); }
.tc-price strong { font-family: var(--ff-head); font-size: 17px; color: var(--teal-dark); }
.tc-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; border: 2px solid #D4A843; border-radius: 50px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: var(--trans); white-space: nowrap; }
.tc-btn:hover { background: #6e1220; }
@media (max-width: 900px) { .tour-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tour-grid { grid-template-columns: 1fr; } }
/* Reviews section */
.reviews-section { padding: 72px 0; background: var(--bg); }
.reviews-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; }
/* .reviews-grid base rule (and its old grid/900px variant) consolidated into CASCADE-ORDER FIX block above */
.rc-author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.rc-info { display: flex; flex-direction: column; }
.rc-info strong { font-size: 13.5px; color: var(--text); }
.rc-info span { font-size: 12px; color: var(--muted); }
/* CTA banner */
.cta-banner { background: linear-gradient(135deg, var(--teal-dark) 0%, #0a2e2c 100%); padding: 64px 24px; text-align: center; color: #fff; }
.cta-content { max-width: 680px; margin: 0 auto; }
.cta-content h2 { font-family: var(--ff-head); font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 14px; }
.cta-content p { font-size: 16px; opacity: .85; line-height: 1.7; margin-bottom: 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-actions .btn-primary { width: auto; }
/* Footer naming aliases used on some pages */
.footer-desc { font-size: 13.5px; line-height: 1.8; opacity: .75; margin-bottom: 20px; }
.footer-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-links li a, .footer-links li { font-size: 13.5px; color: #c8d8d7; opacity: .75; transition: var(--trans); }
.footer-links li a { display: block; padding: 4px 0; }
.footer-links li a:hover { opacity: 1; padding-left: 6px; color: var(--gold); }
.footer-links li i { width: 16px; color: var(--gold); margin-right: 4px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; transition: var(--trans); }
.footer-social a:hover { background: var(--teal); }
/* Lightweight scroll-reveal (fade + rise), toggled by JS via .reveal-target -> .revealed */
.reveal-target { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-target.revealed { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .dest-inner { grid-template-columns: 1fr; gap: 32px; }
  .dest-inner.flip { direction: ltr; }
  .dest-poi-grid { grid-template-columns: 1fr; }
  .dest-img-wrap img { height: 320px; }
}
.attraction-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.attraction-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.attraction-img { width: 100%; height: 200px; object-fit: cover; display: block; background: var(--teal-light); }
.attraction-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.attraction-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--teal-light); color: var(--teal-dark); padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.attraction-name { font-family: var(--ff-head); font-size: 1.15rem; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.attraction-short { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; flex: 1; }
.attraction-detail { font-size: 13px; color: var(--muted); line-height: 1.65; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; }
.attraction-detail strong { color: var(--teal-dark); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
/* Text-only tour package card (no photo) — used on package-listing pages */
.tours-gallery { display: flex; flex-direction: column; gap: 20px; }
.tour-pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tour-pkg-price { font-family: var(--ff-head); font-weight: 700; font-size: 18px; color: var(--teal-dark); white-space: nowrap; text-align: right; }
.tour-pkg-price small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--ff-body, inherit); }
.tour-pkg-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn-card-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; border: 2px solid #D4A843; padding: 9px 20px; border-radius: 50px; font-size: 13.5px; font-weight: 700; transition: var(--trans); white-space: nowrap; }
.btn-card-primary:hover { background: #6e1220; transform: translateX(2px); }
.btn-card-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 10px 20px; border-radius: 50px; font-size: 13.5px; font-weight: 600; transition: var(--trans); cursor: pointer; }
.btn-card-outline:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-light); }
/* Inc/Exc two-column full width */
.inc-exc-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px;}
@media (max-width: 768px) { .inc-exc-grid { grid-template-columns: 1fr; } }
.inc-card {background: #f0faf9; border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 28px;}
.inc-card.included { background: #f0faf9; border: 1px solid #b5e0dd; }
.inc-card.excluded { background: #fff5f6; border: 1px solid #f0c0c8; }
.inc-card h3 {color: var(--teal-dark); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;}
.inc-card.included h3 { color: var(--teal-dark); }
.inc-card.excluded h3 { color: var(--red); }
.inc-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.inc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); line-height: 1.5; }
.inc-list li i {color: var(--teal); margin-top: 2px; flex-shrink: 0; font-size: 13px;}
.inc-card.included .inc-list li i { color: var(--teal); }
.inc-card.excluded .inc-list li i { color: var(--red); }
/* AI Recommendations banner */
.ai-rec-section { background: linear-gradient(135deg, #0d2424 0%, #1a4a48 60%, #0d3030 100%); border-radius: var(--radius-lg); padding: 44px 40px; color: #fff; margin-top: 36px; }
.ai-rec-section h2 { font-family: var(--ff-head); font-size: 1.8rem; color: var(--gold); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.ai-rec-section .ai-intro { font-size: 15px; color: rgba(255,255,255,.75); margin-bottom: 32px; line-height: 1.7; }
.ai-rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .ai-rec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ai-rec-grid { grid-template-columns: 1fr; } }
.ai-rec-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 20px; }
.ai-rec-card i { font-size: 22px; color: var(--gold); margin-bottom: 12px; display: block; }
.ai-rec-card h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ai-rec-card p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; }
/* Seasonal strip */
.season-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 700px) { .season-strip { grid-template-columns: 1fr 1fr; } }
.season-card { border-radius: var(--radius); padding: 20px 16px; text-align: center; border: 1px solid var(--border); background: var(--white); }
.season-icon { font-size: 28px; margin-bottom: 8px; }
.season-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-dark); margin-bottom: 6px; }
.season-tip { font-size: 13px; color: var(--muted); line-height: 1.5; }
/* What to bring */
.bring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 20px; }
.bring-item { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: var(--text); }
.bring-item i { color: var(--teal); font-size: 17px; flex-shrink: 0; }
/* Marketing hooks */
.hooks-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hook-pill { background: var(--teal-dark); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 8px; }
.hook-pill i { color: var(--gold); font-size: 13px; }
/* Keyword targets for SEO section */
.kw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kw-chip { background: var(--teal-light); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 20px; border: 1px solid #b5e0dd; }
/* Booking form full-width */
.booking-wrap-full { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .booking-wrap-full { grid-template-columns: 1fr; } }
/* Itin body detail */
.itin-day.open .itin-body.open-body { max-height: none; }
.place-detail-block { margin-top: 16px; background: var(--bg); border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 6px 7px; }
.place-detail-block h4 { font-size: 13px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.place-detail-block p { font-size: 14px; color: var(--muted); line-height: 1.7; }
/* Breadcrumb bar */
.bc-bar { background: var(--teal-dark); padding: 12px 0; }
.bc-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; font-size: 13px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-inner a { color: rgba(255,255,255,.85); }
.bc-inner a:hover { color: var(--gold); }
.bc-sep { opacity: .5; }
.bc-current { color: var(--gold); font-weight: 600; }
/* Review stars */
.star-display { color: var(--gold); font-size: 14px; display: flex; gap: 2px; }
/* ════════════════════════════════════════════════════════════
 TOUR CATEGORY LIST — STACKED CARDS
 (bold tour-name header on top / brief details below / price +
 Go to Details bar fills the full-width bottom)
════════════════════════════════════════════════════════════ */
.tour-row { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); }
.tour-row:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--teal); }
/* Header — the tour name, made prominent */
.tr-header { background: var(--teal); padding: 18px 24px; }
.tr-eyebrow { font-size: 11.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.tr-title { font-family: var(--ff-head); font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.3; }
.tr-title a { color: inherit; transition: var(--trans); }
.tr-title a:hover { color: var(--gold); }
/* Brief details below the header */
.tr-body { padding: 16px 24px 4px; text-align: left; }
.tr-desc { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 10px; }
.tr-highlights { font-size: 13.5px; color: var(--text); line-height: 1.8; margin-bottom: 14px; }
.tr-highlights strong { color: var(--teal-dark); font-weight: 700; }
.tr-meta { display: flex; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; }
.tr-meta span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tr-meta span i { color: var(--teal); width: 14px; text-align: center; }
/* Bottom bar — price + Go to Details, fills the full width of the box */
.tr-action { width: 100%; margin-top: auto; background: var(--bg); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; text-align: left; }
.tr-action-price { display: flex; align-items: baseline; gap: 6px; text-align: left; }
.tr-price-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tr-price-amount { font-family: var(--ff-head); font-size: 24px; font-weight: 700; color: var(--teal-dark); }
.tr-price-per { font-size: 12px; color: var(--muted); }
.btn-go { display: inline-flex; align-items: center; gap: 8px; background: #C23B4F; color: #fff; border: 2px solid #D4A843; border-radius: 50px; padding: 9px 24px; font-size: 13.5px; font-weight: 700; transition: var(--trans); white-space: nowrap; flex-shrink: 0; }
.btn-go:hover { background: #A82E40; transform: translateX(2px); }
.btn-go i { font-size: 11px; }
@media (max-width: 560px) {
  .tr-header { padding: 16px 20px; }
  .tr-body { padding: 14px 20px 2px; }
  .tr-action { padding: 14px 20px; }
}
/* ════════════════════════════════════════════════════════════
 BEST-SELLING PACKAGES — HORIZONTAL PHOTO CARDS (independent
 component, does NOT share classes with the .tour-row grid above,
 so future edits to one can never break the other)
 (photo + badge left / headline + description center / price + button right)
════════════════════════════════════════════════════════════ */
.pkg-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pkg-list { display: flex; flex-direction: column; gap: 24px; }
.pkg-card { display: flex; align-items: stretch; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); }
.pkg-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--teal); }
.pkg-media { width: 200px; flex-shrink: 0; position: relative; overflow: hidden; }
.pkg-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.pkg-card:hover .pkg-media img { transform: scale(1.06); }
.pkg-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.95); color: var(--teal-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 50px; z-index: 2; }
/* Icon-placeholder variant, for cards with no photo */
.pkg-media-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%); }
.pkg-media-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 19px; margin-bottom: 8px; }
.pkg-media-label { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.pkg-content { flex: 1; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; }
.pkg-eyebrow { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.pkg-title { font-family: var(--ff-head); font-size: 1.2rem; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.pkg-title a { color: inherit; transition: var(--trans); }
.pkg-title a:hover { color: var(--teal-dark); }
.pkg-desc { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 10px; }
.pkg-highlights { font-size: 12.5px; color: var(--text); line-height: 1.55; margin-bottom: 12px; }
.pkg-highlights strong { color: var(--teal-dark); font-weight: 700; }
.pkg-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; }
.pkg-meta span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pkg-meta span i { color: var(--teal); width: 14px; text-align: center; }
.pkg-action { width: 150px; flex-shrink: 0; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 5px; text-align: center; }
.pkg-price-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 2px; }
.pkg-price-amount { font-family: var(--ff-head); font-size: 24px; font-weight: 700; color: var(--teal-dark); }
.pkg-price-per { font-size: 11.5px; color: var(--muted); }
.btn-pkg-go { display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: #fff; border: 2px solid #D4A843; border-radius: 50px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; transition: var(--trans); white-space: nowrap; }
.btn-pkg-go:hover { background: #6e1220; transform: translateX(2px); }
.btn-pkg-go i { font-size: 10px; }
@media (max-width: 1024px) { .pkg-columns { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .pkg-media { width: 160px; } .pkg-action { width: 125px; } }
@media (max-width: 620px) {
  .pkg-card { flex-direction: column; }
  .pkg-media { width: 100%; height: 170px; }
  .pkg-action { width: 100%; flex-direction: row; justify-content: space-between; border-left: none; border-top: 1px solid var(--border); padding: 14px 20px; }
  .pkg-action .pkg-price-label, .pkg-action .pkg-price-amount, .pkg-action .pkg-price-per { text-align: left; }
}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {scroll-behavior: smooth; overflow-x: hidden; max-width: 100%;}
body {font-family: var(--ff-body); color: var(--text); background: var(--white); line-height: 1.75; font-size: 16px; overflow-x: hidden; max-width: 100%;}
a {color: inherit; text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%; display: block;}
h1,h2,h3,h4 { line-height: 1.25;}
button {cursor: pointer; font-family: var(--ff-body);}
/* ══ TOP BAR (consolidated above) ══ */
/* ══ HEADER ══ */
#site-header {background: var(--white); box-shadow: 0 2px 16px rgba(0,0,0,.07); position: sticky; top: 0; z-index: 1000;}
.header-inner {max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 74px;}
#logo {font-family: var(--ff-head); font-size: 22px; color: var(--teal-dark); flex-shrink: 0; line-height: 1.1;}
#logo span {color: var(--gold); font-size: 11px; display: block; font-family: var(--ff-body); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;}
/* #main-nav / .nav-link base rules consolidated into CASCADE-ORDER FIX block above */
.nav-item {position: relative;}
.nav-link:hover { background: var(--teal-light); color: var(--teal-dark);}
.btn-book-nav { background: var(--teal); color: #fff !important; border: 2px solid var(--gold); border-radius: 50px; padding: 10px 22px; font-size: 13px; font-weight: 700; transition: var(--trans);}
.btn-book-nav:hover { background: var(--teal-dark); border-color: var(--gold); box-shadow: 0 4px 14px rgba(14,145,140,.35);}
/* ══ HERO ══ */
#hero {background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 50%, #2d1a0e 100%); color: #fff; padding: 80px 32px 64px; text-align: center; position: relative; overflow: hidden;}
#hero::before {content: ""; position: absolute; inset: 0; background: url("cappadocia-balloon/cappadocia-sun-rise-balloon-ride.avif") center/cover; /* TEMP — SITE-WIDE MASK PREVIEW, disabled: opacity: .22; */}
#hero::after {content: "";position: absolute;bottom: 0; left: 0; right: 0;height: 80px;/* TEMP — SITE-WIDE MASK PREVIEW, disabled: background: linear-gradient(transparent, rgba(10,61,58,.6)); */}
.hero-inner {position: relative; max-width: 960px; margin: 0 auto; z-index: 1;}
.breadcrumb {font-size: 13px; opacity: .75; margin-bottom: 20px; letter-spacing: .02em;}
.breadcrumb a {color: #fff;}
.breadcrumb a:hover { text-decoration: underline;}
.breadcrumb sep { margin: 0 8px; opacity: .5;}
.tour-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,168,67,.2); border: 1px solid rgba(212,168,67,.5); color: var(--gold); border-radius: 50px; padding: 6px 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px;}
#hero h1 {font-family: var(--ff-head); font-size: clamp(30px, 4.5vw, 58px); font-weight: 800; line-height: 1.12; margin-bottom: 20px;}
#hero h1 em {color: var(--gold); font-style: normal;}
.hero-sub { font-size: 17px; opacity: .88; max-width: 720px; margin: 0 auto 32px; line-height: 1.7;}
.hero-meta {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px;}
.hero-badge {background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); border-radius: 50px; padding: 10px 20px; font-size: 13px; display: flex; align-items: center; gap: 9px; font-weight: 500;}
.hero-badge i {color: var(--gold);}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px;}
.btn-hero-primary { background: var(--gold); color: #1a1206; font-weight: 700; font-size: 15px; padding: 15px 36px; border-radius: 50px; border: none; transition: var(--trans); box-shadow: 0 6px 24px rgba(212,168,67,.4);}
.btn-hero-primary:hover { background: #e8ba50; transform: translateY(-2px);}
.btn-hero-sec { background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; font-size: 15px; padding: 14px 32px; border-radius: 50px; transition: var(--trans);}
.btn-hero-sec:hover { background: rgba(255,255,255,.25);}
/* ══ QUICK STATS ══ */
#quick-stats { background: var(--teal-dark);}
.stats-row { max-width: 1400px; margin: 0 auto; padding: 0 12px; display: grid; grid-template-columns: repeat(4, 1fr);}
.stat-item { padding: 24px 20px; text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.12);}
.stat-item:last-child { border-right: none;}
.stat-num { font-family: var(--ff-head); font-size: 32px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 4px;}
.stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .8;}
/* ══ TAB NAV ══ */
.tab-nav-wrap {background: var(--white); border-bottom: 2px solid var(--border); position: sticky; top: 74px; z-index: 99;}
.tab-inner {max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;}
.tab-inner::-webkit-scrollbar {display: none;}
.tab-link {padding: 16px 22px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: var(--trans); white-space: nowrap; background: none; border-left: none; border-right: none; border-top: none; letter-spacing: .05em; word-spacing: normal; text-transform: uppercase;}
.tab-link:hover {color: var(--teal-dark);}
.tab-link.active {color: var(--teal-dark); border-bottom-color: var(--teal);}
/* ══ MAIN LAYOUT ══ (.tour-layout base rule consolidated into CASCADE-ORDER FIX block) */
.tour-main section {padding-bottom: 56px; border-bottom: 1px solid var(--border); margin-bottom: 56px;}
.tour-main section:last-child {border-bottom: none; margin-bottom: 0;}
/* ══ SECTION HEADER ══ */
/* ══ OVERVIEW ══ */
.overview-intro { font-size: 16px; color: var(--muted); line-height: 1.9; margin-bottom: 24px;}
.tour-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0;}
.highlight-card { background: var(--teal-pale); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 22px 20px;}
.highlight-card i { font-size: 22px; color: var(--teal); margin-bottom: 10px;}
.highlight-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;}
.highlight-card p { font-size: 13px; color: var(--muted); line-height: 1.7;}
/* ══ ITINERARY ══ */
.itin-intro { font-size: 16px; color: var(--muted); line-height: 1.85; margin-bottom: 28px;}
.itin-controls {display: flex; justify-content: flex-end; margin-bottom: 20px;}
#expandAllBtn {background: var(--teal-light); border: 1px solid var(--border); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 9px 22px; border-radius: 50px; cursor: pointer; transition: var(--trans);}
#expandAllBtn:hover {background: var(--teal); color: #fff;}
.itin-timeline { display: flex; flex-direction: column; gap: 0;}
.itin-day {border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; transition: var(--trans); background: var(--white); box-shadow: var(--shadow-sm);}
.itin-day-head {display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; cursor: pointer; background: var(--white); gap: 18px; transition: var(--trans); user-select: none;}
.itin-day-head:hover {background: var(--teal-pale);}
.itin-day.open .itin-day-head {background: var(--teal-pale); border-bottom: 1px solid var(--border);}
.itin-day-num { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.itin-day-meta {flex: 1; min-width: 0;}
.itin-day-meta h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
.itin-day-meta span { font-size: 13px; color: var(--muted);}
.itin-chevron { color: var(--muted); font-size: 14px; transition: transform .3s ease; flex-shrink: 0;}
.itin-day.open .itin-chevron { transform: rotate(180deg); color: var(--teal);}
.itin-day-body {display: none; padding: 7px 19px 13px; border-top: 1px solid var(--border);}
.itin-day.open .itin-day-body {display: block; padding-top: 7px;}
.itin-place-grid { display: grid; gap: 0;}
.itin-place { display: grid; grid-template-columns: 180px 1fr; gap: 0; border-bottom: 1px solid var(--border);}
.itin-place:last-child { border-bottom: none;}
.itin-place-img { height: 140px; overflow: hidden;}
.itin-place-img img { width: 100%; height: 100%; object-fit: cover;}
.itin-place-info { padding: 20px 24px;}
.itin-place-info:only-child { grid-column: 1 / -1;}
.itin-place-time { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;}
.itin-place-info h4 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px;}
.itin-place-info p { font-size: 14px; color: var(--muted); line-height: 1.7;}
/* Mobile: stack the image above the text instead of side-by-side.
   Placed here (after the base .itin-place rule directly above, not up in
   the earlier 768px block) on purpose — an unqualified rule always beats
   an earlier media-scoped rule of equal specificity, so a mobile override
   declared before this point in the file gets silently cancelled by the
   base rule above. See "CASCADE-ORDER FIX" note near the top of this file
   for the same issue elsewhere. On desktop the 180px image column and text
   column are stretched to equal height by grid, which is fine when the
   fixed 140px image is taller than the text — but on mobile the text wraps
   across many more lines than the image, so the row stretches well past
   140px and the image column is left with visible dead space beneath it. */
@media (max-width: 768px) {
  .itin-place { grid-template-columns: 1fr; }
  .itin-place-img { height: 200px; }
}
/* ══ PLACES DEEP DIVE ══ */
.places-section { margin-top: 8px;}
.place-card { display: grid; grid-template-columns: 380px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-sm); background: var(--white);}
.place-card.reverse { grid-template-columns: 1fr 380px;}
.place-card.reverse .place-img-wrap { order: 2;}
.place-card.reverse .place-content { order: 1;}
.place-img-wrap { position: relative; overflow: hidden; min-height: 320px;}
.place-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;}
.place-card:hover .place-img-wrap img { transform: scale(1.04);}
.place-tag { position: absolute; top: 16px; left: 16px; background: var(--teal); color: #fff; border-radius: 50px; padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;}
.place-tag.gold { background: var(--gold); color: #1a1206;}
.place-tag.red { background: var(--red);}
.place-content { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center;}
.place-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); font-weight: 700; margin-bottom: 8px;}
.place-content h3 { font-family: var(--ff-head); font-size: clamp(20px, 2.2vw, 28px); color: var(--text); margin-bottom: 14px;}
.place-desc { font-size: 15px; color: var(--muted); line-height: 1.85; margin-bottom: 20px;}
.place-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;}
.place-fact { display: flex; align-items: flex-start; gap: 10px;}
.place-fact i { color: var(--teal); margin-top: 3px; flex-shrink: 0; font-size: 13px;}
.place-fact span { font-size: 13px; color: var(--muted); line-height: 1.5;}
.place-fact strong { display: block; font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;}
/* ══ SEO CONTENT RICH TEXT ══ */
.rich-text { font-size: 16px; color: var(--muted); line-height: 1.9;}
.rich-text h3 { font-family: var(--ff-head); font-size: 22px; color: var(--text); margin: 28px 0 12px; font-style: italic;}
.rich-text p { margin-bottom: 16px;}
.rich-text ul { padding-left: 0; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px;}
.rich-text ul li { display: flex; gap: 10px; align-items: flex-start;}
.rich-text ul li::before { content: "✦"; color: var(--gold); flex-shrink: 0; margin-top: 4px; font-size: 11px;}
/* ══ SERVICES ══ */
.services-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px;}
.service-card {background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 24px; overflow: hidden;}
.service-card-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border);}
.service-card.included .service-card-head { background: #f0faf9;}
.service-card.excluded .service-card-head { background: #fdf0f2;}
.service-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;}
.included .service-icon { background: var(--teal-light); color: var(--teal-dark);}
.excluded .service-icon { background: #fde0e4; color: var(--red);}
.service-card-head h3 { font-size: 16px; font-weight: 700;}
.included .service-card-head h3 { color: var(--teal-dark);}
.excluded .service-card-head h3 { color: var(--red);}
.service-list {list-style: none; padding: 24px; display: flex; flex-direction: column; gap: 12px;}
.service-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); line-height: 1.6;}
.service-item i { margin-top: 3px; flex-shrink: 0; font-size: 13px;}
.included .service-item i { color: var(--teal);}
.excluded .service-item i { color: var(--red);}
/* ══ AI RECOMMENDATIONS ══ */
.ai-recs { background: linear-gradient(135deg, #0a3d3a 0%, #1a5a56 100%); border-radius: var(--radius-xl); padding: 48px; color: #fff; position: relative; overflow: hidden;}
.ai-recs::before { content: "✦"; position: absolute; right: 40px; top: 32px; font-size: 80px; opacity: .06;}
.ai-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 700; margin-bottom: 10px;}
.ai-recs h2 { font-family: var(--ff-head); font-size: clamp(24px, 2.5vw, 34px); margin-bottom: 14px;}
.ai-recs .ai-intro { font-size: 15px; opacity: .85; line-height: 1.8; margin-bottom: 36px; max-width: 700px;}
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.ai-card { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 24px 22px;}
.ai-card-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(212,168,67,.2); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 18px; margin-bottom: 14px;}
.ai-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px;}
.ai-card p { font-size: 13px; opacity: .82; line-height: 1.7;}
.ai-tips { margin-top: 36px; display: flex; flex-direction: column; gap: 14px;}
.ai-tip { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.07); border-radius: var(--radius); padding: 16px 20px;}
.ai-tip-num { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #1a1206; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
/* ══ WHY CHOOSE US ══ */
.why-section { padding: 80px 0; background: var(--bg); }
.why-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.why-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 16px; }
.why-card h3 { font-family: var(--ff-head); font-size: 17px; color: var(--text); margin-bottom: 8px; }
.why-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
/* Homepage AI recommendations section — its own dark wrapper (reuses .ai-card) */
.ai-section { background: linear-gradient(135deg, #0a3d3a 0%, #1a5a56 100%); padding: 80px 0; color: #fff; }
.ai-inner { max-width: var(--max-content); margin: 0 auto; padding: 0 24px; }
.ai-header { max-width: 680px; margin-bottom: 40px; }
.ai-header h2 { font-family: var(--ff-head); font-size: clamp(26px, 3.5vw, 38px); color: #fff; margin-bottom: 14px; }
.ai-header p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; }
.ai-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ai-card h3 { font-family: var(--ff-head); font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.ai-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ai-tag { display: inline-flex; align-items: center; background: rgba(212,168,67,.15); border: 1px solid rgba(212,168,67,.35); color: var(--gold); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 50px; }
@media (max-width: 900px) { .ai-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ai-cards { grid-template-columns: 1fr; } }
.ai-tip p { font-size: 14px; opacity: .88; line-height: 1.7; margin: 0;}
.ai-tip strong { color: var(--gold);}
/* ══ BOOKING ══ (.booking-wrap base rule consolidated into CASCADE-ORDER FIX block) */
.booking-summary {background: var(--teal-dark); color: #fff; border-radius: var(--radius-lg); padding: 32px; position: sticky; top: 150px;}
.tour-code {font-size: 11px; letter-spacing: .1em; opacity: .65; margin-bottom: 8px; text-transform: uppercase;}
.bs-name { font-family: var(--ff-head); font-size: 20px; margin-bottom: 20px; line-height: 1.35;}
.bs-info { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.15);}
.bs-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px;}
.bs-row span { opacity: .75;}
.bs-row strong { font-weight: 600;}
.price-block { margin-bottom: 24px;}
.price-from { font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;}
.price-val { font-family: var(--ff-head); font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1;}
.price-per { font-size: 13px; opacity: .7; margin-top: 4px;}
/* Form mode tabs (.booking-form-wrap base rule consolidated into CASCADE-ORDER FIX block) */
.form-mode-tabs {display: flex; gap: 4px; margin-bottom: 28px; border-radius: 50px; overflow: hidden; border: 2px solid;  color: #d4a843; width: 100%; background: var(--white); padding: 4px;}
.form-mode-tab {flex: 1; padding: 10px; font-family: var(--ff-body); font-size: 14px; font-weight: 600; letter-spacing: .02em; border: none; background: none; color: var(--muted); cursor: pointer; transition: var(--trans); display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; border-radius: 50px;}
.form-mode-tab[aria-selected="true"] {background: var(--teal); color: #fff;}
/* Inputs */
.form-group {display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;}
.form-group label {font-size: 12px; font-weight: 700; color: var(--text); display: block; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;}
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); font-family: var(--ff-body); font-size: 14px; color: var(--text); transition: var(--trans);}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.12);}
/* Ticket stepper */
.ticket-stepper {border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); margin-bottom: 20px;}
.ticket-row {display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 12px;}
.ticket-row:last-child {border-bottom: none;}
.ticket-info {display: flex; flex-direction: column; gap: 3px; flex: 1;}
.ticket-label { font-size: 15px; font-weight: 600; color: var(--text);}
.ticket-price { font-size: 12px; color: var(--muted); margin-top: 2px;}
.stepper { display: flex; align-items: center; gap: 10px;}
.step-btn {width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); font-size: 20px; line-height: 1; color: var(--teal-dark); font-weight: 600; transition: var(--trans); display: flex; align-items: center; justify-content: center;}
.step-btn:hover {border-color: var(--teal); background: var(--teal-light);}
.qty { font-size: 17px; font-weight: 700; width: 28px; text-align: center;}
.ticket-sub { font-size: 15px; font-weight: 700; color: var(--teal-dark); min-width: 52px; text-align: right;}
.total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--teal-pale); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 20px; font-weight: 700;}
.total-label { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);}
.total-val { font-family: var(--ff-head); font-size: 24px; color: var(--teal-dark);}
.btn-submit {width: 100%; padding: 16px; background: var(--teal); color: #fff; border: 3px solid var(--gold); border-radius: 50px; font-size: 15px; font-weight: 700; transition: var(--trans); letter-spacing: .02em;}
.btn-submit:hover {background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--gold);}
.btn-submit.gold { background: var(--gold); color: #1a1206; border: 2px solid var(--bordeaux-dark);}
.btn-submit.gold:hover { background: #e8ba50; border-color: var(--bordeaux-dark);}
.form-msg {display: none; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 500; background: var(--teal-light); line-height: 1.6;}
.human-check { font-size: 13px; color: var(--muted); margin-bottom: 4px;}
/* ══ FORM SUCCESS STATE (shown in place of the form once a request is sent) ══ */
.form-success { text-align: center; padding: 36px 20px; background: var(--teal-pale, var(--teal-light)); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.form-success-icon { font-size: 44px; color: var(--teal-dark); margin-bottom: 14px; }
.form-success-title { font-family: var(--ff-head); font-size: 1.2rem; color: var(--teal-dark); margin-bottom: 8px; }
.form-success-text { font-size: 14.5px; color: var(--text); line-height: 1.7; max-width: 420px; margin: 0 auto; }
.form-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.btn-success-primary { background: var(--gold); color: #1a1206; border: none; padding: 12px 26px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--trans); cursor: pointer; }
.btn-success-primary:hover { background: #e8ba50; transform: translateY(-1px); }
.btn-success-outline { background: none; color: var(--teal-dark); border: 2px solid var(--teal); padding: 10px 24px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--trans); cursor: pointer; }
.btn-success-outline:hover { background: var(--teal-light); }
.form-success-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; }
/* ══ REVIEWS ══ */
.reviews-summary {display: flex; align-items: center; gap: 32px; background: var(--teal-pale); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 32px; margin-top: 24px; margin-bottom: 32px;}
.rs-score {text-align: center; flex-shrink: 0;}
.rs-big { font-family: var(--ff-head); font-size: 64px; font-weight: 700; color: var(--teal-dark); line-height: 1;}
.rs-stars { color: var(--gold); font-size: 22px; margin: 6px 0;}
.rs-count { font-size: 13px; color: var(--muted);}
.rs-bars {flex: 1; display: flex; flex-direction: column; gap: 8px;}
.rs-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px;}
.rs-bar-label { width: 48px; color: var(--muted); text-align: right; flex-shrink: 0;}
.rs-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;}
.rs-bar-fill { height: 100%; background: var(--gold); border-radius: 4px;}
.rs-bar-pct { width: 36px; color: var(--muted); font-size: 12px;}
/* .reviews-grid base rule consolidated into CASCADE-ORDER FIX block above */
.review-card {background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px;}
.rc-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px;}
.rc-avatar {width: 48px; height: 48px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0;}
.rc-meta { flex: 1;}
.rc-meta h4 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px;}
.rc-meta span { font-size: 12px; color: var(--muted);}
.rc-stars {margin-left: auto; color: var(--gold); font-size: 14px; margin-bottom: 10px;}
.rc-text {font-size: 15px; color: var(--muted); line-height: 1.8;}
.rc-highlight { margin-top: 14px; background: var(--teal-pale); border-left: 3px solid var(--teal); padding: 10px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; color: var(--teal-dark); font-style: italic;}
/* Comment form */
.comment-section {margin-top: 48px; border-top: 1px solid var(--border); padding-top: 40px;}
.comment-form-wrap {background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; margin-top: 20px;}
.star-picker { display: flex; gap: 4px; margin-bottom: 16px;}
.star-btn {background: none; border: none; font-size: 28px; color: var(--border); transition: color .15s; padding: 0 2px; line-height: 1; cursor: pointer;}
.star-btn.lit, .star-btn:hover { color: var(--gold);}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;}
textarea.form-ctrl { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--ff-body); font-size: 14px; color: var(--text); resize: vertical; min-height: 120px; transition: var(--trans);}
textarea.form-ctrl:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.12);}
/* ══ SIMILAR TOURS ══ (.pref-grid base rule consolidated into CASCADE-ORDER FIX block) */
.pref-subtitle {font-size: 15px; color: var(--muted); margin-bottom: 28px; line-height: 1.7;}
.pref-card {border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: var(--trans); position: relative; background: var(--white);}
.pref-card:hover {border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-3px);}
.pref-card.selected {border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.15);}
.pref-card.selected::after {content: "✓"; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background: var(--teal); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 26px; text-align: center;}
.pref-img {height: 150px; overflow: hidden;}
.pref-img img {width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;}
.pref-card:hover .pref-img img {transform: scale(1.06);}
.pref-body {padding: 16px;}
.pref-body h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;}
.pref-body span { font-size: 12px; color: var(--muted);}
.pref-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px;}
.btn-pref { background: var(--teal); color: #fff; border: none; padding: 13px 32px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--trans);}
.btn-pref:hover { background: var(--teal-dark);}
.pref-msg { font-size: 14px; display: none;}
/* ══ BACK TO TOP ══ */
#back-top {position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; background: var(--teal); color: #fff; border: none; border-radius: 50%; font-size: 16px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: var(--trans); z-index: 200; display: flex; align-items: center; justify-content: center; pointer-events: none;}
#back-top.show {opacity: 1; visibility: visible; pointer-events: all;}
#back-top:hover {background: var(--teal-dark); transform: translateY(-3px);}
/* ══ FOOTER ══ */
footer {padding: 48px 32px 24px; background: var(--teal-dark); color: #fff; margin-top: 0;}
/* .footer-inner base rule consolidated up into the FOOTER section above — do not re-add it here (see note there re: cascade order). */
.footer-grid {max-width: var(--max-content); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 24px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1);}
.footer-brand p { font-size: 14px; opacity: .75; line-height: 1.8; margin-top: 12px; max-width: 300px;}
/* .footer-col h5 / .footer-col a / .footer-col a:hover removed — legacy duplicate of
 the .footer-col ul li a rules in the FOOTER section above; it targeted an <h5> this
 page doesn't use, and its .footer-col a rule was silently stacking an extra 8px
 margin onto every footer link on top of the gap/padding already set there. */
/* .footer-bottom base rule consolidated into CASCADE-ORDER FIX block above */
/* ══ RESPONSIVE ══ */
@media (max-width: 1100px) {.place-card, .place-card.reverse { grid-template-columns: 1fr;}
.place-card.reverse .place-img-wrap { order: 0;}
.place-card.reverse .place-content { order: 0;}
.place-img-wrap { min-height: 260px;}
.booking-wrap { grid-template-columns: 1fr;}
.booking-summary { position: static;}}
@media (max-width: 900px) {.tour-highlights { grid-template-columns: 1fr 1fr;}
.ai-grid { grid-template-columns: 1fr 1fr;}
.pref-grid { grid-template-columns: 1fr 1fr;}
.stats-row { grid-template-columns: repeat(2, 1fr);}
.footer-grid { grid-template-columns: 1fr 1fr;}}
@media (max-width: 640px) {.tour-highlights { grid-template-columns: 1fr;}
.services-wrap { grid-template-columns: 1fr;}
.ai-grid { grid-template-columns: 1fr;}
.pref-grid { grid-template-columns: 1fr;}
.stats-row { grid-template-columns: 1fr 1fr;}
.reviews-summary { flex-direction: column;}
.form-grid-2 { grid-template-columns: 1fr;}
.hero-actions { flex-direction: column; align-items: center;}
.footer-grid { grid-template-columns: 1fr;}
#main-nav { display: none;}}
/* ════════════════════════════════════════════════════════════
 FOOTER — TOUR STYLES PANEL + BRAND/CONTACT COLUMN ADD-ONS
 New block, add-on to the existing footer / #site-footer /
 .footer-inner / .footer-col / .footer-bottom rules above (see the
 FOOTER section + the CASCADE-ORDER FIX block). Nothing above this
 comment was changed. This adds:
   1. A 3-column variant of .footer-inner (brand / quick links /
      contact — the mega-footer normally assumes 4 columns).
   2. A TÜRSAB badge + contact-list treatment for that row.
   3. The full-width "Tour Styles" link panel.
   4. The Company / Travel Guide / legal link rows that sit above
      the existing .footer-bottom copyright bar.
════════════════════════════════════════════════════════════ */
.footer-inner.footer-inner--3col { grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width: 900px) { .footer-inner.footer-inner--3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-inner.footer-inner--3col { grid-template-columns: 1fr; } }

.footer-eyebrow { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.footer-tursab { display: inline-block; margin-top: 10px; }
.footer-tursab img { display: block; width: 168px; height: auto; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); }

.footer-contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; list-style: none; padding: 0; }
.footer-contact-list li { font-size: 13.5px; color: #c8d8d7; opacity: .85; display: flex; align-items: center; gap: 10px; }
.footer-contact-list li i { color: var(--gold); width: 16px; text-align: center; }
.footer-contact-list a { color: #c8d8d7; transition: var(--trans); }
.footer-contact-list a:hover { color: var(--gold); }

.footer-tourstyles { max-width: 1400px; margin: 0 auto; padding: 40px 24px 8px; border-top: 1px solid rgba(255,255,255,.1); }
.footer-tourstyles h4 { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 22px; }
.footer-tourstyles h4::before { content: ''; width: 4px; height: 15px; background: var(--gold); border-radius: 2px; flex-shrink: 0; }
.footer-tourstyles-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; row-gap: 10px; }
.footer-tourstyles-grid > div { display: flex; flex-direction: column; gap: 10px; }
.footer-tourstyles-grid a { font-size: 13.5px; color: #c8d8d7; opacity: .75; transition: var(--trans); }
.footer-tourstyles-grid a:hover { opacity: 1; color: var(--gold); padding-left: 4px; }
@media (max-width: 900px) { .footer-tourstyles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-tourstyles-grid { grid-template-columns: 1fr; } }

.footer-sitelinks { max-width: 1400px; margin: 0 auto; padding: 28px 24px 0; }
.footer-sitelinks-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; margin-bottom: 12px; }
.footer-sitelinks-row:last-child { margin-bottom: 0; }
.footer-sitelinks-row strong { color: #fff; font-weight: 700; }
.footer-sitelinks-row a { color: #c8d8d7; opacity: .8; transition: var(--trans); }
.footer-sitelinks-row a:hover { opacity: 1; color: var(--gold); }
/* ════════════════════════════════════════════════════════════
 HEADER UTILITIES (language / currency / cart / sign in)
 — new block, add-on to existing #site-header
════════════════════════════════════════════════════════════ */
.header-utils { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.util-select { position: relative; }
.util-trigger { display: flex; align-items: center; gap: 6px; background: none; border: none; font-family: var(--ff-body); font-size: 14px; font-weight: 500; color: var(--text); padding: 6px 2px; }
.util-trigger i.fa-globe { color: var(--teal); font-size: 16px; }
.util-trigger .fa-chevron-down { font-size: 10px; color: var(--muted); transition: transform .2s; }
.util-select:hover .fa-chevron-down { transform: rotate(180deg); }
.util-select .dropdown { min-width: 160px; left: auto; right: 0; }
.util-select.force-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }
.util-cart { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; color: var(--teal-dark); font-size: 15px; transition: var(--trans); }
.util-cart:hover { background: var(--teal-light); }
.cart-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.btn-signin { background: var(--teal); color: #fff; border: none; padding: 11px 24px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: var(--trans); white-space: nowrap; }
.btn-signin:hover { background: var(--teal-dark); box-shadow: var(--shadow-sm); }
/* ════════════════════════════════════════════════════════════
 HOME HERO — full-bleed image with floating search pill
════════════════════════════════════════════════════════════ */
#home-hero { padding: 20px 24px 0; background: var(--white); }
.home-hero-frame { max-width: none; width: 100%; margin: 0 auto; position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.home-hero-frame img.hh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.home-hero-frame::after { content: ""; position: absolute; inset: 0; /* TEMP — SITE-WIDE MASK PREVIEW, disabled: background: linear-gradient(180deg, rgba(10,30,28,.15) 0%, rgba(10,30,28,0) 35%, rgba(10,30,28,.55) 100%); */ z-index: 1; }
.hh-content { position: relative; z-index: 2; padding: 0 64px; max-width: 1100px; margin: 0 auto; text-align: center; }
.hh-content h1 { font-family: var(--ff-head); color: #fff; font-weight: 700; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.15; margin-bottom: 18px; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hh-content .hh-sub { color: rgba(255,255,255,.92); font-size: 17px; font-weight: 500; margin-bottom: 40px; text-shadow: 0 1px 8px rgba(0,0,0,.2); }
.hero-search-pill { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 60px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 8px 8px 8px 26px; max-width: 640px; margin: 0 auto; text-align: left; }
.hsp-icon { color: var(--teal); font-size: 17px; flex-shrink: 0; }
.hsp-value-input { flex: 1; min-width: 0; width: 100%; border: none; outline: none; background: transparent; padding: 12px 4px; margin: 0; font-family: var(--ff-body); font-size: 16px; font-weight: 500; color: var(--text); box-shadow: none; -webkit-appearance: none; appearance: none; }
.hsp-value-input::placeholder { color: #8a9a99; opacity: 1; }
.hsp-submit { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 50px; background: var(--teal); color: #fff; border: none; font-family: var(--ff-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--trans); white-space: nowrap; }
.hsp-submit:hover { background: var(--teal-dark); }
.hsp-submit i { font-size: 15px; }

/* Live search results dropdown */
.hsp-results { position: absolute; top: calc(100% + 12px); left: 0; right: 0; max-height: 380px; overflow-y: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--trans); z-index: 30; text-align: left; }
.hero-search-pill.active .hsp-results { opacity: 1; visibility: visible; transform: translateY(0); }
.hsp-results-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 16px 22px 8px; }
.hsp-result-item { display: flex; align-items: center; gap: 14px; padding: 10px 22px; color: var(--text); }
.hsp-result-item:hover, .hsp-result-item.is-active { background: var(--teal-pale); }
.hsp-result-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--teal-light); }
.hsp-result-text { flex: 1; min-width: 0; }
.hsp-result-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsp-result-title mark { background: none; color: var(--teal-dark); font-weight: 700; }
.hsp-result-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.hsp-result-arrow { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.hsp-results-empty { padding: 24px 22px; font-size: 14px; color: var(--muted); text-align: center; }

@media (max-width: 900px) {.header-utils { gap: 12px; }
.header-utils .util-select { display: none; }
.home-hero-frame { min-height: 560px; }
.hh-content { padding: 0 28px; }
}
@media (max-width: 640px) {.hero-search-pill { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: 16px; gap: 12px; }
.hsp-icon { display: none; }
.hsp-value-input { text-align: center; padding: 10px 4px; }
.hsp-submit { width: 100%; justify-content: center; }
.hsp-results { left: -16px; right: -16px; }
.home-hero-frame { min-height: 620px; border-radius: var(--radius); }
.hh-content { padding: 0 20px; }
.btn-signin { padding: 9px 16px; font-size: 13px; }
}
/* ════════════════════════════════════════════════════════════
 ALTERNATE HERO — GOLD FRAME VARIANT
 Reusable, unscoped hero wrapper. Wrap any existing hero (e.g.
 ".home-hero-frame") in ".hero-gold-frame" to surround it with a
 gold-gradient border/frame instead of the plain background — this
 also fills the empty margin that appears on very wide desktop
 screens once the inner hero hits its own max-width.
 Usage:
   <div class="hero-gold-frame">
     <div class="home-hero-frame">...</div>
   </div>
════════════════════════════════════════════════════════════ */
.hero-gold-frame {
  background: linear-gradient(135deg, #f2dda1 0%, var(--gold) 45%, #a9791c 100%);
  padding: 16px;
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(180,140,40,0.28);
}
.hero-gold-frame .home-hero-frame { margin: 0 auto; }
@media (max-width: 900px) {
  .hero-gold-frame { padding: 8px; border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════
 HOMEPAGE ADD-ONS — built from existing design tokens
 (tour price cards + blog cards; every other homepage section
 reuses component classes already defined above: tour-row,
 pref-card, ai-recs, review-card, footer-grid, etc.)
════════════════════════════════════════════════════════════ */
.price-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 22px; row-gap: 33px; }
.price-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--teal); }
.pc-media { position: relative; height: 170px; overflow: hidden; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.price-card:hover .pc-media img { transform: scale(1.06); }
.pc-tag { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 50px; }
.pc-loc { position: absolute; bottom: 10px; left: 14px; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pc-title { font-family: var(--ff-head); font-size: 16.5px; color: var(--text); line-height: 1.35; margin-bottom: 8px; }
.pc-title a { color: inherit; transition: var(--trans); }
.pc-title a:hover { color: var(--teal-dark); }
.pc-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 14px; flex: 1; }
.pc-price-row { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px dashed var(--border); padding-top: 14px; }
.pc-price { display: flex; flex-direction: column; }
.pc-price-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pc-price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.pc-price-now { font-family: var(--ff-head); font-size: 20px; font-weight: 700; color: var(--teal-dark); }
.pc-link { color: var(--teal-dark); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.pc-link:hover { color: var(--red); }
.pc-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px -20px -20px; padding: 12px 20px; background: var(--teal-pale); color: var(--text); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: var(--trans); }
.pc-more i { color: var(--gold); font-size: 10px; }
.pc-more-label { color: #8B1A2B; }
.pc-more-cat { color: #8B1A2B; }
.pc-more:hover { background: var(--border); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.blog-img { height: 190px; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-img img { transform: scale(1.06); }
.blog-body { padding: 22px 22px 24px; }
.blog-date { font-size: 11.5px; color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.blog-body h3 { font-family: var(--ff-head); font-size: 18px; line-height: 1.35; margin-bottom: 10px; }
.blog-body h3 a { color: var(--text); transition: var(--trans); }
.blog-body h3 a:hover { color: var(--teal-dark); }
.blog-body p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.blog-readmore { font-size: 12.5px; font-weight: 700; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.blog-readmore:hover { color: var(--bordeaux-dark); }
@media (max-width: 1100px) { .price-card-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .price-card-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } }
/* Section header (label + title) */
.section-label {font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;}
.section-label::after {content: ""; flex: 1; height: 1px; background: var(--teal-light);}
.section-title {font-family: var(--ff-head); font-size: clamp(24px, 3vw, 36px); color: var(--text); margin-bottom: 20px;}
.section-title em {color: var(--teal); font-style: normal;}
.section-lead {font-size: 16px; color: var(--muted); line-height: 1.85; margin-bottom: 28px; max-width: 900px;}
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head-row .view-all-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 700; font-size: 14px; white-space: nowrap; }
.section-head-row .view-all-link i { font-size: 12px; }
/* Destination cards grid */
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.dest-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.dest-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--teal); }
.dest-img { height: 190px; position: relative; overflow: hidden; background: var(--teal-light); }
.dest-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dest-card:hover .dest-img img { transform: scale(1.06); }
.dest-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.95); color: var(--teal-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 50px; }
.dest-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.dest-body h3 { font-family: var(--ff-head); font-size: 1.2rem; color: var(--text); margin-bottom: 8px; }
.dest-body p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; flex: 1; }
.dest-featured { background: var(--teal-pale); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12.5px; color: var(--teal-dark); margin-bottom: 16px; }
.dest-featured strong { display: block; margin-bottom: 2px; }
.dest-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 700; font-size: 13.5px; margin-top: auto; }
.dest-link i { font-size: 12px; transition: transform .2s; }
.dest-card:hover .dest-link i { transform: translateX(3px); }
/* Responsive breakpoints */
@media (max-width: 900px) {.dest-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {.dest-grid { grid-template-columns: 1fr; }
.section-head-row { flex-direction: column; align-items: flex-start; }
}
/* ════════════════════════════════════════════════════════════
 OPTIMIZATION PATCH — components used by the Ayvalık, Bitlis
 and Bodrum tour pages that had no matching rules (this is what
 was causing "broken/unbalanced" boxes on those pages). Added
 as one shared block so every current and future tour page can
 reuse them instead of inventing page-specific CSS again.
════════════════════════════════════════════════════════════ */
/* Tinted section background (light alternate-row treatment) */
.tinted { background: var(--teal-pale); padding: 44px 32px; }
@media (max-width: 640px) { .tinted { padding: 32px 20px; } }
/* Icon-based media placeholder (used instead of a photo where no
 licensed image is available yet) — slider slides + pref cards */
.icon-media { position: relative; width: 100%; height: 100%; min-height: 220px; background: linear-gradient(135deg, var(--teal-dark) 0%, #1a4a48 60%, #2d1a0e 100%); display: flex; align-items: center; justify-content: center; }
.icon-media.alt { background: linear-gradient(135deg, #1a4a48 0%, var(--teal-dark) 60%, #0a2e2c 100%); }
.icon-media.gold { background: linear-gradient(135deg, #4e1f24 0%, var(--bordeaux) 55%, #2d1a0e 100%); }
.icon-media-inner { text-align: center; color: #fff; padding: 24px; }
.icon-media-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); }
.icon-media-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-bottom: 6px; }
.slide-media { height: 480px; }
.slide-cap-title { font-family: var(--ff-head); font-size: 22px; font-weight: 700; }
.pref-img .icon-media { min-height: 150px; }
.pref-img .icon-media-ico { width: 48px; height: 48px; font-size: 20px; margin-bottom: 8px; }
.pref-img .icon-media-label { display: none; }
/* Bitlis-style slide placeholder (equivalent concept, different markup) */
.slide-ph { width: 100%; height: 480px; background: linear-gradient(135deg, var(--teal-dark) 0%, #1a4a48 60%, #2d1a0e 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 24px; gap: 8px; }
.slide-ph > i { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); margin-bottom: 8px; }
.slide-ph-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.slide-ph-name { font-family: var(--ff-head); font-size: 22px; font-weight: 700; }
.slide-ph-tag { font-size: 13.5px; opacity: .8; max-width: 480px; line-height: 1.6; }
/* Place / attraction-card media placeholder (Bitlis "Places to Visit") */
.place-media { height: 170px; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; }
.place-media i { color: #fff; }
.place-media-1 { background: linear-gradient(135deg, var(--teal-dark), #1a4a48); }
.place-media-2 { background: linear-gradient(135deg, #1a4a48, var(--sky)); }
.place-media-3 { background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-dark)); }
.place-media-4 { background: linear-gradient(135deg, #0a3d3a, var(--teal)); }
.place-media-5 { background: linear-gradient(135deg, #4e1f24, var(--gold)); }
/* Include / exclude flag pills used on itinerary + attraction cards */
.place-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.flag-pill, .incl-flag, .excl-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 50px; }
.flag-pill.flag-include, .incl-flag { background: var(--teal-light); color: var(--teal-dark); }
.flag-pill.flag-optional, .excl-flag { background: var(--red-light); color: var(--red); }
/* Itinerary "included / not included" status row */
.stop-status-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stop-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 50px; }
.stop-status.in { background: var(--teal-light); color: var(--teal-dark); }
.stop-status.out { background: var(--red-light); color: var(--red); }
/* Market pricing comparison cards (scoped under .price-cards so they
 never collide with the unrelated homepage .price-card-grid .price-card) */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.price-cards .price-card { background: var(--white); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; transition: var(--trans); }
.price-cards .price-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.price-cards .price-card.featured { border-color: var(--gold); background: linear-gradient(180deg, var(--teal-pale), var(--white)); position: relative; }
.price-cards .price-card.featured::before { content: "Most Popular"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #1a1206; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 14px; border-radius: 50px; }
.price-cards .pc-group { font-size: 13px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.price-cards .pc-amount { font-family: var(--ff-head); font-size: 34px; font-weight: 700; color: var(--text); }
.price-cards .pc-amount sup { font-size: 16px; color: var(--muted); }
.price-cards .pc-try { font-size: 12.5px; color: var(--muted); margin: 4px 0 2px; }
.price-cards .pc-per { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }
.price-cards .pc-note { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.price-cards .pc-note li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.price-cards .pc-note li i { color: var(--teal); margin-top: 3px; flex-shrink: 0; }
.price-disclaimer { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 22px; padding: 16px 18px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); }
.price-disclaimer i { color: var(--teal); margin-top: 2px; flex-shrink: 0; }
@media (max-width: 900px) { .price-cards { grid-template-columns: 1fr; } }
/* Small "AI Travel Assistant" badge above the AI recommendations block */
.ai-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,168,67,.15); border: 1px solid rgba(212,168,67,.4); color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; border-radius: 50px; margin-bottom: 14px; }
/* "Best season" highlight modifier */
.season-card.best { border-color: var(--teal); background: var(--teal-pale); position: relative; }
.season-card.best::after { content: "Best"; position: absolute; top: 10px; right: 10px; background: var(--teal); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 50px; }
/* Stone-colored variant for route dots */
.route-dot.stone { background: var(--bordeaux); box-shadow: 0 2px 8px rgba(114,47,55,.3); }
/* Mobile sticky call-to-action bar (hidden on desktop) */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {.mobile-cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0,0,0,.08); padding: 12px 14px; z-index: 500; }
.mcb-price { font-family: var(--ff-head); font-weight: 700; font-size: 16px; color: var(--teal-dark); display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; white-space: nowrap; }
.mcb-price small { font-family: var(--ff-body); font-weight: 500; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mobile-cta-bar .btn-book-now { background: var(--teal); color: #fff; border: none; padding: 10px 10px; border-radius: 50px; font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
body:has(.mobile-cta-bar) { padding-bottom: 68px; }
#back-top { bottom: 86px; right: 18px; }
}
/* ════════════════════════════════════════════════════════════
 BOOKING WIDGET — form controls & buttons
 (booking-widget.html was authored against its own
 booking-widget.css, which isn't part of the shared site
 stylesheet; these three classes bridge the gap so the current
 booking widget renders correctly wherever it's embedded)
════════════════════════════════════════════════════════════ */
.form-control { width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 14px; font-family: var(--ff-body); font-size: 14px; color: var(--text); background: var(--white); transition: border-color .2s; outline: none; }
.form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.12); }
textarea.form-control { resize: vertical; min-height: 100px; }
.btn-primary { width: 100%; background: var(--teal); color: #fff; border: 2.5px solid #D4A843; padding: 13px 24px; border-radius: 50px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--trans); }
.btn-primary:hover { background: var(--teal-dark); border-color: #D4A843; box-shadow: 0 0 0 3px rgba(212,168,67,.25); }
.btn-gold { width: 100%; background: var(--gold); color: #1a1206; border: 2px solid var(--bordeaux-dark); padding: 14px 24px; border-radius: 50px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--trans); }
.btn-gold:hover { background: #e8ba50; border-color: var(--bordeaux-dark); box-shadow: 0 6px 20px rgba(212,168,67,.35); }
.btn-gold:disabled { background: var(--border); color: var(--muted); border-color: var(--border); cursor: not-allowed; box-shadow: none; }
/* Currently-unavailable tour-type badge (injected by scripts.js) */
.tour-type-badge {display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red);}
/* ════════════════════════════════════════════════════════════
 TOUR-DETAIL PAGE COMPONENTS
 (migrated off inline style="" attributes so these are reusable
 site-wide instead of living only on one page)
════════════════════════════════════════════════════════════ */
/* Hero subtitle line under the H1 */
.hero-subtitle { font-size: 17px; opacity: .88; max-width: 740px; margin: 18px auto 0; line-height: 1.7; }
/* Header nav "Book Now" pill CTA */
.nav-cta { background: var(--teal); color: #fff; border-radius: 50px; padding: 8px 20px; }
/* "Tour Highlights" card heading icon */
.highlights-card h3 i { color: var(--gold); margin-right: 8px; }
/* Section wrapper with extra top spacing + compact title variant (e.g. "Why Choose This Tour") */
.section-block { margin-top: 48px; }
.section-title.compact { font-size: clamp(20px, 2.5vw, 28px); }
.why-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
/* Small bordered icon card used in the "Why Choose" grid */
.icon-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.icon-card .card-icon { color: var(--teal); font-size: 22px; margin-bottom: 12px; display: block; }
.icon-card strong { display: block; margin-bottom: 8px; color: var(--text); }
.icon-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }
/* Larger bordered icon card used in "Hotel & Meals" */
.icon-card-lg { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.icon-card-lg .card-icon-lg { font-size: 24px; margin-bottom: 14px; display: block; color: var(--teal); }
.icon-card-lg .card-icon-lg.gold { color: var(--gold); }
.icon-card-lg h3 { font-family: var(--ff-head); font-size: 1.3rem; margin-bottom: 12px; }
.icon-card-lg p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
@media (max-width: 700px) { .two-col-grid { grid-template-columns: 1fr; } }
/* Simple bullet list with a leading icon, e.g. amenities / meal notes */
.amenity-list { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.amenity-list li { font-size: 13.5px; color: var(--text); display: flex; gap: 8px; }
.amenity-list li i { color: var(--teal); margin-top: 2px; }
.amenity-list li i.gold { color: var(--gold); }
/* Teal "local tip" callout box */
.local-tip-box { margin-top: 28px; background: var(--teal-light); border: 1px solid #b5e0dd; border-radius: var(--radius); padding: 22px 24px; }
.local-tip-box p { font-size: 14.5px; color: var(--teal-dark); line-height: 1.7; }
.local-tip-box i { margin-right: 8px; }
/* Red "notice" callout box, e.g. single room supplement */
.notice-box { margin-top: 28px; padding: 18px; background: var(--red-light); border-radius: var(--radius); border: 1px solid #f0c0c8; }
.notice-box p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.notice-box i { color: var(--red); margin-right: 6px; }
.notice-box strong { color: var(--text); }
/* Itinerary day body inner padding */
.itin-day-content { padding: 10px 4px; }
.pdb-time { font-size:11px; font-weight:600; color:var(--teal-dark); background:var(--teal-pale); border-radius:20px; padding:2px 10px; margin-left:8px; vertical-align:middle; }
.services-note { font-size:13px; color:var(--muted); margin-top:16px; }
/* Highlighted / dark variants of the itinerary place-detail-block */
.place-detail-block { margin-bottom: 20px; }
.place-detail-block:last-child { margin-bottom: 0; }
.place-detail-block h4 i { margin-right: 6px; }
.place-detail-block.highlight { background: linear-gradient(135deg, var(--teal-light), #e0f5f3); }
.place-detail-block.dark { background: linear-gradient(135deg, #1a4a48, var(--teal-dark)); color: #fff; margin-top: 20px; }
.place-detail-block.dark h4 { color: var(--gold); }
.place-detail-block.dark p { color: rgba(255,255,255,.85); }
/* Booking card notes (cancellation policy / payment methods) */
.booking-card h4 i { color: var(--teal); margin-right: 8px; }
.booking-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }
.booking-info-grid.mt-lg { margin-top: 28px; }
.pay-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.pay-note i { color: var(--teal); margin-right: 6px; }
.pay-note a { color: var(--teal-dark); font-weight: 600; }
/* "Write a review" heading + intro */
.comment-heading { font-family: var(--ff-head); font-size: 1.4rem; margin-bottom: 6px; }
.comment-lead { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }
/* Simple emoji-icon preference card (tour-preference picker) */
.pref-card.simple { padding: 24px; text-align: center; }
.pref-card.simple p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.pref-emoji { font-size: 32px; margin-bottom: 10px; }
.center-cta { text-align: center; margin-top: 24px; }
.btn-submit.btn-inline { width: auto; padding: 14px 36px; }
/* "Related Searches" SEO keyword box */
.related-searches { margin-top: 48px; padding: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.related-searches p { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
/* Fixed-value width bars for the rating breakdown (data-driven, not layout) */
.w-92 { width: 92%; }
.w-6 { width: 6%; }
.w-2 { width: 2%; }
.w-0 { width: 0%; }
/* ════════════════════════════════════════════════════════════
 WIDTH-CONSISTENCY FIX
 The stylesheet grew in two phases: an early pass (var(--max-
 content), ~1200px) and a later pass that widened the page shell
 to a hard-coded 1400px (see .header-inner, .tour-layout,
 .tab-inner, .footer-inner above). A handful of selectors were
 never carried over to the wider pass, so on any page that still
 uses them, that one row renders narrower than everything above
 and below it — the "unbalanced" look. This rule brings them in
 line with the rest of the page on desktop, site-wide, without
 touching their other properties.
════════════════════════════════════════════════════════════ */
.tab-nav,
.slider-wrap,
.stat-strip,
.hero-inner {max-width: 1400px;}
/* ============================================================
   THT MENU — shared across all pages using the new mega menu.
   Namespaced with tht- prefixed classes; does not affect the
   old #main-nav/.nav-item/.dropdown/.mega-dropdown rules above,
   which older pages still using the old markup depend on.
   ============================================================ */
/* ============================================================
   THT MENU — fully self-contained, namespaced styles.
   Deliberately independent of styles.css so this can never be
   broken by that file being stale or cached.
   ============================================================ */
#tht-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; font-family: "Poppins", sans-serif; }
.tht-item { position: relative; }
.tht-link { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 14.5px; line-height: 1; font-weight: 600; font-family: inherit; color: #1e2d2c; letter-spacing: .01em; text-transform: uppercase; border: none; background: none; cursor: pointer; border-radius: 6px; white-space: nowrap; text-decoration: none; transition: background .15s ease, color .15s ease; }
.tht-link:hover,
.tht-item.is-open > .tht-link { background: #e6f5f4; color: #0a6b67; }
.tht-link .fa-chevron-down { font-size: 11px; transition: transform .2s; }
.tht-item.is-open > .tht-link .fa-chevron-down { transform: rotate(180deg); }
.tht-panel { position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid #dde8e7; border-radius: 14px; box-shadow: 0 16px 40px rgba(20,40,38,.14); opacity: 0; visibility: hidden; transform: translateX(var(--tht-shift, 0px)) translateY(8px); transition: opacity .18s ease, visibility .18s; pointer-events: none; z-index: 999; padding: 12px 0; width: 300px; }
.tht-item.is-open > .tht-panel { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(var(--tht-shift, 0px)) translateY(0); }
.tht-panel ul { list-style: none; margin: 0; padding: 0; }
.tht-panel li a { display: block; padding: 14px 26px; font-size: 16px; line-height: 1.3; color: #1e2d2c; text-decoration: none; white-space: nowrap; box-shadow: inset 4px 0 0 transparent; transition: background .15s ease, box-shadow .15s ease; }
.tht-panel li a:hover { background: #e6f5f4; color: #0a6b67; box-shadow: inset 4px 0 0 #0e918c; }

.tht-panel--mega { width: max-content; max-width: calc(100vw - 48px); left: 50%; padding: 32px 40px; transform: translateX(calc(-50% + var(--tht-shift, 0px))) translateY(8px); }
.tht-item.is-open > .tht-panel--mega { transform: translateX(calc(-50% + var(--tht-shift, 0px))) translateY(0); }
.tht-cols { display: grid; grid-template-columns: repeat(4, minmax(190px, max-content)); gap: 6px 52px; align-items: start; }
.tht-cols--2 { grid-template-columns: repeat(2, minmax(190px, max-content)); }
.tht-col h4 { margin: 0 0 6px; padding-bottom: 11px; font-size: 13px; font-weight: 700; color: #0a6b67; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 2px solid #e6f5f4; }
.tht-col li a { padding: 8px 8px; font-size: 15px; border-radius: 6px; }
/* Two links side by side in one menu row */
.tht-panel .tht-col li.tht-inline { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.tht-panel .tht-col li.tht-inline a { display: inline-block; width: auto; }
@media (max-width: 1450px) {
.tht-cols { grid-template-columns: repeat(2, minmax(190px, max-content)); gap: 22px 52px; }}
/* ---- Mobile: accordion, full width ---- */
@media (max-width: 768px) {
  #tht-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 74px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dde8e7; box-shadow: 0 12px 30px rgba(0,0,0,.1); max-height: calc(100vh - 74px); overflow-y: auto; }
  #tht-nav.is-open { display: flex; }
  .tht-item { width: 100%; border-bottom: 1px solid #dde8e7; }
  .tht-link { width: 100%; padding: 15px 20px; border-radius: 0; justify-content: space-between; text-align: left; }
  .tht-panel, .tht-panel--mega {
    position: static; display: none; opacity: 1; visibility: visible; pointer-events: all;
    width: 100%; max-width: none; transform: none !important; box-shadow: none; border: none;
    border-top: 1px solid #dde8e7; border-radius: 0; padding: 6px 0;
  }
  .tht-item.is-open > .tht-panel,
  .tht-item.is-open > .tht-panel--mega { display: block; }
  .tht-panel li a { white-space: normal; padding: 13px 24px; }
  .tht-cols { grid-template-columns: 1fr; gap: 2px; }
  .tht-col { padding: 10px 20px; }
  .tht-col h4 { white-space: normal; }
  .tht-col li a { white-space: normal; padding: 11px 4px; }
}
#tht-menu-toggle { display: none; }
@media (max-width: 768px) {
  #tht-menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 2px solid #dde8e7; border-radius: 6px; width: 40px; height: 38px; color: #1e2d2c; font-size: 18px; cursor: pointer; }
}
/* ============================================================
   THT SEARCH — header search box + dedicated results page.
   Shared across all pages; the results-page-specific layout
   rules (#tht-search-page) are only used on search.html.
   ============================================================ */
.tht-search-form { display: flex; align-items: center; }
.tht-search-input { width: 0; opacity: 0; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 20px 0 0 20px; font-family: "Poppins", sans-serif; font-size: 14px; color: #1e2d2c; background: #f4f8f8; transition: width .25s ease, opacity .2s ease, padding .25s ease, border-color .2s ease; }
.tht-search-form.is-active .tht-search-input { width: 190px; opacity: 1; padding: 9px 14px; border-color: #dde8e7; }
.tht-search-input:focus { outline: none; border-color: #0e918c; }
.tht-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #dde8e7; background: #fff; color: #1e2d2c; border-radius: 50%; cursor: pointer; transition: background .15s ease, color .15s ease; flex-shrink: 0; }
.tht-search-form.is-active .tht-search-btn { border-radius: 0 20px 20px 0; border-left: none; }
.tht-search-btn:hover { background: #e6f5f4; color: #0a6b67; }
@media (max-width: 768px) {
  .tht-search-form.is-active .tht-search-input { width: 130px; }
}
/* ---- Search results page ---- */
#tht-search-page { max-width: 860px; margin: 0 auto; padding: 60px 24px 100px; min-height: 50vh; }
#tht-search-page h1 { font-family: "Playfair Display", serif; font-size: 32px; color: #1e2d2c; margin: 0 0 24px; }
.tht-search-form--page { max-width: 520px; margin-bottom: 8px; }
.tht-search-form--page .tht-search-input { width: 100%; opacity: 1; padding: 13px 18px; border: 1px solid #dde8e7; border-radius: 24px 0 0 24px; }
.tht-search-form--page .tht-search-btn { border-radius: 0 24px 24px 0; border-left: none; width: 48px; height: 48px; }
#tht-search-status { color: #607070; font-size: 14px; margin: 18px 0 24px; }
.tht-result { display: block; padding: 20px 0; border-bottom: 1px solid #dde8e7; text-decoration: none; }
.tht-result-title { font-size: 19px; font-weight: 600; color: #0a6b67; margin: 0 0 6px; }
.tht-result-url { font-size: 13px; color: #8aa19e; margin: 0 0 8px; }
.tht-result-snippet { font-size: 15px; line-height: 1.6; color: #46615e; margin: 0; }
.tht-result-snippet mark { background: #d9f0ee; color: #0a6b67; font-weight: 600; padding: 0 2px; border-radius: 3px; }
.tht-search-empty { text-align: center; padding: 60px 20px; color: #607070; }
.tht-search-empty i { font-size: 40px; color: #c9dbd9; margin-bottom: 16px; display: block; }

/* ════════════════════════════════════════════════════════════
 Plan Your Trip Badge
════════════════════════════════════════════════════════════ */
 .trip-plan {display:inline-block;background:var(--red); color: rgb(0,0,255); text-align: center;font-weight:2000;font-size:16px;padding:10px 20px;border-radius:8px;}

/* ════════════════════════════════════════════════════════════
 Homepage width alignment — sections transferred from index-6.html
 (Best Sale, Istanbul/Cappadocia/Ephesus, AI Travel Intelligence,
 Why Choose Us, Reviews). These sit inside index.html's single
 .tour-main content column (already constrained to ~1336px by
 .tour-layout), while every native section on that page fills the
 column edge to edge with no extra wrapper. The transferred sections
 instead centered themselves a second time at the shared
 --max-content (1200px) variable, which made them render narrower
 than the rest of the page. This removes that second constraint so
 they match; Cappadocia (.dest-inner) and AI Travel Intelligence
 (.ai-inner) additionally get a 30px side gutter per request.
 NOTE: these selectors are shared across the site — if any other
 page relies on the original narrower var(--max-content) centering
 for these classes, it will need its own override (see index-6.html,
 which already carries a local override for its own layout).
════════════════════════════════════════════════════════════ */
.cat-inner,
.why-inner,
.reviews-inner {
max-width: 100%;
padding: 0 20px;
}
.dest-inner,
.ai-inner {
max-width: 100%;
padding: 0 30px;
}

/* Attraction cards grid — no sidebar layout */
.attraction-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));gap: 28px;margin-top: 32px;}
.attraction-card {background: var(--white);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-sm);transition: var(--trans);}
.attraction-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px);}
.attraction-card-img {width: 100%;height: 220px;object-fit: cover;}
.attraction-card-body { padding: 24px;}
.attraction-tag {display: inline-flex;align-items: center;gap: 6px;background: var(--teal-light);color: var(--teal-dark);font-size: 11px;font-weight: 700;letter-spacing: .07em;text-transform: uppercase;border-radius: 50px;padding: 4px 12px;margin-bottom: 12px;}
.attraction-card-body h3 {font-family: var(--ff-head);font-size: 1.18rem;color: var(--text);margin-bottom: 10px;}
.attraction-card-body p {font-size: 14.5px;color: var(--muted);line-height: 1.75;margin-bottom: 16px;}
.attraction-why {background: var(--bg);border-radius: 8px;padding: 14px 16px;}
.attraction-why p {font-size: 12.5px;font-weight: 700;color: var(--teal-dark);text-transform: uppercase;letter-spacing: .05em;margin-bottom: 8px;}
.attraction-why ul {display: flex;flex-direction: column;gap: 6px;list-style: none;}
.attraction-why ul li {font-size: 13.5px;color: var(--muted);display: flex;align-items: flex-start;gap: 8px;}
.attraction-why ul li::before {content: '✦';color: var(--gold);flex-shrink: 0;font-size: 10px;margin-top: 4px;}
/* AI Recommendations card */
.ai-rec-card {background: linear-gradient(135deg, #0a3d3a 0%, #143a37 100%);border-radius: var(--radius-lg);padding: 36px;color: #fff;margin-bottom: 24px;}
.ai-rec-card h3 {font-family: var(--ff-head);font-size: 1.25rem;color: var(--gold);margin-bottom: 12px;display: flex;align-items: center;gap: 10px;}
.ai-rec-card p { font-size: 15px; opacity: .88; line-height: 1.8; margin-bottom: 0;}
.ai-rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px;}
/* Practical info box */
.practical-box {background: var(--white);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;}
.practical-row {display: flex;align-items: flex-start;gap: 18px;padding: 20px 26px;border-bottom: 1px solid var(--border);}
.practical-row:last-child { border-bottom: none;}
.practical-row i { color: var(--teal); font-size: 18px; margin-top: 3px; flex-shrink: 0; width: 22px; text-align: center;}
.practical-row h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px;}
.practical-row p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0;}
/* Season badges */
.season-card {border: 1px solid var(--border);border-radius: var(--radius);padding: 20px;text-align: center;background: var(--white);}
.season-card i { font-size: 28px; margin-bottom: 10px; display: block;}
.season-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;}
.season-card p { font-size: 13px; color: var(--muted); line-height: 1.55;}
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px;}
/* Responsive */
@media (max-width: 900px) {.season-grid { grid-template-columns: 1fr 1fr;}
.booking-wrap { grid-template-columns: 1fr;}}
@media (max-width: 640px) {.attraction-grid { grid-template-columns: 1fr;}
.season-grid { grid-template-columns: 1fr 1fr;}
#menu-toggle { display: flex;}
#main-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-md); padding: 12px; flex-direction: column; gap: 4px; z-index: 999;}
#main-nav.open { display: flex;}
.mega-dropdown, .dropdown { display: none !important;}}
/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px;}
.review-card {background: var(--white);border: 1px solid var(--border);border-radius: var(--radius);padding: 24px;box-shadow: var(--shadow-sm);}
.review-stars { color: var(--gold); margin-bottom: 10px; font-size: 15px;}
.review-text { font-size: 14.5px; color: var(--muted); line-height: 1.75; margin-bottom: 16px; font-style: italic;}
.review-author { display: flex; align-items: center; gap: 12px;}
.review-avatar {width: 40px; height: 40px; border-radius: 50%;background: var(--teal-dark);color: #fff;display: flex; align-items: center; justify-content: center;font-weight: 700; font-size: 15px; flex-shrink: 0;}
.review-name { font-size: 14px; font-weight: 600; color: var(--text);}
.review-date { font-size: 12px; color: var(--muted);}
/* ════════════════════════════════════════════════════════════
 TURKEY VISA GUIDE PAGE — ADDITIONS
 (New, additive rules only. Nothing above this block was changed,
 so every other page that links styles.css is unaffected.)
════════════════════════════════════════════════════════════ */

/* Full-width policy layout variant: same page family as .policy-layout,
   but this guide intentionally ships with no sidebar. */
.policy-layout.policy-layout--full { grid-template-columns: 1fr; max-width: var(--max-narrow); }

/* Generic status badge (base look shared with .cancel-table .badge) */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; }

/* Country filter chips (reuses .kw-chip visuals, adds a clickable/active state) */
.kw-chip { cursor: pointer; transition: var(--trans); display: inline-flex; align-items: center; gap: 6px; }
.kw-chip:hover { border-color: var(--teal); }
.kw-chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }
#statusFilters { margin: 22px 0 18px; }

/* Country search input */
.country-search-wrap { position: relative; margin-bottom: 28px; }
.country-search-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.country-search-input { width: 100%; padding: 14px 18px 14px 46px; border: 1.5px solid var(--border); border-radius: 50px; font-family: var(--ff-body); font-size: 15px; color: var(--text); background: var(--white); transition: var(--trans); }
.country-search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,145,140,.12); }

/* A-Z jump nav */
.country-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; position: sticky; top: 122px; background: var(--white); padding: 10px 0; z-index: 5; }
.country-jump-letter { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--teal-dark); transition: var(--trans); }
.country-jump-letter:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Letter groups + country cards */
.country-letter-group { margin-bottom: 8px; scroll-margin-top: 190px; }
.country-letter-heading { font-family: var(--ff-head); font-size: 20px; color: var(--gold); background: var(--teal-dark); display: inline-block; padding: 4px 16px; border-radius: 6px; margin: 28px 0 14px; }
.country-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; background: var(--white); transition: var(--trans); }
.country-item:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.country-item-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.country-item-name { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 0; }
.country-item-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin: 0; }
.country-item.is-hidden { display: none; }

@media (max-width: 640px) {
  .country-jump { position: static; }
  .country-item-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   Page-specific layout — 37-Day Turkey Tour page only
   (scoped to body.tour-37day so it never affects other tour pages
   that reuse the same #overview/#itinerary/#pricing/.tour-main etc.)
   ═══════════════════════════════════════════════════════════════ */
.tour-37day .tour-main { max-width: 1200px; margin: 0 auto; }
.tour-37day #overview, .tour-37day #places, .tour-37day #services, .tour-37day #ai-recs,
.tour-37day #who-for, .tour-37day #best-time, .tour-37day #travel-tips, .tour-37day #why-us,
.tour-37day #pricing, .tour-37day #faq, .tour-37day #booking, .tour-37day #related-tours { padding: 28px 32px; }
.tour-37day #itinerary { padding: 28px 13px; }
.tour-37day #ai-recs, .tour-37day #pricing { scroll-margin-top: 150px; }
.tour-37day #related-tours .related-tours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 1000px) { .tour-37day #related-tours .related-tours-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-37day #related-tours .related-tours-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   7-DAY TURKEY TOUR PAGE — PAGE-SPECIFIC RULES
   (added for /7-days-turkey-anatolian-seven-days-turkey-round-trip.html)
════════════════════════════════════════════════════════════ */
.page-wide { max-width: 1400px; }
.hero-badge-inline { margin-bottom: 18px; display: inline-flex; }
.subsection-title { font-family: var(--ff-head); font-size: 19px; color: var(--text); margin: 28px 0 12px; }
.subsection-title.tight-top { margin: 24px 0 8px; }
.subsection-title.tight-top-lg { margin: 32px 0 8px; }
.lead-text { color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 14px; }
.lead-text:last-child { margin-bottom: 0; }
.lead-text.narrow { max-width: 820px; }
.itin-intro-text { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.addon-strip .ico-gold { color: var(--gold); margin-right: 6px; }
.addon-strip p.addon-body { font-weight: 400; color: var(--muted); }
.services-grid.two-up { grid-template-columns: repeat(2, 1fr); }
.policy-notice.mt-24 { margin-top: 24px; }
.policy-notice.mt-28 { margin-top: 28px; }
.commitment-banner.mt-16 { margin-top: 16px; }
.route-map-title { font-family: var(--ff-head); font-size: 1.15rem; color: var(--teal-dark); text-align: center; }
.perfect-for-note { text-align: center; color: var(--muted); font-size: 14px; margin: 20px auto 0; max-width: 700px; }
.booking-info-grid.mt-28 { margin-top: 28px; }
.booking-card p.cancel-text { font-size: 14px; color: var(--muted); line-height: 1.7; }
.icon-gold-gap { color: var(--gold); margin-right: 8px; }
.icon-teal-gap { color: var(--teal); margin-right: 8px; }
.related-tours-grid.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 1000px) { .related-tours-grid.four-col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-tours-grid.four-col { grid-template-columns: 1fr; } }
.site-footer { background: var(--teal-dark); color: #fff; }
.footer-social.mt-16 { margin-top: 16px; }
.booking-section { margin: 0 auto; padding: 60px 32px; }
.related-tours-section { padding-bottom: 56px; }
/* ════════════════════════════════════════════════════════════
   9-DAY ISTANBUL–CAPPADOCIA–EPHESUS–PAMUKKALE–BODRUM TOUR PAGE
   Page-specific additions only, scoped to body.tour-9day so no
   other page that shares styles.css is affected.
════════════════════════════════════════════════════════════ */
#places, #ai-recs, #pricing, #faq, #best-time, #why-us { scroll-margin-top: 150px; }
.tour-9day #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Hot_air_balloons_over_Cappadocia_1.jpg?width=1600"); }
.tour-9day .tour-main { max-width: 1200px; margin: 0 auto; }
.tour-9day .place-card .place-desc:last-of-type { margin-bottom: 0; }
/* Included / Optional-Excluded tag on place cards that need a third state
   (not simply "Included" red/gold) — reuses the same visual language as
   .place-tag but with a clearer excluded/optional meaning on this page. */
.place-tag.optional { background: var(--red); color: #fff; }
/* Pricing tier table (Private vs Group vs Single Supplement) */
.price-table-wrap { overflow-x: auto; margin: 24px 0; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.price-table thead tr { background: var(--teal-dark); color: #fff; }
.price-table th { padding: 14px 20px; text-align: left; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.price-table td { padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text); }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:nth-child(even) td { background: var(--bg); }
.price-table td.amount { font-family: var(--ff-head); font-weight: 700; color: var(--teal-dark); font-size: 17px; }
.price-table td.tier-name { font-weight: 600; }
.price-table td.tier-name small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.price-note-box { background: var(--teal-light); border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin: 20px 0; font-size: 14.5px; color: var(--teal-dark); line-height: 1.7; }
.market-note { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin-top: 24px; font-size: 15px; color: var(--muted); line-height: 1.85; }
.market-note strong { color: var(--text); }
.photo-credits { font-size: 11px; opacity: .55; margin-top: 10px; line-height: 1.6; }
.photo-credits a { color: inherit; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   PAGE ADDITIONS — 3-Day Cappadocia & Pamukkale Tour (KNY-268)
   Small, additive, non-breaking supplements to the shared
   component library above. Safe to reuse on future tour pages.
   ════════════════════════════════════════════════════════════ */
.btn-outline-light { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); padding: 13px 26px; border-radius: 50px; font-size: 15px; font-weight: 700; transition: var(--trans); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.slider-section { padding: 44px 32px; background: var(--bg); }

@media (max-width: 640px) {
  .slider-section { padding: 28px 16px; }
}

/* ── Fix: hero CTA inheriting full-width from .btn-gold (booking-form submit button) ── */
.hero-actions .btn-gold { width: auto; }

/* ── Fix: quick-facts bar text unreadable on dark teal background ── */
.qf-item { color: #eaf3f2; }
.qf-item i { color: var(--gold); font-size: 20px; display: block; margin-bottom: 8px; }
.qf-item strong { display: block; color: #ffffff; font-size: 14.5px; margin-bottom: 2px; }
.qf-item span { display: block; color: #bfd9d6; font-size: 12.5px; }

/* ════════════════════════════════════════════════════════════
   KEEP EXPLORING — related tours grid
   ════════════════════════════════════════════════════════════ */
.keep-exploring { background: var(--bg); padding: 56px 32px; }
.ke-inner { max-width: var(--max-content); margin: 0 auto; }
.ke-label { color: var(--teal-dark); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
.ke-title { font-family: var(--ff-head); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--text); margin-bottom: 10px; }
.ke-title span { color: var(--teal); }
.ke-subtitle { color: var(--muted); font-size: 15px; margin-bottom: 32px; max-width: 640px; }
.ke-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ke-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.ke-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ke-card-img { height: 150px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ke-card-img i { font-size: 30px; color: rgba(255,255,255,.85); }
.ke-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ke-card-body h4 { font-family: var(--ff-head); font-size: 16px; color: var(--text); margin-bottom: 8px; line-height: 1.35; }
.ke-card-body p { font-size: 13.5px; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.ke-card-link { font-size: 13.5px; font-weight: 700; color: var(--teal-dark); display: inline-flex; align-items: center; gap: 6px; transition: var(--trans); }
.ke-card-link i { font-size: 12px; transition: var(--trans); }
.ke-card:hover .ke-card-link i { transform: translateX(3px); }

.ke-img-1 { background: linear-gradient(160deg, #0a6b67, #08312f); }
.ke-img-2 { background: linear-gradient(160deg, #7dd3c8, #d4a843); }
.ke-img-3 { background: linear-gradient(160deg, #f0a45c, #e8683f 55%, #7a1f3d); }
.ke-img-4 { background: linear-gradient(160deg, #9fc9c4, #e6f5f4); }
.ke-img-5 { background: linear-gradient(160deg, #12403d, #0a6b67); }
.ke-img-6 { background: linear-gradient(160deg, #14524d, #7a1f3d); }
.ke-img-7 { background: linear-gradient(160deg, #d4a843, #7a1f3d); }
.ke-img-8 { background: linear-gradient(160deg, #12403d, #d4a843); }

@media (max-width: 1080px) {
  .ke-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ke-grid { grid-template-columns: 1fr; }
  .keep-exploring { padding: 40px 18px; }
}

/* ════════════════════════════════════════════════════════════
   TOUR PAGE UTILITY CLASSES
   (moved out of inline styles — used on the 10-day Best of Turkey
   page and any future tour page built the same way)
   ════════════════════════════════════════════════════════════ */

/* Spacing utility */
.mt-32 { margin-top: 32px; }

/* Gold icon-gap variant, matches .icon-teal-gap */
.icon-gold-gap { color: var(--gold); margin-right: 6px; }

/* "Flat" route-map variant for use inside an already-padded section
   (no boxed background/border, no extra vertical padding) */
.route-map--flat { background: none; padding: 0; border: none; }
.route-map--flat .route-map-inner { padding: 0; }

/* Extra breathing room above the footer grid on tour pages */
.tour-9day .footer-grid { padding-top: 56px; }

/* Absolute-fill helper for illustrations/photos inside .ke-card-img
   (SVG illustrations and real photos both use this) */
.ke-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mobile Sticky CTA — action buttons ─────────────────────── */
.mcb-actions { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; }
.mcb-btn { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 11px 12px; }
.mobile-cta-bar .btn-book-now.mcb-btn-reserve { background: var(--sky); color: #fff; border: 2px solid var(--sky); }
.mobile-cta-bar .btn-book-now.mcb-btn-enquire { background: var(--gold); color: #fff; border: 2px solid var(--gold); }
.mobile-cta-bar .btn-book-now.mcb-btn-whatsapp { background: #25D366; border: 2px solid #128C7E; }
.mobile-cta-bar .btn-book-now i { font-size: 12px; }

@media (max-width: 380px) {
  .mobile-cta-bar { padding: 10px 10px; gap: 6px; }
  .mcb-price { font-size: 14px; }
  .mcb-actions { gap: 4px; }
  .mobile-cta-bar .btn-book-now { padding: 9px 8px; font-size: 11px; gap: 3px; }
  .mobile-cta-bar .btn-book-now i { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
 CAPPADOCIA & EPHESUS TOUR PAGE — small helper classes
 (replaces inline style="" attributes that page was using; kept
 as scoped, reusable modifiers in the same style as the .mt-16 /
 .icon-teal-mr helpers already defined above)
════════════════════════════════════════════════════════════ */
.icon-gold-mr { color: var(--gold); margin-right: 6px; }
.stat-star-icon { font-size: 16px; margin-left: 4px; }
.route-map.mt-36 { margin-top: 36px; }
.subsection-title { font-family: var(--ff-head); font-size: 22px; margin: 44px 0 8px; }
.section-lead.mb-0 { margin-bottom: 0; }
.hotel-info-box.mt-16 { margin-top: 16px; }
.pc-amount.pc-amount-sm { font-size: 22px; }
.text-note { font-size: 14px; color: var(--muted); line-height: 1.7; }
.text-note.mb-12 { margin-bottom: 12px; }

/* ════════════════════════════════════════════════════════════
   3-DAY LUXURY CAPPADOCIA HOLIDAY TOUR PAGE — PAGE-SPECIFIC RULES
   (for /3-days-luxury-cappadocia-holiday-package-tour-from-istanbul.html,
   KNY-307. Scoped to body.tour-cappadocia-3d so it never affects any
   other tour page that shares this stylesheet. Replaces inline
   max-width/margin/padding style="" attributes that page was using
   on its section wrappers — same pattern as .tour-37day/.tour-9day
   .tour-main above.)
════════════════════════════════════════════════════════════ */
/* Standard content wrapper: caps every main section at the site's
   shared --max-content (1200px) so nothing on this page runs wider
   than the rest of the site, including the booking widget, which
   previously had a stray hard-coded 1400px on this page only. */
.tour-cappadocia-3d .tour-main { max-width: var(--max-content); margin: 0 auto; }
.tour-cappadocia-3d .tour-main.tour-main-pad { padding: 56px 24px; }
.tour-cappadocia-3d .tour-main.tour-main-pad-tight { padding: 16px 24px 56px; }
.tour-cappadocia-3d .tour-main.tour-main-pad-booking { padding: 20px 32px 60px; }
.tour-cappadocia-3d .tour-main.tour-main-tabs { padding: 0 24px; display: flex; overflow-x: auto; gap: 4px; }

/* Boxed/contained section panels — used instead of full-bleed color
   bands so "Tour Highlights", "Where You'll Stay" and "AI Travel
   Recommendations" render as a rounded card inside the same 1200px
   column as the rest of the page, rather than a background that
   stretches edge-to-edge across the browser. */
.tour-cappadocia-3d .tour-box { border-radius: var(--radius-lg); padding: 44px 40px; }
.tour-cappadocia-3d .tour-box-tinted { background: var(--teal-pale); }
.tour-cappadocia-3d .tour-box-dark { background: linear-gradient(135deg, #0a3d3a 0%, #143a37 100%); color: #fff; }
.tour-cappadocia-3d .tour-box-dark .ai-recs-title { color: #fff; }
.tour-cappadocia-3d .tour-box-dark .ai-recs-intro { color: rgba(255,255,255,.75); font-size: 15px; max-width: 720px; margin-bottom: 28px; line-height: 1.8; }
.tour-cappadocia-3d .ai-recs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
@media (max-width: 640px) { .tour-cappadocia-3d .tour-box { padding: 32px 24px; } }

/* Small text/spacing helpers used inside the boxed panels above
   (replace one-off inline style="" attributes on this page only). */
.tour-cappadocia-3d .tour-lead { color: var(--muted); font-size: 15px; max-width: 760px; margin-bottom: 28px; line-height: 1.8; }
.tour-cappadocia-3d .tour-lead.tour-lead-tight { margin-bottom: 8px; }
.tour-cappadocia-3d .wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 20px; }
.tour-cappadocia-3d .pkg-price-amount.pkg-price-amount-sm { font-size: 17px; }
.tour-cappadocia-3d .mt-12 { margin-top: 12px; }
.tour-cappadocia-3d .mt-14 { margin-top: 14px; }

/* ════════════════════════════════════════════════════════════
   6-DAY TRABZON HOLIDAY PACKAGE WITH HOTEL & GROUP TOURS — PAGE
   -SPECIFIC RULES (KNY-314, /6-day-trabzon-holiday-package-with-
   hotel-group-tours.html). Scoped to body.tour-trabzon-6day so no
   other page that shares styles.css is affected. Follows the same
   additive pattern as .tour-9day / .tour-cappadocia-3d above.
════════════════════════════════════════════════════════════ */
.tour-trabzon-6day #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Sumela_From_Across_Valley.JPG?width=1600"); }
.tour-trabzon-6day .hero-stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); border-radius: var(--radius); padding: 14px 20px; text-align: center; color: #fff; font-weight: 600; font-size: 14px; min-width: 150px; }
.tour-trabzon-6day .tour-main { max-width: var(--max-content); margin: 0 auto; }
.tour-trabzon-6day #overview, .tour-trabzon-6day #itinerary, .tour-trabzon-6day #highlights,
.tour-trabzon-6day #accommodation, .tour-trabzon-6day #services, .tour-trabzon-6day #pricing,
.tour-trabzon-6day #ai-recs, .tour-trabzon-6day #travel-tips, .tour-trabzon-6day #faq,
.tour-trabzon-6day #booking, .tour-trabzon-6day #related-tours { scroll-margin-top: 150px; }

/* Attraction deep-dive cards (Uzungöl / Ayder / Sumela / Zigana / Fırtına Valley) */
.tour-trabzon-6day .attractions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.tour-trabzon-6day .attraction-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--trans); display: flex; flex-direction: column; }
.tour-trabzon-6day .attraction-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tour-trabzon-6day .attraction-img { height: 210px; overflow: hidden; }
.tour-trabzon-6day .attraction-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tour-trabzon-6day .attraction-card:hover .attraction-img img { transform: scale(1.05); }
.tour-trabzon-6day .attraction-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.tour-trabzon-6day .attraction-tag { display: inline-block; align-self: flex-start; background: var(--teal-light); color: var(--teal-dark); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; }
.tour-trabzon-6day .attraction-name { font-family: var(--ff-head); font-size: 20px; color: var(--text); margin-bottom: 10px; }
.tour-trabzon-6day .attraction-body p { font-size: 14.5px; color: var(--muted); line-height: 1.8; margin-bottom: 10px; }
.tour-trabzon-6day .attraction-body p:last-child { margin-bottom: 0; }
.tour-trabzon-6day .attraction-why { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 13.5px; color: var(--teal-dark); }
.tour-trabzon-6day .attraction-why strong { color: var(--text); }
@media (max-width: 800px) { .tour-trabzon-6day .attractions-grid { grid-template-columns: 1fr; } }

/* Itinerary place image (Day 2 / Day 3 / Day 4 embedded photos) */
.tour-trabzon-6day .itin-place-img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); margin: 14px 0 16px; }

/* Route map stops (text list variant, no visual track needed at this width) */
.tour-trabzon-6day .route-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; }
.tour-trabzon-6day .route-stop { background: var(--white); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px; white-space: nowrap; }
.tour-trabzon-6day .route-arrow { color: var(--teal); font-size: 13px; }

/* AI recommendation cards */
.tour-trabzon-6day .ai-recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.tour-trabzon-6day .ai-rec-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; transition: var(--trans); }
.tour-trabzon-6day .ai-rec-card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.tour-trabzon-6day .ai-card-icon { font-size: 22px; color: var(--teal); margin-bottom: 12px; }
.tour-trabzon-6day .ai-rec-card h4 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.tour-trabzon-6day .ai-rec-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .tour-trabzon-6day .ai-recs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tour-trabzon-6day .ai-recs-grid { grid-template-columns: 1fr; } }

/* Best-for pills row under highlights */
.tour-trabzon-6day .pf-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tour-trabzon-6day .pf-pill { background: var(--teal-pale); border: 1px solid var(--border); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px; }

/* Travel-tips numbered step list */
.tour-trabzon-6day .ai-tips { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.tour-trabzon-6day .ai-tip { display: flex; gap: 16px; align-items: flex-start; }
.tour-trabzon-6day .ai-tip-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.tour-trabzon-6day .ai-tip p { font-size: 14.5px; color: var(--muted); line-height: 1.75; margin: 0; }
.tour-trabzon-6day .ai-tip p strong { color: var(--text); }

/* Related tours row */
.tour-trabzon-6day .related-tours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 28px; }
.tour-trabzon-6day .tc-img { height: 150px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tour-trabzon-6day .tc-img img { width: 100%; height: 100%; object-fit: cover; }
.tour-trabzon-6day .tc-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: #1a1206; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 11px; border-radius: 50px; }
.tour-trabzon-6day .tc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tour-trabzon-6day .tc-meta { font-size: 11.5px; color: var(--teal-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.tour-trabzon-6day .tc-title { font-family: var(--ff-head); font-size: 16px; color: var(--text); margin-bottom: 10px; line-height: 1.35; flex: 1; }
.tour-trabzon-6day .tc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); }
.tour-trabzon-6day .tc-price { font-family: var(--ff-head); font-weight: 700; color: var(--teal-dark); font-size: 15px; }
.tour-trabzon-6day .tc-price span { font-family: var(--ff-body); font-weight: 400; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.tour-trabzon-6day .tc-btn { color: var(--teal-dark); font-size: 13px; font-weight: 700; }
.tour-trabzon-6day .related-tours-section .tour-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--trans); display: flex; flex-direction: column; text-decoration: none; }
.tour-trabzon-6day .related-tours-section .tour-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (max-width: 1000px) { .tour-trabzon-6day .related-tours-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-trabzon-6day .related-tours-grid { grid-template-columns: 1fr; } }

/* Signature closing section */
.tour-trabzon-6day .why-love { background: linear-gradient(135deg, #0a3d3a 0%, #143a37 100%); color: #fff; padding: 64px 32px; text-align: center; }
.tour-trabzon-6day .why-love-inner { max-width: 780px; margin: 0 auto; }
.tour-trabzon-6day .why-love h2 { font-family: var(--ff-head); font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 20px; }
.tour-trabzon-6day .why-love p { font-size: 15.5px; line-height: 1.9; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.tour-trabzon-6day .why-love .signature-line { font-family: var(--ff-head); color: var(--gold); font-size: 17px; margin-top: 24px; }

/* ════════════════════════════════════════════════════════════
   5-DAY SEVEN CHURCHES OF ASIA MINOR TOUR PAGE (KNY-330)
   /5-days-round-trip-istanbul-to-seven-churches-of-asia-minor-turkey.html
   Page-specific additions only, scoped to body.tour-seven-churches
   so no other page that shares styles.css is affected. Follows the
   same additive pattern as .tour-9day / .tour-trabzon-6day above.
════════════════════════════════════════════════════════════ */
.tour-seven-churches #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Ephesus%20-%20Celsus%20Library.jpg?width=1600"); }
.tour-seven-churches .tour-main { max-width: var(--max-content); margin: 0 auto; }
.tour-seven-churches #overview, .tour-seven-churches #itinerary, .tour-seven-churches #highlights,
.tour-seven-churches #accommodation, .tour-seven-churches #services, .tour-seven-churches #pricing,
.tour-seven-churches #ai-recs, .tour-seven-churches #travel-tips, .tour-seven-churches #faq,
.tour-seven-churches #booking { scroll-margin-top: 150px; }

/* Itinerary place image (used inside each day's expanded body) */
.tour-seven-churches .itin-place-img { width: 100%; height: 230px; object-fit: cover; border-radius: var(--radius); margin: 14px 0 16px; }
.tour-seven-churches .itin-place-credit { display: block; font-size: 11px; color: var(--muted); opacity: .7; margin: -10px 0 16px; }

/* Route map stops (pill/badge variant) */
.tour-seven-churches .route-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 4px; }
.tour-seven-churches .route-stop { background: var(--white); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px; white-space: nowrap; }
.tour-seven-churches .route-arrow { color: var(--teal); font-size: 13px; }

/* AI recommendation + Why-Choose cards */
.tour-seven-churches .ai-recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.tour-seven-churches .ai-rec-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; transition: var(--trans); }
.tour-seven-churches .ai-rec-card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.tour-seven-churches .ai-card-icon { font-size: 22px; color: var(--teal); margin-bottom: 12px; }
.tour-seven-churches .ai-rec-card h4 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.tour-seven-churches .ai-rec-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .tour-seven-churches .ai-recs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tour-seven-churches .ai-recs-grid { grid-template-columns: 1fr; } }

/* Trust-signal pill row */
.tour-seven-churches .pf-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tour-seven-churches .pf-pill { background: var(--teal-pale); border: 1px solid var(--border); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; }
.tour-seven-churches .pf-pill i { color: var(--gold); }

/* Travel-tips numbered list */
.tour-seven-churches .ai-tips { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.tour-seven-churches .ai-tip { display: flex; gap: 16px; align-items: flex-start; }
.tour-seven-churches .ai-tip-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.tour-seven-churches .ai-tip p { font-size: 14.5px; color: var(--muted); line-height: 1.75; margin: 0; }
.tour-seven-churches .ai-tip p strong { color: var(--text); }

/* Suggested-hotels cards */
.tour-seven-churches .hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.tour-seven-churches .hotel-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.tour-seven-churches .hotel-card h4 { font-family: var(--ff-head); font-size: 16px; color: var(--teal-dark); margin-bottom: 6px; }
.tour-seven-churches .hotel-card span { font-size: 13px; color: var(--muted); }
@media (max-width: 800px) { .tour-seven-churches .hotel-grid { grid-template-columns: 1fr; } }

/* Signature closing section */
.tour-seven-churches .why-love { background: linear-gradient(135deg, #0a3d3a 0%, #143a37 100%); color: #fff; padding: 64px 32px; text-align: center; }
.tour-seven-churches .why-love-inner { max-width: 780px; margin: 0 auto; }
.tour-seven-churches .why-love h2 { font-family: var(--ff-head); font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 20px; }
.tour-seven-churches .why-love p { font-size: 15.5px; line-height: 1.9; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.tour-seven-churches .why-love .signature-line { font-family: var(--ff-head); color: var(--gold); font-size: 17px; margin-top: 24px; }

/* Internal-linking "Continue Exploring" row */
.tour-seven-churches .continue-exploring { background: var(--bg); border-top: 1px solid var(--border); padding: 40px 32px; }
.tour-seven-churches .ce-inner { max-width: var(--max-content); margin: 0 auto; }
.tour-seven-churches .ce-inner h3 { font-family: var(--ff-head); font-size: 20px; color: var(--text); margin-bottom: 16px; }
.tour-seven-churches .ce-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.tour-seven-churches .ce-links a { font-size: 13.5px; font-weight: 600; color: var(--teal-dark); }
.tour-seven-churches .ce-links a:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════
   MOSAIC PHOTO GALLERY + LIGHTBOX-TRIGGER TILES — generic,
   reusable component.

   Used identically by every tour page's photo gallery (Bosphorus
   Sunset, Ertuğrul Ghazi, Edirne Overnight, Fethiye Overnight,
   and any future page built with this same markup: .mosaic-gallery
   > .mosaic-main + .mosaic-side > .mosaic-tile[.mosaic-tile-more]).

   Consolidated from 4 separately-maintained, near-identical
   per-page copies — that duplication was the root cause of pages
   randomly missing pieces of this component (e.g. the "+N more"
   overlay) when a page was built from a stale copy of the
   pattern. New tour pages get this automatically now; no CSS
   needs to be added per page for the gallery to work.

   A page-specific look can still be layered on top with a normal
   scoped override placed further below (e.g. see
   .tour-ertugrul-ghazi .mosaic-caption for the one legitimate
   per-page customization that existed before this consolidation).
════════════════════════════════════════════════════════════ */
.mosaic-gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.mosaic-main { position: relative; height: 440px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.mosaic-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mosaic-main:hover img { transform: scale(1.04); }
.mosaic-caption { position: absolute; left: 22px; bottom: 20px; max-width: 70%; padding: 14px 20px; background: rgba(10,30,28,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius); color: #fff; }
.mosaic-caption h3 { font-family: var(--ff-head); font-size: clamp(17px, 2vw, 21px); margin: 2px 0 0; line-height: 1.25; }
.mosaic-eyebrow { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.mosaic-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 440px; }
.mosaic-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mosaic-tile:hover img { transform: scale(1.06); }
.mosaic-tile-label { position: absolute; left: 10px; bottom: 10px; background: rgba(10,30,28,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 50px; }
.mosaic-tile-more .mosaic-more-overlay { position: absolute; inset: 0; background: rgba(10,30,28,.72); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; transition: background .3s ease; }
.mosaic-tile-more:hover .mosaic-more-overlay { background: rgba(10,30,28,.82); }
.mosaic-tile-more .mosaic-more-count { font-family: var(--ff-head); font-size: 28px; font-weight: 700; line-height: 1; }
.mosaic-tile-more .mosaic-more-text { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 5px; opacity: .92; }
@media (max-width: 900px) {
  .mosaic-gallery { grid-template-columns: 1fr; }
  .mosaic-main { height: 280px; }
  .mosaic-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 100px; }
  .mosaic-tile-label { font-size: 9.5px; padding: 3px 8px; left: 6px; bottom: 6px; }
  .mosaic-tile-more .mosaic-more-count { font-size: 18px; }
  .mosaic-tile-more .mosaic-more-text { font-size: 8.5px; }
}
@media (max-width: 560px) {
  .mosaic-side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 200px; }
}

/* ============================================================
   Istanbul Amazing Bosphorus Sunset Cruise on an Ultra-Luxury Yacht
   Page-specific overrides — scoped to body.tour-bosphorus-sunset
   ============================================================ */
.tour-bosphorus-sunset #hero {
  background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 45%, #3d2410 100%);
}
.tour-bosphorus-sunset #hero::before {
  background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Modern_Istanbul_skyline_at_sunset.jpg?width=1600");
  opacity: .32;
}
/* Mosaic gallery styling is now shared — see the generic .mosaic-gallery
   component block above (search "MOSAIC PHOTO GALLERY"). */

/* Tour Overview — heading spans full width up top; body text + image sit
   side-by-side below so the section fills the page on desktop instead of
   leaving the right half empty. */
.tour-bosphorus-sunset .overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 40px; row-gap: 24px; align-items: start; }
.tour-bosphorus-sunset .overview-heading { grid-column: 1 / -1; }
.tour-bosphorus-sunset .overview-heading .overview-lead { max-width: 780px; }
.tour-bosphorus-sunset .overview-image { position: sticky; top: 96px; }
.tour-bosphorus-sunset .overview-image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.tour-bosphorus-sunset .overview-image-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-family: var(--ff-head); font-style: italic; font-size: 15px; color: var(--teal-dark); line-height: 1.5; }
.tour-bosphorus-sunset .overview-image-caption i { color: var(--gold); margin-top: 3px; }
@media (max-width: 900px) {
  .tour-bosphorus-sunset .overview-grid { grid-template-columns: 1fr; }
  .tour-bosphorus-sunset .overview-image { position: static; order: -1; }
  .tour-bosphorus-sunset .overview-image img { height: 260px; }
}

/* Keep Exploring — one banner image + description + internal link grid */
.tour-bosphorus-sunset .explore-banner { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tour-bosphorus-sunset .explore-banner-media { position: relative; min-height: 320px; }
.tour-bosphorus-sunset .explore-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-bosphorus-sunset .explore-banner-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tour-bosphorus-sunset .explore-banner-body .section-title { margin-bottom: 12px; }
.tour-bosphorus-sunset .explore-banner-body > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.tour-bosphorus-sunset .explore-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.tour-bosphorus-sunset .explore-links a { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 600; font-size: 13.5px; }
.tour-bosphorus-sunset .explore-links a i { color: var(--gold); font-size: 11px; }
.tour-bosphorus-sunset .explore-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .tour-bosphorus-sunset .explore-banner { grid-template-columns: 1fr; }
  .tour-bosphorus-sunset .explore-banner-media { min-height: 220px; }
  .tour-bosphorus-sunset .explore-banner-body { padding: 28px 24px; }
  .tour-bosphorus-sunset .explore-links { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   ISTANBUL WHIRLING DERVISH CEREMONY PAGE — small additive helpers
   (new, reusable, non-breaking — nothing above this block was changed)
════════════════════════════════════════════════════════════ */
/* Header brand wordmark used when the logo sits on a light header background */
.brand-logo { font-family: var(--ff-head); font-size: 22px; font-weight: 700; color: var(--teal-dark); }
.brand-logo-accent { color: var(--gold); }
/* Direct <img> inside a homepage-style slide (slides authored with real photos rather than background-image) */
.slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Card treatment for #hero-slider when it is embedded mid-page rather than as a full-bleed hero */
.tour-slider-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
/* Consistent top spacing for a rich-text block directly under a component (e.g. under the slider) */
.rich-text.section-spaced { margin-top: 32px; }
/* Left-hand icon+heading row inside an itinerary step header */
.itin-day-head-left { display: flex; align-items: center; gap: 14px; }
/* "Expand all" control for the itinerary accordion */
.itin-expand-btn { background: var(--teal-light); color: var(--teal-dark); border: 1px solid var(--border); border-radius: 50px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--trans); }
.itin-expand-btn:hover { background: var(--teal); color: #fff; }
/* Grid of standalone .highlight-card tiles (distinct from .highlights-grid, which wraps .inc-list) */
.highlight-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 8px; }
/* Rounded-card look for .ai-section / .faq-section when embedded inside .tour-main instead of full-bleed */
.ai-section.embedded { border-radius: var(--radius-xl); }
.faq-section.embedded { padding: 0; }
.faq-section.embedded .faq-inner { padding: 0; max-width: 100%; }
/* Remove the standard .tour-main section divider/spacing for sections that sit flush against the next block */
.tour-main section.no-divider { border-bottom: none; padding-bottom: 0; }
/* Inline (auto-width) variant of .btn-primary for use as a link/CTA rather than a full-width form submit button */
.btn-primary.btn-inline { width: auto; }

/* ════════════════════════════════════════════════════════════
 ISTANBUL PRIVATE TOURS PAGE — additive, page-scoped rules only.
 Nothing above this block is modified; the shared #hero rule
 (owned by the Cappadocia page) is left untouched. This page uses
 its own #tour-hero-istanbul id for the same visual treatment
 with its own background photo.
════════════════════════════════════════════════════════════ */
#tour-hero-istanbul { background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 50%, #2d1a0e 100%); color: #fff; padding: 80px 32px 64px; text-align: center; position: relative; overflow: hidden; }
#tour-hero-istanbul::before { content: ""; position: absolute; inset: 0; background: url("https://commons.wikimedia.org/wiki/Special:FilePath/Bosphorus_Bridge,_Istanbul_-_Turkey.jpg?width=1600") center/cover; opacity: .22; }
#tour-hero-istanbul::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, rgba(10,61,58,.6)); }
#tour-hero-istanbul .hero-inner { position: relative; max-width: 960px; margin: 0 auto; z-index: 1; }
#tour-hero-istanbul h1 { font-family: var(--ff-head); font-size: clamp(30px, 4.5vw, 54px); font-weight: 800; line-height: 1.12; margin-bottom: 20px; }
#tour-hero-istanbul h1 em { color: var(--gold); font-style: normal; }

/* Additional scroll-margin anchors used by this page's tab-nav-wrap (extends the base #overview/#itinerary/etc. list above, does not replace it) */
#highlights, #why-choose, #tour-styles, #destinations, #beyond-istanbul, #historical-layers, #price, #ai-recs { scroll-margin-top: 150px; }

/* ════════════════════════════════════════════════════════════
   10 DAYS ISLAMIC RELIGION ERTUĞRUL GHAZI TOUR PAGE — additive,
   page-scoped rules only. Gallery structure/behavior now comes
   from the shared .mosaic-gallery component above; this page
   keeps one small override — a lighter, edge-to-edge caption
   band (requested for this page specifically).
════════════════════════════════════════════════════════════ */
.tour-ertugrul-ghazi .mosaic-gallery { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.tour-ertugrul-ghazi .mosaic-caption { left: 22px; right: 22px; max-width: none; background: rgba(10,30,28,.36); }

/* ════════════════════════════════════════════════════════════
   PHOTO GALLERY LIGHTBOX — generic, reusable overlay component.
   Only activates via JS when #galleryLightbox markup is present
   on the page, so it is safe to include site-wide.
════════════════════════════════════════════════════════════ */
.lightbox-trigger { cursor: pointer; }
.lightbox-trigger .mosaic-view-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,30,28,0); transition: background .25s ease; opacity: 0; }
.lightbox-trigger .mosaic-view-hint i { color: #fff; font-size: 20px; transform: scale(.7); transition: transform .25s ease; }
.lightbox-trigger:hover .mosaic-view-hint { background: rgba(10,30,28,.22); opacity: 1; }
.lightbox-trigger:hover .mosaic-view-hint i { transform: scale(1); }
.lightbox-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(6,20,19,.94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease; }
.lightbox.active { opacity: 1; visibility: visible; pointer-events: all; }
.lightbox-stage { position: relative; max-width: min(1100px, 90vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-stage img { max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #0b1f1d; }
.lightbox-caption { color: #fff; font-family: var(--ff-head); font-size: 17px; font-style: italic; text-align: center; margin-top: 18px; max-width: 700px; line-height: 1.5; }
.lightbox-counter { color: var(--gold); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-top: 8px; }
.lightbox-close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.lightbox-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease; z-index: 2; }
.lightbox-nav:hover { background: rgba(255,255,255,.22); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .lightbox-stage img { max-height: 58vh; }
  .lightbox-caption { font-size: 14.5px; padding: 0 44px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 15px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
}

/* ============================================================
   1 Night 1 Day Pergamon Tour from Istanbul (overnight stay)
   Page-specific overrides — scoped to body.tour-pergamon-overnight
   (new, reusable, non-breaking — nothing above this block was changed)
   ============================================================ */

/* Tour Overview — heading spans full width up top; body text + image sit
   side-by-side below so the section fills the page on desktop instead of
   leaving the right half empty. */
.tour-pergamon-overnight .overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 40px; row-gap: 24px; align-items: start; }
.tour-pergamon-overnight .overview-heading { grid-column: 1 / -1; }
.tour-pergamon-overnight .overview-heading .overview-lead { max-width: 780px; }
.tour-pergamon-overnight .overview-image { position: sticky; top: 96px; }
.tour-pergamon-overnight .overview-image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.tour-pergamon-overnight .overview-image-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-family: var(--ff-head); font-style: italic; font-size: 15px; color: var(--teal-dark); line-height: 1.5; }
.tour-pergamon-overnight .overview-image-caption i { color: var(--gold); margin-top: 3px; }
@media (max-width: 900px) {
  .tour-pergamon-overnight .overview-grid { grid-template-columns: 1fr; }
  .tour-pergamon-overnight .overview-image { position: static; order: -1; }
  .tour-pergamon-overnight .overview-image img { height: 260px; }
}

/* Keep Exploring — one banner image + description + internal link grid */
.tour-pergamon-overnight .explore-banner { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tour-pergamon-overnight .explore-banner-media { position: relative; min-height: 320px; }
.tour-pergamon-overnight .explore-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-pergamon-overnight .explore-banner-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tour-pergamon-overnight .explore-banner-body .section-title { margin-bottom: 12px; }
.tour-pergamon-overnight .explore-banner-body > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.tour-pergamon-overnight .explore-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.tour-pergamon-overnight .explore-links a { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 600; font-size: 13.5px; }
.tour-pergamon-overnight .explore-links a i { color: var(--gold); font-size: 11px; }
.tour-pergamon-overnight .explore-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .tour-pergamon-overnight .explore-banner { grid-template-columns: 1fr; }
  .tour-pergamon-overnight .explore-banner-media { min-height: 220px; }
  .tour-pergamon-overnight .explore-banner-body { padding: 28px 24px; }
  .tour-pergamon-overnight .explore-links { grid-template-columns: 1fr; }
}

/* ============================================================
   1 Night 1 Day Premium Edirne Tour from Istanbul (overnight stay)
   Page-specific overrides — scoped to body.tour-edirne-overnight
   (new, reusable, non-breaking — nothing above this block was changed)
   ============================================================ */
.tour-edirne-overnight #hero {
  background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 45%, #3d2410 100%);
}
.tour-edirne-overnight #hero::before {
  background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Turkey%20(Edirne)%20View%20of%20Old%20Mosque%20from%2015th%20century%20at%20sunset%20time.jpg?width=1600");
  opacity: .34;
}

/* Static mosaic gallery — one large photo, four smaller ones beside it,
   all visible at once, no auto-play or JS needed (same pattern used on
   the Bosphorus Sunset Cruise / Pergamon Overnight pages). */
.tour-edirne-overnight .mosaic-gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.tour-edirne-overnight .mosaic-main { position: relative; height: 440px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.tour-edirne-overnight .mosaic-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tour-edirne-overnight .mosaic-main:hover img { transform: scale(1.04); }
.tour-edirne-overnight .mosaic-caption { position: absolute; left: 22px; bottom: 20px; max-width: 70%; padding: 14px 20px; background: rgba(10,30,28,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--radius); color: #fff; }
.tour-edirne-overnight .mosaic-caption h3 { font-family: var(--ff-head); font-size: clamp(17px, 2vw, 21px); margin: 2px 0 0; line-height: 1.25; }
.tour-edirne-overnight .mosaic-eyebrow { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tour-edirne-overnight .mosaic-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 440px; }
.tour-edirne-overnight .mosaic-tile { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tour-edirne-overnight .mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tour-edirne-overnight .mosaic-tile:hover img { transform: scale(1.06); }
.tour-edirne-overnight .mosaic-tile-label { position: absolute; left: 10px; bottom: 10px; background: rgba(10,30,28,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 50px; }
@media (max-width: 900px) {
  .tour-edirne-overnight .mosaic-gallery { grid-template-columns: 1fr; }
  .tour-edirne-overnight .mosaic-main { height: 280px; }
  .tour-edirne-overnight .mosaic-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 100px; }
  .tour-edirne-overnight .mosaic-tile-label { font-size: 9.5px; padding: 3px 8px; left: 6px; bottom: 6px; }
}
@media (max-width: 560px) {
  .tour-edirne-overnight .mosaic-side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 200px; }
}

/* Tour Overview — heading spans full width up top; body text + image sit
   side-by-side below so the section fills the page on desktop instead of
   leaving the right half empty. */
.tour-edirne-overnight .overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 40px; row-gap: 24px; align-items: start; }
.tour-edirne-overnight .overview-heading .overview-lead { max-width: 620px; }
.tour-edirne-overnight .overview-lead p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.tour-edirne-overnight .overview-image { position: sticky; top: 96px; }
.tour-edirne-overnight .overview-image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.tour-edirne-overnight .overview-image-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-family: var(--ff-head); font-style: italic; font-size: 15px; color: var(--teal-dark); line-height: 1.5; }
.tour-edirne-overnight .overview-image-caption i { color: var(--gold); margin-top: 3px; }
@media (max-width: 900px) {
  .tour-edirne-overnight .overview-grid { grid-template-columns: 1fr; }
  .tour-edirne-overnight .overview-image { position: static; order: -1; }
  .tour-edirne-overnight .overview-image img { height: 260px; }
}

/* Why Stay Overnight — two-panel comparison (rushed day trip vs the
   relaxed overnight rhythm) */
.tour-edirne-overnight .overnight-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.tour-edirne-overnight .overnight-panel { border-radius: var(--radius-lg); padding: 26px 28px; }
.tour-edirne-overnight .overnight-panel.old { background: var(--bg); border: 1px dashed var(--border); }
.tour-edirne-overnight .overnight-panel.new { background: var(--teal-pale); border: 1px solid var(--teal); }
.tour-edirne-overnight .overnight-panel h4 { font-family: var(--ff-head); font-size: 17px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tour-edirne-overnight .overnight-panel.old h4 { color: var(--muted); }
.tour-edirne-overnight .overnight-panel.new h4 { color: var(--teal-dark); }
.tour-edirne-overnight .overnight-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.tour-edirne-overnight .overnight-flow i { color: var(--teal); font-size: 10px; }
@media (max-width: 800px) { .tour-edirne-overnight .overnight-compare { grid-template-columns: 1fr; } }

/* Keep Exploring — one banner image + description + internal link grid */
.tour-edirne-overnight .explore-banner { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tour-edirne-overnight .explore-banner-media { position: relative; min-height: 320px; }
.tour-edirne-overnight .explore-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-edirne-overnight .explore-banner-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tour-edirne-overnight .explore-banner-body .section-title { margin-bottom: 12px; }
.tour-edirne-overnight .explore-banner-body > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.tour-edirne-overnight .explore-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.tour-edirne-overnight .explore-links a { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 600; font-size: 13.5px; }
.tour-edirne-overnight .explore-links a i { color: var(--gold); font-size: 11px; }
.tour-edirne-overnight .explore-links a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .tour-edirne-overnight .explore-banner { grid-template-columns: 1fr; }
  .tour-edirne-overnight .explore-banner-media { min-height: 220px; }
  .tour-edirne-overnight .explore-banner-body { padding: 28px 24px; }
  .tour-edirne-overnight .explore-links { grid-template-columns: 1fr; }
}

/* Architectural-timeline strip used inside the Selimiye/Old Mosque/Üç
   Şerefeli deep-dive section: Eski Cami → Üç Şerefeli → Selimiye */
.tour-edirne-overnight .arch-timeline { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: var(--teal-dark); border-radius: var(--radius-lg); padding: 26px 30px; margin: 32px 0; color: #fff; }
.tour-edirne-overnight .arch-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 110px; }
.tour-edirne-overnight .arch-year { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: .06em; }
.tour-edirne-overnight .arch-name { font-family: var(--ff-head); font-size: 15px; font-weight: 700; }
.tour-edirne-overnight .arch-arrow { color: var(--gold); font-size: 18px; }
@media (max-width: 640px) { .tour-edirne-overnight .arch-timeline { flex-direction: column; } .tour-edirne-overnight .arch-arrow { transform: rotate(90deg); } }

/* "Inside Selimiye Mosque, You'll See" — sight list beside two photos
   (added per client request: pictures next to this list) */
.tour-edirne-overnight .sight-list-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 18px; }
.tour-edirne-overnight .sight-list-wrap .sight-list { columns: 1; margin: 0; }
.tour-edirne-overnight .sight-list-wrap .sight-list li { margin-bottom: 10px; }
.tour-edirne-overnight .sight-photos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 320px; }
.tour-edirne-overnight .sight-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.tour-edirne-overnight .sight-photos .sp-main { grid-row: 1 / 3; }
@media (max-width: 800px) {
  .tour-edirne-overnight .sight-list-wrap { grid-template-columns: 1fr; }
  .tour-edirne-overnight .sight-photos { order: -1; height: 240px; }
}

/* Safety margin so the shared #back-top button can never be hidden behind
   this page's own fixed/sticky elements (mosaic hover states, lightbox, etc.) */
.tour-edirne-overnight #back-top { z-index: 9999; }

/* ============================================================
   1 Night 1 Day Fethiye Tour from Istanbul
   Page-specific overrides — scoped to body.tour-fethiye-overnight
   Additive only: reuses the same page-kit pattern already used by
   .tour-bosphorus-sunset / .tour-pergamon-overnight / .tour-ertugrul-ghazi
   / .tour-edirne-overnight above. No existing rule in this file is
   modified.
   ============================================================ */
.tour-fethiye-overnight #hero {
  background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 45%, #2d6a63 100%);
}
.tour-fethiye-overnight #hero::before {
  background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Panoramic%20view%20of%20Fethiye%20from%20Tomb%20of%20Amyntas%20(2022).jpg?width=1600");
  opacity: .30;
}
.tour-fethiye-overnight .overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 40px; row-gap: 24px; align-items: start; }
.tour-fethiye-overnight .overview-image { position: sticky; top: 96px; }
.tour-fethiye-overnight .overview-image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.tour-fethiye-overnight .overview-image-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-family: var(--ff-head); font-style: italic; font-size: 15px; color: var(--teal-dark); line-height: 1.5; }
.tour-fethiye-overnight .overview-image-caption i { color: var(--gold); margin-top: 3px; }
@media (max-width: 900px) {
  .tour-fethiye-overnight .overview-grid { grid-template-columns: 1fr; }
  .tour-fethiye-overnight .overview-image { position: static; order: -1; }
  .tour-fethiye-overnight .overview-image img { height: 260px; }
}
.tour-fethiye-overnight .explore-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.tour-fethiye-overnight .explore-links a { display: flex; align-items: center; gap: 8px; color: var(--teal-dark); font-weight: 600; font-size: 13.5px; }
.tour-fethiye-overnight .explore-links a i { color: var(--gold); font-size: 11px; }
.tour-fethiye-overnight .explore-links a:hover { text-decoration: underline; }
.tour-fethiye-overnight .explore-banner { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tour-fethiye-overnight .explore-banner-media { position: relative; min-height: 340px; }
.tour-fethiye-overnight .explore-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-fethiye-overnight .explore-banner-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tour-fethiye-overnight .explore-banner-body .section-title { margin-bottom: 12px; }
.tour-fethiye-overnight .explore-banner-body > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
@media (max-width: 800px) {
  .tour-fethiye-overnight .explore-links { grid-template-columns: 1fr; }
  .tour-fethiye-overnight .explore-banner { grid-template-columns: 1fr; }
  .tour-fethiye-overnight .explore-banner-media { min-height: 220px; }
  .tour-fethiye-overnight .explore-banner-body { padding: 28px 24px; }
}
/* AI-Powered Trip Planning: embedded variant was missing horizontal padding
   because its content wasn't wrapped in .ai-inner — add safe fallback padding
   directly on the embedded box so cards never sit flush against the rounded edges. */
.tour-fethiye-overnight .ai-section.embedded { padding: 48px; }
@media (max-width: 640px) {
  .tour-fethiye-overnight .ai-section.embedded { padding: 32px 20px; }
}

/* ════════════════════════════════════════════════════════════
 TOUR PAGE — Cappadocia Day Tour from Istanbul by Flight (KNY-404)
 Scoped, additive-only. WhatsApp brand-green button used in the
 hero/CTA banner; balloon-tier grid reuses existing .dest-poi-grid
 / .poi-card, so only the WhatsApp button color needs a new rule.
════════════════════════════════════════════════════════════ */
.tour-cappadocia-day-flight .btn-hero-primary,
.tour-cappadocia-day-flight .btn-primary.btn-inline {
  background: #25D366;
  color: #fff;
  border-color: #128C7E;
  box-shadow: 0 6px 24px rgba(37,211,102,.35);
}
.tour-cappadocia-day-flight .btn-hero-primary:hover,
.tour-cappadocia-day-flight .btn-primary.btn-inline:hover {
  background: #1ebe5a;
}
/* Balloon add-on section: keep the alt dest-section's rounded corners
   from colliding with the tour-layout's outer padding on small screens */
@media (max-width: 640px) {
  .tour-cappadocia-day-flight #balloon .dest-section.alt { padding: 40px 22px; }
}

/* Tour Price section: price card (left) + supporting photo (right) */
.tour-cappadocia-day-flight .price-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: stretch;
}
.tour-cappadocia-day-flight .price-grid .highlights-card { margin: 0; height: 100%; }
.tour-cappadocia-day-flight .price-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 220px;
}
.tour-cappadocia-day-flight .price-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .tour-cappadocia-day-flight .price-grid { grid-template-columns: 1fr; }
  .tour-cappadocia-day-flight .price-media { min-height: 260px; }
}

/* Keep Exploring band — sits at the top of the footer, above footer-inner.
   Text + link-button columns on the left, photo on the right. */
.tour-cappadocia-day-flight .keep-explore {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.tour-cappadocia-day-flight .keep-explore-text h2 {
  font-family: var(--ff-head);
  font-size: clamp(22px, 2.6vw, 32px);
  color: #fff;
  margin: 4px 0 12px;
}
.tour-cappadocia-day-flight .keep-explore-text h2 em { color: var(--gold); font-style: normal; }
.tour-cappadocia-day-flight .keep-explore-text > p {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 520px;
}
.tour-cappadocia-day-flight .keep-explore-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tour-cappadocia-day-flight .keep-explore-links .btn-outline-light {
  font-size: 13.5px;
  padding: 11px 18px;
  justify-content: flex-start;
}
.tour-cappadocia-day-flight .keep-explore-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.tour-cappadocia-day-flight .keep-explore-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 220px; }
@media (max-width: 860px) {
  .tour-cappadocia-day-flight .keep-explore { grid-template-columns: 1fr; padding: 44px 24px 32px; }
  .tour-cappadocia-day-flight .keep-explore-media { order: -1; }
  .tour-cappadocia-day-flight .keep-explore-media img { min-height: 200px; }
}
@media (max-width: 480px) {
  .tour-cappadocia-day-flight .keep-explore-links { grid-template-columns: 1fr; }
}

/* Travel Suggestions cards: stack up-and-down (single column) instead of
   the default 3-across grid, which felt cramped with 6 cards. */
.tour-cappadocia-day-flight #travel-tips .tour-highlights.travel-tips-stack {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  gap: 16px;
}
.tour-cappadocia-day-flight #travel-tips .travel-tips-stack .highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  text-align: left;
  padding: 22px 26px;
}
.tour-cappadocia-day-flight #travel-tips .travel-tips-stack .highlight-card i {
  flex-shrink: 0;
  margin-top: 2px;
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   8 DAYS LUXURY PRIVATE SEVEN WONDERS OF TURKEY PAGE
   Page-specific additions — scoped to body.tour-seven-wonders
   (new, reusable, non-breaking — nothing above this block was changed)
════════════════════════════════════════════════════════════ */

/* "Continue Exploring Turkey" — one banner image on the left,
   a two-column list of destination links on the right. */
.tour-seven-wonders .explore-banner { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 12px; }
.tour-seven-wonders .explore-banner-media { position: relative; min-height: 340px; }
.tour-seven-wonders .explore-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-seven-wonders .explore-banner-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.tour-seven-wonders .explore-banner-body .section-title { margin-bottom: 10px; }
.tour-seven-wonders .explore-banner-body > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.tour-seven-wonders .explore-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.tour-seven-wonders .explore-links a { display: flex; align-items: center; gap: 10px; color: var(--teal-dark); font-weight: 600; font-size: 14px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: var(--trans); }
.tour-seven-wonders .explore-links a i { color: var(--gold); font-size: 12px; flex-shrink: 0; }
.tour-seven-wonders .explore-links a:hover { border-color: var(--teal); background: var(--teal-pale); transform: translateX(3px); }
@media (max-width: 800px) {
  .tour-seven-wonders .explore-banner { grid-template-columns: 1fr; }
  .tour-seven-wonders .explore-banner-media { min-height: 220px; }
  .tour-seven-wonders .explore-banner-body { padding: 28px 24px; }
  .tour-seven-wonders .explore-links { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   MOSAIC GALLERY — clickable tiles + lightbox viewer
   (generic, reusable across any page using .mosaic-gallery)
════════════════════════════════════════════════════════════ */
.mosaic-main, .mosaic-tile, .lightbox-trigger { cursor: pointer; }
.lightbox-overlay { position: fixed; inset: 0; background: rgba(6,20,19,.94); z-index: 999; display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox-overlay.active { display: flex; }
.lightbox-trigger:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lightbox-figure { position: relative; max-width: 1100px; width: 100%; text-align: center; }
.lightbox-figure img { max-width: 100%; max-height: 78vh; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block; margin: 0 auto; }
.lightbox-caption { color: rgba(255,255,255,.85); font-size: 14px; margin-top: 14px; }
.lightbox-counter { color: rgba(255,255,255,.6); font-size: 12.5px; margin-top: 4px; letter-spacing: .04em; }
.lightbox-close { position: absolute; top: -18px; right: -18px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--teal-dark); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--trans); }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 640px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-close { top: -14px; right: 0; }
  .lightbox-prev { left: 6px; width: 40px; height: 40px; }
  .lightbox-next { right: 6px; width: 40px; height: 40px; }
}

/* Justified body text, used where a paragraph sits beside an image */
.text-justify { text-align: justify; }

/* ============================================================
   1 Night 1 Day Bolu Abant Tour from Istanbul (overnight stay)
   Page-specific overrides — scoped to body.tour-bolu-abant-overnight
   (new, additive, non-breaking — nothing above this block was changed)
   ============================================================ */
.tour-bolu-abant-overnight #hero {
  background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 45%, #16321a 100%);
}
.tour-bolu-abant-overnight #hero::before {
  background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Abant%20Panorama.JPG?width=1600");
  opacity: .30;
}

/* Header right-side action cluster (logo/search/book/menu-toggle wrapper) */
.tour-bolu-abant-overnight .header-actions { display: flex; align-items: center; gap: 14px; }

/* Slider section needs to bleed edge-to-edge inside .tour-layout's padding */
.tour-bolu-abant-overnight .slider-section-bleed { margin: 0 -32px 56px; padding: 40px 32px 0; }
@media (max-width: 768px) {
  .tour-bolu-abant-overnight .slider-section-bleed { margin: 0 -16px 40px; padding: 28px 16px 0; }
}

/* Small margin-utility helpers used only on this page */
.tour-bolu-abant-overnight .no-mb { margin-bottom: 0; }
.tour-bolu-abant-overnight .mt-8  { margin-top: 8px; }
.tour-bolu-abant-overnight .mt-16 { margin-top: 16px; }
.tour-bolu-abant-overnight .mt-18 { margin-top: 18px; }
.tour-bolu-abant-overnight .mt-28 { margin-top: 28px; }

/* Itinerary day-head left cluster (day number + badge/title) */
.tour-bolu-abant-overnight .itin-day-head-main { display: flex; align-items: center; gap: 16px; }

/* "Keep Exploring Bolu Province" banner title */
.tour-bolu-abant-overnight .explore-banner-title { margin-bottom: 12px; }

/* Best-seasons grid — 4 across on desktop */
.tour-bolu-abant-overnight .season-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tour-bolu-abant-overnight .season-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-bolu-abant-overnight .season-grid-4 { grid-template-columns: 1fr; } }

/* Season-card icon colour accents */
.tour-bolu-abant-overnight .ico-teal { color: var(--teal); }
.tour-bolu-abant-overnight .ico-gold { color: var(--gold); }
.tour-bolu-abant-overnight .ico-red  { color: #C9384E; }
.tour-bolu-abant-overnight .ico-sky  { color: var(--sky); }

/* AI Recommendations section, contained within .tour-layout (not full-bleed) */
.tour-bolu-abant-overnight .ai-section-contained { border-radius: var(--radius-lg); }
.tour-bolu-abant-overnight .ai-header-em { color: var(--gold); font-style: normal; }

/* Booking section box model (mirrors the shared booking-widget.html pattern) */
.tour-bolu-abant-overnight .booking-section-wrap { max-width: var(--max-content); margin: 0 auto; padding: 60px 32px; }
@media (max-width: 768px) {
  .tour-bolu-abant-overnight .booking-section-wrap { padding: 40px 16px; }
}

/* ------------------------------------------------------------
   Follow-up fixes for body.tour-bolu-abant-overnight
   (main content column width, overview-grid pattern reused for
   both #overview and #bolu, sight-list-wrap for #abant, and a
   why-inner width override — all additive, nothing above changed)
   ------------------------------------------------------------ */

/* Standardise the main content column at the site's established
   1200px reading width (matches .tour-37day / .tour-9day / etc.) */
.tour-bolu-abant-overnight .tour-main { max-width: var(--max-content); margin: 0 auto; }

/* Overview-grid pattern — reused for both #overview and #bolu:
   text column left (1.1fr), sticky image column right (.9fr) */
.tour-bolu-abant-overnight .overview-grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 40px; row-gap: 24px; align-items: start; margin-top: 24px; }
.tour-bolu-abant-overnight .overview-heading .overview-lead { max-width: 680px; }
.tour-bolu-abant-overnight .overview-image { position: sticky; top: 96px; }
.tour-bolu-abant-overnight .overview-image img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.tour-bolu-abant-overnight .overview-image-caption { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-family: var(--ff-head); font-style: italic; font-size: 15px; color: var(--teal-dark); line-height: 1.5; }
.tour-bolu-abant-overnight .overview-image-caption i { color: var(--gold); margin-top: 3px; }
@media (max-width: 800px) {
  .tour-bolu-abant-overnight .overview-grid { grid-template-columns: 1fr; }
  .tour-bolu-abant-overnight .overview-image { position: static; order: -1; }
  .tour-bolu-abant-overnight .overview-image img { height: 260px; }
}

/* Sight-list-wrap — text/bullet list beside a 3-photo mosaic,
   used in "Discover Abant Lake National Park" */
.tour-bolu-abant-overnight .sight-list-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 18px; }
.tour-bolu-abant-overnight .sight-list-wrap .sight-list { columns: 1; margin: 0; }
.tour-bolu-abant-overnight .sight-list-wrap .sight-list li { margin-bottom: 10px; }
.tour-bolu-abant-overnight .sight-photos { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 320px; }
.tour-bolu-abant-overnight .sight-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; }
.tour-bolu-abant-overnight .sight-photos .sp-main { grid-row: 1 / 3; }
@media (max-width: 800px) {
  .tour-bolu-abant-overnight .sight-list-wrap { grid-template-columns: 1fr; }
  .tour-bolu-abant-overnight .sight-photos { order: -1; height: 240px; }
}

/* "Why Choose Us" runs full-bleed sitewide (.why-inner was later
   overridden to max-width:100% for another page's needs — see the
   CASCADE-ORDER FIX note above). Restore the standard centred
   width here so it matches the rest of this page's sections. */
.tour-bolu-abant-overnight .why-inner { max-width: var(--max-content); padding: 0 24px; }

/* ════════════════════════════════════════════════════════════
   15-DAY FOLLOW IN THE FOOTSTEPS OF ST. PAUL IN TURKEY (KNY-475)
   /15-day-follow-in-the-footsteps-of-a-pilgrimage-st-paul-in-turkey.html
   Page-specific additions only, scoped to body.tour-stpaul so no
   other page that shares styles.css is affected. Follows the same
   additive pattern as .tour-seven-churches / .tour-9day above.
════════════════════════════════════════════════════════════ */
.tour-stpaul #hero { background: linear-gradient(160deg, #0a3d3a 0%, #1a5a56 45%, #2d1a0e 100%); }
.tour-stpaul #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Antioch%20of%20Pisidia%202862.jpg?width=1600"); }
.tour-stpaul .tour-main { max-width: var(--max-content); margin: 0 auto; }
.tour-stpaul #overview, .tour-stpaul #highlights, .tour-stpaul #itinerary, .tour-stpaul #places,
.tour-stpaul #accommodation, .tour-stpaul #services, .tour-stpaul #ai-recs, .tour-stpaul #travel-tips,
.tour-stpaul #pricing, .tour-stpaul #why-us, .tour-stpaul #reviews, .tour-stpaul #faq,
.tour-stpaul #booking { scroll-margin-top: 150px; }

/* Itinerary place photo — floats left so the day's narrative text wraps
   around it and fills the space beside the image, instead of stacking
   the (narrower) image above full-width text and leaving dead space. */
.tour-stpaul .itin-place-figure { float: left; width: 300px; margin: 4px 24px 14px 0; }
.tour-stpaul .itin-place-img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radius); display: block; margin: 0; }
.tour-stpaul .itin-place-credit { display: block; font-size: 11.5px; color: var(--muted); opacity: .75; margin-top: 6px; font-style: italic; line-height: 1.4; }

/* Clearfix so the accordion body (which relies on max-height for its
   open/close animation) always expands to contain the floated photo,
   even on days where the photo is taller than the wrapped paragraph. */
.tour-stpaul .itin-body-inner::after { content: ""; display: table; clear: both; }

/* Day 9 "to be confirmed" notice sits comfortably inside the accordion body */
.tour-stpaul .itin-body-inner .policy-notice { margin: 4px 0 14px; clear: both; }

@media (max-width: 720px) {
  /* Below tablet width a 300px float leaves too little room for the
     wrapped text to read comfortably, so the photo drops back to a
     full-width block above the text, as before. */
  .tour-stpaul .itin-place-figure { float: none; width: 100%; margin: 4px 0 16px; }
  .tour-stpaul .itin-place-img { height: 200px; }
}

/* ════════════════════════════════════════════════════════════
   PAGE-SPECIFIC ADDITIONS — 8-Day Cappadocia / Pamukkale /
   Ephesus / Istanbul Small Group Tour
   (additive only, scoped to body.tour-cappadocia-pamukkale-8day,
   follows the same pattern used on other tour pages, e.g.
   .tour-trabzon-6day / .tour-seven-churches)
   ════════════════════════════════════════════════════════════ */

/* Route map: pill-badge stops instead of stacked column layout,
   so labels never wrap or overlap the arrow icons on narrow screens */
.tour-cappadocia-pamukkale-8day .route-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 6px; }
.tour-cappadocia-pamukkale-8day .route-stop { flex: none; flex-direction: row; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 50px; white-space: nowrap; min-width: 0; }
.tour-cappadocia-pamukkale-8day .route-arrow { color: var(--teal); font-size: 14px; align-self: center; margin-top: 0; }
@media (max-width: 560px) {
  .tour-cappadocia-pamukkale-8day .route-track { gap: 8px; }
  .tour-cappadocia-pamukkale-8day .route-stop { font-size: 12px; padding: 8px 14px; }
  .tour-cappadocia-pamukkale-8day .route-arrow { display: none; }
}

/* Reviews: grid layout on tablet/desktop instead of a stacked list */
@media (min-width: 720px) {
  .tour-cappadocia-pamukkale-8day .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1080px) {
  .tour-cappadocia-pamukkale-8day .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

/* "Ready to Discover" closing CTA: framed card with proper spacing
   so the heading, copy and button never run into each other */
.tour-cappadocia-pamukkale-8day .why-love { background: var(--bg); padding: 64px 24px; }
.tour-cappadocia-pamukkale-8day .why-love-inner { max-width: 760px; margin: 0 auto; text-align: center; background: var(--white); border: 2px solid var(--gold); border-radius: var(--radius-lg); padding: 48px 44px; box-shadow: var(--shadow-md); }
.tour-cappadocia-pamukkale-8day .why-love h2 { font-family: var(--ff-head); font-size: clamp(24px, 3.5vw, 32px); color: var(--teal-dark); margin-bottom: 16px; }
.tour-cappadocia-pamukkale-8day .why-love p { font-size: 15.5px; line-height: 1.85; color: var(--muted); margin-bottom: 28px; }
.tour-cappadocia-pamukkale-8day .why-love .btn-hero-primary { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.tour-cappadocia-pamukkale-8day .why-love .signature-line { display: block; font-family: var(--ff-head); color: var(--gold); font-size: 16px; margin-top: 4px; }
@media (max-width: 600px) {
  .tour-cappadocia-pamukkale-8day .why-love { padding: 44px 16px; }
  .tour-cappadocia-pamukkale-8day .why-love-inner { padding: 36px 22px; }
}

/* ════════════════════════════════════════════════════════════
   PAGE-SPECIFIC ADDITIONS — 6 Days 5 Nights Ottoman Empire Three
   Capitals Tour of Istanbul, Edirne & Bursa
   (additive only, scoped to body.tour-ottoman-3capitals, follows
   the same pattern used on other tour pages, e.g.
   .tour-cappadocia-pamukkale-8day / .tour-trabzon-6day)
   ════════════════════════════════════════════════════════════ */

/* Hero slider: this page uses the standard 540px slide height
   (matching the sitewide .slide component) instead of the 600px
   used by the shared #hero-slider shell — overridden locally only,
   other pages using #hero-slider are unaffected. */
.tour-ottoman-3capitals #hero-slider #slides.slides,
.tour-ottoman-3capitals #hero-slider .slide img { height: 540px; }
@media (max-width: 768px) {
  .tour-ottoman-3capitals #hero-slider #slides.slides,
  .tour-ottoman-3capitals #hero-slider .slide img { height: 260px; }
}

/* Three Capitals / Three Eras comparison table (route section) */
.tour-ottoman-3capitals .eras-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.tour-ottoman-3capitals .eras-col { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 22px 24px; }
.tour-ottoman-3capitals .eras-col h4 { font-family: var(--ff-head); font-size: 1.05rem; margin-bottom: 14px; color: var(--teal-dark); }
.tour-ottoman-3capitals .eras-col ul { display: flex; flex-direction: column; gap: 10px; }
.tour-ottoman-3capitals .eras-col li { font-size: 14px; color: var(--muted); padding-left: 18px; position: relative; }
.tour-ottoman-3capitals .eras-col li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
@media (max-width: 700px) { .tour-ottoman-3capitals .eras-table { grid-template-columns: 1fr; } }

.tour-ottoman-3capitals #faq { scroll-margin-top: 150px; }

/* "Good to Know" travel-tips cards — stacked up-and-down, not side by side */
.tour-ottoman-3capitals .travel-tips-stacked { grid-template-columns: 1fr !important; max-width: 760px; margin-left: auto; margin-right: auto; }
.tour-ottoman-3capitals .travel-tips-stacked .highlight-card { display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 20px 22px; }
.tour-ottoman-3capitals .travel-tips-stacked .highlight-card > i { font-size: 22px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.tour-ottoman-3capitals .travel-tips-stacked .highlight-card h4 { margin-bottom: 4px; }

/* Itinerary detail sites — tidy cards instead of dense inline paragraphs */
.tour-ottoman-3capitals .site-detail-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.tour-ottoman-3capitals .site-detail { display: flex; gap: 14px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--radius); }
.tour-ottoman-3capitals .site-detail-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.tour-ottoman-3capitals .site-detail-text h4 { font-family: var(--ff-head); font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tour-ottoman-3capitals .site-detail-text p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.tour-ottoman-3capitals .itin-day-body p.itin-lead,
.tour-ottoman-3capitals .itin-day-body p.itin-close { font-size: 15px; color: var(--muted); line-height: 1.8; }
@media (max-width: 560px) { .tour-ottoman-3capitals .site-detail { flex-direction: column; } }

/* ============================================================
   PAGE-SCOPED: istanbul-tour-operators-and-istanbul-travel-
   agencies-in-turkey.html — icon accent, AI-tips/reviews grid
   on desktop, and the "why-love" section treatment. Appended
   only; the shared rules above are untouched.
   ============================================================ */
.page-istanbul-agency .highlights-card h3 .svc-icon { color: var(--teal); margin-right: 8px; }

/* AI-Powered Trip Planning Tips: grid on tablet/desktop instead of a
   stacked list (base .ai-tips is display:flex; flex-direction:column) */
@media (min-width: 720px) {
  .page-istanbul-agency .ai-tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* Traveler Reviews: grid on tablet/desktop instead of a stacked list
   (base .reviews-grid is display:flex; flex-direction:column) —
   same pattern used on .tour-cappadocia-pamukkale-8day */
@media (min-width: 720px) {
  .page-istanbul-agency .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1080px) {
  .page-istanbul-agency .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

/* "An Agency Run By Guides, Not a Call Center": the base .why-love is
   a plain left-aligned text block, which reads flat on wide desktop
   screens. Give it the same dark, centered, signature-line treatment
   used on other tour pages so it reads as an intentional section. */
.page-istanbul-agency .why-love { background: linear-gradient(135deg, #0a3d3a 0%, #143a37 100%); padding: 64px 32px; text-align: center; }
.page-istanbul-agency .why-love-inner { max-width: 780px; margin: 0 auto; }
.page-istanbul-agency .why-love h2 { font-family: var(--ff-head); font-size: clamp(24px, 3.5vw, 34px); color: #fff; margin-bottom: 20px; }
.page-istanbul-agency .why-love p { font-size: 15.5px; line-height: 1.9; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.page-istanbul-agency .why-love .signature-line { display: block; font-family: var(--ff-head); color: var(--gold); font-size: 17px; margin-top: 24px; }
@media (max-width: 560px) {
  .page-istanbul-agency .why-love { padding: 44px 20px; }
}

/* ============================================================
   PAGE: Lifestyle Luxury VIP Travel Agency Services (KNY-504)
   Scoped with .page-vip-travel so nothing else on the site is affected.
   (Note: the gold hero frame itself is now a common, unscoped
   component — see ".hero-gold-frame" under HOME HERO above.)
   ============================================================ */
.page-vip-travel .overview-text { max-width: 1200px; text-align: justify; text-justify: inter-word; }



/* ============================================================
   PAGE: Lifestyle Luxury VIP Travel Agency Services (KNY-504)
   Inline styles extracted into classes, scoped with .page-vip-travel
   so nothing else on the site is affected.
   ============================================================ */
.page-vip-travel .vip-1 { color:var(--teal-dark); background:var(--teal-light); }
.page-vip-travel .vip-2 { color:#c8d8d7; }
.page-vip-travel .vip-3 { width:auto; padding:15px 30px; border:2px solid rgba(255,255,255,.6); color:#fff; border-radius:50px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:10px; }
.page-vip-travel .vip-4 { width:auto; }
.page-vip-travel .vip-5 { color:#fff; }
.page-vip-travel .vip-6 { width:auto; padding:15px 30px; }
.page-vip-travel .vip-7 { color:var(--teal-dark); font-weight:700; font-size:14px; }
.page-vip-travel .vip-8 { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--text); }
.page-vip-travel .vip-9 { margin:16px 0 8px; background:none; border:1.5px solid var(--border); border-radius:50px; padding:8px 18px; font-size:13px; font-weight:600; color:var(--teal-dark); cursor:pointer; }
.page-vip-travel .vip-10 { margin:12px 0; background:none; border:1.5px solid var(--border); border-radius:50px; padding:8px 18px; font-size:13px; font-weight:600; color:var(--teal-dark); cursor:pointer; }
.page-vip-travel .vip-11 { right:16px; }
.page-vip-travel .vip-12 { left:16px; }
.page-vip-travel .vip-13 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.page-vip-travel .vip-14 { padding:22px; }
.page-vip-travel .vip-15 { margin-top:28px; }
.page-vip-travel .vip-16 { position:static; transform:none; padding:16px 0; background:var(--white); }
.page-vip-travel .vip-17 { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.page-vip-travel .vip-18 { position:relative; height:640px; overflow:hidden; }
.page-vip-travel .vip-19 { background:var(--teal-pale); border:1px solid var(--border); }
.page-vip-travel .vip-20 { display:flex; align-items:center; gap:14px; }
.page-vip-travel .vip-21 { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; margin-top:20px; }
.page-vip-travel .vip-22 { font-size:15.5px; line-height:1.9; color:var(--muted); }
.page-vip-travel .vip-23 { font-size:13px; color:var(--muted); }
.page-vip-travel .vip-24 { font-family:var(--ff-head); font-size:44px; font-weight:700; color:var(--teal-dark); }
.page-vip-travel .vip-25 { color:var(--gold); }
.page-vip-travel .vip-26 { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); }
.page-vip-travel .vip-27 { color:var(--gold); font-size:26px; margin-bottom:12px; }
.page-vip-travel .vip-28 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px; margin-top:32px; }
.page-vip-travel .vip-29 { margin-top:36px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); position:relative; }
.page-vip-travel .vip-30 { position:relative; overflow:hidden; }
.page-vip-travel .vip-31 { font-family:var(--ff-head); font-size:1.15rem; margin:8px 0; }
.page-vip-travel .vip-32 { display:flex; align-items:center; gap:8px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--teal-dark); margin-bottom:16px; }
.page-vip-travel .vip-33 { font-family:var(--ff-head); font-size:1.15rem; margin-bottom:10px; }
.page-vip-travel .vip-34 { font-size:11px; }
.page-vip-travel .vip-35 { color:var(--gold); margin-right:6px; }
.page-vip-travel .vip-36 { color:var(--teal); }
.page-vip-travel .vip-37 { color:var(--teal); margin-right:8px; }
.page-vip-travel .vip-38 { max-width:1200px; margin:0 auto; padding:56px 24px; }
.page-vip-travel .vip-39 { font-size:12.5px; color:var(--muted); margin-top:14px; }
.page-vip-travel .vip-40 { color:var(--muted); max-width:900px; margin-top:10px; }
.page-vip-travel .vip-41 { font-size:13.5px; color:var(--muted); margin:10px 0 16px; }
.page-vip-travel .vip-42 { font-size:13px; color:var(--muted); margin-top:16px; }
.page-vip-travel .vip-43 { font-size:14.5px; color:var(--muted); line-height:1.75; }
.page-vip-travel .vip-44 { font-size:14.5px; color:var(--muted); line-height:1.8; }
.page-vip-travel .vip-45 { font-size:14px; color:var(--muted); line-height:1.7; }
.page-vip-travel .vip-46 { font-size:14px; color:var(--muted); line-height:1.8; margin-top:14px; }
.page-vip-travel .vip-47 { font-size:15px; color:var(--muted); line-height:1.8; }
.page-vip-travel .vip-48 { text-align:center; margin-top:24px; }
.page-vip-travel .vip-49 { margin:56px -24px 0; border-radius:var(--radius-lg); }
.page-vip-travel .vip-50 { margin-top:56px; }
.page-vip-travel .vip-51 { max-width:1400px; margin:0 auto; padding:60px 32px; }
.page-vip-travel .vip-52 { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal); }
.page-vip-travel .vip-53 { background:rgba(212,168,67,.15); border:1px solid rgba(212,168,67,.4); color:var(--gold); padding:8px 18px; border-radius:50px; font-size:13px; font-weight:700; letter-spacing:.04em; }
.page-vip-travel .vip-54 { font-size:14px; font-weight:500; color:var(--muted); }
.page-vip-travel .vip-55 { font-weight:400; color:var(--muted); }
.page-vip-travel .vip-56 { color:var(--text); }
.page-vip-travel .vip-57 { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:#c8d8d7; }

/* ============================================================
   PAGE: Lifestyle Luxury VIP Travel Agency Services — MOBILE FIXES
   Placed at the very end of the file on purpose: several of these
   overrides target classes (like the auto-generated .vip-N classes
   above) that carry the same selector specificity, so source order
   is what decides which one wins. Keeping the fixes last guarantees
   they take priority without needing !important.
   ============================================================ */

/* Fix: hero text getting cramped/cut off on mobile.
   .vip-18 (on .home-hero-frame) hard-codes height:640px with
   overflow:hidden, and .vip-17 (on .hh-content) stretches to
   height:100% of that box, centered via justify-content. That's
   fine on desktop, where the heading/paragraph fit on a couple of
   lines — but on a narrow phone the same text wraps onto many more
   lines, and instead of the box growing to fit, the extra lines get
   clipped top and bottom by the fixed height. Switching both to
   min-height lets the frame grow automatically to fit however much
   text is actually on screen, at any width. */
.page-vip-travel .vip-18 { height: auto; min-height: 640px; }
.page-vip-travel .vip-17 { height: auto; min-height: 100%; }

/* Fix: hero text getting clipped on mobile instead of wrapping.
   .home-hero-frame is display:flex (row) and .hh-content is its only
   child, so by default it refuses to shrink below its own content's
   natural width (min-width:auto on flex items) — on a narrow phone
   the excess width gets clipped instead of the text wrapping.
   Force it to fill and shrink normally, and make sure the badge and
   heading/paragraph text can always wrap. */
.page-vip-travel .home-hero-frame { flex-wrap: wrap; }
.page-vip-travel .hh-content { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.page-vip-travel .hh-content h1,
.page-vip-travel .hh-content .hh-sub { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.page-vip-travel .hero-badge-inline { max-width: 100%; min-width: 0; }
.page-vip-travel .hero-badge-inline .badge { max-width: 100%; white-space: normal; word-break: break-word; }
.page-vip-travel .hero-meta,
.page-vip-travel .hero-actions { max-width: 100%; }
@media (max-width: 480px) {
  .page-vip-travel .hh-content { padding: 0 16px; }
}

/* Fix: header logo overlapping the phone number and "Request VIP
   Proposal" button on mobile. #site-header is a fixed-height row
   with no wrapping, and nothing was hiding the phone link or
   shrinking the logo/button, so on narrow phones the logo text
   wrapped to 3 lines and collided with everything else. */
@media (max-width: 640px) {
  .page-vip-travel .header-actions { display: none; }
  .page-vip-travel .brand-logo { font-size: 16px; white-space: nowrap; }
  .page-vip-travel .header-utils { gap: 8px; }
  .page-vip-travel .btn-book-nav { padding: 8px 12px; font-size: 11px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .page-vip-travel .btn-book-nav { display: none; }
}

/* Fix: real phones (unlike desktop browser emulators) automatically
   boost font size in narrow text columns for readability. That
   boosting is applied AFTER layout, so it can push text past its
   container even when everything wraps correctly at the specified
   font sizes — this is very likely why the issue kept showing on an
   actual device even though it tested clean in emulation. */
.page-vip-travel { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Extra safety net: guarantee nothing can ever force horizontal
   scroll/clipping on this page's hero and header, no matter what
   causes it. */
.page-vip-travel #site-header,
.page-vip-travel .header-inner,
.page-vip-travel .hero-gold-frame,
.page-vip-travel .home-hero-frame,
.page-vip-travel .hh-content,
.page-vip-travel .hero-meta,
.page-vip-travel .hero-actions,
.page-vip-travel .breadcrumb-bar,
.page-vip-travel .bc-inner {
  max-width: 100vw;
  box-sizing: border-box;
}


/* ============================================================
   GENERAL INFORMATION HUB — The History Travel
   Page-specific component rules are kept here so the HTML page
   uses one stylesheet only. These classes are deliberately scoped
   to the .general-info-* / .gi-* component names.
============================================================ */
.general-info-hero {
  background: radial-gradient(circle at 12% 20%, rgba(212,168,67,.18), transparent 28%),
              radial-gradient(circle at 88% 10%, rgba(0,180,233,.12), transparent 24%),
              linear-gradient(135deg, var(--teal-dark) 0%, #123c3a 58%, #2d1a0e 100%);
  color:#fff; padding:64px 24px 56px; text-align:center; position:relative; overflow:hidden;
}
.general-info-hero .hero-inner { max-width:900px; margin:0 auto; position:relative; }
.general-info-hero .eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.general-info-hero h1 { font-family:var(--ff-head); font-size:clamp(30px,5vw,52px); line-height:1.12; margin:0 0 16px; }
.general-info-hero h1 em { color:var(--gold); font-style:normal; }
.general-info-hero p { max-width:780px; margin:0 auto; color:rgba(255,255,255,.9); font-size:16px; line-height:1.9; }
.gi-wrap { max-width:var(--max-content); margin:0 auto; padding:58px 24px 76px; }
.gi-intro { max-width:960px; margin:0 auto 46px; text-align:center; }
.gi-intro-label { display:inline-flex; align-items:center; gap:8px; color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.gi-intro h2 { font-family:var(--ff-head); color:var(--text); font-size:clamp(26px,3vw,38px); margin-bottom:18px; }
.gi-intro p { color:var(--muted); line-height:1.9; font-size:16px; margin:0 auto 15px; max-width:900px; }
.gi-intro p:last-child { margin-bottom:0; }
.gi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:30px; }
.gi-card { display:flex; flex-direction:column; min-height:245px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:26px; text-decoration:none; color:inherit; transition:var(--trans); position:relative; overflow:hidden; }
.gi-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.gi-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(14,145,140,.35); }
.gi-card:hover::before { transform:scaleX(1); }
.gi-card-head { display:flex; align-items:center; gap:14px; min-height:52px; margin-bottom:15px; }
.gi-icon { width:50px; height:50px; flex:0 0 50px; border-radius:14px; background:var(--teal-light); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0; border:1px solid rgba(14,145,140,.10); }
.gi-card h3 { font-family:var(--ff-head); color:var(--text); font-size:19px; line-height:1.3; margin:0; }
.gi-card p { color:var(--muted); font-size:14px; line-height:1.78; margin:0 0 18px; flex:1; }
.gi-card .gi-link { display:inline-flex; align-items:center; gap:8px; color:var(--teal-dark); font-size:13.5px; font-weight:700; }
.gi-card .gi-link span { transition:transform .2s ease; }
.gi-card:hover .gi-link span { transform:translateX(4px); }
.gi-trust { margin-top:50px; background:var(--teal-pale); border:1px solid rgba(14,145,140,.16); border-radius:var(--radius-lg); padding:32px; }
.gi-trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gi-trust-item { display:flex; gap:14px; align-items:flex-start; }
.gi-trust-item .ico { width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:var(--white); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
.gi-trust-item h3 { font-size:14px; color:var(--text); margin:0 0 5px; }
.gi-trust-item p { font-size:13px; color:var(--muted); line-height:1.65; margin:0; }
.gi-cta { margin-top:44px; padding:40px 30px; border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--bordeaux-dark),var(--bordeaux)); color:#fff; text-align:center; }
.gi-cta h2 { font-family:var(--ff-head); font-size:30px; margin:0 0 10px; }
.gi-cta p { max-width:740px; margin:0 auto 22px; color:rgba(255,255,255,.86); line-height:1.85; font-size:15px; }
.gi-cta .cta-links { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.gi-cta a { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:50px; text-decoration:none; font-size:13.5px; font-weight:700; }
.gi-cta .primary { background:var(--gold); color:var(--bordeaux-dark); }
.gi-cta .secondary { border:1px solid rgba(255,255,255,.35); color:#fff; }
.gi-rating { text-align:center; margin-top:36px; color:var(--muted); font-size:13px; letter-spacing:.02em; }
.gi-rating strong { color:var(--text); }
.gi-rating .stars { color:var(--gold); letter-spacing:2px; margin-left:5px; }
.gi-breadcrumb { background:var(--teal-dark); }
.gi-breadcrumb .breadcrumb-inner { max-width:var(--max-content); margin:0 auto; padding:9px 24px; font-size:12.5px; color:rgba(255,255,255,.72); }
.gi-breadcrumb a { color:rgba(255,255,255,.9); text-decoration:none; }
.gi-breadcrumb a:hover { color:var(--gold); }
.gi-breadcrumb .sep { margin:0 7px; color:var(--gold); }
@media (max-width:900px) { .gi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .gi-trust-grid{grid-template-columns:1fr;} }
@media (max-width:620px) { .general-info-hero{padding:48px 20px 42px;} .gi-wrap{padding:40px 18px 56px;} .gi-intro p{font-size:15px;line-height:1.82;} .gi-grid{grid-template-columns:1fr;} .gi-card{min-height:0;padding:23px;} .gi-card-head{align-items:flex-start;} .gi-card h3{font-size:18px;} .gi-trust{padding:22px 18px;} .gi-cta{padding:30px 20px;} }


/* ════════════════════════════════════════════════════════════
   GENERAL INFORMATION — OVERVIEW
   Scoped to the General Information page only.
════════════════════════════════════════════════════════════ */
.gi-wrap { max-width: 1200px; }
.gi-intro { max-width: 1200px; }
.gi-intro p { max-width: 1200px; text-align: justify; text-justify: inter-word; }
@media (max-width: 620px) {
  .gi-intro p { text-align: left; text-justify: auto; }
}

/* ═══ RESERVATION — wide layout with dinner presentation (scoped to .rsv) ═══ */
.rsv{background:var(--bg);padding:0 0 72px;scroll-margin-top:110px}
.rsv-band{position:relative;min-height:340px;background:var(--bordeaux-dark);overflow:hidden;display:flex;align-items:flex-end}
.rsv-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.rsv-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(78,31,36,.35),rgba(78,31,36,.92))}
.rsv-band-text{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:64px 32px 36px;color:#fff}
.rsv-band h2{font-family:var(--ff-head);font-size:clamp(30px,4.4vw,52px);line-height:1.12;margin:0 0 14px;max-width:820px}
.rsv-band p{max-width:640px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.88);margin:0 0 24px}
.rsv-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.rsv-facts li{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(212,168,67,.7);border-radius:50px;font-size:14px;background:rgba(0,0,0,.18)}
.rsv-facts i{color:var(--gold)}
.rsv-inner{max-width:1320px;margin:0 auto;padding:0 32px}
.rsv-dinner{margin-top:-1px;padding:56px 0 24px}
.rsv-dinner-head{max-width:720px;margin-bottom:28px}
.rsv-dinner-head h3{font-family:var(--ff-head);font-size:clamp(26px,3vw,36px);color:var(--bordeaux-dark);margin:0 0 8px}
.rsv-dinner-head p{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.rsv-courses{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:0;align-items:stretch;background:#fff;border:1px solid var(--gold);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.rsv-course{display:flex;flex-direction:column}
.rsv-course+.rsv-course{border-left:1px solid var(--border)}
.rsv-photo{position:relative;height:230px;background:linear-gradient(135deg,var(--bordeaux),var(--teal-dark));overflow:hidden}
.rsv-course-main .rsv-photo{height:290px}
.rsv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rsv-course-body{padding:24px 26px 28px}
.rsv-course-body h4{font-family:var(--ff-head);font-size:22px;color:var(--bordeaux);margin:0 0 8px}
.rsv-course-body p{font-size:15px;line-height:1.75;color:var(--text);margin:0}
.rsv-pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.rsv-pairs div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.rsv-pairs i{grid-row:span 2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--bordeaux-light);color:var(--bordeaux)}
.rsv-pairs strong{font-size:15px;color:var(--text)}.rsv-pairs span{font-size:13.5px;color:var(--muted);line-height:1.5}
.rsv-layout{display:grid;grid-template-columns:minmax(300px,.8fr) 2fr;gap:36px;align-items:start;margin-top:40px;padding-top:44px;border-top:1px solid var(--border)}
.rsv-aside{position:sticky;top:130px;background:linear-gradient(170deg,var(--bordeaux-dark),var(--bordeaux));color:#fff;border-radius:var(--radius-xl);padding:34px 30px}
.rsv-aside .price-display .amount{font-size:58px}
.rsv-aside-photo{height:170px;border-radius:var(--radius);margin:0 0 24px}
.rsv-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);padding:44px;box-shadow:var(--shadow-md)}
.rsv .form-mode-tabs{width:100%;max-width:460px;margin-bottom:26px}
.rsv .form-mode-tab{padding:13px;font-size:15px}
.rsv .form-mode-tab[aria-selected="true"]{background:var(--bordeaux);color:#fff}
.rsv .form-panel-intro{font-size:15.5px;max-width:720px}
.rsv .form-group label{font-size:13px}
.rsv .form-control,.rsv .form-group input,.rsv .form-group textarea{font-size:16px;padding:14px 16px;border-radius:10px}
.rsv .field-grid-2{gap:20px;margin-bottom:20px}
.rsv .tour-type-toggle{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:0}
.rsv .tour-type-card{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:18px;border-radius:14px;height:100%}
.rsv .tour-type-card>i{grid-row:span 3;color:var(--teal-dark);font-size:20px}
.rsv .tour-type-name{font-size:15px;line-height:1.35}
.rsv .tour-type-meta{font-size:12.5px;color:var(--muted)}
.rsv .tour-type-price{font-family:var(--ff-head);font-size:24px;font-weight:700;color:var(--bordeaux);margin-top:4px}
.rsv .tour-type-price small{font-family:var(--ff-body);font-size:12px;font-weight:400;color:var(--muted)}
.rsv .tour-type-option input:checked+.tour-type-card>i{color:var(--bordeaux)}
.rsv .ticket-stepper{border-radius:14px;margin:22px 0}
.rsv .ticket-row{padding:20px 24px}.rsv .total-row{padding:20px 24px}
.rsv .step-btn{width:42px;height:42px}
.rsv .btn-gold{font-size:17px;padding:17px 24px}
.rsv-info{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media (max-width:1100px){.rsv-layout{grid-template-columns:1fr}.rsv-aside{position:static}.rsv-courses{grid-template-columns:1fr}.rsv-course+.rsv-course{border-left:0;border-top:1px solid var(--border)}.rsv-course-main .rsv-photo,.rsv-photo{height:220px}}
@media (max-width:760px){.rsv-inner,.rsv-band-text{padding-left:16px;padding-right:16px}.rsv-form{padding:24px 18px}.rsv-pairs,.rsv-info{grid-template-columns:1fr}.rsv-band{min-height:300px}}

/* ════════════════════════════════════════════════════════════
   ISTANBUL TOURISM & SIGHTSEEING ATTRACTIONS — MASTER LIST PAGE
   Page-specific rules — scoped to body.istanbul-master-list
   (new, non-breaking — nothing above this block was changed)
════════════════════════════════════════════════════════════ */
body.istanbul-master-list a { text-decoration:none;
  color:inherit }
body.istanbul-master-list ul { list-style:none }
body.istanbul-master-list .container { max-width:var(--max-content);
  margin:0 auto;
  padding:0 24px }
body.istanbul-master-list main section { padding:44px 0 8px }
body.istanbul-master-list .section-label { font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--teal);
  font-weight:700;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:8px }
body.istanbul-master-list .section-label::after { content:"";
  flex:1;
  height:1px;
  background:var(--teal-light) }
body.istanbul-master-list .section-title { font-family:var(--ff-head);
  font-size:clamp(24px,3vw,36px);
  color:var(--text);
  margin-bottom:8px;
  line-height:1.25 }
body.istanbul-master-list .section-title em { color:var(--teal);
  font-style:normal }
body.istanbul-master-list .lead { color:var(--muted);
  font-size:15px;
  margin-bottom:22px;
  max-width:760px }
body.istanbul-master-list .jump { display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0 }
body.istanbul-master-list .jump a { font-size:13px;
  font-weight:600;
  color:var(--teal-dark);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:50px;
  padding:6px 14px;
  transition:var(--trans) }
body.istanbul-master-list .jump a:hover { border-color:var(--teal);
  background:var(--teal-pale) }
body.istanbul-master-list .attraction-grid { display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px }
body.istanbul-master-list .pic { position:relative;
  height:170px;
  background:linear-gradient(135deg,#0a6b67,#1a4a48 60%,#2d1a0e);
  overflow:hidden }
body.istanbul-master-list .pic::before { content:attr(data-n);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  color:#fff;
  font-family:var(--ff-head);
  font-size:18px;
  opacity:.85 }
body.istanbul-master-list .pic img { position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease }
body.istanbul-master-list .attraction-grid li:hover .pic img { transform:scale(1.06) }
body.istanbul-master-list .txt { padding:18px 20px 20px }
body.istanbul-master-list .intro { font-size:15px;
  line-height:1.85;
  margin:-8px 0 22px;
  max-width:900px }
body.istanbul-master-list .attraction-grid li { overflow:hidden;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:var(--trans) }
body.istanbul-master-list .attraction-grid li:hover { border-color:var(--teal);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px) }
body.istanbul-master-list .attraction-grid h3 { font-size:16px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:4px }
body.istanbul-master-list .attraction-grid h3 b { color:var(--gold);
  margin-right:4px }
body.istanbul-master-list .attraction-grid span { display:block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--teal);
  margin-bottom:8px }
body.istanbul-master-list .attraction-grid p { font-size:14px;
  color:var(--muted);
  line-height:1.65 }
body.istanbul-master-list .explore-banner { display:block;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:36px 40px;
  margin:48px 0 56px }
body.istanbul-master-list .explore-banner>p { color:var(--muted);
  font-size:15px;
  margin-bottom:22px }
body.istanbul-master-list .explore-links { display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px 28px }
body.istanbul-master-list .explore-links a { display:flex;
  align-items:center;
  gap:10px;
  color:var(--teal-dark);
  font-weight:600;
  font-size:14px;
  padding:10px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--trans) }
body.istanbul-master-list .explore-links a::before { content:"›";
  color:var(--gold);
  font-size:18px;
  line-height:1 }
body.istanbul-master-list .explore-links a:hover { border-color:var(--teal);
  background:var(--teal-pale);
  transform:translateX(3px) }
@media(max-width:1024px) {
body.istanbul-master-list .attraction-grid, body.istanbul-master-list .explore-links { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:640px) {
body.istanbul-master-list .attraction-grid, body.istanbul-master-list .explore-links { grid-template-columns:1fr }
body.istanbul-master-list .explore-banner { padding:28px 24px }
}
body.istanbul-master-list .skip { position:absolute;
  left:-999px;
  top:0;
  background:var(--teal);
  color:#fff;
  padding:10px 16px;
  z-index:99 }
body.istanbul-master-list .skip:focus { left:8px;
  top:8px }
body.istanbul-master-list .crumbs { font-size:13px;
  color:var(--muted);
  padding-top:20px }
body.istanbul-master-list .crumbs ol { display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none }
body.istanbul-master-list .crumbs li+li::before { content:"/";
  margin-right:6px }
body.istanbul-master-list .crumbs a { color:var(--teal-dark) }
body.istanbul-master-list .faq { padding:44px 0 8px }
body.istanbul-master-list .faq details { border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:10px }
body.istanbul-master-list .faq summary { cursor:pointer;
  font-weight:600 }
body.istanbul-master-list .faq details p { color:var(--muted);
  font-size:14px;
  margin-top:8px }
body.istanbul-master-list .foot { border-top:1px solid var(--border);
  padding:24px 0;
  font-size:13px;
  color:var(--muted);
  text-align:center }
body.istanbul-master-list .attraction-grid li:target { border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,168,67,.35) }
body.istanbul-master-list a:focus-visible, body.istanbul-master-list summary:focus-visible { outline:3px solid var(--gold);
  outline-offset:2px }
@media print {
body.istanbul-master-list .jump, body.istanbul-master-list .explore-banner, body.istanbul-master-list .skip { display:none }
body.istanbul-master-list .attraction-grid li { break-inside:avoid }
}
body.istanbul-master-list .section-title { margin-bottom: 8px; }
body.istanbul-master-list .attraction-grid { margin-top: 0; }

/* ============================================================
   PAGE-SCOPED: 2-days-cappadocia-marvels-tour.html
   Additions only, scoped to body.tour-cappadocia-marvels-2d so no
   other page that shares styles.css is affected.
   ============================================================ */
/* Page-scoped additions for body.tour-cappadocia-marvels-2d (safe to move into styles.css) */
.tour-cappadocia-marvels-2d #hero::before{background-image:linear-gradient(rgba(10,61,58,.74),rgba(45,26,14,.8)),url("https://commons.wikimedia.org/wiki/Special:FilePath/G%C3%B6reme_cappadocia.jpg?width=1600");background-size:cover;background-position:center}

/* Itinerary: stops, chips, article */
.tour-cappadocia-marvels-2d .site-detail-list{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.tour-cappadocia-marvels-2d .site-detail{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:var(--radius)}
.tour-cappadocia-marvels-2d .site-detail-icon{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tour-cappadocia-marvels-2d .site-detail-text h4{font-family:var(--ff-head);font-size:15.5px;font-weight:700;color:var(--text);margin:0 0 4px;line-height:1.35}
.tour-cappadocia-marvels-2d .site-detail-text p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
.tour-cappadocia-marvels-2d .itin-day-body p.itin-lead,.tour-cappadocia-marvels-2d .itin-day-body p.itin-close{font-size:15px;color:var(--muted);line-height:1.8}
.tour-cappadocia-marvels-2d .itin-day-meta .itin-places{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--teal-dark);font-weight:600}
.tour-cappadocia-marvels-2d .day-places{margin:14px 0 6px;padding:16px 18px;background:var(--teal-pale);border:1px solid var(--border);border-radius:var(--radius)}
.tour-cappadocia-marvels-2d .day-places h4{font-size:14px;font-weight:700;color:var(--teal-dark);margin:0}
.tour-cappadocia-marvels-2d .day-places .pf-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tour-cappadocia-marvels-2d .itin-article h3{font-family:var(--ff-head);font-size:1.15rem;color:var(--teal-dark);margin:22px 0 8px}

/* Icon + headline on one row inside cards */
.tour-cappadocia-marvels-2d .highlight-card h4{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;margin-bottom:10px}
.tour-cappadocia-marvels-2d .highlight-card h4 i{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin:0}
.tour-cappadocia-marvels-2d .ai-card{display:grid;grid-template-columns:42px 1fr;column-gap:14px;row-gap:12px;align-items:center}
.tour-cappadocia-marvels-2d .ai-card-icon{margin:0}
.tour-cappadocia-marvels-2d .ai-card h4{margin:0;line-height:1.35}
.tour-cappadocia-marvels-2d .ai-card p{grid-column:1 / -1;margin:0}

/* Route: 3 boxes in one row */
.tour-cappadocia-marvels-2d .route-map .route-track{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:10px}
.tour-cappadocia-marvels-2d .route-map .route-stop{flex:1 1 0;min-width:0;flex-direction:row;justify-content:center;align-self:stretch;background:#fff;border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:var(--radius);padding:16px 12px;font-size:14px;font-weight:600;line-height:1.4;text-align:center;color:var(--text);white-space:normal}
.tour-cappadocia-marvels-2d .route-map .route-arrow{align-self:center;margin:0;display:block}
.tour-cappadocia-marvels-2d .route-map .overview-grid{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:820px){.tour-cappadocia-marvels-2d .route-map .overview-grid{grid-template-columns:1fr}}
@media (max-width:560px){.tour-cappadocia-marvels-2d .route-map .route-stop{font-size:12px;padding:12px 8px}.tour-cappadocia-marvels-2d .route-map .route-arrow{display:none}}

/* Guest reviews: grid, avatar + name + stars on one line */
.tour-cappadocia-marvels-2d .reviews-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:720px){.tour-cappadocia-marvels-2d .reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tour-cappadocia-marvels-2d .reviews-grid{grid-template-columns:repeat(3,1fr)}}
.tour-cappadocia-marvels-2d .review-card{display:flex;flex-direction:column}
.tour-cappadocia-marvels-2d .rc-head{display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
.tour-cappadocia-marvels-2d .rc-avatar{width:44px;height:44px;font-size:17px}
.tour-cappadocia-marvels-2d .rc-meta{flex:1;min-width:0}
.tour-cappadocia-marvels-2d .rc-meta h4{margin:0 0 2px;overflow-wrap:anywhere}
.tour-cappadocia-marvels-2d .rc-stars{margin:0 0 0 auto;white-space:nowrap;font-size:13px;letter-spacing:1px;flex-shrink:0}
.tour-cappadocia-marvels-2d .reviews-intro{margin:24px 0 18px}
.tour-cappadocia-marvels-2d .reviews-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}

/* Destination guide */
.tour-cappadocia-marvels-2d .dg-circuit{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:36px}
.tour-cappadocia-marvels-2d .dg-head{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.tour-cappadocia-marvels-2d .dg-head-text{padding:40px;color:#fff;background:linear-gradient(135deg,#0a3d3a,#123f3c);display:flex;flex-direction:column;justify-content:center}
.tour-cappadocia-marvels-2d .dg-south .dg-head-text{background:linear-gradient(135deg,#4a2a14,#2d1a0e)}
.tour-cappadocia-marvels-2d .dg-south .dg-head-img{order:-1}
.tour-cappadocia-marvels-2d .dg-day{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:rgba(212,168,67,.2);color:var(--gold);font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.tour-cappadocia-marvels-2d .dg-head-text h3{font-family:var(--ff-head);font-size:clamp(22px,2.6vw,30px);line-height:1.25;margin:0 0 14px;color:#fff}
.tour-cappadocia-marvels-2d .dg-head-text p{font-size:15px;line-height:1.8;opacity:.92;margin:0 0 12px}
.tour-cappadocia-marvels-2d .dg-facts{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0;padding:0;list-style:none}
.tour-cappadocia-marvels-2d .dg-facts li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 14px;font-size:12.5px}
.tour-cappadocia-marvels-2d .dg-facts i{color:var(--gold)}
.tour-cappadocia-marvels-2d .dg-head-img{position:relative;min-height:360px}
.tour-cappadocia-marvels-2d .dg-head-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tour-cappadocia-marvels-2d .dg-badge{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.95);padding:10px 16px;border-radius:10px}
.tour-cappadocia-marvels-2d .dg-badge strong{display:block;font-family:var(--ff-head);font-size:16px;color:var(--teal-dark)}
.tour-cappadocia-marvels-2d .dg-badge span{font-size:11.5px;color:var(--muted)}
.tour-cappadocia-marvels-2d .dg-places{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px}
.tour-cappadocia-marvels-2d .dg-place{background:var(--bg);border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.tour-cappadocia-marvels-2d .dg-south .dg-place{border-top-color:var(--gold)}
.tour-cappadocia-marvels-2d .dg-place-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tour-cappadocia-marvels-2d .dg-icon{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.tour-cappadocia-marvels-2d .dg-south .dg-icon{background:var(--bordeaux)}
.tour-cappadocia-marvels-2d .dg-stop{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
.tour-cappadocia-marvels-2d .dg-place h4{font-family:var(--ff-head);font-size:16.5px;line-height:1.3;color:var(--text);margin:0}
.tour-cappadocia-marvels-2d .dg-place p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 14px}
.tour-cappadocia-marvels-2d .dg-place p.dg-why{display:flex;align-items:flex-start;gap:8px;margin:auto 0 0;padding-top:12px;border-top:1px dashed var(--border);font-size:13px;font-weight:600;color:var(--teal-dark);line-height:1.5}
.tour-cappadocia-marvels-2d .dg-place p.dg-why i{margin-top:3px;color:var(--teal)}
@media (max-width:1024px){.tour-cappadocia-marvels-2d .dg-places{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.tour-cappadocia-marvels-2d .dg-head{grid-template-columns:1fr}.tour-cappadocia-marvels-2d .dg-head-img,.tour-cappadocia-marvels-2d .dg-south .dg-head-img{order:-1;min-height:240px}.tour-cappadocia-marvels-2d .dg-head-text{padding:28px 22px}}
@media (max-width:620px){.tour-cappadocia-marvels-2d .dg-places{grid-template-columns:1fr;padding:18px}}
@media (max-width:560px){.tour-cappadocia-marvels-2d .site-detail{flex-direction:column}}

/* CTA banner: boxed to the 1200px page width instead of full bleed */
.cta-banner--boxed,
.tour-cappadocia-marvels-2d .cta-banner{width:calc(100% - 48px);max-width:var(--max-content,1200px);margin:56px auto;border-radius:var(--radius-lg);padding:56px 32px;box-sizing:border-box}
@media (max-width:560px){.cta-banner--boxed,
.tour-cappadocia-marvels-2d .cta-banner{width:calc(100% - 32px);margin:36px auto;padding:40px 20px}}

/* ============================================================
   10 Day Ultimate Turkey Discovery Tour
   Page-specific additions, scoped to body.tour-ultimate-discovery-10d
   (additive only: nothing above this block was changed)
   ============================================================ */

/* --- Shared card pattern: icon + heading (+ meta/stars) side by side --- */
.tour-ultimate-discovery-10d .ud-grid { display: grid; gap: 20px; margin-top: 24px; align-items: stretch; }
.tour-ultimate-discovery-10d .ud-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tour-ultimate-discovery-10d .ud-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tour-ultimate-discovery-10d .ud-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.tour-ultimate-discovery-10d .ud-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tour-ultimate-discovery-10d .ud-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.tour-ultimate-discovery-10d .ud-ico i { color: inherit; margin: 0; }
.tour-ultimate-discovery-10d .ud-head h3,
.tour-ultimate-discovery-10d .ud-head h4 { margin: 0; font-family: var(--ff-head); font-size: 17px; line-height: 1.3; color: var(--text); text-transform: none; letter-spacing: 0; }
.tour-ultimate-discovery-10d .ud-head small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--teal-dark); }
.tour-ultimate-discovery-10d .ud-card > p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
@media (max-width: 1024px) {
  .tour-ultimate-discovery-10d .ud-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .tour-ultimate-discovery-10d .ud-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tour-ultimate-discovery-10d .ud-grid.cols-3,
  .tour-ultimate-discovery-10d .ud-grid.cols-4 { grid-template-columns: 1fr; }
}

/* --- Existing card types: icon, heading side by side, description below --- */
.tour-ultimate-discovery-10d .tour-highlights .highlight-card { padding: 22px 22px 24px; }
.tour-ultimate-discovery-10d .tour-highlights .highlight-card h4 { display: flex; align-items: center; gap: 12px; font-size: 16px; margin-bottom: 12px; line-height: 1.3; }
.tour-ultimate-discovery-10d .tour-highlights .highlight-card h4 i { font-size: 20px; margin: 0; flex-shrink: 0; }
.tour-ultimate-discovery-10d .tour-highlights .highlight-card p { font-size: 14px; line-height: 1.75; }
.tour-ultimate-discovery-10d .ai-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }
.tour-ultimate-discovery-10d .ai-card-icon { margin: 0; }
.tour-ultimate-discovery-10d .ai-card h4 { margin: 0; line-height: 1.35; }
.tour-ultimate-discovery-10d .ai-card p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; }
.tour-ultimate-discovery-10d .why-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }
.tour-ultimate-discovery-10d .why-icon { margin: 0; }
.tour-ultimate-discovery-10d .why-card h3 { margin: 0; line-height: 1.3; }
.tour-ultimate-discovery-10d .why-card p { grid-column: 1 / -1; margin: 0; }
.tour-ultimate-discovery-10d .why-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .tour-ultimate-discovery-10d .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tour-ultimate-discovery-10d .why-grid { grid-template-columns: 1fr; } }
.tour-ultimate-discovery-10d .season-card { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 10px; align-items: center; text-align: left; padding: 20px; }
.tour-ultimate-discovery-10d .season-card i { font-size: 24px; margin: 0; display: block; text-align: center; }
.tour-ultimate-discovery-10d .season-card h4 { margin: 0; }
.tour-ultimate-discovery-10d .season-card p { grid-column: 1 / -1; margin: 0; }
.tour-ultimate-discovery-10d .ke-card-body { padding: 22px 22px 22px; }
.tour-ultimate-discovery-10d .ke-card-body .ud-head h4 { font-size: 16px; }
.tour-ultimate-discovery-10d .ke-card { border: 1px solid var(--border); border-top: 3px solid var(--teal); }
.tour-ultimate-discovery-10d .booking-card h4 { display: flex; align-items: center; gap: 10px; }
.tour-ultimate-discovery-10d .booking-card h4 i { margin: 0; }
@media (max-width: 1024px) { .tour-ultimate-discovery-10d .ke-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-ultimate-discovery-10d .ke-grid { grid-template-columns: 1fr; } }

/* --- Reviews: avatar, name and stars stay on one row --- */
.tour-ultimate-discovery-10d #reviews .rc-head { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; }
.tour-ultimate-discovery-10d #reviews .rc-meta { min-width: 0; flex: 1; }
.tour-ultimate-discovery-10d #reviews .rc-meta h4 { overflow-wrap: anywhere; }
.tour-ultimate-discovery-10d #reviews .rc-stars { margin: 0 0 0 auto; white-space: nowrap; font-size: 13px; letter-spacing: 1px; flex-shrink: 0; }

/* --- Your route: numbered stop cards --- */
.tour-ultimate-discovery-10d .route-planner { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px 34px; }
.tour-ultimate-discovery-10d .route-planner .subsection-title { margin: 4px 0 10px; }
.tour-ultimate-discovery-10d .route-planner .lead-text { margin-bottom: 18px; }
.tour-ultimate-discovery-10d .rp-chips { justify-content: flex-start; margin-bottom: 6px; }
.tour-ultimate-discovery-10d .rp-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tour-ultimate-discovery-10d .rp-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 22px 22px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.tour-ultimate-discovery-10d .rp-card > p { margin: 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.tour-ultimate-discovery-10d .rp-num { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tour-ultimate-discovery-10d .rp-next { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.tour-ultimate-discovery-10d .rp-next i { color: var(--gold); }
@media (max-width: 1024px) { .tour-ultimate-discovery-10d .rp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tour-ultimate-discovery-10d .rp-grid { grid-template-columns: 1fr; } .tour-ultimate-discovery-10d .route-planner { padding: 26px 16px; } }

/* --- Destination guides --- */
.tour-ultimate-discovery-10d #destinations .section-center { max-width: 760px; }
.tour-ultimate-discovery-10d .dg-card .dg-pills { justify-content: flex-start; gap: 8px; margin: 16px 0 18px; }
.tour-ultimate-discovery-10d .dg-card .pf-pill { font-size: 12px; padding: 6px 12px; }
.tour-ultimate-discovery-10d .dg-card .ke-card-link { margin-top: auto; }
.tour-ultimate-discovery-10d #destinations .dest-section,
.tour-ultimate-discovery-10d #destinations .dest-section.alt { background: var(--white); color: var(--text); padding: 0; margin: 40px 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.tour-ultimate-discovery-10d #destinations .dest-inner { max-width: none; padding: 0; gap: 0; align-items: stretch; }
.tour-ultimate-discovery-10d #destinations .dest-text { padding: 40px 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.tour-ultimate-discovery-10d #destinations .dest-text h2 { color: var(--teal-dark); font-size: clamp(24px, 3vw, 32px); }
.tour-ultimate-discovery-10d #destinations .dest-text > p { color: var(--muted); opacity: 1; font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
.tour-ultimate-discovery-10d #destinations .dest-section.alt .dh-item,
.tour-ultimate-discovery-10d #destinations .dh-item { color: var(--text); }
.tour-ultimate-discovery-10d #destinations .dest-eyebrow { background: var(--teal-light); color: var(--teal-dark); padding: 5px 12px; border-radius: 50px; margin-bottom: 14px; align-self: flex-start; }
.tour-ultimate-discovery-10d #destinations .dest-img-wrap { border-radius: 0; box-shadow: none; min-height: 100%; }
.tour-ultimate-discovery-10d #destinations .dest-img-wrap img { height: 100%; min-height: 420px; }
.tour-ultimate-discovery-10d #destinations .ai-inner { padding: 28px 40px 40px; background: var(--bg); border-top: 1px solid var(--border); }
.tour-ultimate-discovery-10d #destinations .stat-strip { padding: 0 0 4px; max-width: none; }
.tour-ultimate-discovery-10d #destinations .ai-inner h3.dest-eyebrow { margin: 28px 0 0; background: none; padding: 0; color: var(--teal-dark); font-size: 13px; }
.tour-ultimate-discovery-10d #destinations .attraction-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }
.tour-ultimate-discovery-10d .attraction-card.ud-attr { padding: 22px 20px; display: block; border-top: 3px solid var(--teal); }
.tour-ultimate-discovery-10d .attraction-card.ud-attr .ud-head { margin-bottom: 12px; }
.tour-ultimate-discovery-10d .attraction-card.ud-attr .ud-head h3 { font-size: 15.5px; }
.tour-ultimate-discovery-10d .attraction-card.ud-attr p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
@media (max-width: 1024px) {
  .tour-ultimate-discovery-10d #destinations .attraction-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .tour-ultimate-discovery-10d #destinations .dest-inner { grid-template-columns: 1fr; direction: ltr; }
  .tour-ultimate-discovery-10d #destinations .dest-img-wrap { order: -1; }
  .tour-ultimate-discovery-10d #destinations .dest-img-wrap img { min-height: 240px; height: 260px; }
  .tour-ultimate-discovery-10d #destinations .dest-text { padding: 28px 22px; }
  .tour-ultimate-discovery-10d #destinations .ai-inner { padding: 22px 18px 28px; }
}
@media (max-width: 640px) {
  .tour-ultimate-discovery-10d #destinations .attraction-grid { grid-template-columns: 1fr; }
}

/* --- Photo gallery: two rows of 1 large + 2 stacked photos --- */
.tour-ultimate-discovery-10d .mosaic-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.tour-ultimate-discovery-10d .mosaic-gallery.reverse { grid-template-columns: 1fr 1.4fr; margin-top: 12px; }
.tour-ultimate-discovery-10d .mosaic-gallery.reverse .mosaic-main { order: 2; }
.tour-ultimate-discovery-10d .mosaic-tile-label { font-size: 12px; padding: 5px 12px; }
@media (max-width: 900px) {
  .tour-ultimate-discovery-10d .mosaic-gallery,
  .tour-ultimate-discovery-10d .mosaic-gallery.reverse { grid-template-columns: 1fr; }
  .tour-ultimate-discovery-10d .mosaic-gallery.reverse .mosaic-main { order: 0; }
  .tour-ultimate-discovery-10d .mosaic-side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 160px; }
}

/* --- CTA banner: boxed to the 1200px page width instead of full bleed --- */
.tour-ultimate-discovery-10d .cta-banner { width: calc(100% - 48px); max-width: var(--max-content, 1200px); margin: 56px auto; border-radius: var(--radius-lg); padding: 56px 32px; box-sizing: border-box; }
@media (max-width: 560px) { .tour-ultimate-discovery-10d .cta-banner { width: calc(100% - 32px); margin: 36px auto; padding: 40px 20px; } }


/* ====================================================================
   SHARED TOUR-PAGE MODULES  (reusable on ANY tour page, no page slug)
   Added from 10-days-seven-churches-of-revelation-tour-with-istanbul-cappadocia.html
   Additive only: nothing above this block was changed.

   HOW TO USE
   A) New, self-contained modules (no body class needed): use the markup
      below anywhere inside a section of a tour page.
   B) "Enhanced components": add class  tour-enhanced  to <body>
      (e.g. <body class="tour-my-slug tour-enhanced">) to switch on the
      upgraded look of components that already existed:
        .site-detail-list/.site-detail   icon + headline + text stop cards
        .itin-places / .day-places       places visited, per day (itinerary)
        .itin-article                    SEO article above the itinerary
        .highlight-card h4 > i           icon + headline on ONE row
        .reviews-grid .review-card       avatar + name + stars on one row, 3-col grid
        .hotel-grid .hotel-card          3-col card grid (h4 may start with an <i>)
        .pf-grid .pf-pill                "best for" pills; .itin-place-img figure
   RULE FOR ALL CARDS: wherever an icon and a headline sit together, keep the
   description at 3+ lines (about 170+ characters in a 3-column card).

   MODULE 1 - Destination Guides  (.dgx-*)   photo-header circuits + place cards
     <nav class="dgx-nav"><a href="#dg-1"><i class="fa-solid fa-landmark-dome"></i> Istanbul · Days 1-3</a>...</nav>
     <article class="dgx-circuit [dgx-bordeaux]" id="dg-1">      (bordeaux = alternate colour)
       <header class="dgx-hero"><img src="..." alt="..." loading="lazy" width="1400" height="800">
         <div class="dgx-shade"></div>
         <div class="dgx-hero-body"><span class="dgx-day"><i class="fa-solid fa-location-dot"></i> Days 1-3 · City</span>
           <h3>Title</h3><p>Intro</p><ul class="dgx-facts"><li><i class="fa-solid fa-check"></i> 2 nights</li></ul></div></header>
       <div class="dgx-places">  (repeat 6x, 3 columns)
         <div class="dgx-place"><span class="dgx-num">01</span>
           <div class="dgx-place-head"><div class="dgx-ico"><i class="fa-solid fa-landmark"></i></div>
             <div><span class="dgx-stop">Day 2</span><h4>Place</h4></div></div>
           <p class="dgx-text">3+ line description</p>
           <p class="dgx-why"><i class="fa-solid fa-circle-check"></i><span>Why it matters</span></p></div></div></article>

   MODULE 2 - Your Route  (.rt-*)   numbered journey line + 3 photo cards
     <div class="rt"><span class="cat-eyebrow">Your route</span><h3 class="subsection-title">..</h3><p class="lead-text">..</p>
       <div class="rt-track">  (5 stops; add rt-fly to the stop BEFORE a flight, otherwise it is a drive)
         <div class="rt-stop rt-fly"><div class="rt-dot">1</div><div><h4>Istanbul</h4><span class="rt-nights">2 nights</span></div>
           <span class="rt-mode"><i class="fa-solid fa-plane"></i> Flight</span></div> ... </div>
       <div class="rt-cards"><article class="rt-card"><div class="rt-card-img"><img ...><span class="rt-card-day">Days 1-3</span></div>
         <div class="rt-card-body"><div class="rt-card-head"><div class="rt-card-ico"><i class="fa-solid fa-landmark-dome"></i></div>
           <div><h4>Title</h4><span class="rt-card-meta">Days 1-3 · 2 nights</span></div></div>
           <p>3+ line text</p><div class="rt-tags"><span>Tag</span></div></div></article> ...</div></div>

   MODULE 3 - Photo Gallery  (.gx-*)   6 photos: 1 large + 5 small (3x3 grid)
     <div class="gx-grid">  (first tile is the large one)
       <div class="gx-tile lightbox-trigger" data-lightbox-index="0" tabindex="0" role="button" aria-label="View photo 1">
         <img src="..." alt="..." loading="lazy" width="1400" height="900"><span class="gx-cap">Caption</span>
         <span class="gx-hint"><i class="fa-solid fa-expand"></i></span></div> ... </div>
     (keep window.TOUR_GALLERY_PHOTOS in sync with the tiles for the lightbox)

   MODULE 4 - Icon + headline cards  (.pk-*)   4 per row; e.g. What to pack, Best time
     <div class="pk-grid"><div class="pk-card [pk-best]"><div class="pk-head"><div class="pk-ico"><i class="fa-solid fa-sun"></i></div>
       <h4>Headline</h4></div><p>3+ line description</p></div> ...</div>      (8 cards = 2 rows of 4)

   MODULE 5 - Boxed CTA banner  (.cta-wrap)   closing banner at the 1200px width
     <div class="cta-wrap"><div class="ke-inner"><section class="cta-banner">...existing cta markup...</section></div></div>
   ==================================================================== */

/* ---- Enhanced-component foundations (body.tour-enhanced) ---- */
.tour-enhanced .pf-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tour-enhanced .pf-pill { background: var(--teal-pale); border: 1px solid var(--border); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; }
.tour-enhanced .pf-pill i { color: var(--gold); }
.tour-enhanced .itin-place-img { width: 100%; height: 230px; object-fit: cover; border-radius: var(--radius); margin: 14px 0 16px; }
.tour-enhanced .itin-place-credit { display: block; font-size: 11px; color: var(--muted); opacity: .7; margin: -10px 0 16px; }
.tour-enhanced .hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.tour-enhanced .hotel-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.tour-enhanced .hotel-card h4 { font-family: var(--ff-head); font-size: 16px; color: var(--teal-dark); margin-bottom: 6px; }
.tour-enhanced .hotel-card span { font-size: 13px; color: var(--muted); }
@media (max-width: 800px) { .tour-enhanced .hotel-grid { grid-template-columns: 1fr; } }

/* ---- Enhanced-component overrides (body.tour-enhanced) ---- */
/* Itinerary: stops, chips, article */
.tour-enhanced .site-detail-list{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.tour-enhanced .site-detail{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:var(--radius)}
.tour-enhanced .site-detail-icon{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tour-enhanced .site-detail-text h4{font-family:var(--ff-head);font-size:15.5px;font-weight:700;color:var(--text);margin:0 0 4px;line-height:1.35}
.tour-enhanced .site-detail-text p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
.tour-enhanced .itin-day-body p.itin-lead,.tour-enhanced .itin-day-body p.itin-close{font-size:15px;color:var(--muted);line-height:1.8}
.tour-enhanced .itin-day-meta .itin-places{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--teal-dark);font-weight:600}
.tour-enhanced .day-places{margin:14px 0 6px;padding:16px 18px;background:var(--teal-pale);border:1px solid var(--border);border-radius:var(--radius)}
.tour-enhanced .day-places h4{font-size:14px;font-weight:700;color:var(--teal-dark);margin:0}
.tour-enhanced .day-places .pf-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tour-enhanced .itin-article h3{font-family:var(--ff-head);font-size:1.15rem;color:var(--teal-dark);margin:22px 0 8px}
/* Icon + headline on one row inside cards */
.tour-enhanced .highlight-card h4{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;margin-bottom:10px}
.tour-enhanced .highlight-card h4 i{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin:0}
/* Route: 3 boxes in one row */
/* Guest reviews: grid, avatar + name + stars on one line */
.tour-enhanced .reviews-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:720px){.tour-enhanced .reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tour-enhanced .reviews-grid{grid-template-columns:repeat(3,1fr)}}
.tour-enhanced .review-card{display:flex;flex-direction:column}
.tour-enhanced .rc-head{display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
.tour-enhanced .rc-avatar{width:44px;height:44px;font-size:17px}
.tour-enhanced .rc-meta{flex:1;min-width:0}
.tour-enhanced .rc-meta h4{margin:0 0 2px;overflow-wrap:anywhere}
.tour-enhanced .rc-stars{margin:0 0 0 auto;white-space:nowrap;font-size:13px;letter-spacing:1px;flex-shrink:0}
/* Destination guide */
@media (max-width:560px){.tour-enhanced .site-detail{flex-direction:column}}
/* CTA banner: boxed to the 1200px page width instead of full bleed */
/* Payment terms / hotel cards: icon + headline on one row */
.tour-enhanced .hotel-card h4{display:flex;align-items:center;gap:10px;line-height:1.35}
.tour-enhanced .hotel-card span{display:block;line-height:1.75}
/* Keep Exploring: 4 cards per row on desktop */

/* ---------- Destination Guides ---------- */
.dgx-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.dgx-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--border);border-radius:999px;background:var(--white);font-size:13px;font-weight:600;color:var(--teal-dark);transition:var(--trans)}
.dgx-nav a i{color:var(--gold)}
.dgx-nav a:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.dgx-circuit{margin:0 0 40px;border-radius:var(--radius-xl);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-md);scroll-margin-top:150px}
.dgx-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;color:#fff;background:var(--teal-dark)}
.dgx-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dgx-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,38,36,.94) 0%,rgba(6,38,36,.66) 48%,rgba(6,38,36,.14) 100%)}
.dgx-bordeaux .dgx-shade{background:linear-gradient(to top,rgba(52,18,22,.95) 0%,rgba(52,18,22,.66) 48%,rgba(52,18,22,.14) 100%)}
.dgx-hero-body{position:relative;padding:40px;max-width:780px}
.dgx-day{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#3a2a05;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.dgx-hero h3{font-family:var(--ff-head);font-size:clamp(24px,3vw,34px);line-height:1.2;margin:0 0 12px;color:#fff}
.dgx-hero p{font-size:15px;line-height:1.8;opacity:.95;margin:0 0 18px;color:#fff}
.dgx-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.dgx-facts li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:500}
.dgx-facts i{color:var(--gold)}
.dgx-places{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px}
.dgx-place{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-top:4px solid var(--teal);border-radius:var(--radius-lg);padding:22px 22px 0;overflow:hidden}
.dgx-bordeaux .dgx-place{border-top-color:var(--bordeaux)}
.dgx-num{position:absolute;top:12px;right:18px;font-family:var(--ff-head);font-size:34px;font-weight:700;line-height:1;color:var(--teal-light)}
.dgx-bordeaux .dgx-num{color:var(--bordeaux-light)}
.dgx-place-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-right:44px}
.dgx-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.dgx-bordeaux .dgx-ico{background:var(--bordeaux)}
.dgx-stop{display:block;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--teal-dark);margin-bottom:2px}
.dgx-bordeaux .dgx-stop{color:var(--bordeaux)}
.dgx-place h4{font-family:var(--ff-head);font-size:17px;line-height:1.3;margin:0}
.dgx-place p.dgx-text{flex:1;font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 18px}
.dgx-place p.dgx-why{display:flex;align-items:center;gap:8px;margin:0 -22px;padding:12px 22px;background:var(--teal-light);color:var(--teal-dark);font-size:13px;font-weight:600;line-height:1.4}
.dgx-bordeaux .dgx-why{background:var(--bordeaux-light);color:var(--bordeaux)}
@media (max-width:980px){.dgx-places{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dgx-places{grid-template-columns:1fr;padding:18px}.dgx-hero{min-height:340px}.dgx-hero-body{padding:26px 22px}}

/* ---------- Your route ---------- */
.rt{margin-top:36px;padding:34px 34px 38px;background:linear-gradient(180deg,var(--teal-pale),var(--white));border:1px solid var(--border);border-radius:var(--radius-xl)}
.rt .lead-text{margin-bottom:0}
.rt-track{display:grid;grid-template-columns:repeat(5,1fr);margin:34px 0 38px}
.rt-stop{position:relative;text-align:center;padding:0 6px}
.rt-stop::after{content:"";position:absolute;top:27px;left:calc(50% + 34px);right:calc(-50% + 34px);border-top:3px solid var(--teal)}
.rt-stop.rt-fly::after{border-top:3px dashed var(--gold)}
.rt-stop:last-child::after{display:none}
.rt-dot{position:relative;z-index:1;width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:20px;font-weight:700;box-shadow:0 0 0 6px var(--teal-light)}
.rt-stop h4{font-family:var(--ff-head);font-size:15px;line-height:1.3;margin:0 0 6px}
.rt-nights{display:inline-block;font-size:12px;font-weight:600;color:var(--teal-dark);background:var(--teal-light);padding:3px 11px;border-radius:999px}
.rt-mode{position:absolute;z-index:2;top:12px;left:100%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:var(--white);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.rt-fly .rt-mode{border-color:var(--gold);color:#8a6a14}
.rt-stop:last-child .rt-mode{display:none}
.rt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rt-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.rt-card-img{position:relative;height:170px;background:var(--teal-dark)}
.rt-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.rt-card-day{position:absolute;left:14px;top:14px;background:var(--gold);color:#3a2a05;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.rt-card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.rt-card-head{display:flex;align-items:center;gap:12px}
.rt-card-ico{flex:none;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.rt-card h4{font-family:var(--ff-head);font-size:17px;line-height:1.3;margin:0}
.rt-card-meta{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rt-card p{font-size:14px;line-height:1.75;color:var(--muted);margin:0}
.rt-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.rt-tags span{font-size:11.5px;font-weight:600;color:var(--teal-dark);background:var(--teal-light);padding:4px 10px;border-radius:999px}
@media (max-width:980px){.rt-cards{grid-template-columns:1fr}}
@media (max-width:760px){.rt{padding:24px 18px}.rt-track{grid-template-columns:1fr;gap:6px}.rt-stop{display:flex;align-items:center;gap:14px;text-align:left;padding:8px 0}.rt-stop::after,.rt-mode{display:none}.rt-dot{margin:0;flex:none}.rt-stop h4{margin:0 0 4px}}

/* ---------- Photo gallery (6 photos) ---------- */
.gx-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:14px}
.gx-tile{position:relative;overflow:hidden;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-sm);background:var(--teal-dark)}
.gx-tile:first-child{grid-column:1 / span 2;grid-row:1 / span 2}
.gx-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gx-tile:hover img{transform:scale(1.05)}
.gx-cap{position:absolute;left:14px;bottom:14px;background:rgba(10,30,28,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600}
.gx-tile:first-child .gx-cap{font-family:var(--ff-head);font-size:19px;padding:12px 18px}
.gx-hint{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:13px}
@media (max-width:760px){.gx-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.gx-tile:first-child{grid-column:1 / span 2;grid-row:auto}}

/* ---------- What to pack / best time (4 per row, icon + headline on one line) ---------- */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 34px}
.pk-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.pk-card.pk-best{border-top:3px solid var(--gold)}
.pk-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pk-ico{flex:none;width:40px;height:40px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:16px}
.pk-card h4{font-family:var(--ff-head);font-size:14.5px;line-height:1.3;margin:0}
.pk-card p{font-size:13.5px;line-height:1.7;color:var(--muted);margin:0}
@media (max-width:1000px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pk-grid{grid-template-columns:1fr}}

/* ---------- CTA banner boxed to the 1200px page width ---------- */
.cta-wrap{padding:0 24px;margin:56px 0}
.cta-wrap .ke-inner .cta-banner{border-radius:var(--radius-xl)}


/* ====================================================================
   SHARED ADDITIONS  (reusable on ANY tour page, no page slug)
   Added from 4-days-highlights-of-istanbul-tour.html
   Additive only: nothing above this block was changed.
   All rules need  <body class="... tour-enhanced">  except .dgx-center.

   1) SMART TIPS / ai-card  - icon + headline on ONE row, text below.
      Uses the EXISTING markup, no wrapper needed:
        <div class="ai-card"><div class="ai-card-icon"><i class="fa-solid fa-compass"></i></div>
          <h4>Headline</h4><p>3+ line description</p></div>

   2) GUEST REVIEWS - headline inside the review text.
      Uses the existing .reviews-grid / .review-card / .rc-head markup, plus:
        <p class="rc-text"><strong class="rc-title">Review headline</strong>"Review text"</p>

   3) DESTINATION GUIDES with fewer than 6 places - add dgx-center to the
      .dgx-places container so a short last row is centred instead of left-aligned:
        <div class="dgx-places dgx-center"> ... 4 or 5 .dgx-place cards ... </div>

   4) Itinerary day - places visited (existing names, how they are used):
        in .itin-day-meta :  <span class="itin-places">Place A · Place B · Place C · Place D</span>
        in .itin-day-body :  <div class="day-places"><h4><i class="fa-solid fa-location-dot"></i> Places visited today (4)</h4>
                               <div class="pf-grid"><span class="pf-pill"><i class="fa-solid fa-location-dot"></i>Place A</span>...</div></div>
      Every full sightseeing day should list at least 4 places.
   5) SEO article blocks (overview and itinerary): <div class="rich-text text-justify itin-article"> with <h3> per topic.
   ==================================================================== */

/* 1) Smart tips cards: icon beside headline */
.tour-enhanced .ai-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }
.tour-enhanced .ai-card-icon { margin: 0; }
.tour-enhanced .ai-card h3,
.tour-enhanced .ai-card h4 { margin: 0; line-height: 1.35; }
.tour-enhanced .ai-card p { grid-column: 1 / -1; margin: 0; font-size: 13.5px; }

/* 2) Guest reviews: roomier card, headline + longer text */
.tour-enhanced .review-card { padding: 24px; }
.tour-enhanced .rc-head { margin-bottom: 14px; }
.tour-enhanced .rc-text { font-size: 14px; line-height: 1.75; }
.tour-enhanced .rc-title { display: block; font-family: var(--ff-head); font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: 8px; }

/* 3) Destination guides: centre a short last row (4 or 5 places instead of 6) */
.dgx-places.dgx-center { display: flex; flex-wrap: wrap; justify-content: center; }
.dgx-places.dgx-center .dgx-place { flex: 0 1 calc((100% - 40px) / 3); }
@media (max-width: 980px) { .dgx-places.dgx-center .dgx-place { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .dgx-places.dgx-center .dgx-place { flex-basis: 100%; } }

/* ====================================================================
   SHARED ADDITIONS  (reusable on ANY tour page, no page slug)
   Added from 5-days-seven-churches-of-revelation-tour.html
   Additive only: nothing above this block was changed.
   This page uses  <body class="tour-seven-churches-5d tour-enhanced">  and the
   EXISTING modules above. No inline <style> is needed. How each part is built:

   1) OVERVIEW + ITINERARY articles   <div class="rich-text text-justify itin-article"> with one <h3> per topic
      (about 500+ words each, keywords in the headings and first sentences).
   2) ITINERARY DAYS   each full day lists 4+ places: <span class="itin-places"> in .itin-day-meta,
      <div class="day-places"> with .pf-grid pills, then one .site-detail per place (numbered h4).
   3) SEVEN CHURCHES AT A GLANCE   existing .pk-grid / .pk-card:
        <div class="pk-card [pk-best]"><div class="pk-head"><div class="pk-ico">1</div><h4>Ephesus</h4></div>
          <p><strong>Rev 2:1-7 · Selcuk · Day 4.</strong> 3+ line text</p></div>      (pk-best = gold top, use for a bonus card)
   4) DESTINATION GUIDES   existing .dgx-nav + .dgx-circuit (+ .dgx-bordeaux on alternate circuits), 6 places each.
   5) YOUR ROUTE with 4 stops   existing .rt module; add  rt-4  to .rt-track (default is 5 stops):
        <div class="rt-track rt-4"> ...4 x .rt-stop... </div>
   6) GUEST REVIEWS   existing .reviews-grid / .review-card; review title in  <div class="rc-meta"><h4>Title</h4>
      <span>Name · Month Year · TripAdvisor</span></div>  so avatar, title and stars share ONE row.
      Intro = <p class="lead-text text-justify">; "what guests praise" = <div class="pf-grid"> of .pf-pill.
   7) CLOSING CTA   existing .cta-wrap > .ke-inner > .cta-banner (boxed to 1200px).
   ==================================================================== */

/* 5) Your route with 4 stops instead of 5 */
.rt-track.rt-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .rt-track.rt-4 { grid-template-columns: 1fr; } }

/* Page-specific: 5 Days Seven Churches of Revelation Tour (hero image + 1200px content width) */
.tour-seven-churches-5d #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Ephesus%20-%20Celsus%20Library.jpg?width=1600"); }
.tour-seven-churches-5d .tour-main { max-width: 1200px; margin: 0 auto; }

/* ============================================================
   SHARED TOUR-PAGE COMPONENTS (global, not page-scoped)
   Generalized from 10-day-highlights-of-turkey-tour.html.
   Rules are unscoped and low-specificity, so every earlier
   page-scoped override above (body.tour-xxx ...) still wins on
   its own page. Nothing above this block was changed.

   Where a component already existed under another name in this
   file, that name is reused (ud-*, rp-*, site-detail-*,
   highlight-card, ai-card, reviews-grid, cta-banner) and its
   page-scoped rules are now available globally.

   OPT-IN MODIFIERS (so older pages keep their current look):
     .icon-inline   on .tour-highlights or .ai-grid
     .is-grid       on .reviews-grid
     .cta-contained on .cta-banner
     .rich-text--article on .rich-text
   ============================================================ */

/* --- 1. Icon + heading cards: .ud-grid > .ud-card > .ud-head ---------
   <div class="ud-grid cols-3|cols-4">
     <div class="ud-card">                      (or <a class="ud-card" href="#id">)
       <div class="ud-head"><span class="ud-ico"><i class="fa-solid fa-..."></i></span>
         <h3>Title<small>Optional meta line</small></h3></div>
       <p>Description</p>
       <span class="ke-card-link">Optional link text <i class="fa-solid fa-arrow-down"></i></span>
     </div></div>                                                         */
.ud-grid { display: grid; gap: 20px; margin-top: 24px; align-items: stretch; }
.ud-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ud-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ud-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
a.ud-card { text-decoration: none; color: inherit; transition: var(--trans); }
a.ud-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ud-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ud-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.ud-ico i { color: inherit; margin: 0; }
.ud-head h3, .ud-head h4 { margin: 0; font-family: var(--ff-head); font-size: 17px; line-height: 1.3; color: var(--text); text-transform: none; letter-spacing: 0; }
.ud-head small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--teal-dark); }
.ud-card > p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
.ud-card .ke-card-link { margin-top: auto; padding-top: 14px; }
@media (max-width: 1024px) { .ud-grid.cols-3, .ud-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ud-grid.cols-3, .ud-grid.cols-4 { grid-template-columns: 1fr; } }

/* --- 2. Numbered route planner (Your Route) ---------------------------
   <div class="route-planner">
     <span class="cat-eyebrow">Your route</span>
     <h3 class="subsection-title">...</h3><p class="lead-text">...</p>
     <div class="pf-grid rp-chips"><span class="pf-pill"><i ...></i> Chip</span>...</div>
     <ol class="rp-grid">  6 items = 3 columns x 2 rows
       <li class="rp-card">
         <div class="ud-head"><span class="rp-num">1</span>
           <span class="ud-ico"><i ...></i></span><h3>Stop<small>Days 1-2</small></h3></div>
         <p>Key sights</p>
         <div class="rp-next"><i class="fa-solid fa-bed"></i> 2 nights in Istanbul</div>
       </li></ol></div>                                                     */
.route-planner { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px 34px; margin-top: 36px; }
.route-planner .subsection-title { margin: 4px 0 10px; }
.route-planner .lead-text { margin-bottom: 18px; }
.rp-chips { justify-content: flex-start; margin-bottom: 6px; }
.rp-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rp-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 22px 22px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.rp-card > p { margin: 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.rp-num { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-next { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.rp-next i { color: var(--gold); }
@media (max-width: 1024px) { .rp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rp-grid { grid-template-columns: 1fr; } .route-planner { padding: 26px 16px; } }

/* --- 3. Attraction card with icon beside the heading ------------------
   <article class="attraction-card ud-attr">
     <div class="ud-head"><span class="ud-ico"><i ...></i></span><h3>Place<small>Day 2</small></h3></div>
     <p>Description</p>
     <div class="attraction-why"><p>Why it matters</p><ul><li>...</li></ul></div></article>   */
.attraction-card.ud-attr { padding: 22px 20px; display: flex; flex-direction: column; border-top: 3px solid var(--teal); }
.attraction-card.ud-attr .ud-head { margin-bottom: 12px; }
.attraction-card.ud-attr .ud-head h3 { font-size: 15.5px; }
.attraction-card.ud-attr > p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.attraction-card.ud-attr .attraction-why { margin-top: auto; }

/* --- 4. Places visited today (itinerary day body) ---------------------
   <h4 class="day-places-title"><i class="fa-solid fa-location-dot"></i> 5 places you will visit today</h4>
   <div class="site-detail-list">
     <div class="site-detail"><div class="site-detail-icon"><i ...></i></div>
       <div class="site-detail-text"><h4>Place</h4><p>One-line description</p></div></div> ...</div>
   Default is a 2-column grid; pages that scope .site-detail-list as a
   single column keep their own layout.                                    */
.day-places-title { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark); margin: 18px 0 10px; }
.site-detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 20px; }
.site-detail { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--radius); }
.site-detail-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.site-detail-text h4 { font-family: var(--ff-head); font-size: 14.5px; font-weight: 700; color: var(--text); margin: 0 0 3px; line-height: 1.3; }
.site-detail-text p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
@media (max-width: 700px) { .site-detail-list { grid-template-columns: 1fr; } }

/* --- 5. Icon beside heading in existing cards (opt-in: .icon-inline) ---
   <div class="tour-highlights icon-inline">
     <div class="highlight-card"><h4><i class="fa-solid fa-..."></i> Title</h4><p>...</p></div></div>
   <div class="ai-grid icon-inline">
     <div class="ai-card"><div class="ai-card-icon"><i ...></i></div><h4>Title</h4><p>...</p></div></div> */
.icon-inline .highlight-card h4 { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; margin-bottom: 10px; }
.icon-inline .highlight-card h4 i { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; margin: 0; }
.icon-inline .ai-card { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }
.icon-inline .ai-card-icon { margin: 0; }
.icon-inline .ai-card h4 { margin: 0; line-height: 1.35; }
.icon-inline .ai-card p { grid-column: 1 / -1; margin: 0; }

/* --- 6. Guest reviews as a grid (opt-in: .is-grid) ----------------------
   <div class="reviews-grid is-grid"><article class="review-card"><div class="rc-head">
     <div class="rc-avatar">A</div><div class="rc-meta"><h4>Name</h4><span>Date</span></div>
     <div class="rc-stars">★★★★★</div></div><p class="rc-text">...</p></article> ...</div>
   Avatar, name and stars always stay on one row.                          */
.reviews-grid.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.reviews-grid.is-grid .review-card { display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow-sm); }
.reviews-grid.is-grid .rc-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.reviews-grid.is-grid .rc-avatar { width: 44px; height: 44px; font-size: 17px; }
.reviews-grid.is-grid .rc-meta { flex: 1; min-width: 0; }
.reviews-grid.is-grid .rc-meta h4 { margin: 0 0 2px; overflow-wrap: anywhere; }
.reviews-grid.is-grid .rc-stars { margin: 0 0 0 auto; white-space: nowrap; font-size: 13px; letter-spacing: 1px; flex-shrink: 0; }
.reviews-grid.is-grid .rc-text { font-size: 14.5px; }
@media (max-width: 560px) { .reviews-grid.is-grid { grid-template-columns: 1fr; } }

/* --- 7. Contained CTA banner, max 1200px (opt-in: .cta-contained) -------
   <section class="cta-banner cta-contained"><div class="cta-content">...</div></section> */
.cta-banner.cta-contained { width: calc(100% - 48px); max-width: 1200px; margin: 56px auto; border-radius: var(--radius-lg); padding: 56px 32px; box-sizing: border-box; }
@media (max-width: 560px) { .cta-banner.cta-contained { width: calc(100% - 32px); margin: 36px auto; padding: 40px 20px; } }

/* --- 8. Destination guide day shortcuts (new) ---------------------------
   <div class="dest-chips"><a class="dest-chip" href="#itinerary"><b>Day 2</b> Old City tour</a>...</div>
   Works on light and on .dest-section.alt (dark) backgrounds.             */
.dest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dest-chip { font-size: 12.5px; text-decoration: none; padding: 6px 12px; border-radius: 50px; border: 1px solid var(--teal); color: var(--teal-dark); background: var(--white); }
.dest-chip b { color: var(--teal); }
.dest-section.alt .dest-chip { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.dest-section.alt .dest-chip b { color: var(--gold); }

/* --- 9. Long keyword article text inside .rich-text (opt-in) ------------ */
.rich-text--article h3.subsection-title { margin-top: 24px; }

/* ====================================================================
   SHARED LISTING-PAGE COMPONENTS  (global, reusable on ANY page)
   Generalised from alternative-package-tours.html (Turkey Tours listing).
   Additive only. Nothing above this block was changed.
   RULE FOR FUTURE PAGES: reuse these classes - do NOT add inline <style>.

   Already existed under other names and are REUSED (not duplicated):
     seasons ........ .season-grid > .season-card (i + h4 + p)
     compare table .. .price-table-wrap > .price-table (td.tier-name, td.amount)
     numbered steps . ol.rp-grid > li.rp-card > .ud-head (.rp-num + h3) + p
     trust strip .... .trust-bar > .trust-inner > .trust-item (+ .trust-sep)
     review grid .... .reviews-grid.is-grid
     CTA banner ..... .cta-banner.cta-contained
     booking block .. .booking-section
     filter chips / search / tour cards .... existing .price-card family

   NEW (documented below):
     1) .page-1200 ........... body class: 1200px standard page rails
     2) .is-contained ........ 1200px rails for any full-width section
     3) .hero-finder ......... hero search/sort panel
     4) .intro-split + .glance-card ... text + "At a Glance" sidebar
     5) .theme-grid / .theme-tile ..... coloured browse-by-theme tiles
     6) .pc-meta / .pc-chip .. info chips inside .price-card
     7) photo fallback ....... gradient + icon behind .dest-img / .pc-media
     8) .rp-cols-4, .price-table.is-wide, .reviews-pills (small modifiers)
   ==================================================================== */

/* 1) 1200px standard page. Usage: <body class="... page-1200"> */
.page-1200 .wrapper,
.page-1200 .faq-inner { max-width: var(--max-content); }
.page-1200 .section-block { padding: 72px 0 0; }

/* 2) Contained (1200px) sections. The base rules for .why-inner / .ai-inner are
      forced to 100% wide by the site-wide "edge to edge" block above, so a section
      that must follow the 1200px standard opts in with .is-contained:
        <section class="why-section is-contained"><div class="why-inner">...
        <section class="ai-section is-contained"><div class="ai-inner">...
        <section class="cta-banner cta-contained">   (already existed)
        <section class="booking-section is-contained">                           */
.is-contained { max-width: var(--max-content); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.why-section.is-contained,
.ai-section.is-contained { width: calc(100% - 48px); margin: 72px auto 0; border-radius: var(--radius-lg); padding: 56px 0; }
.why-section.is-contained .why-inner,
.ai-section.is-contained .ai-inner { max-width: 100%; padding: 0 32px; }
.booking-section.is-contained { padding: 72px 24px; }
@media (max-width: 560px) {
  .why-section.is-contained, .ai-section.is-contained { width: calc(100% - 32px); margin-top: 52px; padding: 40px 0; }
  .why-section.is-contained .why-inner, .ai-section.is-contained .ai-inner { padding: 0 20px; }
}

/* 3) Hero finder:  <form class="hero-finder"><div class="hf-field"><label>..</label><select>..</select></div>
                    ... <button class="hf-btn">Find Tours</button></form>  (inside #hero .hero-inner) */
.hero-finder { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; gap: 12px; align-items: end; max-width: 900px; margin: 30px auto 8px; padding: 16px; background: rgba(255,255,255,.96); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.28); text-align: left; }
.hf-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-dark); margin-bottom: 6px; }
.hf-field label i { margin-right: 5px; color: var(--gold); }
.hf-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: 500 14px var(--ff-body); color: var(--text); cursor: pointer; }
.hf-field select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.hf-btn { background: var(--teal); color: #fff; border: 0; border-radius: 10px; padding: 13px 24px; font: 700 14px var(--ff-body); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; transition: var(--trans); white-space: nowrap; }
.hf-btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.hero-finder + .hero-actions { margin-top: 22px; }
@media (max-width: 820px) { .hero-finder { grid-template-columns: 1fr 1fr; } .hf-btn { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hero-finder { grid-template-columns: 1fr; } }

/* 4) Intro + sidebar:
      <div class="intro-split"><div class="rich-text">...</div>
        <aside class="glance-card"><h3>At a Glance</h3><ul><li><i class="fa-solid fa-tag"></i><span>..</span></li></ul>
        <a class="glance-btn" href="#">CTA</a></aside></div>                       */
.intro-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.intro-split .rich-text p { font-size: 15.5px; line-height: 1.9; margin-bottom: 18px; }
.glance-card { background: linear-gradient(160deg, var(--teal-dark), #0a4f4c); color: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); position: sticky; top: 140px; }
.glance-card h3 { font-family: var(--ff-head); font-size: 20px; color: var(--gold); margin-bottom: 16px; }
.glance-card ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 13px; }
.glance-card li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; align-items: flex-start; }
.glance-card li i { color: var(--gold); margin-top: 3px; width: 18px; text-align: center; }
.glance-btn { display: block; text-align: center; background: var(--gold); color: #3a2b05; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 50px; transition: var(--trans); }
.glance-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
@media (max-width: 1100px) { .intro-split { grid-template-columns: 1fr; } .glance-card { position: static; } }

/* 5) Browse-by-theme tiles:
      <div class="theme-grid"><button class="theme-tile theme-teal" type="button">
        <span class="theme-ic"><i class="fa-solid fa-city"></i></span><span class="theme-title">Istanbul</span>
        <span class="theme-desc">Short line</span><span class="theme-meta"><b>21 tours</b> · from $305</span></button>...</div>
      Colours: theme-teal | theme-copper | theme-sky | theme-bordeaux | theme-navy | theme-gold */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.theme-tile { position: relative; text-align: left; border: 0; cursor: pointer; color: #fff; border-radius: var(--radius-lg); padding: 26px 24px 22px; min-height: 190px; display: flex; flex-direction: column; overflow: hidden; font-family: var(--ff-body); transition: transform .25s, box-shadow .25s; box-shadow: var(--shadow-sm); }
.theme-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.09); }
.theme-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.theme-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: auto; }
.theme-title { font-family: var(--ff-head); font-size: 21px; font-weight: 700; margin-top: 18px; }
.theme-desc { font-size: 13px; opacity: .88; margin: 4px 0 12px; }
.theme-meta { font-size: 12.5px; color: var(--gold); letter-spacing: .02em; }
.theme-meta b { color: #fff; }
.theme-teal { background: linear-gradient(135deg, #0a6b67, #0E918C); }
.theme-copper { background: linear-gradient(135deg, #8a4b2a, #c9824a); }
.theme-sky { background: linear-gradient(135deg, #0b5d84, #14a0c8); }
.theme-bordeaux { background: linear-gradient(135deg, #4e1f24, #8B1A2B); }
.theme-navy { background: linear-gradient(135deg, #243b6b, #4a6fb5); }
.theme-gold { background: linear-gradient(135deg, #9a7418, #D4A843); }
.theme-gold .theme-meta { color: #fff; }
@media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .theme-grid { grid-template-columns: 1fr; } }

/* 6) Info chips on tour cards: <div class="pc-meta"><span class="pc-chip"><i ..></i> Text</span>
      <span class="pc-chip gold">..</span></div>  (place before .pc-price-row)         */
.pc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.pc-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 50px; background: var(--teal-light); color: var(--teal-dark); white-space: nowrap; }
.pc-chip i { margin-right: 4px; font-size: 10px; }
.pc-chip.gold { background: #fbf2d9; color: #7a5a0a; }
.price-card[hidden] { display: none !important; }

/* 7) Photo fallback: if an image is missing/blocked, a coloured gradient + icon shows
      instead of a broken-image box. Photos sit on top (z-index) when they load.      */
.dest-img, .pc-media { background: linear-gradient(135deg, #0a6b67, #0E918C); }
.price-card:nth-child(4n+2) .pc-media { background: linear-gradient(135deg, #4e1f24, #8B1A2B); }
.price-card:nth-child(4n+3) .pc-media { background: linear-gradient(135deg, #0b5d84, #14a0c8); }
.price-card:nth-child(4n+4) .pc-media { background: linear-gradient(135deg, #8a4b2a, #c9824a); }
.dest-img::before, .pc-media::before { content: "\f5a0"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: rgba(255,255,255,.28); }
.dest-img img, .pc-media img { position: relative; z-index: 1; font-size: 0; color: transparent; }
.dest-tag, .pc-tag, .pc-loc { z-index: 2; }

/* 8) Small modifiers on existing components */
.rp-grid.rp-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .rp-grid.rp-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rp-grid.rp-cols-4 { grid-template-columns: 1fr; } }
.price-table.is-wide { min-width: 720px; }
.price-table td.tier-name a { color: var(--teal-dark); font-weight: 700; }
.price-table td.tier-name a:hover { text-decoration: underline; }
.price-table td.amount { white-space: nowrap; }
.reviews-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }

/* ====================================================================
   SHARED ADDITIONS  (reusable on ANY tour page, no page slug)
   Added from 5-days-istanbul-bursa-muslim-tour-istanbul-bursa.html
   Additive only: nothing above this block was changed.
   This page uses  <body class="tour-istanbul-bursa-5d tour-enhanced">  and the
   EXISTING modules above. No inline <style> is needed. What it reuses:

   - Destination guides ......... .dgx-nav + .dgx-circuit (+ .dgx-bordeaux on the 2nd circuit);
                                  9 places and 6 places = full rows; .local-tip-box as the LAST child.
   - Your route ................. .rt > .rt-track.rt-3 + .rt-cards (3 photo cards).
   - Guest reviews .............. .reviews-grid / .review-card; headline in <strong class="rc-title">;
                                  intro = <p class="lead-text text-justify">; praise chips = <div class="pf-grid">.
   - Smart tips / highlights .... .ai-card, .highlight-card h4 > i  (icon beside headline, via tour-enhanced)
   - Itinerary days ............. .itin-places, .day-places, .site-detail-list, .itin-article
   - Closing CTA ................ .cta-wrap > .ke-inner > .cta-banner (boxed to 1200px)

   NEW in this block
   1) YOUR ROUTE with 3 stops: add  rt-3  to .rt-track (default is 5 stops, rt-4 is 4).
   2) DESTINATION STATS ROW  (.dgx-stats)  4 big numbers above .dgx-nav
        <div class="dgx-stats"><div class="dgx-stat"><strong>15</strong><span>Places described</span></div> ... x4</div>
      (these two rule sets were in the previous master and are re-added because this page uses them)
   3) LOCAL TIP INSIDE A GUIDE: put the existing .local-tip-box as the LAST child of .dgx-circuit
      (after .dgx-places); it is inset to match the place cards automatically.
   4) PAGE-SPECIFIC HERO IMAGE + 1200px CONTENT WIDTH: copy the two-line pattern at the bottom of this
      block for each new page (same convention as .tour-seven-churches-5d above).
   ==================================================================== */

/* 1) Your route with 3 stops */
.rt-track.rt-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .rt-track.rt-3 { grid-template-columns: 1fr; } }

/* 2) Destination stats row */
.dgx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px}
.dgx-stat{background:var(--teal-dark);color:#fff;border-radius:var(--radius);padding:18px;text-align:center}
.dgx-stat strong{display:block;font-family:var(--ff-head);font-size:30px;line-height:1;color:var(--gold);margin-bottom:6px}
.dgx-stat span{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
@media (max-width:700px){.dgx-stats{grid-template-columns:repeat(2,1fr)}}

/* 3) Local tip as the last block of a destination guide */
.dgx-circuit .local-tip-box{margin:0 28px 28px}
@media (max-width:640px){.dgx-circuit .local-tip-box{margin:0 18px 18px}}

/* 4) Page-specific: 5 Days Istanbul & Bursa Muslim Tour (hero image + 1200px content width) */
.tour-istanbul-bursa-5d #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/SultanAhmetMosqueCourtyard.jpg?width=1600"); }
.tour-istanbul-bursa-5d .tour-main { max-width: 1200px; margin: 0 auto; }

/* ============================================================
   SHARED TOUR-PAGE COMPONENTS  (added for the Daily Cappadocia
   tour page and written for reuse on ANY tour page)

   Every rule in this block is OPT-IN: it only applies to the new
   classes named below, so no existing page changes unless its HTML
   uses them. Nothing here is scoped to a single page's <body> class.
   Do NOT write inline <style> blocks for these patterns; reuse the
   classes. Existing components are reused wherever they already
   existed (.policy-notice, .local-tip-box, .hotel-info-box,
   .season-card, .ke-grid, .rs-score, .cta-banner, .mosaic-gallery).

   Standard tour-page <body> classes (copy from referance.html):
   page-vip-travel tour-9day tour-cappadocia-pamukkale-8day tour-ottoman-3capitals

   Contents
   1. .card-head / .card-head-icon      icon + heading side by side
   2. .season-card--left                left-aligned season card
   3. .ke-grid--3                       3-column Keep Exploring grid
   4. .hotel-info-box--cards            2 x 2 info cards (max 1200px)
   5. .policy-notice--titled            notice / tip with a heading
      .local-tip-box--titled            (+ .callout-body)
   6. .rs-score--inline                 score and stars in one row
   7. .cta-banner--boxed                CTA banner at the 1200px width
   8. .mosaic-gallery--six              gallery: 1 large + 5 tiles
   9. .route-journey                    flight strip + numbered stops
   ============================================================ */

/* ------------------------------------------------------------
   1. ICON + HEADING SIDE BY SIDE
   Use inside any card or box; the description paragraph goes
   AFTER the .card-head, and should run to at least 3 lines.

   <div class="highlight-card">
     <div class="card-head">
       <span class="card-head-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></span>
       <h4>Heading</h4>
     </div>
     <p>Description...</p>
   </div>

   The icon slot also accepts the existing icon blocks, which are
   resized to fit the row: .ai-card-icon, .place-media (circle) and
   .ke-card-img (rounded square).
   ------------------------------------------------------------ */
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h3, .card-head h4 { margin: 0; }
.card-head-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-light); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.card-head-icon i { margin: 0; font-size: inherit; color: inherit; display: inline-block; }
.card-head .ai-card-icon { flex: none; margin: 0; }
.card-head .place-media { height: 46px; width: 46px; flex: none; border-radius: 50%; font-size: 18px; }
.card-head .ke-card-img { height: 48px; width: 48px; flex: none; border-radius: 12px; }
.card-head .ke-card-img i { font-size: 20px; }
.highlight-card .card-head h4 { font-size: 15px; }
.tour-highlights--lg .highlight-card p { font-size: 13.5px; }
.attraction-card-body .card-head { margin: 12px 0 10px; }

/* ------------------------------------------------------------
   2. SEASON CARD, LEFT-ALIGNED (icon + heading in a .card-head)
   <div class="season-card season-card--left best"> <div class="card-head">...</div> <p>...</p> </div>
   ------------------------------------------------------------ */
.season-card--left { text-align: left; padding: 22px 20px; }
.season-card--left.best .card-head { padding-right: 44px; }

/* ------------------------------------------------------------
   3. KEEP EXPLORING: 3-COLUMN GRID WITH ROOMIER CARDS
   <div class="ke-grid ke-grid--3"> ... </div>
   ------------------------------------------------------------ */
.ke-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ke-grid--3 .ke-card-body { padding: 22px; }
@media (max-width: 900px) { .ke-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ke-grid--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   4. INFO CARDS, 2 x 2, CAPPED AT THE 1200px PAGE WIDTH
   <div class="hotel-info-box hotel-info-box--cards">
     <div class="hotel-info-row"><div class="card-head">...</div><p>...</p></div> ...
   </div>
   ------------------------------------------------------------ */
.hotel-info-box--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: var(--max-content, 1200px); margin: 0 auto; padding: 0; background: none; border: 0; }
.hotel-info-box--cards .hotel-info-row { flex-direction: column; gap: 0; padding: 24px 26px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hotel-info-box--cards .hotel-info-row:last-child { border-bottom: 1px solid var(--border); }
.hotel-info-box--cards .card-head h4 { font-size: 15px; }
@media (max-width: 700px) { .hotel-info-box--cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   5. NOTICE / TIP BOX WITH ICON + HEADING + TEXT
   Extends the existing .policy-notice (teal notice) and
   .local-tip-box (teal tip). Text column is capped for readability.

   <div class="local-tip-box local-tip-box--titled">
     <i class="fa-solid fa-lightbulb" aria-hidden="true"></i>
     <div class="callout-body"><strong>Local tip</strong><p>Text...</p></div>
   </div>
   ------------------------------------------------------------ */
.policy-notice--titled, .local-tip-box--titled { display: flex; align-items: flex-start; gap: 16px; }
.policy-notice--titled > i, .local-tip-box--titled > i { flex: none; margin: 3px 0 0; font-size: 20px; color: var(--teal); }
.callout-body strong { display: block; font-size: 15px; color: var(--teal-dark); margin-bottom: 4px; }
.callout-body p { max-width: 760px; margin: 0; }

/* ------------------------------------------------------------
   6. RATING SUMMARY: SCORE AND STARS SIDE BY SIDE
   <div class="rs-score rs-score--inline"><div class="rs-big">5.0</div>
     <div class="rs-meta"><div class="rs-stars">...</div><div class="rs-count">...</div></div></div>
   ------------------------------------------------------------ */
.rs-score--inline { display: flex; align-items: center; gap: 18px; text-align: left; }
.rs-score--inline .rs-meta .rs-stars { margin: 0 0 4px; }

/* ------------------------------------------------------------
   7. CTA BANNER BOXED TO THE 1200px PAGE WIDTH (instead of full bleed)
   <section class="cta-banner cta-banner--boxed"> ... </section>
   Declarations are shared with the Cappadocia Marvels 2-day page
   (see the rule near the end of this file) so the two stay identical.
   ------------------------------------------------------------ */
.cta-banner--boxed .cta-content { max-width: 760px; }

/* ------------------------------------------------------------
   8. PHOTO GALLERY WITH SIX PHOTOS (1 large + 5 tiles)
   <div class="mosaic-gallery mosaic-gallery--six"> ... one .mosaic-main, five .mosaic-tile ... </div>
   The fifth tile spans the full width of the tile column.
   ------------------------------------------------------------ */
.mosaic-gallery--six .mosaic-side { grid-template-rows: repeat(3, 1fr); }
.mosaic-gallery--six .mosaic-side .mosaic-tile:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .mosaic-gallery--six .mosaic-side { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); height: 200px; }
  .mosaic-gallery--six .mosaic-side .mosaic-tile:last-child { grid-column: auto; }
}
@media (max-width: 560px) {
  .mosaic-gallery--six .mosaic-side { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); height: 300px; }
  .mosaic-gallery--six .mosaic-side .mosaic-tile:last-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   9. ROUTE JOURNEY  (a richer alternative to .route-map / .route-track)
   Flight strip (city - leg - city - leg - city) plus a grid of
   numbered ground stops. Each stop is a .card-head (icon + title)
   followed by a description of at least 3 lines.

   <div class="route-journey">
     <div class="rj-intro"><span class="cat-eyebrow">Your route</span><h3 class="subsection-title">Title</h3><p>Intro</p></div>
     <div class="rj-flight">
       <div class="rj-city"><span class="rj-code">IST</span><strong>Istanbul</strong><small>Text</small></div>
       <div class="rj-leg"><div class="rj-track"><i class="fa-solid fa-plane" aria-hidden="true"></i></div><span>Morning flight</span></div>
       <div class="rj-city rj-city--main"> ... </div>
       <div class="rj-leg rj-leg--back"> ... </div>
       <div class="rj-city"> ... </div>
     </div>
     <div class="rj-ground">On the ground in ...</div>
     <ol class="rj-stops">
       <li><div class="card-head"><div class="rj-stop-ico"><i class="fa-solid fa-dungeon" aria-hidden="true"></i></div>
         <div><span class="rj-when">Stop 1 - Morning</span><h4>Name</h4></div></div><p>Text</p></li>
     </ol>
     <p class="rj-end">Closing line</p>
   </div>
   ------------------------------------------------------------ */
.route-journey { margin-top: 36px; padding: 44px 40px; background: var(--teal-pale); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.rj-intro { max-width: 700px; margin: 0 auto 34px; text-align: center; }
.rj-intro .subsection-title { margin: 6px 0 10px; }
.rj-intro p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.rj-flight { display: grid; grid-template-columns: 1fr minmax(110px, .7fr) 1.2fr minmax(110px, .7fr) 1fr; align-items: stretch; }
.rj-city { padding: 22px 18px; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rj-code { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--ff-head); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.rj-city--main { border: 2px solid var(--gold); }
.rj-city--main .rj-code { background: var(--gold); color: #1a1206; }
.rj-city strong { display: block; margin-top: 12px; font-family: var(--ff-head); font-size: 17px; color: var(--text); }
.rj-city small { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.rj-leg { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--teal-dark); text-align: center; }
.rj-track { display: flex; align-items: center; width: 100%; }
.rj-track::before, .rj-track::after { content: ""; flex: 1; border-top: 2px dashed var(--teal); }
.rj-track i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.rj-leg--back .rj-track i { transform: scaleX(-1); }
.rj-ground { display: flex; align-items: center; gap: 14px; margin: 34px 0 20px; font-family: var(--ff-head); font-size: 18px; color: var(--teal-dark); }
.rj-ground::before, .rj-ground::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.rj-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; }
.rj-stops li { position: relative; padding: 22px 22px 24px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.rj-stops li:not(:nth-child(3n))::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #1a1206; font-size: 8px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.rj-stops .card-head { gap: 14px; }
.rj-stop-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.rj-when { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rj-stops h4 { margin: 2px 0 0; font-family: var(--ff-head); font-size: 16px; color: var(--text); }
.rj-stops p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.rj-end { margin: 26px 0 0; text-align: center; font-size: 14.5px; color: var(--teal-dark); font-weight: 600; }
@media (max-width: 900px) {
  .route-journey { padding: 32px 22px; }
  .rj-flight { grid-template-columns: 1fr; row-gap: 6px; }
  .rj-leg { flex-direction: row; padding: 4px 0; }
  .rj-track { flex-direction: column; width: auto; }
  .rj-track::before, .rj-track::after { flex: none; height: 14px; border-top: 0; border-left: 2px dashed var(--teal); }
  .rj-stops { grid-template-columns: 1fr 1fr; }
  .rj-stops li::after { display: none; }
}
@media (max-width: 560px) { .rj-stops { grid-template-columns: 1fr; } }

/* ====================================================================
   SHARED TOUR-PAGE KIT  (reusable on ANY page, no page slug)
   Generalised from 2-days-pamukkale-ephesus-tour-from-istanbul.html,
   whose inline <style> block was moved here.

   RULES FOR EVERY NEW PAGE (including pages generated in future sessions)
   1. Never write an inline <style> block or style="" attributes. Reuse the
      classes below / above, and add new ones HERE, in the matching section.
   2. Before adding CSS, search this file for a component with the same
      purpose (even under another name) and extend it with a modifier class
      (.component--variant) instead of writing a near-duplicate.
   3. Everything in this block is OPT-IN: it only applies to the classes named
      below, so no existing page changes unless its HTML uses them. Nothing is
      scoped to a single page's <body> class, except the one-line hero image
      rule in section 0.
   4. Modifiers that restyle an EXISTING component are written as
      ".component.component--variant" or ".modifier .component" so they keep
      the same specificity as the page-scoped rules they replace and win over
      the base rules above them.

   CONTENTS
   0. Page hero image ............ body.tour-<slug> #hero::before (one line per page)
   1. Icon + headline cards ...... .icon-inline.icon-inline--badge   (on .tour-highlights / .ai-grid)
   2. Route boxes ................ .route-boxes > .route-box (.rb-icon, .rb-tag)
   3. Long-form itinerary intro .. .itin-article.itin-article--prose
   4. Rich itinerary day body .... .itin-timeline.itin-timeline--rich
                                   (.itin-lead, .itin-close, .itin-place-figure,
                                    .places-title, stacked .site-detail-list)
   5. Places-per-day cards ....... .day-places-grid > .day-places-card
   6. Guest reviews, 3 columns ... .reviews-grid.reviews-grid--cols-3, .review-intro
   7. Destination guides (light) . .dg-light  (.dg-tiles, .dg-block, .dg-head,
                                    .dg-places, .dg-place, .dg-tip ...)
   8. Price card notes ........... .price-cards.price-cards--roomy
   9. Closing CTA as a card ...... .cta-banner.cta-banner--card

   MARKUP CHEAT-SHEET (copy the structure from the sections below)
     <div class="tour-highlights icon-inline icon-inline--badge">
       <div class="highlight-card"><h4><i class="fa-solid fa-star"></i>Title</h4><p>Text</p></div></div>
     <div class="ai-grid icon-inline icon-inline--badge">
       <div class="ai-card"><div class="ai-card-icon"><i class="fa-solid fa-compass"></i></div><h4>Title</h4><p>Text</p></div></div>
     <div class="itin-timeline itin-timeline--rich"> ...existing .itin-day markup... </div>
     <div class="reviews-grid reviews-grid--cols-3"> ...existing .review-card markup... </div>
     <section id="destinations" class="dg-light"> ...see section 7... </section>
   ==================================================================== */

/* ---- 0. Page hero image -------------------------------------------
   Page-specific by nature, so it is the only rule keyed to a body class.
   Add one line per page, below this one, with the page's own body class. */
.tour-pamukkale-ephesus-2d #hero::before { background-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Pamukkale_9RB.jpg?width=1600"); }

/* ---- 1. Icon + headline cards: white-badge variant ----------------
   Extends the existing .icon-inline pattern (section 5 of "SHARED TOUR-PAGE
   COMPONENTS" above). Always use together:  class="... icon-inline icon-inline--badge"
   Headline and icon share one row inside the same box. */
.icon-inline--badge .highlight-card h4 { margin: 0 0 10px; line-height: 1.3; }
.icon-inline--badge .highlight-card h4 i { width: 36px; height: 36px; background: #fff; color: var(--teal); box-shadow: var(--shadow-sm); }
.icon-inline--badge .ai-card h4 { line-height: 1.25; }

/* ---- 2. Route boxes: 3 boxes in one row ----------------------------
   <div class="route-boxes"><div class="route-box"><div class="rb-icon"><i class="fa-solid fa-plane"></i></div>
     <span class="rb-tag">Day 1</span><h4>Title</h4><p>Text</p></div> ... </div> */
.route-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.route-box { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 22px 18px; text-align: center; box-shadow: var(--shadow-sm); }
.route-box .rb-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 10px; }
.route-box .rb-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.route-box h4 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
.route-box p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 560px) { .route-boxes { grid-template-columns: 1fr; } }

/* ---- 3. Long-form itinerary intro (SEO article above the timeline) ---
   <div class="itin-article itin-article--prose"><div class="section-label">..</div><h2 class="section-title">..</h2><p>..</p><h3>..</h3></div> */
.itin-article.itin-article--prose { margin-bottom: 48px; }
.itin-article.itin-article--prose p { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 16px; text-align: justify; }
.itin-article.itin-article--prose h3 { font-family: var(--ff-head); font-size: 22px; font-style: italic; color: var(--text); margin: 26px 0 12px; }

/* ---- 4. Rich itinerary day body -----------------------------------
   Put  itin-timeline--rich  on the existing .itin-timeline. Inside each
   .itin-day-body you can then use:
     <p class="itin-lead">..</p>
     <figure class="itin-place-figure"><img class="itin-place-img" ..><span class="itin-place-credit">..</span></figure>
     <h4 class="places-title">Places you will visit today</h4>
     <div class="site-detail-list"><div class="site-detail"><div class="site-detail-icon">1</div>
       <div class="site-detail-text"><h4>Place</h4><p>Description</p></div></div> ...</div>
     <p class="itin-close">..</p>
   The stacked list is a single-column variant of the 2-column default .site-detail-list. */
.itin-timeline--rich .itin-lead { font-size: 15.5px; line-height: 1.85; color: var(--muted); margin: 0 0 16px; }
.itin-timeline--rich .itin-close { font-size: 14.5px; line-height: 1.8; color: var(--muted); margin: 8px 0 0; padding-top: 14px; border-top: 1px dashed var(--border); }
.itin-timeline--rich .itin-place-figure { position: relative; margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; }
.itin-timeline--rich .itin-place-img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.itin-timeline--rich .itin-place-credit { position: absolute; left: 12px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.itin-timeline--rich .places-title { font-family: var(--ff-head); font-size: 18px; color: var(--text); margin: 6px 0 4px; }
.itin-timeline--rich .site-detail-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
.itin-timeline--rich .site-detail { gap: 14px; padding: 14px 16px; }
.itin-timeline--rich .site-detail-icon { width: 36px; height: 36px; font-size: 14px; font-weight: 700; }
.itin-timeline--rich .site-detail-text h4 { font-size: 16px; margin: 0 0 4px; }
.itin-timeline--rich .site-detail-text p { font-size: 14px; line-height: 1.75; }

/* ---- 5. Places-per-day cards (numbered lists, one card per day) ------
   <div class="day-places-grid"><div class="day-places-card"><h4><i class="fa-solid fa-landmark"></i> Day 1: Ephesus (6 places)</h4>
     <ol><li>Place</li>...</ol></div> ... </div> */
.day-places-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 8px; }
.day-places-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.day-places-card h4 { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); margin: 0 0 14px; }
.day-places-card h4 i { width: 36px; height: 36px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.day-places-card ol { list-style: none; margin: 0; padding: 0; counter-reset: pl; display: flex; flex-direction: column; gap: 9px; }
.day-places-card li { counter-increment: pl; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.day-places-card li::before { content: counter(pl); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .day-places-grid { grid-template-columns: 1fr; } }

/* ---- 6. Guest reviews: fixed 3-column grid -------------------------
   Fixed 3 / 2 / 1 column variant of .reviews-grid.is-grid. Avatar, headline and
   stars stay on one row; every card in a row has the same height.
   <div class="reviews-grid reviews-grid--cols-3"> ...existing .review-card markup... </div>
   Optional intro text above the grid: <div class="review-intro"><p>..</p></div> */
.reviews-grid.reviews-grid--cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .reviews-grid.reviews-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid.reviews-grid--cols-3 { grid-template-columns: 1fr; } }
.reviews-grid--cols-3 .review-card { display: flex; flex-direction: column; height: 100%; }
.reviews-grid--cols-3 .rc-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.reviews-grid--cols-3 .rc-meta { flex: 1; min-width: 0; }
.reviews-grid--cols-3 .rc-meta h4 { font-size: 14.5px; line-height: 1.35; margin: 0 0 3px; }
.reviews-grid--cols-3 .rc-meta span { display: block; font-size: 12px; color: var(--muted); }
.reviews-grid--cols-3 .rc-stars { margin: 0 0 0 auto; white-space: nowrap; font-size: 13px; flex-shrink: 0; }
.reviews-grid--cols-3 .rc-text { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.8; }
.review-intro p { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 16px; text-align: justify; }

/* ---- 7. Destination guides, light cards (opt-in: .dg-light) ----------
   Put  dg-light  on the section that holds the guides. One .dg-block per
   destination; add a second class (e.g. .pam) to recolour a block's place headers.
   <section id="destinations" class="dg-light">
     <div class="section-center">..eyebrow, title, lead..</div>
     <div class="dg-tiles"><a class="dg-tile" href="#dest-1"><img ..><div class="dg-tile-body"><span class="dg-day">Day 1</span><h3>..</h3><p>..</p><span class="dg-tile-link">..</span></div></a> ...</div>
     <div class="dg-block" id="dest-1">
       <div class="dg-head"><div class="dg-head-img"><img ..></div>
         <div class="dg-head-text"><span class="dest-eyebrow">..</span><h3>..</h3><p>..</p>
           <div class="dg-facts"><div class="dg-fact"><small>Label</small><b>Value</b></div> ...</div></div></div>
       <h3 class="dg-places-title">Six places you will visit</h3>
       <div class="dg-places"><article class="dg-place">
         <div class="dg-place-top"><span class="dg-ico"><i class=".."></i></span><h4>Place</h4><span class="dg-num">01</span></div>
         <div class="dg-place-body"><div class="dg-chips"><span class="dg-chip">..</span></div><p>..</p><div class="dg-why"><strong>Why go:</strong> ..</div></div></article> ...</div>
       <div class="dg-tip"><i class="fa-solid fa-lightbulb"></i><div><strong>Insider tip:</strong> ..</div></div>
     </div></section> */
.dg-light .dg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 52px; }
.dg-light .dg-tile { position: relative; display: block; min-height: 340px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow-md); background: #123f3c; }
.dg-light .dg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.dg-light .dg-tile:hover img { transform: scale(1.05); }
.dg-light .dg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(10,40,38,.92) 100%); }
.dg-light .dg-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; z-index: 2; }
.dg-light .dg-day { display: inline-block; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; }
.dg-light .dg-tile h3 { font-family: var(--ff-head); font-size: 1.6rem; color: #fff; margin: 0 0 8px; }
.dg-light .dg-tile p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.88); margin: 0 0 12px; }
.dg-light .dg-tile-link { font-size: 13px; font-weight: 700; color: #fff; }
.dg-light .dg-block { margin-bottom: 60px; scroll-margin-top: 130px; }
.dg-light .dg-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.dg-light .dg-head-img { position: relative; min-height: 340px; }
.dg-light .dg-head-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-light .dg-head-text { padding: 32px 34px; }
.dg-light .dg-head-text h3 { font-family: var(--ff-head); font-size: 1.7rem; line-height: 1.25; color: var(--text); margin: 6px 0 14px; }
.dg-light .dg-head-text p { font-size: 15px; line-height: 1.85; color: var(--muted); margin: 0 0 14px; }
.dg-light .dg-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.dg-light .dg-fact { background: var(--teal-pale); border-radius: 10px; padding: 10px 14px; }
.dg-light .dg-fact small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dg-light .dg-fact b { font-size: 14px; color: var(--text); }
.dg-light .dg-places-title { font-family: var(--ff-head); font-size: 1.3rem; color: var(--text); margin: 34px 0 0; }
.dg-light .dg-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
.dg-light .dg-place { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: var(--trans); }
.dg-light .dg-place:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dg-light .dg-place-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: #fff; background: linear-gradient(135deg, var(--teal-dark), #1a4a48); }
.dg-light .dg-block.pam .dg-place-top { background: linear-gradient(135deg, #0a3d3a, var(--sky)); }
.dg-light .dg-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dg-light .dg-place-top h4 { font-family: var(--ff-head); font-size: 1.05rem; line-height: 1.3; color: #fff; margin: 0; }
.dg-light .dg-num { margin-left: auto; font-family: var(--ff-head); font-size: 30px; font-weight: 700; opacity: .4; line-height: 1; }
.dg-light .dg-place-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
.dg-light .dg-place-body p { font-size: 14px; line-height: 1.75; color: var(--muted); margin: 0; }
.dg-light .dg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-light .dg-chip { font-size: 11.5px; font-weight: 600; color: var(--teal-dark); background: var(--teal-light); padding: 4px 10px; border-radius: 20px; }
.dg-light .dg-why { margin-top: auto; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 13px; line-height: 1.6; color: var(--teal-dark); }
.dg-light .dg-tip { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; background: var(--teal-light); border: 1px solid #b5e0d8; border-radius: var(--radius); padding: 16px 20px; font-size: 14.5px; line-height: 1.75; color: var(--text); }
.dg-light .dg-tip i { color: var(--gold); font-size: 20px; margin-top: 3px; }
@media (max-width: 980px) { .dg-light .dg-places { grid-template-columns: repeat(2, 1fr); } .dg-light .dg-head { grid-template-columns: 1fr; } .dg-light .dg-head-img { min-height: 260px; } }
@media (max-width: 640px) { .dg-light .dg-places, .dg-light .dg-tiles, .dg-light .dg-facts { grid-template-columns: 1fr; } .dg-light .dg-head-text { padding: 24px 20px; } }

/* ---- 8. Price cards: roomier note lists -----------------------------
   Opt-in on the existing .price-cards wrapper. The .pc-note list keeps its
   icon + text rows (see ".price-cards .pc-note" above) with more spacing. */
.price-cards.price-cards--roomy .pc-note { list-style: none; padding: 0; margin: 14px 0 0; }
.price-cards.price-cards--roomy .pc-note li { gap: 10px; font-size: 14px; }

/* ---- 9. Closing CTA as a card ----------------------------------------
   <section class="cta-banner cta-banner--card"> ...existing .cta-content markup... </section>
   Same 1200px-wide boxed idea as .cta-contained / .cta-banner--boxed, but with the
   banner's own padding kept and a card shadow. */
.cta-banner.cta-banner--card { width: min(1200px, calc(100% - 32px)); margin: 48px auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }