/* ═══════════════════════════════════════════════════════════════════
   PLANET REDESIGN LAYER — v1 (global chrome)
   Loaded AFTER style.css/common.css. Restyles existing markup to the
   2026 design. Colours key off the per-site variables set in _head
   (--main-bg-color etc), so this file is automatically correct on
   pks / pws / pd / pwf / ski / psup.
   Phase 1: tokens, buttons, header + mega menus, search card, footer,
   cookie bar. Page-level sections follow in later phases.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --pr-ink: #1C2228;
    --pr-ink-soft: #3A434C;
    --pr-grey: #6B7480;
    --pr-sand: #F8F5F2;
    --pr-line: #ECE7E2;
    --pr-teal: #55B6BB;
    --pr-teal-deep: #3E9EA3;
    --pr-orange: #FF773A;
    --pr-serif: 'Lora', Georgia, serif;
    --pr-sans: 'Lato', Helvetica, Arial, sans-serif;
    --pr-shadow-sm: 0 2px 10px rgba(28, 34, 40, .07);
    --pr-shadow-md: 0 12px 34px rgba(28, 34, 40, .12);
    --pr-radius: 18px;
}

/* ---------- global type polish ---------- */
h1, h2, h3, h4, h5, .fm-lora {
    font-family: var(--pr-serif) !important;
    font-weight: 500;
}

/* ---------- HEADER: top row ---------- */
.sticky-header {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--pr-shadow-sm);
}

.header {
    height: 88px;
    padding: 0 4%;
    border-bottom: 1px solid var(--pr-line);
}

.web-logo {
    border-right: 0;
}

.web-logo img {
    width: auto;
    max-width: 240px;
    height: 62px;
    object-fit: contain;
}

.header-right .big-number a {
    font-family: var(--pr-serif);
    color: var(--pr-ink);
    transition: color .2s;
}

.header-right .big-number a:hover {
    color: var(--main-bg-color);
}

/* ---------- HEADER: menu row (was dark — now clean white) ---------- */
.header-bottom {
    background: #fff !important;
    border-bottom: 1px solid var(--pr-line);
}

.header-bottom .header-bottom-left > div > .menu-flex p,
.header-bottom .header-bottom-left > p,
.header-bottom .header-bottom-left > p > a,
.header-bottom .menu-flex p {
    color: var(--pr-ink-soft) !important;
    font-family: var(--pr-sans) !important;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .12em;
    white-space: nowrap;
}

.header-bottom svg path {
    fill: var(--main-bg-color);
}

/* menu item hover: underline accent instead of colour-block */
.header-bottom p:hover {
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--main-bg-color);
}

/* ---------- MEGA MENU PANELS: dark → white cards ---------- */
.absolute-menu,
.destination-menu-body,
.liveabroad-menu-body,
.types-menu-body,
.more-menu-body {
    background: #fff !important;
    border: 1px solid var(--pr-line);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--pr-shadow-md);
    max-height: 74vh;
    overflow-y: auto;
}

.destination-menu-grid ul li.title a,
.liveabroad-menu-grid li.title a {
    color: var(--pr-ink) !important;
    font-family: var(--pr-sans) !important;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .12em;
}

.destination-menu-grid ul li a,
.liveabroad-menu-grid li a,
.more-menu-grid ul li a,
.absolute-menu a.white {
    color: var(--pr-ink-soft) !important;
    font-weight: 400;
    border-radius: 8px;
    transition: color .15s, background .15s;
}

.destination-menu-grid ul li a:hover,
.liveabroad-menu-grid li a:hover,
.more-menu-grid ul li a:hover,
.absolute-menu a.white:hover {
    color: var(--dark-bg-color) !important;
    background: var(--pr-sand);
}

/* hide the little white arrow icons (invisible on white) */
.destination-menu-grid li a img[src*="right-arrow-white"],
.liveabroad-menu-grid li a img[src*="right-arrow-white"],
.more-menu-grid li a img[src*="right-arrow-white"] {
    display: none !important;
}

.types-menu-grid-row a {
    color: var(--pr-ink-soft) !important;
}

.types-menu-grid-row img {
    border-radius: 12px;
}

/* ---------- HEADER CTAS: Speak to us / Book online → pills ---------- */
.btn_book_Live_hed a,
.btn_call_side {
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 22px !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.btn_book_Live_hed a:hover,
.btn_call_side:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 34, 40, .18);
}

/* ---------- HOME SEARCH BAR: dark strip → floating white card ---------- */
.banner-search {
    background: #fff !important;
    border: 1px solid var(--pr-line);
    border-radius: 22px;
    box-shadow: var(--pr-shadow-md);
    padding: 26px 30px !important;
}

.banner-search label,
.banner-search .white,
.banner-search select,
.banner-search p {
    color: var(--pr-ink) !important;
}

.banner-search label {
    font-family: var(--pr-sans) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
}

.banner-search select {
    font-family: var(--pr-serif) !important;
    font-size: 17px !important;
    background: transparent;
    border: 0 !important;
    border-bottom: 2px solid var(--pr-line) !important;
    border-radius: 0 !important;
    padding: 8px 2px !important;
}

.banner-search select:focus {
    outline: none;
    border-bottom-color: var(--main-bg-color) !important;
}

.banner-search > div > p.fm-lato,
.banner-search .fw-400.fm-lato {
    color: var(--pr-grey) !important;
    font-size: 12.5px !important;
    font-weight: 300 !important;
}

.banner-search-btn a,
.btn-search-resort {
    background: var(--main-bg-color) !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 16px 34px !important;
    color: #fff !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--main-bg-color) 40%, transparent);
    transition: transform .25s, box-shadow .25s, background .25s;
    display: inline-block;
}

.banner-search-btn a:hover,
.btn-search-resort:hover {
    transform: translateY(-2px);
    background: var(--dark-bg-color) !important;
}

/* ---------- FOOTER polish ---------- */
.footer {
    background: var(--pr-ink);
}

.footer .footer-upper,
.footer .footer-about-bottom {
    background: transparent;
}

.footer h4.fm-lora,
.footer h5.fm-lora,
.footer h6.fm-lora {
    color: #fff;
}

.footer p,
.footer .footer-about-content p {
    color: #B9C2CA;
    font-weight: 300;
}

.footer a:hover {
    color: #fff;
}

.footer .footer-newsletter {
    background: var(--main-bg-color);
    color: #fff !important;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
}

.footer-bottom-bottom-container {
    border-top: 1px solid #2A323A;
}

#scroll-top {
    background: var(--main-bg-color);
    border-radius: 50%;
    box-shadow: var(--pr-shadow-md);
}

/* ---------- cookie bar ---------- */
.cookie-policy {
    background: var(--pr-ink) !important;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(28, 34, 40, .25);
}

.cookie-policy-btn button {
    background: var(--main-bg-color);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 700;
}

/* ═══════════ CONSULTATION / ONLINE-BOOKING MODALS (injected by planet-redesign.js) ═══════════ */
.pr-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pr-modal.open {
    display: flex;
}

.pr-modal .pr-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 22, 30, .7);
    backdrop-filter: blur(4px);
}

.pr-modal .pr-panel {
    position: relative;
    background: #fff;
    border-radius: 20px;
    width: min(960px, 100%);
    height: min(720px, 92vh);
    box-shadow: var(--pr-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pr-modal.pr-small .pr-panel {
    width: min(560px, 100%);
    height: auto;
}

.pr-m-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--pr-line);
}

.pr-m-head b {
    font-family: var(--pr-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--pr-ink);
}

.pr-m-close {
    border: 0;
    background: var(--pr-sand);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    color: var(--pr-ink);
}

.pr-modal iframe {
    border: 0;
    width: 100%;
    flex: 1;
}

.pr-online-body {
    padding: 34px 38px 38px;
    text-align: center;
}

.pr-online-body .pr-ico {
    font-size: 34px;
    margin-bottom: 10px;
}

.pr-online-body h3 {
    font-family: var(--pr-serif);
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--pr-ink);
}

.pr-online-body h3 em {
    font-style: italic;
    color: var(--dark-bg-color);
}

.pr-online-body p {
    color: var(--pr-grey);
    font-weight: 300;
    font-size: 15px;
    max-width: 34em;
    margin: 0 auto 12px;
}

.pr-online-body .pr-btn {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 15px 26px;
    margin-top: 12px;
    font-family: var(--pr-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    transition: transform .2s;
}

.pr-online-body .pr-btn:hover {
    transform: translateY(-2px);
}

.pr-btn-expert {
    background: var(--pr-orange);
}

.pr-btn-online {
    background: var(--pr-teal);
}

.pr-online-body .pr-fine {
    font-size: 12.5px;
    color: var(--pr-grey);
    margin-top: 14px;
}

@media (max-width: 767px) {
    .header {
        height: 74px;
        padding: 0 16px;
    }

    .web-logo img {
        height: 48px;
    }

    .banner-search {
        border-radius: 16px;
        padding: 18px 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — HOMEPAGE (index.blade.php + partials)
   Pure CSS over existing markup/classes. Data untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- value-props band (.home-about-section: 6 icon blocks) ---- */
.home-about-section {
    background: var(--pr-sand);
    padding: 64px 4% !important;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch !important;
}

.home-about-section > div {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 26px 20px;
    flex: 1 1 240px;
    box-shadow: var(--pr-shadow-sm);
    transition: transform .3s, box-shadow .3s;
}

.home-about-section > div:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.home-about-section > div > p {
    font-family: var(--pr-serif) !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--pr-ink);
    margin-bottom: 10px;
}

.home-about-section [class^="icon"] span,
.home-about-section [class*=" icon"] span {
    color: var(--pr-grey);
    font-family: var(--pr-sans);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.55;
}

/* ---- intro heading + welcome copy ---- */
.main-heading {
    font-family: var(--pr-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.15 !important;
    color: var(--pr-ink) !important;
}

.welcome-msg,
.texts_home {
    color: var(--pr-grey);
    font-weight: 300;
    max-width: 70em;
    margin-left: auto;
    margin-right: auto;
}

/* ---- holiday types grid (#slider .holiday-grid) ---- */
#slider .holiday-grid .slider-item {
    border-radius: var(--pr-radius);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    transition: transform .3s, box-shadow .3s;
}

#slider .holiday-grid .slider-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--pr-shadow-md);
}

#slider .holiday-grid .slider-item img {
    transition: transform .6s ease;
}

#slider .holiday-grid .slider-item:hover img {
    transform: scale(1.06);
}

#slider .holiday-grid .slider-item .overlay {
    background: linear-gradient(180deg, rgba(15, 22, 30, 0) 38%, rgba(15, 22, 30, .82) 100%) !important;
}

#slider .holiday-grid .slider-item p {
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

#slider .holiday-grid .slider-item a {
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.holiday-grid-cta-btn {
    background: var(--pr-orange) !important;
    border-radius: 999px !important;
    padding: 16px 34px !important;
    font-family: var(--pr-sans) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
    transition: transform .25s, box-shadow .25s;
    display: inline-block;
}

.holiday-grid-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 119, 58, .45);
}

/* ---- FAQ accordion ---- */
.faq-wrapper {
    background: transparent;
}

.faq-title {
    font-family: var(--pr-serif) !important;
    font-weight: 500 !important;
    color: var(--pr-ink) !important;
}

.faq-item {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 4px 20px;
    transition: box-shadow .3s, background .3s;
}

.faq-item:hover {
    background: #fff;
    box-shadow: var(--pr-shadow-sm);
}

.faq-question {
    font-family: var(--pr-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--pr-ink) !important;
}

.faq-icon {
    background: var(--main-bg-color);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.faq-answer {
    color: var(--pr-grey);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
}

.faq-divider {
    display: none;
}

/* ---- trending / hot tours cards ---- */
.hot-tour-box {
    border-radius: var(--pr-radius) !important;
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    border: 1px solid var(--pr-line);
    transition: transform .3s, box-shadow .3s;
}

.hot-tour-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--pr-shadow-md);
}

.hot-offers,
.hot-offers-button {
    background: var(--pr-orange) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
}

.hot-tour-name {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
}

/* ---- latest offers list ---- */
.list-item-box {
    background: #fff;
    border: 1px solid var(--pr-line) !important;
    border-radius: var(--pr-radius) !important;
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    transition: transform .3s, box-shadow .3s;
}

.list-item-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.list-item-heading,
.list-item-content-heading {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.active-btn {
    background: var(--main-bg-color) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 12.5px !important;
    padding: 12px 24px !important;
    transition: transform .25s;
}

.active-btn:hover {
    transform: translateY(-2px);
}

/* ---- reviews + why-book ---- */
.google-review-inner-box-item {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow-sm);
    transition: transform .3s, box-shadow .3s;
}

.google-review-inner-box-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.reviews-see-all-btn {
    border: 1.5px solid var(--pr-ink) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--pr-ink) !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 12.5px !important;
    padding: 13px 26px !important;
    transition: all .25s;
}

.reviews-see-all-btn:hover {
    background: var(--pr-ink) !important;
    color: #fff !important;
}

.whybook-cta {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 15px 28px !important;
    transition: transform .25s, box-shadow .25s;
    display: inline-block;
}

.whybook-cta--primary {
    background: var(--pr-orange) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
}

.whybook-cta--secondary {
    background: var(--pr-teal) !important;
    color: #fff !important;
}

.whybook-cta:hover {
    transform: translateY(-2px);
}

/* ---- video corners ---- */
.youtube iframe {
    border-radius: var(--pr-radius);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2b — HERO (inc/_banner.blade.php, index page)
   Typography + eyebrow + CTAs + proof row, matching the approved mock.
   Slide headline/desc/link stay dynamic from the banners database;
   an <em> inside a slide title renders italic in the brand tint.
   ═══════════════════════════════════════════════════════════════════ */

.index-page .text_slider .sigle-item {
    max-width: 880px;
}

.index-page .text_slider .sigle-item h2 {
    font-family: var(--pr-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(36px, 4.6vw, 62px) !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    margin-bottom: 14px;
}

.index-page .text_slider .sigle-item h2 em {
    font-style: italic;
    color: color-mix(in srgb, var(--main-bg-color) 55%, #ffffff);
}

.index-page .text_slider .sigle-item > p {
    font-family: var(--pr-sans) !important;
    font-weight: 300 !important;
    font-size: clamp(15px, 1.5vw, 19px) !important;
    line-height: 1.6;
    max-width: 40em;
    color: rgba(255, 255, 255, .95) !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
    margin-bottom: 26px;
}

/* eyebrow pill */
.pr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .38);
    padding: 9px 18px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 22px;
}

/* hero CTA buttons */
.pr-hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
}

.pr-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    border: 0;
    cursor: pointer;
    font-family: var(--pr-sans);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 17px 32px;
    border-radius: 999px;
    color: #fff !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    text-decoration: none !important;
}

.pr-btn-hero-orange {
    background: var(--pr-orange);
    box-shadow: 0 8px 24px rgba(255, 119, 58, .38);
}

.pr-btn-hero-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 119, 58, .48);
}

.pr-btn-hero-ghost {
    background: rgba(255, 255, 255, .14);
    border: 1.5px solid rgba(255, 255, 255, .75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pr-btn-hero-ghost:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateY(-2px);
}

/* proof-points row */
.pr-hero-proof {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.pr-hero-proof span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--pr-sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

.pr-hero-proof span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-bg-color);
    flex: none;
}

/* smooth anchor scroll to trending */
html {
    scroll-behavior: smooth;
}

#whats-trending {
    scroll-margin-top: 120px;
}

/* per-slide link ("Take me to Brazil") — subtle underline style */
.index-page .text_slider .sigle-item > a {
    font-family: var(--pr-serif) !important;
    font-style: italic;
    font-size: 16px;
    color: #fff !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, .7);
    padding-bottom: 2px;
    margin-top: 16px;
    display: inline-block;
}

@media (max-width: 767px) {
    .pr-eyebrow {
        font-size: 10.5px;
        letter-spacing: .16em;
        margin-bottom: 14px;
    }

    .pr-btn-hero {
        padding: 13px 22px;
        font-size: 12px;
    }

    .pr-hero-proof {
        gap: 12px;
        margin-top: 18px;
    }

    .pr-hero-proof span {
        font-size: 11.5px;
    }
}

/* ═══════════ PHASE 2c — CONSULTATION CTA BAND (common/_consult-cta.blade.php) ═══════════ */
.pr-consult {
    position: relative;
    color: #fff;
    padding: 100px 4%;
    background:
        radial-gradient(900px 400px at 85% 20%, color-mix(in srgb, var(--main-bg-color) 26%, transparent), transparent),
        linear-gradient(120deg, #141A21 0%, #232D38 100%);
    overflow: hidden;
}

.pr-consult-wrap {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 60px;
    align-items: center;
}

.pr-consult-kicker {
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--main-bg-color) 55%, #ffffff);
    margin-bottom: 16px;
}

.pr-consult h2 {
    font-family: var(--pr-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(30px, 3.6vw, 46px) !important;
    line-height: 1.14 !important;
    color: #fff !important;
    margin-bottom: 16px;
}

.pr-consult h2 em {
    font-style: italic;
    color: color-mix(in srgb, var(--main-bg-color) 55%, #ffffff);
}

.pr-consult > .pr-consult-wrap p {
    font-weight: 300;
    font-size: 17px;
    color: rgba(255, 255, 255, .92);
    max-width: 34em;
}

.pr-consult-feats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pr-consult-feats span {
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .92);
}

.pr-consult-panel {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 40px 38px;
    text-align: center;
}

.pr-consult-panel h3 {
    font-family: var(--pr-serif) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #fff !important;
    margin: 18px 0 8px;
}

.pr-consult-sub {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 24px;
}

.pr-consult-panel .pr-btn-hero {
    width: 100%;
    justify-content: center;
    margin-bottom: 14px;
}

.pr-consult-alt {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.pr-consult-alt a {
    color: #fff !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.pr-gpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 7px 16px;
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-ink);
    box-shadow: var(--pr-shadow-sm);
}

.pr-gpill b {
    font-weight: 900;
    font-size: 15px;
    font-style: normal;
}

.pr-gpill b i:nth-child(1) { color: #4285F4; font-style: normal; }
.pr-gpill b i:nth-child(2) { color: #EA4335; font-style: normal; }
.pr-gpill b i:nth-child(3) { color: #FBBC05; font-style: normal; }
.pr-gpill b i:nth-child(4) { color: #4285F4; font-style: normal; }
.pr-gpill b i:nth-child(5) { color: #34A853; font-style: normal; }
.pr-gpill b i:nth-child(6) { color: #EA4335; font-style: normal; }

@media (max-width: 900px) {
    .pr-consult-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ═══════════ PHASE 2d — HERO FIXES (override legacy slider CSS) ═══════════ */

/* 1. Eyebrow was inheriting the slide-title sizing — pin it down hard */
.hero-area .text_slider .sigle-item .pr-eyebrow,
.sigle-item .pr-eyebrow {
    font-family: var(--pr-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    padding: 9px 18px !important;
    margin: 0 0 22px 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    white-space: nowrap;
}

/* 2. Kill the justified text — mockup is left-aligned with normal spacing */
.index-page .text_slider .sigle-item,
.index-page .text_slider .sigle-item h2,
.index-page .text_slider .sigle-item p,
.index-page .text_slider .sigle-item a {
    text-align: left !important;
    word-spacing: normal !important;
}

.index-page .text_slider .sigle-item h2 {
    letter-spacing: 0 !important;
}

/* 3. Search card: match the mockup — centred card, not full-bleed */
#searchWrapper {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 28px;
    box-sizing: border-box;
}

#searchWrapper .banner-search,
.liveaboard-banner-search .banner-search {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}

/* ═══════════ PHASE 2e — HERO GEOMETRY + SEARCH ROW ═══════════ */

/* Vertically centre the whole text block inside the slide, ignoring
   the legacy absolute offsets that were sized for tiny slide text.
   This brings the eyebrow + first headline line back into view. */
.index-page .slider-items .text_slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 40px 4% 120px !important;   /* bottom padding clears the search card overlap */
    z-index: 3;
    pointer-events: none;                 /* don't block carousel arrows/drag */
    transform: none !important;
}

.index-page .slider-items .sigle-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: 860px !important;
    width: auto !important;
    pointer-events: auto;                 /* buttons/links clickable again */
}

/* size the headline to fit comfortably with eyebrow + CTAs + proof row */
.index-page .text_slider .sigle-item h2 {
    font-size: clamp(32px, 4vw, 54px) !important;
    margin-top: 0 !important;
}

/* ---- search card: three-across row like the mock ---- */
#searchWrapper .banner-search {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 28px !important;
}

#searchWrapper .banner-search .month-search,
#searchWrapper .banner-search .level-search {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

#searchWrapper .banner-search .search-mode-switch {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
}

#searchWrapper .banner-search .banner-search-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    align-self: flex-end;
}

@media (max-width: 860px) {
    #searchWrapper .banner-search {
        flex-wrap: wrap !important;
    }

    #searchWrapper .banner-search .month-search,
    #searchWrapper .banner-search .level-search,
    #searchWrapper .banner-search .search-mode-switch,
    #searchWrapper .banner-search .banner-search-btn {
        flex: 1 1 100% !important;
    }

    .index-page .slider-items .text_slider {
        padding: 20px 16px 80px !important;
    }
}

/* ═══════════ PHASE 2f — HEADER TOP ROW: compact + aligned ═══════════ */
.header {
    height: 76px !important;
    align-items: center !important;
}

.web-logo img {
    height: 54px !important;
}

/* trust badges + google review images: consistent compact height */
.header .head_img_parentt img,
.header .head_img_,
.header .mid_hhed img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain;
}

.header .mid_hhed {
    display: flex;
    align-items: center;
}

.header-right .big-number {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* ═══════════ PHASE 2g — MOCKUP HEADER: utility bar + single nav row ═══════════ */
.pr-utility {
    background: var(--pr-ink);
    color: #cfd6dc;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    letter-spacing: .06em;
}

.pr-utility-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38px;
}

.pr-utility a {
    color: #fff !important;
    font-weight: 700;
}

.pr-u-right {
    display: flex;
    gap: 22px;
    align-items: center;
}

.pr-u-stars {
    color: #FFC107;
}

@media (max-width: 900px) {
    .pr-u-left { display: none; }
    .pr-utility-inner { justify-content: center; }
}

/* merge the two header rows into one: logo | menu | ctas */
@media (min-width: 1081px) {
    .sticky-header {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid var(--pr-line);
    }

    .sticky-header .header {
        flex: 0 0 auto;
        border-bottom: 0 !important;
        height: 76px !important;
        padding: 0 10px 0 3% !important;
    }

    /* hide the old badge/google/phone blocks — utility bar carries them now */
    .header .mid_hhed,
    .header .first_mid,
    .header .header-right {
        display: none !important;
    }

    .sticky-header .header-bottom {
        flex: 1 1 auto;
        border-bottom: 0 !important;
        display: flex;
        align-items: stretch;
    }

    .sticky-header .header-bottom .header-bottom-width {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 3%;
    }
}

/* ═══════════ PHASE 2h — SEARCH BAND POLISH ═══════════ */

/* kill the legacy pink border/background on the old search strip
   (the stray coloured line above the card) */
.liveaboard-banner-search,
#searchWrapper,
#searchWrapper .tab-content,
#searchWrapper .tab-pane {
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.hero-area,
.hero-area .slider-wrapper {
    border-bottom: 0 !important;
}

/* button sits on the field baseline (level with the select underline) */
#searchWrapper .banner-search {
    align-items: flex-end !important;
}

#searchWrapper .banner-search .banner-search-btn {
    align-self: flex-end !important;
    margin-bottom: 24px !important;   /* lines up with the select underline, above the helper text */
}

#searchWrapper .banner-search .banner-search-btn a {
    padding: 17px 36px !important;
    line-height: 1 !important;
}

/* field internals: consistent left alignment and spacing */
#searchWrapper .banner-search label {
    margin-bottom: 6px !important;
    text-align: left !important;
    display: block !important;
}

#searchWrapper .banner-search select {
    width: 100% !important;
    text-align: left !important;
}

#searchWrapper .banner-search p {
    text-align: left !important;
    margin-top: 8px !important;
}

/* why-book cards: left-aligned text, even top padding */
.reviews-whybook-wrap .whybook-col,
.home-about-section > div {
    text-align: left !important;
}

.home-about-section > div > p {
    text-align: left !important;
}

/* ═══════════ PHASE 2i — GRID ALIGNMENT + CARD STRADDLE ═══════════ */

