/* =============================================================================
   SPORTS INCUBATOR — legacy component re-skin
   -----------------------------------------------------------------------------
   The storefront inherits a large base stylesheet (minimal.css) whose components
   — product detail, cart, checkout, auth, supplier pages, quotations, settings —
   are still worth keeping. This layer repaints them in the Arena palette instead
   of rebuilding those screens, so the whole site reads as one design.

   Loaded after sports-arena.css.
   ============================================================================= */

/* ---- 1 · Re-point the inherited palette variables -------------------------- */
:root,
.arena-welcome,
body {
    --primary-color: #75418F;
    --arena-accent: #75418F;
    --arena-accent-dark: #4E2B5F;
    --arena-ink-deep: #1C0F24;
    --arena-blue: #1E5EFF;
    --arena-ink: #1C0F24;
    --arena-muted: #665B6E;
    --arena-line: #E2D8E9;
    --arena-bg-soft: #F7F4F9;
    --arena-bg-page: #F7F4F9;
    --search-btn-hover: #4E2B5F;
}

/* ---- 2 · Buttons ----------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
    background-color: var(--sp-ink);
    border-color: var(--sp-ink);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
    background-color: var(--sp-brand) !important;
    border-color: var(--sp-brand) !important;
    color: #fff !important;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--sp-brand-700);
    border-color: var(--sp-brand);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    background-color: var(--sp-brand) !important;
    border-color: var(--sp-brand) !important;
    color: #fff !important;
}

.btn-arena-accent,
.btn-arena-cta,
.order-now-btn.btn-primary,
.add-to-cart-btn.btn-primary {
    background: var(--sp-brand) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--sp-r) !important;
    box-shadow: none !important;
    font-family: var(--sp-head);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
[dir="rtl"] .btn-arena-accent,
[dir="rtl"] .btn-arena-cta,
[dir="rtl"] .order-now-btn.btn-primary,
[dir="rtl"] .add-to-cart-btn.btn-primary {
    font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none;
}
.btn-arena-accent:hover,
.btn-arena-cta:hover,
.order-now-btn.btn-primary:hover:not(:disabled),
.add-to-cart-btn.btn-primary:hover:not(:disabled) {
    background: var(--sp-brand-600) !important;
    background-image: none !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

.add-to-cart-btn.btn-outline-primary {
    background: #fff;
    border: 2px solid var(--sp-brand);
    color: var(--sp-brand-700);
    border-radius: var(--sp-r);
}
.add-to-cart-btn.btn-outline-primary:hover:not(:disabled) {
    background: var(--sp-brand);
    color: #fff;
}

.buy-action-btn { border-radius: var(--sp-r); }
.wishlist-btn:hover, .wishlist-btn.is-active {
    border-color: var(--sp-orange);
    color: var(--sp-orange);
}
.seller-btn, .seller-btn.btn-primary {
    background: var(--sp-ink);
    border-color: var(--sp-ink);
    color: #fff;
    border-radius: var(--sp-r);
}
.seller-btn:hover { background: var(--sp-brand); border-color: var(--sp-brand); }

/* ---- 3 · Links, accents, focus -------------------------------------------- */
a { color: var(--sp-brand-700); }
a:hover { color: var(--sp-brand); }
.text-primary { color: var(--sp-brand-700) !important; }
.bg-primary { background-color: var(--sp-ink) !important; }
.border-primary { border-color: var(--sp-brand) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--sp-brand);
    box-shadow: 0 0 0 3px rgba(117, 65, 143, .14);
}
.form-check-input:checked { background-color: var(--sp-brand); border-color: var(--sp-brand); }
.nav-tabs .nav-link.active {
    color: var(--sp-brand-700);
    border-bottom-color: var(--sp-brand);
}
.nav-pills .nav-link.active { background-color: var(--sp-brand); }

