/*
Theme Name: SportZone
Theme URI:
Author: SportZone
Author URI:
Description: Custom WordPress theme for SportZone sports ecommerce
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sportzone
*/

/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    background: #f9f9f9;
    line-height: 1.5;
}
.login-prompt i {
    font-size: 18px !important;
    color: #ddd;
    display: contents !important;
    margin-bottom: 16px;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ============ PAGE TRANSITIONS ============ */
main, .page-banner, .hero-slider, .cart-wrapper, .wishlist-wrapper,
.orders-section, .products-section, .shop-wrapper, .ps-section,
.account-wrapper {
    animation: pageEnter 0.4s ease-out;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered card animations */
.product-card, .wishlist-card, .order-card, .cart-item {
    animation: cardEnter 0.35s ease-out both;
}
.product-card:nth-child(1), .wishlist-card:nth-child(1), .order-card:nth-child(1), .cart-item:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2), .wishlist-card:nth-child(2), .order-card:nth-child(2), .cart-item:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3), .wishlist-card:nth-child(3), .order-card:nth-child(3), .cart-item:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4), .wishlist-card:nth-child(4), .order-card:nth-child(4), .cart-item:nth-child(4) { animation-delay: 0.2s; }
.product-card:nth-child(n+5), .wishlist-card:nth-child(n+5) { animation-delay: 0.25s; }
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth link transitions */
a, button { transition: color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; }

/* Image hover zoom on product cards */
.product-image img, .card-image img, .rv-card-img img {
    transition: transform 0.4s ease;
}
.product-card:hover .product-image img,
.wishlist-card:hover .card-image img,
.rv-card:hover .rv-card-img img {
    transform: scale(1.08);
}