/* hero text aligns to the same centred 1240px grid as the search card */
.index-page .slider-items .text_slider {
    padding: 40px max(4%, calc((100% - 1240px) / 2)) 150px !important;
}

/* search card straddles the bottom edge of the hero image: half in, half out */
section.hero-area.index-page {
    position: relative;
    margin-bottom: 120px !important;   /* room for the card's lower half */
    overflow: visible !important;
}

.index-page #searchWrapper {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translateY(50%) !important;
    z-index: 6;
}

/* "Find My Holiday": exact mock typography */
#searchWrapper .banner-search .banner-search-btn a,
.btn-search-resort {
    font-family: var(--pr-sans) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 18px 40px !important;
    line-height: 1 !important;
    background: var(--main-bg-color) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--main-bg-color) 35%, transparent) !important;
}

/* ═══════════ PHASE 2j — GRID-ALIGNED HEADER + CARD DETAIL FIXES ═══════════ */

/* utility bar + header rows share the hero's 1240px grid */
.pr-utility-inner {
    max-width: 1240px;
    padding: 0 28px;
}

@media (min-width: 1081px) {
    .sticky-header {
        padding-left: max(28px, calc((100% - 1240px) / 2)) !important;
        padding-right: max(28px, calc((100% - 1240px) / 2)) !important;
    }

    .sticky-header .header {
        padding: 0 24px 0 0 !important;
    }

    .sticky-header .header-bottom .header-bottom-width {
        padding-right: 0 !important;
    }
}

/* eyebrow: never stretch — hug its text, sit left */
.index-page .sigle-item .pr-eyebrow {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* selects: mock weight/size, calm underline */
#searchWrapper .banner-search select {
    font-family: var(--pr-serif) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    border-bottom: 2px solid var(--pr-line) !important;
}

/* Find My Holiday: white text, dead-centre vertically */
#searchWrapper .banner-search .banner-search-btn a,
.btn-search-resort,
.banner-search .white.btn-search-resort {
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 40px !important;
    line-height: 1 !important;
}

/* proof row under the hero buttons: mock spacing, aligned to content edge */
.pr-hero-proof {
    margin-top: 44px !important;
    gap: 26px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.pr-hero-proof span {
    margin: 0 !important;
}

/* ═══════════ PHASE 2k — HERO BREATHING ROOM + MEGA MENU GEOMETRY ═══════════ */

/* more air between the header and the hero text */
.index-page .slider-items .text_slider {
    padding-top: 96px !important;
}

/* mega menu panels: anchor to the full header width (sticky-header is the
   positioning context), aligned to the same 1240px grid, above everything */
@media (min-width: 1081px) {
    .header-bottom-left {
        display: flex !important;
        align-items: stretch !important;
        height: 100%;
    }

    .destination-menu-head,
    .liveabroad-menu-head,
    .types-menu-head,
    .more-menu-head {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .destination-menu-body,
    .liveabroad-menu-body,
    .types-menu-body,
    .more-menu-body {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: auto !important;
        margin: 0 !important;
        border-radius: 0 0 18px 18px !important;
        z-index: 400 !important;
        padding-left: max(28px, calc((100% - 1240px) / 2)) !important;
        padding-right: max(28px, calc((100% - 1240px) / 2)) !important;
        box-shadow: var(--pr-shadow-md) !important;
    }

    /* header CTA buttons must not float above an open menu */
    .btn_book_Live_hed {
        position: relative;
        z-index: 5;
    }
}

/* ═══════════ PHASE 2l — HEADER BUTTONS SIDE-BY-SIDE + SLIDE-OUT REDESIGN ═══════════ */

/* Speak to Us / Book Online: side by side, inside the header row */
@media (min-width: 1081px) {
    .btn_book_Live_hed.hideonmobile_hd {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px;
        margin: 0 !important;
        white-space: nowrap;
    }
}

/* ---- slide-out panel: new design ---- */
#offcanvasRight {
    width: 460px !important;
    max-width: 96vw;
    border: 0 !important;
    box-shadow: -18px 0 60px rgba(28, 34, 40, .22);
}

#offcanvasRight .offcanvas-body {
    padding: 22px 24px 28px !important;
    background: var(--pr-sand);
}

.pr-oc-title {
    font-family: var(--pr-serif) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    margin: 0;
}

#offcanvasRight .img_footer_side {
    margin-bottom: 16px;
}

#offcanvasRight .boxes_body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#offcanvasRight .box_side {
    background: #fff !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: var(--pr-radius) !important;
    padding: 20px 20px 22px !important;
    box-shadow: var(--pr-shadow-sm);
    margin: 0 !important;
}

#offcanvasRight .box_side h4 {
    font-family: var(--pr-serif) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#offcanvasRight .customP {
    font-size: 12px;
    color: var(--pr-grey);
}

#offcanvasRight .grey__p {
    color: var(--pr-grey) !important;
    font-weight: 300;
    font-size: 13.5px !important;
    line-height: 1.5;
}

#offcanvasRight .icn_side {
    background: var(--pr-sand);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

#offcanvasRight .usr_icns {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    margin: 14px 0;
}

#offcanvasRight .usr_icns img.image--cover {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--pr-shadow-sm);
}

#offcanvasRight .usr_icns p {
    font-size: 12px;
    color: var(--pr-grey) !important;
    margin-top: 5px;
}

#offcanvasRight .usr_points p {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--pr-ink-soft);
    margin-bottom: 8px;
    line-height: 1.5;
}

#offcanvasRight .usr_points svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

/* panel buttons: pills */
#offcanvasRight .btn_call_side {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    border-radius: 999px !important;
    background: var(--pr-orange) !important;
    color: #fff !important;
    font-family: var(--pr-sans) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 14px 18px !important;
    margin-top: 6px;
    transition: transform .2s;
}

#offcanvasRight .btn_call_side:hover {
    transform: translateY(-2px);
}

#offcanvasRight .box_side_three .btn_call_side,
#offcanvasRight .btn_call_side.color_gren_ {
    background: var(--pr-teal) !important;
}

#offcanvasRight .btn_call_side svg {
    width: 17px;
    height: 17px;
}

/* book-a-call link under the phone button */
.pr-bookcall {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-family: var(--pr-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--dark-bg-color) !important;
    cursor: pointer;
    text-decoration: none;
}

.pr-bookcall:hover {
    text-decoration: underline !important;
}

/* protection footnote (replaces the old logo strip) */
.pr-oc-protect {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--pr-grey);
    text-align: center;
    font-weight: 300;
}

/* ═══════════ PHASE 2m — PIXEL PASS vs THE REFERENCE ═══════════ */

/* headline: exact mock scale & measure; per-element widths like the mock
   (block itself spans the grid so the proof row can run full width) */
.index-page .slider-items .sigle-item {
    max-width: 1240px !important;
}

.index-page .text_slider .sigle-item h2 {
    font-size: clamp(38px, 5.2vw, 68px) !important;
    line-height: 1.08 !important;
    max-width: 13em !important;
    margin-bottom: 18px !important;
}

.index-page .text_slider .sigle-item > p {
    max-width: 36em !important;
    margin-bottom: 34px !important;
}

/* proof row: single line at desktop, mock spacing */
.pr-hero-proof {
    max-width: none !important;
}

@media (min-width: 1100px) {
    .pr-hero-proof {
        flex-wrap: nowrap !important;
    }

    .pr-hero-proof span {
        white-space: nowrap;
    }
}

/* header pills: mock order (teal first, orange as the closer) + no icons */
@media (min-width: 1081px) {
    .btn_book_Live_hed.hideonmobile_hd {
        flex-direction: row-reverse !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a img,
    .btn_book_Live_hed.hideonmobile_hd a svg {
        display: none !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a {
        padding: 13px 24px !important;
        font-size: 12.5px !important;
        letter-spacing: .13em !important;
    }
}

/* eyebrow: mock margin under the pill */
.index-page .sigle-item .pr-eyebrow {
    margin-bottom: 26px !important;
}

/* hero CTAs: mock sizing */
.pr-btn-hero {
    font-size: 13.5px !important;
    padding: 16px 30px !important;
}

.pr-hero-ctas {
    gap: 16px !important;
}

/* ═══════════ PHASE 2n — BUTTON ALIGNMENT + SLIDE-OUT DETAILS ═══════════ */

/* header pills: identical height, perfectly level */
@media (min-width: 1081px) {
    .btn_book_Live_hed.hideonmobile_hd {
        align-items: center !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a {
        height: 44px !important;
        padding: 0 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin: 0 !important;
        vertical-align: middle;
    }
}

/* slide-out: icons transparent + centred with their headings */
#offcanvasRight .icn_side {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important;
}

#offcanvasRight .box_side > .d-flex {
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px;
}

#offcanvasRight .box_side h4 {
    margin: 0 !important;
    line-height: 1.2 !important;
}

#offcanvasRight .box_side .customP {
    margin: 2px 0 0 0 !important;
}

/* Book online card first, as requested */
#offcanvasRight .box_side_three {
    order: -1;
}

/* ═══════════ PHASE 2o — HEADER PILLS: TRUE ALIGNMENT ═══════════
   The visible pills are the .btn_call_side SPANS, each now wrapped in its
   own anchor (Blade updated: Book Online first, Speak To Us second).
   Anchors become invisible wrappers; the spans get identical pill metrics,
   so the two buttons sit perfectly level. */
@media (min-width: 1081px) {
    .btn_book_Live_hed.hideonmobile_hd {
        flex-direction: row !important;   /* DOM order now matches the mock */
        align-items: center !important;
        gap: 12px !important;
    }

    /* anchors: no box styling of their own */
    .btn_book_Live_hed.hideonmobile_hd a {
        display: inline-flex !important;
        align-items: center !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 12px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* the spans ARE the pills — identical metrics for both */
    .btn_book_Live_hed.hideonmobile_hd .btn_call_side {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 44px !important;
        padding: 0 24px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
        font-family: var(--pr-sans) !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        letter-spacing: .13em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        color: #fff !important;
        transform: none !important;
        transition: transform .25s ease, box-shadow .25s ease !important;
    }

    .btn_book_Live_hed.hideonmobile_hd a:hover .btn_call_side {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(28, 34, 40, .18) !important;
    }
}

/* ═══════════ PHASE 3a — "WHY BOOK" SECTION (mock .why, exact) ═══════════
   New markup (.pr-why in index.blade.php) replaces the legacy 6-icon band.
   Kicker + first icon chip pick up the site accent automatically. */
.pr-why {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

.pr-kicker {
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dark-bg-color, #D96D97);
    margin-bottom: 14px;
}

h2.pr-sec {
    font-family: var(--pr-serif);
    font-weight: 500;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--pr-ink);
    max-width: 18em;
    margin: 0;
    text-transform: none;
}

.pr-sec-sub {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    max-width: 44em;
    margin: 16px 0 0;
}

.pr-sec-head {
    margin-bottom: 52px;
}

.pr-sec-head.pr-center {
    text-align: center;
}

.pr-sec-head.pr-center h2.pr-sec,
.pr-sec-head.pr-center .pr-sec-sub {
    margin-left: auto;
    margin-right: auto;
}

.pr-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.pr-why-card {
    background: #fff;
    border-radius: var(--pr-radius);
    padding: 34px 28px;
    border: 1px solid var(--pr-line);
    transition: transform .3s, box-shadow .3s;
    text-align: left;
}

.pr-why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pr-shadow-md);
}

.pr-why-ico {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.pr-ico-accent {
    background: color-mix(in srgb, var(--main-bg-color, #E582A9) 16%, #fff);
}

.pr-ico-teal { background: #E4F5F5; }
.pr-ico-orange { background: #FFEDE3; }
.pr-ico-ink { background: #E9EDF1; }

.pr-why-card h3 {
    font-family: var(--pr-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

.pr-why-card p {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1000px) {
    .pr-why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .pr-why-grid { grid-template-columns: 1fr; }
}

/* ═══════════ PHASE 3b — HOLIDAY TYPES SECTION (mock .types, exact) ═══════════
   New markup (.pr-types in index.blade.php): whole card is the link,
   serif title bottom-left, "Discover →" reveals on hover. */
.pr-types {
    padding: 96px 0 !important;
    background: #fff;
}

.pr-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* #slider prefix beats legacy "#slider a {position:absolute;left:10%}" in style.css */
#slider.pr-types .pr-type-card,
.pr-type-card {
    position: relative !important;
    display: block !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    opacity: 1 !important;      /* legacy "#slider a" hides links until hover */
    border-radius: var(--pr-radius);
    overflow: hidden;
    aspect-ratio: 3 / 3.6;
    cursor: pointer;
    box-shadow: var(--pr-shadow-sm);
    text-decoration: none !important;
    color: #fff !important;
    font-family: var(--pr-sans) !important;
}

.pr-type-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
    margin: 0;
}

.pr-type-card:hover img {
    transform: scale(1.07);
}

.pr-type-card .pr-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 22, 30, 0) 38%, rgba(15, 22, 30, .82) 100%);
    transition: background .4s;
}

.pr-type-card .pr-tc-txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px;
    color: #fff;
}

#slider.pr-types .pr-type-card h3,
.pr-type-card h3 {
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: static !important;
}

.pr-type-card .pr-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--main-bg-color, #E582A9) 45%, #fff);
    margin-top: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: all .35s;
}

.pr-type-card:hover .pr-go {
    opacity: 1;
    transform: none;
}

/* CTA under the grid (kept from previous layout, restyled as the orange pill) */
.pr-types .holiday-grid-cta {
    text-align: center;
    margin: 44px 0 0;
}

@media (max-width: 1000px) {
    .pr-types-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .pr-types-grid { grid-template-columns: 1fr; }
}

/* ═══════════ PHASE 3c — INTRO / WELCOME TEXT (SEO copy, restyled) ═══════════
   The DB-driven websiteIntro stays where it is; presented as a comfortable
   reading column: centred serif heading, left-aligned paragraphs. */
.home-about-para-content.home-about-content-fw {
    max-width: 920px !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 72px 28px 24px !important;
    float: none !important;
}

.home-about-para-content .main-heading {
    font-family: var(--pr-serif) !important;
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    color: var(--pr-ink) !important;
    text-align: center !important;
    margin: 0 0 22px !important;
    text-transform: none !important;   /* legacy CSS uppercases .main-heading */
}

.home-about-para-content .texts_home,
.home-about-para-content .welcome-msg {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
}

.home-about-para-content .texts_home p,
.home-about-para-content .welcome-msg p {
    font-family: var(--pr-sans) !important;
    font-size: 15.5px !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: var(--pr-grey) !important;
    text-align: left !important;
    margin: 0 0 16px !important;
}

.home-about-para-content .texts_home a,
.home-about-para-content .welcome-msg a {
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--main-bg-color, #E582A9) 45%, transparent);
}

.home-about-para-content .texts_home a:hover,
.home-about-para-content .welcome-msg a:hover {
    border-bottom-color: var(--main-bg-color);
}

/* ═══════════ PHASE 3d — TRENDING DESTINATIONS (mock .dest, exact) ═══════════
   Regions only, DB-driven. First 4 mixed sizes, then See-more batches of 2. */
.pr-dest {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-month-note {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    max-width: 48em;
    margin-top: 18px;
}

.pr-month-note p {
    margin: 0 0 10px;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    color: var(--pr-grey) !important;
}

/* generic bottom-fade for clamped text blocks (class managed by planet-redesign.js) */
.pr-fade-bottom {
    position: relative;
}

.pr-fade-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(248, 245, 242, 0), var(--pr-sand) 88%);
    pointer-events: none;
}

/* smooth entrance for see-more revealed cards */
.pr-reveal-in {
    animation: prFadeUp .5s ease both;
}

@keyframes prFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.pr-month-more {
    display: inline-block;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    margin-top: 10px;
    cursor: pointer;
    text-decoration: none !important;
}

.pr-dest-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
}

.pr-dest-card {
    position: relative;
    display: block;
    border-radius: var(--pr-radius);
    overflow: hidden;
    min-height: 340px;
    box-shadow: var(--pr-shadow-sm);
    text-decoration: none !important;
}

.pr-dest-card.pr-big { grid-column: span 7; min-height: 460px; }
.pr-dest-card.pr-small { grid-column: span 5; min-height: 460px; }
.pr-dest-card.pr-half { grid-column: span 6; min-height: 340px; }

.pr-dest-card.pr-more-hidden { display: none; }

.pr-dest-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
    margin: 0;
}

.pr-dest-card:hover img {
    transform: scale(1.06);
}

.pr-dest-card .pr-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 22, 30, .05) 30%, rgba(15, 22, 30, .8) 100%);
}

.pr-dest-card .pr-d-txt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px;
    color: #fff;
}

.pr-dest-card .pr-d-tag {
    display: inline-block;
    background: var(--pr-teal);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.pr-dest-card .pr-d-tag.pr-hot { background: var(--pr-orange); }
.pr-dest-card .pr-d-tag.pr-lux { background: var(--main-bg-color, #E582A9); }

.pr-dest-card h3 {
    font-family: var(--pr-serif);
    font-size: 27px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.pr-dest-card .pr-d-country {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

.pr-dest-card .pr-d-txt p {
    font-family: var(--pr-sans);
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    max-width: 34em;
    margin: 8px 0 0;
}

.pr-dest-more-wrap {
    text-align: center;
    margin-top: 44px;
}

.pr-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--pr-ink);
    color: var(--pr-ink);
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s, color .25s, transform .25s;
}

.pr-btn-outline:hover {
    background: var(--pr-ink);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .pr-dest-card.pr-big,
    .pr-dest-card.pr-small,
    .pr-dest-card.pr-half {
        grid-column: span 12;
        min-height: 320px;
    }
}

/* ═══════════ PHASE 3e — REVIEWS SECTION (mock .reviews shell, Elfsight cards) ═══════════ */
.pr-reviews {
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--main-bg-color, #E582A9) 7%, #fff) 100%);
    padding: 96px 0;
}

.pr-rev-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin-bottom: 54px;
}

.pr-gpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    padding: 7px 16px;
    box-shadow: var(--pr-shadow-sm);
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-ink);
}

.pr-g { font-weight: 900; font-size: 15px; }
.pr-g span:nth-child(1) { color: #4285F4; }
.pr-g span:nth-child(2) { color: #EA4335; }
.pr-g span:nth-child(3) { color: #FBBC05; }
.pr-g span:nth-child(4) { color: #4285F4; }
.pr-g span:nth-child(5) { color: #34A853; }
.pr-g span:nth-child(6) { color: #EA4335; }

.pr-rev-num {
    font-family: var(--pr-serif);
    font-size: 76px;
    line-height: 1;
    color: var(--pr-ink);
}

.pr-rev-num .pr-rev-outof {
    font-size: 30px;
    color: var(--pr-grey);
}

.pr-rev-stars {
    color: #FFB300;
    letter-spacing: 5px;
    font-size: 24px;
}

.pr-rev-from {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 14.5px;
}

.pr-rev-widget {
    max-width: 1240px;
    margin: 0 auto;
}

/* tidy the Elfsight embed inside the new shell */
.pr-rev-widget .es-load-more-button,
.pr-rev-widget [class*="load-more"] {
    display: none !important;
}

/* Elfsight sometimes reserves far more container height than its visible cards
   (seen on pd) — cap the embed so the section can never show a tall empty gap */
.pr-rev-widget > [class*="elfsight-app"] {
    max-height: 560px;
    overflow: hidden;
}

.pr-rev-more {
    text-align: center;
    margin-top: 44px;
}

/* ═══════════ PHASE 3f — FAQ (independent columns) + CONSULT BAND UPGRADE ═══════════ */

/* FAQ — mock design; two separate stacks so open/close never gaps the other column */
.pr-faq {
    background: #fff;
    padding: 96px 0;
}

.pr-faq-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}

.pr-faq-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.pr-faq details {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .3s;
}

.pr-faq details[open] {
    background: #fff;
    box-shadow: var(--pr-shadow-sm);
}

.pr-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-family: var(--pr-serif);
    font-size: 17.5px;
    font-weight: 500;
    color: var(--pr-ink);
}

.pr-faq summary::-webkit-details-marker {
    display: none;
}

.pr-plus {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--main-bg-color, #E582A9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pr-sans);
    font-size: 18px;
    font-weight: 400;
    transition: transform .3s, background .3s;
}

.pr-faq details[open] .pr-plus {
    transform: rotate(45deg);
    background: var(--pr-ink);
}

.pr-faq-a {
    padding: 0 24px 22px;
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.7;
}

.pr-faq-a p { margin: 0 0 12px; }
.pr-faq-a p:last-child { margin-bottom: 0; }

.pr-faq-a ul,
.pr-faq-a ol {
    margin: 12px 0 12px 20px;
    padding: 0;
}

.pr-faq-a li { margin-bottom: 6px; }

.pr-faq-a img {
    max-width: 100%;
    border-radius: 8px;
}

@media (max-width: 860px) {
    .pr-faq-cols { grid-template-columns: 1fr; }
}

/* homepage FAQ: one full-width column */
.pr-faq-cols.pr-faq-single {
    grid-template-columns: 1fr;
}

/* ═══════════ PHASE 3h — PLANET TRAVEL FAMILY BAND (above the footer) ═══════════
   v2: full-colour brand logos in white cards on sand — no more washed-out grey. */
.pr-family {
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
    padding: 80px 0;
    text-align: center;
}

h2.pr-sec.pr-family-title {
    font-size: clamp(24px, 2.4vw, 32px);
    margin: 0 auto 10px;
}

.pr-family-sub {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 15.5px;
    font-weight: 300;
    margin: 0 0 40px;
}

.pr-family-logos {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}

.pr-family-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow-sm);
    padding: 30px 44px;
    min-width: 250px;
    text-decoration: none !important;
    transition: transform .3s, box-shadow .3s;
}

.pr-family-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.pr-family-card img {
    height: 48px;
    width: auto;
}

.pr-family-card span {
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
    transition: color .3s;
}

.pr-family-card:hover span {
    color: var(--pr-ink);
}

/* ═══════════ PHASE 4a — COUNTRY PAGE (mock: brazil-country-page) ═══════════ */

/* country hero: custom overlay on the DB banner image (mock .hero.country) */
.pr-chero-wrap {
    position: relative;
}

.pr-chero-wrap .hero-area,
.pr-chero-wrap .hero-area .slider-items,
.pr-chero-wrap .hero-area .hero_banner_img {
    height: 66vh !important;
    min-height: 520px !important;
}

.pr-chero-wrap .hero-area .hero_banner_img {
    width: 100%;
    object-fit: cover;
}

/* any legacy banner text/h1 stays hidden inside the wrap */
.pr-chero-wrap .top-banner-txt,
.pr-chero-wrap .text_slider {
    display: none !important;
}

.pr-chero {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: linear-gradient(100deg, rgba(15, 22, 30, .72) 0%, rgba(15, 22, 30, .38) 48%, rgba(15, 22, 30, .15) 100%);
    pointer-events: none;
}

.pr-chero-inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    pointer-events: auto;
}

.pr-chero-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pr-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}

.pr-crumb a {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    text-decoration: none !important;
}

