.card-height {
    height: 95% !important;
}

.parcelSearch
{
    width: 40%!important;
    margin-left: 25%!important;

}

.parcelsearchFlex{
    align-items: center!important;
}


.fi{
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}



/*admin dashboard icon*/

.total-card-body {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 20px;
}
.total-card-body  .box-content {
    margin-bottom: 0px;
}

.total-card-body  .box-content h5{
    margin-bottom: 0px;
}
.total-card-body  .box-content .metric-value{
        margin-bottom: 10px;
}

.lang-dropdown{
    left: 0!important;
    margin-top: 0.5em!important;
}
.lang-dropdown .btn{
    color: #212529!important;
    border:none!important;
}
.dropdown-menu{
    min-width: 8.5em!important;
}
.lang-dropdown .dropdown-item{
    padding-left: 15px!important;
}
.dropdown-toggle{
    border:none!important;
}
/* salary  */

.dashboard-salary label.icon{
    width: 20%!important;
}
.dashboard-salary .d-flex p.ml-3{
        color:#7171a6 !important;
        text-align: left!important;
}
.dashboard-salary .d-flex p{
    width: 100%!important;
    text-align: center!important;
}
.border-1px{
    border-bottom: 1px solid!important;
}
/*admin dashboard icon*/


.notification-dropdown
{
    min-width: 320px!important;
}


@media only screen and (max-width: 991px) {


    .notification-dropdown
    {
        min-width: 200px!important;
    }
}


/* custome full site background and color change */

:root{
    --warningcolor:#7e0095;
}
.btn-primary{
    color: white!important;
    background-color: var(--warningcolor)!important;
    border-color: var(--warningcolor)!important;
}
.badge-primary{
    background-color: var(--warningcolor)!important;
}


.card-header{
    background-color: none!important
}


.btn-outline-light:hover{
    background-color: var(--warningcolor)!important;
    color:white!important;
    border-color: var(--warningcolor)!important;

}

/* end custom full site background and color change*/


.dashboard-calendar
{
    width: 100%!important;
}


.fc-today-button.fc-button.fc-button-primary
{
    text-transform: capitalize!important;
}

.fc .fc-daygrid-event-harness
{
    margin-bottom: 2px!important;
}



/* login page design css */

.login-bg-image{
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../images/1.jpg);
    text-align: center;
    background-size: cover;
    background-position: center;
}
/* end login page design css */


.pickup-request .btn{
    padding: 10px 30px 10px 30px!important;
    margin: 30px 20px;
}


@media screen and (max-width:768px){
    .dashboard-filter-input{
        width: 50%!important;
    }
}


.dropdown-menu .dropdown-item:hover{
    background-color: #7e0095!important;
    color:white!important;
}
.btn-primary.ml-0{
    margin-left: 0px!important;
}

.card .card-body.pt-0px
{
    padding-top: 0px!important;
}