/* ============ TOP BAR ============ */
.top-bar {
    background: #2d0a0a;
    color: #ccc;
    font-size: 11px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.marquee-wrap { flex: 1; overflow: hidden; margin-right: 20px; }
.marquee {
    display: flex;
    animation: marquee 25s linear infinite;
    white-space: nowrap;
}
.marquee span { padding: 0 16px; color: #e0e0e0; font-weight: 400; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 16px; }
.marquee span::after { content: '\2022'; color: rgba(255,255,255,0.25); font-size: 6px; }
.marquee span strong { color: #B80102; font-weight: 600; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.social-icons { display: flex; gap: 14px; flex-shrink: 0; }
.social-icons a { color: #999; font-size: 12px; transition: color 0.2s; }
.social-icons a:hover { color: #B80102; }

/* ============ HEADER ============ */
.header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.header .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 70px;
    gap: 24px;
}
.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo img, .custom-logo-link img.custom-logo { width: 191px !important; height: auto !important; max-height: 66px; object-fit: contain; }
.logo-text { font-size: 20px; font-weight: 700; color: #2d0a0a; letter-spacing: -0.5px; }
.logo-text span { color: #B80102; }
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    padding: 6px;
}
.nav-close { display: none; }
.main-nav { flex: 1; }
.main-nav > ul { display: flex; gap: 2px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px; font-size: 12.5px; font-weight: 500;
    color: #444; border-radius: 6px; transition: all 0.2s; white-space: nowrap;
}
.main-nav > ul > li > a:hover { background: #f5f5f5; color: #2d0a0a; }
.main-nav > ul > li > a i.fa-chevron-down { font-size: 8px; color: #999; }
.dropdown {
    position: absolute; top: 100%; left: 0; background: #fff;
    min-width: 200px; border: 1px solid #eee; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 8px 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all 0.2s; z-index: 200;
}
.main-nav > ul > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
    display: block; padding: 8px 18px; font-size: 12px;
    color: #555; transition: all 0.15s;
}
.dropdown li a:hover { background: #f8f8f8; color: #B80102; padding-left: 22px; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.search-box {
    display: flex; align-items: center; background: #f5f5f5;
    border-radius: 8px; padding: 0 12px; height: 34px; width: 180px;
    border: 1px solid transparent; transition: all 0.2s;
}
.search-box:focus-within { border-color: #ddd; background: #fff; width: 220px; }
.search-box input {
    border: none; background: none; outline: none;
    font-size: 12px; font-family: inherit; color: #333; width: 100%;
}
.search-box input::placeholder { color: #aaa; }
.search-box i { color: #999; font-size: 12px; margin-right: 8px; }
.mobile-search { display: none; }
.btn-login, .btn-signup {
    padding: 6px 14px; font-size: 11.5px; font-weight: 500;
    border-radius: 6px; border: none; transition: all 0.2s;
}
.btn-login { background: none; color: #555; }
.btn-login:hover { color: #2d0a0a; background: #f5f5f5; }
.btn-signup { background: #2d0a0a; color: #fff; }
.btn-signup:hover { background: #3d0f0f; }
.icon-btn {
    position: relative; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: #555;
    border-radius: 8px; font-size: 15px; transition: all 0.2s;
}
.icon-btn:hover { background: #f5f5f5; color: #2d0a0a; }
.icon-btn .badge {
    position: absolute; top: 2px; right: 2px;
    background: #B80102; color: #fff;
    font-size: 9px; font-weight: 600;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ============ PAGE BANNER (shared across pages) ============ */
.page-banner {
    background: linear-gradient(135deg, #2d0a0a 0%, #1a0505 100%);
    padding: 40px 0; text-align: center; color: #fff;
}
.page-banner h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.5px; }
.breadcrumb {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: rgba(255,255,255,0.5);
}
.breadcrumb a { color: rgba(255,255,255,0.7); transition: color 0.2s; }
.breadcrumb a:hover { color: #B80102; }
.breadcrumb i { font-size: 8px; }

/* ============ FOOTER ============ */
.footer { background: #2d0a0a; color: #aaa; padding: 40px 0 20px; font-size: 12px; }
.footer .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 30px; }
.footer h4 { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.footer p { line-height: 1.7; font-size: 12px; }
.footer ul li { margin-bottom: 8px; }
.footer ul li a { color: #888; font-size: 12px; transition: color 0.2s; }
.footer ul li a:hover { color: #B80102; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: #666;
}

/* ============ RESPONSIVE — SHARED ============ */
@media (max-width: 1024px) {
    .header .container { gap: 16px; }
    .search-box { width: 150px; }
    .search-box:focus-within { width: 180px; }
    .btn-login, .btn-signup { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .top-bar { font-size: 10px; padding: 5px 0; }
    .social-icons { display: none; }
    .marquee span { padding: 0 24px; }
    .header .container { height: 60px; gap: 12px; }
    .logo img, .custom-logo-link img.custom-logo { width: 140px !important; height: auto !important; max-height: 48px; }
    .search-box { display: none; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; }
    .header-actions { margin-left: auto; }
    .main-nav {
        position: fixed; top: 0; left: -100%; width: 280px; height: 100vh;
        background: #fff; z-index: 500; padding: 20px 0;
        box-shadow: 4px 0 20px rgba(0,0,0,0.1);
        transition: left 0.3s ease; overflow-y: auto;
    }
    .main-nav.open { left: 0; }
    .main-nav > ul { flex-direction: column; gap: 0; padding: 0; }
    .main-nav > ul > li > a {
        padding: 12px 20px; font-size: 13px; border-radius: 0;
        border-bottom: 1px solid #f0f0f0; justify-content: space-between;
    }
    .dropdown {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-radius: 0;
        display: none; background: #f9f9f9; padding: 0;
    }
    .dropdown.open { display: block; }
    .dropdown li a { padding: 10px 20px 10px 36px; font-size: 12px; }
    .dropdown li a:hover { padding-left: 40px; }
    .nav-close {
        display: flex !important; align-items: center; justify-content: space-between;
        padding: 12px 20px; border-bottom: 1px solid #eee; margin-bottom: 8px;
    }
    .nav-close span { font-size: 16px; font-weight: 700; color: #2d0a0a; }
    .nav-close button { background: none; border: none; font-size: 20px; color: #999; cursor: pointer; }
    .nav-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 400;
    }
    .nav-overlay.show { display: block; }
    .mobile-search {
        display: flex; padding: 10px 16px; background: #fff; border-bottom: 1px solid #eee;
    }
    .mobile-search input {
        flex: 1; padding: 9px 14px; border: 1px solid #eee; border-radius: 8px;
        font-size: 12px; font-family: inherit; outline: none; background: #f5f5f5;
    }
    .mobile-search input:focus { border-color: #B80102; background: #fff; }
    .page-banner { padding: 28px 0; }
    .page-banner h1 { font-size: 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    #backToTop { bottom: 80px !important; right: 16px !important; width: 40px !important; height: 40px !important; font-size: 14px !important; }
}