.pr-crumb span { opacity: .6; }
.pr-crumb b { color: #fff; }

.pr-chero .pr-eyebrow {
    margin: 0;
}

.pr-chero-h1 {
    font-family: var(--pr-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(34px, 4.6vw, 62px) !important;
    line-height: 1.08 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    max-width: 16em;
    margin: 0 0 18px !important;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    text-align: left !important;
}

.pr-chero-h1 em {
    font-style: italic;
    color: color-mix(in srgb, var(--main-bg-color, #E582A9) 45%, #fff);
}

.pr-chero-lead {
    font-family: var(--pr-sans);
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 300;
    max-width: 36em;
    color: rgba(255, 255, 255, .94);
    margin: 0 0 30px;
    line-height: 1.6;
}

.pr-chero .pr-hero-ctas { margin-bottom: 0; }
.pr-chero .pr-hero-proof { margin-top: 34px; }

/* why-you'll-love band (country highlights) */
.pr-love-band {
    background: #fff;
    border-bottom: 1px solid var(--pr-line);
    padding: 26px 0;
}

/* three even columns so long highlight texts wrap tidily instead of straggling */
.pr-love-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
}

.pr-love-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: var(--pr-serif);
    font-size: 16px;
    line-height: 1.45;
    color: var(--pr-ink);
    text-align: left;
}

.pr-love-ring {
    width: 22px;
    height: 22px;
    border: 3px solid var(--main-bg-color, #E582A9);
    border-radius: 50%;
    flex: none;
    margin-top: 2px;
}

@media (max-width: 860px) {
    .pr-love-inner { grid-template-columns: 1fr; gap: 16px; }
}

/* intro + expert card */
.pr-cintro {
    background: var(--pr-sand);
    padding: 80px 0;
}

.pr-cintro-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: start;
}

.pr-cintro-text,
.pr-cintro-text p {
    font-family: var(--pr-sans);
    color: var(--pr-ink-soft, #3A434C);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
}

.pr-cintro-text p { margin: 0 0 18px; }

.pr-expert-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: var(--pr-shadow-sm);
    text-align: center;
}

.pr-expert-card h3 {
    font-family: var(--pr-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 16px 0 12px;
    text-transform: none;
}

.pr-expert-card p {
    font-family: var(--pr-sans);
    font-size: 14.5px;
    color: var(--pr-grey);
    font-weight: 300;
    margin: 0 0 16px;
}

.pr-expert-card .pr-btn-hero {
    width: 100%;
    justify-content: center;
}

.pr-expert-mini {
    font-family: var(--pr-sans);
    font-size: 12.5px;
    color: var(--pr-grey);
    margin-top: 12px;
}

.pr-expert-mini a {
    font-weight: 700;
    color: var(--pr-ink) !important;
}

.pr-expert-card .pr-gpill b { font-weight: 900; font-style: normal; }
.pr-expert-card .pr-gpill i { font-style: normal; font-weight: 900; }
.pr-expert-card .pr-gpill i:nth-of-type(1) { color: #4285F4; }

/* regions grid: shorter cards than holiday types */
.pr-cregions {
    background: #fff;
    padding: 96px 0;
}

.pr-region-card {
    aspect-ratio: 3 / 2.35 !important;
}

.pr-region-card h3 {
    font-size: 22px !important;
}

/* region map: launch button + modal */
.pr-map-btn {
    margin-top: 26px;
}

.pr-map-modal .pr-panel {
    width: min(1100px, 96vw);
    height: min(740px, 92vh);
    display: flex;
    flex-direction: column;
}

#prRegionMap {
    flex: 1;
    min-height: 0;
}

.pr-map-card {
    font-family: var(--pr-sans);
    max-width: 230px;
    padding: 4px 2px;
}

.pr-map-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.pr-map-card b {
    display: block;
    font-family: var(--pr-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--pr-ink);
    margin-bottom: 6px;
}

.pr-map-card a {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    text-decoration: none !important;
}

/* hand-picked hotels band */
.pr-hotel-note {
    background: var(--pr-ink);
    color: #fff;
    padding: 54px 0;
}

.pr-hotel-note-inner {
    display: flex;
    align-items: center;
    gap: 34px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pr-hotel-note h3 {
    font-family: var(--pr-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    color: #fff;
    max-width: 22em;
    margin: 0 0 10px;
    text-transform: none;
}

.pr-hotel-note h3 em {
    font-style: italic;
    color: color-mix(in srgb, var(--main-bg-color, #E582A9) 55%, #fff);
}

.pr-hotel-note p {
    font-family: var(--pr-sans);
    color: #B9C2CA;
    font-weight: 300;
    font-size: 15px;
    max-width: 40em;
    margin: 0;
}

/* tailor-made tours */
.pr-ctours {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pr-tour-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}

.pr-tour-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pr-shadow-md);
}

.pr-tour-card.pr-more-hidden { display: none; }

.pr-tour-im {
    position: relative;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
}

.pr-tour-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    margin: 0;
}

.pr-tour-card:hover .pr-tour-im img {
    transform: scale(1.06);
}

.pr-tour-im .pr-d-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-block;
    background: rgba(28, 34, 40, .72);      /* dark glass: legible on light or dark imagery */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.pr-tour-tx {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pr-tour-tx h3 {
    font-family: var(--pr-serif);
    font-size: 19.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

.pr-go2 {
    margin-top: auto;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color));
}

@media (max-width: 1000px) {
    .pr-cintro-grid { grid-template-columns: 1fr; gap: 40px; }
    .pr-tours-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .pr-tours-grid { grid-template-columns: 1fr; }
}

/* ═══════════ PHASE 4d — REGION PAGE (mock: el-gouna-region-page) ═══════════ */

/* season at a glance */
.pr-season {
    background: #fff;
    padding: 96px 0;
}

.pr-season-card {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    padding: 38px 36px;
}

.pr-season-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.pr-month {
    padding: 14px 0 12px;
    text-align: center;
    font-family: var(--pr-serif);
    font-size: 15px;
    color: #fff;
}

.pr-month small {
    display: block;
    font-family: var(--pr-sans);
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .85;
    margin-top: 2px;
    text-transform: uppercase;
}

.pr-m-best { background: var(--month-dark-color, var(--main-bg-color, #E582A9)); }
.pr-m-good { background: var(--month-light-color, color-mix(in srgb, var(--main-bg-color, #E582A9) 45%, #fff)); }
.pr-m-poor { background: #E4E0DB; color: #8B8578; }

.pr-season-legend {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-ink-soft, #3A434C);
}

.pr-sl-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-sw {
    width: 14px;
    height: 14px;
    display: inline-block;
}

.pr-sw-best { background: var(--month-dark-color, var(--main-bg-color, #E582A9)); }
.pr-sw-good { background: var(--month-light-color, color-mix(in srgb, var(--main-bg-color, #E582A9) 45%, #fff)); }
.pr-sw-poor { background: #E4E0DB; }

@media (max-width: 860px) {
    .pr-season-grid { grid-template-columns: repeat(6, 1fr); }
}

/* resort text sub-headings inside the intro column */
.pr-rt-sub {
    font-family: var(--pr-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 22px 0 10px;
    text-transform: none;
}

/* skill bars */
.pr-skills {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 44px;
}

.pr-skill h4 {
    font-family: var(--pr-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--pr-ink);
    margin: 0 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-transform: none;
}

.pr-skill h4 span {
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 900;
    color: var(--dark-bg-color, var(--main-bg-color));
}

.pr-bar {
    height: 10px;
    background: #EADFD6;
    border-radius: 999px;
    overflow: hidden;
}

.pr-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--main-bg-color, #E582A9), var(--dark-bg-color, #D96D97));
    transition: width 1.1s cubic-bezier(.25, .7, .3, 1);
}

@media (max-width: 760px) {
    .pr-skill-grid { grid-template-columns: 1fr; }
}

/* gallery */
.pr-rgallery {
    background: #fff;
    padding: 96px 0;
}

.pr-gal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pr-gal-grid a {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 2.9;
    display: block;
    cursor: zoom-in;
}

.pr-gal-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    margin: 0;
}

.pr-gal-grid a:hover img {
    transform: scale(1.06);
}

@media (max-width: 760px) {
    .pr-gal-grid { grid-template-columns: 1fr 1fr; }
}

/* recommended hotels */
.pr-rhotels {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-hotels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.pr-hotel-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
}

.pr-hotel-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pr-shadow-md);
}

.pr-hotel-im {
    position: relative;
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
    display: block;
}

.pr-hotel-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    margin: 0;
}

.pr-hotel-card:hover .pr-hotel-im img {
    transform: scale(1.05);
}

.pr-hotel-price {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-ink);
}

.pr-hotel-price b {
    font-family: var(--pr-serif);
    font-size: 16px;
}

.pr-stars-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--pr-ink);
    color: #FFC107;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.pr-hotel-offer {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: var(--pr-orange);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
}

.pr-hotel-tx {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.pr-hotel-tx h3 {
    font-family: var(--pr-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

.pr-hotel-tx ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.pr-hotel-tx li {
    font-family: var(--pr-sans);
    font-size: 14px;
    color: var(--pr-grey);
    font-weight: 300;
    padding-left: 20px;
    position: relative;
}

.pr-hotel-tx li:before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--pr-teal);
    font-size: 12px;
}

.pr-tagrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pr-tag {
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

.pr-tag-0 { background: color-mix(in srgb, var(--main-bg-color, #E582A9) 18%, #fff); color: var(--dark-bg-color, var(--main-bg-color)); }
.pr-tag-1 { background: #E4F5F5; color: #3E9EA3; }
.pr-tag-2 { background: #FFEDE3; color: #C65A22; }

.pr-hotel-tx .pr-go2 { margin-top: auto; }

.pr-tour-desc {
    font-family: var(--pr-sans);
    color: var(--pr-grey);
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 860px) {
    .pr-hotels-grid { grid-template-columns: 1fr; }
}

/* season card: live wind button sits at the end of the legend row */
.pr-season-wind {
    margin-left: auto;
    padding: 11px 22px;
    font-size: 11.5px;
}

/* "rest of the country" hotel cards (replaces the Hotels tab) */
.pr-chotels {
    background: #fff;
    padding: 96px 0;
}

.pr-chotels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pr-chotel-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
    text-decoration: none !important;
}

.pr-chotel-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.pr-chotel-card.pr-more-hidden { display: none; }

.pr-chotel-im {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.pr-chotel-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    margin: 0;
}

.pr-chotel-card:hover .pr-chotel-im img {
    transform: scale(1.05);
}

.pr-chotel-tx {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pr-chotel-tx h3 {
    font-family: var(--pr-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

.pr-chotel-region {
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
}

.pr-chotel-tx .pr-go2 {
    margin-top: 10px;
    font-size: 11.5px;
}

@media (max-width: 900px) {
    .pr-chotels-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .pr-chotels-grid { grid-template-columns: 1fr; }
}

/* ═══════════ PHASE 4e — ENQUIRY FORM (Salesforce web-to-lead, pure reskin) ═══════════
   Shared partial (tours, liveaboards, hotel details, contact). Markup, field
   names and step JS untouched — this restyles the existing classes only. */

.contact-form-container {
    background: var(--pr-sand);
    padding: 96px 0;
}

.contact-form-container .contact-heading,
.contact-form-container #form-accordion {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* pink banner rows → design-language section heading */
.contact-heading {
    background: transparent !important;
    padding: 0 28px;
}

.contact-heading .contact-heading-para {
    background: transparent !important;
    padding: 0 !important;
}

.contact-heading p.enquiry_description {
    font-family: var(--pr-sans) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    margin: 0 0 6px !important;
}

.contact-heading p:not(.enquiry_description) {
    font-family: var(--pr-serif) !important;
    font-size: clamp(26px, 2.8vw, 38px) !important;
    font-weight: 500 !important;
    color: var(--pr-ink) !important;
    text-transform: none !important;
    margin: 0 0 30px !important;
}

.contact-heading p:not(.enquiry_description) a {
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    font-style: italic;
}

/* the form itself: white card, numbered steps */
#form-accordion {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    padding: 10px 34px 34px;
    counter-reset: prstep;
}

#form-accordion .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid var(--pr-line) !important;
    background: transparent !important;
    counter-increment: prstep;
}

#form-accordion .accordion-item:last-child {
    border-bottom: 0 !important;
}

/* dark step bars → clean serif step headers with numbered dots */
#form-accordion .accordion-header {
    background: transparent !important;
}

#form-accordion .accordion-button {
    background: transparent !important;
    color: var(--pr-ink) !important;
    font-family: var(--pr-serif) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    padding: 22px 8px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
}

#form-accordion .accordion-button::before {
    content: counter(prstep);
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--main-bg-color, #E582A9);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#form-accordion .accordion-button::after {
    filter: grayscale(1) brightness(.4);
}

/* rows: label + fields */
#form-accordion .cotact-form-flex {
    align-items: center;
    gap: 24px;
    padding: 12px 0;
}

#form-accordion .cotact-form-flex > p,
#form-accordion .cotact-form-flex > .fm-lora {
    font-family: var(--pr-serif) !important;
    font-size: 16.5px !important;
    font-weight: 500 !important;
    color: var(--pr-ink) !important;
    margin: 0 !important;
}

/* inputs & selects: redesign field style */
#form-accordion select,
#form-accordion input[type="text"],
#form-accordion input[type="email"],
#form-accordion input[type="tel"],
#form-accordion input[type="number"],
#form-accordion textarea {
    font-family: var(--pr-sans) !important;
    font-size: 14.5px !important;
    color: var(--pr-ink) !important;
    background: #fff !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    transition: border-color .25s, box-shadow .25s;
}

#form-accordion select:focus,
#form-accordion input:focus,
#form-accordion textarea:focus {
    outline: none !important;
    border-color: var(--main-bg-color, #E582A9) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-bg-color, #E582A9) 18%, transparent) !important;
}

#form-accordion .contact-form-select-option-flex {
    gap: 12px;
}

/* next / submit buttons → orange pills */
#form-accordion .accordion-button.btn-destination,
#form-accordion button[type="button"].white,
#form-accordion .contact-form-accordian-button button,
#form-accordion .submit-button,
#form-accordion .submit-enquiry {
    background: var(--pr-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
    transition: transform .25s, box-shadow .25s;
    width: auto !important;
}

#form-accordion .submit-button:hover,
#form-accordion .contact-form-accordian-button button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 119, 58, .45);
}

#form-accordion .contact-form-accordian-button {
    padding: 10px 0 20px;
}

#form-accordion textarea {
    width: 100%;
    min-height: 110px;
}

@media (max-width: 760px) {
    #form-accordion { padding: 6px 18px 24px; }
    #form-accordion .cotact-form-flex { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ═══════════ PHASE 4c — TOUR DETAILS PAGE ═══════════ */

/* compact tour hero on the first gallery image */
.pr-thero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: var(--pr-ink);
    background-size: cover;
    background-position: center;
    padding: 90px 0 70px;
}

.pr-thero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(15, 22, 30, .78) 0%, rgba(15, 22, 30, .45) 50%, rgba(15, 22, 30, .2) 100%);
}

.pr-thero-inner {
    position: relative;
    z-index: 2;
}

.pr-thero .pr-crumb { margin-bottom: 20px; display: inline-flex; }
.pr-thero .pr-eyebrow { display: inline-flex; margin: 0 0 22px 18px; }
.pr-thero .pr-chero-h1 { max-width: 18em; }

.pr-thero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}

.pr-thero-price {
    font-family: var(--pr-serif);
    font-size: 21px;
    font-weight: 500;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 10px 20px;
}

.pr-thero-chip {
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    padding: 10px 16px;
}

/* price card inside the expert card */
.pr-expert-card h3 small {
    font-size: 14px;
    font-weight: 400;
    color: var(--pr-grey);
}

.pr-price-block {
    text-align: left;
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--pr-grey);
    border-top: 1px solid var(--pr-line);
    padding: 14px 0 10px;
    margin-top: 4px;
    line-height: 1.6;
}

.pr-price-block b {
    display: block;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-ink);
    margin-bottom: 6px;
}

.pr-price-block p { margin: 0 0 6px; }

/* route map section */
.pr-troute {
    background: #fff;
    padding: 96px 0;
}

.pr-troute-map {
    height: min(620px, 72vh);
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
}

/* itinerary timeline */
.pr-titinerary {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-tl {
    position: relative;
    max-width: 860px;
}

.pr-tl::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--pr-ink) 0 5px, transparent 5px 11px);
    opacity: .28;
}

.pr-tl-item {
    position: relative;
    padding-left: 68px;
    margin-bottom: 30px;
    scroll-margin-top: 130px;
}

.pr-tl-marker {
    position: absolute;
    left: 0;
    top: 2px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--main-bg-color, #E582A9);
    border: 3px solid #fff;
    box-shadow: var(--pr-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-tl-marker span {
    color: #fff;
    font-family: var(--pr-sans);
    font-weight: 900;
    font-size: 16px;
}

.pr-tl-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    padding: 26px 28px 24px;
}

.pr-tl-days {
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color));
    margin-bottom: 8px;
}

.pr-tl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pr-tl-head h3 {
    font-family: var(--pr-serif);
    font-size: 23px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

.pr-tl-gallery {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid var(--pr-line);
    color: var(--pr-grey);
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .25s, color .25s;
    white-space: nowrap;
}

.pr-tl-gallery:hover {
    border-color: var(--pr-ink);
    color: var(--pr-ink);
}

.pr-tl-hotel {
    display: inline-block;
    font-family: var(--pr-serif);
    font-size: 16.5px;
    font-weight: 500;
    color: var(--pr-ink) !important;
    margin: 8px 12px 0 0;
    border-bottom: 1px solid color-mix(in srgb, var(--main-bg-color, #E582A9) 55%, transparent);
    cursor: pointer;
    text-decoration: none !important;
}

.pr-tl-board {
    font-family: var(--pr-sans);
    font-size: 12.5px;
    color: var(--pr-grey);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pr-tl-note {
    font-family: var(--pr-sans);
    font-size: 14px;
    font-style: italic;
    color: var(--pr-ink-soft, #3A434C);
    margin-top: 12px;
}

.pr-tl-note p { margin: 0 0 8px; }

.pr-tl-about {
    margin-top: 16px;
    border-top: 1px solid var(--pr-line);
}

.pr-tl-about summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 0 6px;
    font-family: var(--pr-serif);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--pr-ink);
}

.pr-tl-about summary::-webkit-details-marker { display: none; }

.pr-tl-about .pr-plus {
    width: 24px;
    height: 24px;
    font-size: 16px;
}

.pr-tl-about-text {
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--pr-grey);
    line-height: 1.7;
    padding: 6px 0 8px;
}

.pr-tl-about-text p { margin: 0 0 10px; }

@media (max-width: 760px) {
    .pr-tl::before { left: 17px; }
    .pr-tl-item { padding-left: 56px; }
    .pr-tl-marker { width: 36px; height: 36px; }
}

/* header logo: kill the legacy scroll-state swap (common.js adds .theme-bg-color
   past 100px scroll; legacy CSS then inverts the logo on a coloured block).
   The new colour logo stays as-is in every header state. */
.theme-bg-color .web-logo img,
.header.theme-bg-color .web-logo img {
    filter: none !important;
}

.theme-bg-color .web-logo,
.header.theme-bg-color .web-logo {
    background: transparent !important;
    border-right-color: transparent !important;
}

.header.theme-bg-color {
    background: rgba(255, 255, 255, .92) !important;
}

/* consult band: DB banner image behind the dark gradient */
.pr-consult {
    position: relative;
    overflow: hidden;
}

.pr-consult-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.pr-consult::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(20, 26, 33, .88) 0%, rgba(20, 26, 33, .68) 55%, rgba(20, 26, 33, .35) 100%);
}

.pr-consult .pr-consult-wrap {
    position: relative;
    z-index: 2;
}

/* protection strip under the consult band */
.pr-protect {
    background: #fff;
    padding: 56px 0;
    border-top: 1px solid var(--pr-line);
}

.pr-protect .pr-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}

.pr-protect p {
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--pr-grey);
    max-width: 36em;
    margin: 0;
}

.pr-protect p strong {
    color: var(--pr-ink);
    font-weight: 700;
}

.pr-protect img {
    height: 56px;
    width: auto;
}

/* ═══════════ PHASE 3g — FOOTER (mock design; protection folded in) ═══════════ */
.pr-footer {
    background: var(--pr-ink);
    color: #B9C2CA;
    padding: 74px 0 34px;
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 300;
    position: relative;
}

.pr-foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
    gap: 46px;
    margin-bottom: 52px;
}

.pr-footer h4 {
    font-family: var(--pr-serif);
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 18px;
    text-transform: none;
    letter-spacing: 0;
}

.pr-footer p {
    color: #B9C2CA;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    margin: 0 0 14px;
}

.pr-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pr-footer li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.pr-footer a {
    color: #B9C2CA;
    text-decoration: none !important;
    transition: color .25s;
    cursor: pointer;
}

.pr-footer a:hover {
    color: #fff;
}

.pr-foot-logo {
    height: 46px;
    width: auto;
    opacity: .95;   /* proper white logo asset ({domain}-w.png), no filter needed */
    margin-bottom: 18px;
}

.pr-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2A323A;
    color: #fff;
    transition: background .25s;
}

.pr-foot-social a:hover {
    background: var(--main-bg-color, #E582A9);
}

/* newsletter: MailerLite embedded form restyled as the mock pill row */
.pr-newsletter .ml-form-horizontalRow,
.pr-newsletter-row {
    display: flex !important;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    background: #2A323A;
    margin-top: 14px;
}

.pr-newsletter .ml-input-horizontal {
    flex: 1;
    min-width: 0;
}

.pr-newsletter input[type="email"] {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 14px 20px !important;
    font-family: var(--pr-sans) !important;
    font-size: 14px !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pr-newsletter input[type="email"]::placeholder {
    color: #87929C;
}

.pr-newsletter input[type="email"]:focus {
    outline: none !important;
}

.pr-newsletter .ml-button-horizontal button {
    background: var(--main-bg-color, #E582A9) !important;
    border: 0 !important;
    color: #fff !important;
    font-family: var(--pr-sans) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 0 24px !important;
    height: 100% !important;
    cursor: pointer;
    border-radius: 0 !important;
    transition: filter .25s;
}

.pr-newsletter .ml-button-horizontal button:hover {
    filter: brightness(.92);
}

.pr-newsletter-success {
    color: #fff !important;
    margin-top: 14px !important;
}

/* protection row folded into the footer */
.pr-foot-protect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
    border-top: 1px solid #2A323A;
    padding: 26px 0;
}

.pr-foot-protect p {
    max-width: 44em;
    margin: 0;
}

.pr-foot-protect p strong {
    color: #fff;
}

.pr-foot-protect a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.pr-foot-protect img {
    height: 52px;
    width: auto;
    opacity: .92;
}

.pr-foot-bottom {
    border-top: 1px solid #2A323A;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #87929C;
}

@media (max-width: 900px) {
    .pr-foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .pr-foot-grid { grid-template-columns: 1fr; }
}

/* ═══════════ PHASE 5 — SHARP EDITION (premium square corners) ═══════════
   Marcus 19 Jul: cards/panels/imagery go square for a more upscale, editorial
   feel. Buttons, tags, badges and avatars deliberately STAY as pills/circles —
   the sharp-surface + soft-control contrast is the premium pattern.
   Revert: delete this block (or set --pr-radius back to 18px). */
:root {
    --pr-radius: 0px;
}

.banner-search,
.types-menu-body,
.more-menu-body,
.pr-modal .pr-panel,
.pr-consult-panel,
.pr-expert-card,
.pr-faq details,
.faq-item,
.pr-why-ico,
.pr-map-card img,
.pr-faq-a img,
#offcanvasRight .icn_side,
.pr-foot-protect img,
.pr-answer img,
.list-item-box-container .list-item-box,
.cookie-policy {
    border-radius: 0 !important;
}

/* ═══════════ PHASE 4e.1 — ENQUIRY FORM FIXES (Marcus 19 Jul) ═══════════
   1. Step numbers 1/2/3 belong to the three step HEADINGS, not the nav
      buttons (the Prev/Next pills share Bootstrap's .accordion-button class,
      so the old ::before stamped a stray number on them).
   2. "Previous" becomes a quiet ghost pill; "Next" stays orange.
   3. Submit sits bottom-right; newsletter opt-in box goes sand, not black. */

/* kill the old number + caret on every accordion BUTTON (nav pills) */
#form-accordion .accordion-button::before { content: none !important; }
#form-accordion .accordion-button::after { display: none !important; }

/* step headings: dark legacy bars → numbered serif headers */
#form-accordion .contact-form-heading {
    background: transparent !important;
    padding: 0 !important;
}

#form-accordion .contact-form-heading p {
    background: transparent !important;
    color: var(--pr-ink) !important;
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 8px 4px !important;
    margin: 0 !important;
}

#form-accordion .contact-form-heading p::before {
    content: counter(prstep);
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--main-bg-color, #E582A9);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Previous: ghost outline pill (Next keeps the orange pill styling) */
#form-accordion .contact-form-accordian-button button.pr-prev {
    background: transparent !important;
    color: var(--pr-ink) !important;
    border: 1.5px solid var(--pr-line) !important;
    box-shadow: none !important;
}

#form-accordion .contact-form-accordian-button button.pr-prev:hover {
    border-color: var(--pr-ink) !important;
    transform: none;
    box-shadow: none !important;
}

/* newsletter opt-in: black slab → sand panel in the design language */
#form-accordion .contact-form-para {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line);
    padding: 22px 26px !important;
    margin: 28px 0 0 !important;
}

#form-accordion .contact-form-para p {
    color: var(--pr-ink) !important;
    font-family: var(--pr-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65;
    margin: 0 0 8px !important;
}

#form-accordion .contact-form-para p:last-child { margin-bottom: 0 !important; }

