/* ============================================================
   WeTrade Black & Orange — category-rail accent theme (global)
   White surfaces · black active states · orange #F47A20 accents
   ============================================================ */

:root {
    --wt-black: #0f0f0f;
    --wt-orange: #F47A20;
    --wt-orange-dark: #D2620F;
    --wt-orange-light: #FFA055;
    --wt-chip-bg: #f2f2f2;
    --wt-chip-hover: #e5e5e5;
}

/* ---------- Active / selected states: black + orange accent ---------- */
.chip-rail .cat-link.active,
.cat-sub-rail .cat-link.active,
.chip.active,
.nav-link.active,
.dropdown-item.active,
.prof-nav-item.active,
.prof-mobile-nav button.active,
.tab.active,
.tab-btn.active,
.filter-btn.active,
.filter-chip.active,
.subcat-link.active,
.rail-link.active,
.side-link.active,
.menu-item.active {
    background: #0f0f0f !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 #F47A20 !important;
}

.cat-sub-rail .cat-link.active i,
.chip.active i,
.nav-link.active i,
.dropdown-item.active i,
.prof-nav-item.active i,
.prof-mobile-nav button.active i,
.tab.active i,
.tab-btn.active i,
.filter-btn.active i,
.filter-chip.active i,
.subcat-link.active i,
.rail-link.active i,
.side-link.active i,
.menu-item.active i {
    color: #F47A20 !important;
}

/* Sidebar-style active items get a left orange bar instead of underline */
#sidebar .nav-link.active,
.sidebar .nav-link.active,
.prow .prof-nav-item.active,
.side-item.active,
.app-sidebar .mobile-category-item.active,
.app-sidebar .mobile-category-link.active {
    box-shadow: inset 3px 0 0 #F47A20 !important;
}

/* ---------- Drawer / sidebar nav items (home, store, etc.) ---------- */
.side-item,
.app-sidebar .mobile-category-item,
.app-sidebar .mobile-category-link {
    transition: background .2s ease, color .2s ease;
}
.side-item:hover,
.app-sidebar .mobile-category-item:hover,
.app-sidebar .mobile-category-link:hover {
    background: #f2f2f2 !important;
    color: #0f0f0f !important;
}
.side-item.active,
.app-sidebar .mobile-category-item.active,
.app-sidebar .mobile-category-link.active {
    background: #0f0f0f !important;
    color: #fff !important;
    font-weight: 600;
}
.side-item.active > i:first-child,
.app-sidebar .mobile-category-item.active > i:first-child,
.app-sidebar .mobile-category-link.active i {
    color: #F47A20 !important;
}
.side-section-title {
    color: #8a8a8a;
    letter-spacing: .06em;
}
.app-sidebar-head .nav-drawer-brand img { filter: none; }

/* ---------- Sidebar scrollbars: hidden until interaction ----------
   Space is always reserved (scrollbar-gutter) so revealing the thumb
   on hover/focus never shifts the sidebar layout. */
