/*
 * Additive responsive corrections for the rendered Django pages.
 * The existing desktop theme remains the source of the base styles.
 */

.table-responsive {
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(207, 31, 31, 0.8) rgba(255, 255, 255, 0.08);
    direction: ltr;
}
 
.table-responsive .price-table {
    width: 100%;
    min-width: 640px;
    direction: rtl;
}

.products-mega-menu .mega-menu-panel {
    max-height: min(70vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.products-mega-menu .mega-menu-inner {
    min-width: 0;
}

@media (max-width: 767px) {
    .header-mobile #menu-btn {
        position: relative;
        z-index: 201;
    }

    .header-mobile #mainmenu {
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #mainmenu > li > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .products-mega-navbar .mega-nav {
        padding: 0.6rem;
    }

    .products-mega-navbar .mega-nav-item {
        min-height: 44px;
        width: 100%;
    }

    .products-mega-navbar .mega-nav-list {
        width: 100%;
    }

    .products-mega-navbar .mega-breadcrumb {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .products-mega-menu .mega-menu-panel {
        max-height: calc(100dvh - 150px);
    }

    .products-mega-menu .mega-menu-inner {
        padding: 0.5rem;
    }

    .products-mega-menu .mega-column {
        padding: 0.7rem;
    }

    .products-mega-menu .mega-column-item button {
        min-height: 44px;
    }

    .form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;
    }

    .product-card {
        height: auto;
    }
}

@media (max-width: 575px) {
    .table-responsive {
        margin-right: 0;
        margin-left: 0;
    }

    .table-responsive .price-table {
        min-width: 640px;
    }
}

/* Additional mobile-first fixes: reduce table min-width on small screens and make mega menus static */
@media (max-width: 767px) {
    /* Allow tables to shrink within their responsive wrapper on small devices */
    .table-responsive .price-table,
    .table-responsive .product-table,
    .table-responsive .live-prices-table,
    .product-table,
    .live-prices-table {
        min-width: 0;
        width: 100%;
        table-layout: auto;
        font-size: 0.92rem;
    }

    /* Make mega menus and dropdown panels flow in document on small devices */
    .products-mega-menu .mega-menu-panel,
    .catalog-mega-panel,
    .catalog-mega-menu,
    .catalog-mega-panel .catalog-mega-inner {
        position: static;
        width: 100%;
        box-shadow: none;
        background: transparent;
        border: 0;
        max-height: none;
        padding: 0;
    }

    /* Ensure category submenus don't escape viewport; they become accordion-like */
    .products-category-tree ul {
        position: static;
        display: none;
        margin: 0.25rem 0 0 0;
    }
    .products-category-tree li.active > ul,
    .products-category-tree li.open > ul {
        display: block;
    }

    /* Make persistent nav items more flexible on small screens */
    .products-mega-navbar .mega-nav {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fixed widgets should respect viewport width */
    .expert-card-banner,
    .chat-widget {
        right: 12px;
        left: auto;
        width: min(320px, calc(100vw - 24px));
    }
}

/* Extra-small phones: tighten table fonts and spacing */
@media (max-width: 480px) {
    .table-responsive .price-table,
    .product-table {
        font-size: 0.86rem;
    }

    .menu_side_area a.btn-main,
    .header-contact-buttons .btn-phone {
        padding: 0.45rem;
        font-size: 0.82rem;
    }
}

/* Modal safety: ensure modals fit on small viewports and are scrollable */
.modal {
    max-height: 90vh;
    overflow-y: auto;
}

.modal-dialog {
    max-width: min(96vw, 720px);
    margin: 1.75rem auto;
    width: 100%;
}

.modal-content {
    box-sizing: border-box;
}

.mobile-call-button {
    display: none;
}

@media (max-width: 767px) {
    .mobile-call-button {
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        display: flex;
        position: fixed;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + 84px);
        right: 14px;
        min-width: 142px;
        height: 48px;
        padding: 0 0.8rem;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 15px;
        background: rgba(20, 20, 24, 0.48);
        box-shadow: 0 0 14px rgba(207, 31, 31, 0.75), 0 8px 24px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #fff;
        font-size: 1.05rem;
        line-height: 1;
        text-decoration: none;
        z-index: 1001;
        transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease,
            gap 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-call-button:active {
        transform: scale(0.94);
    }

    .mobile-call-number {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        white-space: nowrap;
        max-width: 110px;
        overflow: hidden;
        opacity: 1;
        transition: max-width 0.25s ease, opacity 0.2s ease;
    }

    .mobile-call-button.is-collapsed {
        min-width: 48px;
        width: 48px;
        padding-right: 0;
        padding-left: 0;
        gap: 0;
    }

    .mobile-call-button.is-collapsed .mobile-call-number {
        max-width: 0;
        opacity: 0;
    }

    .modal-dialog {
        margin: 12px;
    }
    .modal-body {
        max-height: calc(80vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Header/Navbar mobile fixes: ensure main menu is visible, expandable and not clipped
   These overrides are intentionally specific and scoped to header.header-mobile and small screens
   so they don't affect the desktop layout. */
@media (max-width: 767px) {
    /* Default closed header: keep a compact height so menu is closed on load.
       JS (designesia.js) animates header.height to open/close the mobile menu, so
       setting a compact default here ensures the menu is closed until JS opens it. */
    header.header-mobile {
        height: 90px;
        overflow: hidden;
    }

    /* Ensure the hamburger toggle is visible and sits above other elements */
    #menu-btn {
        display: inline-block !important;
        position: relative !important;
        z-index: 220 !important;
    }

    /* Make the main menu a block-level vertical list and prevent clipping */
    header.header-mobile #mainmenu {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 210 !important;
        text-align: right !important;
        padding-right: 16px !important;
    }

    /* Ensure the UL contains its children fully */
    header.header-mobile #mainmenu ul {
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
    }

    /* Top-level items become full-width stacked items on mobile */
    header.header-mobile #mainmenu li {
        display: block !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    /* Submenus should expand when active (JS adds .open/.active) */
    header.header-mobile #mainmenu li ul {
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: 0 !important;
        margin: 0 !important;
    }

    /* Make menu links readable and tappable */
    header.header-mobile #mainmenu a {
        display: block !important;
        padding: 12px 8px !important;
        color: #fff !important;
    }

    /* Prevent any ancestor clipping (safeguard) */
    header.header-mobile .de-flex, header.header-mobile .de-flex-col, header.header-mobile .container {
        overflow: visible !important;
    }
}

/* Glass header when scrolled: make the smaller clone translucent and frosted */
header.transparent.clone.smaller {
    background: rgba(15, 15, 15, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile: keep jarallax background video clipped inside its section so it can never
   cause horizontal scroll. Jarallax sizes the video with its own cover math
   (inline max-width:none), so the source aspect ratio stays intact - no stretching.
   Scoped to small screens only: desktop layout remains untouched. */
@media (max-width: 767px) {
    .jarallax {
        overflow: hidden;
    }
}