/* HERO WRAPPER */
.flight-deals-hero {
    position: relative;
    width: 100%;
}

/* BANNER FULL WIDTH */
.flight-deals-banner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 320px; /* adjust if the module uses a different height */
    overflow: hidden;
    background: #f9f9f9; /* fill when the image uses 'contain' (mobile) */
}

/* In RTL, a block element wider than its parent overflows to the LEFT
   (the right edge sticks to the parent's right edge). The LTR trick of
   pulling the element with `margin-left` then leaves a gap on the right
   in Arabic. We neutralize that and pull from the right side instead so
   the banner spans the full viewport width in both directions. */
html[dir="rtl"] .flight-deals-banner {
    margin-left: 0;
    margin-right: calc(-50vw + 50%);
}

.flight-deals-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* SEARCH OVERLAY (on top of the banner)
   We place the overlay in the normal flow and pull it up with a negative
   margin-top so its top edge overlaps the bottom of the banner (like the
   home). Because it's in the flow, the breadcrumb and the grid below can
   use simple margin-top values and the spacing stays predictable
   regardless of the overlay's height. Tweak margin-top to control how
   much the search overlaps the banner. */
.flight-deals-search-overlay {
    position: relative;
    margin: -60px auto 0 auto;
    width: 100%;
    max-width: 1200px;
    z-index: 10;
}

/* Desktop/tablet: keep the module centered as on the home page */
#compact-search-container .container.search {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure Compact Search icons use the sprite (avoids overrides from other CSS libs) */
#compact-search-container .icon {
    background-image: url("/templates/salamair/assets/img/sprite-sheet.png") !important;
    background-repeat: no-repeat;
}

/* leave space below the hero so the grid does not overlap */
.flight-deals-grid {
    margin-top: 80px;
}

/* On the deals page (desktop) the compact search ALREADY lives inside the hero
   (.flight-deals-search-overlay). If flight_deals.js adds .show-container by
   mistake or for compatibility, we neutralize the centered modal applied by
   custom.css so the search keeps sitting inside the hero like on the home. */
@media (min-width: 768px) {
    /* When .show-container is added by flight_deals.js on the deals page,
       keep the overlay in its natural (relative) position instead of
       switching to the centered modal that custom.css applies elsewhere. */
    #compact-search-container.flight-deals-search-overlay.show-container {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        transform: none;
        margin: -60px auto 0 auto;
        width: 100%;
        max-width: 1200px;
    }

    /* Tight, symmetric spacing around the breadcrumb on desktop. Because
       the overlay is now in the normal flow, the breadcrumb sits right
       after the hero and we only need a small margin for the visible gap.
       Same margin above the grid keeps the spacing symmetric. */
    .flight-deals-hero + .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .flight-deals-hero + .row .breadcrumb {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .flight-deals-grid {
        margin-top: 20px !important;
    }
}

/* Footer */
.flight-deals-footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

.flight-deals-terms-link,
.flight-deals-terms-text {
    color: #105c73;
    text-decoration: none;
}

.flight-deals-terms-link:hover {
    text-decoration: underline;
}

/* Terms (native accordion using <details>) */
.flight-deals-terms {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

html[dir="rtl"] .flight-deals-terms {
    text-align: right;
}

.flight-deals-terms-summary {
    cursor: pointer;
    list-style: none;
    display: block;
    width: 100%;

    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e2da;
    border-radius: 6px;

    color: #707271;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    position: relative;
}

html[dir="rtl"] .flight-deals-terms-summary {
    text-align: right;
}

/* Hide the default marker (Chrome/Safari) */
.flight-deals-terms-summary::-webkit-details-marker {
    display: none;
}

/* Chevron arrow on the right */
.flight-deals-terms-summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6a8b2a;
    border-bottom: 2px solid #6a8b2a;
    transform: translateY(-60%) rotate(45deg);
    transition: transform .15s ease;
}

html[dir="rtl"] .flight-deals-terms-summary::after {
    left: 16px;
    right: auto;
}

/* When open, rotate the arrow upwards */
.flight-deals-terms[open] .flight-deals-terms-summary::after {
    transform: translateY(-40%) rotate(-135deg);
}

.flight-deals-terms-content {
    margin-top: 0;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e2da;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    text-align: left;
}

html[dir="rtl"] .flight-deals-terms-content {
    text-align: right;
}

