/* =========================================================================
   Yabeela header bar (QG2 header redesign)
   Loaded last from HeaderScript.blade.php so these rules win over the
   legacy `ul.headerMenu` styling in new_home.css / inner_style.css /
   responsive.css without needing !important everywhere.
   Scope: the `.ybh-` classes added in Common/Header.blade.php.
   ========================================================================= */

:root {
    --ybh-navy: #102a4c;
    --ybh-navy-deep: #153e90;
    --ybh-navy-deep-hover: #102f6e;
    --ybh-accent: #c34676;
    --ybh-accent-soft: #fdf2f7;
    --ybh-border: #e3e8ef;
    --ybh-muted: #78859a;
    --ybh-wa: #25d366;
    --ybh-wa-hover: #1eb558;
}

/* ---------------------------------------------------------- the bar ---- */
.header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.ybh-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}

/* resets for the legacy `ul.headerMenu li` rules */
.ybh-menu > li.ybh-item {
    padding: 18px 0;
    margin: 0;
    position: relative;
    background: none;
    font-family: 'PoppinsRegular', 'DroidKufiRegular' !important;
}

.ybh-menu > li.ybh-item:after,
.ybh-menu > li.ybh-item:hover:after,
.ybh-menu > li.ybh-item.show:after {
    display: none;
    content: none;
}

.ybh-menu > li.ybh-item:hover {
    background: none;
}

/* --------------------------------------------------------- the pills --- */
.ybh-menu .ybh-pill,
.ybh-menu .ybh-plain,
.ybh-menu .ybh-authBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ybh-menu .ybh-pill {
    border: 1px solid var(--ybh-border);
    border-radius: 999px;
    padding: 9px 15px;
    background: #fff;
    color: var(--ybh-navy) !important;
}

.ybh-menu .ybh-pill:hover,
.ybh-menu > li.ybh-item.show > .ybh-pill,
.ybh-menu .ybh-pill[aria-expanded="true"] {
    border-color: var(--ybh-accent);
    background: var(--ybh-accent-soft);
    color: var(--ybh-accent) !important;
}

.ybh-menu .ybh-plain {
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ybh-navy) !important;
}

.ybh-menu .ybh-plain:hover {
    color: var(--ybh-accent) !important;
    background: var(--ybh-accent-soft);
}

/* icon slot: inherits the pill colour so hover states come for free */
.ybh-menu .ybh-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ybh-menu .ybh-ico svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* the 24/7 phone glyph: same grey as the support label beside it */
.ybh-menu .ybh-ico--accent {
    color: var(--ybh-muted);
}

.ybh-menu .ybh-pill:hover .ybh-ico--accent {
    color: inherit;
}

/* 24/7 support pill: grey label, accent number */
.ybh-menu .ybh-support .ybh-supportLbl {
    color: var(--ybh-muted);
}

.ybh-menu .ybh-support .ybh-supportNum {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    color: var(--ybh-accent);
    direction: ltr;
    unicode-bidi: embed;
}

.ybh-menu .ybh-support:hover .ybh-supportLbl,
.ybh-menu .ybh-support:hover .ybh-supportNum {
    color: var(--ybh-accent);
}

