/*
 * Shared Theme Styles - Futbolero Vintage Shop
 * Common styles extracted from product pages (maillots, maillots-pays, maillots-vintage, tous-les-maillots)
 */

/* Theme Variables */
:root {
    --bg: #f7f8f9;
    --surface: #ffffff;
    --text: #121314;
    --muted: #6b6f76;
    --border: #e9ebf0;
    --accent: #2f6f3e;
    --accent-contrast: #ffffff;
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Switzer', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-weight: 700;
}

/* Navbar */
.navbar { 
    background: var(--surface) !important; 
    border-bottom: 1px solid var(--border); 
}

#site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    background: var(--surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

#site-header .navbar {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#site-header .sticky-top {
    position: static !important;
}

body {
    padding-top: 200px !important;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 130px !important;
    }
}

.navbar .navbar-brand { color: var(--text); }
.nav-link { color: var(--muted) !important; }
.nav-link.active, .nav-link:hover { color: var(--text) !important; font-weight: 700; }

/* Buttons */
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: #285a33;
    --bs-btn-hover-border-color: #285a33;
    --bs-btn-color: var(--accent-contrast);
    --bs-btn-focus-shadow-rgb: 47,111,62;
}

.btn-accent, .btn-dark {
    transition: transform .12s ease;
    transform-origin: center center;
}

.btn-accent:hover, .btn-dark:hover {
    transform: scale(1.035);
}

.btn-accent,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active,
.btn-accent:visited {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark:visited {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.card .card-text { color: var(--muted); }

/* Footer */
.footer {
    background: #000000 !important;
    color: #ffffff;
    border-top: none;
}

.footer a {
    color: #ffffff;
    text-decoration: none;
}

.footer a:hover {
    color: #cccccc;
    text-decoration: underline;
}

.footer .text-secondary {
    color: #cccccc !important;
}

/* Cart Badge */
.cart-btn { position: relative; }
.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: .7rem;
    background: var(--accent);
    color: var(--accent-contrast);
    border: 2px solid var(--surface);
}

/* Product Grid Zero Gap */
.row.g-0 .col-6,
.row.g-0 .col-md-4,
.row.g-0 .col-lg-3 {
    padding: 0 !important;
    margin: 0 !important;
}

.row.g-0 .card { margin: 0 !important; border-radius: 0 !important; }
.row.g-0 .card-body { margin: 0 !important; }
.row.g-0 .ratio { margin: 0 !important; }
.row.g-0 { margin: 0 !important; }

/* Search Input */
.input-group {
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

#carousel-search-input {
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem 0.75rem 48px;
    font-size: 0.9375rem;
    background: transparent;
    transition: all 0.2s ease;
    color: var(--text);
}

#carousel-search-input::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

.carousel-search-icon-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    z-index: 6;
}

.carousel-search-icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

#carousel-clear-search {
    display: none !important;
}

#carousel-clear-search:hover {
    background: var(--bg);
    color: var(--text);
}

#carousel-search-input:focus {
    box-shadow: none;
    outline: none;
    background: var(--surface);
}

.input-group:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-color: var(--border);
}

.input-group:focus-within {
    border-color: var(--border);
    box-shadow: none;
}

.input-group .form-control:focus {
    z-index: 5;
}

#carousel-search-input:focus,
#carousel-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.input-group #carousel-search-input:focus,
.input-group #carousel-search-input:focus-visible {
    box-shadow: none !important;
}

/* Hidden Elements */
.product-card.hidden { display: none !important; }
.col-6.hidden, .col-md-4.hidden, .col-lg-3.hidden { display: none !important; }

/* No Results Message */
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

/* Tab Toggle */
.tab-toggle {
    display: inline-flex !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    padding: 3px !important;
    gap: 2px !important;
}

.tab-item {
    display: inline-block !important;
    padding: 0.45rem 1.5rem !important;
    border-radius: 999px !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
}

.tab-item.active, .tab-item.active:hover {
    background: var(--text) !important;
    color: #fff !important;
}

.tab-item:not(.active):hover {
    color: var(--text) !important;
    background: rgba(0,0,0,0.05) !important;
}