#form-accordion .contact-form-para a {
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* submit row: bottom-right, breathing room, legacy 75px giant reined in */
#form-accordion .pr-submit-row {
    justify-content: flex-end;
    padding: 28px 0 6px;
}

#form-accordion .pr-submit-row .submit-button {
    height: auto !important;
    margin: 0 !important;
    min-width: 200px;
}

/* ═══════════ PHASE 4d.1 — REGION SUB-MENU (centred tabs) ═══════════ */

.pr-subnav {
    background: #fff;
    border-bottom: 1px solid var(--pr-line);
    padding: 26px 24px;
    text-align: center;
}

.pr-subnav-tabs {
    display: inline-flex;
    border: 1px solid var(--pr-line);
    background: #fff;
}

.pr-subnav-tab {
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-ink) !important;
    padding: 15px 36px;
    text-decoration: none !important;
    border-left: 1px solid var(--pr-line);
    transition: background .25s, color .25s;
}

.pr-subnav-tab:first-child { border-left: 0; }

.pr-subnav-tab:hover {
    background: var(--pr-sand);
    color: var(--pr-ink) !important;
}

.pr-subnav-tab.active {
    background: var(--main-bg-color);
    color: #fff !important;
}

@media (max-width: 640px) {
    .pr-subnav { padding: 18px 12px; }
    .pr-subnav-tabs { width: 100%; }
    .pr-subnav-tab { flex: 1; padding: 13px 8px; font-size: 10.5px; letter-spacing: .1em; }
}

/* ═══════════ PHASE 4f — SPORTS CENTRES (list + centre details) ═══════════ */

/* neutralise the legacy 75%-width wrapper so pr bands run full-bleed */
.pr-centres.hotel-content,
.pr-centres.center-content {
    width: 100% !important;
    margin: 0 !important;
}

/* h1 variant of the section heading (these pages carry their h1 in the band) */
h1.pr-sec {
    font-family: var(--pr-serif);
    font-weight: 500;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.15;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

h1.pr-sec em {
    font-style: italic;
    color: var(--dark-bg-color, var(--main-bg-color));
}

.pr-centres-head {
    background: var(--pr-sand);
    padding: 66px 0 60px;
    text-align: center;
}

.pr-centres-head h1.pr-sec,
.pr-centres-head .pr-sec-sub {
    margin-left: auto;
    margin-right: auto;
}

/* — list mode: centre cards — */
.pr-centres-list {
    background: #fff;
    padding: 72px 0 96px;
}

.pr-centre-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.pr-centre-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform .3s, box-shadow .3s;
}

.pr-centre-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
}

.pr-centre-im {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pr-centre-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    transition: transform .5s;
}

.pr-centre-card:hover .pr-centre-im img { transform: scale(1.05); }

.pr-centre-body {
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    flex: 1;
}

.pr-centre-body h3 {
    font-family: var(--pr-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

.pr-centre-body p {
    font-family: var(--pr-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--pr-grey);
    margin: 0;
}

.pr-centre-body .pr-btn-hero { margin-top: auto; }

.pr-centres-empty {
    font-family: var(--pr-sans);
    font-size: 16px;
    color: var(--pr-grey);
    text-align: center;
    margin: 0;
}

/* — details mode: intro — */
.pr-centre-main {
    background: #fff;
    padding: 56px 0 10px;
}

.pr-centre-text h1,
.pr-centre-text h2,
.pr-centre-text h3 {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    font-size: 24px !important;
    text-transform: none !important;
    background: transparent !important;
    margin: 26px 0 10px !important;
}

.pr-centre-text p,
.pr-centre-text li {
    font-family: var(--pr-sans) !important;
    font-size: 15.5px !important;
    font-weight: 300 !important;
    line-height: 1.8 !important;
    color: var(--pr-grey) !important;
}

.pr-centre-text .dest-gallery-content-hightlight {
    background: var(--pr-sand) !important;
    border-left: 3px solid var(--main-bg-color);
    padding: 14px 18px !important;
    font-size: 15.5px !important;
}

/* — details mode: courses & pricing block — */
#savecentreform { margin: 0 0 90px; }

.pr-centre-block {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    margin: 40px 0 0;
    overflow: hidden;
}

.pr-centre-block-head {
    padding: 34px 36px 6px;
}

.pr-centre-block-head .pr-kicker { margin-bottom: 8px; }

h2.pr-sec-sm {
    font-family: var(--pr-serif);
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.2;
    color: var(--pr-ink);
    margin: 0;
    text-transform: none;
}

h2.pr-sec-sm em {
    font-style: italic;
    font-weight: 500;
    color: var(--pr-grey);
    font-size: .72em;
}

.pr-centre-photo {
    margin: 22px 36px 0;
    aspect-ratio: 21 / 8;
    background-size: cover;
    background-position: center;
}

.pr-centres .collpase_innerBlock { padding: 0 36px 34px; }

/* date row */
.pr-centres .date-submit-flex {
    margin: 26px 0 22px;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--pr-line);
    padding-bottom: 22px;
}

.pr-centre-dates-label {
    font-family: var(--pr-serif);
    font-size: 16.5px;
    font-weight: 500;
    color: var(--pr-ink);
}

.pr-centres #select_date {
    font-family: var(--pr-sans) !important;
    font-size: 14.5px !important;
    color: var(--pr-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 0 !important;
    padding: 11px 40px 11px 14px !important;
    width: auto;
}

.pr-centres .date-submit-flex .submit-button {
    background: var(--pr-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 13px 28px !important;
    height: auto !important;
    margin: 0 !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
    transition: transform .25s, box-shadow .25s;
}

.pr-centres .date-submit-flex .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 119, 58, .45);
}

/* service rows */
.pr-centres .newcollapse_in {
    border: 1px solid var(--pr-line) !important;
    border-bottom: 1px solid var(--pr-line) !important;
    background: #fff;
    padding: 18px 22px !important;
    margin: 0 0 14px;
    transition: box-shadow .25s;
}

.pr-centres .newcollapse_in:hover { box-shadow: var(--pr-shadow-sm); }

.pr-centres .title__Inners h5 {
    font-family: var(--pr-sans) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 3px !important;
}

.pr-centres .title__Inners span {
    font-family: var(--pr-serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    line-height: 1.35 !important;
}

/* quantity stepper */
.pr-centres .btns_in {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--pr-ink) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .25s, background .25s;
}

.pr-centres .btns_in:hover {
    border-color: var(--pr-ink) !important;
    background: var(--pr-sand) !important;
}

.pr-centres .qunatity__Values {
    font-family: var(--pr-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pr-ink) !important;
    border: 0 !important;
    background: transparent !important;
    width: 44px !important;
    text-align: center;
    margin: 0 !important;
}

.pr-centres .service_unit__type {
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--pr-grey) !important;
}

.pr-centres .price__boxes span {
    font-family: var(--pr-serif) !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

/* details toggle + expanded panel */
.pr-centres a.btn-header-link {
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    text-decoration: none !important;
    margin-top: 10px;
    padding: 4px 0 0 !important;
}

.pr-centres .note_colapsse {
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
    margin-top: 14px;
    padding: 18px 20px;
}

.pr-centres .sports-slider { margin-bottom: 14px; }

.pr-centres .description_section p,
.pr-centres .note_section p {
    font-family: var(--pr-sans) !important;
    font-size: 14.5px !important;
    font-weight: 300 !important;
    line-height: 1.75 !important;
    color: var(--pr-ink) !important;
}

.pr-centres .note_section h5 {
    font-family: var(--pr-sans) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pr-ink) !important;
    margin: 12px 0 4px !important;
}

@media (max-width: 860px) {
    .pr-centre-grid { grid-template-columns: 1fr; }
    .pr-centre-block-head { padding: 26px 20px 4px; }
    .pr-centre-photo { margin: 18px 20px 0; aspect-ratio: 16 / 9; }
    .pr-centres .collpase_innerBlock { padding: 0 20px 24px; }
}

/* centre running total — appears once something is selected */
.pr-centre-total {
    display: none;
    align-items: baseline;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid var(--pr-line);
    margin-top: 10px;
    padding-top: 20px;
}

.pr-centre-total.show { display: flex; }

.pr-centre-total-label {
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-grey);
}

.pr-centre-total b {
    font-family: var(--pr-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--pr-ink);
}

/* centre-details hero: first gallery image under the standard overlay */
.pr-centre-hero {
    height: 66vh;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-color: var(--pr-ink);
}

#savecentreform { scroll-margin-top: 110px; }

/* region map lightbox: wide panel, iframe fills */
.pr-map-lb .pr-panel {
    width: min(1200px, 96vw);
    height: min(820px, 92vh);
}

/* ═══════════ PHASE 4g — HOLIDAY-TYPE PAGE ═══════════ */

.pr-type-results {
    background: #fff;
    padding: 96px 0;
}

/* compact 3-up hotel cards on this page */
.pr-type-results .pr-hotels-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pr-type-results .pr-hotel-tx { padding: 18px 20px 20px; gap: 9px; }
.pr-type-results .pr-hotel-tx h3 { font-size: 18.5px; }
.pr-type-results .pr-hotel-tx li { font-size: 13px; }

.pr-hloc {
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    text-decoration: none !important;
}

.pr-hloc:hover { text-decoration: underline !important; }

.pr-hotel-card.pr-hidden { display: none; }

/* filter card */
.pr-filter-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    padding: 26px 30px;
    display: flex;
    gap: 28px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.pr-filter-field { min-width: 220px; flex: 1; }
.pr-filter-field.pr-filter-wide { flex: 2; }

.pr-filter-field label {
    display: block;
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 9px;
}

.pr-filter-field select {
    width: 100%;
    font-family: var(--pr-serif);
    font-size: 18px;
    color: var(--pr-ink);
    border: 0;
    border-bottom: 2px solid var(--pr-line);
    padding: 10px 2px;
    background: transparent;
    cursor: pointer;
    transition: border-color .25s;
}

.pr-filter-field select:focus {
    outline: none;
    border-color: var(--main-bg-color, #E582A9);
}

.pr-chips { display: flex; gap: 10px; flex-wrap: wrap; }

.pr-chip {
    border: 1.5px solid var(--pr-line);
    background: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pr-ink);
    cursor: pointer;
    transition: all .2s;
}

.pr-chip:hover { border-color: var(--main-bg-color, #E582A9); }

.pr-chip.on {
    background: var(--main-bg-color, #E582A9);
    border-color: var(--main-bg-color, #E582A9);
    color: #fff;
}

.pr-results-meta {
    font-family: var(--pr-sans);
    font-size: 13.5px;
    color: var(--pr-grey);
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    padding-bottom: 12px;
}

.pr-empty-note {
    display: none;
    text-align: center;
    color: var(--pr-grey);
    padding: 40px 0;
    font-family: var(--pr-serif);
    font-size: 19px;
    margin: 0;
}

.pr-empty-note.show { display: block; }

@media (max-width: 1100px) {
    .pr-type-results .pr-hotels-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .pr-type-results .pr-hotels-grid { grid-template-columns: 1fr; }
    .pr-filter-card { padding: 20px; gap: 18px; }
}

/* filter card alignment fix: labels top-aligned, counter as a tidy footer line */
.pr-filter-card {
    align-items: flex-start;
    gap: 20px 40px;
}

.pr-filter-field { flex: 0 1 280px; }
.pr-filter-field.pr-filter-wide { flex: 1 1 460px; }

.pr-filter-field select { padding: 12px 2px 13px; }

.pr-results-meta {
    width: 100%;
    text-align: right;
    border-top: 1px solid var(--pr-line);
    padding: 14px 0 0;
    margin-top: 4px;
    white-space: normal;
}

/* ═══════════ PHASE 4h — SPECIAL OFFERS PAGE ═══════════ */

/* compact hero variant (offers / utility pages) */
.pr-chero-compact .hero-area,
.pr-chero-compact .hero-area .slider-items,
.pr-chero-compact .hero-area .hero_banner_img {
    height: 54vh !important;
    min-height: 440px !important;
}

.pr-offers {
    background: var(--pr-sand);
    padding: 80px 0 96px;
}

.pr-offers-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
}

.pr-updated-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--pr-grey);
    text-transform: uppercase;
    padding-bottom: 6px;
}

.pr-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pr-orange);
    animation: prPulse 1.6s infinite;
}

@keyframes prPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 119, 58, .5); }
    70% { box-shadow: 0 0 0 8px rgba(255, 119, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 119, 58, 0); }
}

/* offers grid: 3-up compact cards like the holiday-type page */
.pr-offers-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pr-offers-grid .pr-hotel-tx { padding: 18px 20px 20px; gap: 10px; }
.pr-offers-grid .pr-hotel-tx h3 { font-size: 18.5px; }
.pr-offers-grid .pr-hotel-tx li { font-size: 13px; }

.pr-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--pr-orange);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 13px;
}

.pr-badge-urgent { background: var(--pr-ink); }

.pr-stars-pill.pr-stars-right { left: auto; right: 10px; }

.pr-deal {
    background: color-mix(in srgb, var(--main-bg-color, #E582A9) 14%, #fff);
    border: 1px dashed var(--dark-bg-color, var(--main-bg-color));
    padding: 12px 14px;
    font-family: var(--pr-serif);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--dark-bg-color, var(--main-bg-color));
    line-height: 1.35;
}

.pr-validity {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--pr-grey);
}

.pr-validity::before { content: '📅'; font-size: 11px; }

.pr-offer-ctas {
    display: flex;
    gap: 10px;
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
}

.pr-offer-ctas .pr-go2 { margin-top: 0; }

.pr-ask {
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-teal);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.pr-ask:hover { text-decoration: underline; }

/* dark inline help card inside the grid */
.pr-inline-help {
    background: linear-gradient(150deg, var(--pr-ink) 0%, #2A3440 100%);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #fff;
    justify-content: center;
}

.pr-inline-help h3 {
    font-family: var(--pr-serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    text-transform: none;
}

.pr-inline-help h3 em {
    font-style: italic;
    color: #fff;
    opacity: .85;
}

.pr-inline-help p {
    font-family: var(--pr-sans);
    font-size: 13.5px;
    font-weight: 300;
    color: #B9C2CA;
    margin: 0;
}

.pr-inline-help .pr-btn-hero { justify-content: center; }

.pr-ih-call { text-align: center; }

.pr-ih-call a {
    color: #fff !important;
    font-weight: 700;
}

/* price-match band */
.pr-pricematch {
    background: linear-gradient(120deg, color-mix(in srgb, var(--main-bg-color, #E582A9) 16%, #fff), #E4F5F5);
    border: 1px solid var(--pr-line);
    padding: 34px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 52px;
}

.pr-pricematch h3 {
    font-family: var(--pr-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0 0 8px;
    text-transform: none;
}

.pr-pricematch p {
    font-family: var(--pr-sans);
    color: var(--pr-ink);
    font-weight: 300;
    font-size: 15px;
    max-width: 38em;
    margin: 0;
    line-height: 1.65;
}

@media (max-width: 1100px) {
    .pr-offers-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .pr-offers-grid { grid-template-columns: 1fr; }
    .pr-pricematch { padding: 24px 20px; }
}

/* ═══════════ PHASE 4i — LIVEABOARDS PAGE (dive site) ═══════════ */

.pr-live-deps {
    background: var(--pr-sand);
    padding: 96px 0;
}

/* tabs */
.pr-live-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    border: 0 !important;
}

.pr-tabbtn,
.pr-live-tabs .nav-link {
    border: 1.5px solid var(--pr-line) !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 13px 26px !important;
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--pr-ink) !important;
    cursor: pointer;
    transition: all .2s;
}

.pr-live-tabs .nav-link.active {
    background: var(--main-bg-color) !important;
    border-color: var(--main-bg-color) !important;
    color: #fff !important;
}

/* boat block */
.pr-boat-block {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    margin-bottom: 36px;
    overflow: hidden;
}

.pr-boat-head {
    display: grid;
    grid-template-columns: 340px 1fr auto;
    gap: 26px;
    padding: 26px 30px;
    align-items: center;
}

.pr-boat-im {
    position: relative;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
    cursor: pointer;
    background: var(--pr-sand);
}

.pr-boat-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    transition: transform .5s;
}

.pr-boat-im:hover img { transform: scale(1.05); }

.pr-boat-im .pr-stars-pill { position: absolute; top: 10px; left: 10px; z-index: 2; }

.pr-boat-gal {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(15, 22, 30, .55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 7px 13px;
}

.pr-boat-info h3 {
    font-family: var(--pr-serif);
    font-size: 25px;
    font-weight: 600;
    color: var(--pr-ink);
    margin: 0 0 10px;
    text-transform: none;
}

.pr-boat-info ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.pr-boat-info li {
    font-family: var(--pr-sans);
    font-size: 14px;
    color: var(--pr-grey);
    font-weight: 300;
    padding-left: 19px;
    position: relative;
}

.pr-boat-info li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--pr-teal);
    font-size: 12px;
}

.pr-boat-link {
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dark-bg-color, var(--main-bg-color)) !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.pr-boat-link:hover { text-decoration: underline !important; }

@media (max-width: 1000px) {
    .pr-boat-head { grid-template-columns: 1fr; }
}

/* ── departure rows (legacy partial, reskinned) ── */
.pr-liveaboards .inner__listing_dive_curise { border-top: 1px solid var(--pr-line); }

.pr-liveaboards .accordion__listing_dive .accordion-item {
    border: 0 !important;
    background: transparent !important;
}

.pr-liveaboards .header__accord_dive { padding: 22px 30px 20px; }

.pr-liveaboards .left_acc_dive_date h3 {
    font-family: var(--pr-serif) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    text-transform: none !important;
}

.pr-liveaboards .itinerary__name_p span {
    font-family: var(--pr-serif) !important;
    font-size: 16.5px !important;
    color: var(--pr-ink) !important;
}

.pr-liveaboards .itinerary__name_p span:hover { color: var(--dark-bg-color, var(--main-bg-color)) !important; }

.pr-liveaboards .acc_dive_price h3 {
    font-family: var(--pr-serif) !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.pr-liveaboards .acc_dive_price h3.gray_txxt,
.pr-liveaboards .acc_cabin_price h3.gray_txxt {
    color: var(--pr-grey) !important;
    font-weight: 400 !important;
    font-size: 17px !important;
}

/* availability pills */
.pr-liveaboards .acc_dive_price p.green_txxt,
.pr-liveaboards .acc_cabin_price p.green_txxt {
    display: inline-block;
    background: #E7F5EA;
    color: #2E7D43 !important;
    font-family: var(--pr-sans);
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 13px;
    margin-top: 6px;
}

.pr-liveaboards .acc_dive_price p.red_txxt,
.pr-liveaboards .acc_cabin_price p.red_txxt {
    display: inline-block;
    background: #FDE8E4;
    color: #C43C2B !important;
    font-family: var(--pr-sans);
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 13px;
    margin-top: 6px;
}

.pr-liveaboards .grey__span {
    font-family: var(--pr-sans) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
}

.pr-liveaboards .dark__span {
    font-family: var(--pr-sans) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--pr-ink) !important;
}

.pr-liveaboards .fulll_itinerary_dive a {
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-teal) !important;
    cursor: pointer;
}

/* See Cabins / Enquire buttons */
.pr-liveaboards .btn___dive__acc button {
    background: var(--main-bg-color) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 12px 22px !important;
    cursor: pointer;
    transition: transform .25s;
}

.pr-liveaboards .btn___dive__acc button:hover { transform: translateY(-2px); }

.pr-liveaboards .enquire_book_btn {
    background: var(--pr-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .3);
    transition: transform .25s, box-shadow .25s;
}

.pr-liveaboards .enquire_book_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 119, 58, .4);
}

/* cabins panel */
.pr-liveaboards .dive__cabin_accordions .accordion-body {
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
    padding: 24px 30px;
}

.pr-liveaboards .cabins__sec {
    background: #fff;
    border: 1px solid var(--pr-line);
    margin-bottom: 14px;
    padding: 16px 18px;
}

