/* =================================================================
   1. Global Layout & Sticky Footer
   =================================================================== */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

body > .container {
    padding: 0 15px 0;
}

.container .text-muted {
    margin: 20px 0;
}

.footer {
    position: relative !important;
    flex-shrink: 0;
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
    text-align: center;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}

.display_none {
    display: none !important;
}

.white,
.white a {
    color: #fff;
}


/* =================================================================
   2. Typography & Icons
   =================================================================== */
.bi-heart,
.bi-heart-fill {
    vertical-align: -0.125em;
    font-size: 1.2rem;
}

/* Spin animation for loading states */
.gly-spin {
    animation: spin 2s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}


/* =================================================================
   3. Navigation, Navbar & Sidenav
   =================================================================== */
.navbar-group-name {
    margin-left: 10px;
    color: #fff;
}

.navbar-custom .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Bootstrap 5.3 applies every dropdown anchoring rule through the
   [data-bs-popper] attribute, which only arrives when Popper
   positions the menu. The navbar dropdowns run without Popper: the
   attribute never comes, dropdown-menu-end never applies, and the
   right sided menus (user, language) open past the right edge of
   the screen. The rules below mirror what Bootstrap would do with
   the attribute present, whatever Popper decided. */
.navbar-custom .dropdown-menu {
    top: 100%;
    margin-top: var(--bs-dropdown-spacer);
}

.navbar-custom .dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
}

.navbar-custom .dropdown-menu .dropdown-item {
    color: var(--bs-primary) !important;
}

.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus {
    color: #eee9f6 !important;
    background-color: var(--bs-primary) !important;
}

.navbar-custom .dropdown-menu .dropdown-item.active {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
}

a.skip_link {
    position: absolute;
    top: -1000px;
    left: -1000px;
}


/* =================================================================
   4. Sidebar (.bs-docs-sidebar)
   =================================================================== */
.bs-docs-sidebar {
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 0 0 1px 20px;
}

.bs-docs-sidebar .nav > li > .nav-link {
    font-weight: bold;
    color: #3c3c3c !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-left: 2px solid transparent;
}

.bs-docs-sidebar .nav .nav > li > .nav-link {
    font-weight: normal;
    color: #3c3c3c !important;
    padding-left: 30px;
    border-left: 2px solid transparent;
}

.bs-docs-sidebar .nav > li > .nav-link:hover,
.bs-docs-sidebar .nav > li > .nav-link:focus,
.bs-docs-sidebar .nav .nav > li > .nav-link:hover,
.bs-docs-sidebar .nav .nav > li > .nav-link:focus {
    color: #51a351 !important;
    background-color: transparent !important;
    text-decoration: none;
}

.bs-docs-sidebar .nav > li > .nav-link.bs-docs-sidebar-active,
.bs-docs-sidebar .nav .nav > li > .nav-link.bs-docs-sidebar-active {
    color: #51a351 !important;
    background-color: transparent !important;
    border-left: 2px solid #51a351 !important;
    text-decoration: none;
}


/* =================================================================
   5. Components (Buttons, Cards, Accordions, Modals, Forms)
   =================================================================== */
.btn {
    white-space: normal !important;
    word-wrap: break-word;
    word-break: normal;
    overflow-wrap: break-word;
}

.not-active {
    pointer-events: none;
    cursor: default;
}

.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
    cursor: pointer !important;
}

.accordion-button:not(.collapsed):after {
    position: relative;
    bottom: 23px;
    float: right;
    font-family: 'bootstrap-icons', serif;
    font-size: 15pt;
    color: grey;
    content: "\e114";
}

.accordion-button.collapsed:after {
    content: "\e080";
}

.card-header:hover {
    cursor: pointer;
}

.card-header:hover h4 {
    text-decoration: underline;
}

.card-header[aria-expanded="true"] .chevron-icon,
.card-header .chevron-icon {
    transition: transform 0.2s ease-in-out;
}

.card-header[aria-expanded="true"] .chevron-icon {
    transform: rotate(90deg);
}

.offer-description {
    position: relative;
    height: 200px;
    margin-top: 20px;
    overflow: auto;
}

.form-sticky-update-button {
    position: sticky;
    bottom: 65px;
}

.back-to-top-sticky-button {
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 2000;
    display: none;
}

