/*
Theme Name: RK Sports Replica
Theme URI: https://rksportsstore.com
Description: A 1:1 replica structure for a sports e-commerce store.
Version: 3.0
Author: Gemini
*/

:root {
    --primary-color: #e62e04; /* Sports Red */
    --secondary-color: #222222; /* Deep Black */
    --text-color: #333333;
    --border-color: #eaeaea;
    --light-bg: #f5f5f5;
    --container-width: 1400px; /* Ultra-wide content limit to prevent overly long text */
}

/* ================= Reset & Layout ================= */
* { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    font-family: 'Roboto', 'Arial', sans-serif;
    color: var(--text-color);
    background: #fff;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }

/* Core container: full-width background with centered content */
.container-fluid { width: 100%; padding: 0; margin: 0; }
.container {
    width: 95%; 
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* =========================================
   Modern Sticky Header Design
   ========================================= */

/* 1. Header container: fixed position, floating at top */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 20px 40px; /* Spacious default padding */
    transition: all 0.4s ease; /* Smooth transition */
    background: transparent; /* Default transparent */
    color: #fff; /* Default white text (assuming dark hero image) */
}

/* If the banner is light, change color: #fff to color: #333 above */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px; /* Limit max width to keep layout tight */
    margin: 0 auto;
}

/* 2. Logo styles */
.text-logo {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: inherit; /* Inherit header color */
    font-style: italic;
    text-transform: uppercase;
}
.text-logo span { color: var(--primary-color); }

/* 3. Menu styles (centered, minimal) */
.header-nav ul {
    display: flex;
    margin: 0; padding: 0;
    list-style: none;
}
.header-nav li { margin: 0 25px; }
.header-nav a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: inherit; /* Inherit header color */
    position: relative;
    padding-bottom: 5px;
}
/* Menu underline animation */
.header-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px;
    background: var(--primary-color); transition: 0.3s;
}
.header-nav a:hover::after { width: 100%; }

/* 4. Right toolbar */
.header-tools { display: flex; align-items: center; gap: 20px; }

/* Minimal search */
.minimal-search {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.5); /* Semi-transparent border */
    padding-bottom: 3px;
    transition: 0.3s;
}
.minimal-search input {
    background: transparent; border: none; outline: none;
    color: inherit; width: 120px; font-size: 0.9rem;
}
.minimal-search input::placeholder { color: inherit; opacity: 0.7; }
.minimal-search button {
    background: none; border: none; padding: 0; cursor: pointer; color: inherit;
}

/* Icon styles */
.tool-icon {
    display: flex; align-items: center; justify-content: center;
    color: inherit; position: relative;
}
.cart-count {
    position: absolute; top: -5px; right: -8px;
    background: var(--primary-color); color: #fff;
    font-size: 10px; font-weight: bold;
    height: 16px; width: 16px; line-height: 16px;
    border-radius: 50%; text-align: center;
}

/* 5. Key: sticky scrolled state */
/* JS adds this class when scrolling down */
body.scrolled .site-header {
    background: #ffffff; /* White background */
    color: #333333; /* Dark text */
    padding: 10px 40px; /* Shrink height */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Add shadow */
}

