/* Microsoft Vibrance Theme - Windows 11 & Fluent Design System */

:root {
    /* Microsoft Brand Color Fallbacks */
    --ms-blue-fallback: #0078D4;
    --ms-dark-fallback: #202020;
    --ms-accent-fallback: #0078D4;

    /* Dynamic Storefront Color Aliases */
    --primary-color: var(--ms-blue-fallback);
    --secondary-color: var(--ms-dark-fallback);
    --accent-color: var(--ms-accent-fallback);

    --color-primary: var(--primary-color);
    --color-secondary: var(--secondary-color);
    --color-accent: var(--accent-color);
    --theme-primary: var(--primary-color);
    --theme-secondary: var(--secondary-color);
    --theme-accent: var(--accent-color);

    --primary-rgb: 0, 120, 212;
    --secondary-rgb: 32, 32, 32;
    --accent-rgb: 0, 120, 212;

    /* Fluent UI Functional Colors */
    --fluent-success: #107C41;
    --fluent-warning: #D83B01;
    --fluent-danger: #A80000;
    --fluent-info: #0078D4;

    /* Fluent Light Mode Tokens (Default) */
    --fluent-bg: #F3F3F3;
    --fluent-card-bg: #FFFFFF;
    --fluent-card-hover: #F9F9F9;
    --fluent-subtle-bg: #FBFBFB;
    --fluent-header-bg: rgba(255, 255, 255, 0.88);
    --fluent-footer-bg: #F9F9F9;
    --fluent-border: rgba(0, 0, 0, 0.08);
    --fluent-border-subtle: rgba(0, 0, 0, 0.04);
    --fluent-border-hover: rgba(0, 0, 0, 0.16);
    --fluent-text-primary: #1B1B1B;
    --fluent-text-secondary: #5D5D5D;
    --fluent-text-muted: #757575;
    --fluent-input-bg: #FFFFFF;
    --fluent-input-border: rgba(0, 0, 0, 0.12);
    --fluent-acrylic: rgba(255, 255, 255, 0.85);
    --fluent-dock-bg: rgba(255, 255, 255, 0.92);

    /* Fluent Light Elevation Shadows */
    --fluent-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08);
    --fluent-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --fluent-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
    --fluent-shadow-flyout: 0 16px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

    --livewire-progress-bar-color: var(--primary-color);
}

