/* AWAMI ELECTRIC STORE — modern UI overlay */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --awami-orange: #ff6a1a;
    --awami-orange-dark: #e05a10;
    --awami-navy: #1c2733;
    --awami-bg: #f4f6f9;
    --awami-card-radius: 14px;
    --awami-shadow: 0 4px 14px rgba(20, 25, 35, 0.08);
    --awami-shadow-hover: 0 10px 26px rgba(20, 25, 35, 0.16);
}

html, body {
    background: var(--awami-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ---------- Top strip (clock / user / logout) ---------- */
.topbar {
    background: var(--awami-navy) !important;
    letter-spacing: .3px;
}

.topbar a {
    color: #ffb385 !important;
    font-weight: 500;
}

.topbar a:hover {
    color: #fff !important;
}

/* ---------- Main navbar ---------- */
.navbar-default,
.navbar.navbar-default {
    background: linear-gradient(135deg, var(--awami-orange) 0%, var(--awami-orange-dark) 100%) !important;
    border: none !important;
    box-shadow: var(--awami-shadow);
}

.navbar-default .navbar-brand,
.navbar-brand {
    font-weight: 800 !important;
    letter-spacing: .5px;
    color: #fff !important;
    font-size: 1.25rem !important;
}

.navbar-default .navbar-nav > li > a {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500;
    border-radius: 10px;
    margin: 4px 2px;
    transition: background .15s ease, transform .15s ease;
}

.navbar-default .navbar-nav > li > a:hover {
    background: rgba(255,255,255,0.16) !important;
    transform: translateY(-1px);
}

/* ospos.css gives the active tab a white pill (background #fff, text
   #2C3E50), but the rule above wins on specificity+!important and keeps
   the label white - invisible on the now-white background. */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--awami-navy) !important;
    background-color: #fff !important;
}

.navbar-default .navbar-nav > .active > a .menu-label-ur {
    color: var(--awami-orange-dark) !important;
}

/* ---------- Module launcher tiles on the dashboard ---------- */
#home_module_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    padding: 20px 10px 40px;
}

#home_module_list .module_item {
    background: #fff;
    border-radius: var(--awami-card-radius);
    box-shadow: var(--awami-shadow);
    padding: 22px 18px 16px;
    width: 128px;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
}

#home_module_list .module_item:hover {
    transform: translateY(-6px);
    box-shadow: var(--awami-shadow-hover);
}

#home_module_list .module_item img {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
}

#home_module_list .module_item a {
    font-weight: 600;
    color: var(--awami-navy) !important;
    text-decoration: none !important;
}

/* ---------- Headings ---------- */
h3.text-center {
    font-weight: 700;
    color: var(--awami-navy);
    margin: 30px 0;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
}

.btn-primary {
    background: var(--awami-orange) !important;
    border-color: var(--awami-orange-dark) !important;
}

.btn-primary:hover {
    background: var(--awami-orange-dark) !important;
}

/* ---------- Cards / panels / tables ---------- */
.panel, .well, .modal-content {
    border-radius: var(--awami-card-radius) !important;
    border: none !important;
    box-shadow: var(--awami-shadow) !important;
}

table.table thead {
    background: var(--awami-navy);
}

table.table thead th, table.table thead th a {
    color: #fff !important;
    font-weight: 600 !important;
}

table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

/* ---------- Footer ---------- */
footer, .footer {
    color: #8a94a3 !important;
}

/* =========================================================
   BILINGUAL NAV LABELS (English + Urdu, easy-to-understand)
   ========================================================= */
.navbar-default .navbar-nav > li > a.menu-icon {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    min-width: 84px;
}

.menu-label-en {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.menu-label-ur {
    display: block;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    direction: rtl;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
}

#home_module_list .module_item .menu-label-ur {
    color: var(--awami-orange) !important;
}

/* =========================================================
   BIG, TOUCH-FRIENDLY CONTROLS — easy to read, easy to tap
   ========================================================= */
body {
    font-size: 15px;
}

.btn {
    padding: 10px 18px !important;
    font-size: 15px !important;
    min-height: 42px;
}

.btn-lg {
    min-height: 52px;
    font-size: 18px !important;
}

