/* =========================================================
   AL BADI V8 — PREMIUM TOUR / SAFARI DETAIL
   ========================================================= */

.albadi-tour-detail-v8{
    background:#f7f7f4;
    color:#121a23;
}

.albadi-tour-detail-v8 main{
    overflow:clip;
}

.v8-detail-breadcrumb{
    width:min(1380px,calc(100% - 48px));
    margin:22px auto 14px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:13px;
    color:#69737d;
}

.v8-detail-breadcrumb a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}

.v8-detail-breadcrumb a:hover{
    color:#0b4d69;
}

.v8-detail-breadcrumb strong{
    color:#18232d;
    font-weight:650;
}

.albadi-tour-detail-v8 .tour-detail-hero--v7k1{
    width:min(1460px,calc(100% - 32px));
    margin:0 auto;
    border-radius:28px;
    overflow:hidden;
    box-shadow:
        0 30px 80px rgba(17,28,38,.12);
}

.albadi-tour-detail-v8 .tour-slider-stage{
    min-height:clamp(540px,72vh,820px);
}

.albadi-tour-detail-v8 .tour-slider-slide img{
    transform:scale(1.015);
    transition:
        transform 7s cubic-bezier(.2,.7,.2,1),
        opacity .45s ease;
}

.albadi-tour-detail-v8
.tour-slider-slide.is-active img{
    transform:scale(1.07);
}

.albadi-tour-detail-v8
.tour-detail-image-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(7,18,27,.82) 0%,
            rgba(7,18,27,.52) 42%,
            rgba(7,18,27,.12) 75%,
            rgba(7,18,27,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,15,23,.48),
            transparent 55%
        );
}

.albadi-tour-detail-v8
.tour-detail-hero-copy{
    width:min(760px,78%);
    bottom:clamp(50px,8vw,105px);
}

.albadi-tour-detail-v8
.tour-detail-hero-copy h1{
    max-width:900px;
    font-size:clamp(44px,6vw,92px);
    line-height:.96;
    letter-spacing:-.055em;
    text-wrap:balance;
}

.albadi-tour-detail-v8
.tour-detail-hero-copy > p{
    max-width:680px;
    margin-top:22px;
    font-size:clamp(16px,1.35vw,20px);
    line-height:1.75;
    color:rgba(255,255,255,.88);
}

.v8-hero-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.v8-hero-facts span{
    min-width:130px;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(14px);
}

.v8-hero-facts small,
.v8-hero-facts strong{
    display:block;
}

.v8-hero-facts small{
    margin-bottom:3px;
    color:rgba(255,255,255,.65);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.v8-hero-facts strong{
    color:#fff;
    font-size:13px;
}

.albadi-tour-detail-v8
.tour-detail-layout{
    width:min(1320px,calc(100% - 48px));
    margin:72px auto 110px;
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(330px,410px);
    gap:70px;
    align-items:start;
}

.albadi-tour-detail-v8
.tour-detail-content{
    min-width:0;
}

.albadi-tour-detail-v8
.tour-v5-overview,
.albadi-tour-detail-v8
.tour-info-section,
.v8-safari-selected{
    padding:44px 0;
    border-bottom:1px solid #dfe3e4;
}

.albadi-tour-detail-v8
.tour-v5-overview{
    padding-top:0;
}

.albadi-tour-detail-v8
.tour-info-section h2,
.albadi-tour-detail-v8
.tour-v5-overview h2,
.v8-selected-head h2{
    font-size:clamp(32px,4vw,56px);
    line-height:1.04;
    letter-spacing:-.045em;
}

.albadi-tour-detail-v8
.tour-info-section h2 span,
.albadi-tour-detail-v8
.tour-v5-overview h2 span{
    color:#71808a;
}

.albadi-tour-detail-v8
.tour-v5-overview p,
.albadi-tour-detail-v8
.tour-info-section p,
.v8-selected-head p{
    font-size:16px;
    line-height:1.85;
    color:#586570;
}

.albadi-tour-detail-v8
.tour-facts{
    margin:10px 0 20px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #dde2e4;
    background:#fff;
}

.albadi-tour-detail-v8
.tour-facts > div{
    padding:22px;
}

.albadi-tour-detail-v8
.tour-highlight-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:28px;
}