.form-group input[type="checkbox"] {
    display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span {
    width: 20px;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
    display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span:last-child {
    display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
    display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
    display: none;
}

.modal-dialog {
    margin-top: 100px !important;
}


/* =================================================================
   6. Custom Quantity Dropdown Component
   =================================================================== */
.quantity-dropdown {
    display: inline-block;
}

.quantity-dropdown .dropdown-toggle {
    width: 100%;
    min-width: 80px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.quantity-dropdown .dropdown-menu {
    max-height: 300px;
    min-width: 80px;
    overflow-y: auto;
}

.quantity-dropdown .quantity-option {
    padding: 0.25rem 0.5rem;
    text-align: center;
}

.quantity-dropdown .quantity-option:hover,
.quantity-dropdown .quantity-option:focus {
    color: #212529;
    background-color: #f8f9fa;
}

.quantity-dropdown .quantity-option.active {
    color: #ffffff;
    background-color: var(--bs-primary);
}


/* =================================================================
   7. Pure CSS Cart Icon Component
   =================================================================== */
.icon-cart {
    position: relative;
    width: 48px;
    height: 48px;
    margin-top: -10px;
    overflow: hidden;
}

.icon-cart .cart-line-1 {
    position: absolute;
    top: 25%;
    left: 8%;
    width: 15%;
    height: 7%;
    transform: rotate(5deg);
    border-bottom-left-radius: 35%;
}

.icon-cart .cart-line-2 {
    position: absolute;
    top: 40%;
    left: 6%;
    width: 35%;
    height: 7%;
    transform: rotate(80deg);
}

.icon-cart .cart-line-2:before {
    content: "";
    position: absolute;
    top: -280%;
    left: 45%;
    width: 120%;
    height: 100%;
    background-color: inherit;
    transform: rotate(-80deg);
}

.icon-cart .cart-line-2:after {
    content: "";
    position: absolute;
    top: -670%;
    left: 59%;
    width: 70%;
    height: 100%;
    background-color: inherit;
    transform: rotate(40deg);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 25%;
}

.icon-cart .cart-line-3 {
    position: absolute;
    top: 45%;
    left: 33%;
    width: 30%;
    height: 7%;
}

.icon-cart .cart-line-3:after {
    content: "";
    position: absolute;
    top: -150%;
    left: -5%;
    width: 124%;
    height: 100%;
    background-color: inherit;
}

.icon-cart .cart-wheel {
    position: absolute;
    bottom: 20%;
    left: 28%;
    width: 12%;
    height: 12%;
    border-radius: 100%;
}

.icon-cart .cart-wheel:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 200%;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: 100%;
}


/* =================================================================
   8. Responsive Design & Media Queries Grouped by Component
   =================================================================== */

/* Container width overrides for large viewports */
@media (min-width: 1200px) {
    .container-repanier,
    .container {
        max-width: 95% !important;
    }
}

/* Specific container states to prevent navbar overlap across screen sizes */
@media only screen and (max-width: 767px) {
    .container-bootstrap,
    .container-repanier {
        margin-top: 90px;
    }
    .container-repanier {
        margin-bottom: 0;
    }
    .container-info {
        margin: 90px 0 -90px 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 976px) {
    .container-bootstrap,
    .container-repanier {
        margin-top: 35px;
    }
    .container-repanier {
        margin-bottom: 0;
    }
    .container-info {
        margin: 35px 0 -35px 0;
    }
    .container-menu {
        padding: 0 15px 0;
    }
}

@media only screen and (min-width: 977px) {
    .container-bootstrap,
    .container-repanier {
        margin-top: 85px;
    }
    .container-repanier {
        margin-bottom: 0;
    }
    .container-info {
        margin: 85px 0 -85px 0;
    }
    .container-menu {
        padding: 0 15px 0;
    }
}

/* Navbar breakpoint adjustments */
@media screen and (min-width: 768px) and (max-width: 979px) {
    body {
        padding-top: 60px;
    }
}

@media only screen and (min-width: 768px) {
    .navbar-nav li.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 992px) {
    .navbar-custom .container-fluid {
        display: flex;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
    }
}

/* Mobile Sidenav / Offcanvas behavior */
@media only screen and (max-width: 767px) {
    .sidenav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1100;
        display: none;
        width: 90%;
        height: 100%;
        max-height: 100% !important;
        padding-top: 15px;
        overflow-x: hidden;
        background-color: #4d4d4f;
        transition: transform 0.5s ease;
    }

    .sidenav a {
        display: block;
        padding: 8px 8px 8px 32px;
        font-size: 18px;
        color: #818181;
        text-decoration: none;
        white-space: normal !important;
        transition: 0.3s;
    }

    .sidenav a:hover,
    .offcanvas a:focus {
        color: #f1f1f1;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 20px;
    }
}

/* Sticky sidebar with internal scroll for desktop */
@media (min-width: 992px) {
    .bs-docs-sidebar .fixed-sidebar-container {
        position: sticky;
        top: 5rem;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 6rem);
    }

    .bs-docs-sidebar .sidebar-scrollable-area {
        flex-grow: 1;
        padding-right: 5px;
        overflow-y: auto;
    }
}

/* Mobile adjustments for quantity dropdowns */
@media (max-width: 768px) {
    .quantity-dropdown .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 70vw !important;
        max-height: 65vh !important;
        transform: translate(-50%, -50%) !important;
        font-size: 1.2rem;
    }
}

/* Desktop adjustments for larger quantity dropdowns */
@media (min-width: 768px) {
    .quantity-dropdown .dropdown-menu {
        min-width: 200px !important;
        max-height: 450px !important;
    }
}

/* Mobile adjustments for modal footers */
@media (max-width: 768px) {
    .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .modal-footer .btn {
        margin-bottom: 0 !important;
    }
}