/* Sale-register action buttons (finish sale / add payment / cancel /
   suspend) are the most-tapped controls on a shop counter — make them
   large and unmistakable regardless of the btn-sm class already on them. */
#register_wrapper .btn,
#register_wrapper div[class*="btn-"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    min-height: 48px;
    border-radius: 10px !important;
}

#finish_sale_button, #finish_invoice_quote_button {
    background: #1c9c5f !important;
    border-color: #157a49 !important;
}

#cancel_sale_button {
    background: #d9432b !important;
    border-color: #b8351f !important;
}

/* Form inputs: bigger tap targets, clearer focus state */
.form-control, select.form-control, input[type="text"], input[type="number"], input[type="password"] {
    min-height: 42px;
    font-size: 15px !important;
    border-radius: 8px !important;
}

.form-control:focus {
    border-color: var(--awami-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18) !important;
}

label {
    font-weight: 600 !important;
    color: var(--awami-navy);
}

/* Table rows: taller for easier tapping on touch screens/tablets */
table.table > tbody > tr > td, table.table > tbody > tr > th {
    padding: 10px 8px !important;
    vertical-align: middle !important;
}

/* Large item-grid buttons in the POS item catalogue */
.item_row .item, td.item_row {
    font-size: 15px !important;
}

/* =========================================================
   REGISTER 70 / 30 TWO-COLUMN LAYOUT
   Left  (70%): mode bar, item search, cart table.
   Right (30%): customer, totals, payment, action buttons.
   Previously both halves were stacked block elements whose
   floated children (.pull-left/.pull-right) made them collide
   rather than sit in real columns.
   ========================================================= */
.register-layout {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 18px;
    align-items: start;
    padding: 18px 20px 40px;
    box-sizing: border-box;
}

/* register.css sizes these two as old-school floats
   (#register_wrapper{float:left;width:70%} / #overall_sale{width:29%}).
   Left alone, each grid item would then be sized to 70%/29% OF ITS OWN
   TRACK - roughly half the intended width, with the remainder showing as
   dead space between the columns. The grid owns the widths now. */
.register-layout > #register_wrapper,
.register-layout > #overall_sale {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

/* The totals/payment column tracks the cashier down a long cart. */
.register-layout > #overall_sale {
    position: sticky;
    top: 14px;
    /* register.css centres this whole column, which leaves the customer
       label and the totals rows centred against their own values. */
    text-align: left !important;
    padding-top: 0 !important;
    font-size: 15px;
}

.register-layout > #register_wrapper {
    font-size: 15px;
}

.register-layout > #overall_sale > .panel-body {
    padding: 18px !important;
}

/* The customer block, the totals table and the payment block were three
   flush-stacked tables with no separation. */
.register-layout > #overall_sale #select_customer {
    margin-bottom: 0;
}

.register-layout > #overall_sale #select_customer .btn {
    margin-top: 10px;
    margin-right: 6px;
}

.register-layout > #overall_sale #sale_totals {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 2px solid #eef1f4;
}

.register-layout > #overall_sale #sale_totals th,
.register-layout > #overall_sale #payment_totals th {
    padding: 6px 0 !important;
    font-variant-numeric: tabular-nums;
}

.register-layout > #overall_sale #payment_totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef1f4;
}

.register-layout > #overall_sale #buttons_sale {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.register-layout > #overall_sale #buttons_sale > .btn {
    float: none !important;
    flex: 1 1 auto;
}

/* Each of the left column's three blocks is its own card with real
   separation instead of flush-stacked panels. */
#register_wrapper > .panel,
#register_wrapper > form.panel {
    margin-bottom: 16px !important;
    background: #fff;
}

#register_wrapper > .panel:last-child,
#register_wrapper > form.panel:last-child {
    margin-bottom: 0 !important;
}

/* The mode bar and the search bar are <ul>s of floated <li>s. Lay them
   out as flex rows so label/control/button spacing is uniform and the
   rows stop depending on float clearing. */
#register_wrapper > form.panel > .panel-body {
    padding: 14px 18px !important;
    margin-bottom: 0 !important;
}

#register_wrapper > form.panel > .panel-body > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 48px;
}