.apexcharts {
    max-width: 650px;
    margin: 0px auto;
  }


  .font-size-12{
      font-size: 12px!important;
  }

  .metric-label{
      text-transform: capitalize!important;
      margin-top: 0px!important;
  }

  .merchant-panel.header-summery .card .text-primary{
      color:#7e0095!important;
    }
  .merchant-panel.header-summery .card .card-body{
        padding-left: 15px!important;
    }

    .merchant-panel.header-summery .card:hover .text-primary{
        color:white!important;
    }

    .merchant-panel.all-reports .card:hover .text-primary{
        color:white!important;
    }

    .merchant-panel.all-reports .card i{
        font-size: 50px!important;
    }


    /* The panel logo used to be forced into a fixed 200x30 box, which was fine
       for the theme's default banner logo (264x50) but letterboxed any taller
       company logo down to a thumbnail. Scale it on its own aspect ratio
       instead, like the frontend navbar does (frontend/css/style.css), bounded
       by the 200px width the landing page uses and by the height a 90px header
       leaves free. A banner logo still comes out 200px wide; a tall one now
       comes out 70px high instead of being squashed to 30px. */
    .navbar-brand img.logo{
        width: auto!important;
        height: auto!important;
        max-width: 200px!important;
        max-height: 70px!important;
        object-fit: contain!important;
    }

    .dashboard-header .navbar{
        min-height: 90px;
    }

    .navbar-brand{
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex!important;
        align-items: center;
    }

    /* Company name next to the header logo — sized off the 70px logo cap
       (max-height above) rather than a fixed px value, so it keeps reading
       as "one lockup" instead of overpowering a small logo or looking tiny
       next to a tall one. */
    .navbar-brand-name{
        margin-left: 12px;
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: inherit;
        white-space: nowrap;
    }

    /* In RTL, .navbar-brand is a flex row so the logo (first in the markup)
       renders on the right and the name sits to its left — margin-left above
       lands on the name's outer edge instead of the gap next to the logo,
       leaving the two stuck together. Move the gap to the right side instead. */
    html[dir="rtl"] .navbar-brand-name{
        margin-left: 0;
        margin-right: 12px;
    }

    @media screen and (max-width: 991px) {
        .navbar-brand img.logo{
            max-width: 150px!important;
        }

        .navbar-brand-name{
            font-size: 1.1rem;
            margin-left: 8px;
        }

        html[dir="rtl"] .navbar-brand-name{
            margin-left: 0;
            margin-right: 8px;
        }
    }

    .navbar-brand-mobile{
        display: flex!important;
        align-items: center;
    }

    /* The header is 90px now, and grows further if a company's logo needs it,
       so the fixed sidebar and the content offset can no longer assume the
       theme's hardcoded 60px. --admin-header-height is measured and kept in
       sync by the script in backend/partials/footer.blade.php; the 90px here
       is only the fallback for before that runs. The +40px keeps the original
       gap between the header and the first row of content (theme: 100 - 60). */
    :root{
        --admin-header-height: 90px;
    }

    @media screen and (min-width: 992px) {
        .nav-left-sidebar{
            top: var(--admin-header-height)!important;
        }

        .dashboard-main-wrapper{
            padding-top: calc(var(--admin-header-height) + 40px)!important;
        }
    }

    @media screen and (min-width:960px) {
        .footer-text{
            margin-left: 25%!important;
        }

        /* .row is a flex container, and flex-direction:row anchors its item to
           the RIGHT edge in RTL (not the left) — so simply mirroring the LTR
           margin (margin-right:25%) pulls the still-100%-wide box's LEFT edge
           25% past the viewport's left edge. Text is forced text-align:left
           globally (the CDN Bootstrap 4 reset overrides Bootstrap 5's
           dir-aware default), so it was rendering at that off-screen edge —
           invisible. Constrain the box to the sidebar-free width instead and
           center the text inside it explicitly.
           Note: width alone doesn't do it — the CDN Bootstrap 4.1.1
           stylesheet (loaded after Bootstrap 5, see header.blade.php) sets
           .col-sm-12/.col-12 to `flex: 0 0 100%`, and an explicit flex-basis
           always wins over `width` for a flex item's main size. flex-basis
           has to be overridden directly or `width` is silently ignored. */
        html[dir="rtl"] .footer-text{
            margin-left: 0!important;
            margin-right: 10%!important;
            flex: 0 0 75%!important;
            width: 75%!important;
            text-align: center!important;
        }
    }

    .dropdown-toggle{
        border:none!important;
    }



    /* canvas menu */

    /* end canvas menu */


    .merchant-panel.header-summery.all-reports .card i{
        font-size: 2.5rem!important;
    }

    .nav-item.dropdown.connection .dropdown-item{
        color: #455560!important;

    }

    .nav-item.dropdown.connection .dropdown-item:hover{
        background:none!important;
    }

    @media screen and (max-width:990px){
        .notification .nav-link.nav-icons .mobile-notification.indicator{
            right: 3px!important;
            top:20px!important;
        }


        .nav-left-sidebar{
            /* display: none!important; */
        }
        .main-content{
            margin-left: 0px!important;
        }


        .merchant-mobile-navbar-nav .nav-item.dropdown a.dropdown-item{
            width: 250px!important;
        }

        #todoModal1{
            margin-left: 15px!important;
            margin-right: 15px!important;
        }
    }



    .merchant-panel.header-summery .icon{
        margin-bottom: 0px!important;
    }


    table .dropdown-menu{
        max-width: 20em!important;
    }

    /* ABICex — parcel status labels (e.g. "Return Assign To Merchant
       Re-Schedule Cancel") are longer than the 20em cap above. Bootstrap's
       .dropdown-item forces white-space: nowrap, so a long label was
       being sliced off mid-word at that boundary instead of showing in
       full. Letting these items wrap keeps the width cap (so the menu
       doesn't blow out of the table cell) while still showing every
       status completely, just on two lines instead of one. */
    table .dropdown-menu .dropdown-item{
        white-space: normal!important;
        word-break: break-word!important;
    }

    table .btn.btn-primary.dropdown-toggle.dropdown-toggle-split{
        width: 40px!important;
    }


    table td .row .btn.btn-sm:hover{
        border:none!important;
    }

    table td .row .btn.btn-sm:focus-visible{
        border:none!important;
        box-shadow: none!important;
    }

    .table-responsive{
        /* margin-top: 10px!important; */
    }

    @media screen and (max-width: 412px){
        .dashboard-filter-input {
            width: 40%!important;
        }

        .merchant-dashboard-filter input.w200{
            min-width: 250px!important;
        }


        .notification .nav-link.nav-icons .mobile-notification.indicator {
            top: 20px!important;
        }

        .notification-list{
            background: white !important;
        }
    }


    .list-group-item {

        border: 1px solid #e6e6f2!important;
    }


    /* ABICex — was `width:90% !important` on the label alone, with the
       checkbox's own width left unaccounted for. Checkbox + 90% label
       overflows a narrow permission-table cell, so the label wraps onto
       its own line under the checkbox — this got a lot more visible with
       Arabic labels (they tend to run longer) even though the underlying
       overflow existed in English too. Flex + gap sizes the checkbox to
       its content and gives the label the rest, and (unlike a fixed
       percentage) it flips correctly under dir="rtl" for free since it's
       normal flex flow, not a magic-number width. */
    .permission-table tr td .row.permission-check-box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin-left: 0;
        margin-right: 0;
    }

    /* ABICex — the flex/gap layout above didn't fully fix the overlap: this
       page loads both Bootstrap 5 (local) and Bootstrap 4.1.1 (CDN, loaded
       after it in header.blade.php), and BS4's .form-check-input rule
       (position: absolute; margin-left: -1.25rem — its classic checkbox
       pattern, meant to sit inside a .form-check with matching
       padding-left, which these rows don't have) wins the cascade since it
       loads later. An absolutely-positioned checkbox drops out of the flex
       flow entirely and renders back at the row's start, on top of the
       label. Forcing it static puts it back under normal flex layout,
       where the margin:0 + gap below already position it correctly. */
    .permission-table tr td .row.permission-check-box input[type="checkbox"] {
        position: static !important;
        flex: 0 0 auto;
        margin: 0;
    }

    .permission-table tr td .row.permission-check-box label{
        width: auto!important;
        flex: 1 1 auto;
        margin: 0;
        word-break: break-word;
    }

    .permission-table tr td .row.select-all-row {
        border-bottom: 1px solid #e6e6f2;
        margin-bottom: 4px;
    }

    .swal2-confirm.swal2-styled{
        background: #7e0095 !important;
    }


    html[dir="rtl"] .merchant-panel.header-summery .card-body .d-flex{
        text-align: right!important;
    }

    html[dir="rtl"] .merchant-panel.header-summery.all-reports .d-flex.justify-content-between{
        text-align: right!important;
        justify-content: unset!important;
    }


    html[dir="rtl"] .merchant-panel.header-summery.all-reports .d-flex.justify-content-between p{
        margin-left: 15px!important;
    }

    .merchant-panel.header-summery.all-reports .d-flex.justify-content-between{
        text-align: right!important;
        justify-content: unset!important;
    }

    .merchant-panel.header-summery.all-reports .d-flex.justify-content-between p.h3.text-primary{
        text-align: left;
    }
    html[dir="rtl"] .merchant-panel.header-summery.all-reports .d-flex.justify-content-between p.h3.text-primary{
        text-align: right!important;
    }
    .merchant-panel.header-summery.all-reports .d-flex.justify-content-between p{
        margin-right:15px!important ;
    }
    html[dir="rtl"] .merchant-panel.header-summery.all-reports .d-flex.justify-content-between p{
        margin-right:unset!important ;
    }


    html[dir="rtl"] .d-description
    {
        text-align: right!important;
    }

    /* General settings > pricing-integrity block: the CDN Bootstrap 4 reset
       loaded alongside Bootstrap 5 hardcodes text-align:left on body, which
       wins the cascade over Bootstrap 5's dir-aware default, so this block's
       heading/hint text stayed left-aligned even under dir="rtl". */
    html[dir="rtl"] .pricing-integrity-block{
        text-align: right!important;
    }


