/* Desktop Layout Fixes */
@media (min-width: 1025px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .banner-title {
        font-size: 36px !important;
    }

    /* Fix alignment of "Супер цены" header to match "Лучшие предложения" */
    .section-header {
        padding-left: 20px;
        /* matches .products-grid padding */
    }

    .products-section>.section-header {
        padding-left: 0;
        /* already inside a container with padding, reset */
    }

    /* ─────────────────────────────────────────────────────────
       NAVBAR FIX — search bar overlapping header buttons
       Root cause: styles.css sets .search-box { flex: 0 0 600px }
       which is rigid and cannot shrink. Meanwhile .header-actions
       had flex-shrink:1, so it compressed behind the search bar
       on monitors narrower than ~1400px.
       Fix: make search flexible (grows/shrinks), lock header-actions.
       ───────────────────────────────────────────────────────── */
    .search-box {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 160px !important;
        max-width: 500px !important;
    }

    .header-actions {
        flex-shrink: 0 !important;
    }
}

/* On medium desktops (1025–1380px) — narrow search even more */
@media (min-width: 1025px) and (max-width: 1380px) {
    .search-box {
        max-width: 340px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   TABLET / HIGH-ZOOM DESKTOP FIX (769–1024px)

   Problem 1 — Duplicate header row:
   At ≤1024px, .mobile-catalog-row becomes visible (Каталог + icons).
   BUT .header-search-wrapper (logo + badge + search + desktop buttons)
   was ALSO still visible, causing two full rows simultaneously.
   Fix: hide the desktop-only parts; keep only the search box visible.

   Problem 2 — Login button icon invisible (black on black):
   responsive.css sets .login-btn svg { stroke: var(--text-primary) }
   at ≤1024px. But the login button has dark accent background here,
   so dark stroke icon is invisible. Fix: force white stroke.
   ───────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Hide desktop-only header elements — mobile-catalog-row handles nav */
    .logo,
    .auto-delivery-badge,
    .header-actions {
        display: none !important;
    }

    /* Make search box full-width since it's the only item left in wrapper */
    .search-box {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Login button: dark accent background → icon must be white */
    .login-btn svg {
        stroke: white !important;
    }
}

/* Modal Styles override/fix */
/* Modal Styles override/fix */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active,
.modal.show,
.modal-overlay.active,
.modal-overlay.show {
    display: flex;
}

/* Fix for when .modal is used as content wrapper inside overlay */
.modal-overlay .modal {
    position: relative;
    display: block;
    /* Reset display from none */
    width: 100%;
    max-width: 500px;
    background: var(--bg-card, #fff);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    height: auto;
    /* Reset height from 100% */
}

/* Keep .modal as overlay if used standalone (legacy) */
body>.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-card, #fff);
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
}

.modal-body {
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form Styles for Modals */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-input,
.form-select,
.form-textarea,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="date"],
.modal select,
.modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-input, #fff);
    font-size: 0.875rem;
    box-sizing: border-box;
    /* Ensure padding doesn't overflow */
    margin-top: 4px;
    /* Add slight spacing from label */
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

/* Button Styles if missing */
.btn-primary {
    background-color: var(--accent, #6366f1);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary, #111827);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
}

/* =========================================================
   MOBILE-ONLY FIXES (≤ 768px)
   Desktop is NOT touched — all rules are inside this query
   ========================================================= */
@media (max-width: 768px) {

    /* ── 1. BANNER ARROWS ─────────────────────────────────
       Problem: 48px circles at left:20px / right:20px eat
       into the text on a narrow banner.
       Fix: shrink to 32px, drop opacity, push to the very
       edge (4px), add a faint blur backdrop.
       On very narrow screens (< 400px) hide them entirely
       and let the dots + swipe do the job.            */
    .banner-nav-btn {
        width: 32px !important;
        height: 32px !important;
        opacity: 0.75;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(6px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    .banner-nav-btn.prev {
        left: 4px !important;
    }

    .banner-nav-btn.next {
        right: 4px !important;
    }

    .banner-nav-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ── 2. CATALOG DRAWER — CATEGORIES GRID ─────────────
       Problem: sidebar-nav is flex-column so items stack
       single-file; odd count means last item sits alone
       in the centre (visual imbalance).
       Fix: 2-column grid, every item gets equal space.  */
    .sidebar-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px !important;
    }

    .sidebar-link {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 10px;
        background: var(--bg-secondary, #f3f4f6);
        white-space: normal !important;
        /* Allow wrapping */
        line-height: 1.2 !important;
        min-height: 48px !important;
        /* Proper touch target */
        word-break: break-word;
    }

    .sidebar-link span:not(.sidebar-link-icon) {
        flex: 1;
    }

    .sidebar-link.active {
        background: var(--accent, #6366f1) !important;
        color: #fff !important;
    }

    /* ── 3. PRODUCT PAGE BREADCRUMB ──────────────────────
       Problem: "Интернет-магазин › Графика и дизайн ›
       Canva PRO | Подписка 1/3/6/12 месяцев" wraps to
       multiple ugly lines (or gets cut off by ellipsis).
       Fix: render it as a horizontally-scrollable pill,
       hide long middle segments with a compact ellipsis.
       The last item (product name) is bold + accent.    */
    .breadcrumb {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        scrollbar-width: none;
        gap: 2px;
        padding: 6px 0 !important;
        font-size: 11.5px !important;
        color: var(--text-muted, #6b7280);
        max-width: 100% !important;
        text-overflow: unset !important;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* First link = "Интернет-магазин" — shorten to icon/home */
    .breadcrumb>*:first-child {
        flex-shrink: 0;
    }

    /* Middle items can shrink & get ellipsis */
    .breadcrumb a,
    .breadcrumb span {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
    }

    /* Last item = product name — slightly bolder, never truncated */
    .breadcrumb>*:last-child {
        flex-shrink: 0;
        font-weight: 600;
        color: var(--text-primary, #111827);
        max-width: 200px;
    }

    /* Separator between breadcrumb parts */
    .breadcrumb-separator {
        flex-shrink: 0;
        margin: 0 2px;
        opacity: 0.5;
    }
}

/* On very narrow phones — completely hide banner arrows, rely on swipe */
@media (max-width: 400px) {
    .banner-nav-btn {
        display: none !important;
    }
}

/* =========================================================
   FOOTER LINKS STYLING
   ========================================================= */

/* Make footer links look like buttons */
.footer-links {
    gap: 12px;
    /* Reduce default gap */
}

.footer-links a,
.footer-links span {
    padding: 8px 16px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    /* Slightly rounded corners */
    font-size: 13px !important;
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease;
    display: inline-block;
    /* Ensure padding applies correctly */
}

.footer-links a:hover,
.footer-links span:hover {
    background: var(--bg-tertiary, #e5e7eb);
    transform: translateY(-1px);
}

/* Mobile specific styling */
@media (max-width: 768px) {
    .footer-links {
        gap: 8px !important;
        /* Even smaller gap on mobile */
        margin-bottom: 24px !important;
        /* Adjust spacing below links */
    }

    .footer-links a,
    .footer-links span {
        padding: 6px 12px;
        /* Slightly smaller padding on mobile */
        font-size: 12px !important;
    }

    /* Add bottom padding to footer to avoid chat widget overlap */
    .footer {
        padding-bottom: 80px !important;
    }
}

/* Hide ONLY the floating/duplicate .mobile-menu-btn outside the header
   (the one at the bottom of <body>, used as a fallback fixed button).
   The button INSIDE .mobile-catalog-row must stay visible on mobile. */
body>.mobile-menu-btn {
    display: none !important;
}

/* Ensure Catalog button inside the mobile header row is visible on mobile */
@media (max-width: 1024px) {
    .mobile-catalog-row .mobile-menu-btn {
        display: inline-flex !important;
    }

    /* =====================================================
       SIDEBAR: Mobile dropdown (falls from top, below header)
       position:fixed + top задаётся через JS = header.bottom
       Перекрывает контент поверх всех слоёв
       ===================================================== */
    .main-layout {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        position: fixed !important;
        /* top задаётся через JS = header.getBoundingClientRect().bottom */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 80vh !important;
        height: fit-content !important;
        align-self: start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 20px 20px !important;
        border: none !important;
        z-index: 1999 !important;
        /* Hidden: pulled up above header */
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-12px) !important;
        transition: opacity 0.25s ease, transform 0.25s ease !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    }

    .sidebar.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* Show the X close button */
    .sidebar-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        cursor: pointer;
        transition: background 0.2s;
    }

    .sidebar-close:hover {
        background: var(--bg-hover);
    }

    /* Sidebar nav: 2-column grid on mobile */
    .sidebar-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .sidebar-link {
        display: flex !important;
        align-items: center !important;
        padding: 12px !important;
        /* Slightly more padding */
        border-radius: 12px !important;
        font-size: 13px !important;
        /* Slightly smaller for better fit */
        min-height: 52px !important;
        /* Better touch target */
        white-space: normal !important;
        line-height: 1.2 !important;
    }
}