/* ---- 4 · Page banners inherited from the old theme ------------------------- */
.page-banner {
    background: linear-gradient(135deg, var(--sp-ink) 0%, var(--sp-ink-3) 100%) !important;
    position: relative;
}
.page-banner::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px);
}
.page-banner-glass {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
}
.page-banner-glass h1 {
    font-family: var(--sp-display) !important;
    text-transform: uppercase;
    color: #fff !important;
    letter-spacing: .01em;
}
[dir="rtl"] .page-banner-glass h1 {
    font-family: var(--sp-display-ar) !important;
    font-weight: 800; text-transform: none; letter-spacing: 0;
}
.page-banner-glass .crumb, .page-banner-glass .crumb a { color: #DCD2E3 !important; }
.page-banner-glass .crumb a:hover { color: var(--sp-accent) !important; }

/* ---- 5 · Breadcrumb bars --------------------------------------------------- */
.breadcrumb-area, .product-breadcrumb {
    background: var(--sp-paper-2) !important;
    border-bottom: 1px solid var(--sp-line);
}
.breadcrumb a, .product-breadcrumb a { color: var(--sp-brand-700); }

/* ---- 6 · Product detail ---------------------------------------------------- */
.product-details-page .product-title,
.product-details-page h1 {
    font-family: var(--sp-sans);
    font-weight: 700;
    color: var(--sp-ink);
    text-transform: none;
    letter-spacing: 0;
}
[dir="rtl"] .product-details-page .product-title,
[dir="rtl"] .product-details-page h1 { font-family: var(--sp-sans-ar); }

.product-field-label {
    font-family: var(--sp-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sp-ink);
}
[dir="rtl"] .product-field-label { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }

.product-details-page .product-carousel .slick-dots li button:before { color: var(--sp-brand) !important; }

/* Gallery placeholder: show an on-brand panel instead of a broken-image frame. */
.product-details-page .product-image-main,
.product-details-page .exzoom_img_box {
    background: linear-gradient(140deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%);
    border-radius: var(--sp-r-lg);
    overflow: hidden;
}
.pa-value--text:hover, .pa-value--text.pav-active {
    border-color: var(--sp-brand) !important;
    color: var(--sp-brand-700) !important;
}
.pa-value--color:hover, .pa-value--color.pav-active { outline-color: var(--sp-brand) !important; }

/* ---- 7 · Auth screens ------------------------------------------------------ */
.auth-mini-card .card-header,
.auth-hero,
.auth-side {
    background: linear-gradient(150deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%) !important;
}
.password-eye:hover { color: var(--sp-brand) !important; }

/* ---- 8 · Legacy "arena" section furniture -------------------------------- */
.arena-eyebrow {
    color: var(--sp-brand-700) !important;
    font-family: var(--sp-head);
    letter-spacing: .16em;
    text-transform: uppercase;
}
[dir="rtl"] .arena-eyebrow { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; }
.arena-section-header h2 {
    font-family: var(--sp-display) !important;
    text-transform: uppercase;
    color: var(--sp-ink) !important;
}
[dir="rtl"] .arena-section-header h2 {
    font-family: var(--sp-display-ar) !important; font-weight: 800; text-transform: none;
}
.arena-section.is-soft { background: var(--sp-paper-2); }

/* ---- 9 · Flash-deal cards (kept from the old theme) ----------------------- */
.flash-deal-product-card {
    border-radius: var(--sp-r-lg);
    border: 1px solid var(--sp-line);
}
.flash-deal-product-card:hover { box-shadow: var(--sp-shadow); border-color: var(--sp-line-2); }
.flash-deal-discount-badge { background: var(--sp-orange); border-radius: 3px; }
.flash-deal-add-cart-btn { background: var(--sp-ink); border-radius: var(--sp-r); }
.flash-deal-add-cart-btn:hover { background: var(--sp-brand); }
.flash-deal-product-card .price { color: var(--sp-brand-700); }
.flash-deal-wishlist-btn.is-active, .flash-deal-wishlist-btn:hover { color: var(--sp-orange); }
.countdown-digit { background: var(--sp-ink); color: var(--sp-accent); border-radius: var(--sp-r); }

/* ---- 10 · Cart, checkout, tables ------------------------------------------ */
.cart-page .table thead th,
.checkout-page .table thead th,
.table thead th {
    font-family: var(--sp-head);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--sp-ink);
}
[dir="rtl"] .table thead th { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
.table > :not(caption) > * > * { border-color: var(--sp-line); }

/* ---- 11 · Pagination ------------------------------------------------------- */
.pagination .page-item.active .page-link {
    background-color: var(--sp-brand);
    border-color: var(--sp-brand);
}
.pagination .page-link { color: var(--sp-brand-700); }

/* ---- 12 · Toastr ----------------------------------------------------------- */
#toast-container > .toast-success { background-color: var(--sp-brand) !important; }
#toast-container > .toast-error { background-color: var(--sp-orange) !important; }

/* ---- 13 · Supplier / company cards ---------------------------------------- */
.company-showcase-card:hover,
.supplier-card:hover { border-color: var(--sp-brand) !important; }
.company-showcase-rating i.fas,
.rating .text-warning { color: #F5A623 !important; }
.blur-star { color: var(--sp-line-2) !important; }

/* ---- 14 · Misc inherited purple spots ------------------------------------- */
.about-page .info-panel-dark,
.about-page .icon-tile,
.services-page .icon-tile {
    background: linear-gradient(145deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%) !important;
}
.about-page .node-chip { border-color: var(--sp-brand) !important; color: var(--sp-brand-700) !important; }
.contact-area .social-icons a:hover { background: var(--sp-brand) !important; }
#offcanvasMenu .offcanvas-body ul li a:hover,
#offcanvasMenu .offcanvas-body ul li a:active,
#offcanvasMenu .offcanvas-body ul li a:focus-visible { color: var(--sp-brand-700) !important; }