.hub-view .card:hover .total-card-body .text-center .icon,
.hub-view .card:hover .total-card-body .text-center .box-content .text-muted,
.hub-view .card:hover .total-card-body .text-center .icon .box-content .metric-value h1.mb-1
{
    color: #7e0095!important;
}


.glyphicon.glyphicon-chevron-up,
.glyphicon.glyphicon-chevron-down{
    display: none!important;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover
{
    background-color: #7e0095!important;
}

.bootstrap-datetimepicker-widget table td.day {
    line-height: 40px!important;
    width: 30px!important;
}


.picker-switch
{
    padding:10px!important;
}


.select2-container--default .select2-selection--single
{
    border-radius: 30px!important;
}

.select2-dropdown{
    border-radius: 10px 10px 20px 20px!important;
    overflow: hidden!important;
}

.select2-search__field{
    margin-top: 5px!important;
}

.select2-container--default .select2-results__option--selected
{
    background-color: #7e0095!important;
    color: white!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow
{
    right: 10px!important;
}

 button.pickup-request-btn{
     border-radius: 4px!important;
 }

 .note-toolbar button.btn{
    min-width: 20px!important;
    margin: 5px!important;
    border-radius: 5px!important;
 }
input[type="file"]{
    padding-left: 5px!important;
    box-shadow: none!important;
    border:1px solid #d2d2e4!important;
}

.margin-top-5px{
    margin-top: 5px!important;
}

.nav-left-sidebar .navbar-nav .nav-link:hover,.nav-left-sidebar .navbar-nav .nav-link.active{
    background-color: #6a027c12!important;
    color: #7e0095!important;
}

.pickup-req-btn-merchant{
    padding: 30px 40px!important;
    margin-top: 21px!important;
    font-size:20px!important;
    border-radius:5px!important
}

.pickup-req-btn-merchant i
{
    font-size:20px!important;
    margin-right:10px!important;
}

.modal-content{
    border: none!important;
    box-shadow: 0px 0px 5px white!important;
}

.merchantpanelAddbutton::after
{
    display: none!important;
}


@media screen and (min-width: 991px){
    .merchantpanelAddDropdown{
        left: -16px!important;
    }
}


.mtext-color{
    color:#455560!important;
}

.mobilePlusBtn button
{
    color:#455560!important;
}

.m-newsoffers{
    padding: 5px 10px!important;
}

@media screen and (max-width: 991px) {
        .merchant-navbar .nav-item.dropdown.connection.mt-md-3{
            margin-top: 0px!important;
        }

        .notification .nav-link.nav-icons .mobile-notification.indicator.admin{
            margin-top: -10px!important;
        }

        .navbar-nav a.dropdown-item i.fa-newspaper{
            margin-right: 0px!important;
        }

        .mobileLocale button{
            padding-left: 10px!important;
        }
        .mobileLocale button i{
            margin-right: 5px!important;
        }
}


.width300px{
    width: 300px!important;
}
.width100px{
    width: 100px!important;
}


.totalCalculationHead .text-white{
    color:white!important;
}

.marchantStatusReportsSelect .select2-selection.select2-selection--multiple{
        padding:8px!important;
}

.w-25
{
    width: 25%!important;
}

.select2-selection.select2-selection--single{
    height: unset!important;
    line-height: 1.5!important;
    min-height: calc(1.5em + 0.5rem + 2px)!important;
    font-size: .875rem!important;
}
.select2-selection.select2-selection--single .select2-selection__rendered{
    padding: 3px 0 0 14px !important;
}

@media screen and (min-width:991px){
    .admin-panel.notification .nav-link.nav-icons .indicator{
        top:15px!important;
    }
}

@media screen and (min-width:991px){
    .merchant-panel.notification .nav-link.nav-icons .indicator{
        top:15px!important;
    }
}


.fundTransferSearch{
    width: 100%!important;
    margin-left: 0%!important;
}

.list-style-none{
    list-style: none!important;
}

html[dir="rtl"] .parcelSearch
{
    margin-left: 0%!important;
}

/* ABICex 2026-10-25 — was a flat 1.2rem (19.2px) for everything, which made phone screens look oversized.
   Text now scales 14–16px with the screen; entry fields stay 16px so iPhones don't zoom in on focus. */
@media screen and (max-width:768px){
    body, button.btn, a.btn,label.btn, p,a,span,li,button.dropdown-item{
        font-size: clamp(14px, 3.9vw, 16px)!important;
    }
    input.form-control, select, textarea{
        font-size: 16px!important;
    }
}


/* Login / register / password / signup screens. The fixed 250x40 with no
   object-fit stretched a non-banner logo out of shape, so match the panel and
   the landing page here too. */
img.logo-img {
    width: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.parcel-index .form-check-input{
    position: relative!important;
    margin-right: 0px!important;
    margin-left: 0px!important;
}

.navbar-globe{
    font-size: 17px;
    margin: 15px 10px;
}

@media screen and (max-width: 991px) {
    .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus, .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active {
        background: #6a027c !important;
        color: white !important;
    }
}

/* ABICex — the merchant panel's mobile nav menu (navber.blade.php) uses
   Bootstrap 5's .offcanvas component, hidden off-screen by default until
   toggled. header.blade.php also loads Bootstrap 4 for the rest of the
   (older) panel, and Bootstrap 4 has no .offcanvas rules of its own — but
   it does restyle .navbar-collapse, a class this same element also
   carries, and because that stylesheet loads after Bootstrap 5's it wins
   the cascade on the shared positioning properties. Net effect: the
   offcanvas never actually went off-screen, so it rendered inline at full
   width right next to the compact top bar, looking like the whole header
   was duplicated. Re-asserting Bootstrap 5's own hidden/shown offcanvas
   states here (loaded after both frameworks) restores the intended
   behavior regardless of which Bootstrap "wins" elsewhere. */
.merchant-navbar .offcanvas.offcanvas-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1045 !important;
    visibility: hidden !important;
    transform: translateX(-100%) !important;
    transition: transform .3s ease-in-out !important;
}
.merchant-navbar .offcanvas.offcanvas-nav.show {
    visibility: visible !important;
    transform: translateX(0) !important;
}
html[dir="rtl"] .merchant-navbar .offcanvas.offcanvas-nav {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
}
html[dir="rtl"] .merchant-navbar .offcanvas.offcanvas-nav.show {
    transform: translateX(0) !important;
}

/* ABICex — the always-visible compact bar's logo (navbar-brand-mobile) had
   no size cap at all, so a roughly-square badge logo rendered ~150px tall
   and forced the whole header to grow to match. Capped to a compact header
   height instead, scaled on its own aspect ratio like the desktop logo
   elsewhere in the panel — a wide banner logo still comes out reasonably
   sized, a square one no longer dwarfs the bar around it. */
.navbar-brand-mobile-logo {
    width: auto;
    height: auto;
    max-height: 32px;
    max-width: 140px;
    object-fit: contain;
}

/* Shrinks the merchant panel's whole top bar to match — the p-3 (16px)
   padding plus a 150px logo is what made it read as oversized; py-2 above
   plus this cap keeps it compact everywhere without touching the general
   admin panel's own (differently-structured) header. */
@media screen and (min-width: 992px) {
    .merchant-navbar {
        min-height: auto;
    }
}

/* ABICex — direction-aware helpers. Bootstrap 4's text-right / mr-2 /
   float-left utilities are fixed to physical sides and don't flip under
   dir="rtl"; these use logical properties (start/end) so the same markup
   reads correctly in English and Arabic. */
.abx-text-end   { text-align: end !important; }
.abx-text-start { text-align: start !important; }
.abx-me-1 { margin-inline-end: .25rem !important; }
.abx-me-2 { margin-inline-end: .5rem !important; }
.abx-me-3 { margin-inline-end: 1rem !important; }
.abx-ms-1 { margin-inline-start: .25rem !important; }
.abx-ms-2 { margin-inline-start: .5rem !important; }
.abx-ms-3 { margin-inline-start: 1rem !important; }
.abx-ms-auto { margin-inline-start: auto !important; }
.abx-ps-3 { padding-inline-start: 1rem !important; }
.abx-float-end   { float: right !important; }
.abx-float-start { float: left !important; }
html[dir="rtl"] .abx-float-end   { float: left !important; }
html[dir="rtl"] .abx-float-start { float: right !important; }
/* Numbers and codes (amounts, tracking IDs, dates) keep LTR digit order inside Arabic text. */
.abx-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* The Bootstrap 4 CDN reset hardcodes text-align:left on body, which beats
   the dir attribute — Arabic pages without their own rule stayed left. */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; }
html[dir="rtl"] .table th.abx-text-end, html[dir="rtl"] .table td.abx-text-end { text-align: left !important; }

/* Breadcrumb separator: Bootstrap floats it left, so in Arabic it landed on
   the wrong side and items ran together ("لوحة القيادةتسويات الأرصدة /"). */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: .5rem; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: .5rem; }

