/* ==========================================================================
 * CGAxis Search Bridge — custom overrides
 * Edit this file to tweak the archive page CSS.
 * ========================================================================== */

/* Make active filter items clearly visible — not just a color shift */
.cgx-spa .filter-item.active {
    background: rgba(22, 34, 255, 0.08);
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    color: #1622ff !important;
    font-weight: 700;
}

.cgx-spa .chip {
    gap: 5px;
    padding: 6px 10px;
    background: #1622ff !important;
    color: #FFF;
    border: 1px solid rgba(22, 34, 255, 0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    line-height: 12px;
}

.cgx-spa .product-pill.format {
    background: #1622ff;
    border-color: #1622ff;
    color: #FFF;
}

.cgx-spa .product-pill {    
    font-weight: 800;
}

.cgx-spa .filter-item.active::before {
    content: "\2713";
    display: inline-block;
    margin-right: 6px;
    color: #1622ff;
    font-weight: bold;
}

.cgx-spa .product-image,
.cgx-spa .sidebar {
    background: transparent;
}

.cgx-spa .sort-inline select {
    padding: 0 5px;
    height: 30px;
}

.cgx-spa .search-input:focus,
.cgx-spa .search-input-wrapper:focus-within {
    box-shadow: none;
}

.cgx-spa .product-count {
    font-size: 1.2rem;
}

.cgx-spa .logo {
    padding: 21px 30px 21px 0;
}
/* ========================================================================
 * 2026-04-15: header search field + image-search icon-only + mobile sidebar
 * ======================================================================== */

/* Larger search input: ~25px font, beefier paddings */
.cgx-spa .search-input-wrapper {
    padding: 5px 15px !important;
    border-radius: 30px !important;
}
.cgx-spa .search-input {
    font-size: 25px !important;
    line-height: 1.2 !important;
    padding: 10px 4px !important;
    font-weight: 600 !important;
}
.cgx-spa .search-input::placeholder {
    font-size: inherit;
    opacity: 0.6;
}

/* Icon-only image search button — square, matches enlarged input */
.cgx-spa .image-search-btn {
    width: 52px;
    height: 52px;
    padding: 0 !important;
    margin-left: 8px !important;
    gap: 0 !important;
    font-size: 0 !important;
    border-radius: 12px !important;
    flex-shrink: 0;
}
.cgx-spa .image-search-btn svg {
    width: 26px;
    height: 26px;
}

/* Sidebar close button — visible only on mobile, top-right of drawer */
.cgx-spa .sidebar-close-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-primary);
    z-index: 10;
}
.cgx-spa .sidebar-close-btn:hover {
    background: rgba(22, 34, 255, 0.08);
    color: var(--color-primary);
}

/* ==========================================================================
 * Mobile overrides (<=768px): cap drawer width, force z-index, show close X
 * ========================================================================== */
@media (max-width: 768px) {
    .cgx-spa .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: min(320px, 85vw) !important;
        max-width: 85vw !important;
        flex: 0 0 auto !important;
        z-index: 10000 !important;
        transform: translateX(-100%);
        transition: transform 280ms ease-out;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
        overflow-y: auto !important;
        padding-top: 56px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .cgx-spa .sidebar {
        background: var(--color-bg, #fff) !important;
    }
    .cgx-spa .sidebar.open {
        transform: translateX(0) !important;
    }
    .cgx-spa .sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.45) !important;
        z-index: 9999 !important;
    }
    .cgx-spa .sidebar-close-btn {
        display: block;
    }
    /* Shrink search input slightly on mobile so 25px does not overflow */
    .cgx-spa .search-input {
        font-size: 20px !important;
    }
    .cgx-spa .search-input-wrapper {
        padding: 8px 12px !important;
    }
    .cgx-spa .image-search-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .cgx-spa .image-search-btn svg {
        width: 22px;
        height: 22px;
    }
}