/* Fluent Dark Mode Tokens */
html.dark {
    --fluent-bg: #202020;
    --fluent-card-bg: #2B2B2B;
    --fluent-card-hover: #323232;
    --fluent-subtle-bg: #242424;
    --fluent-header-bg: rgba(32, 32, 32, 0.88);
    --fluent-footer-bg: #1B1B1B;
    --fluent-border: rgba(255, 255, 255, 0.08);
    --fluent-border-subtle: rgba(255, 255, 255, 0.04);
    --fluent-border-hover: rgba(255, 255, 255, 0.18);
    --fluent-text-primary: #FFFFFF;
    --fluent-text-secondary: #C7C7C7;
    --fluent-text-muted: #8D8D8D;
    --fluent-input-bg: #2B2B2B;
    --fluent-input-border: rgba(255, 255, 255, 0.14);
    --fluent-acrylic: rgba(43, 43, 43, 0.85);
    --fluent-dock-bg: rgba(32, 32, 32, 0.92);

    /* Fluent Dark Elevation Shadows (Ambient + Specular top highlight) */
    --fluent-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    --fluent-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    --fluent-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    --fluent-shadow-flyout: 0 20px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* Fluent System Font Stack - Segoe UI Variable & Aptos */
body, button, input, select, textarea {
    font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", Roboto, "Helvetica Neue", sans-serif;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Background Color Transitions & Surface Colors */
body {
    background-color: var(--fluent-bg) !important;
    color: var(--fluent-text-primary) !important;
    transition: background-color 0.25s cubic-bezier(0.1, 0.9, 0.2, 1.0), color 0.25s cubic-bezier(0.1, 0.9, 0.2, 1.0);
}

header, .fluent-header {
    background-color: var(--fluent-header-bg) !important;
    border-color: var(--fluent-border) !important;
}

.fluent-hero {
    background-color: var(--fluent-subtle-bg) !important;
}

/* Explicit Dark Mode Overrides */
html.dark body {
    background-color: #202020 !important;
    color: #FFFFFF !important;
}

html.dark header,
html.dark .fluent-header {
    background-color: rgba(32, 32, 32, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .fluent-hero {
    background-color: #1E1E1E !important;
}

/* Ensure arbitrary hex surface classes resolve dynamically in light & dark mode */
.bg-\[\#F3F3F3\] {
    background-color: var(--fluent-bg) !important;
}

html.dark .bg-\[\#F3F3F3\],
html.dark .dark\:bg-\[\#202020\],
html.dark [class*="dark:bg-[#202020]"] {
    background-color: #202020 !important;
}

html.dark .dark\:bg-\[\#1E1E1E\],
html.dark [class*="dark:bg-[#1E1E1E]"] {
    background-color: #1E1E1E !important;
}

html.dark .dark\:bg-\[\#2B2B2B\],
html.dark [class*="dark:bg-[#2B2B2B]"] {
    background-color: #2B2B2B !important;
}

html.dark .dark\:bg-\[\#242424\],
html.dark [class*="dark:bg-[#242424]"] {
    background-color: #242424 !important;
}

/* Dynamic Contrast Utilities for any background color */
.btn-fluent-primary,
.bg-primary,
[data-theme-bg="primary"],
.active-primary-pill {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast) !important;
}

.btn-fluent-primary *,
.bg-primary *,
[data-theme-bg="primary"] *,
.active-primary-pill * {
    color: inherit !important;
}

/* Star rating breakdown bar fill */
.fluent-review-bar-fill {
    background-color: #F0A30A !important;
}

/* Suppress Livewire's built-in top progress bar & nprogress completely — replaced by Windows 11 Fluent activity indicator */
#nprogress,
#nprogress .bar,
#nprogress .peg,
#nprogress .spinner,
#livewire-progress,
[wire\:loading\.bar],
.livewire-progress-bar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
}

/* Windows 11 Fluent Activity Indicator Overlay */
#win11-activity-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0), visibility 0.2s !important;
}

#win11-activity-overlay.win11-loading {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#win11-activity-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.dark #win11-activity-backdrop {
    background-color: rgba(0, 0, 0, 0.45) !important;
}

#win11-activity-card {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 22px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: scale(0.92) !important;
    transition: transform 0.22s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    user-select: none !important;
}

.dark #win11-activity-card {
    background: rgba(32, 32, 32, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

#win11-activity-overlay.win11-loading #win11-activity-card {
    transform: scale(1) !important;
}

/* WinUI 3 Progress Ring */
.win11-progress-ring {
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.win11-progress-ring svg {
    width: 100%;
    height: 100%;
    animation: win11-ring-rotate 2s linear infinite;
    transform-origin: center center;
}

.win11-progress-ring circle {
    stroke: var(--primary-color, #0078D4);
    stroke-linecap: round;
    animation: win11-ring-dash 1.4s ease-in-out infinite;
}

@keyframes win11-ring-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes win11-ring-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Windows 11 WinUI 3 Toast Card Styling */
.win11-toast-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.dark .win11-toast-card {
    background: rgba(32, 32, 32, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Acrylic & Mica Materials */
.fluent-acrylic {
    background: var(--fluent-header-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid var(--fluent-border) !important;
}

.fluent-mica {
    background: var(--fluent-bg) !important;
    transition: background-color 0.2s ease;
}

.fluent-card {
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--fluent-shadow-sm) !important;
    transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0), 
                box-shadow 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0), 
                border-color 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0), 
                background-color 0.25s ease !important;
}

.fluent-card:hover {
    border-color: var(--fluent-border-hover) !important;
    box-shadow: var(--fluent-shadow-md) !important;
}

.fluent-card-elevated {
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--fluent-shadow-md) !important;
}

/* Fluent Buttons & Interactive Surfaces with Dynamic Auto-Contrast */
.btn-fluent-primary,
.fluent-btn-primary,
.btn-amazon-primary,
.btn-amazon-yellow,
.btn-amazon-buy,
.btn-amazon-orange {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
    color: var(--primary-contrast, var(--primary-text-color, #FFFFFF)) !important;
    fill: var(--primary-contrast, var(--primary-text-color, #FFFFFF)) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.15rem;
    box-shadow: var(--fluent-shadow-sm) !important;
    transition: all 0.15s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-fluent-primary:hover,
.fluent-btn-primary:hover,
.btn-amazon-primary:hover,
.btn-amazon-yellow:hover,
.btn-amazon-buy:hover,
.btn-amazon-orange:hover {
    filter: brightness(1.08);
    box-shadow: var(--fluent-shadow-md) !important;
}

.btn-fluent-primary:active,
.fluent-btn-primary:active,
.btn-amazon-primary:active,
.btn-amazon-yellow:active,
.btn-amazon-buy:active,
.btn-amazon-orange:active {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* Auto-Contrast propagation to children */
.btn-fluent-primary *,
.fluent-btn-primary *,
.btn-amazon-primary *,
.btn-amazon-yellow *,
.btn-amazon-buy * {
    color: inherit !important;
}

.btn-fluent-primary svg,
.fluent-btn-primary svg,
.btn-amazon-primary svg,
.btn-amazon-yellow svg,
.btn-amazon-buy svg {
    stroke: currentColor;
    color: inherit !important;
}

/* Fluent Secondary / Standard Button */
.btn-fluent-secondary,
.fluent-btn-secondary,
.btn-amazon-secondary {
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-bottom: 2px solid var(--fluent-border-hover) !important;
    color: var(--fluent-text-primary) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 0.55rem 1.15rem;
    box-shadow: var(--fluent-shadow-sm) !important;
    transition: all 0.15s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-fluent-secondary:hover,
.fluent-btn-secondary:hover,
.btn-amazon-secondary:hover {
    background-color: var(--fluent-card-hover) !important;
    border-color: var(--fluent-border-hover) !important;
}

.btn-fluent-secondary:active,
.fluent-btn-secondary:active,
.btn-amazon-secondary:active {
    transform: scale(0.98);
}

/* Fluent Subtle Button (Icon button, ghost action) */
.btn-fluent-subtle {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--fluent-text-primary) !important;
    border-radius: 6px !important;
    padding: 0.4rem 0.75rem;
    transition: all 0.15s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    cursor: pointer;
}

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

.btn-fluent-subtle:active {
    transform: scale(0.96);
}

/* Fluent Form Controls */
.fluent-input,
input[type="text"].fluent-input,
input[type="email"].fluent-input,
input[type="password"].fluent-input,
input[type="number"].fluent-input,
input[type="search"].fluent-input,
select.fluent-input,
textarea.fluent-input {
    background-color: var(--fluent-input-bg) !important;
    border: 1px solid var(--fluent-input-border) !important;
    border-bottom: 2px solid var(--fluent-input-border) !important;
    color: var(--fluent-text-primary) !important;
    border-radius: 6px !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    outline: none !important;
}

.fluent-input:focus,
input[type="text"].fluent-input:focus,
input[type="email"].fluent-input:focus,
input[type="search"].fluent-input:focus {
    border-color: var(--fluent-input-border) !important;
    border-bottom-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.25) !important;
}

/* Fluent Search Box (Header) */
.fluent-search-box {
    background-color: rgba(243, 243, 243, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1B1B1B;
    transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0);
}

.fluent-search-box:hover {
    background-color: #F0F0F0;
    border-color: rgba(0, 0, 0, 0.15);
}

.fluent-search-box:focus-within {
    background-color: #FFFFFF !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.25) !important;
}

html.dark .fluent-search-box {
    background-color: rgba(43, 43, 43, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

html.dark .fluent-search-box:hover {
    background-color: #323232 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.dark .fluent-search-box:focus-within {
    background-color: #242424 !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

.fluent-search-box input[type="search"],
.fluent-search-box input {
    background-color: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: #1B1B1B;
}

html.dark .fluent-search-box input[type="search"],
html.dark .fluent-search-box input {
    color: #FFFFFF !important;
}

html.dark .fluent-search-box input::placeholder {
    color: #A3A3A3 !important;
}

/* Fluent Notification Count Badge (Cart, Compare, Wishlist) */
.fluent-count-badge {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast, #FFFFFF) !important;
    border: 1.5px solid #FFFFFF !important;
    line-height: 1 !important;
}

html.dark .fluent-count-badge {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast, #FFFFFF) !important;
    border-color: #202020 !important;
}

/* Fluent Segmented Controls / Pill Tabs */
.fluent-segmented {
    background-color: var(--fluent-subtle-bg);
    border: 1px solid var(--fluent-border);
    border-radius: 8px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.fluent-segmented-item {
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    color: var(--fluent-text-secondary);
    transition: all 0.15s ease;
    cursor: pointer;
}

.fluent-segmented-item.active,
.fluent-segmented-item:hover {
    color: var(--fluent-text-primary);
}

.fluent-segmented-item.active {
    background-color: var(--fluent-card-bg);
    box-shadow: var(--fluent-shadow-sm);
    font-weight: 600;
}

/* Fluent Badges & Status Tags */
.fluent-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.725rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.fluent-badge-primary {
    background-color: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    border-color: rgba(var(--primary-rgb), 0.2);
}

html.dark .fluent-badge-primary {
    background-color: rgba(0, 120, 212, 0.25);
    color: #60CDFF;
    border-color: rgba(96, 205, 255, 0.4);
}

html.dark [data-view-active="true"] {
    background-color: #334155 !important;
    color: #FFFFFF !important;
}

html.dark [data-view-active="true"] svg {
    stroke: #FFFFFF !important;
}

.fluent-badge-success {
    background-color: rgba(16, 124, 65, 0.12);
    color: var(--fluent-success);
    border-color: rgba(16, 124, 65, 0.2);
}

.fluent-badge-warning {
    background-color: rgba(216, 59, 1, 0.12);
    color: var(--fluent-warning);
    border-color: rgba(216, 59, 1, 0.2);
}

/* Fluent Windows 11 Progress Ring Spinner */
.fluent-progress-ring {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
}

.fluent-progress-ring svg {
    animation: fluent-rotate 2s linear infinite;
    transform-origin: center center;
    width: 100%;
    height: 100%;
}

.fluent-progress-ring circle {
    stroke: var(--primary-color);
    stroke-linecap: round;
    animation: fluent-dash 1.5s ease-in-out infinite;
}

@keyframes fluent-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fluent-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Fluent Pagination */
.fluent-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: var(--fluent-card-bg);
    border: 1px solid var(--fluent-border);
    border-radius: 8px;
    box-shadow: var(--fluent-shadow-sm);
}

.fluent-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fluent-text-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.fluent-page-btn:hover:not(:disabled):not(.active) {
    background-color: var(--fluent-card-hover);
    border-color: var(--fluent-border);
}

.fluent-page-btn.active {
    background-color: var(--primary-color) !important;
    color: var(--primary-contrast, #FFFFFF) !important;
    font-weight: 600;
    box-shadow: var(--fluent-shadow-sm);
}

.fluent-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Fluent Modals & Flyouts */
.fluent-modal-surface {
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--fluent-shadow-flyout) !important;
}

/* Text Truncation Utility */
.fluent-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fluent-line-clamp-1 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Windows 11 Fluent App Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.3);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.5);
    background-clip: content-box;
}

[x-cloak] {
    display: none !important;
}

/* Buy Now Button - Distinct Fluent "Dark / Inverted" Style */
.btn-fluent-buy-now {
    background-color: #1B1B1B !important;
    border: 1px solid #1B1B1B !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: var(--fluent-shadow-sm) !important;
    transition: all 0.15s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-fluent-buy-now * { color: inherit !important; }
.btn-fluent-buy-now:hover { filter: brightness(1.15); box-shadow: var(--fluent-shadow-md) !important; }
.btn-fluent-buy-now:active { transform: scale(0.98); }

html.dark .btn-fluent-buy-now {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #1B1B1B !important;
    fill: #1B1B1B !important;
}
html.dark .btn-fluent-buy-now * { color: #1B1B1B !important; }
html.dark .btn-fluent-buy-now:hover { background-color: #F0F0F0 !important; }

/* Fluent Stepper Pill (quantity selector in product page) */
.stepper-pill {
    background-color: var(--fluent-subtle-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-bottom: 2px solid var(--fluent-border-hover) !important;
    box-shadow: var(--fluent-shadow-sm) !important;
}

.stepper-btn {
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    color: var(--fluent-text-primary) !important;
    transition: all 0.15s ease !important;
}
.stepper-btn:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.stepper-count {
    color: var(--fluent-text-primary) !important;
    font-weight: 700;
}

/* Fluent Sub-header Tab Navigation (Product page) */
.fluent-tab-nav {
    border-bottom: 1px solid var(--fluent-border);
    background-color: var(--fluent-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.fluent-tab-nav a {
    color: var(--fluent-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.65rem 0.25rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none !important;
}
.fluent-tab-nav a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.fluent-tab-nav a.active {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}

/* Fluent Review Stars */
.fluent-star { color: #F0A30A; }
.fluent-star-empty { color: var(--fluent-border-hover); }

/* Fluent Divider */
.fluent-divider {
    border: none;
    border-top: 1px solid var(--fluent-border);
    margin: 0;
}

/* Fluent Form Fields (account page, report modal) */
.fluent-field {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    color: var(--fluent-text-primary);
    background-color: var(--fluent-input-bg);
    border: 1px solid var(--fluent-input-border);
    border-bottom: 2px solid var(--fluent-input-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.fluent-field:focus {
    border-bottom-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}
.fluent-field::placeholder { color: var(--fluent-text-muted); }

/* Fluent Select */
select.fluent-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B6B6B'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
    padding-right: 2.5rem;
}

/* Fluent Label */
.fluent-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin-bottom: 0.375rem;
}

/* Fluent Star Rating Input */
.fluent-star-rating { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
.fluent-star-rating input { display: none; }
.fluent-star-rating label {
    font-size: 1.5rem;
    color: var(--fluent-border-hover);
    cursor: pointer;
    transition: color 0.1s ease, transform 0.1s ease;
}
.fluent-star-rating label:hover,
.fluent-star-rating label:hover ~ label,
.fluent-star-rating input:checked ~ label {
    color: #F0A30A;
    transform: scale(1.1);
}

/* Microsoft Auth Page Styles */
.fluent-auth-container {
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background-color: var(--fluent-bg);
}

@keyframes fluent-auth-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fluent-auth-card {
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--fluent-card-bg) !important;
    border: 1px solid var(--fluent-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 2.5rem 2.25rem !important;
    animation: fluent-auth-enter 0.35s cubic-bezier(0.1, 0.9, 0.2, 1.0) forwards !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 640px) {
    .fluent-auth-card {
        padding: 1.75rem 1.25rem !important;
        border-radius: 10px !important;
    }
}

.fluent-auth-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.fluent-auth-input {
    width: 100% !important;
    height: 40px !important;
    padding: 0 0.875rem !important;
    background-color: var(--fluent-input-bg) !important;
    border: 1px solid var(--fluent-input-border) !important;
    border-bottom: 2px solid var(--fluent-border-hover) !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: var(--fluent-text-primary) !important;
    transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1.0) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.fluent-auth-input:focus {
    border-color: var(--fluent-border) !important;
    border-bottom-color: var(--primary-color) !important;
    box-shadow: 0 1px 0 0 var(--primary-color) !important;
}

.fluent-auth-input::placeholder {
    color: var(--fluent-text-muted) !important;
}

textarea.fluent-auth-input {
    height: auto !important;
    min-height: 80px !important;
    padding: 0.6rem 0.875rem !important;
    line-height: 1.5 !important;
}

select.fluent-auth-input {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B6B6B'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px !important;
    padding-right: 2.25rem !important;
    cursor: pointer !important;
}

html.dark select.fluent-auth-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D1D1D1'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.fluent-auth-input option,
.fluent-input option,
.fluent-field option {
    background-color: #FFFFFF !important;
    color: #1B1B1B !important;
}

html.dark .fluent-auth-input option,
html.dark .fluent-input option,
html.dark .fluent-field option {
    background-color: #2B2B2B !important;
    color: #FFFFFF !important;
}

.fluent-auth-input:disabled,
.fluent-input:disabled,
.fluent-field:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Microsoft Editorial Banner Gradient */
.fluent-exclusive-banner {
    background: linear-gradient(135deg, #003975 0%, #005A9E 50%, #0078D4 100%);
}
:is(.dark) .fluent-exclusive-banner {
    background: linear-gradient(135deg, #0C1B2E 0%, #162F4D 50%, #004E8C 100%);
}