/**
 * Layout Styles for GoldApp
 * Consolidated from layout files to improve maintainability
 */

/* ====================
   MENU & NAVIGATION
   ==================== */
.middlemenu {
    margin: 8px;
}

.main_nav li,
.dropdown-item {
    direction: rtl;
    text-align: right;
}

.navbar-nav {
    margin: 0;
    padding: 0;
}

.searchdiv {
    margin: 8px;
}

/* ====================
   BUTTONS
   ==================== */
.dynamic-button {
    display: inline-block;
    white-space: nowrap;
    color: white;
    padding: 0.75rem 1.5rem;
    min-width: unset !important;
    width: auto !important;
}

.notyet {
    background-color: red !important;
}

.btn {
    width: fit-content;
    padding: 6px 12px;
    text-wrap-mode: nowrap;
}

/* ====================
   PRICE DISPLAY
   ==================== */
.pricescontainer {
    display: flex;
    gap: 10px;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.pricebox {
    width: 222px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}

.datebox {
    width: 280px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    white-space: nowrap;
}

.allbox {
    width: 78px;
    height: 35px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}

.sellprice {
    width: 77px;
    background-color: #FFC0C0;
    border-radius: 10px;
}

.buyprice {
    width: 77px;
    background-color: #C0E0FF;
    border-radius: 10px;
}

/* ====================
   FORM INPUTS
   ==================== */
/* Remove arrows from number input - Chrome, Safari, Edge */
.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows from number input - Firefox */
.no-arrows {
    -moz-appearance: textfield;
}

/* ====================
   DROPDOWN MENUS
   ==================== */
/* Top-level nav dropdowns: ensure adequate width so short Arabic labels
   like "لنا"/"له" don't render in a cramped box. */
.navbar-nav .dropdown-menu {
    min-width: 14rem !important;
    padding: 0.5rem 0;
    text-align: right;
    direction: rtl;
}

.navbar-nav .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

/* Nested submenu width — same treatment so "Enter"/"Show" aren't squished. */
.navbar-nav .dropdown-menu .submenu.dropdown-menu {
    min-width: 10rem !important;
}

/* Submenu parent indicator: a left-pointing caret aligned to the inline-end
   (left in RTL, where the submenu opens from). */
.dropdown-item.has-submenu {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dropdown-item.has-submenu::after {
    content: "\25C2"; /* ◂ */
    font-size: 0.75em;
    line-height: 1;
    opacity: 0.6;
    margin-inline-start: 0.5rem;
    flex-shrink: 0;
    border: 0;
    vertical-align: baseline;
}

@media all and (min-width: 992px) {
    .dropdown-menu li {
        position: relative;
    }

    .dropdown-menu .submenu {
        display: none;
        position: absolute;
        right: 100%;
        top: -7px;
    }

    .dropdown-menu .submenu-left {
        left: 100%;
        right: auto;
    }

    .dropdown-menu > li:hover {
        background-color: #f1f1f1;
    }

    .dropdown-menu > li:hover > .submenu {
        display: block;
    }
}

/* ====================
   RESPONSIVE DESIGN
   ==================== */

/* Desktop: Show submenu on hover (1200px+) */
@media (min-width: 1200px) {
    .dropdown-menu li:hover > .submenu {
        display: block;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-item:hover {
        background-color: #9da4ac;
        /*#f8f9fa;*/
    }

    .dropdown-menu .submenu {
        position: relative;
        display: none;
    }

    .dropdown-menu .submenu.show {
        display: block;
    }

    .navbar-expand-xl {
        flex-wrap: nowrap;
    }

    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-xl .navbar-toggler {
        display: none;
    }

    .navbar-expand-xl .navbar-nav {
        flex-direction: row;
    }
}

/* Mobile/Tablet: Dropdown behavior (< 1200px) */
@media (max-width: 1199.98px) {
    .navbar-expand-xl .navbar-collapse {
        display: none !important;
    }

    .navbar-expand-xl .navbar-collapse.show {
        display: block !important;
    }

    .dropdown-menu .dropdown-menu {
        margin-left: 1rem;
    }

    .navbar-container {
        margin-left: 0;
    }

    .searchdiv {
        display: block;
        transform: translateY(0);
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .dropdown-menu .submenu {
        position: relative;
        display: none;
        margin-left: 1rem;
    }

    .dropdown-menu .submenu.show {
        display: block;
    }
}

@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu {
        margin-left: 0.7rem;
        margin-right: 0.7rem;
        margin-bottom: 0.5rem;
    }

    .pricebox {
        display: none;
    }
}

@media (max-width: 640px) {
    .dynamic-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .pricebox {
        display: none;
    }
}

/* ====================
   MODALS
   ==================== */
/* Close (X) button on the left of every modal header. Bootstrap pins it to the
   right via `margin-left: auto`; clearing that and pushing with an auto right
   margin drops the X to the inline-end (left in this RTL layout). */
.modal-header .btn-close {
    margin-left: 0;
    margin-right: auto;
}