/* =====================================================================
   GLOBAL THEME TOKENS & TYPOGRAPHY
   Module: Theme Tokens
   ===================================================================== */

/* --- ARIAL --- */
@font-face {
    font-family: 'ArialCustom';
    src: url('/website/fonts/Arial-Regular.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ArialCustom';
    src: url('/website/fonts/Arial-Bold.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- POPPINS --- */
@font-face {
    font-family: 'PoppinsCustom';
    src: url('/website/fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PoppinsCustom';
    src: url('/website/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
    font-display: swap;
}

/* Global Body & HTML Theme Background */
html, body {
    background-color: var(--d-page-bg, #080b10) !important;
    transition: background-color 0.3s ease;
}

:root, [data-theme="dark"] {
    --color-primary-rgb: 0, 0, 0;

    /* Color Tokens */
    --brand-orange: #e26d25;
    --brand-orange-hover: #f97316;
    --brand-orange-soft: rgba(226, 109, 37, 0.15);
    --brand-orange-light: #ff9d5c;

    /* Dark Mode Semantic Tokens */
    --d-black-l-white: #000000;
    --d-white-l-dark: #ffffff;
    --d-txt-white-l-dark: #ffffff;
    --d-white-l-navy: #ffffff;
    --d-dark-l-light: #121212;
    --d-border-dark-l-light: #444444;
    --d-subtle-border: rgba(255, 255, 255, 0.15);
    --d-divider-line: rgba(255, 255, 255, 0.4);
    --d-input-bg: #141923;
    --d-input-text: #ffffff;
    --d-input-placeholder: #888888;
    --d-topbar-bg: #000000;
    --d-text-subtle: rgba(255, 255, 255, 0.6);
    --d-section-bg: #080b10;
    --d-cat-card-bg: #1f2229;
    --d-page-bg: #080b10;
    --d-card-panel-bg: #1f2229;
    --d-card-panel-border: rgba(255, 255, 255, 0.08);
    --d-table-header-color: #94a3b8;
    --d-qty-box-bg: #111827;
    --d-qty-btn-bg: #1f2229;
    --d-btn-checkout-bg: #e26d25;
    --d-btn-checkout-text: #ffffff;
    --d-loader-bg: rgba(8, 11, 16, 0.98);
    --d-loader-spinner-track: rgba(255, 255, 255, 0.1);
    --d-loader-brand-first: #ffffff;

    /* Primary & Button Color Tokens */
    --brand-orange: #e26d25;
    --brand-orange-hover: #c85a1b;
    --brand-orange-soft: rgba(226, 109, 37, 0.15);
    --brand-orange-light: #ff9d5c;

    --btn-primary-bg: #e26d25;
    --btn-primary-border: #e26d25;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #c85a1b;
    --btn-primary-hover-border: #c85a1b;
    --btn-primary-hover-text: #ffffff;
    --btn-primary-shadow-hover: rgba(200, 90, 27, 0.35);

    --btn-outline-secondary-text: rgba(255, 255, 255, 0.7);
    --btn-outline-secondary-border: rgba(255, 255, 255, 0.2);
    --btn-outline-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    --btn-outline-secondary-hover-text: #ffffff;

    /* Component Tokens */
    --btn-cart-bg: #e26d25;
    --btn-cart-text: #ffffff;
    --btn-notify-bg: rgba(226, 109, 37, 0.15);
    --btn-notify-text: #ff9d5c;
    --btn-notify-border: rgba(226, 109, 37, 0.35);
}

[data-theme="light"] {
    --d-black-l-white: #ffffff;
    --d-white-l-dark: #0f172a;
    --d-txt-white-l-dark: #0f172a;
    --d-white-l-navy: #1e1b4b;
    --d-dark-l-light: #f8fafc;
    --d-border-dark-l-light: #1e1b4b;
    --d-subtle-border: #e2e8f0;
    --d-divider-line: #0f172a;
    --d-input-bg: #ffffff;
    --d-input-text: #0f172a;
    --d-input-placeholder: #94a3b8;
    --d-topbar-bg: #f8fafc;
    --d-text-subtle: #64748b;
    --d-section-bg: #ffffff;
    --d-cat-card-bg: #96979b;
    --d-page-bg: #f8f9fa;
    --d-card-panel-bg: #ffffff;
    --d-card-panel-border: rgba(226, 232, 240, 0.8);
    --d-table-header-color: #64748b;
    --d-qty-box-bg: #f1f5f9;
    --d-qty-btn-bg: #ffffff;
    --d-btn-checkout-bg: #000000;
    --d-btn-checkout-text: #ffffff;
    --d-loader-bg: rgba(255, 255, 255, 0.98);
    --d-loader-spinner-track: #f3f3f3;
    --d-loader-brand-first: #1f2024;

    /* Primary & Button Color Tokens */
    --brand-orange: #e26d25;
    --brand-orange-hover: #c85a1b;
    --brand-orange-soft: rgba(226, 109, 37, 0.08);
    --brand-orange-light: #ff9d5c;

    --btn-primary-bg: #e26d25;
    --btn-primary-border: #e26d25;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #c85a1b;
    --btn-primary-hover-border: #c85a1b;
    --btn-primary-hover-text: #ffffff;
    --btn-primary-shadow-hover: rgba(200, 90, 27, 0.25);

    --btn-outline-secondary-text: #475569;
    --btn-outline-secondary-border: #cbd5e1;
    --btn-outline-secondary-hover-bg: #f1f5f9;
    --btn-outline-secondary-hover-text: #0f172a;

    /* Component Tokens */
    --btn-cart-bg: #000000;
    --btn-cart-text: #ffffff;
    --btn-notify-bg: rgba(226, 109, 37, 0.08);
    --btn-notify-text: #e26d25;
    --btn-notify-border: rgba(226, 109, 37, 0.2);
}

/* Base Primary Button */
.btn-primary {
    background-color: var(--btn-primary-bg, #e26d25) !important;
    border-color: var(--btn-primary-border, #e26d25) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-radius: 10px;
    padding: 8px 20px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--btn-primary-hover-bg, #c85a1b) !important;
    border-color: var(--btn-primary-hover-border, #c85a1b) !important;
    color: var(--btn-primary-hover-text, #ffffff) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--btn-primary-shadow-hover, rgba(200, 90, 27, 0.35)) !important;
}

.btn-primary *,
.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active * {
    color: inherit !important;
}

.btn-link-v2:hover {
    color: var(--brand-orange, #e26d25) !important;
}

.text-primary { color: var(--color-primary, #000000) !important; }
.bg-primary { background-color: var(--color-primary, #000000) !important; }

.v2-price-tag {
    font-size: 2.3rem;
}

.swiper-pagination-bullet-active {
    background: var(--color-secondary, #e26d25) !important;
}

/* Typography Font Families */
button span,
a span,
h5, h4,
span.badge-v2,
tbody tr td span.badge,
span.detail-label,
span.price-label,
.step-indicator small,
.btn-action-premium, 
.btn-link-v2, 
.footer-links-premium li a,
.footer-card-pill .card-text .text-uppercase,
nav.v2-breadcrumb,
span.small,
.v2-price-tag small,
.v2-summary-row span.name-row,
.v2-border-dashed span.name-row,
.form-label,
.form-group label,
label.form-check-label,
.exchange-circle span,
.smallest span {
    font-family: 'PoppinsCustom', sans-serif !important;
    font-weight: 500 !important;
}

h1, h2, h3, h6, small a, 
span.product-badge-v2,
.v2-switch-label,
.v2-status-grid .status-pill span,
.meta-item-v2 span.meta-label-v2,
.v2-tab-link, .spec-header-v2,
thead tr th,
.v2-results-count,
#accountDropdownMenu span.text-uppercase,
#accountDropdownMenu li {
    font-family: 'PoppinsCustom', sans-serif;
    font-weight: 600;
}

span.detail-value, p, input, small, select, textarea,
p.small,
.form-control,
.meta-item-v2 span,
.spec-data-v2,
.x-small span,
tbody tr td,
span.error-msg,
.form-group .form-control,
.v2-checkbox-item.v2-label-text {
    font-family: 'ArialCustom', sans-serif;
    font-weight: 400;
}

span.price-amount,
span.smallest,
.v2-page-link,
.step-indicator .circle,
.footer-card-pill .card-text,
.v2-price-tag,
tbody tr td.price,
.v2-summary-row span,
.v2-border-dashed span,
.text-end span,
.footer-card-pill .card-text span {
    font-family: 'ArialCustom', sans-serif;
    font-weight: 700;
}

/* Global Date Picker Icon Dark Mode Styling */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] .form-control[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H1a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 0.95 !important;
    cursor: pointer !important;
}

/* Global Checkbox & Radio Button Styling (Brand Orange Checked) */
.form-check-input,
.form-check-input[type="checkbox"],
.form-check-input[type="radio"],
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    accent-color: #e26d25 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin-top: 0.15em !important;
    vertical-align: middle !important;
    background-color: var(--d-input-bg, #141923) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

[data-theme="dark"] .form-check-input,
[data-theme="dark"] .form-check-input[type="checkbox"],
[data-theme="dark"] .form-check-input[type="radio"],
[data-bs-theme="dark"] .form-check-input,
[data-bs-theme="dark"] .form-check-input[type="checkbox"],
[data-bs-theme="dark"] .form-check-input[type="radio"] {
    background-color: var(--d-input-bg, #141923) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color-scheme: dark !important;
}

[data-theme="light"] .form-check-input,
[data-theme="light"] .form-check-input[type="checkbox"],
[data-theme="light"] .form-check-input[type="radio"],
[data-bs-theme="light"] .form-check-input,
[data-bs-theme="light"] .form-check-input[type="checkbox"],
[data-bs-theme="light"] .form-check-input[type="radio"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:checked,
.form-check input[type="checkbox"]:checked,
[data-theme="dark"] .form-check-input:checked,
[data-theme="dark"] .form-check-input[type="checkbox"]:checked,
[data-bs-theme="dark"] .form-check-input:checked,
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:checked,
[data-theme="light"] .form-check-input:checked,
[data-theme="light"] .form-check-input[type="checkbox"]:checked,
[data-bs-theme="light"] .form-check-input:checked,
[data-bs-theme="light"] .form-check-input[type="checkbox"]:checked {
    accent-color: #e26d25 !important;
    background-color: #e26d25 !important;
    border-color: #e26d25 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    box-shadow: 0 2px 6px rgba(226, 109, 37, 0.4) !important;
}

.form-check-input[type="radio"]:checked,
.form-check input[type="radio"]:checked,
[data-theme="dark"] .form-check-input[type="radio"]:checked,
[data-bs-theme="dark"] .form-check-input[type="radio"]:checked,
[data-theme="light"] .form-check-input[type="radio"]:checked,
[data-theme="light"] .form-check-input[type="radio"]:checked {
    border-radius: 50% !important;
    accent-color: #e26d25 !important;
    background-color: #e26d25 !important;
    border-color: #e26d25 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    box-shadow: 0 2px 6px rgba(226, 109, 37, 0.4) !important;
}

.form-check-input:focus,
.form-check-input[type="checkbox"]:focus,
.form-check-input[type="radio"]:focus,
[data-theme="dark"] .form-check-input:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #e26d25 !important;
    box-shadow: 0 0 0 0.25rem rgba(226, 109, 37, 0.25) !important;
}