.pr-liveaboards .cabin__mid h3 {
    font-family: var(--pr-serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    text-transform: none !important;
}

.pr-liveaboards .cabin_numbers {
    font-family: var(--pr-sans) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
}

.pr-liveaboards .cabin__mid p,
.pr-liveaboards .cabin__side_det p {
    font-family: var(--pr-sans);
    font-weight: 300;
    color: var(--pr-grey);
}

.pr-liveaboards .acc_cabin_price h3 {
    font-family: var(--pr-serif) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
}

/* included / not included */
.pr-liveaboards .inclded_not_included {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
}

.pr-liveaboards .inner_include {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 18px 20px;
}

.pr-liveaboards .inner_include h3 {
    font-family: var(--pr-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}

.pr-liveaboards .inner_include h3.red_txxt { color: #C43C2B !important; }

.pr-liveaboards .inner_include p {
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: var(--pr-grey) !important;
    line-height: 1.6;
}

.pr-liveaboards .inner_include p.red_txxt { color: #C43C2B !important; }

@media (max-width: 760px) {
    .pr-liveaboards .inclded_not_included { grid-template-columns: 1fr; }
    .pr-liveaboards .header__accord_dive { padding: 18px 16px; }
    .pr-liveaboards .dive__cabin_accordions .accordion-body { padding: 16px; }
}

/* tour price line on add-on cards */
.pr-tour-price {
    font-family: var(--pr-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pr-ink);
    margin: 0;
}

/* ═══════════ PHASE 4j — HEADER FIT + LIVEABOARDS POLISH ═══════════ */

/* 1. keep the nav + CTA pills on ONE line (the dive site has 7 menu items) */
@media (min-width: 992px) {
    .sticky-header .header-bottom .header-bottom-width {
        flex-wrap: nowrap !important;
        gap: 12px;
    }

    .header-bottom-left {
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    .header-bottom-right { flex-shrink: 0; }
}

/* tighten spacing on mid-size screens so everything fits */
@media (min-width: 992px) and (max-width: 1700px) {
    .header-bottom .header-bottom-left > div > .menu-flex p,
    .header-bottom .header-bottom-left > p,
    .header-bottom .header-bottom-left > p > a,
    .header-bottom .menu-flex p {
        font-size: 12.5px !important;
        letter-spacing: .08em !important;
    }

    .header-bottom-left > p,
    .header-bottom-left > div > .menu-flex {
        padding-left: 9px !important;
        padding-right: 9px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .pr-hd-pill .btn_call_side {
        padding: 11px 18px !important;
        font-size: 11.5px !important;
        letter-spacing: .1em !important;
    }
}

/* 2. liveaboards nav dropdown: tidy multi-column panel */
.liveabroad-menu-body { padding: 24px 34px 28px !important; }

.liveabroad-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 26px;
    margin: 0;
    padding: 0;
}

.liveabroad-menu-grid li { list-style: none !important; }

.liveabroad-menu-grid li.title a {
    display: block;
    padding: 8px 10px !important;
    border-radius: 8px;
}

/* 3. filter selects: clear bordered dropdown with a caret (was an unclear underline) */
.pr-filter-field select {
    border: 1px solid var(--pr-line) !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236B7480' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 13px !important;
    padding: 14px 46px 14px 16px !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    cursor: pointer;
}

.pr-filter-field select:focus {
    outline: none !important;
    border-color: var(--main-bg-color, #E582A9) !important;
}

/* 4. legacy amber block on every anchor inside the tabs container — off */
.pr-liveaboards .recommendation-container a:not(.pr-tour-card) {
    background: transparent !important;
    width: auto !important;
}

/* boat details link → clear outlined pill */
a.pr-boat-link {
    display: inline-flex !important;
    align-items: center;
    border: 1.5px solid var(--dark-bg-color, var(--main-bg-color)) !important;
    border-radius: 999px !important;
    padding: 13px 24px !important;
    transition: background .25s, color .25s;
}

a.pr-boat-link:hover {
    background: var(--dark-bg-color, var(--main-bg-color)) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.pr-boat-sub {
    font-family: var(--pr-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--pr-grey);
    margin: 0;
    max-width: 34em;
}

/* ═══════════ PHASE 6 — MOBILE POLISH (all redesigned pages) ═══════════ */

@media (max-width: 860px) {
    /* heroes: taller canvas so overlay content never clips, calmer type */
    .pr-chero-wrap .hero-area,
    .pr-chero-wrap .hero-area .slider-items,
    .pr-chero-wrap .hero-area .hero_banner_img,
    .pr-chero-compact .hero-area,
    .pr-chero-compact .hero-area .slider-items,
    .pr-chero-compact .hero-area .hero_banner_img {
        height: auto !important;
        min-height: 560px !important;
    }

    .pr-chero { position: absolute; }
    .pr-chero-inner { padding: 24px 20px; }

    .pr-chero-h1 { font-size: clamp(27px, 7.6vw, 34px); }

    .pr-chero-lead {
        font-size: 14.5px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pr-crumb { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
    .pr-chero-top { margin-bottom: 14px; }
    .pr-chero .pr-hero-proof { margin-top: 20px; gap: 8px 14px; }
    .pr-chero .pr-hero-proof span { font-size: 11px; }

    /* intro + expert card stack */
    .pr-cintro-grid { grid-template-columns: 1fr !important; gap: 34px; }

    /* dark note band stacks */
    .pr-hotel-note-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

    /* tour page: hero price block, route map, timeline breathing room */
    .pr-price-block { margin-top: 18px; }
    .pr-troute-map { height: min(420px, 62vh); }

    /* centre hero */
    .pr-centre-hero { height: auto; min-height: 560px; }

    /* sports centres: date row wraps cleanly */
    .pr-centres .date-submit-flex { flex-wrap: wrap; gap: 10px; }
    .pr-centres #select_date { width: 100%; }

    /* liveaboards: boat head stacks with link at the end */
    .pr-boat-head { padding: 18px 16px; gap: 16px; }
    a.pr-boat-link { align-self: flex-start; }

    /* filter cards breathe */
    .pr-filter-card { padding: 18px 16px; gap: 16px; }
    .pr-filter-field { min-width: 100%; }
    .pr-results-meta { text-align: left; }

    /* sections: tighter vertical rhythm on phones */
    .pr-type-results,
    .pr-offers,
    .pr-live-deps,
    .pr-centres-list,
    .pr-chotels {
        padding-top: 56px;
        padding-bottom: 64px;
    }

    .pr-centres-head { padding: 44px 0 40px; }
    .pr-centre-main { padding-top: 36px; }
    .pr-sec-head { margin-bottom: 32px; }

    /* offers head: pulse note tucks under */
    .pr-offers-head { align-items: flex-start; }

    /* pricematch band stacks */
    .pr-pricematch { flex-direction: column; align-items: flex-start; }

    /* subnav tabs already flex 1 — make sure long labels fit */
    .pr-subnav-tab { white-space: normal; line-height: 1.3; }

    /* liveaboards dep rows: keep price/date readable */
    .pr-liveaboards .header__accord_dive { padding: 16px 14px; }

    /* tag pills wrap without overflow */
    .pr-tagrow { flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .pr-chero-h1 { font-size: 25px; }
    .pr-eyebrow { display: none; }
    .pr-hero-ctas { width: 100%; }
    .pr-hero-ctas .pr-btn-hero { flex: 1 1 auto; justify-content: center; }
    .pr-centre-grid { grid-template-columns: 1fr; }
    .pr-live-tabs { flex-wrap: wrap; }
    .pr-chips { gap: 8px; }
    .pr-chip { padding: 9px 14px; font-size: 11.5px; }
}

/* guard against sideways scroll from any full-bleed section */
.pr-liveaboards,
.pr-centres,
.pr-type-results,
.pr-offers {
    overflow-x: clip;
}

/* ═══════════ PHASE 6b — TABLET/MOBILE CTAs ═══════════
   Below desktop the absolute header pills hung over page content on every
   page. Hide them and show the sticky bottom CTA bar (mock pattern) instead. */

@media (max-width: 991px) {
    .sticky-header .btn_book_Live_hed { display: none !important; }
}

.pr-mob-cta { display: none; }

@media (max-width: 991px) {
    .pr-mob-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(28, 34, 40, .16);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .pr-mob-cta a,
    .pr-mob-cta button {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5em;
        font-family: var(--pr-sans);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 14px 10px;
        border-radius: 999px;
        border: 0;
        cursor: pointer;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .pr-mc-call { background: var(--pr-teal); color: #fff !important; }

    .pr-mc-consult {
        background: var(--pr-orange);
        color: #fff;
        box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
    }

    /* keep page content clear of the fixed bar */
    body { padding-bottom: 66px !important; }
}

/* ═══════════ PHASE 6c — MOBILE/TABLET HEADER + SEARCH CARD TIDY ═══════════ */

@media (max-width: 991px) {
    /* badges (TTA / ATOL / Google) hidden below desktop — logo + burger only */
    .sticky-header .mid_hhed { display: none !important; }

    /* homepage search card: stack the fields full-width
       (the #searchWrapper prefix out-guns the desktop flex rules) */
    .banner-search,
    #searchWrapper .banner-search {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px;
    }

    .banner-search .month-search,
    .banner-search .level-search,
    #searchWrapper .banner-search .month-search,
    #searchWrapper .banner-search .level-search {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
    }

    .banner-search .month-search select,
    .banner-search .level-search select {
        width: 100% !important;
    }

    .banner-search .banner-search-btn,
    #searchWrapper .banner-search .banner-search-btn {
        width: 100% !important;
        margin: 4px 0 0 !important;
        text-align: center;
    }

    .banner-search .banner-search-btn a {
        display: block;
        width: 100%;
    }
}

/* ═══════════ PHASE 6d — PHONE-WIDTH POLISH ═══════════ */

/* utility bar on phones: just "★★★★★  +44 1273 921 001", one clean line */
@media (max-width: 600px) {
    .pr-u-rating,
    .pr-u-hours { display: none; }

    .pr-u-right { gap: 12px; }

    .pr-utility { font-size: 12px; }
}

/* homepage hero slides: never wider than the phone screen */
@media (max-width: 600px) {
    .hero-area .sigle-item,
    .index-page .sigle-item,
    .index-page .slider-items .sigle-item,
    .hero-area .slider-items .sigle-item,
    .index-page .text_slider .sigle-item,
    .hero-area .text_slider .sigle-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }

    .hero-area .sigle-item h2 {
        font-size: clamp(24px, 7.5vw, 32px) !important;
        line-height: 1.15 !important;
    }

    .hero-area .sigle-item p { font-size: 14px !important; }
}

/* ═══════════ PHASE 6e — MOBILE FIXES (Marcus review round) ═══════════ */

/* 1. mobile nav accordion sub-panels: full-width, white, ink links
      (TYPES had a charcoal grid; LIVEABOARDS had the desktop dropdown grid
      crushed into the 240px accordion) */
@media (max-width: 991px) {
    .absolute-menu,
    .destination-menu-body,
    .liveabroad-menu-body,
    .types-menu-body,
    .more-menu-body {
        width: 100% !important;
        padding: 4px 0 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .liveabroad-menu-grid,
    .destination-menu-grid,
    .types-menu-grid {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        columns: auto !important;
    }

    .liveabroad-menu-grid li.title a,
    .destination-menu-grid ul li a {
        display: block;
        padding: 9px 26px !important;
        color: var(--pr-ink) !important;
        font-size: 14px !important;
    }

    .destination-menu-grid ul { margin: 0 0 6px !important; padding: 0 !important; }

    .destination-menu-grid ul li.title a {
        font-weight: 900 !important;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px !important;
    }

    .types-menu-grid .types-menu-grid-row {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 7px 26px;
        background: transparent !important;
    }

    .types-menu-grid-row a { color: var(--pr-ink) !important; font-size: 14px !important; }

    .types-menu-grid-row img {
        width: 48px !important;
        height: 36px !important;
        object-fit: cover;
        border-radius: 6px;
        margin: 0 !important;
    }
}

/* 2. heroes on phones: content defines the height, image sits behind —
      overlay text can never spill into the next section */
@media (max-width: 860px) {
    .pr-chero-wrap { display: flex; flex-direction: column; }

    .pr-chero-wrap .hero-area,
    .pr-chero-wrap .pr-centre-hero {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .pr-chero-wrap .hero-area .owl-stage-outer,
    .pr-chero-wrap .hero-area .owl-stage,
    .pr-chero-wrap .hero-area .owl-item,
    .pr-chero-wrap .hero-area .slider-items,
    .pr-chero-wrap .hero-area .hero_banner_img {
        height: 100% !important;
        min-height: 0 !important;
    }

    .pr-chero-wrap .hero_banner_img { object-fit: cover; }

    .pr-chero {
        position: relative !important;
        inset: auto !important;
        min-height: 480px;
        display: flex;
        align-items: center;
        padding: 44px 0 50px;
    }
}

/* 3. liveaboards on phones: boat card + departure rows */
@media (max-width: 600px) {
    .pr-boat-head { padding: 16px 16px 18px; gap: 14px; }
    .pr-boat-info { min-width: 0; }

    a.pr-boat-link {
        white-space: normal !important;
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 12px 14px !important;
        font-size: 11.5px !important;
        line-height: 1.4;
    }

    /* start/finish block and See Cabins stack instead of overlapping
       (divecruise.css loads after this file — out-rank it on specificity) */
    .pr-liveaboards .inner__bottom__content__list,
    .pr-liveaboards .bottom__content__list .inner__bottom__content__list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 14px;
    }

    .pr-liveaboards .header__accord_dive .btm_dates_ { width: 100% !important; }

    .pr-liveaboards .header__accord_dive .btn___dive__acc {
        width: 100% !important;
        display: flex !important;
    }

    .pr-liveaboards .header__accord_dive .btn___dive__acc button {
        width: 100% !important;
        flex: 1 1 auto !important;
        justify-content: center;
    }

    .pr-liveaboards .enquire_book_btn { width: 100% !important; }

    /* the "See full itinerary" link is absolutely bottom-anchored on desktop —
       put it back in flow on phones so it can't sit on the See Cabins button */
    .pr-liveaboards .fulll_itinerary_dive,
    .pr-liveaboards .header__accord_dive .fulll_itinerary_dive,
    .pr-liveaboards .btm_dates_ .fulll_itinerary_dive {
        position: static !important;
        margin-top: 8px !important;
    }
}

/* 4. modals on phones: full-screen sheet (Koalendar calendar was clipped) */
@media (max-width: 600px) {
    .pr-modal { padding: 0 !important; }

    .pr-modal .pr-panel {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
}

/* 5. offer card CTA row wraps tidily */
@media (max-width: 600px) {
    .pr-offer-ctas { flex-wrap: wrap; gap: 8px 14px; }
}

/* ═══════════ PHASE 6f — ENQUIRY FORM ON PHONES ═══════════ */

@media (max-width: 760px) {
    /* field groups stack full-width (two side-by-side inputs squeezed badly) */
    #form-accordion .contact-form-select-option-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        width: 100%;
    }

    #form-accordion .contact-form-select-option-flex select,
    #form-accordion .contact-form-select-option-flex input {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* intl phone input: wrapper + input full width, room for the flag/dial code */
    #form-accordion .iti,
    .liveabroad-modal .iti {
        width: 100% !important;
    }

    #form-accordion .iti input,
    .liveabroad-modal .iti--allow-dropdown input {
        width: 100% !important;
        padding-left: 96px !important;
    }

    /* step nav buttons: no text wrapping, tidy row */
    #form-accordion .contact-form-accordian-button button {
        white-space: nowrap;
        padding: 12px 22px !important;
    }

    /* submit: full-width on phones */
    #form-accordion .pr-submit-row { padding: 20px 0 8px; }

    #form-accordion .pr-submit-row .submit-button {
        width: 100% !important;
        min-width: 0;
    }
}

/* ═══════════ PHASE 6g — LIVEABOARD SHORT FORM + BOTTOM-BAR SAFETY ═══════════ */

/* the fixed bottom CTA bar disappears whenever ANY overlay is open —
   it was hiding submit buttons under modals and slide-outs */
body.modal-open .pr-mob-cta,
body:has(.modal.show) .pr-mob-cta,
body:has(.offcanvas.show) .pr-mob-cta,
body:has(.pr-modal.open) .pr-mob-cta {
    display: none !important;
}

/* purpose-built liveaboard enquiry form (no wizard) */
.pr-lform {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-sm);
    padding: 26px 30px 30px;
    max-width: 980px;
    margin: 0 auto;
}

.pr-lf-sec { padding: 6px 0 4px; }

.pr-lf-sec + .pr-lf-sec {
    border-top: 1px solid var(--pr-line);
    margin-top: 18px;
    padding-top: 22px;
}

.pr-lf-title {
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px !important;
}

.pr-lf-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--main-bg-color, #E582A9);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pr-lf-field { margin-bottom: 16px; }

.pr-lf-label {
    display: block;
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 8px;
}

.pr-lf-row {
    display: flex;
    gap: 12px;
}

.pr-lf-row > select,
.pr-lf-row > input { flex: 1 1 0; min-width: 0; }

.pr-lform select,
.pr-lform input[type="text"],
.pr-lform input[type="email"] {
    font-family: var(--pr-sans) !important;
    font-size: 14.5px !important;
    color: var(--pr-ink) !important;
    background: #fff !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    width: 100%;
    transition: border-color .25s, box-shadow .25s;
}

.pr-lform select:focus,
.pr-lform input:focus {
    outline: none !important;
    border-color: var(--main-bg-color, #E582A9) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-bg-color, #E582A9) 18%, transparent) !important;
}

.pr-lform .iti { width: 100%; }
.pr-lform .iti input { width: 100% !important; }

.pr-lform .contact-form-para {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line);
    padding: 18px 20px !important;
    margin: 20px 0 0 !important;
}

.pr-lform .contact-form-para p {
    color: var(--pr-ink) !important;
    font-family: var(--pr-sans) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.6;
    margin: 0 0 8px !important;
}

.pr-lform .contact-form-para p:last-child { margin-bottom: 0 !important; }

.pr-lform .pr-submit-row {
    justify-content: flex-end;
    padding: 22px 0 2px;
}

.pr-lform .submit-button {
    background: var(--pr-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 14px 34px !important;
    height: auto !important;
    margin: 0 !important;
    min-width: 200px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 119, 58, .35);
    transition: transform .25s, box-shadow .25s;
}

.pr-lform .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 119, 58, .45);
}

@media (max-width: 760px) {
    .pr-lform { padding: 18px 16px 22px; }
    .pr-lf-row { flex-direction: column; }
    .pr-lform .pr-submit-row .submit-button { width: 100%; min-width: 0; }
    /* extra room so nothing sits against the modal edge */
    .liveabroad-modal .modal-body { padding-bottom: 28px !important; }
}

/* ═══════════ PHASE 6h — LIVEABOARDS MOBILE POLISH (round 2) ═══════════ */

/* add-on tours tab: identical cards to the country-page tailor-made tours
   (region.css paints anchors amber — out-rank it) */
.pr-liveaboards .recommendation-container a.pr-tour-card {
    background: #fff !important;
    width: 100% !important;
    padding: 0 !important;
}

.pr-liveaboards .pr-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1000px) {
    .pr-liveaboards .pr-tours-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .pr-liveaboards .pr-tours-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    /* departure list: even, bordered cards with consistent gaps */
    .pr-liveaboards .parent__dive_cruise_dls { padding: 0 14px 16px; }

    .pr-liveaboards .inner__listing_dive_curise {
        border: 1px solid var(--pr-line) !important;
        background: #fff;
        margin: 0 0 12px !important;
    }

    .pr-liveaboards .accHeader_cruise__dive { margin: 0 !important; }
    .pr-liveaboards .header__accord_dive { padding: 16px 14px 18px !important; }
    .pr-boat-head { padding-bottom: 10px; }

    /* cabin cards: clean stack — name, capacity, price, full-width button */
    .pr-liveaboards .cabins__sec {
        padding: 14px 14px 18px !important;
        margin-bottom: 12px !important;
    }

    .pr-liveaboards .cabins__sec .cabin__side_det { display: block !important; }

    .pr-liveaboards .cabins__sec .right_cabin_sec {
        width: 100% !important;
        margin-top: 10px;
        padding: 0 !important;
    }

    .pr-liveaboards .cabins__sec .acc_cabin_price {
        text-align: left !important;
        margin: 0 0 12px !important;
    }

    .pr-liveaboards .cabins__sec .acc_cabin_price p { margin: 4px 0 0 !important; }

    .pr-liveaboards .cabins__sec .enquire_book_btn {
        display: block;
        width: 100% !important;
        margin: 4px 0 0 !important;
    }
}

/* ═══════════ PHASE 6i — TOUR PAGE: ITINERARY ↔ ENQUIRY ALIGNMENT ═══════════
   The timeline column was 860px left-aligned while the enquiry card was 980px
   centred — mismatched edges read as disjointed. Both now share the same
   980px centred column, and the dead space between them is halved. */

.pr-tl {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.pr-titinerary .pr-sec-head {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.pr-titinerary { padding-bottom: 40px; }

.pr-titinerary + .contact-form-container { padding-top: 56px; }

/* the enquiry heading sits tighter to its card */
.contact-form-container .contact-heading p:not(.enquiry_description) { margin-bottom: 18px !important; }

/* ═══════════ PHASE 4k — ABOUT US PAGE ═══════════
   Mock: dive-about-us. Sections: story (reuses .pr-cintro), difference
   3-card grid, founder quote, numbers band, protection boxes, family strip. */

/* ---- the difference ---- */
.pr-ab-diff {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.pr-diff-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pr-diff-card.pr-diff-dim {
    opacity: .75;
}

.pr-diff-card h3 {
    font-family: var(--pr-serif) !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.pr-diff-card p {
    font-size: 14px;
    color: var(--pr-grey);
    font-weight: 300;
    margin: 0;
}

.pr-diff-ico {
    font-size: 22px;
    line-height: 1;
}

.pr-diff-card.pr-diff-hero {
    background: var(--pr-ink);
    color: #fff;
    border: 0;
    box-shadow: var(--pr-shadow-md);
    transform: scale(1.03);
}

.pr-diff-card.pr-diff-hero h3 {
    color: #fff;
    font-size: 23px;
}

.pr-diff-card.pr-diff-hero h3 em {
    font-style: italic;
    color: #FFE2AD;
}

.pr-diff-card.pr-diff-hero p {
    color: #B9C2CA;
}

.pr-tick-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
}

.pr-tick-list li {
    font-size: 13.5px;
    font-weight: 300;
    color: #E7ECF0;
    padding-left: 22px;
    position: relative;
}

.pr-tick-list li:before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--pr-teal);
}

/* ---- founder ---- */
.pr-ab-founder {
    padding: 96px 0;
    background: #fff;
}

.pr-founder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.pr-founder-grid.pr-founder-noimg {
    grid-template-columns: 1fr;
    max-width: 860px;
}

.pr-founder-quote {
    font-family: var(--pr-serif) !important;
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.5;
    color: var(--pr-ink);
    border: 0;
    margin: 0;
    padding: 0;
}

.pr-founder-quote:before {
    content: '“';
    color: var(--main-bg-color, var(--pr-orange));
    font-size: 1.6em;
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 4px;
}

.pr-founder-who {
    margin-top: 18px;
    font-size: 14px;
    color: var(--pr-grey);
}

.pr-founder-who b {
    display: block;
    font-size: 16px;
    color: var(--pr-ink);
}

.pr-founder-img {
    border-radius: var(--pr-radius);
    overflow: hidden;
    aspect-ratio: 4/3.1;
    box-shadow: var(--pr-shadow-md);
}

.pr-founder-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- numbers band ---- */
.pr-ab-numbers {
    background: var(--pr-ink);
    color: #fff;
    padding: 64px 0;
}

.pr-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.pr-num-item b {
    font-family: var(--pr-serif) !important;
    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: 500;
    display: block;
    color: #FFE2AD;
    line-height: 1.15;
}

.pr-num-item span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #B9C2CA;
}

/* ---- protection ---- */
.pr-ab-protect {
    background: var(--pr-sand);
    padding: 96px 0;
}

.pr-protect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.pr-protect-box {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 38px 32px 34px;
    box-shadow: var(--pr-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pr-protect-logo {
    height: 88px;
    width: auto;
    margin-bottom: 22px;
}

.pr-protect-box h5 {
    font-family: var(--pr-serif) !important;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--pr-ink);
}

.pr-protect-sub {
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 18px;
}

.pr-protect-box ul {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--pr-line);
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pr-protect-box li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pr-ink-soft);
    font-weight: 400;
    padding-left: 26px;
    position: relative;
}

.pr-protect-box li:before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 1px;
    color: #2E7D43;
    font-size: 14px;
}

/* ---- family strip ---- */
.pr-ab-family {
    padding: 96px 0;
    background: #fff;
}

.pr-fam-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pr-fam-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 26px 24px;
    text-align: center;
    transition: transform .3s, box-shadow .3s;
    display: block;
    color: var(--pr-ink);
}

.pr-fam-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pr-shadow-md);
    color: var(--pr-ink);
}

.pr-fam-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.pr-fam-card h4 {
    font-family: var(--pr-serif) !important;
    font-size: 17.5px;
    font-weight: 600;
    margin: 0 0 6px;
}

.pr-fam-card p {
    font-size: 12.5px;
    color: var(--pr-grey);
    font-weight: 300;
    margin: 0;
}

/* ---- about page responsive ---- */
@media (max-width: 991px) {
    .pr-ab-diff,
    .pr-ab-founder,
    .pr-ab-protect,
    .pr-ab-family {
        padding: 64px 0;
    }

    .pr-diff-grid {
        grid-template-columns: 1fr;
    }

    .pr-diff-card.pr-diff-hero {
        transform: none;
    }

    .pr-founder-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .pr-numbers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px 18px;
    }

    .pr-protect-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    .pr-fam-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .pr-ab-diff,
    .pr-ab-founder,
    .pr-ab-protect,
    .pr-ab-family {
        padding: 52px 0;
    }

    .pr-fam-strip {
        grid-template-columns: 1fr;
    }

    .pr-protect-logo {
        height: 72px;
    }
}

/* ---- about hero: content defines the height (never clips) ----
   Same pattern as the phase-6 mobile heroes, applied at all widths:
   banner becomes an absolute backdrop, .pr-chero is in-flow. */
.pr-chero-fit .hero-area,
.pr-chero-fit .hero-area .slider-items,
.pr-chero-fit .hero-area .hero_banner_img {
    height: 100% !important;
    min-height: 0 !important;
}

.pr-chero-fit .hero-area {
    position: absolute;
    inset: 0;
    overflow: hidden;   /* owl internals keep natural heights — clip the bleed */
    background: var(--pr-ink);   /* any image shortfall reads dark, never grey */
    margin-top: 0 !important;   /* legacy .hero-area has margin-top:-45px (header tuck) —
                                   on an absolute backdrop it left a 45px grey band at the
                                   hero's bottom edge */
}

.pr-chero-fit .hero-area .slider-wrapper,
.pr-chero-fit .hero-area .active-slider,
.pr-chero-fit .hero-area .owl-stage-outer,
.pr-chero-fit .hero-area .owl-stage,
.pr-chero-fit .hero-area .owl-item {
    height: 100% !important;
}

.pr-chero-fit .pr-chero {
    position: relative;
    inset: auto;
    min-height: 480px;
}

.pr-chero-fit .pr-chero-inner {
    padding-top: 48px;
    padding-bottom: 56px;
}

/* ═══════════ PHASE 4l — LIVEABOARDS NAV DROPDOWN (pd, desktop) ═══════════
   Marcus 20 Jul: the countries panel opened as a full-width strip with a
   single left column. Anchor it as a compact 2-column dropdown centred
   directly under the LIVEABOARDS menu item (legacy flip animation kept). */
@media (min-width: 992px) {
    .liveabroad-menu-head { position: relative !important; }

    .liveabroad-menu-body {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        width: max-content !important;
        min-width: 0;
        max-width: 480px;
        padding: 12px 14px !important;
        transform: translateX(-50%) rotateX(-90deg);
        transform-origin: 50% 0;
    }

    .liveabroad-menu-head:hover .liveabroad-menu-body {
        transform: translateX(-50%) rotateX(0);
        width: max-content !important;   /* legacy hover sets width:auto — keep max-content */
    }

    .liveabroad-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(170px, max-content));
        gap: 0 6px;
        max-height: none !important;
        width: auto !important;
    }

    .liveabroad-menu-grid li.title {
        margin: 0 !important;
    }

    .liveabroad-menu-grid li.title a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 12px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
}

/* ═══════════ PHASE 4m — HOTEL DETAILS PAGE ═══════════
   No mock — house style. Hero reuses .pr-centre-hero; new here: the price
   guide card (replaces the old dark table) and reskins for the legacy offer
   boxes + highlights row, scoped to .pr-hotel. */

#enquire { scroll-margin-top: 110px; }

.pr-hoffers { padding: 40px 0 0; }
.pr-hoffers .dest-offer-flex { margin-top: 0 !important; padding-bottom: 0 !important; }