/* Change search border color on scroll */
body.scrolled .minimal-search { border-bottom-color: #eee; }

/* 6. Hide desktop menu on mobile (simple) */
.mobile-toggle { display: none; background:none; border:none; cursor:pointer; }
.mobile-toggle span { display:block; width:25px; height:2px; background:currentColor; margin:5px 0; }

@media (max-width: 900px) {
    .header-nav { display: none; } /* Temporarily hide desktop menu */
    .mobile-toggle { display: block; }
    .site-header { padding: 15px 20px; background: #fff; color: #333; } /* Mobile: default white header for legibility */
}
/* ================= Sections ================= */
/* Hero Slider */
.hero-slider {
    width: 100%;
    height: 500px; /* Fixed height */
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-align: center;
}
.hero-content h2 { font-size: 3.5rem; margin: 0 0 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.btn-primary {
    background: var(--primary-color); color: #fff; padding: 12px 30px; border-radius: 4px; font-weight: bold; display: inline-block;
}

/* Category Banners */
.category-section { padding: 40px 0; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-box { 
    height: 250px; background: #eee; position: relative; overflow: hidden; 
    display: flex; align-items: center; justify-content: center;
}
.cat-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.cat-box:hover img { transform: scale(1.1); }
.cat-label {
    position: absolute; bottom: 20px; left: 20px; background: #fff; padding: 10px 20px; 
    font-weight: bold; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Product Grid (full-width) */
.product-section { padding: 60px 0; background: #fff; }
.section-title { 
    text-align: center; font-size: 2rem; margin-bottom: 40px; text-transform: uppercase; position: relative; 
}
.section-title::after {
    content: ''; display: block; width: 60px; height: 3px; background: var(--primary-color); margin: 15px auto 0;
}

.product-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 30px;
}
.product-card { border: 1px solid var(--border-color); transition: 0.3s; }
.product-card:hover { border-color: var(--primary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-img { height: 280px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 20px; }
.product-img img { max-height: 100%; }
.product-details { padding: 15px; text-align: center; }
.product-name { font-size: 1rem; margin: 0 0 10px; font-weight: 600; }
.product-price { color: var(--primary-color); font-weight: bold; font-size: 1.1rem; }

/* Footer */
.site-footer { background: var(--secondary-color); color: #999; padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-widget h3 { color: #fff; margin-bottom: 20px; font-size: 1.1rem; text-transform: uppercase; }
.footer-links li { margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.footer-bottom { border-top: 1px solid #333; padding-top: 20px; text-align: center; font-size: 0.9rem; }

/* Mobile */
@media (max-width: 768px) {
    .middle-header .container { flex-direction: column; gap: 20px; }
    .header-search { width: 100%; margin: 10px 0; }
    .main-menu { flex-wrap: wrap; justify-content: center; }
    .cat-grid { grid-template-columns: 1fr; }
}

/* =========================================
   WooCommerce Product Grid Updates
   ========================================= */

/* Grid container: default styles; column count controlled via PHP inline styles */
.product-grid {
    display: grid;
    gap: 30px;
    width: 100%;
}

/* Price style fixes (WooCommerce price HTML is special) */
.product-price {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 15px;
}
.product-price del {
    color: #999;
    font-size: 0.9rem;
    margin-right: 5px;
    font-weight: normal;
}
.product-price ins {
    text-decoration: none;
}

/* More button styles */
.btn-more {
    display: inline-block;
    padding: 12px 35px;
    border: 2px solid #333;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    transition: 0.3s;
}
.btn-more:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* --- Responsive overrides (important) --- */
/* Tablet: enforce 3 per row */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile: enforce 2 per row */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px; /* Smaller gap on mobile */
    }
    .product-img { height: 180px; padding: 10px; } /* Reduce image height on mobile */
    .product-name { font-size: 0.9rem; }
    .btn-action { padding: 5px 0; font-size: 0.75rem; }
}

/* =========================================
   Improved product card styles
   ========================================= */

/* Card container */
.product-card {
    background: #fff;
    border: 1px solid #eee; /* Default light border */
    padding: 20px; /* Extra padding for better breathing space */
    text-align: center; /* Center inner text and inline elements */
    position: relative; /* Prepare for absolute-positioned SALE badge */
    overflow: hidden; /* Prevent overflow */
    border-radius: 8px; /* Rounded corners for modern look */
    /* Core: add transitions for smooth animations */
    transition: all 0.3s ease; 
    /* Use flex to stack vertically and center */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3. Hover lift effect */
.product-card:hover {
    transform: translateY(-10px); /* Translate up 10px */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Deeper, softer shadow */
    border-color: transparent; /* Hide border on hover to emphasize shadow */
}

/* Image container */
.product-image-container {
    width: 100%;
    height: 250px; /* Fixed height for consistent cards */
    /* 2. Image fully centered */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background: #f9f9f9; /* Keep light gray background */
    border-radius: 4px;
    position: relative !important; /* Position inner elements */
}

.product-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Preserve aspect ratio */
    transition: transform 0.5s ease; /* Image scale transition */
}

/* Optional: slight zoom on hover */
.product-card:hover .product-image-container img {
    transform: scale(1.08);
}

/* 1. Improved SALE badge (replaces default text) */
.sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--primary-color, #e62e04); /* Use theme red */
    color: #fff;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 20px; /* Pill shape */
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Product title */
.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: #333;
}
.product-title a { color: inherit; text-decoration: none; }



/* Action buttons area */
.product-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
}
.product-actions a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}
.product-actions a:hover {
    color: var(--primary-color, #e62e04);
}
.action-divider { color: #ccc; }

/* =========================================
   Vertical price layout (per screenshot)
   ========================================= */

/* 1. Directly control product-price-box */
.product-card .product-price-box {
    display: flex !important;           /* Use flex layout */
    flex-direction: column !important;  /* Key: force vertical order (top to bottom) */
    align-items: center !important;     /* Center horizontally */
    justify-content: center !important;
    gap: 0px !important;                /* Spacing between prices */
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
    width: 100% !important;             /* Ensure full width */
}

/* 2. Original price (del) */
.product-card .product-price-box del {
    order: 1 !important;             /* Force first (top) */
    display: block !important;       /* Force block */
    color: #b0b0b0 !important;       /* Light gray */
    font-size: 0.9rem !important;    /* Smaller font size */
    text-decoration: line-through !important;
    opacity: 0.8 !important;
    margin: 0 !important;
}

/* 3. Current price (ins) */
.product-card .product-price-box ins {
    order: 2 !important;             /* Force as second (below) */
    display: block !important;       /* Force block */
    background: transparent !important; /* Remove background */
    text-decoration: none !important;   /* Remove underline */
    color: var(--primary-color, #e62e04) !important; /* Red */
    font-size: 1.3rem !important;    /* Larger font size */
    font-weight: 800 !important;     /* Bold */
    margin: 0 !important;
}

/* 4. Hide the "Original price was:" screen-reader text */
.product-card .product-price-box .screen-reader-text {
    display: none !important;
}

/* 5. Adjust currency symbol size */
.product-card .product-price-box ins .woocommerce-Price-currencySymbol {
    font-size: 0.85em;
    vertical-align: top;
    margin-right: 2px;
}

/* =========================================
   Product page SALE badge styling
   ========================================= */

/* Target WooCommerce default round sales badge (.onsale) */
.woocommerce span.onsale {
    background-color: var(--primary-color, #e62e04) !important; /* Force theme red */
    color: #fff !important;          /* White text */
    font-weight: bold !important;    /* Bold */
    font-size: 0.9rem !important;    /* Font size adjustment */
    
    /* Force perfect circle */
    width: 50px !important;          /* Width */
    height: 50px !important;         /* Height (same as width) */
    line-height: 50px !important;    /* Line-height equals height for vertical centering */
    border-radius: 50% !important;   /* 50% border radius */
    padding: 0 !important;           /* Remove default padding; rely on line-height */
    
    /* Position tweak (optional) */
    top: -15px !important;
    left: -15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Slight shadow for texture */
}

/* =========================================
   WooCommerce notices auto-hide (CSS animation)
   ========================================= */

/* 1. Define animation keyframes */
@keyframes fadeOutSlideUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    99% {
        opacity: 0;
        transform: translateY(-20px); /* Float up */
        visibility: hidden;
        height: auto; /* Keep height to avoid collapse */
        margin-bottom: 2em; /* Preserve spacing */
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
        visibility: hidden;
        /* Collapse space completely */
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
    }
}

/* 2. Apply to WooCommerce notices */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    /* Key: set animation */
    animation-name: fadeOutSlideUp;
    animation-duration: 0.5s;       /* Fade duration 0.5s */
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;  /* Keep hidden after animation */
    
    /* Key: delay (display time) */
    animation-delay: 3s;            /* Start fade after 3 seconds */
    
    /* Ensure initially visible */
    opacity: 1; 
    visibility: visible;
}

/* Pause hide on hover (optional) */
.woocommerce-message:hover,
.woocommerce-error:hover,
.woocommerce-info:hover {
    animation-play-state: paused;
    opacity: 1 !important; /* Force visible */
}

/* =========================================
   Inner page banner tweaks
   ========================================= */

/* Reuse Hero base styles; adjust for inner pages */
section.inner-banner {
    height: 500px !important;       /* Force height 500px (shorter than homepage) */
    min-height: 500px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 40px;            /* Leave bottom spacing */
}

/* Add overlay to ensure white text legibility */
section.inner-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);    /* 40% black overlay */
    z-index: 1;
}

/* Ensure text above overlay */
section.inner-banner .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

section.inner-banner h1 {
    color: #fff;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Mobile adaptation */
@media (max-width: 768px) {
    section.inner-banner {
        height: 350px !important;
        min-height: 350px !important;
    }
    section.inner-banner h1 {
        font-size: 2rem;
    }
}

/* =========================================
   My Account page enhancements (High Priority)
   ========================================= */

/* 1. Layout: enforce two-column split */
/* Use body class for higher specificity */
body.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    align-items: flex-start !important; /* Align to top */
    gap: 30px !important; /* Left-right spacing */
    margin-top: 20px !important;
}

/* 2. Left navigation container */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 260px !important;   /* Enforce fixed width */
    flex: 0 0 260px !important; /* Lock width, prevent flexing */
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 5px !important;
    padding: 0 !important; /* Reset padding */
    margin: 0 !important;  /* Reset margin */
    box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important;
}

/* Remove list bullets */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f5f5f5 !important; /* Divider line */
}

/* Menu link styles */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 15px 20px !important;
    color: #666 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
    border-left: 4px solid transparent !important; /* Left highlight bar */
}

/* Hover */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #fafafa !important;
    color: #333 !important;
    padding-left: 25px !important; /* Effect: slight move right */
}

/* 3. Active item - enforce highlight */
/* Note: WooCommerce uses 'is-active' for the current item */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #fff !important;
    color: var(--primary-color, #e62e04) !important; /* Red text */
    border-left-color: var(--primary-color, #e62e04) !important; /* Left red bar */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 4. Right content area */
body.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 !important; /* Fill remaining space */
    width: auto !important; /* Override default width */
    background: #fff !important;
    padding: 30px !important;
    border: 1px solid #eee !important;
    border-radius: 5px !important;
}

/* 5. Mobile adaptation (stack vertically) */
@media (max-width: 768px) {
    body.woocommerce-account .woocommerce {
        flex-direction: column !important;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100% !important;
        flex: none !important;
        margin-bottom: 20px !important;
    }
}

/* =========================================
   LOGIN PAGE FIX (per screenshot)
   ========================================= */

/* 1. Turn .woocommerce into a centered card */
/* Note: only applies to not-logged-in account pages */
body.woocommerce-account:not(.logged-in) .woocommerce {
    /* Key: limit width */
    max-width: 450px !important;
    width: 90% !important; /* Mobile: keep side padding */
    
    /* Key: center display */
    margin: 80px auto !important;
    
    /* Card visual styles */
    background: #fff !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important; /* Soft shadow */
    border: 1px solid #eee !important;
    
    /* Ensure block-level */
    display: block !important;
}

/* 2. Center the "Login" title */
body.woocommerce-account:not(.logged-in) .woocommerce h2 {
    text-align: center !important;
    font-size: 2rem !important;
    margin-bottom: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important; /* Remove possible underline */
}

/* 3. Remove default borders from the form */
/* Screenshot shows the form has class 'woocommerce-form-login' */
body.woocommerce-account:not(.logged-in) .woocommerce-form-login {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* 4. Input styling */
body.woocommerce-account:not(.logged-in) .woocommerce form .form-row input.input-text {
    height: 50px !important;
    padding: 0 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fcfcfc !important;
}

/* 5. Button styling (Login Button) */
body.woocommerce-account:not(.logged-in) .woocommerce form button.button {
    width: 100% !important;        /* Button fills card width */
    height: 50px !important;
    margin-top: 15px !important;
    border-radius: 50px !important; /* Rounded button */
    font-size: 1rem !important;
}

/* 6. "Remember me" checkbox tweaks */
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
    margin: 15px 0 20px !important;
    display: block !important;
}

/* =========================================
   Footer About Us Content Line Spacing Adjustment
   ========================================= */

/* 1. Target all paragraph text inside the footer */
.site-footer p,
.site-footer .text-widget {
    line-height: 1.8 !important;    /* Line height: Default is usually 1.4, 1.8 is more comfortable for reading */
    margin-bottom: 20px !important; /* Paragraph spacing: Add some space between two paragraphs */
    opacity: 0.9;                   /* Slightly reduce opacity to make the text look softer */
}

/* 2. If About Us is in list format (e.g., address, phone), adjust it as well */
.site-footer ul li {
    line-height: 1.8 !important;
    margin-bottom: 10px !important; /* Spacing between list items */
}