/**
 * SoccerKits — Bootstrap Brand Theme
 * Overrides Bootstrap 5.3 CSS variables to apply the dark + gold brand
 * across every Bootstrap component automatically.
 */

:root {
    /* Bootstrap variable overrides (CSS-vars-based theming) */
    --bs-primary: #FFC72C;
    --bs-primary-rgb: 255, 199, 44;
    --bs-secondary: #1a1a1a;
    --bs-secondary-rgb: 26, 26, 26;
    --bs-dark: #0a0a0a;
    --bs-dark-rgb: 10, 10, 10;
    --bs-light: #f5f5f5;
    --bs-body-bg: #0a0a0a;
    --bs-body-color: #ffffff;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-border-color: #262626;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-link-color: #FFC72C;
    --bs-link-hover-color: #ffd75f;
}

/* Body + base */
html, body { background: var(--bs-body-bg); color: var(--bs-body-color); }
body { font-family: var(--bs-body-font-family); }

/* Headings keep our brand font */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #fff;
    font-family: 'Anton', 'Bebas Neue', sans-serif;
    letter-spacing: 0.5px;
}

/* Display utilities tighten too */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Anton', 'Bebas Neue', sans-serif;
    color: #fff;
    line-height: 1;
}

/* ----- Buttons ----- */
.btn-primary {
    --bs-btn-color: #0a0a0a;
    --bs-btn-bg: #FFC72C;
    --bs-btn-border-color: #FFC72C;
    --bs-btn-hover-color: #0a0a0a;
    --bs-btn-hover-bg: #ffd75f;
    --bs-btn-hover-border-color: #ffd75f;
    --bs-btn-active-color: #0a0a0a;
    --bs-btn-active-bg: #e6b020;
    --bs-btn-active-border-color: #e6b020;
    --bs-btn-disabled-color: #0a0a0a;
    --bs-btn-disabled-bg: #FFC72C;
    --bs-btn-disabled-border-color: #FFC72C;
    font-weight: 700;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,0.3);
    --bs-btn-hover-color: #0a0a0a;
    --bs-btn-hover-bg: #FFC72C;
    --bs-btn-hover-border-color: #FFC72C;
    font-weight: 700;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.btn-secondary, .btn-dark {
    --bs-btn-bg: #1a1a1a;
    --bs-btn-border-color: #262626;
    --bs-btn-hover-bg: #262626;
    --bs-btn-hover-border-color: #FFC72C;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    font-weight: 700;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.85rem;
    --bs-btn-font-size: 1rem;
}