.app-sidebar-body,
#sidebar nav,
#sidebar .overflow-y-auto,
.prof-sidebar,
.prof-sidebar nav,
.category-sidebar,
.sidebar nav,
aside nav {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.app-sidebar-body::-webkit-scrollbar,
#sidebar nav::-webkit-scrollbar,
#sidebar .overflow-y-auto::-webkit-scrollbar,
.prof-sidebar::-webkit-scrollbar,
.prof-sidebar nav::-webkit-scrollbar,
.category-sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar,
aside nav::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.app-sidebar-body::-webkit-scrollbar-track,
#sidebar nav::-webkit-scrollbar-track,
#sidebar .overflow-y-auto::-webkit-scrollbar-track,
.prof-sidebar::-webkit-scrollbar-track,
.prof-sidebar nav::-webkit-scrollbar-track,
.category-sidebar::-webkit-scrollbar-track,
.sidebar nav::-webkit-scrollbar-track,
aside nav::-webkit-scrollbar-track {
    background: transparent;
}
.app-sidebar-body::-webkit-scrollbar-thumb,
#sidebar nav::-webkit-scrollbar-thumb,
#sidebar .overflow-y-auto::-webkit-scrollbar-thumb,
.prof-sidebar::-webkit-scrollbar-thumb,
.prof-sidebar nav::-webkit-scrollbar-thumb,
.category-sidebar::-webkit-scrollbar-thumb,
.sidebar nav::-webkit-scrollbar-thumb,
aside nav::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 3px;
}
.app-sidebar-body:hover::-webkit-scrollbar-thumb,
.app-sidebar-body:focus-within::-webkit-scrollbar-thumb,
#sidebar nav:hover::-webkit-scrollbar-thumb,
#sidebar nav:focus-within::-webkit-scrollbar-thumb,
#sidebar .overflow-y-auto:hover::-webkit-scrollbar-thumb,
#sidebar .overflow-y-auto:focus-within::-webkit-scrollbar-thumb,
.prof-sidebar:hover::-webkit-scrollbar-thumb,
.prof-sidebar:focus-within::-webkit-scrollbar-thumb,
.prof-sidebar nav:hover::-webkit-scrollbar-thumb,
.prof-sidebar nav:focus-within::-webkit-scrollbar-thumb,
.category-sidebar:hover::-webkit-scrollbar-thumb,
.category-sidebar:focus-within::-webkit-scrollbar-thumb,
.sidebar nav:hover::-webkit-scrollbar-thumb,
.sidebar nav:focus-within::-webkit-scrollbar-thumb,
aside nav:hover::-webkit-scrollbar-thumb,
aside nav:focus-within::-webkit-scrollbar-thumb {
    background: #d4d4d4 !important;
}
.app-sidebar-body::-webkit-scrollbar-thumb:hover,
#sidebar nav::-webkit-scrollbar-thumb:hover,
#sidebar .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.prof-sidebar::-webkit-scrollbar-thumb:hover,
.prof-sidebar nav::-webkit-scrollbar-thumb:hover,
.category-sidebar::-webkit-scrollbar-thumb:hover,
.sidebar nav::-webkit-scrollbar-thumb:hover,
aside nav::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3 !important;
}

/* ---------- Inactive chips/links: light gray like the rail ---------- */
.chip-rail .cat-link,
.cat-sub-rail .cat-link,
.chip,
.filter-chip,
.filter-btn {
    background: #f2f2f2;
    color: #0f0f0f;
    border-color: transparent;
}
.chip-rail .cat-link:hover,
.cat-sub-rail .cat-link:hover,
.chip:hover,
.filter-chip:hover,
.filter-btn:hover {
    background: #e5e5e5;
    color: #0f0f0f;
}