/* legacy offer boxes → premium ink cards */
.pr-hotel .dest-offer-box {
    background: var(--pr-ink) !important;
    border: 0 !important;
    border-radius: var(--pr-radius);
    padding: 26px 28px !important;
    box-shadow: var(--pr-shadow-sm);
}

.pr-hotel .dest-offer-box h3 {
    font-family: var(--pr-serif) !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.pr-hotel .dest-offer-box .dest-offer-middle p { color: #FFE2AD !important; }

.pr-hotel .dest-offer-box .fw-300 {
    color: #B9C2CA !important;
    font-weight: 300;
}

/* highlights row: three tidy icon cards */
.pr-hwhy { padding: 72px 0 8px; }
.pr-hwhy .pr-sec-head { margin-bottom: 34px; }

.pr-hotel .dest-about-flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}

.pr-hotel .dest-about-flex .dest-about-img-flex {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
}

.pr-hotel .dest-about-flex .dest-about-img-flex p {
    color: var(--pr-ink-soft);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* gallery tile */
.pr-hgallery { padding: 26px 0 8px; }

.pr-hotel .open-lightgallery {
    border-radius: var(--pr-radius);
    overflow: hidden;
}

.pr-hotel .open-lightgallery .icon-dv { border-radius: 0; }

/* hotel story text */
.pr-htext-sub {
    font-family: var(--pr-serif) !important;
    font-size: 20px;
    font-weight: 600;
    margin: 26px 0 10px;
}

.pr-cintro-text .pr-htext-sub:first-child { margin-top: 0; }

/* ── price guide card ── */
.pr-pg-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    box-shadow: var(--pr-shadow-sm);
    overflow: hidden;
}

.pr-pg-head {
    background: var(--pr-ink-soft);   /* softer charcoal — full ink read too harsh */
    color: #fff;
    padding: 16px 22px 14px;
}

.pr-pg-head h3 {
    font-family: var(--pr-serif) !important;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 4px;
}

.pr-pg-head p {
    font-size: 12px;
    font-weight: 300;
    color: #B9C2CA;
    margin: 0;
    line-height: 1.5;
}

.pr-pg-table {
    width: 100%;
    border-collapse: collapse;
}

.pr-pg-table th {
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
    text-align: left;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--pr-line);
}

.pr-pg-table th small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--pr-grey);
    margin-top: 2px;
}

.pr-pg-table td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--pr-line);
    vertical-align: top;
    font-size: 14px;
    color: var(--pr-ink-soft);
}

.pr-pg-table tbody tr:nth-child(even) { background: var(--pr-sand); }
.pr-pg-table tbody tr:last-child td { border-bottom: 0; }

.pr-pg-table td b {
    font-family: var(--pr-serif) !important;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--pr-ink);
}

.pr-pg-table td small {
    display: inline;
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--pr-grey);
    font-weight: 300;
}

.pr-pg-month {
    font-weight: 900 !important;
    font-size: 12px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink) !important;
    white-space: nowrap;
}

.pr-pg-call {
    font-size: 13px;
    font-style: italic;
    color: var(--pr-grey);
}

.pr-pg-best {
    display: inline-block;
    background: var(--pr-teal);
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 9px;
    margin-left: 8px;
    vertical-align: 2px;
    white-space: nowrap;
}

.pr-pg-foot {
    padding: 13px 22px 16px;
    border-top: 1px solid var(--pr-line);
    background: #fff;
}

.pr-pg-foot p {
    font-size: 12.5px;
    color: var(--pr-grey);
    font-weight: 300;
    line-height: 1.55;
    margin: 0 0 10px;
}

.pr-pg-foot p a {
    color: var(--pr-ink);
    font-weight: 700;
    text-decoration: underline;
}

.pr-pg-foot .pr-btn-hero {
    width: 100%;
    justify-content: center;
    display: inline-flex;
}

/* responsive */
@media (max-width: 991px) {
    .pr-hwhy { padding: 52px 0 8px; }

    .pr-hotel .dest-about-flex { grid-template-columns: 1fr; }

    .pr-pg-table th, .pr-pg-table td { padding: 10px 12px; }
}

/* hotel details: break out of the legacy boxed container (details branch only) */
.pr-hotel {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* hotel details: enquiry form matches the tour page's centred 980px column
   (the .pr-hotel full-bleed reset had let it stretch edge-to-edge) */
.pr-hotel .tour-more-details-contact-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 28px 64px;
}

/* ═══════════ PHASE 4n — CONTACT PAGE ═══════════
   House style. Hero on the DB banner, four contact cards, 24-hour band,
   full enquiry accordion below (session alerts kept). */

.pr-cways {
    background: var(--pr-sand);
    padding: 80px 0 88px;
}

.pr-cways .pr-sec-head { margin-bottom: 40px; }

.pr-cways-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

.pr-cway-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    padding: 28px 26px;
    box-shadow: var(--pr-shadow-sm);
}

.pr-cway-ico {
    font-size: 26px;
    line-height: 1;
    display: block;
    margin-bottom: 14px;
}

.pr-cway-card h3 {
    font-family: var(--pr-serif) !important;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--pr-ink);
}

.pr-cway-card p {
    font-size: 15.5px;
    color: var(--pr-ink-soft);
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 8px;
}

.pr-cway-card p a {
    color: var(--pr-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pr-cway-card .pr-cway-sub {
    font-size: 13px;
    color: var(--pr-grey);
    font-weight: 300;
    margin: 0;
}

.pr-cway-card .pr-cway-sub a {
    color: var(--dark-bg-color, var(--pr-ink));
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pr-cway-addr { max-width: 24em; }

/* 24-hour band */
.pr-c24 {
    background: var(--pr-ink);
    color: #fff;
    padding: 64px 0;
}

.pr-c24-inner { max-width: 980px; }

.pr-c24-kicker { color: #FFE2AD; }

.pr-c24 h2 {
    font-family: var(--pr-serif) !important;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 500;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.2;
}

.pr-c24 h2 em {
    font-style: italic;
    color: #FFE2AD;
}

.pr-c24 p {
    font-size: 15.5px;
    font-weight: 300;
    color: #B9C2CA;
    line-height: 1.7;
    max-width: 46em;
    margin: 0;
}

.pr-c24 p a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* enquiry form column (matches hotel/tour pages) */
.pr-cform {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 28px 64px;
}

@media (max-width: 1100px) {
    .pr-cways-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    .pr-cways { padding: 56px 0 60px; }
    .pr-c24 { padding: 48px 0; }
}

@media (max-width: 600px) {
    .pr-cways-grid { grid-template-columns: 1fr; }
}

/* contact page: enquiry CTA card (replaced the office-address card —
   virtual office; the postal address stays quietly in the footer) */
#enquire { scroll-margin-top: 96px; }

.pr-cway-cta {
    display: flex;
    flex-direction: column;
}

.pr-cway-cta .pr-cway-sub { margin-bottom: 18px; }

.pr-cway-cta .pr-cway-btn {
    margin-top: auto;
    justify-content: center;
    display: inline-flex;
    text-align: center;
    width: 100%;
    padding: 14px 12px;
    font-size: 12px;
    letter-spacing: .08em;
    white-space: nowrap;
    box-shadow: none;   /* heavy glow read cramped inside the card */
}

/* enquiry heading tidy (Marcus 20 Jul): legacy grey border-bottom rules under
   "Speak to an expert" and "Make an enquiry below" never matched the form
   card's width. Kill the rules and flip the two lines into the standard
   kicker-over-heading pattern used everywhere else. */
.contact-heading {
    display: flex;
    flex-direction: column-reverse;   /* DOM: heading, kicker → visual: kicker, heading */
    text-align: center;
    margin-bottom: 28px;
}

.contact-heading .contact-heading-para p,
.contact-heading-para :nth-child(1) {
    border-bottom: 0 !important;
}

.contact-heading p:not(.enquiry_description) {
    margin: 0 !important;
}

.contact-heading p.enquiry_description {
    margin: 0 0 10px !important;
}

/* ═══════════ PHASE 4o — SEARCH RESULTS PAGE ═══════════
   Mock: search-results. Reuses the holiday-type card/filter system; new
   here: the count pill and the in-hero refine card. */

.pr-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pr-teal);
    color: #fff;
    font-family: var(--pr-sans);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 8px 18px;
    white-space: nowrap;
}

/* the native #searchWrapper card (from _banner) is the refine UI on this page —
   give the hero room so the straddling card never covers the lead text */
.pr-search-hero .pr-chero-inner { padding-bottom: 150px; }

.pr-search-hero #searchWrapper { pointer-events: auto; }

.pr-search-results { padding-top: 110px; }

.pr-ih-alt {
    text-align: center;
    font-size: 13px;
    color: #B9C2CA;
    margin: 0;
}

.pr-ih-alt a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 860px) {
    .pr-refine-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 20px 22px;
    }

    .pr-refine-card .pr-btn-hero { width: 100%; }

    .pr-count-pill { font-size: 11px; padding: 7px 14px; }
}

/* ═══════════ PHASE 4p — REGION HOTELS LISTING (hotel-details @else) ═══════════ */
.pr-hlist { margin: 0 !important; padding: 0 !important; }

.pr-hlist-grid-sec { padding-top: 72px; }

.pr-hlist-extend {
    background: #fff;
    padding: 88px 0 96px;
}

/* ═══════════ PHASE 4q — LIVEABOARD BOAT DETAILS (pd) ═══════════ */
.pr-vessels {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.pr-vstory { padding-bottom: 24px; }

.pr-vvideo {
    margin-top: 26px;
    aspect-ratio: 16/9;
    background: var(--pr-ink);
}

.pr-vvideo iframe { width: 100%; height: 100%; border: 0; display: block; }

.pr-vdates { padding: 40px 0 8px; }
.pr-vdates .pr-sec-head { margin-bottom: 26px; }

.pr-vmonth-bar {
    align-items: end;
    gap: 18px;
    flex-wrap: wrap;
}

.pr-vmonth-field { flex: 0 1 320px; }

.pr-btn-hero-ghost2 {
    background: transparent;
    color: var(--pr-ink);
    border: 1.5px solid var(--pr-ink);
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-family: var(--pr-sans);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 4px;
}

.pr-btn-hero-ghost2:hover { background: var(--pr-ink); color: #fff; }

.pr-vprotect-note {
    margin: 22px 0 0;
    font-size: 14px;
    color: var(--pr-grey);
    font-weight: 300;
    line-height: 1.65;
    max-width: 62em;
}

.pr-vprotect-note a { color: var(--pr-ink); font-weight: 700; }

#dates { scroll-margin-top: 100px; }

@media (max-width: 860px) {
    .pr-vmonth-bar { align-items: stretch; }
    .pr-vmonth-bar .pr-btn-hero-ghost2 { justify-content: center; }
    .pr-vmonth-field { flex: 1 1 100%; }
}

/* ═══════════ PHASE 4r — STATIC PAGES + 404 ═══════════ */
.pr-static-hero .pr-chero { min-height: 320px; }
.pr-static-hero .pr-chero-inner { padding-top: 40px; padding-bottom: 44px; }

.pr-static-body {
    max-width: 880px;
    margin: 0 auto;
    padding: 64px 28px 72px;
}

.pr-static-prose {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--pr-ink-soft);
}

.pr-static-prose h1,
.pr-static-prose h2,
.pr-static-prose h3,
.pr-static-prose h4 {
    font-family: var(--pr-serif) !important;
    color: var(--pr-ink);
    line-height: 1.25;
    margin: 34px 0 12px;
}

.pr-static-prose h2 { font-size: 26px; font-weight: 500; }
.pr-static-prose h3 { font-size: 21px; font-weight: 600; }
.pr-static-prose h4 { font-size: 17.5px; font-weight: 600; }
.pr-static-prose p { margin: 0 0 16px; }
.pr-static-prose ul, .pr-static-prose ol { margin: 0 0 16px 22px; }
.pr-static-prose li { margin-bottom: 7px; }
.pr-static-prose a { color: var(--dark-bg-color, var(--pr-ink)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pr-static-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.pr-static-prose td, .pr-static-prose th { border: 1px solid var(--pr-line); padding: 9px 12px; font-size: 14px; }

.pr-static-help {
    margin-top: 44px;
    padding: 22px 26px;
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
}

.pr-static-help p { margin: 0; font-size: 14.5px; color: var(--pr-ink-soft); }
.pr-static-help a { color: var(--pr-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 404 */
.pr-404 {
    background: var(--pr-sand);
    padding: 96px 0 104px;
    text-align: center;
}

.pr-404-inner { max-width: 720px; }

.pr-404-h1 {
    font-family: var(--pr-serif) !important;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 500;
    color: var(--pr-ink);
    line-height: 1.05;
    margin: 6px 0 18px;
}

.pr-404-h1 em { font-style: italic; color: var(--main-bg-color, var(--pr-teal)); }

.pr-404 p {
    font-size: 16.5px;
    font-weight: 300;
    color: var(--pr-grey);
    max-width: 36em;
    margin: 0 auto 28px;
}

.pr-404-ctas { justify-content: center; }

.pr-404-img {
    max-width: min(420px, 80%);
    margin: 40px auto 0;
    display: block;
}

/* ═══════════ PHASE 4s — THANK-YOU PAGE ═══════════ */
.pr-thanks {
    background: var(--pr-sand);
    padding: 88px 0 96px;
    text-align: center;
}

.pr-thanks-inner { max-width: 920px; }

.pr-thanks-tick {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--pr-teal);
    color: #fff;
    font-size: 30px;
    line-height: 64px;
    margin: 0 auto 20px;
}

.pr-thanks-h1 {
    font-family: var(--pr-serif) !important;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
    color: var(--pr-ink);
    line-height: 1.15;
    margin: 6px 0 14px;
}

.pr-thanks-h1 em { font-style: italic; color: var(--dark-bg-color, var(--pr-teal)); }

.pr-thanks-lead {
    font-size: 17px;
    font-weight: 300;
    color: var(--pr-grey);
    margin: 0 auto 40px;
    max-width: 34em;
}

.pr-thanks-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    text-align: left;
    margin-bottom: 38px;
}

.pr-thanks-step {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 24px 24px 22px;
}

.pr-thanks-step b {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pr-ink);
    color: #FFE2AD;
    font-family: var(--pr-serif);
    font-size: 15px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pr-thanks-step h3 {
    font-family: var(--pr-serif) !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 7px;
}

.pr-thanks-step p {
    font-size: 13.5px;
    color: var(--pr-grey);
    font-weight: 300;
    margin: 0;
    line-height: 1.6;
}

.pr-thanks-ctas { justify-content: center; }

.pr-thanks-note {
    margin: 26px 0 0;
    font-size: 14px;
    color: var(--pr-grey);
    font-weight: 300;
}

.pr-thanks-note a { color: var(--pr-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
    .pr-thanks-steps { grid-template-columns: 1fr; }
}

/* thank-you: what-can-be-booked section */
.pr-thanks-booked {
    background: #fff;
    padding: 72px 0 84px;
    text-align: center;
}

.pr-thanks-booked .pr-sec-head { margin-bottom: 26px; }

.pr-thanks-list {
    list-style: none;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
}

.pr-thanks-list li {
    font-size: 15px;
    color: var(--pr-ink-soft);
    padding-left: 26px;
    position: relative;
}

.pr-thanks-list li:before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--pr-teal);
}

.pr-thanks-foot {
    font-size: 14px;
    font-weight: 300;
    color: var(--pr-grey);
    max-width: 44em;
    margin: 0 auto;
}

/* boat details round 2 (Marcus): video sits under the expert card; month
   buttons readable (base .pr-btn-hero forces white text — belt & braces);
   departures list constrained to the content column, not 100% */
.pr-vside {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pr-vside .pr-vvideo { margin-top: 0; }

.pr-btn-hero-ghost2 { color: var(--pr-ink) !important; }
.pr-btn-hero-ghost2:hover { color: #fff !important; }

.pr-vessels #divecurise_listing {
    max-width: 1240px;
    margin: 0 auto !important;
    padding: 0 28px 64px !important;
    width: auto !important;
}

/* ═══════════ PHASE 4t — LIVEABOARD DEPARTURES + CABINS (mock-faithful) ═══════════
   Replaces the phase-4i/6h reskins of the legacy accordion markup — the
   include now renders mock-style .pr-dep / .pr-cab / .pr-inc structures. */

.pr-deps { display: flex; flex-direction: column; gap: 0; }

.pr-dep-row {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-top: 0;
}

.pr-dep-row:first-child { border-top: 1px solid var(--pr-line); }

.pr-dep-row.pr-dep-fb { opacity: .6; }

.pr-dep-main {
    display: grid;
    grid-template-columns: 150px 1fr auto auto auto;
    gap: 20px;
    padding: 20px 30px;
    align-items: center;
}

.pr-dep-date {
    font-family: var(--pr-serif) !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pr-ink);
}

.pr-dep-date small {
    display: block;
    font-family: var(--pr-sans);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--pr-grey);
    text-transform: uppercase;
    margin-top: 3px;
}

.pr-dep-itin b {
    font-family: var(--pr-serif) !important;
    font-size: 18.5px;
    font-weight: 600;
    display: block;
    color: var(--pr-ink);
}

.pr-dep-itin b:hover { color: var(--dark-bg-color, var(--pr-teal)); }

.pr-dep-itin span {
    font-size: 13px;
    color: var(--pr-grey);
    font-weight: 300;
    display: block;
}

.pr-dep-itin a {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-teal-deep) !important;
    display: inline-block;
    margin-top: 4px;
    background: transparent !important;
    padding: 0 !important;
}

.pr-avail {
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
    display: inline-block;
}

.pr-avail-ok { background: #E7F5EA; color: #2E7D43; }
.pr-avail-low { background: #FCEFD8; color: #B47714; }
.pr-avail-crit { background: #FDE8E4; color: #C43C2B; }
.pr-avail-fb { background: #EEEBE7; color: #8B8578; }

.pr-dep-price { text-align: right; }

.pr-dep-price b {
    font-family: var(--pr-serif) !important;
    font-size: 22px;
    font-weight: 600;
    color: var(--pr-ink);
    display: block;
}

.pr-dep-price span {
    display: block;
    font-size: 11.5px;
    color: var(--pr-grey);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pr-dep-was {
    display: block;
    font-size: 13px;
    color: var(--pr-grey);
    text-decoration: line-through;
    font-weight: 400;
}

.pr-cab-toggle {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--main-bg-color, var(--pr-teal)) !important;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s;
}

.pr-cab-toggle:not(.collapsed) { background: var(--pr-ink) !important; }

.pr-cab-toggle .pr-cab-caret { display: inline-block; transition: transform .25s; margin-left: 4px; }
.pr-cab-toggle:not(.collapsed) .pr-cab-caret { transform: rotate(180deg); }

.pr-cab-enquire { background: var(--pr-orange) !important; }

/* cabin panel */
.pr-cab-panel {
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
    padding: 26px 30px;
}

.pr-cab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.pr-cab-card {
    background: #fff;
    border: 1px solid var(--pr-line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pr-shadow-sm);
}

.pr-cab-card.pr-cab-fb { opacity: .55; }

.pr-cab-im {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--pr-ink);
}

.pr-cab-im img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.pr-cab-im:hover img { transform: scale(1.05); }

.pr-cab-cam {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    background: rgba(15, 22, 30, .55);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 13px;
}

.pr-cab-tx {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    align-items: flex-start;
}

.pr-cab-deck {
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
}

.pr-cab-tx h4 {
    font-family: var(--pr-serif) !important;
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: var(--pr-ink);
}

.pr-cab-desc,
.pr-cab-desc p {
    font-size: 13px;
    color: var(--pr-grey);
    font-weight: 300;
    line-height: 1.55;
    margin: 0;
}

.pr-cab-price { margin-top: 2px; }

.pr-cab-price b {
    font-family: var(--pr-serif) !important;
    font-size: 20px;
    font-weight: 600;
    color: var(--pr-ink);
    display: inline-block;
    margin-right: 6px;
}

.pr-cab-price small {
    display: block;
    font-size: 12px;
    color: var(--pr-grey);
    font-weight: 300;
}

.pr-cab-price .pr-dep-was { display: inline-block; margin-right: 6px; }

.pr-cab-disc { color: #C43C2B !important; font-weight: 700 !important; }

.pr-cab-book {
    margin-top: auto;
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--pr-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 13px 10px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.pr-cab-book:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 119, 58, .35); }

/* included / not included */
.pr-inc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pr-inc-box {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 20px 24px;
}

.pr-inc-box h5 {
    font-family: var(--pr-serif) !important;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--pr-ink);
}

.pr-inc-box ul { list-style: none; margin: 0; padding: 0; }

.pr-inc-box li {
    font-size: 13.5px;
    color: var(--pr-grey);
    font-weight: 300;
    padding-left: 22px;
    position: relative;
    margin-bottom: 7px;
    line-height: 1.55;
}

.pr-inc-yes li:before { content: '✔'; position: absolute; left: 0; color: #2E7D43; }
.pr-inc-no li:before { content: '✕'; position: absolute; left: 0; color: #C43C2B; }

.pr-cab-none {
    font-family: var(--pr-serif) !important;
    text-align: center;
    color: var(--pr-grey);
    font-size: 18px;
    padding: 16px 0;
}

@media (max-width: 991px) {
    .pr-dep-main {
        grid-template-columns: 1fr auto;
        gap: 12px 16px;
        padding: 16px 18px;
    }

    .pr-dep-date { grid-column: 1; }
    .pr-dep-avail { grid-column: 2; grid-row: 1; justify-self: end; }
    .pr-dep-itin { grid-column: 1 / -1; }
    .pr-dep-price { grid-column: 1; text-align: left; }
    .pr-dep-price b { display: inline-block; margin-right: 6px; }
    .pr-dep-cta { grid-column: 2; justify-self: end; }

    .pr-cab-grid { grid-template-columns: 1fr; }
    .pr-cab-panel { padding: 18px 16px; }
    .pr-inc-grid { grid-template-columns: 1fr; }
}

/* phone field: our input padding !important overrides intl-tel-input's inline
   offset, so the +44 flag/dial code sat on top of the typed number. Clear it
   at ALL widths, everywhere the enquiry form appears. */
#form-accordion .iti--separate-dial-code input,
.pr-lform .iti--separate-dial-code input,
.liveabroad-modal .iti--separate-dial-code input,
.contact-form-container .iti--separate-dial-code input {
    padding-left: 96px !important;
}

#form-accordion .iti,
.pr-lform .iti,
.liveabroad-modal .iti {
    width: 100% !important;
    display: block;
}

/* departures: legacy stylesheets inflate anchors into boxed buttons —
   pin the "See full itinerary" link to its intended quiet size */
.pr-dep-itin a,
.pr-deps .pr-dep-itin a {
    font-size: 12px !important;
    font-family: var(--pr-sans) !important;
    font-weight: 900 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    width: auto !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}

/* See Cabins toggle: legacy button styles inflate it — pin the size hard */
.pr-cab-toggle,
.pr-deps .pr-cab-toggle,
button.pr-cab-toggle {
    font-size: 12px !important;
    font-family: var(--pr-sans) !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

.pr-cab-book,
button.pr-cab-book {
    font-size: 12px !important;
    padding: 13px 10px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    height: auto !important;
}

/* ═══════════ PHASE 6j — HOMEPAGE HERO ON PHONES (Marcus mobile sweep) ═══════════
   The index hero kept a viewport-height box while its image was ~365px tall →
   a big white gap before the search card, and the slide CTAs dominated.
   Same recipe as the chero mobile fix: image becomes the slide's backdrop,
   the text defines the height, and the search card drops into normal flow. */
@media (max-width: 600px) {
    section.hero-area.index-page,
    section.hero-area.index-page.liveaboard,
    body .hero-area.index-page {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 36px !important;
    }

    .index-page .slider-wrapper,
    .index-page .active-slider,
    .index-page .owl-stage-outer,
    .index-page .owl-stage,
    .index-page .owl-item {
        height: auto !important;
        min-height: 0 !important;
    }

    .index-page .slider-items {
        position: relative !important;
        height: auto !important;
        min-height: 480px;
        display: block;
        overflow: hidden;
        background: var(--pr-ink);
    }

    .index-page .slider-items .hero_banner_img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover;
        z-index: 1;
    }

    .index-page .slider-items .text_slider {
        position: relative !important;
        z-index: 3;
        padding: 26px 16px 30px !important;
    }

    /* darken for legibility now the text can sit over any part of the image */
    .index-page .slider-items:after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(15, 22, 30, .55) 0%, rgba(15, 22, 30, .25) 55%, rgba(15, 22, 30, .55) 100%);
        pointer-events: none;
    }

    /* search card: no straddle on phones — straight into the flow below */
    .index-page #searchWrapper {
        position: static !important;
        transform: none !important;
        margin: 14px 0 0 !important;
    }

    /* compact slide CTAs + proof row */
    .index-page .sigle-item .pr-btn-hero {
        font-size: 11px !important;
        padding: 12px 18px !important;
        letter-spacing: .1em !important;
    }

    .index-page .sigle-item .pr-hero-ctas { gap: 10px; }

    .index-page .sigle-item .pr-hero-proof {
        margin-top: 16px;
        gap: 6px 12px;
    }

    .index-page .sigle-item .pr-hero-proof span { font-size: 10.5px !important; }

    .index-page .sigle-item .pr-eyebrow {
        white-space: normal !important;
        font-size: 10px !important;
        letter-spacing: .16em !important;
        line-height: 1.5;
        padding: 7px 12px !important;
        max-width: 100%;
    }
}

/* search page on phones: the straddling card covered the hero text.
   Phone layout = ink intent panel first, then the search card in flow. */
@media (max-width: 600px) {
    .pr-search-hero {
        display: flex;
        flex-direction: column;
    }

    .pr-search-hero .pr-chero {
        order: -1;
        position: relative !important;
        inset: auto !important;
        min-height: 0 !important;
        background: var(--pr-ink);
    }

    .pr-search-hero .pr-chero-inner {
        padding: 24px 16px 28px !important;
    }

    .pr-search-hero .hero-area {
        position: static !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .pr-search-hero .hero-area .slider-wrapper { display: none !important; }

    .pr-search-hero #searchWrapper {
        position: static !important;
        transform: none !important;
        margin: 14px 0 0 !important;
    }

    .pr-search-results { padding-top: 48px; }
}

/* ═══════════ PHASE 6k — LFORM HEADING ALIGN + IMAGE PLACEHOLDERS + OWN WHATSAPP WIDGET ═══════════ */

/* 1/2 numbered headings: hard-left (modal CSS was centring them) */
.pr-lf-title {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* broken images → branded placeholder (class added by planet-redesign.js) */
.pr-im-broken {
    background: linear-gradient(150deg, var(--pr-ink) 0%, #2A3440 100%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.pr-im-broken:before {
    content: '📷  Photos on request';
    font-family: var(--pr-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B9C2CA;
}

.pr-im-broken img { display: none !important; }
.pr-im-broken .pr-cab-cam { display: none; }

/* belt & braces: any straggler Elfsight WHATSAPP embeds stay hidden.
   Scoped to the WhatsApp app id only — the Google-reviews Elfsight
   widget (elfsight-app-db1b2f5a-…) must keep rendering. */
[class*="elfsight-app-dba60502"] { display: none !important; }

/* our own WhatsApp widget */
.pr-wa {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: 90;
    font-family: var(--pr-sans);
}

.pr-wa-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    background: #25D366;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, box-shadow .2s;
}

.pr-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 211, 102, .55); }

.pr-wa-btn svg { width: 28px; height: 28px; fill: #fff; }

.pr-wa-pop {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(300px, calc(100vw - 36px));
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-md);
    display: none;
    overflow: hidden;
}

.pr-wa.open .pr-wa-pop { display: block; }

.pr-wa-head {
    background: var(--pr-ink);
    color: #fff;
    padding: 14px 16px;
    position: relative;
}

.pr-wa-head b {
    font-family: var(--pr-serif);
    font-size: 16px;
    font-weight: 600;
    display: block;
}

.pr-wa-head span {
    font-size: 11.5px;
    color: #B9C2CA;
    font-weight: 300;
}

.pr-wa-x {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.pr-wa-pop p {
    font-size: 13.5px;
    color: var(--pr-ink-soft);
    line-height: 1.6;
    margin: 0;
    padding: 14px 16px 12px;
}

.pr-wa-go {
    display: block;
    margin: 0 16px 16px;
    background: #25D366;
    color: #fff !important;
    text-align: center;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 13px 10px;
    text-decoration: none !important;
}

.pr-wa-go:hover { background: #1EBE5A; }

/* phones/tablets: sit above the bottom call bar */
@media (max-width: 991px) {
    .pr-wa { bottom: 84px; right: 14px; }
    .pr-wa-btn { width: 48px; height: 48px; }
    .pr-wa-btn svg { width: 24px; height: 24px; }
}

/* hide alongside the bottom bar whenever an overlay is open */
body.modal-open .pr-wa,
body:has(.modal.show) .pr-wa,
body:has(.offcanvas.show) .pr-wa,
body:has(.pr-modal.open) .pr-wa {
    display: none !important;
}

/* ═══════════ PHASE 6l — DEPARTURE LIST: SPACE BETWEEN SECTIONS ═══════════
   Marcus 21 Jul: the joined-table look ran each departure (and its expanded
   cabins panel) flush into the next — separate each block into its own card. */

.pr-deps { gap: 14px; }

.pr-dep-row {
    border-top: 1px solid var(--pr-line);   /* every card gets its full border back */
    box-shadow: var(--pr-shadow-sm, 0 1px 3px rgba(28, 34, 40, .06));
}

/* ═══════════ PHASE 6m — CONSULT-CALENDAR LOADER + VIDEO FACADE + MONTH-NAV ENDS ═══════════ */

/* 1) branded loading state while the Koalendar iframe arrives */
#prConsultModal .pr-panel { position: relative; }

.pr-m-load {
    position: absolute;
    inset: 58px 0 0;                 /* below the modal header bar */
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    z-index: 1;
}

.pr-m-spin {
    width: 38px;
    height: 38px;
    border: 3px solid var(--pr-line);
    border-top-color: var(--pr-orange);
    border-radius: 50%;
    animation: pr-spin .8s linear infinite;
    margin-bottom: 6px;
}

@keyframes pr-spin { to { transform: rotate(360deg); } }

.pr-m-load b {
    font-family: var(--pr-serif);
    font-size: 17px;
    color: var(--pr-ink);
    font-weight: 600;
}

.pr-m-load span { font-size: 13px; color: var(--pr-grey); }

.pr-m-load small { font-size: 12px; color: var(--pr-grey); margin-top: 10px; }

.pr-m-load small a { color: var(--pr-orange); font-weight: 700; text-decoration: none; }

#prConsultModal.pr-frame-ready .pr-m-load { display: none; }

/* 2) YouTube click-to-play facade (boat details) */
.pr-vvideo-play {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--pr-ink);
    cursor: pointer;
    overflow: hidden;
}

.pr-vvideo-play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease, opacity .35s ease;
    opacity: .92;
}

.pr-vvideo-play:hover img { transform: scale(1.04); opacity: 1; }

.pr-vvideo-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pr-orange);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.pr-vvideo-btn:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}