/* currency flag + code */
.ybh-menu .ybh-flag img {
    width: 22px;
    height: 16px;
    margin: 0;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

.ybh-menu .dropC,
.ybh-menu .ybh-langCode {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    letter-spacing: .2px;
}

/* B2B wallet keeps its existing behaviour, just wearing the pill */
.ybh-menu .ybh-walletPill img {
    width: 18px;
    height: 18px;
}

/* login / signed-in button */
.ybh-menu .ybh-authBtn {
    background: var(--ybh-navy-deep);
    border-radius: 999px;
    padding: 10px 18px;
    color: #fff !important;
    gap: 7px;
}

.ybh-menu .ybh-authBtn:hover,
.ybh-menu > li.ybh-item.show > .ybh-authBtn {
    background: var(--ybh-navy-deep-hover);
    color: #fff !important;
}

.ybh-menu .ybh-authBtn a,
.ybh-menu .ybh-authBtn a:hover,
.ybh-menu .ybh-authBtn a:focus,
.ybh-menu .ybh-authBtn .log_icon {
    color: #fff !important;
    padding: 0;
    text-decoration: none !important;
}

.ybh-menu .ybh-authBtn .slashSpace {
    opacity: .6;
    padding: 0 1px;
}

/* ------------------------------------------------------------ caret ---- */
.ybh-menu .ybh-pill.dropdown-toggle::after,
.ybh-menu .ybh-authBtn.dropdown-toggle::after,
header.inner_header .ybh-menu .dropdown-toggle::after,
header.inner_header .top_nav_section .ybh-menu .dropdown-toggle::after {
    content: '';
    display: inline-block;
    position: static;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 2px;
    background: none;
    border: 0 !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
    border-radius: 1px;
    transform: rotate(45deg);
    opacity: .65;
    transition: transform .2s ease;
    vertical-align: middle;
    flex: 0 0 auto;
}

.ybh-menu .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 2px;
}

/* -------------------------------------------------------- dropdowns ---- */
.ybh-menu .ybh-drop {
    border: 1px solid var(--ybh-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 42, 76, .14);
    padding: 12px;
    margin-top: 10px;
    min-width: 268px;
    font-size: 14px;
    color: var(--ybh-navy);
}

.ybh-menu .ybh-dropTitle {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    font-size: 15px;
    color: var(--ybh-navy);
    margin: 2px 2px 10px;
    padding: 0;
    border: 0;
}

.ybh-menu .ybh-dropLbl {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ybh-muted);
    margin: 2px 2px 8px;
    padding: 0;
    border: 0;
}

/* --- Need Help ---------------------------------------------------------- */
.ybh-menu .ybh-waBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ybh-wa);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    text-decoration: none !important;
}

.ybh-menu .ybh-waBtn,
.ybh-menu .ybh-waBtn:hover,
.ybh-menu .ybh-waBtn:focus,
.ybh-menu .ybh-waBtn span {
    color: #fff !important;
}

.ybh-menu .ybh-waBtn:hover {
    background: var(--ybh-wa-hover);
}

.ybh-menu .ybh-waBtn svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: #fff;
}

.ybh-menu .ybh-helpRow {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--ybh-border);
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    margin-top: 8px;
    text-decoration: none !important;
    transition: border-color .2s ease, background-color .2s ease;
}

.ybh-menu .ybh-helpRow:hover {
    border-color: var(--ybh-accent);
    background: var(--ybh-accent-soft);
}

.ybh-menu .ybh-helpIco {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ybh-accent-soft);
    color: var(--ybh-accent);
}

.ybh-menu .ybh-helpRow:hover .ybh-helpIco {
    background: #fff;
}

.ybh-menu .ybh-helpIco svg {
    width: 15px;
    height: 15px;
}

.ybh-menu .ybh-helpTxt {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    min-width: 0;
}

.ybh-menu .ybh-helpLbl {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    font-size: 14px;
    color: var(--ybh-navy) !important;
}

.ybh-menu .ybh-helpVal {
    font-size: 12.5px;
    color: var(--ybh-muted) !important;
    word-break: break-word;
}

/* --- Currency ----------------------------------------------------------- */
.ybh-menu .ybh-dropCur {
    min-width: 290px;
}

.ybh-menu a.ybh-curRow {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    text-decoration: none !important;
    color: var(--ybh-navy) !important;
    transition: background-color .2s ease;
}

/* beats `.dropdown-item:hover { background-color: #c34676 !important }` (home.css) */
.ybh-menu a.ybh-curRow:hover,
.ybh-menu a.ybh-curRow:focus {
    background: var(--ybh-accent-soft) !important;
    color: var(--ybh-navy) !important;
}

.ybh-menu a.ybh-curRow.active,
.ybh-menu a.ybh-curRow.active:hover,
.ybh-menu a.ybh-curRow.active:focus {
    background: var(--ybh-accent-soft) !important;
}

