/* ════════════════════════════════════════════════════════════
 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); }
/* ════════════════════════════════════════════════════════════
 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); }
.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: 1400px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.15fr 0.95fr 0.95fr 0.95fr; gap: 40px; text-align: left;}
/* Footer legal bar (centers on mobile via the 768px breakpoint below) */
.footer-bottom {max-width: 1400px; margin: 0 auto; padding: 28px 24px 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;}
/* 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; }
.slide-overlay { position: absolute; inset: 0; 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 60px; max-width: 100%; color: #fff; }
.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: 16px 18px; }
.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;}
body {font-family: var(--ff-body); color: var(--text); background: var(--white); line-height: 1.75; font-size: 16px;}
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("file:///C:/Users/Sebahattin/Desktop/MODIFIED/history/the-history-travel-background.jpg") center/cover; opacity: .22;}
#hero::after {content: "";position: absolute;bottom: 0; left: 0; right: 0;height: 80px;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: 14px; justify-content: space-between; 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: 22px 28px; 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: 28px 28px 32px; border-top: 1px solid var(--border);}
.itin-day.open .itin-day-body {display: block; padding-top: 18px;}
.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-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;}
/* ══ 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: 1800px; 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; 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 { display: flex; align-items: stretch; background: #fff; border-radius: 60px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 8px; max-width: 640px; margin: 0 auto; text-align: left; }
.hsp-field:hover { background: var(--teal-pale); }
.hsp-icon { color: var(--muted); font-size: 16px; flex-shrink: 0; }
.hsp-text { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.hsp-label { font-size: 13px; font-weight: 700; color: var(--text); }
.hsp-value { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsp-value-input { width: 100%; border: none; outline: none; background: transparent; padding: 0; margin: 0; font-family: var(--ff-body); box-shadow: none; -webkit-appearance: none; appearance: none; }
.hsp-value-input::placeholder { color: var(--muted); opacity: 1; }
.hsp-divider { width: 1px; background: var(--border); margin: 6px 0; flex-shrink: 0; }
.hsp-submit { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: #fff; border: none; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: var(--trans); align-self: center; }
.hsp-submit:hover { background: var(--teal-dark); }
/* Where-to suggestion dropdown */
.hsp-field {display: flex; align-items: center; gap: 12px; padding: 10px 20px; flex: 1; cursor: pointer; border-radius: 50px; transition: var(--trans); position: relative;}
.hsp-suggest { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--trans); z-index: 20; }
.hsp-field.active .hsp-suggest { opacity: 1; visibility: visible; transform: translateY(0); }
.hsp-suggest li a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 14px; color: var(--text); }
.hsp-suggest li a:hover { background: var(--teal-light); color: var(--teal-dark); }
.hsp-suggest li a i { color: var(--teal); font-size: 13px; width: 14px; }
@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; border-radius: var(--radius-lg); }
.hsp-divider { display: none; }
.hsp-submit { width: 100%; border-radius: 50px; margin-top: 4px; }
.home-hero-frame { min-height: 620px; border-radius: var(--radius); }
.hh-content { padding: 0 20px; }
.btn-signin { padding: 9px 16px; font-size: 13px; }
}
/* ════════════════════════════════════════════════════════════
 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: 14px; 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 18px; z-index: 500; }
.mcb-price { font-family: var(--ff-head); font-weight: 700; font-size: 18px; color: var(--teal-dark); display: flex; flex-direction: column; line-height: 1.2; }
.mcb-price small { font-family: var(--ff-body); font-weight: 500; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mobile-cta-bar .btn-book-now { background: var(--teal); color: #fff; border: none; padding: 12px 22px; border-radius: 50px; font-size: 14px; font-weight: 700; text-align: center; }
body:has(.mobile-cta-bar) { padding-bottom: 68px; }
}
/* ════════════════════════════════════════════════════════════
 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: 24px; }
/* 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; }
@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 10px;
}
.dest-inner,
.ai-inner {
max-width: 100%;
padding: 0 30px;
}

/* Hero background for this specific page */
#hero::before {background-image: url('https://images.unsplash.com/photo-1571401835393-8c882e15c8b0?w=1600&q=80');opacity: .32;}
/* 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);}