.albadi-tour-detail-v8
.tour-highlight-item{
    min-height:88px;
    padding:20px;
    display:flex;
    align-items:flex-start;
    gap:13px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e0e4e5;
    box-shadow:
        0 10px 30px rgba(20,35,45,.04);
}

.albadi-tour-detail-v8
.tour-highlight-item > span{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e9f4f2;
    color:#0b655b;
}

.v8-itinerary-timeline{
    list-style:none;
    padding:0;
    margin:34px 0 0;
    counter-reset:v8day;
}

.v8-itinerary-timeline li{
    counter-increment:v8day;
    position:relative;
    padding:
        0
        0
        34px
        76px;
    min-height:70px;
    color:#44525d;
    line-height:1.75;
}

.v8-itinerary-timeline li::before{
    content:
        counter(v8day,decimal-leading-zero);
    position:absolute;
    left:0;
    top:-4px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0d2735;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.05em;
    z-index:2;
}

.v8-itinerary-timeline li:not(:last-child)::after{
    content:"";
    position:absolute;
    left:23px;
    top:48px;
    bottom:0;
    width:1px;
    background:#ccd4d8;
}

.albadi-tour-detail-v8
.tour-two-columns{
    gap:16px;
}

.albadi-tour-detail-v8
.tour-two-columns > div{
    padding:26px;
    border-radius:20px;
    background:#fff;
    border:1px solid #e0e4e5;
}

.v8-useful-card{
    margin-top:12px;
    padding:20px 22px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e0e4e5;
}

.v8-useful-card small{
    display:block;
    margin-bottom:7px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:10px;
    font-weight:800;
    color:#64727c;
}

.v8-useful-card p{
    margin:0;
}

.v8-safari-selected{
    display:block;
    margin-bottom:4px;
}

.v8-safari-selected[hidden]{
    display:none;
}

.v8-selected-itinerary{
    margin-top:28px;
}

.v8-selected-itinerary ol{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    counter-reset:variantday;
}

.v8-selected-itinerary li{
    counter-increment:variantday;
    position:relative;
    padding:17px 18px 17px 62px;
    margin-bottom:10px;
    border-radius:16px;
    background:#fff;
    border:1px solid #e0e4e5;
    line-height:1.65;
}

.v8-selected-itinerary li::before{
    content:"Day " counter(variantday);
    position:absolute;
    left:16px;
    top:19px;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    color:#0b655b;
}

.v8-selected-inclusions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:24px;
}

.v8-selected-inclusions > div{
    padding:22px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e0e4e5;
}

.v8-selected-inclusions ul{
    padding-left:18px;
    color:#53616c;
    line-height:1.7;
}

.v8-premium-booking-card{
    position:sticky !important;
    top:22px !important;
    border-radius:24px !important;
    border:1px solid rgba(25,42,52,.1) !important;
    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfbf8
        ) !important;
    box-shadow:
        0 26px 70px rgba(17,32,42,.12) !important;
}

.v8-premium-booking-card
.ab-booking-v8{
    border-radius:20px;
}

.v8-mobile-booking-bar{
    display:none;
}

@media (max-width:1050px){

    .albadi-tour-detail-v8
    .tour-detail-layout{
        grid-template-columns:1fr;
        gap:38px;
    }

    .v8-premium-booking-card{
        position:relative !important;
        top:auto !important;
    }
}