.ybh-menu a.ybh-curRow .ybh-curBadge {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef1f6;
    color: var(--ybh-muted) !important;
    font-size: 11px;
    letter-spacing: .3px;
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
}

.ybh-menu a.ybh-curRow.active .ybh-curBadge {
    background: var(--ybh-accent);
    color: #fff !important;
}

.ybh-menu a.ybh-curRow .ybh-curTxt {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 auto;
}

.ybh-menu a.ybh-curRow .ybh-curCode {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    font-size: 14px;
    color: var(--ybh-navy) !important;
}

/* active row reads like the active language row: pink label */
.ybh-menu a.ybh-curRow.active .ybh-curCode {
    color: var(--ybh-accent) !important;
}

.ybh-menu a.ybh-curRow .ybh-curName {
    font-size: 12.5px;
    color: var(--ybh-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ybh-menu a.ybh-curRow .ybh-curCheck {
    flex: 0 0 auto;
    display: flex;
    color: var(--ybh-accent) !important;
}

.ybh-menu a.ybh-curRow .ybh-curCheck svg {
    width: 16px;
    height: 16px;
}

/* --- Language ----------------------------------------------------------- */
.ybh-menu .ybh-dropLang {
    min-width: 212px;
}

.ybh-menu a.ybh-langRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--ybh-navy) !important;
    transition: background-color .2s ease;
}

.ybh-menu a.ybh-langRow:hover {
    background: #f4f6fa;
}

.ybh-menu a.ybh-langRow.active {
    background: var(--ybh-accent-soft);
    color: var(--ybh-accent) !important;
}

.ybh-menu .ybh-langName {
    font-family: 'PoppinsSemiBold', 'DroidKufiBold' !important;
    font-size: 14px;
}

.ybh-menu .ybh-langSub {
    font-size: 12.5px;
    color: var(--ybh-muted);
}

.ybh-menu .ybh-langCheck {
    display: flex;
    color: var(--ybh-accent);
}

.ybh-menu .ybh-langCheck svg {
    width: 16px;
    height: 16px;
}

/* --- B2B wallet dropdown keeps the legacy row look, new card ------------ */
.ybh-menu .ybh-drop > a.dropdown-item {
    border-bottom: 1px solid var(--ybh-border);
    border-radius: 8px;
    padding: 8px 10px;
}

.ybh-menu .ybh-drop > a.dropdown-item:last-child {
    border-bottom: 0;
}

.ybh-menu .ybh-drop > a.ybh-curRow,
.ybh-menu .ybh-drop > a.ybh-langRow {
    border-bottom: 0;
}

/* ================================ inner pages ============================
   inner_style.css squeezes the header links on result/detail pages; keep the
   redesigned bar identical there. */
header.inner_header .ybh-menu .ybh-pill,
header.inner_header .ybh-menu .ybh-plain,
header.inner_header .ybh-menu .ybh-authBtn,
header.inner_header .top_search_menu ul.ybh-menu li a.ybh-pill,
header.inner_header .top_search_menu ul.ybh-menu li a.ybh-plain {
    padding: 9px 15px;
    font-size: 14px;
}

header.inner_header .ybh-menu .ybh-authBtn {
    padding: 10px 18px;
}

header.inner_header .ybh-menu .ybh-plain {
    padding: 9px 10px;
}

header.inner_header .top_search_menu ul.ybh-menu li a.ybh-waBtn {
    padding: 11px 14px;
}

header.inner_header .top_search_menu ul.ybh-menu li a.ybh-helpRow,
header.inner_header .top_search_menu ul.ybh-menu li a.ybh-curRow {
    padding: 10px 12px;
}

header.inner_header .top_search_menu ul.ybh-menu li a.ybh-langRow {
    padding: 10px 12px;
}

header.inner_header .ybh-menu .ybh-authBtn a {
    padding: 0;
}