/* Responsive: on mobile the compact search must NOT be absolute (avoids cropping and horizontal scroll) */
@media (max-width: 767.98px) {
    /* Banner full width on mobile too */
    .flight-deals-banner {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        height: auto;            /* don't force cropping */
        overflow: hidden;
    }

    /* RTL fix on mobile: pull from the right edge instead of the left so
       the banner reaches the right side of the viewport in Arabic. */
    html[dir="rtl"] .flight-deals-banner {
        margin-left: 0;
        margin-right: calc(-50vw + 50%);
    }

    /* Show the full banner + full width (no cropping or side gaps) */
    .flight-deals-banner-img {
        width: 100%;
        height: auto;
        object-fit: initial;     /* avoid 'contain' (which could leave side bars) */
        background: transparent;
    }

    .flight-deals-search-overlay {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        max-width: none;
        /* Full-bleed: removes side gaps from the layout */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding: 0; /* the module already includes .container; avoid double padding */
        margin-top: 15px;
    }

/* RTL fix on mobile: same issue as the banner. In Arabic the
 *        full-bleed trick must pull from the right edge to cover the full
 *               viewport, otherwise a blank gap appears on the right side. */
    html[dir="rtl"] .flight-deals-search-overlay {
	            margin-left: 0;
		            margin-right: calc(-50vw + 50%);
			        }

    /* Make the Compact Search full width (the module brings its own .container) */
    #compact-search-container .container.search {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Avoid extra side margin from bootstrap grid inside the module */
    #compact-search-container .container.search > .tabs,
    #compact-search-container .container.search > .cstab1click {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flight-deals-grid {
        margin-top: 20px;
    }

    /* On mobile the gap between the compact search and the breadcrumb came
       from two places: the inline margin-top: 70px on the breadcrumb <ul>,
       and the 4em margin-bottom that custom.css applies to
       #compact-search-container. We neutralize both so the breadcrumb has
       the same small gap above and below. */
    #compact-search-container {
        margin-bottom: 8px !important;
    }
    .flight-deals-hero + .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .flight-deals-hero + .row .breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .flight-deals-grid {
        margin-top: 8px !important;
    }

    /* When Book now is clicked, flight_deals.js adds .show-container.
       On mobile we do NOT want the 50% centered modal (custom.css), but full-screen */
    #compact-search-container.show-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 100000 !important;
        margin: 0 !important;
    }

    /* Force the module's close button to be visible when in overlay mode */
    #compact-search-container.show-container #close-search-btn {
        display: block !important;
    }

    /* In the template the close uses negative offsets; on mobile overlay we relocate it inside the viewport */
    #compact-search-container.show-container .search .search-form #close-search-btn {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 100001 !important;
    }

    html[dir="rtl"] #compact-search-container.show-container .search .search-form #close-search-btn {
        left: 12px !important;
        right: auto !important;
    }

    #compact-search-container.show-container .search .search-form #close-search-btn a {
        display: inline-block;
        background: rgba(0, 0, 0, 0.35);
        padding: 10px 12px;
        border-radius: 10px;
    }
}

.flight-deal-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    margin-bottom: 28px;
}

.flight-deal-image {
    width: 100%;
    height: 165px;
    overflow: hidden;
    background: #e9eef2;
}

.flight-deal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flight-deal-image--placeholder {
    width: 100%;
    height: 165px;
    background: linear-gradient(135deg, #e9eef2, #f7f9fb);
}

.flight-deal-body {
    padding: 14px 16px 16px 16px;
    text-align: left;
}

/* ROUTE */
.flight-deal-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 6px;
}

.flight-deal-city {
    font-weight: 700;
    font-size: 18px;
    color: #6a8b2a;
    white-space: nowrap;
}

.flight-deal-city.from {
    text-align: left;
}

.flight-deal-city.to {
    text-align: right;
}

/* RTL (Arabic): the grid columns flow right-to-left automatically, so the
   origin (.from) lands in the right column and the destination (.to) in
   the left column. We flip the text-align so the origin sits flush with
   the right edge of the card and the destination flush with the left
   edge, mirroring the LTR layout. */
html[dir="rtl"] .flight-deal-city.from {
    text-align: right;
}

html[dir="rtl"] .flight-deal-city.to {
    text-align: left;
}

.flight-deal-plane {
    font-size: 22px;
    margin: 0 10px;
    color: #6a8b2a;
}

/* RTL (Arabic): the ✈ glyph always points right, so mirror it
   horizontally to point toward the destination (left side in RTL). */
html[dir="rtl"] .flight-deal-plane {
    display: inline-block;
    transform: scaleX(-1);
}

.flight-deal-above {
    font-size: 10px;
    color: #8a8a8a;
    margin-bottom: 0px;
}

/* RTL (Arabic): right-align the "Lite fares starting from" caption to
   match the natural reading direction. The body itself is text-align:
   left so descendants (like .flight-deal-above) inherit that; we flip
   only the caption. */
html[dir="rtl"] .flight-deal-above {
    text-align: right;
}

/* PRICE (as in image 1: 35 large + 99 on top + ♦ OMR below in blue) */
.flight-deal-price {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    line-height: 1;
    margin: 4px 0 12px 0;
}

.flight-deal-price .price-int {
    font-size: 44px;
    font-weight: 800;
    color: #1da7c8;
    display: inline-block;
}

/* Right column: 99 on top / ♦ OMR below */
.flight-deal-price .price-tail {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 6px; /* fine-tune if you want 1px up/down */
}

/* decimals on top */
.flight-deal-price .price-dec {
    font-size: 18px;
    font-weight: 800;
    color: #1da7c8;
    transform: translateY(-6px);
}

/* bottom row: diamond + currency */
.flight-deal-price .price-cur-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* diamond (♦) */
.flight-deal-price .price-sep {
    width: 7px;
    height: 7px;
    background: #1da7c8;
    transform: rotate(45deg);
    display: inline-block;
}

/* currency below, same blue as the price */
.flight-deal-price .price-cur {
    font-size: 11px;
    font-weight: 700;
    color: #1da7c8;
}

/* CTA */
.flight-deal-card .flight-deal-cta,
.flight-deal-card .flight-deal-cta.deals-booknow {
    display: block !important;          /* KEY for centering */
    width: 65% !important;
    margin: 14px auto 0 auto !important;

    background: #6a8b2a !important;
    color: #fff !important;
    text-decoration: none !important;

    padding: 10px 0 !important;
    line-height: 1 !important;
    text-align: center !important;

    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;

    border: 0 !important;
    box-shadow: none !important;
}

.flight-deal-card .flight-deal-cta:hover,
.flight-deal-card .flight-deal-cta.deals-booknow:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    transition: all .15s ease;
}