/* Native date inputs and selects follow the page direction in Arabic. */
html[dir="rtl"] select.form-control, html[dir="rtl"] textarea.form-control, html[dir="rtl"] input.form-control { text-align: right; }
html[dir="rtl"] input[type="number"].form-control, html[dir="rtl"] input[type="date"].form-control { direction: rtl; }

/* Notification dropdown: picture on the start side, text indented from it. */
html[dir="rtl"] .notification-list-user-img { float: right; }
html[dir="rtl"] .notification-list-user-block { padding-left: 0; padding-right: 50px; text-align: right; }
html[dir="rtl"] .notification-list-user-name { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .notification-dropdown { text-align: right; }

/* ---- Merchant header toolbar (2026-11-04): one row, one height, one style.
   The items used to carry their own top margins (mt-md-3) and paddings, so
   language, bell, news, "+ Create", wallet and avatar sat at different
   heights. Every item is now a 36px box centred on the same line. ---- */
.merchant-navbar .navbar-other > .navbar-nav {
    align-items: center !important;
    gap: 10px;
}
.merchant-navbar .navbar-other > .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
    margin: 0 !important;
}
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .nav-link,
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .m-newsoffers,
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .merchantpanelAddbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 18px;
    color: #455560 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    background: transparent;
    transition: background-color .15s ease;
}
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .nav-link:hover,
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .m-newsoffers:hover,
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .merchantpanelAddbutton:hover {
    background-color: #f1f3f5;
}
.merchant-navbar .navbar-other > .navbar-nav > .nav-item i {
    font-size: 16px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}
/* Language switch: a light outlined pill so it reads as a control, not text. */
.merchant-navbar .navbar-other .merchant-lang-link {
    border: 1px solid #dfe3e8;
}
/* Bell: the red dot sits on the bell's corner instead of floating beside it. */
.merchant-navbar .navbar-other .merchant-panel.notification > .nav-link { position: relative; }
.merchant-navbar .navbar-other .merchant-panel.notification .nav-link.nav-icons .indicator {
    position: absolute;
    top: 7px !important;
    right: 8px !important;
    left: auto !important;
    margin: 0 !important;
}
html[dir="rtl"] .merchant-navbar .navbar-other .merchant-panel.notification .nav-link.nav-icons .indicator {
    right: auto !important;
    left: 8px !important;
}
/* Wallet: same 36px height as the rest. */
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .btn.btn-primary {
    height: 36px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
/* Avatar: 36px circle on the same line. */
.merchant-navbar .navbar-other > .navbar-nav > .nav-item > .nav-link.nav-user-img { padding: 0 !important; min-width: 36px; }
.merchant-navbar .navbar-other .nav-user-img .user-avatar-md {
    width: 36px;
    height: 36px;
    object-fit: cover;
}