/* ========================================================================
 * 2026-04-15 round 2: mobile search row + close button placement
 * ======================================================================== */

/* Keep search input + image button on ONE row on all mobile sizes.
 * The original archive.php @media 480 stacks them (flex-direction: column)
 * — override that so the icon sits on the right of the input. */
@media (max-width: 480px) {
    .cgx-spa .search-input-wrapper {
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px 12px !important;
        gap: 6px;
    }
    .cgx-spa .image-search-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    .cgx-spa .image-search-btn svg {
        width: 20px;
        height: 20px;
    }
    .cgx-spa .search-input {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        font-size: 18px !important;
    }
}

/* Close button: move OUTSIDE the sidebar, to the right edge of the drawer.
 * No more wasted vertical space at the top of the filters list.
 * On mobile only; desktop keeps display:none. */
@media (max-width: 768px) {
    .cgx-spa .sidebar {
        padding-top: 0 !important;  /* no more space reserved for inner X */
    }
    .cgx-spa .sidebar-close-btn {
        /* pinned to the viewport, just right of the drawer */
        position: fixed !important;
        top: 12px !important;
        right: auto !important;
        left: calc(min(320px, 85vw) + 8px) !important;
        width: 42px !important;
        height: 42px !important;
        background: #fff !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 10px !important;
        font-size: 28px !important;
        z-index: 10001 !important;
        display: none;  /* shown via .visible below */
    }
    /* Only render the X when the drawer is open */
    .cgx-spa .sidebar.open ~ .sidebar-close-btn,
    .cgx-spa .sidebar.open .sidebar-close-btn { display: none; }
}
/* Tie close-button visibility to the backdrop being visible — simplest hook */
.cgx-spa .sidebar-backdrop.visible ~ * .sidebar-close-btn { display: block; }

/* ========================================================================
 * 2026-04-15 round 3: infinite scroll — hide the Load More button, replace
 * with a thin pulsing spinner in the same container so the IntersectionObserver
 * sentinel is still visible in the layout.
 * ======================================================================== */
.cgx-spa .load-more-btn {
    /* Replace button visuals with a centered spinner; keep it clickable as
     * fallback for browsers without IntersectionObserver. */
    all: unset !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto !important;
    border: 3px solid var(--color-border) !important;
    border-top-color: var(--color-primary) !important;
    border-radius: 50% !important;
    animation: cgx-spin 0.9s linear infinite !important;
    cursor: default !important;
    font-size: 0 !important;
    color: transparent !important;
}
.cgx-spa .load-more-btn:disabled {
    opacity: 1 !important;
}
@keyframes cgx-spin {
    to { transform: rotate(360deg); }
}
.cgx-spa .load-more-container {
    padding: 28px 0 !important;
    min-height: 80px;
}

/* ========================================================================
 * 2026-04-15 round 4: pin sidebar on desktop as user scrolls
 * ------------------------------------------------------------------------
 * The SPA header is sticky at top:0 with z-index:100 and measures roughly
 * 110–130px tall (search input + padding + optional chips row). We pin the
 * sidebar just below it so it never overlaps the search bar.
 * ======================================================================== */
@media (min-width: 769px) {
    .cgx-spa .sidebar {
        position: sticky !important;
        top: 162px !important;               /* 70 theme menu + 115 SPA header */
        align-self: flex-start !important;   /* don stretch in flex:row parent */
        max-height: calc(100vh - 205px) !important;
        overflow-y: auto !important;         /* internal scroll if taller than viewport */
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }
    .cgx-spa .sidebar::-webkit-scrollbar { width: 6px; }
    .cgx-spa .sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
}

/* ========================================================================
 * 2026-04-15 round 5: sticky SPA header on scroll
 * ------------------------------------------------------------------------
 * archive.php line 406 forces `.header { position: relative }` to play nice
 * with theme chrome. Re-enable sticky here — later in cascade so we win.
 * z-index is bumped above the sidebar (which is sticky too at top:120px).
 * Opaque background ensures product cards do not ghost through while scrolling.
 * ======================================================================== */