.pr-vvideo-play:hover .pr-vvideo-btn { transform: translate(-50%, -50%) scale(1.08); }

.pr-vvideo-tag {
    position: absolute;
    left: 12px;
    bottom: 10px;
    background: rgba(28, 34, 40, .82);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 6px 12px;
}

/* 3) month prev/next: greyed out when there's nothing before/after */
.pr-vmonth-bar .pr-btn-hero-ghost2:disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

/* ═══════════ PHASE 6n — FULL-ITINERARY MODAL RESKIN ═══════════
   The "See full itinerary" modal (#dive_cruise_itinerary_modal) rendered raw
   Bootstrap defaults; content HTML is built by legacy JS in vessels.blade.php,
   so this reskin is CSS-only against the classes that JS emits. */

.dive_cuise_itinary_mod .modal-content {
    border: 0;
    border-radius: var(--pr-radius);
    box-shadow: 0 24px 64px rgba(28, 34, 40, .28);
}

.dive_cuise_itinary_mod .modal-header {
    border-bottom: 1px solid var(--pr-line);
    padding: 20px 28px;
}

.dive_cuise_itinary_mod .modal-title {
    font-family: var(--pr-serif) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    line-height: 1.2;
}

.dive_cuise_itinary_mod .modal-body { padding: 24px 28px 30px; margin: 0 !important; }

/* media row: gallery image + video sit as tidy 16:9 blocks */
.dive_cuise_itinary_mod .dive_iti_det_rightimg {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--pr-ink);
    height: auto !important;
    margin-top: 0 !important;
}

.dive_cuise_itinary_mod .dive_iti_det_rightimg img { object-fit: cover; display: block; }

.dive_cuise_itinary_mod .video-container {
    margin: 0 !important;
    height: 100%;
    padding: 0 !important;
    position: relative;
}

.dive_cuise_itinary_mod .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.dive_cuise_itinary_mod .modal-body .row { min-height: 0 !important; }

/* day-by-day narrative */
.dive_cuise_itinary_mod .dive_iti_det { margin-top: 28px !important; }

.dive_cuise_itinary_mod .dive_iti_det_left {
    font-size: 14.5px;
    line-height: 1.75 !important;
    color: var(--pr-ink-soft);
}

.dive_cuise_itinary_mod .dive_iti_det_left strong,
.dive_cuise_itinary_mod .dive_iti_det_left b {
    color: var(--pr-ink);
}

.dive_cuise_itinary_mod .dive_iti_det_left p { margin-bottom: 12px; }

/* departure / return card */
.dive_cuise_itinary_mod .trip_length_section {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line) !important;
    padding: 20px 22px !important;
}

.dive_cuise_itinary_mod .inner_content_trip_len { display: grid; gap: 16px; }

.dive_cuise_itinary_mod .inner_content_trip_len strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 4px;
}

.dive_cuise_itinary_mod .inner_content_trip_len p {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--pr-ink);
}

.dive_cuise_itinary_mod .inner_content_trip_len p:first-of-type {
    font-family: var(--pr-serif);
    font-size: 19px;
    font-weight: 600;
}

.dive_cuise_itinary_mod .inner_content_trip_len .fa-anchor {
    color: var(--pr-teal);
    margin-right: 7px;
    font-size: 12px;
}

/* included / not-included card */
.dive_cuise_itinary_mod .mandatory_charges_section {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 20px 22px;
    margin-top: 16px;
}

.dive_cuise_itinary_mod .mandatory_charges_section strong {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2E7D46;
    margin-bottom: 6px;
}

.dive_cuise_itinary_mod .mandatory_charges_section strong.red_txxt {
    color: #B4552D;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pr-line);
}

.dive_cuise_itinary_mod .mandatory_charges_section p {
    margin: 0 0 8px !important;
    padding: 0 0 0 20px !important;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pr-ink-soft);
    position: relative;
}

.dive_cuise_itinary_mod .mandatory_charges_section p:before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #2E7D46;
    font-size: 12px;
}

.dive_cuise_itinary_mod .mandatory_charges_section p.red_txxt { color: var(--pr-ink-soft) !important; }