#register_wrapper > form.panel > .panel-body > ul > li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* Buttons declared .pull-right sit at the far end of the row. float:right
   stacks siblings right-to-left, so the ordering is reversed here to keep
   the same visual order the floats produced (e.g. Daily Sales left of
   Suspended, not the DOM order). The last li carries the auto margin that
   pushes the whole group to the right edge. */
#register_wrapper > form.panel > .panel-body > ul > li.pull-right {
    order: 5;
    margin-left: 0 !important;
}

#register_wrapper > form.panel > .panel-body > ul > li.pull-right:nth-last-child(1) {
    order: 1;
    margin-left: auto !important;
}

#register_wrapper > form.panel > .panel-body > ul > li.pull-right:nth-last-child(2) {
    order: 2;
}

#register_wrapper > form.panel > .panel-body > ul > li.pull-right:nth-last-child(3) {
    order: 3;
}

#register_wrapper > form.panel > .panel-body > ul > li > label {
    margin: 0;
    white-space: nowrap;
}

/* The item search box is the primary control on the screen - let it
   take the free space in its row rather than sit at the size="50"
   default with a ragged gap after it. */
#register_wrapper #add_item_form .panel-body > ul > li:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

#register_wrapper #item {
    width: 100%;
    max-width: 640px;
}

.register-items-panel {
    padding: 0;
    overflow: hidden;
}

/* The empty-cart notice was a full-bleed alert jammed against the table
   edges. */
#cart_contents .alert {
    margin: 18px;
}

@media (max-width: 1100px) {
    .register-layout {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .register-layout > #overall_sale {
        position: static;
    }
}

/* =========================================================
   REGISTER TABLE — modern SaaS-style POS look
   ========================================================= */
/* The table's own <th style="width:X%"> widths only get respected under
   table-layout:fixed. With the default "auto" layout, any cell whose
   content is wider than its declared share (the Price input, the Disc
   input+toggle pair, the cut-length popover, …) silently steals width
   from its neighbours instead of wrapping/clipping — which is exactly
   the recurring overlap/squeeze bug (Price digits cut off, Total text
   sitting behind the % pill, etc). Fixed layout makes every column hold
   its declared width and forces overflowing content to behave inside
   it instead. */
#register {
    table-layout: fixed;
}

/* #register's cells default to vertical-align: middle (browser UA
   default for <td>), which detaches short cells from tall ones once a
   row grows (e.g. the cut-length popover). Anchor every cell to the top
   instead so a row's fields always stay level with each other. */
#register td {
    vertical-align: top !important;
    padding: 10px 8px !important;
}

/* Only the item-name cell needs to clip long text with an ellipsis
   rather than wrap/overflow — every other cell (Disc's input+toggle,
   the cut-length popover, …) must stay visible even if it briefly
   exceeds the column's fixed width. */
#register td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
}

#register td .form-control {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

/* Discount input + % / Rs toggle: let the input give up space to the
   fixed-width toggle instead of both fighting for room and overflowing
   into the Total column next to them. */
#register .input-group {
    max-width: 100%;
}

#register .input-group .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

#register .input-group-btn {
    flex: 0 0 auto;
}

/* Hard stop so the %/Rs pill can never render past the Disc column and
   sit on top of the Total figure next to it. */
#register td:nth-child(6) {
    overflow: hidden;
}

#register thead th {
    background: #f8f9fb !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .6px;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 12px 8px !important;
    /* On very narrow screens the fixed column widths aren't wide enough
       for the full label - truncate with an ellipsis instead of letting
       it overlap into the next header. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-details-name {
    font-weight: 600;
    color: var(--awami-navy);
}

.stock-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #157a49;
    background: #e6f7ee;
    border: 1px solid #b9e8cd;
    border-radius: 20px;
}

/* Column widths live on the header classes now. The two icon-only action
   columns get a fixed pixel width (a percentage gave them less room than
   a glyph needs, which is what truncated their labels to "D..."/"U..."). */
#register .col-action      { width: 40px; text-align: center; }

/* Bootstrap 3 ships .sr-only, Bootstrap 5 renamed it .visually-hidden, and
   the register is rendered against both depending on theme - hide the
   action-column labels explicitly rather than relying on either. */