/* Top-bar category links (text style): black text + orange underline */
.cat-link.active {
    color: #0f0f0f !important;
    border-bottom-color: #F47A20 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.cat-link.active i { color: #F47A20 !important; }
.cat-link:hover i { color: #F47A20; }

/* ---------- Orange accents ---------- */
.btn-primary,
.btn-checkout,
.pv-buy,
.checkout-submit,
.ok-btn,
.confirm-btn.confirm {
    background: linear-gradient(180deg, #f7d797 0%, #F47A20 100%) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-checkout:hover,
.pv-buy:hover {
    background: linear-gradient(180deg, #ffd9a8 0%, #ff8c3b 100%) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus {
    border-color: #F47A20 !important;
    box-shadow: 0 0 0 3px rgba(244, 122, 32, 0.15) !important;
}

/* Search bars keep their normal frame on focus — the orange border /
   glow read as a square artifact inside the rounded container. */
.search-wrap:focus-within,
.search-box:focus-within,
.search-field:focus-within,
.prof-search-box:focus-within,
.mobile-search-field:focus-within {
    border-color: #0f0f0f !important;
    box-shadow: none !important;
}
.search-wrap input:focus,
.search-wrap select:focus,
.search-field input:focus,
.search-field select:focus,
.mobile-search-field input:focus,
.mobile-search-field select:focus,
.mobile-search-input:focus,
.prof-search-box input:focus,
.prof-search-box select:focus,
.search-box input:focus,
.search-box select:focus,
.search-input:focus {
    outline: none;
    box-shadow: none !important;
}
/* Fields with a visible resting border keep that color on focus. */
.search-wrap select:focus,
.search-cat:focus {
    border-color: var(--border-color, #e4e7ec) !important;
}
.mobile-search-input:focus,
.mobile-search-field input:focus {
    border-color: #e4e7ec !important;
}
.search-box input:focus {
    border-color: #dfe3ea !important;
}
.search-input:focus {
    border-color: #e2e8f0 !important;
}

/* ---------- Search bars: black & orange ---------- */
.search-wrap,
.search-box,
.search-field,
.prof-search-box,
.mobile-search-field {
    border-color: #0f0f0f !important;
}
.search-wrap button,
.search-field button,
.mobile-search-submit,
.search-box button,
.prof-search-box button {
    background: #0f0f0f !important;
    color: #fff !important;
}
.search-wrap button:hover,
.search-field button:hover,
.mobile-search-submit:hover,
.search-box button:hover,
.prof-search-box button:hover {
    background: #F47A20 !important;
}
.search-wrap button i,
.search-field button i,
.mobile-search-submit i,
.search-box button i,
.prof-search-box button i {
    color: #fff;
}
.search-wrap button:hover i,
.search-field button:hover i,
.mobile-search-submit:hover i,
.search-box button:hover i,
.prof-search-box button:hover i {
    color: #fff;
}
::selection {
    background: #F47A20;
    color: #fff;
}

/* ============================================================
   Smooth touch gliding for horizontal rails (global)
   - "x mandatory" snap made every flick stop dead on the next card,
     which felt heavy/sticky. "proximity" only nudges to a card when
     the swipe is already nearly there.
   - CSS "scroll-behavior: smooth" on the scroller turned touch flings
     into a slow animation on some mobile browsers — force it off.
     Arrow buttons still glide via scrollBy({behavior:'smooth'}).
   - overscroll-behavior-x keeps rail swipes from pulling the page.
   ============================================================ */
.category-products,
.featured-products,
.collection-products,
.categories-grid,
.categories-section .categories-grid,
.categories-section #categoriesGrid,
.chip-rail,
.cat-sub-rail,
.prof-mobile-nav,
.chip-row,
.product-view-thumbs,
[data-rail-scroll] {
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (pointer: coarse), (max-width: 768px) {
    .category-products,
    .featured-products,
    .collection-products,
    .categories-grid,
    .categories-section .categories-grid,
    .categories-section #categoriesGrid,
    .cat-sub-rail,
    .prof-mobile-nav,
    .chip-row,
    .product-view-thumbs,
    [data-rail-scroll] {
        scroll-behavior: auto !important;
    }
    /* Category rails: native momentum + snap for a professional feel */
    .chip-rail,
    .mobile-cat-rail {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .chip-rail::-webkit-scrollbar,
    .mobile-cat-rail::-webkit-scrollbar { display: none; }
    .chip-rail .cat-link,
    .mobile-cat-rail .mnt-chip,
    .mobile-cat-rail .mcr-item {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
}

/* ============================================================
   Top rails: compact medium height on mobile (global)
   Category chip rail, mobile cat rail and the profile tab rail
   were all ~46-50px tall with chunky chips. Standard commerce
   rails sit closer to 36-40px — trim chip padding + font so the
   rail stops eating vertical space. */
@media (max-width: 768px) {
    .chip-rail {
        padding: 4px 12px 6px !important;
        gap: 5px;
        min-height: 0 !important;
    }
    .chip-rail .cat-link {
        padding: 5px 12px !important;
        font-size: 0.76rem !important;
        gap: 5px;
        border-radius: 999px;
    }
    .chip-rail .cat-link i { font-size: 0.7rem !important; }
    .mobile-cat-rail {
        padding: 2px 12px 5px !important;
        gap: 5px;
        min-height: 0 !important;
    }
    .mnt-chip, .mcr-item {
        padding: 5px 12px !important;
        font-size: 0.74rem !important;
        gap: 5px;
        border-radius: 999px;
    }
    .mnt-chip i, .mcr-item i { font-size: 0.7rem !important; }
    .mnt-count { min-width: 14px; height: 14px; font-size: 0.57rem; }
    .prof-mobile-topbar .prof-mobile-nav {
        padding: 3px 12px 5px !important;
        gap: 5px !important;
    }
    .prof-mobile-topbar .prof-mobile-nav button,
    .prof-mobile-topbar .prof-mobile-nav .prof-mobile-nav-home {
        padding: 5px 12px !important;
        font-size: 0.74rem !important;
        gap: 5px;
        border-radius: 999px;
    }
    .prof-mobile-topbar .prof-mobile-nav button i,
    .prof-mobile-topbar .prof-mobile-nav .prof-mobile-nav-home i { font-size: 0.7rem !important; }
}

/* ============================================================
   Mobile footer: compact, standard spacing (global)
   The 2-col mobile footer was stretched with 18-20px gaps, 20px
   padding, a 64px logo and tall min-heights. This tightens every
   block back to standard density on all pages using .wt-footer.
   ============================================================ */
@media (max-width: 768px) {
    .wt-footer { min-height: 0; }
    .wt-footer-main {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 16px !important;
        padding: 14px 16px !important;
        min-height: 0;
    }
    .wt-footer-col h3 { font-size: 0.82rem !important; margin-bottom: 6px; }
    .wt-footer-col ul li { margin-bottom: 2px; }
    .wt-footer-col ul li a { font-size: 0.76rem !important; line-height: 1.3; }
    .wt-footer-divider { padding: 10px 16px !important; min-height: 0; }
    .wt-footer-logo { margin-bottom: 6px; }
    .wt-footer-logo img { height: 44px; }
    .wt-footer-lang { padding: 4px 12px; font-size: 0.74rem; }
    .wt-footer-bottom { padding: 10px 16px !important; min-height: 0; }
    .wt-footer-bottom-links { gap: 4px 14px; margin-bottom: 6px; }
    .wt-footer-social { gap: 8px; margin-top: 6px; }
    .wt-footer-social a { width: 30px; height: 30px; font-size: 1rem; }
}

/* ================= WeTrade standard footer (all pages) =================
   Amazon-style 4-column footer: bold links with a slanted arrow (›),
   tight column spacing, centered as a group on desktop. */
.wt-footer-main {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 200px)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    gap: 16px 32px !important;
    padding: 26px 24px !important;
    text-align: left !important;
}
.wt-footer-col { min-width: 0; }
.wt-footer-col h3 {
    text-align: left !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
    margin-bottom: 10px !important;
    color: #1f2937 !important;
}
.wt-footer-col ul li { margin-bottom: 6px !important; }
.wt-footer-col ul li a {
    display: inline-flex !important;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #4b5563 !important;
    text-align: left !important;
}
.wt-footer-col ul li a::before {
    content: '›';
    font-size: 0.95rem;
    font-weight: 800;
    color: #F47A20;
    line-height: 1;
    transition: transform 0.15s ease;
}
.wt-footer-col ul li a:hover { color: #F47A20 !important; text-decoration: none !important; }
.wt-footer-col ul li a:hover::before { transform: translateX(3px); }

@media (max-width: 768px) {
    .wt-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 20px !important;
        padding: 16px 14px !important;
    }
    .wt-footer-col h3 { font-size: 0.82rem !important; margin-bottom: 7px !important; }
    .wt-footer-col ul li { margin-bottom: 4px !important; }
    .wt-footer-col ul li a { font-size: 0.74rem !important; }
}

/* Mobile footer alignment fix — links align flush-left with a
   consistent arrow gutter so wrapped lines don't zigzag. */
@media (max-width: 768px) {
    .wt-footer-main { justify-items: stretch !important; }
    .wt-footer-col { text-align: left !important; width: 100%; }
    .wt-footer-col h3,
    .wt-footer-col ul { text-align: left !important; }
    .wt-footer-col ul li a {
        display: flex !important;
        align-items: flex-start;
        gap: 7px;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
    .wt-footer-col ul li a::before {
        flex: 0 0 auto;
        width: 9px;
        line-height: 1.35;
    }
}