@media (max-width:720px){

    .v8-detail-breadcrumb{
        width:calc(100% - 28px);
        margin-top:14px;
        font-size:11px;
    }

    .albadi-tour-detail-v8
    .tour-detail-hero--v7k1{
        width:calc(100% - 20px);
        border-radius:22px;
    }

    .albadi-tour-detail-v8
    .tour-slider-stage{
        min-height:620px;
    }

    .albadi-tour-detail-v8
    .tour-detail-hero-copy{
        width:calc(100% - 38px);
        left:19px;
        right:19px;
        bottom:68px;
    }

    .albadi-tour-detail-v8
    .tour-detail-hero-copy h1{
        font-size:clamp(40px,13vw,62px);
    }

    .albadi-tour-detail-v8
    .tour-detail-hero-copy > p{
        font-size:14px;
        line-height:1.65;
        display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .v8-hero-facts{
        gap:7px;
    }

    .v8-hero-facts span{
        min-width:0;
        flex:1 1 30%;
        padding:10px;
    }

    .albadi-tour-detail-v8
    .tour-detail-layout{
        width:calc(100% - 28px);
        margin:42px auto 120px;
    }

    .albadi-tour-detail-v8
    .tour-highlight-grid,
    .v8-selected-inclusions{
        grid-template-columns:1fr;
    }

    .albadi-tour-detail-v8
    .tour-v5-overview,
    .albadi-tour-detail-v8
    .tour-info-section,
    .v8-safari-selected{
        padding:34px 0;
    }

    .albadi-tour-detail-v8
    .tour-info-section h2,
    .albadi-tour-detail-v8
    .tour-v5-overview h2,
    .v8-selected-head h2{
        font-size:36px;
    }

    .v8-mobile-booking-bar{
        position:fixed;
        left:10px;
        right:10px;
        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );
        z-index:900;
        min-height:68px;
        padding:10px 10px 10px 16px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        border-radius:20px;
        background:rgba(12,29,39,.96);
        color:#fff;
        box-shadow:
            0 18px 50px rgba(5,18,26,.3);
        backdrop-filter:blur(18px);
    }

    .v8-mobile-booking-bar small,
    .v8-mobile-booking-bar strong{
        display:block;
    }

    .v8-mobile-booking-bar small{
        color:rgba(255,255,255,.58);
        font-size:10px;
        text-transform:uppercase;
        letter-spacing:.08em;
    }

    .v8-mobile-booking-bar strong{
        margin-top:2px;
        font-size:16px;
    }

    .v8-mobile-booking-bar button{
        min-height:48px;
        padding:0 18px;
        border:0;
        border-radius:14px;
        background:#fff;
        color:#102631;
        font-weight:800;
        cursor:pointer;
    }
}