#register .col-action .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#register .col-item-number { width: 13%; }
#register .col-item-name   { width: 23%; }
#register .col-price       { width: 13%; }
#register .col-quantity    { width: 14%; }
#register .col-discount    { width: 15%; }
#register .col-total       { width: 13%; text-align: right; }

/* The icon columns are sized to the glyph, so the generic 8px cell
   padding would squeeze it - give those two cells their own. */
#register th:first-child, #register td:first-child,
#register th:last-child,  #register td:last-child {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Trash / refresh glyphs were bare default-blue links. */
#register tbody td:first-child a .glyphicon,
#register tbody td:last-child a .glyphicon {
    font-size: 16px;
    color: #9aa3af;
    transition: color .15s ease;
}

#register tbody td:first-child a:hover .glyphicon { color: #d9432b; }
#register tbody td:last-child a:hover .glyphicon  { color: var(--awami-orange); }

/* Price / Quantity / Total columns read like a ledger — tabular figures
   line up cleanly instead of each row's digits drifting side to side. */
#register td:nth-child(4),
#register td:nth-child(7) {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--awami-navy);
}

/* Total column sits flush against the Discount toggle pill otherwise -
   give it breathing room and its own left border to read as a distinct
   column rather than crowding the Disc cell's contents. */
#register td:nth-child(7) {
    padding-left: 18px !important;
    border-left: 1px solid #edf0f3;
    text-align: right;
}

#register th:nth-child(7) {
    padding-left: 18px !important;
}

/* The item name cell centred its text while every neighbour is left or
   right aligned, so names never lined up with the header above them. */
#register tbody td:nth-child(3) {
    text-align: left !important;
}

/* A long barcode is one unbroken "word", so it overflowed its fixed-width
   cell and printed straight over the item name beside it. */
#register tbody td:nth-child(2) {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left !important;
    font-variant-numeric: tabular-nums;
    color: #55606e;
}

#register th:nth-child(2) {
    text-align: left !important;
}

/* register.css centres every #register cell; the numeric columns read
   better aligned to their own edge. */
#register th:nth-child(4), #register td:nth-child(4),
#register th:nth-child(5), #register td:nth-child(5),
#register th:nth-child(6), #register td:nth-child(6) {
    text-align: left !important;
}

/* The Price / Total fields were clipping their own value ("110.00" ->
   "110.("). Direct children only - the quantity input, the discount
   input and the cut-length popover's fields all do their own flex
   sizing inside wrapper divs and must not be forced to 100%. */
#register td > input.form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.item-details-name {
    display: block;
    margin-bottom: 2px;
}

/* ---- Description / serial strip under each cart row ---- */
#register tr.item-details-row > td {
    padding: 0 8px 14px !important;
    border-top: none !important;
}

.item-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 10px 12px;
    background: #f8f9fb;
    border: 1px solid #eef1f4;
    border-radius: 10px;
}

.item-details-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-details-field-wide {
    flex: 1 1 320px;
}

.item-details-field .form-control {
    min-height: 34px !important;
    font-size: 13.5px !important;
    flex: 1 1 auto;
    min-width: 0;
}

.item-details-label {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #8a94a3;
}

.item-details-text {
    font-size: 13.5px;
    color: #55606e;
    line-height: 1.45;
}

.item-details-muted {
    font-style: italic;
    opacity: .7;
}

/* Cart rows need a visible boundary now that each item spans two rows. */
#register tbody tr.item-details-row {
    border-bottom: 1px solid #e9edf1;
}

#register tbody tr:not(.item-details-row) > td {
    padding-bottom: 6px !important;
}

.qty-measure-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.qty-measure-cell .form-control {
    width: 76px !important;
    flex: 0 0 76px;
    min-width: 0;
}

/* Compact "✂ Cut" pill — sits right next to the quantity input instead
   of an always-open box, and shows the applied cut length once set. */
.length-calc-toggle {
    flex: 0 0 auto;
    border: none;
    border-radius: 20px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--awami-orange);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

.length-calc-toggle:hover {
    background: var(--awami-orange-dark);
}