/* ----- Navbar ----- */
.navbar {
    --bs-navbar-color: #e5e5e5;
    --bs-navbar-hover-color: #FFC72C;
    --bs-navbar-active-color: #FFC72C;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #FFC72C;
    background: #0a0a0a;
    border-bottom: 1px solid #262626;
}
.navbar .nav-link {
    color: #e5e5e5;
    font-weight: 500;
    font-size: 14px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-item.current-menu-item > .nav-link {
    color: #FFC72C;
}
.navbar-brand {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}
.navbar-brand img,
.navbar-brand .custom-logo { max-height: 40px; width: auto; }
.navbar-toggler {
    border-color: #262626;
    color: #fff;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255,199,44,0.25); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ----- Offcanvas (mobile menu, cart, search) ----- */
.offcanvas {
    --bs-offcanvas-bg: #0a0a0a;
    --bs-offcanvas-color: #fff;
    --bs-offcanvas-border-color: #262626;
}
.offcanvas-header { border-bottom: 1px solid #262626; padding: 1.25rem 1.5rem; }
.offcanvas-title {
    font-family: 'Anton', sans-serif;
    color: #FFC72C;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}
.btn-close:hover, .btn-close:focus { opacity: 1; }

/* ----- Forms ----- */
.form-control, .form-select {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #262626;
    padding: 0.75rem 1rem;
}
.form-control:focus, .form-select:focus {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #FFC72C;
    box-shadow: 0 0 0 0.25rem rgba(255,199,44,0.15);
}
.form-control::placeholder { color: #6b7280; }
.form-label {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 0.4rem;
}
.form-check-input {
    background-color: #1a1a1a;
    border-color: #262626;
}
.form-check-input:checked {
    background-color: #FFC72C;
    border-color: #FFC72C;
}
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(255,199,44,0.25); }
.form-check-label { color: #fff; }
.input-group .form-control,
.input-group .btn { border-color: #262626; }

/* ----- Cards ----- */
.card {
    --bs-card-bg: #141414;
    --bs-card-color: #fff;
    --bs-card-border-color: #262626;
    --bs-card-cap-bg: #1a1a1a;
    transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: #FFC72C; }
.card-title { font-family: 'Bebas Neue', sans-serif; color: #fff; letter-spacing: 0.5px; }
.card-text { color: #e5e5e5; }
.card-body { padding: 1rem; }
@media (min-width: 768px) { .card-body { padding: 1.25rem; } }

/* ----- Accordion ----- */
.accordion {
    --bs-accordion-bg: #141414;
    --bs-accordion-color: #fff;
    --bs-accordion-border-color: #262626;
    --bs-accordion-btn-color: #fff;
    --bs-accordion-btn-bg: #141414;
    --bs-accordion-active-color: #FFC72C;
    --bs-accordion-active-bg: #1a1a1a;
    --bs-accordion-btn-focus-border-color: #FFC72C;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255,199,44,0.15);
}
.accordion-button {
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.accordion-button::after {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(15deg);
}
.accordion-item { margin-bottom: 0.5rem; border-radius: 0.5rem !important; overflow: hidden; }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 #262626; }

/* ----- Alerts / notices ----- */
.alert {
    --bs-alert-border-color: #262626;
    --bs-alert-bg: #141414;
    --bs-alert-color: #fff;
}
.alert-primary {
    --bs-alert-color: #FFC72C;
    --bs-alert-bg: rgba(255,199,44,0.08);
    --bs-alert-border-color: rgba(255,199,44,0.3);
}
.alert-success {
    --bs-alert-color: #4ade80;
    --bs-alert-bg: rgba(34,197,94,0.08);
    --bs-alert-border-color: rgba(34,197,94,0.3);
}
.alert-danger {
    --bs-alert-color: #fca5a5;
    --bs-alert-bg: rgba(239,68,68,0.08);
    --bs-alert-border-color: rgba(239,68,68,0.3);
}
.alert-warning {
    --bs-alert-color: #fcd34d;
    --bs-alert-bg: rgba(217,119,6,0.08);
    --bs-alert-border-color: rgba(217,119,6,0.3);
}

/* ----- Badges ----- */
.badge { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-weight: 600; padding: 0.4em 0.75em; }
.badge.bg-primary { color: #0a0a0a !important; }
.badge.bg-secondary { background: #1a1a1a !important; color: #fff !important; border: 1px solid #262626; }

/* ----- Dropdowns ----- */
.dropdown-menu {
    --bs-dropdown-bg: #141414;
    --bs-dropdown-border-color: #262626;
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255,199,44,0.08);
    --bs-dropdown-link-hover-color: #FFC72C;
    --bs-dropdown-link-active-bg: #FFC72C;
    --bs-dropdown-link-active-color: #0a0a0a;
    --bs-dropdown-divider-bg: #262626;
}

/* ----- Tables ----- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: #262626;
    --bs-table-hover-bg: #1a1a1a;
    --bs-table-hover-color: #fff;
    --bs-table-striped-bg: #141414;
    --bs-table-striped-color: #fff;
}
.table thead th {
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom-color: #262626;
}

/* ----- Pagination ----- */
.pagination {
    --bs-pagination-bg: #141414;
    --bs-pagination-color: #fff;
    --bs-pagination-border-color: #262626;
    --bs-pagination-hover-bg: #FFC72C;
    --bs-pagination-hover-color: #0a0a0a;
    --bs-pagination-hover-border-color: #FFC72C;
    --bs-pagination-active-bg: #FFC72C;
    --bs-pagination-active-color: #0a0a0a;
    --bs-pagination-active-border-color: #FFC72C;
    --bs-pagination-disabled-bg: #0a0a0a;
    --bs-pagination-disabled-color: #6b7280;
    --bs-pagination-disabled-border-color: #262626;
}

/* ----- Breadcrumbs ----- */
.breadcrumb {
    --bs-breadcrumb-divider-color: #6b7280;
    --bs-breadcrumb-item-active-color: #FFC72C;
}
.breadcrumb-item a { color: #9ca3af; text-decoration: none; }
.breadcrumb-item a:hover { color: #FFC72C; }

/* ----- Modal ----- */
.modal-content {
    background: #141414;
    color: #fff;
    border: 1px solid #262626;
}
.modal-header, .modal-footer { border-color: #262626; }

/* ----- Misc text utilities to read on dark ----- */
.text-muted { color: #9ca3af !important; }
.text-dark { color: #fff !important; }
hr { border-color: #262626; opacity: 1; }
.bg-light, .bg-white { background-color: #141414 !important; color: #fff; }

/* Links inside cards / prose */
.card a:not(.btn) { color: #FFC72C; }
.card a:not(.btn):hover { color: #ffd75f; }

/* Container padding adjustments */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Make focus rings gold across the board */
*:focus-visible { outline-color: #FFC72C; }

/* Z-index helper for sticky header */
.navbar.fixed-top, .navbar.sticky-top { z-index: 1030; }