/* ===================== inner header: the modify box ======================
   A long route must never push the menu off-screen or clip the search
   button; the text truncates with an ellipsis instead. The truncation
   applies at every width (mobile gives the box its own full-width row);
   the flex sizing only matters on the 768px-and-up bar. */
.header .flmodifyDtls {
    min-width: 0;
    flex-wrap: nowrap;
}

/* the two text blocks shrink and clip; separator and button never do */
.header .flmodifyDtls > .modifyHead,
.header .flmodifyDtls > .modifyfldtls {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header .flmodifyDtls > .modifyHead h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header .flmodifyDtls > span,
.header .flmodifyDtls > button.modifyButton {
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) {
    .header .navbar > .container {
        gap: 12px;
    }

    /* logo and menu hold their size, so the box is the only thing that gives */
    .header .navbar-brand,
    .header .top_search_menu {
        flex: 0 0 auto;
    }

    .header .flModifyBox {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
}

/* ================================ responsive =============================
   The bar carries six items; shed the widest ones before anything wraps. */
@media only screen and (max-width: 1399px) {
    .ybh-menu {
        gap: 5px;
    }

    .ybh-menu .ybh-pill {
        padding: 9px 12px;
    }

    .nav_mobHide .ybh-menu .ybh-support .ybh-supportLbl {
        display: none;
    }
}

@media only screen and (max-width: 1199px) {
    /* the number stays reachable through the Need Help dropdown */
    .nav_mobHide .ybh-menu > li.ybh-supportItem {
        display: none;
    }

    .ybh-menu .ybh-pill,
    .ybh-menu .ybh-plain {
        font-size: 13px;
        padding: 8px 11px;
    }

    .ybh-menu .ybh-authBtn {
        font-size: 13px;
        padding: 9px 14px;
    }
}

/* backdrop behind the open mobile drawer; allScript.js flips it to
   display:block, so it stays out of the way until the drawer opens.
   999998 sits just under #sidebar (999999) and over the page. */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .55);
    z-index: 999998;
}

body.overflowhidden {
    overflow: hidden !important;
}

/* ---- mobile side menu (270px drawer) ----------------------------------
   `#sidebar ul li a` in responsive.css is an ID selector, so every rule for
   the drawer is prefixed with #sidebar to outrank it. */