@media (prefers-reduced-motion:reduce){

    .albadi-tour-detail-v8 *,
    .albadi-tour-detail-v8 *::before,
    .albadi-tour-detail-v8 *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   AL BADI — TOUR DETAIL SCROLL STABILITY V1
   Desktop booking card follows document flow.
   ========================================================= */

@media (min-width: 901px) {

    .albadi-tour-detail-v8 .v8-premium-booking-card,
    .albadi-tour-detail-v8 .tour-booking-card,
    .albadi-tour-detail-v8 [data-v8-booking] {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
    }

}

/*
 * Prevent browser anchor/focus smooth movement from
 * interfering with normal manual scrolling on detail pages.
 */
.tour-detail-page {
    scroll-behavior: auto;
}

html:has(.tour-detail-page) {
    scroll-behavior: auto;
}

/* END TOUR DETAIL SCROLL STABILITY V1 */


/* ==========================================================
   AL BADI TOUR DETAIL — HARD STABILITY V2
   ========================================================== */


/*
 * Do not allow browser scroll anchoring to reposition
 * the viewport when booking totals/content/images update.
 */

html:has(body.albadi-tour-detail-v8),
body.albadi-tour-detail-v8,
body.albadi-tour-detail-v8 main,
body.albadi-tour-detail-v8 .tour-detail-layout,
body.albadi-tour-detail-v8 .tour-detail-content,
body.albadi-tour-detail-v8 .tour-booking-card {
    overflow-anchor: none !important;
}


/*
 * Desktop booking column must participate in NORMAL
 * document flow. No sticky positioning and no nested
 * vertical scrolling.
 */

@media (min-width: 901px) {

    body.albadi-tour-detail-v8 .tour-detail-layout {
        align-items: start !important;
    }

    body.albadi-tour-detail-v8 .tour-booking-card,
    body.albadi-tour-detail-v8 .v8-premium-booking-card,
    body.albadi-tour-detail-v8 aside.tour-booking-card,
    body.albadi-tour-detail-v8
    .tour-booking-card:has(.ab-booking-v8) {

        position: static !important;

        top: auto !important;
        bottom: auto !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;

        overscroll-behavior: auto !important;

        transform: none !important;

        contain: none !important;
    }

}


/*
 * Prevent smooth/anchor movement from fighting manual
 * scrolling on this page.
 */

body.albadi-tour-detail-v8,
body.albadi-tour-detail-v8 main {
    scroll-behavior: auto !important;
}


/* ==========================================================
   HERO — BRIGHT IMAGE + WHITE TYPOGRAPHY
   ========================================================== */

body.albadi-tour-detail-v8
.tour-detail-hero--v7k1
.tour-detail-image-overlay {

    background:
        linear-gradient(
            90deg,
            rgba(4,30,28,.46) 0%,
            rgba(4,30,28,.18) 48%,
            rgba(4,30,28,.04) 76%,
            rgba(4,30,28,.02) 100%
        ) !important;
}


body.albadi-tour-detail-v8
.tour-detail-hero-copy h1,

body.albadi-tour-detail-v8
.tour-detail-hero-copy h1 * {

    color: #ffffff !important;

    text-shadow:
        0 3px 24px rgba(0,0,0,.32) !important;
}


body.albadi-tour-detail-v8
.tour-detail-hero-copy > p {

    color:
        rgba(255,255,255,.94) !important;

    text-shadow:
        0 2px 14px rgba(0,0,0,.30) !important;
}


body.albadi-tour-detail-v8
.tour-detail-hero-copy
.v8-hero-kicker,

body.albadi-tour-detail-v8
.tour-detail-hero-copy
.eyebrow {

    color:
        #ffffff !important;
}


/*
 * Hero photo should remain vivid.
 */

body.albadi-tour-detail-v8
.tour-slider-slide img {

    filter:
        brightness(1.08)
        saturate(1.08) !important;
}


/* END AL BADI TOUR DETAIL HARD STABILITY V2 */


/* =========================================================
   AL BADI — TOUR DETAIL STABILITY V9
   2026-09
   ========================================================= */

/*
 * Keep normal document scrolling on tour/safari detail.
 */
html:has(body.albadi-tour-detail-v8){
    scroll-behavior:auto !important;
}

body.albadi-tour-detail-v8{
    scroll-behavior:auto !important;
}

/*
 * Hero text must remain readable over image overlay.
 */
.albadi-tour-detail-v8
.tour-detail-hero-copy h1{
    color:#fff !important;
    text-shadow:
        0 2px 18px rgba(0,0,0,.18),
        0 12px 42px rgba(0,0,0,.20);
}

.albadi-tour-detail-v8
.tour-detail-eyebrow{
    color:rgba(255,255,255,.88) !important;
}

/*
 * Booking panel participates in normal page flow.
 * Prevent sticky behaviour from making the page feel
 * mechanically attached to the booking column.
 */
@media (min-width: 901px){

    .albadi-tour-detail-v8
    .v8-premium-booking-card{
        position:relative !important;
        top:auto !important;
        align-self:start !important;
    }

}

/*
 * Mobile already uses its dedicated bottom booking bar.
 */
@media (max-width: 900px){

    .albadi-tour-detail-v8
    .v8-premium-booking-card{
        position:relative !important;
        top:auto !important;
    }

}

/* =========================================================
   AL BADI — TOUR DETAIL V11 CLEAN FINAL LAYER
   ========================================================= */

/*
 * Preserve the V8 visual language while restoring a spacious
 * desktop editorial layout.
 */

body.albadi-tour-detail-v8 main{
    overflow:visible !important;
}

body.albadi-tour-detail-v8 .tour-detail-layout{
    width:min(1460px,calc(100% - 64px)) !important;
    max-width:none !important;

    margin:
        clamp(58px,6vw,88px)
        auto
        clamp(90px,8vw,130px) !important;

    padding:0 !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(380px,440px) !important;

    gap:clamp(55px,6vw,95px) !important;

    align-items:start !important;

    overflow:visible !important;
    overflow-anchor:none !important;
}

body.albadi-tour-detail-v8 .tour-detail-content{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    overflow:visible !important;
    overflow-anchor:none !important;
}


/*
 * Booking column is ordinary document content.
 * No sticky container.
 * No nested vertical scrolling.
 * No transform that can affect viewport anchoring.
 */

body.albadi-tour-detail-v8
aside.tour-booking-card.v8-premium-booking-card{

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    align-self:start !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;

    overscroll-behavior:auto !important;
    overflow-anchor:none !important;

    transform:none !important;
    contain:none !important;
}


/*
 * Booking engine itself must not animate its geometry on load.
 * Functional slide animation inside the booking wizard remains.
 */

body.albadi-tour-detail-v8
.v8-premium-booking-card
.ab-booking-v8{

    opacity:1 !important;
    transform:none !important;
    animation:none !important;

    overflow:hidden;
    overflow-anchor:none !important;
}


/*
 * Prevent browser scroll anchoring from reacting to dynamic
 * booking totals / imagery.
 */

html:has(body.albadi-tour-detail-v8),
body.albadi-tour-detail-v8,
body.albadi-tour-detail-v8 main,
body.albadi-tour-detail-v8 .tour-detail-layout,
body.albadi-tour-detail-v8 .tour-detail-content,
body.albadi-tour-detail-v8 .tour-booking-card,
body.albadi-tour-detail-v8 .ab-booking-v8{

    scroll-behavior:auto !important;
    overflow-anchor:none !important;
}


/*
 * Tablet.
 * Keep two columns longer than previous V8 1050 breakpoint.
 */

@media (min-width:901px) and (max-width:1180px){

    body.albadi-tour-detail-v8 .tour-detail-layout{

        width:min(100% - 40px,1120px) !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(330px,380px) !important;

        gap:38px !important;
    }
}


/*
 * Mobile / narrow tablet.
 */

@media (max-width:900px){

    body.albadi-tour-detail-v8 .tour-detail-layout{

        width:calc(100% - 28px) !important;

        margin:
            42px
            auto
            120px !important;

        grid-template-columns:1fr !important;

        gap:42px !important;
    }

    body.albadi-tour-detail-v8
    aside.tour-booking-card.v8-premium-booking-card{

        position:relative !important;
        width:100% !important;
    }
}

/* END AL BADI TOUR DETAIL V11 CLEAN FINAL LAYER */


/* =========================================================
   AL BADI V15B — COMMERCIAL EDITORIAL ABOUT LAYOUT
   Title + description use one continuous reading column.
   ========================================================= */

body.albadi-tour-detail-v8 .tour-v5-overview{
    padding-top:0;
}

body.albadi-tour-detail-v8 .tour-v5-overview-grid{
    display:block !important;
    max-width:820px;
}

body.albadi-tour-detail-v8 .tour-v5-overview-grid > h2{
    max-width:760px;
    margin:
        14px
        0
        28px !important;
    font-size:
        clamp(42px,4.4vw,64px);
    line-height:.98;
    letter-spacing:-.05em;
}

body.albadi-tour-detail-v8 .tour-v5-overview-grid > div{
    width:100%;
    max-width:780px;
}

body.albadi-tour-detail-v8 .tour-v5-overview-grid > div > p:first-child{
    margin-top:0;
    margin-bottom:26px;
    max-width:760px;
    font-size:17px;
    line-height:1.85;
    color:#52616b;
}

body.albadi-tour-detail-v8 .tour-v5-support-copy{
    max-width:720px;
    margin-top:26px !important;
    padding-top:24px;
    border-top:1px solid #e1e5e5;
    font-size:15px !important;
    line-height:1.75 !important;
    color:#71808a !important;
}

@media (max-width:720px){

    body.albadi-tour-detail-v8
    .tour-v5-overview-grid > h2{
        max-width:none;
        margin:
            10px
            0
            20px !important;
        font-size:
            clamp(34px,10vw,44px);
        line-height:1.02;
    }

    body.albadi-tour-detail-v8
    .tour-v5-overview-grid > div > p:first-child{
        font-size:16px;
        line-height:1.78;
    }

}

/* END AL BADI V15B */