.dive_cuise_itinary_mod .mandatory_charges_section p.red_txxt:before { content: '✕'; color: #B4552D; }

/* phone */
@media (max-width: 767px) {
    .dive_cuise_itinary_mod .modal-header { padding: 16px 18px; }
    .dive_cuise_itinary_mod .modal-title { font-size: 21px !important; }
    .dive_cuise_itinary_mod .modal-body { padding: 18px 16px 24px; }
    .dive_cuise_itinary_mod .dive_iti_det { margin-top: 20px !important; }
    .dive_cuise_itinary_mod .dive_iti_det_rightimg { margin-top: 14px !important; }
    .dive_cuise_itinary_mod .modal-body .col-lg-6:first-child .dive_iti_det_rightimg { margin-top: 0 !important; }
    .dive_cuise_itinary_mod .trip_length_section { margin-top: 6px; }
}

/* the "Please wait" overlay shown while the itinerary loads
   (.flight_change_result — legacy naming, toggled by seeFullItinerary) */
.flight_change_result {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1090 !important;
    background: rgba(28, 34, 40, .55) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.flight_change_result .extra_flight_change {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: 0 24px 64px rgba(28, 34, 40, .3);
    padding: 30px 42px 26px;
    text-align: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* replace the legacy spinner svg with our brand spinner */
.flight_change_result .inner_flight_chage_load svg { display: none !important; }

.flight_change_result .inner_flight_chage_load:before {
    content: '';
    display: block;
    width: 38px;
    height: 38px;
    border: 3px solid var(--pr-line);
    border-top-color: var(--pr-orange);
    border-radius: 50%;
    animation: pr-spin .8s linear infinite;
    margin: 0 auto 12px;
}

.flight_change_result .inner_flight_chage_load,
.flight_change_result .inner_flight_chage_load * {
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 7 — CLIENT QUOTE PAGE (/quick-quote/view-quote/…)
   The page clients receive with their personal holiday quote.
   Own blank layout + quote-style.css; this layer loads after it and
   re-dresses everything in the redesign language: ink + sand, Lora
   headings, hairline cards, sharp corners, orange CTAs.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- top bar (logo / protection / save quote) ---------- */
.header_inner.header_sec {
    background: #fff;
    border-bottom: 1px solid var(--pr-line);
    padding: 10px 0;
}

.header_inner .header_inside { align-items: center; }

.header_inner #idenquiryDiv .form-control {
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-radius);
    font-size: 13px;
    padding: 9px 14px;
    box-shadow: none;
}

.header_inner #idenquiryDiv .btn {
    background: var(--pr-orange) !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 20px;
    border: 0;
}

/* ---------- hero banner ---------- */
.quote-details .banner_sec {
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.quote-details .banner-overlay {
    background: linear-gradient(180deg, rgba(18, 22, 26, .62) 0%, rgba(18, 22, 26, .28) 55%, rgba(18, 22, 26, .62) 100%) !important;
}

.quote-details .banner-text {
    text-transform: none !important;
    text-align: center;
    margin-top: 40px;
}

.quote-details .banner-text h3 {
    font-family: var(--pr-serif) !important;
    font-size: clamp(30px, 4.6vw, 46px) !important;
    font-weight: 600 !important;
    line-height: 1.15;
    letter-spacing: 0;
}

.quote-details .banner-text h3 span {
    font-style: italic;
    color: #FFD9A8;
}

.quote-details .bannerInnerText p {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin-top: 14px;
}

/* ---------- consultant card ---------- */
.quote-details .mypacked_block {
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: 0 18px 44px rgba(28, 34, 40, .12);
}

.quote-details .packed_info { border-bottom: 1px solid var(--pr-line); }

.quote-details .packed_info h3 {
    font-family: var(--pr-serif) !important;
    font-weight: 600;
    color: var(--pr-ink);
}

.quote-details .packed_info p {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
}

.quote-details .packed_info li a { color: var(--pr-ink); font-size: 15px; }

/* ---------- trip title + price + deposit ---------- */
.quote-details .ticket_name h4 {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .ticket_name p span { color: var(--pr-ink-soft); }

.quote-details .ticket_name h2 span#ppp {
    font-family: var(--pr-serif) !important;
    color: var(--pr-ink) !important;
}

.quote-details #price_per_person { color: var(--pr-ink) !important; font-weight: 600; }

.quote-details .ticket_name h2 b {
    color: var(--pr-ink-soft) !important;
    font-weight: 600;
}

.quote-details .breakup_prcc { color: var(--pr-grey) !important; font-size: 12.5px !important; }

.quote-details .minimal_deposit_head {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line) !important;
    padding: 16px 20px !important;
}

.quote-details .minimal_deposit_head h3 {
    font-family: var(--pr-serif) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .minimal_deposit_head .balance_due_date {
    color: var(--pr-ink-soft) !important;
    font-size: 13px !important;
    font-weight: 600;
}

.quote-details .mapInfo {
    color: var(--pr-teal) !important;
    font-size: 12.5px !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* ---------- trip facts row (dates / pax / flights / hotels) ---------- */
.quote-details .tickets_list { border-top: 0 !important; }

.quote-details .tickets_list li {
    font-size: 13.5px !important;
    color: var(--pr-ink) !important;
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    padding: 8px 16px !important;
    margin: 4px 8px 4px 0;
}

/* ---------- included services ---------- */
.quote-details .included_data h3 {
    font-family: var(--pr-serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .included_data li {
    font-size: 14.5px !important;
    color: var(--pr-ink-soft) !important;
    line-height: 1.65 !important;
}

/* ---------- section headings (Flight / Hotel / …) ---------- */
.quote-details .mdTitle {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

/* ---------- flights ---------- */
.quote-details .fInfo_rows {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 20px 22px;
    margin-bottom: 14px;
}

.quote-details .fInfo_row_left label,
.quote-details .fInfo_row_right label { color: var(--pr-ink-soft); font-size: 13.5px; }

.quote-details .flight_tour h4 {
    font-family: var(--pr-serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .flight_tour:before { border-color: var(--pr-line) !important; }

/* the airport names sit on the dashed route line — give them a white
   backing so wrapped names (e.g. "London Heathrow") never get struck through */
.quote-details .flight_tour > span {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0 8px;
}

.quote-details .flight_tour > span:first-child { padding-left: 0; }

.quote-details .flight_tour > span:last-child { padding-right: 0; }

/* ---------- hotel / liveaboard cards ---------- */
.quote-details .hotelInfoCard {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 26px 28px !important;
    margin: 26px 0 !important;
}

.quote-details .hotelInfoCard label { color: var(--pr-grey); font-size: 13px; }

/* the Hotel/Liveaboard heading and date labels sit on the stay timeline —
   white backing so the line never strikes through them */
.quote-details .hotelInfoCard .mdTitle,
.quote-details .hotelInfoCard > span > label {
    position: relative;
    z-index: 1;
    background: #fff;
    padding-right: 10px;
}

.quote-details .hotelInfoCard h2,
.quote-details .hotelInfoCard h3:not(.include_area h3) {
    font-family: var(--pr-serif) !important;
    color: var(--pr-ink) !important;
}

.quote-details .include_area h3,
.quote-details .include_area h1 {
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
}

.quote-details .include_area li { color: var(--pr-ink-soft); }

.quote-details .dest-gallery-images img { border-radius: var(--pr-radius) !important; }

.quote-details .upgrades_checkbox label { color: var(--pr-ink-soft) !important; }

.quote-details .upgrades_checkbox input[type='checkbox'] { accent-color: var(--pr-orange); }

/* ---------- descriptions / sport centres ---------- */
.quote-details .pointDesny_inside hr { border-color: var(--pr-line); opacity: 1; }

.quote-details .pointDesny_inside h3 {
    font-family: var(--pr-serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .pointDesny_inside p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--pr-ink-soft) !important;
}

.quote-details .readMoreText {
    color: var(--pr-orange) !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* ---------- add-services accordion ---------- */
.quote-details .addServices_inside .card {
    border: 1px solid var(--pr-line) !important;
    border-radius: var(--pr-radius) !important;
    background: #fff;
}

.quote-details .addServices_inside .card-header { background: var(--pr-sand) !important; border-bottom: 1px solid var(--pr-line) !important; }

.quote-details .addServices_inside .btn-header-link {
    font-family: var(--pr-sans) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink) !important;
}

/* ---------- save button + deposit reminder ---------- */
.quote-details .save_btns {
    background: var(--pr-orange) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff !important;
    padding: 16px 54px !important;
    box-shadow: 0 10px 24px rgba(255, 119, 58, .32);
}

.quote-details .save_btns:hover { background: #E86426 !important; }

.quote-details .minimal_deposit {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line) !important;
    padding: 18px 22px !important;
}

.quote-details .minimal_deposit h1 {
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .minimal_deposit p { color: var(--pr-ink-soft) !important; }

/* ---------- map ---------- */
.quote-details .map-info { border-top: 1px solid var(--pr-line); }

/* ---------- consultant comments / FAQ ---------- */
.quote-details .consultant-comments h4 {
    font-family: var(--pr-serif) !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
}

.quote-details .consultant-comments .panel {
    border: 1px solid var(--pr-line) !important;
    border-radius: var(--pr-radius) !important;
    box-shadow: none !important;
    margin-bottom: 10px;
    background: #fff;
}

.quote-details .consultant-comments .panel-heading { background: #fff !important; }

.quote-details .consultant-comments .panel-title a {
    font-family: var(--pr-serif) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    text-decoration: none !important;
}

.quote-details .consultant-comments .panel-body {
    color: var(--pr-ink-soft) !important;
    font-size: 14.5px;
    line-height: 1.7;
    border-top: 1px solid var(--pr-line) !important;
}

/* ---------- ready to book ---------- */
.quote-details .readybook_sec {
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
    padding: 64px 0;
    margin-top: 40px;
}

.quote-details .readybook_inside { background: transparent !important; }

.quote-details .readybook_inside .mdTitle { font-size: 24px !important; line-height: 1.35 !important; }

.quote-details .ready_book li { align-items: flex-start !important; }

.quote-details .ready_book li h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: var(--pr-sans) !important;
    color: #fff;
    background: var(--pr-orange);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    margin-right: 22px !important;
}

.quote-details .ready_book li h4 {
    font-family: var(--pr-serif) !important;
    font-size: 20px !important;
    color: var(--pr-ink) !important;
}

.quote-details .ready_book li h6 {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--pr-ink-soft) !important;
    margin-bottom: 10px !important;
}

.quote-details .quote-bank-details {
    background: #fff;
    border: 1px solid var(--pr-line);
    padding: 18px 22px;
    margin-top: 14px;
}

.quote-details .quote-bank-details p { margin: 0 0 6px !important; font-size: 14px !important; }

.quote-details .quote-bank-details b { color: var(--pr-ink); }

/* ---------- phone ---------- */
@media (max-width: 767px) {
    .quote-details .banner_sec { min-height: 440px !important; }
    .quote-details .banner-text { margin-top: 0; }
    /* the consultant card pulls up -220px over the banner on desktop —
       far too deep at phone widths, where it swallowed the banner text */
    .quote-details .mypacked_block { margin-top: -80px !important; }
    .quote-details .banner-text h3 { font-size: 27px !important; }
    .quote-details .hotelInfoCard { padding: 18px 16px !important; margin: 16px 0 !important; }
    .quote-details .fInfo_rows { padding: 16px 14px; }
    .quote-details .fInfo_inside { padding-bottom: 0 !important; margin-bottom: 0 !important; }
    .quote-details .flightInfo_sec { padding-bottom: 0 !important; }
    .quote-details .hotelInfo_inside { padding-top: 20px !important; margin-top: 10px !important; }
    .quote-details .readybook_sec { padding: 44px 0; }
    .quote-details .ready_book li h1 { width: 38px; height: 38px; flex: 0 0 38px; font-size: 17px !important; margin-right: 14px !important; }
    .header_inner #idenquiryDiv .form-control { max-width: 130px; }
    .quote-details .save_btns { width: 100%; }

    /* the trip summary (#subnav) pins to the top on scroll — at phone
       widths the full 344px block swallowed half the screen. When
       pinned, collapse it to destination + price only. */
    .quote-details #subnav.fixed {
        background: #fff !important;
        border-bottom: 1px solid var(--pr-line);
        box-shadow: 0 10px 24px rgba(28, 34, 40, .08);
        padding: 10px 16px !important;
    }

    .quote-details #subnav.fixed .tickets_list,
    .quote-details #subnav.fixed .minimal_deposit_head,
    .quote-details #subnav.fixed .breakup_prcc,
    .quote-details #subnav.fixed .mapInfo,
    .quote-details #subnav.fixed .ticket_name > span > p { display: none !important; }

    .quote-details #subnav.fixed .ticket_name { padding: 0 !important; margin: 0 !important; }

    .quote-details #subnav.fixed .ticket_name h4 { font-size: 17px !important; margin: 0 !important; }

    .quote-details #subnav.fixed .ticket_name h2 { margin: 0 !important; }

    .quote-details #subnav.fixed .ticket_name h2 span#ppp { font-size: 18px !important; }
}

/* ═══════════ PHASE 7b — QUOTE PAGE DESKTOP LUXURY PASS ═══════════
   Marcus 21 Jul (client-quotes PDF review): desktop composition felt
   unbalanced and several legacy fragments survived. CSS-only, so the
   deploy remains a single stylesheet upload. */

/* -- hero: grander, more headroom -- */
@media (min-width: 768px) {
    .quote-details .banner_sec { min-height: 600px; }
    .quote-details .banner-text { margin-top: -40px; }
}

.quote-details .banner-text h3 {
    font-size: clamp(30px, 4.4vw, 54px) !important;
    text-shadow: 0 2px 24px rgba(18, 22, 26, .45);
}

.quote-details .bannerInnerText p { margin-top: 20px; letter-spacing: .18em; }

/* -- consultant strip: roomier, aligned -- */
.quote-details .packed_info { padding: 26px 34px !important; }

.quote-details .packed_info .pro_pics {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    margin-right: 18px !important;
}

.quote-details .packed_info h3 { font-size: 24px !important; margin-bottom: 2px !important; }

.quote-details .packed_info ul {
    display: flex !important;
    gap: 26px;
    justify-content: flex-end;
    align-items: center;
    margin: 0 !important;
}

.quote-details .packed_info li { margin: 0 !important; }

/* -- trip block: balanced two-column, no stray gaps -- */
.quote-details .ticket_name { padding: 30px 34px 10px !important; }

.quote-details .ticket_name p:empty { display: none !important; }

.quote-details .ticket_name h4 { font-size: 30px !important; margin-bottom: 4px !important; }

.quote-details .ticket_name h2 span#ppp { font-size: 30px !important; }

.quote-details .minimal_deposit_head { margin-top: 14px !important; }

.quote-details .tickets_list { padding: 6px 34px 26px !important; }

/* -- included services: editorial list with teal ticks -- */
.quote-details .included_data { padding: 30px 34px 34px !important; }

.quote-details .included_data h3 { margin-bottom: 16px !important; }

.quote-details .included_data ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }

.quote-details .included_data ul > li {
    position: relative;
    padding-left: 28px !important;
    margin-bottom: 10px !important;
}

.quote-details .included_data ul > li:before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--pr-teal-deep);
    font-size: 13px;
}

.quote-details .included_data ul > li li { padding-left: 0 !important; }

.quote-details .included_data ul > li li:before { content: none; }

.quote-details .included_data img:not(li img) { border: 1px solid var(--pr-line); }

/* -- flight rows: refined route layout -- */
@media (min-width: 768px) {
    .quote-details #dataDesktopOnly {
        display: grid !important;
        grid-template-columns: 170px 1fr 170px;
        align-items: center;
        gap: 24px;
    }
}

.quote-details .fInfo_rows h6 { margin: 0 !important; }

.quote-details .fInfo_row_left label b,
.quote-details .fInfo_row_right label b { color: var(--pr-ink); font-weight: 700; }

/* the pink site-icon pins scattered round the route read as noise */
.quote-details .flight_tour > span > img,
.quote-details .flight_tour img { display: none !important; }

.quote-details .flight_tour span[style*='text-align:center'],
.quote-details .flight_tour > span:nth-child(2) {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-grey);
    background: #fff;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    padding: 6px 14px;
    width: auto !important;
    align-self: center;
}

/* -- hotel / liveaboard card: kill the broken pink timeline -- */
.quote-details .hotelInfoCard:before { display: none !important; }

.quote-details .hotelInfoCard section:before,
.quote-details .hotelInfoCard section:after { display: none !important; }

@media (min-width: 768px) {
    .quote-details .hotelInfoCard > span.width25 {
        border-right: 1px solid var(--pr-line);
        padding-right: 24px;
    }

    .quote-details .hotelInfoCard > span.width75 { padding-left: 30px; }
}

.quote-details .hotelInfoCard > span.width25 .mdTitle {
    font-family: var(--pr-sans) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
    margin-bottom: 12px !important;
}

.quote-details .hotelInfoCard > span.width25 label {
    display: block;
    font-family: var(--pr-serif) !important;
    font-size: 17px !important;
    font-weight: 600;
    color: var(--pr-ink) !important;
    margin-bottom: 2px;
}

.quote-details .hotelInfoCard > span.width25 label + label:before {
    content: 'to ';
    font-family: var(--pr-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-right: 4px;
}

/* -- pre-booking note: sand card instead of floating hr block -- */
.quote-details .titleStyle.pointDesny_inside hr { display: none; }

.quote-details .titleStyle.pointDesny_inside > div {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    padding: 22px 26px !important;
}

.quote-details .titleStyle.pointDesny_inside h3 { font-size: 19px !important; margin-bottom: 8px !important; }

/* -- sport centre band: calm sand section -- */
.quote-details .pointDesny_sec.__inside {
    background: var(--pr-sand) !important;
    border-top: 1px solid var(--pr-line);
    border-bottom: 1px solid var(--pr-line);
    padding: 44px 0 !important;
}

.quote-details .pointDesny_sec.__inside .mdTitle { font-size: 22px !important; }

.quote-details .sport_center_region { background: transparent !important; }

.quote-details .dest-gallery-images { border: 1px solid var(--pr-line); }

/* -- save area: composed, not stretched -- */
.quote-details .saveBtn .instructor_detail { text-align: center; }

.quote-details .save_btns {
    width: auto !important;
    min-width: 320px;
    display: inline-block !important;
    margin: 0 auto !important;
}

.quote-details .minimal_deposit {
    max-width: 620px;
    margin: 18px auto 0 !important;
    text-align: center;
}

/* -- FAQ band: teal legacy → sand -- */
.quote-details .consultant-comments,
.quote-details .faqSection {
    background: var(--pr-sand) !important;
    border-top: 1px solid var(--pr-line);
    padding: 56px 0 !important;
}

.quote-details .consultant-comments h4 {
    font-size: 30px !important;
    color: var(--pr-ink) !important;
    margin-bottom: 24px !important;
}

.quote-details .consultant-comments .panel-body p { color: var(--pr-ink-soft) !important; }

/* -- ready-to-book: contained width for reading comfort -- */
.quote-details .readybook_inside { max-width: 860px !important; }

/* phone guards for the desktop-pass additions */
@media (max-width: 767px) {
    .quote-details .packed_info { padding: 20px 18px !important; }
    .quote-details .packed_info ul { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
    .quote-details .ticket_name { padding: 20px 18px 8px !important; }
    .quote-details .ticket_name h4 { font-size: 24px !important; }
    .quote-details .tickets_list { padding: 4px 18px 20px !important; }
    .quote-details .included_data { padding: 20px 18px 24px !important; }
    .quote-details .save_btns { min-width: 0; width: 100% !important; }
}

/* ═══════════ PHASE 6o — STRAY <br> GAP KILLER ═══════════
   CMS-stored HTML often carries <br><br> BETWEEN paragraphs (invisible in
   the admin editor, but rendered as blank lines on the site — Marcus spotted
   ~150px gaps on the Muscat region page). A <br> that is a DIRECT child of a
   prose container (i.e. between <p> blocks) is never intentional — hide it.
   <br> inside a paragraph is untouched. */
#prRegionText > br,
#prCintroText > br,
#prTourHighlights > br,
#prCentreText > br,
#prTypeText > br,
#prLiveText > br,
#prAboutText > br,
#prHotelText > br,
.pr-static-prose > br,
.pr-clamp > br,
.dive_iti_det_left > br,
.n_descriptionMoreText > br,
.sport_center_region_text > br,
.pointDesny_inside > br,
.included_data > br {
    display: none !important;
}

/* ═══════════ PHASE 6p — HEADER LAYERING + OFFCANVAS CLOSE UX ═══════════ */

/* 1) the frosted sticky header showed two tones: the bar itself is
   rgba(255,255,255,.94)+blur but the logo box and nav strip inside carry
   their own SOLID white, which doesn't span the full width — the exposed
   edges rendered a slightly different colour over dark heroes. Make the
   inner layers transparent so the frosted layer reads as one surface. */
.sticky-header .header.bg-white,
.sticky-header .header-bottom {
    background: transparent !important;
}

/* 2) contact slide-out: always-visible close button (the original ✕ lives
   in the header row of the scrolling body, so it disappears the moment the
   panel auto-scrolls to a section) */
.pr-oc-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--pr-ink);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(28, 34, 40, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-oc-x:hover { background: #2A3440; }

/* phase 6p addendum: the legacy ✕ in the slide-out's header row is
   superseded by the pinned .pr-oc-x — hide it so there's only one */
.offcanvas .btn-close { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 8 — PER-SITE ACCENT TRIAL (HOMEPAGES ONLY)
   Marcus 21 Jul: the universal CTA orange reads "easyJet" and makes the
   six sites feel identical — trial the site's own brand colour as the
   accent, homepage only. planet-redesign.js tags <body> with
   .pr-home (when .hero-area.index-page exists) and .pr-site-{ssn}.
   Overriding --pr-orange inside that scope re-tints every accent on the
   page: hero CTAs, kickers, chips, mobile bar, consult band.
   Curated tones (deep enough for white text, truer than the raw brand
   pastels) — and pd vs pwf deliberately pushed apart:
     pks kitesurf   deep rose      #D4517E   (brand #E582A9)
     pws windsurf   ocean teal     #17A2A8   (brand #1CABB0)
     pd  dive       golden amber   #E28A06   (brand #F4B148/#eb930e)
     pwf wing foil  coral red      #F2593D   (brand #fe804b — was a
                                              near-clone of dive's orange)
     ski            alpine blue    #2E9FD4   (brand #6ECAED)
     psup           terracotta     #C64545   (brand #CD5050)
   Remove this block (or the .pr-home guard) to end the trial. */

body.pr-home.pr-site-pks { --pr-orange: #D4517E; --pr-accent-hover: #BC3E6A; }
body.pr-home.pr-site-pws { --pr-orange: #17A2A8; --pr-accent-hover: #0E8489; }
body.pr-home.pr-site-pd  { --pr-orange: #E28A06; --pr-accent-hover: #C77803; }
body.pr-home.pr-site-pwf { --pr-orange: #F2593D; --pr-accent-hover: #D6452C; }
body.pr-home.pr-site-ski { --pr-orange: #2E9FD4; --pr-accent-hover: #1F86B8; }
body.pr-home.pr-site-psup { --pr-orange: #C64545; --pr-accent-hover: #A93838; }

/* hover states hardcode the old orange in a few core rules — retint them
   inside the trial scope */
body.pr-home[class*='pr-site-'] .pr-btn-hero-orange:hover,
body.pr-home[class*='pr-site-'] .pr-btn-expert:hover,
body.pr-home[class*='pr-site-'] .pr-mc-consult:hover,
body.pr-home[class*='pr-site-'] .save_btns:hover {
    background: var(--pr-accent-hover) !important;
}

/* the orange CTA glow shadow reads wrong under other hues — soften to a
   neutral ink shadow inside the trial scope */
body.pr-home[class*='pr-site-'] .pr-btn-hero-orange,
body.pr-home[class*='pr-site-'] .pr-mc-consult {
    box-shadow: 0 10px 24px rgba(28, 34, 40, .22);
}

/* phase 8 addendum: the header logo ran tiny (54px in a 77px bar) for a
   brand-led business — scale it up on desktop; the sticky bar breathes
   a little taller with it. Source PNG is 1006×265, so it stays crisp. */
@media (min-width: 1281px) {
    .sticky-header .header img.desktop,
    .sticky-header .logo img.desktop {
        height: 70px !important;
        width: auto !important;
        padding: 6px 0;
    }
}

/* mid-desktop (992–1280px): keep the original 54px logo — the header row
   here is already at its limit (see project notes: pre-existing overflow
   band at ~1025–1199px, needs its own hamburger-extension pass) */
@media (min-width: 992px) and (max-width: 1280px) {
    .sticky-header .header img.desktop,
    .sticky-header .logo img.desktop {
        height: 54px !important;
        width: auto !important;
    }
}

/* ═══════════ PHASE 7c — QUOTE LIST PAGE (/client-quotes/{enquiry}) ═══════════
   The multi-quote overview a client lands on before opening a full quote.
   CSS-only, keyed on the legacy classes (quote-style.css loads first). */

/* hero — same language as the single-quote page */
.banner_sec .banner-overlay {
    background: linear-gradient(180deg, rgba(18, 22, 26, .62) 0%, rgba(18, 22, 26, .3) 55%, rgba(18, 22, 26, .62) 100%) !important;
}

.banner_sec .banner_inside { text-transform: none !important; }

.banner_sec .banner_inside h1 {
    font-family: var(--pr-serif) !important;
    font-size: clamp(28px, 4vw, 46px) !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.18;
    text-shadow: 0 2px 24px rgba(18, 22, 26, .45);
    letter-spacing: 0 !important;
}

.banner_sec .banner_inside h1,
.banner_sec .banner_inside h1 span {
    text-transform: none !important;
    font-family: var(--pr-serif) !important;
}

.banner_sec .banner_inside h1 span { color: #FFD9A8; font-style: italic; }

.banner_sec .banner_inside p {
    max-width: 780px;
    margin: 12px auto 0 !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, .88) !important;
}

.banner_sec .banner_inside p i { font-family: var(--pr-serif); font-size: 15.5px; }

/* quote cards */
.quote-list .package_cards {
    background: #fff !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: var(--pr-radius) !important;
    box-shadow: 0 14px 38px rgba(28, 34, 40, .09);
    padding: 30px 32px !important;
    margin-bottom: 28px !important;
}

.quote-list .quotes.title {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-orange) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 10px;
}

.quote-list .package_content h1,
.quote-list .quote_card h1 {
    font-family: var(--pr-serif) !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
}

.quote-list .depar_times li {
    font-size: 14px !important;
    color: var(--pr-ink-soft) !important;
    padding: 4px 0 !important;
}

.quote-list .depar_times li span { color: var(--pr-ink) !important; font-weight: 700; }

.quote-list .depar_times li img { width: 15px; opacity: .65; }

.quote-list .address_list li {
    border-top: 1px solid var(--pr-line);
    padding: 8px 0 !important;
    font-size: 13.5px !important;
    color: var(--pr-ink-soft) !important;
    margin: 0 !important;
}

.quote-list .package_content h6,
.quote-list .quote_card h6 {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-grey) !important;
    margin: 14px 0 !important;
}

.quote-list .viewQuote {
    background: var(--pr-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 30px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(28, 34, 40, .18);
}

.quote-list .viewQuote:hover { background: #E86426 !important; }

/* image + price overlay */
.quote-list .package_pic,
.quote-list .img-box {
    border-radius: var(--pr-radius) !important;
    overflow: hidden;
    position: relative;
}

.quote-list .package_pic img { object-fit: cover; }

.quote-list .price_description {
    background: rgba(28, 34, 40, .88) !important;
    color: #fff !important;
    padding: 14px 18px !important;
}

.quote-list .price_pp {
    font-family: var(--pr-serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.quote-list .price_pax {
    font-size: 10.5px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #B9C2CA !important;
}

.quote-list .tt_price { font-size: 13.5px !important; color: #fff !important; }

/* older quotes: calmer sand cards */
.quote-list .quote_card {
    background: var(--pr-sand) !important;
    box-shadow: none;
}

/* show-more */
.showmore_btn a {
    display: inline-block;
    border: 1.5px solid var(--pr-ink) !important;
    color: var(--pr-ink) !important;
    background: transparent !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 13px 30px !important;
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .quote-list .package_cards { padding: 20px 18px !important; }
    .quote-list .package_content h1, .quote-list .quote_card h1 { font-size: 22px !important; }
    .banner_sec .banner_inside p { font-size: 13.5px !important; }
}

/* ═══════════ PHASE 8b — HOMEPAGE LATEST OFFERS (offers-page cards) ═══════════
   The homepage offers section now renders the same .pr-offer-card component
   as /offers (Marcus 22 Jul). Wrapper spacing + grid only — the card styles
   already exist from phase 4h. */
.pr-home-offers {
    padding: 84px 0;
    background: var(--pr-sand);
    border-top: 1px solid var(--pr-line);
}

.pr-home-offers-grid { margin-top: 40px; }

/* the homepage lazyloader leaves images blank until scroll — give the frame
   an ink placeholder so cards never flash white */
.pr-home-offers .pr-hotel-im { background: var(--pr-ink); }

.pr-home-offers-more { text-align: center; margin-top: 40px; }

@media (max-width: 767px) {
    .pr-home-offers { padding: 52px 0; }
    .pr-home-offers-grid { margin-top: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 9 — QUOTE V3 PREVIEW LAYER (body.pr-qv3, only via ?design=v3)
   Styles for the structures quote-v3.js builds on top of the legacy
   quote page: route strip, relocated map card, two-column rail layout,
   unsaved-changes bar. Inert unless the preview script runs.
   ═══════════════════════════════════════════════════════════════════ */

body.pr-qv3 .pr-q3-route {
    max-width: 1140px;
    margin: -80px auto 10px;
    position: relative;
    z-index: 6;
    background: var(--pr-ink);
    color: #fff;
    padding: 20px 28px 14px;
    box-shadow: 0 26px 60px rgba(28, 34, 40, .3);
}

body.pr-qv3 .pr-q3-route-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #8FD0D3;
    margin-bottom: 12px;
}

body.pr-qv3 .pr-q3-route-line { display: flex; overflow-x: auto; padding-bottom: 6px; }

body.pr-qv3 .pr-q3-stop { flex: 1; min-width: 92px; text-align: center; position: relative; }

body.pr-qv3 .pr-q3-stop:before {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .25);
}

body.pr-qv3 .pr-q3-stop:last-child:before { display: none; }

body.pr-qv3 .pr-q3-stop i {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: var(--pr-orange);
    color: #fff;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 900;
}

body.pr-qv3 .pr-q3-fly i { background: #3A434C; font-size: 10px; }

body.pr-qv3 .pr-q3-stop b { display: block; font-size: 11px; font-weight: 900; letter-spacing: .03em; }

body.pr-qv3 .pr-q3-stop span { display: block; font-size: 9.5px; color: #B9C2CA; margin-top: 2px; }

/* relocated map */
body.pr-qv3 .pr-q3-mapcard {
    max-width: 1140px;
    margin: 0 auto 26px;
    background: #fff;
    border: 1px solid var(--pr-line);
    box-shadow: 0 18px 44px rgba(28, 34, 40, .1);
    position: relative;
    z-index: 5;
}

body.pr-qv3 .pr-q3-maphead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 24px;
    border-bottom: 1px solid var(--pr-line);
}

body.pr-qv3 .pr-q3-maphead span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-teal-deep, #3E9EA3);
}

body.pr-qv3 .pr-q3-maphead small { font-size: 11.5px; color: var(--pr-grey); }

body.pr-qv3 .pr-q3-mapcard .map-info { border-top: 0; }

body.pr-qv3 .pr-q3-mapcard #map_canvas { height: 380px !important; }

/* two-column: content + rail */
body.pr-qv3 .pr-q3-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 44px;
    align-items: start;
}

body.pr-qv3 .pr-q3-col { min-width: 0; }

/* legacy sections inside the column go full-width of the column */
body.pr-qv3 .pr-q3-col .container { max-width: 100% !important; padding: 0 !important; }

body.pr-qv3 .pr-q3-rail { /* scrolls with the page by design */ }

body.pr-qv3 .pr-q3-card {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    padding: 22px 24px 20px;
}

body.pr-qv3 .pr-q3-label {
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 5px;
}

body.pr-qv3 .pr-q3-price { font-family: var(--pr-serif); font-size: 28px; font-weight: 600; color: var(--pr-ink); }

body.pr-qv3 .pr-q3-price small { font-family: var(--pr-sans); font-size: 11px; color: var(--pr-grey); font-weight: 700; }

body.pr-qv3 .pr-q3-rows { margin: 12px 0 4px; border-top: 1px solid var(--pr-line); }

body.pr-qv3 .pr-q3-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pr-line);
    color: var(--pr-ink-soft);
}

body.pr-qv3 .pr-q3-rows b { color: var(--pr-ink); white-space: nowrap; }

body.pr-qv3 .pr-q3-pending {
    display: none;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pr-orange);
    text-align: center;
    margin: 10px 0 2px;
}

body.pr-qv3 .pr-q3-pending.show { display: block; }

body.pr-qv3 .pr-q3-update {
    display: none;
    width: 100%;
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--pr-ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 13px 20px;
    cursor: pointer;
}

body.pr-qv3 .pr-q3-update.show { display: block; }

body.pr-qv3 .pr-q3-inc {
    background: #fff;
    border: 1px solid var(--pr-line);
    border-top: 0;
    padding: 16px 22px 14px;
}

body.pr-qv3 .pr-q3-inc h5 {
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pr-grey);
    margin-bottom: 8px;
}

body.pr-qv3 .pr-q3-inc div {
    position: relative;
    padding: 7px 0 7px 20px;
    border-top: 1px solid var(--pr-line);
    font-size: 12.5px;
    color: var(--pr-ink-soft);
    line-height: 1.45;
}

body.pr-qv3 .pr-q3-inc div:before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--pr-teal-deep, #3E9EA3);
    font-size: 10.5px;
}

/* unsaved-changes bar (all widths — the rail scrolls away by design) */
body.pr-qv3 .pr-q3-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--pr-ink);
    color: #fff;
    padding: 12px 22px;
    box-shadow: 0 -10px 30px rgba(28, 34, 40, .25);
}

body.pr-qv3 .pr-q3-bar.show { display: flex; }

body.pr-qv3 .pr-q3-bar-k {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FD0D3;
}

body.pr-qv3 .pr-q3-bar b { font-family: var(--pr-serif); font-size: 19px; }

body.pr-qv3 .pr-q3-bar-btn {
    border: 0;
    border-radius: 999px;
    background: var(--pr-orange);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 26px;
    cursor: pointer;
}

/* keep the legacy save button but demote it */
body.pr-qv3 .pr-q3-legacy-save { opacity: .55; transform: scale(.92); }

/* the old map slot is gone — remove the gap it left */
body.pr-qv3 .consultant-comments { margin-top: 0; }

@media (max-width: 980px) {
    body.pr-qv3 .pr-q3-grid { grid-template-columns: 1fr; gap: 0; }
    body.pr-qv3 .pr-q3-rail { margin-top: 26px; }
    body.pr-qv3 .pr-q3-route { margin-top: -50px; }
}

/* ─── phase 9b: quote v3 body restyle (below the map) ─── */
body.pr-qv3 .pr-q3-hide { display: none !important; }

body.pr-qv3 .pr-q3-saverow { display: none !important; }

/* v3 section headings injected by the script */
body.pr-qv3 .pr-q3-sec { margin: 44px 0 18px; }

body.pr-qv3 .pr-q3-kicker {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pr-orange);
}

body.pr-qv3 .pr-q3-sec h2 {
    font-family: var(--pr-serif) !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    color: var(--pr-ink) !important;
    margin-top: 6px;
}

body.pr-qv3 .pr-q3-sec h2 em { font-style: italic; color: var(--pr-orange); }

/* consultant block becomes the "note from your consultant" */
body.pr-qv3 .mypacked_block {
    box-shadow: none !important;
    border: 1px solid var(--pr-line) !important;
}

body.pr-qv3 .packed_info { padding: 22px 26px !important; border-bottom: 0 !important; }

body.pr-qv3 .packed_info .pro_pics {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid var(--pr-sand);
}

body.pr-qv3 .ticket_name { padding: 6px 26px 20px !important; }

body.pr-qv3 .ticket_name h4 { font-size: 24px !important; }

/* flights + hotels: tighten for the column */
body.pr-qv3 .flightInfo_sec .container,
body.pr-qv3 .hotelInfo_sec .container { padding: 0 !important; }

body.pr-qv3 .fInfo_inside { padding: 0 !important; }

body.pr-qv3 .fInfo_inside .mdTitle { display: none; } /* v3 heading replaces it */

body.pr-qv3 .hotelInfo_inside { padding-top: 0 !important; border-top: 0 !important; margin-top: 0 !important; }

body.pr-qv3 .hotelInfoCard { margin: 0 0 18px !important; padding: 20px 22px !important; }

/* sport-centre bands: contained cards instead of full-bleed sections */
body.pr-qv3 .pointDesny_sec.__inside {
    background: var(--pr-sand) !important;
    border: 1px solid var(--pr-line) !important;
    border-radius: 0;
    padding: 22px 24px !important;
    margin: 0 0 6px !important;
}

body.pr-qv3 .pointDesny_sec.__inside .container { padding: 0 !important; max-width: 100% !important; }

body.pr-qv3 .pointDesny_sec.__inside .mdTitle { font-size: 19px !important; }

body.pr-qv3 .addServices_sec { margin-bottom: 22px; }

body.pr-qv3 .addServices_sec .container { padding: 0 !important; max-width: 100% !important; }

/* pre-booking note card */
body.pr-qv3 .titleStyle.pointDesny_inside > div {
    background: var(--pr-sand);
    border: 1px solid var(--pr-line);
    padding: 18px 22px !important;
}

body.pr-qv3 .pointDesny_sec { margin-bottom: 20px !important; }

body.pr-qv3 .pointDesny_sec .container { padding: 0 !important; max-width: 100% !important; }

/* post-grid bands stay full width and calm */
body.pr-qv3 .consultant-comments { margin-top: 46px; }