.cgx-spa .header {
    position: sticky !important;
    z-index: 150 !important;
    background: var(--color-bg) !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}
/* Desktop: theme menu is fixed at top, 70px tall — stick right below it */
@media (min-width: 769px) {
    .cgx-spa .header { top: 70px !important; }
    body.admin-bar .cgx-spa .header { top: 102px !important; }  /* +32 admin bar */
}
/* Mobile: theme header is hidden by cgaxis-mobile-nav, stick to viewport top */
@media (max-width: 768px) {
    .cgx-spa .header { top: 0 !important; }
    body.admin-bar .cgx-spa .header { top: 46px !important; }   /* WP admin bar mobile */
}

/* ========================================================================
 * 2026-04-15 round 5b: unblock position:sticky up the ancestor chain.
 * ------------------------------------------------------------------------
 * position:sticky binds to the nearest scrollable ancestor. If ANY ancestor
 * has `overflow: hidden/auto/scroll`, sticky snaps to THAT container instead
 * of the viewport and stops working on window scroll. Astra/Elementor themes
 * commonly set `body { overflow-x: hidden }` which silently kills it.
 * Force-clear the chain so the SPA header can stick to the viewport.
 * `overflow: clip` (where supported) prevents horizontal overflow without
 * creating a scroll-port, which is exactly what we want.
 * ======================================================================== */
html, body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}
main.main-content,
.site, #page, .ast-container, .site-content,
.elementor, .elementor-section, .elementor-section-wrap,
.elementor-widget-wrap, .elementor-element {
    overflow: visible !important;
}
.cgx-spa, .cgx-spa #app, .cgx-spa .container, .cgx-spa .main-content {
    overflow: visible !important;
}

/* ========================================================================
 * 2026-04-15 round 5c: offset sticky tops when WP admin bar is showing.
 * Logged-in admins see `<body class="admin-bar">` with a 32px fixed toolbar
 * at top on >782px screens, which pushes the entire page down — all our
 * sticky offsets have to bump to compensate.
 * ======================================================================== */
@media (min-width: 769px) {
    body.admin-bar .cgx-spa .sidebar {
        top: 197px !important;               /* 32 admin bar + 70 theme menu + 115 SPA header */
        max-height: calc(100vh - 237px) !important;
    }
}



/* ========================================================================
 * 2026-04-15 round 6: proper chevron SVGs for sidebar section toggles.
 * Base SVG is the "closed" caret (pointing down). Rotate 180° when the
 * section is OPEN (no .collapsed class on the span). Kill the old -90°
 * rotate from archive.php which was designed for the ▶ character.
 * ======================================================================== */
.cgx-spa .sidebar-title-toggle,
.cgx-spa .sidebar-title-toggle.collapsed {
    transform: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}
.cgx-spa .sidebar-title-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}
.cgx-spa .sidebar-title-toggle:not(.collapsed) svg {
    transform: rotate(180deg);   /* flip down→up when section is open */
}

/* ========================================================================
 * 2026-04-15 round 7: closing border at the bottom of each sidebar section.
 * When a section is expanded, the filter list used to hang off the bottom
 * with no visual boundary before the next section title. Add a border to
 * `.sidebar-section` itself so both collapsed and expanded sections close
 * with the same 1px line.
 * ======================================================================== */
.cgx-spa .sidebar-section {
    border-bottom: 1px solid var(--color-border);
}
.cgx-spa .sidebar-section:last-of-type {
    border-bottom: none;  /* no bottom border on the very last section */
}


/* ========================================================================
 * 2026-04-15 round 8: kill the title border so collapsed sections do not
 * show a double 2px line at the bottom (title + section both had 1px).
 * ======================================================================== */
.cgx-spa .sidebar-title {
    border-bottom: 0 !important;
}

