/**
 * Centralized Theme - 10th Planet Jiu Jitsu
 * Shared across Bootstrap (backend) and BladeWindUI (frontend)
 *
 * Usage: Include this file before Bootstrap/BladeWind in both frontend and backend layouts.
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* ---- Primary Brand Colors ---- */
    --color-primary: #B40000;
    --color-primary-dark: #850202;
    --color-primary-light: #d32f2f;
    --color-primary-rgb: 180, 0, 0;

    /* ---- Secondary / Neutral Colors ---- */
    --color-secondary: #6887bb;
    --color-dark: #2d3b48;
    --color-white: #ffffff;
    --color-black: #010101;

    /* ---- Semantic Colors ---- */
    --color-success: #29b348;
    --color-info: #44a2d2;
    --color-warning: #f5b225;
    --color-danger: #ec536c;

    /* ---- Gray Scale ---- */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #a8a8b1;
    --color-gray-600: #6c757d;
    --color-gray-700: #5d5b6f;
    --color-gray-800: #343a40;
    --color-gray-900: #23222f;

    /* ---- Backgrounds ---- */
    --color-bg-body: #eff3f6;
    --color-bg-light: #f8f9fa;
    --color-border-light: #e3e6e7;

    /* ---- Text ---- */
    --color-text-muted: #6c757d;
    --color-text-dark: #495057;

    /* ---- Typography ---- */
    --font-primary: 'Work Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --line-height-base: 1.5;

    /* ---- Sizing ---- */
    --spacing-base: 0.25rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 1px 0px 20px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Font Imports (ensure theme fonts load)
   ========================================================================== */

/* Fonts: Work Sans loaded by backend layout; Nunito loaded via app.scss / Vite.
   Removed duplicate @imports to avoid extra render-blocking requests. */

/* ==========================================================================
   CTA / Primary Button Theme - Red
   All call-to-action buttons use the red brand color.
   ========================================================================== */

/* Bootstrap primary buttons (backend) */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

/* Backend custom-btn-primary */
.custom-btn-primary,
.custom-btn-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.custom-btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* BladeWindUI buttons - primary and red both use theme red */
.bw-button.primary,
.bw-button[class*="primary"],
a.bw-button.primary,
button.bw-button.primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.bw-button.primary:hover,
.bw-button[class*="primary"]:hover,
a.bw-button.primary:hover,
button.bw-button.primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* BladeWind red color - align with theme primary */
.bw-button.red,
a.bw-button.red,
button.bw-button.red {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.bw-button.red:hover,
a.bw-button.red:hover,
button.bw-button.red:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* BladeWind outline buttons (red/primary) */
.bw-button.outlined.primary,
.bw-button.outlined.red {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.bw-button.outlined.primary:hover,
.bw-button.outlined.red:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Product card View details - compact red button matching global theme */
.btn-product-view-details,
a.btn-product-view-details {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    transition: 0.3s;
}

.btn-product-view-details:hover,
a.btn-product-view-details:hover {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

/* ==========================================================================
   Native <select> Styling (replaces Nice Select jQuery plugin)
   ========================================================================== */

select:not([multiple]):not(.bw-raw-select):not(.form-select) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-dark);
    cursor: pointer;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.825L.35 3.175l.7-.7L6 7.425l4.95-4.95.7.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select:not([multiple]):not(.bw-raw-select):not(.form-select):focus {
    border-color: var(--color-primary-light);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

select:not([multiple]):not(.bw-raw-select):not(.form-select):disabled {
    background-color: var(--color-gray-200);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Catalog hero h1 — visually matches the original h3 sizing so heading hierarchy is correct */
.catalog-hero-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Dirham currency SVG icon — scales with text, inherits color */
.dirham-icon {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    vertical-align: -0.05em;
    fill: currentColor;
}