@media only screen and (max-width: 767px) {
    /* scroll the panel, not #sidebar itself: #sidebar-btn is positioned
       outside the 270px box (right:-45px) and an overflow on #sidebar
       would clip the hamburger away. */
    #sidebar .top_nav_section {
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #sidebar .top_search_menu.nav_mobShow ul.ybh-menu {
        display: block;
        background: #fff;
        border-radius: 0;
        margin: 0;
        padding: 16px 14px 28px;
    }

    #sidebar ul.ybh-menu > li.ybh-item {
        width: 100%;
        position: static;
        margin: 0 0 8px;
        padding: 0;
        list-style: none;
    }

    #sidebar ul.ybh-menu > li.ybh-item:last-child {
        margin-bottom: 0;
    }

    /* every top-level row: full-width card, icon then label */
    #sidebar ul.ybh-menu .ybh-pill,
    #sidebar ul.ybh-menu .ybh-plain,
    #sidebar ul.ybh-menu .ybh-authBtn {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin: 0;
        padding: 12px 14px;
        border: 1px solid var(--ybh-border);
        border-radius: 10px;
        background: #fff;
        font-size: 14px;
        color: var(--ybh-navy) !important;
        text-decoration: none !important;
    }

    /* login / signed-in: the one filled action, pinned to the top */
    #sidebar ul.ybh-menu .ybh-authBtn {
        justify-content: center;
        gap: 7px;
        border-color: var(--ybh-navy-deep);
        background: var(--ybh-navy-deep);
        color: #fff !important;
    }

    #sidebar ul.ybh-menu .ybh-authBtn a,
    #sidebar ul.ybh-menu .ybh-authBtn .slashSpace,
    #sidebar ul.ybh-menu .ybh-authBtn .log_icon {
        display: inline !important;
        width: auto !important;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        font-size: 14px;
        color: #fff !important;
    }

    /* 24/7 row stacks the label over the number */
    #sidebar ul.ybh-menu .ybh-support .ybh-supportTxt {
        display: flex;
        flex-direction: column;
        line-height: 1.35;
        min-width: 0;
    }

    #sidebar ul.ybh-menu .ybh-support .ybh-supportLbl {
        font-size: 12px;
    }

    #sidebar ul.ybh-menu .ybh-support .ybh-supportNum {
        font-size: 14px;
    }

    #sidebar ul.ybh-menu .dropdown-toggle::after {
        margin-left: auto;
    }

    /* dropdowns open inline inside the drawer */
    #sidebar ul.ybh-menu .ybh-drop {
        position: static !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 6px 0 0;
        padding: 10px;
        border-radius: 10px;
        box-shadow: none;
        transform: none !important;
    }

    #sidebar ul.ybh-menu .ybh-drop a {
        width: auto !important;
        border-bottom: 0 !important;
        background-image: none;
    }

    /* `#sidebar ul li a { background:#fff }` is an ID selector, so the
       WhatsApp button has to restate its green or it goes white-on-white */
    #sidebar ul.ybh-menu a.ybh-waBtn {
        display: flex;
        justify-content: center;
        background: var(--ybh-wa) !important;
        border: 0;
    }

    #sidebar ul.ybh-menu a.ybh-waBtn:hover {
        background: var(--ybh-wa-hover) !important;
    }

    #sidebar ul.ybh-menu a.ybh-helpRow,
    #sidebar ul.ybh-menu a.ybh-curRow {
        display: flex;
        align-items: center;
    }

    #sidebar ul.ybh-menu a.ybh-helpRow {
        border: 1px solid var(--ybh-border);
    }

    #sidebar ul.ybh-menu a.ybh-langRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #sidebar ul.ybh-menu a.ybh-waBtn {
        padding: 11px 12px !important;
    }

    #sidebar ul.ybh-menu a.ybh-helpRow,
    #sidebar ul.ybh-menu a.ybh-curRow,
    #sidebar ul.ybh-menu a.ybh-langRow {
        padding: 9px 10px !important;
    }

    #sidebar ul.ybh-menu .ybh-helpVal,
    #sidebar ul.ybh-menu .ybh-curName {
        font-size: 12px;
    }
}

/* ============================ RTL (Arabic) ============================== */
.ybh-menu .ybh-pill.dropdown-toggle::after,
.ybh-menu .ybh-authBtn.dropdown-toggle::after,
header.inner_header .ybh-menu .dropdown-toggle::after,
header.inner_header .top_nav_section .ybh-menu .dropdown-toggle::after {
    margin: -3px 2px 0 0;
}

.ybh-menu .ybh-support .ybh-supportNum,
.ybh-menu .ybh-helpVal[dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* keep a Latin label (e.g. the untranslated "24/7 Support:") as one run so
   its colon does not drift to the far side of the RTL line */
.ybh-menu .ybh-support .ybh-supportLbl {
    unicode-bidi: isolate;
}

.ybh-menu .ybh-dropTitle,
.ybh-menu .ybh-dropLbl,
.ybh-menu .ybh-helpTxt,
.ybh-menu a.ybh-curRow .ybh-curTxt {
    text-align: right;
}

.ybh-menu .ybh-langSub {
    direction: ltr;
    unicode-bidi: embed;
}

@media only screen and (max-width: 767px) {
    /* the drawer slides in from the right in RTL */
    #sidebar ul.ybh-menu .ybh-pill,
    #sidebar ul.ybh-menu .ybh-plain {
        justify-content: flex-start;
    }

    #sidebar ul.ybh-menu .dropdown-toggle::after {
        margin-left: 0;
        margin-right: auto;
    }

    #sidebar ul.ybh-menu .ybh-support .ybh-supportTxt {
        text-align: right;
    }
}