/* ========================================================================
 * 2026-04-15 round 9: long filter labels wrap correctly.
 * Button elements default to text-align:center, so long names ("Curtains
 * And Shutters") wrapped centered with the counter hanging alone. Force
 * left-align, let the name span consume flex slack, let the counter stay
 * pinned top-right, and use a comfier line-height for wrapped rows.
 * ======================================================================== */
.cgx-spa .filter-item {
    text-align: left !important;
    gap: 8px;
    align-items: flex-start !important;
    line-height: 1.3 !important;
}
.cgx-spa .filter-item > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.cgx-spa .filter-count {
    flex-shrink: 0;
    padding-top: 1px;  /* nudge counter to align with first line of label */
}

/* ========================================================================
 * 2026-04-16: force 2-column product grid on mobile.
 * The desktop override uses minmax(220px, 1fr) which on narrow phones
 * (<440px) collapses to 1 column. Force 2 columns with smaller gap.
 * ======================================================================== */
@media (max-width: 768px) {
    .cgx-spa .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* 2026-04-16: hide the inline FILTERS button on mobile — bottom nav has it */
@media (max-width: 768px) {
    .cgx-spa .mobile-filter-btn {
        display: none !important;
    }
}

/* ========================================================================
 * 2026-04-16: NEW badge (same as cgaxis.com main site, 14-day window)
 * ======================================================================== */
.cgx-spa .product-card {
    position: relative;
}
.cgx-spa .cgaxis-itsnew {
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    pointer-events: none;
}

/* ========================================================================
 * 2026-04-16: transparent card backgrounds + dark/light mode
 * ======================================================================== */

/* Transparent card backgrounds everywhere */
.cgx-spa .product-card {
    background: transparent !important;
}

/* ── Dark mode color overrides ── */
.cgx-spa.dark {
    --color-primary: #4d5dff;
    --color-bg: #1a1a2e;
    --color-bg-sidebar: #16213e;
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #999;
    --color-border: #2a2a4a;
}
.cgx-spa.dark .header {
    background: #1a1a2e !important;
}
.cgx-spa.dark .search-input-wrapper {
    background: #16213e !important;
    border-color: #2a2a4a !important;
}
.cgx-spa.dark .search-input {
    color: #e8e8e8 !important;
}
.cgx-spa.dark .search-input::placeholder {
    color: #777 !important;
}
.cgx-spa.dark .sidebar {
    background: #16213e !important;
    border-color: #2a2a4a !important;
}

.cgx-spa.dark .container {
    background: #16213e !important;
}
.cgx-spa.dark .content-header {
    border-color: #2a2a4a !important;
}
.cgx-spa.dark .sort-inline select {
    background: #1a1a2e !important;
    color: #e8e8e8 !important;
    border-color: #2a2a4a !important;
}
.cgx-spa.dark .product-image {
    background: transparent !important;
}
.cgx-spa.dark .product-name-link {
    color: #e8e8e8 !important;
}
.cgx-spa.dark .product-download {
    color: var(--color-primary) !important;
}
.cgx-spa.dark .sidebar-title {
    color: #e8e8e8 !important;
    border-color: #2a2a4a !important;
}
.cgx-spa.dark .sidebar-section {
    border-color: #2a2a4a !important;
}
.cgx-spa.dark .filter-item {
    color: #ccc !important;
}
.cgx-spa.dark .filter-item:hover,
.cgx-spa.dark .filter-item.active {
    color: var(--color-primary) !important;
}
.cgx-spa.dark .filter-item.active {
    background: rgba(77,93,255,0.12) !important;
}
.cgx-spa.dark .clear-filters-btn {
    color: #999 !important;
    border-color: var(--color-primary, #4d5dff) !important;
}
.cgx-spa.dark .load-more-btn {
    border-color: var(--color-primary) !important;
    border-top-color: var(--color-primary) !important;
}
.cgx-spa.dark .chip {
    background: rgba(77,93,255,0.15) !important;
    color: var(--color-primary) !important;
    border-color: rgba(77,93,255,0.3) !important;
}
.cgx-spa.dark .image-search-btn {
    border-color: #2a2a4a !important;
    color: #999 !important;
}
.cgx-spa.dark .image-search-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Theme toggle button */
.cgx-spa .theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.2s;
    flex-shrink: 0;
}
.cgx-spa .theme-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Dark mode toggle in header — update style for dark mode */
.cgx-spa.dark .theme-toggle {
    background: #222244;
    border-color: #2a2a4a;
    color: #ffd43b;
}

/* Fix dark mode: main content bg + logo/piorun bg */
.cgx-spa.dark .main-content,
.cgx-spa.dark .content-grid {
    background: #1a1a2e !important;
}
.cgx-spa.dark .logo {
    background-color: transparent !important;
}

/* Bigger fonts in empty/error state messages */
.cgx-spa .state-message-icon { font-size: 4rem !important; }
.cgx-spa .state-message h2 { font-size: 2rem !important; }
.cgx-spa .state-message p { font-size: 1.1rem !important; max-width: 500px !important; }
.cgx-spa .suggestion-tag { font-size: 0.95rem !important; padding: 8px 18px !important; }

/* Image search modal — dark mode + fix scrollbar */
.cgx-spa.dark .modal-overlay .modal {
    background: #1a1a2e !important;
    border-color: #2a2a4a !important;
    color: #e8e8e8 !important;
}
.cgx-spa.dark .modal-overlay .modal h3,
.cgx-spa.dark .modal-overlay .modal label {
    color: #e8e8e8 !important;
}
.cgx-spa.dark .drag-drop-zone {
    background: #16213e !important;
    border-color: #2a2a4a !important;
    color: #999 !important;
}
.cgx-spa.dark .drag-drop-zone p {
    color: #ccc !important;
}
.cgx-spa.dark .drag-drop-zone small {
    color: #777 !important;
}
.cgx-spa.dark .btn-primary {
    background: #4d5dff !important;
}
.cgx-spa.dark .modal-close {
    color: #999 !important;
}
.cgx-spa.dark .modal-close:hover {
    color: #e8e8e8 !important;
}

/* Remove right scrollbar on both modes */
.cgx-spa .content-grid,
.cgx-spa .sidebar,
.cgx-spa .main-content,
.cgx-spa #app {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.cgx-spa .content-grid::-webkit-scrollbar,
.cgx-spa .sidebar::-webkit-scrollbar,
.cgx-spa .main-content::-webkit-scrollbar,
.cgx-spa #app::-webkit-scrollbar {
    display: none !important;
}

/* Modal — fix white strip on right + border-radius */
.cgx-spa .modal-overlay .modal {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    max-width: 500px !important;
    width: 90vw !important;
}
.cgx-spa.dark .modal-overlay .modal {
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

/* Bigger fonts in image search modal */
.cgx-spa .modal-overlay .modal h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}
.cgx-spa .drag-drop-zone p {
    font-size: 16px !important;
    font-weight: 500 !important;
}
.cgx-spa .drag-drop-zone small {
    font-size: 13px !important;
}
.cgx-spa .btn-primary {
    font-size: 16px !important;
    padding: 14px !important;
}
.cgx-spa .modal-close {
    font-size: 28px !important;
}

/* Fix: correct selectors for modal fonts */
.cgx-spa .modal-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}
.cgx-spa .drag-drop-text {
    font-size: 16px !important;
    font-weight: 500 !important;
}
.cgx-spa .drag-drop-subtext {
    font-size: 13px !important;
}
.cgx-spa .drag-drop-icon {
    font-size: 40px !important;
}
.cgx-spa .modal-close {
    font-size: 28px !important;
    width: 36px !important;
    height: 36px !important;
}