.length-calc {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 6px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ffd3ad;
    border-radius: 10px;
    box-shadow: var(--awami-shadow-hover);
    width: 200px;
    box-sizing: border-box;
}

.length-calc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--awami-orange-dark);
    margin-bottom: 6px;
    line-height: 1.3;
    white-space: normal;
}

.length-calc-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.length-calc-input {
    min-height: 34px !important;
    width: 0;
    flex: 1 1 60px;
    min-width: 0;
    padding: 4px 6px !important;
    font-size: 13px !important;
}

.length-calc-unit {
    min-height: 34px !important;
    width: 0;
    flex: 1 1 64px;
    min-width: 0;
    padding: 4px !important;
    font-size: 12px !important;
}

.length-calc-apply {
    min-height: 34px !important;
    flex: 0 0 auto;
    padding: 4px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

.length-calc-hint {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--awami-navy);
    opacity: 0.75;
    line-height: 1.3;
}

/* =========================================================
   DISCOUNT UNIT BADGE (replaces the old bootstrap-toggle % / Rs switch,
   which never rendered as a pill - just a stray dark sliver overlapping
   the Total column). It's a static read-only label now: the discount
   type is fixed per line item rather than switchable inline here.
   ========================================================= */
#register .input-group {
    display: flex !important;
    align-items: stretch;
}

#register .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.discount-unit-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--awami-navy);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* =========================================================
   JS POPUPS (BootstrapDialog modals: New Item, New Customer,
   confirmations, keyboard help, etc.) — themed to match, since these
   render via JS with the plugin's own default blue/gray styling.
   ========================================================= */
.bootstrap-dialog .modal-content {
    border-radius: var(--awami-card-radius) !important;
    overflow: hidden;
    border: none !important;
    box-shadow: var(--awami-shadow-hover) !important;
}

.bootstrap-dialog .modal-header {
    background: linear-gradient(135deg, var(--awami-orange) 0%, var(--awami-orange-dark) 100%) !important;
    border: none !important;
    padding: 14px 20px !important;
}

.bootstrap-dialog .modal-title,
.bootstrap-dialog .bootstrap-dialog-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

.bootstrap-dialog .close {
    color: #fff !important;
    opacity: .85 !important;
    text-shadow: none !important;
}

.bootstrap-dialog .close:hover {
    opacity: 1 !important;
}

.bootstrap-dialog .modal-body {
    padding: 18px 20px !important;
}

.bootstrap-dialog .modal-footer {
    background: #f8f9fb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 12px 20px !important;
}

/* Required-field labels get a slightly warmer red that matches the
   palette better than the plugin's default bootstrap red. */
.bootstrap-dialog label.required,
.bootstrap-dialog .required {
    color: #d9432b !important;
}

.bootstrap-dialog .btn-primary {
    background: var(--awami-orange) !important;
    border-color: var(--awami-orange-dark) !important;
}

.bootstrap-dialog .btn-primary:hover {
    background: var(--awami-orange-dark) !important;
}

.modal-backdrop.in {
    opacity: .55 !important;
}

/* =========================================================
   SELECT DROPDOWNS (bootstrap-select: Register Mode, Payment Type, …)
   Ships with plain unstyled Bootstrap .btn-default gray/brown — restyle
   to match the theme instead of clashing with everything around it.
   ========================================================= */
.bootstrap-select > .btn.btn-default {
    background: #fff !important;
    border: 1px solid #d7dbe0 !important;
    color: var(--awami-navy) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

.bootstrap-select > .btn.btn-default:hover,
.bootstrap-select > .btn.btn-default:focus {
    border-color: var(--awami-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18) !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: var(--awami-shadow-hover) !important;
    padding: 6px !important;
    overflow: hidden;
}

.bootstrap-select .dropdown-menu li a {
    border-radius: 6px !important;
    font-weight: 500;
    color: var(--awami-navy) !important;
}

.bootstrap-select .dropdown-menu li a:hover {
    background: #fff2e9 !important;
    color: var(--awami-orange-dark) !important;
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
    background: var(--awami-orange) !important;
    color: #fff !important;
}

.bootstrap-select .dropdown-menu li a .glyphicon,
.bootstrap-select .dropdown-menu li a .fa {
    color: inherit !important;
}