@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

/* ====================================
   Root Variables
======================================= */
:root {
    --color-primary: #000000;
    --color-primary-hover: #000000;
    --color-text-on-primary: #ffffff;
    --color-text-default: #000000;
    --color-brand-accent1: #FFFFFF;
    --color-brand-accent2: #F5D1B0;
    --color-neutral-dark: #191818;
    --color-neutral-light: #FBFAF9;
    --color-error: #e50000;
    --color-success: #26b050;
    --color-focus: #000000;
    --radius-none: 0px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 24px;
    --radius-round: 50%;
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --font-family-base: "Montserrat", Arial, sans-serif;
    --font-size-base: 16px;
    --topband-h: 2.5rem;
}

/* ====================================
Root Variables           
======================================= */
.btn-content-width {
    display: inline-block; /* shrink to fit content */
    width: auto; /* override w-100 */
    min-width: unset; /* ensure no minimum width */
    padding-left: 1rem; /* keep consistent padding */
    padding-right: 1rem;
}

/* ====================================
Badge Styling
======================================= */
.badge-gray {
    background-color: #6c757d; /* medium gray */
    color: #fff;
}

.badge-lightgray {
    background-color: #adb5bd; /* lighter gray */
    color: #212529;
}

.badge-darkgray {
    background-color: #343a40; /* dark gray */
    color: #fff;
}


.content {
    margin-left: var(--content-padding-x);
    margin-right: var(--content-padding-x);
}

:root {
    --content-padding-x: clamp(4rem, 6vw, 5rem);
    /* ---------- Brand Colors ---------- */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-blue: #002F5E;
    --color-gray: #3D3D3D;
    /* ---------- Text Colors ---------- */
    --text-primary: var(--color-gray);
    --text-inverse: var(--color-white);
    --text-muted-light: rgba(255,255,255,0.65);
    --text-muted-lighter: rgba(255,255,255,0.55);
    --text-muted-strong: rgba(255,255,255,0.85);
    /* ---------- Borders ---------- */
    --border-light: #ffffff;
    --border-dark: #000000;
    --border-subtle: #f0f0f0;
    /* ---------- Validation ---------- */
    --color-success: #26b050;
    --color-error: #e50000;
    /* ---------- Typography ---------- */
    --font-family-base: "Montserrat", Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 0.75rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --letter-spacing-wide: 1px;
    /* ---------- Layout Spacing ---------- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    /* ---------- Component Sizing ---------- */
    --input-height: 47px;
    --input-radius-pill: 100px;
    --btn-padding-y: 12px;
    --btn-padding-x: 16px;
    /* ---------- Transitions ---------- */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    /* ---------- Focus ---------- */
    --focus-outline-dark: 1px solid #000000;
    --focus-outline-light: 1px solid #ffffff;
    --focus-offset: 0.25px;
    /* ---------- Z-index scale ---------- */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-overlay: 3000;
}

/* Brand color utilities - make brand color classes available globally */
.bg-op,
.badge.bg-op {
    background: linear-gradient(180deg,#9d2235 0%, #b02a45 100%) !important;
    color: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

.bg-delta,
.badge.bg-delta {
    background: linear-gradient(180deg,#3D3D3D 0%, #2f2f2f 100%) !important;
    color: #ffffff !important;
}

.bg-melcura,
.badge.bg-melcura {
    background: linear-gradient(180deg,#002F5E 0%, #004070 100%) !important;
    color: #ffffff !important;
}

.bg-visi,
.badge.bg-visi {
    background: linear-gradient(180deg,#326295 0%, #2b5280 100%) !important;
    color: #ffffff !important;
}

.bg-delta-medical,
.badge.bg-delta-medical {
    background: #000000 !important;
    color: #ffffff !important;
}


.dark-filter-select {
    max-width: 200px;
    height: var(--input-height);
    border-radius: var(--input-radius-pill);
    padding: 0 1rem;
    border: 1px solid var(--color-black);
    background: #ffffff;
    /* selected value shown in gray */
    color: var(--color-gray);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.dark-filter-select:focus {
    outline: var(--color-black);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.08);
}

/* keep dropdown option text readable (browsers vary on support) */
.dark-filter-select option {
    color: var(--color-black);
}

/* ensure select fits with input-pill styles used elsewhere */
.form-control.dark-filter-select {
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

/* small responsive tweak */
@media (max-width: 480px) {
    .dark-filter-select { max-width: 100%; }
}

/* ====================================
Filter Pill Select Styles
==================================== */
.filter-pill-select {
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 100px;
    font-size: 0.9rem;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    height: var(--input-height, 40px);
    font-family: var(--font-family-base);
}

.filter-pill-select:focus {
    outline: 1px solid #000;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.filter-pill-select option {
    background: #fff;
    color: #000;
}

/* ====================================
Category banner styles (brand-specific)
==================================== */
.product-category-banner {
    text-align: center;
    padding: 10px 0;
    font-weight: 600;
}

/* Category color utilities (use classes like .cat-classic, .cat-body, etc.) */
.product-category-banner .container { text-transform: uppercase; }
.product-category-banner.cat-classic { background-color: #1D5186; color: #fff; }
.product-category-banner.cat-body { background-color: #456A3C; color: #fff; }
.product-category-banner.cat-solar { background-color: #F9A022; color: #111; }
.product-category-banner.cat-delta { background-color: #000000; color: #fff; }
.product-category-banner.cat-elements { background-color: #d32f2f; color: #fff; }
/* Active state (red) */
.product-category-banner.cat-active { background-color: #8b1c1c; color: #fff; }




/* ====================================
Color Utilities
==================================== */

/* ---------- Background Helpers ---------- */

/* Style */
.bg-black {
    background: #000000;
}

.bg-white {
    background: #ffffff;
}

.bg-blue {
    background: #002F5E;
}

.bg-gray {
    background: #3D3D3D;
}

/* ====================================
Table Styling
==================================== */

table th,
table td {
    text-align: left !important;
}

/* Override center alignment for specific columns - ensure all table content is left-aligned */
.custom-table th,
.custom-table td {
    text-align: left !important;
}

/* Ensure all flex children in table headers are left-aligned */
.custom-table th > span,
.custom-table th > div {
    justify-content: flex-start !important;
    display: flex !important;
}

/* Remove auto margin from header template div to keep content left-aligned */
.custom-table th > div.ms-auto {
    margin-start: 0 !important;
    margin-left: 0 !important;
}

/* Ensure badges and action buttons inherit left alignment */
.custom-table .badge,
.custom-table .btn-group {
    justify-content: flex-start !important;
    display: inline-flex !important;
}

/* ====================================
Badge Styling
==================================== */

.badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 0 !important;
}

.badge.bg-light {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border-radius: 0 !important;
}

.badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* Table-specific badge overrides */
.custom-table .badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 0 !important;
}

.custom-table .badge.bg-light {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border-radius: 0 !important;
}

.custom-table .badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.custom-table .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* ====================================
Fonts        
======================================= */

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ====================================
Remove Browser Autofill Styling
==================================== */

/* ---------- WebKit Browsers (Chrome, Edge, Safari) ---------- */

/* Style Override */
.input-pill:-webkit-autofill,
.input-pill:-webkit-autofill:hover,
.input-pill:-webkit-autofill:focus,
.input-pill:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    transition: background-color 9999s ease-in-out 0s !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Force white text in dark-themed forms */
.form-dark .input-pill:-webkit-autofill,
.form-gray .input-pill:-webkit-autofill,
.form-blue .input-pill:-webkit-autofill,
.input-pill-gray .input-pill:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark text and border for light-themed forms */
.form-white .input-pill:-webkit-autofill,
.form-white .input-pill:-webkit-autofill:hover,
.form-white .input-pill:-webkit-autofill:focus,
.form-white .input-pill:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background: transparent !important;
    color: #3D3D3D !important;
    border: 1px solid #3D3D3D !important;
    -webkit-text-fill-color: #3D3D3D !important;
}

/* ---------- Firefox ---------- */

/* Style Override */
input.input-pill:-moz-autofill {
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Dark text for light-themed forms in Firefox */
.form-white input.input-pill:-moz-autofill {
    color: #3D3D3D !important;
    border-color: #3D3D3D !important;
}

/* ====================================
Global          
======================================= */

html, body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

* {
    max-width: 100%;
}




.site-header {
    display: contents;
}

.site-footer {
    display: contents;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: visible;
    /* Clears the fixed footer (8rem, see PageFooter.razor.css) plus 2rem of breathing
       room, so page content such as the brand contact form's "Send Message" button
       never sits flush against the footer. */
    padding-bottom: 10rem;
}

/* Prevent pointer interactions and pointer cursor on headings and paragraphs inside page content */
.page p,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
    pointer-events: none;
    cursor: default;
}

/* Disable text selection/highlighting across the page, but allow form controls to remain selectable */
.page,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6,
.page p,
.page span,
.page a,
.page li,
.page div {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
    -webkit-touch-callout: none; /* iOS Safari */
}

/* Allow selection inside form controls so users can copy input text */
.page input,
.page textarea,
.page select,
.page button {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Move brand footer up to remove dead space below page content */
.brand-page .site-footer {
    margin-top: -7rem; /* pull footer up by 7rem */
}

h1:focus {
    outline: none;
}

/* ====================================
Typography
======================================= */

p {
    text-align: justify !important;
    font-size: clamp(0.85rem, 1.5vw + 0.5rem, 1rem);
}

/* Center paragraph text inside dashboard cards */
.dashboard-grid .dashboard-card .card-content p {
    text-align: center !important;
    margin: 0.5rem 0 1rem;
}

/* ====================================
Links           
======================================= */

a,
.btn-link {
    color: var(--text-primary);
}


    /* ====================================
Focus & Form Elements          
======================================= */

    .btn:focus,
    .btn:active:focus,
    .btn-link.nav-link:focus,
    .form-check-input:focus {
        outline: var(--focus-outline-dark);
        outline-offset: var(--focus-offset);
        box-shadow: none !important;
    }

.form-control:focus,
.form-control:focus-visible,
.input-pill:focus,
.input-pill:focus-visible {
    outline: 2px solid var(--color-success);
    outline-offset: var(--focus-offset);
    border-color: var(--bh-pill-border, var(--border-dark)) !important;
    box-shadow: none !important;
}

/* Override outline color for dark form inputs */
.form-dark .form-control:focus,
.form-dark .form-control:focus-visible,
.form-dark .input-pill:focus,
.form-dark .input-pill:focus-visible,
.form-gray .form-control:focus,
.form-gray .form-control:focus-visible,
.form-gray .input-pill:focus,
.form-gray .input-pill:focus-visible,
.form-blue .form-control:focus,
.form-blue .form-control:focus-visible,
.form-blue .input-pill:focus,
.form-blue .input-pill:focus-visible {
    outline: 2px solid var(--color-white) !important;
    border-color: var(--color-white) !important;
}

.form-control.invalid:focus,
.form-control.invalid:focus-visible,
.input-pill.invalid:focus,
.input-pill.invalid:focus-visible,
.input-pill.input-validation-error:focus,
.input-pill.input-validation-error:focus-visible,
.form-control.input-validation-error:focus,
.form-control.input-validation-error:focus-visible,
.form-control:invalid:focus,
.form-control:invalid:focus-visible,
.input-pill:invalid:focus,
.input-pill:invalid:focus-visible {
    outline-color: var(--border-light);
    border-color: var(--bh-pill-border, var(--border-dark)) !important;
}

.form-control.valid:focus,
.form-control.valid:focus-visible,
.input-pill.valid:focus,
.input-pill.valid:focus-visible,
.valid.modified:not([type=checkbox]):focus,
.valid.modified:not([type=checkbox]):focus-visible {
    outline-color: var(--border-light);
    border-color: var(--bh-pill-border, var(--border-dark)) !important;
}



/* Dark theme error messages */
.form-dark .validation-message,
.form-dark .float-label .validation-message,
.form-gray .validation-message,
.form-gray .float-label .validation-message,
.form-blue .validation-message,
.form-blue .float-label .validation-message {
    background-color: rgba(157, 34, 53, 0.1);
    color: #9d2235 !important;
}


@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-red {
    0%, 100% {
        color: #ff0000;
        opacity: 1;
        transform: scale(1);
    }
    50% {
        color: #ff6666;
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes refresh-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ====================================
Error Boundary          
======================================= */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJod......) no-repeat var(--space-md)/1.8rem, #b32121;
    padding: var(--space-md) var(--space-md) var(--space-md) 3.7rem;
    color: var(--text-inverse);
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }



/* ====================================
Button Spinner (inline, used in EntityForm IsSaving state)
==================================== */

.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.55s linear infinite;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ====================================
Full-Bleed Utilities
==================================== */

.full-bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
    box-sizing: border-box;
}

@supports (width: 100dvw) {
    .full-bleed {
        width: 100dvw;
        max-width: 100dvw;
    }
}

.bleed-content {
    padding: var(--space-2xl) var(--space-3xl);
}

.form-dark .btn,
.form-dark button,
.form-dark .form-actions,
.form-gray .btn,
.form-gray button,
.form-gray .form-actions,
.form-blue .btn,
.form-blue button,
.form-blue .form-actions,
.form-white .btn,
.form-white button,
.form-white .form-actions {
    grid-column: 1 / -1;
}

/* ====================================
Mobile
======================================= */

@media (max-width: 600px) {
    /* Responsive handling: inputs span full width on small screens */
    .input-pill,
    .form-control.input-pill {
        width: 100%;
    }
}

/* Responsive handling: inputs span full width on small screens */
@media (max-width: 768px) {
    .form-dark,
    .form-gray,
    .form-blue,
    .form-white {
        grid-template-columns: 1fr !important; /* single column */
        row-gap: var(--space-lg);
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

        /* Force inputs to span full width */
        .form-dark > *,
        .form-gray > *,
        .form-blue > *,
        .form-white > * {
            width: 100% !important;
        }

    .form-control.input-pill,
    textarea.form-control.input-pill,
    select.form-control.input-pill,
    input[type="file"].form-control.input-pill {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.form-dark,
.form-gray,
.form-blue,
.form-light,
.form-white {
    padding: var(--space-2xl) var(--space-3xl);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
    column-gap: var(--space-xl);
    justify-items: stretch;
}

/* Ensure the Sizes & Prices section spans both columns */
.form-dark .sizes-section,
.form-gray .sizes-section,
.form-blue .sizes-section,
.form-light .sizes-section,
.form-white .sizes-section {
    grid-column: 1 / -1; /* spans across both columns */
}

/* Ensure promotion option sections span both columns */
.form-dark .general-options-section,
.form-gray .general-options-section,
.form-blue .general-options-section,
.form-light .general-options-section,
.form-white .general-options-section,
.form-dark .product-discount-options-section,
.form-gray .product-discount-options-section,
.form-blue .product-discount-options-section,
.form-light .product-discount-options-section,
.form-white .product-discount-options-section,
.form-dark .category-discount-options-section,
.form-gray .category-discount-options-section,
.form-blue .category-discount-options-section,
.form-light .category-discount-options-section,
.form-white .category-discount-options-section,
.form-dark .brand-discount-options-section,
.form-gray .brand-discount-options-section,
.form-blue .brand-discount-options-section,
.form-light .brand-discount-options-section,
.form-white .brand-discount-options-section,
.form-dark .shipping-promotion-options-section,
.form-gray .shipping-promotion-options-section,
.form-blue .shipping-promotion-options-section,
.form-light .shipping-promotion-options-section,
.form-white .shipping-promotion-options-section,
.form-dark .promo-code-promotion-options-section,
.form-gray .promo-code-promotion-options-section,
.form-blue .promo-code-promotion-options-section,
.form-light .promo-code-promotion-options-section,
.form-white .promo-code-promotion-options-section {
    grid-column: 1 / -1; /* spans across both columns */
}


/* Forms that lay themselves out with ContentColumns rather than the two-column form grid.
   Without this a heading or a ContentColumns block lands in a single grid cell, which is what
   the empty <div></div> fillers used to work around. */
.form-white.form-stacked,
.form-dark.form-stacked,
.form-gray.form-stacked,
.form-blue.form-stacked {
    display: block;
}

.form-stacked > * + * {
    margin-top: 1.25rem;
}

/* Background themes */
.form-dark {
    background: var(--color-black);
    color: var(--color-white); /* ensure text is readable */
}


.form-gray {
    background: var(--color-gray);
}

.form-blue {
    background: var(--color-blue);
}

.form-white {
    background: var(--color-white);
    color: var(--text-primary);
}

    /* Make descendants span full width in the grid */
    .form-dark :deep(.btn),
    .form-dark :deep(button),
    .form-dark :deep(.form-actions),
    .form-gray :deep(.btn),
    .form-gray :deep(button),
    .form-gray :deep(.form-actions),
    .form-blue :deep(.btn),
    .form-blue :deep(button),
    .form-blue :deep(.form-actions),
    .form-white :deep(.btn),
    .form-white :deep(button),
    .form-white :deep(.form-actions) {
        grid-column: 1 / -1;
    }

/* Base form controls styling */
.form-control,
textarea.form-control,
select.form-control {
    border-radius: 100px;
    padding: 10px 15px;
    color: white;
    opacity: 0.65;
    transition: opacity var(--transition-base);
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    opacity: 1;
}

/* Round all input fields */
.form-control,
textarea.form-control,
select.form-control {
    border-radius: 100px; /* makes inputs pill-shaped */
    padding: 10px 15px;
    background-color: transparent;
    color: white;
    opacity: 0.65;
    transition: opacity var(--transition-base);
}

/* Full opacity on focus for all form controls */
.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.form-control:focus-visible,
textarea.form-control:focus-visible,
select.form-control:focus-visible {
    opacity: 1;
}

/* Base black pill input */
.input-pill-black {
    height: var(--input-height);
    border-radius: var(--input-radius-pill);
    padding: 0 15px;
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    line-height: 1.2;
}

    .input-pill-black::placeholder {
        color: var(--color-gray);
    }

.input-pill-black:focus,
.input-pill-black:focus-visible {
    outline: 1px solid var(--color-black);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.55);
    border-color: var(--color-black) !important;
}

/* Optional: style file input */
input[type="file"].form-control {
    border-radius: 25px;
}

/* Optional: style validation messages */
.text-danger {
    font-size: 0.9rem;
    font-weight: 500;
}


/* ====================================
Input Label Styling (Non-Floating)
====================================== */
.float-label {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; /* label above input, validation below */
    gap: 0.5rem;
}


/* Label positioned above input (static, never floating) */
    .float-label > .form-label {
        font-size: 14px;
        margin-left: 20px;
        left: 20px;
        font-weight: 500;
        opacity: 0.65;
        transition: opacity var(--transition-base), color var(--transition-base);
        color: var(--text-muted-light);
        pointer-events: none;
        line-height: 1.2;
    }

/* Light theme label */
.form-white .float-label > .form-label {
    color: rgba(61, 61, 61, 0.65);
}

/* Input receives focus: full opacity label */
.float-label > .form-control:focus ~ .form-label,
.float-label > .input-pill:focus ~ .form-label,
.float-label > .form-label {
    opacity: 1;
}

/* Light theme: focused label */
.form-white .float-label > .form-control:focus ~ .form-label,
.form-white .float-label > .input-pill:focus ~ .form-label {
    opacity: 1;
    color: var(--text-primary);
}

/* Error state: red label */
.float-label > .form-control.invalid:placeholder-shown ~ .form-label,
.float-label > .form-control.input-validation-error:placeholder-shown ~ .form-label,
.float-label > .input-pill.invalid:placeholder-shown ~ .form-label,
.float-label > .input-pill.input-validation-error:placeholder-shown ~ .form-label {
    color: var(--color-error);
    opacity: 1;
}

/* ====================================
Input Pill Styling
====================================== */

/* Base input pill - faded/reduced opacity by default */
.input-pill,
.form-control.input-pill,
input.input-pill,
textarea.input-pill,
select.input-pill {
    border-radius: var(--input-radius-pill);
    padding: 10px 15px;
    height: var(--input-height);
    opacity: 0.65;
    border: 1px solid currentColor;
    outline: 1px solid currentColor;
    outline-offset: 3px;
    outline-color: transparent;
    transition: opacity var(--transition-base), border-color var(--transition-base), outline-color var(--transition-slow);
    line-height: 1.2;
}

/* Full opacity on focus - fade in offset outline */
.input-pill:focus,
.form-control.input-pill:focus,
input.input-pill:focus,
textarea.input-pill:focus,
select.input-pill:focus,
.input-pill:focus-visible,
.form-control.input-pill:focus-visible,
input.input-pill:focus-visible,
textarea.input-pill:focus-visible,
select.input-pill:focus-visible {
    opacity: 1;
    outline-color: currentColor;
}

/* Dark theme input pills */
.form-dark .form-control.input-pill,
.form-dark .form-control-plaintext.input-pill,
.form-dark input.input-pill,
.form-dark textarea.input-pill,
.form-dark select.input-pill {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    background-color: transparent !important;
}

.form-dark .form-control.input-pill::placeholder,
.form-dark textarea.input-pill::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* Gray theme input pills */
.form-gray .form-control.input-pill,
.form-gray .form-control-plaintext.input-pill,
.form-gray input.input-pill,
.form-gray textarea.input-pill,
.form_GRAY select.input-pill {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    background-color: transparent !important;
}

.form-gray .form-control.input-pill::placeholder,
.form-gray textarea.input-pill::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* input-pill-gray: EntityForm uses this class on the <form> element (InputPillTone.Gray).
   Mirror the form-gray input styling so inputs on gray backgrounds are transparent. */
.input-pill-gray .form-control.input-pill,
.input-pill-gray .form-control-plaintext.input-pill,
.input-pill-gray input.input-pill,
.input-pill-gray textarea.input-pill,
.input-pill-gray select.input-pill {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    background-color: transparent !important;
}

.input-pill-gray .form-control.input-pill:focus,
.input-pill-gray input.input-pill:focus,
.input-pill-gray textarea.input-pill:focus,
.input-pill-gray select.input-pill:focus,
.input-pill-gray .form-control.input-pill:focus-visible,
.input-pill-gray input.input-pill:focus-visible,
.input-pill-gray textarea.input-pill:focus-visible {
    background-color: transparent !important;
}

.input-pill-gray .form-control.input-pill::placeholder,
.input-pill-gray textarea.input-pill::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Blue theme input pills */
.form-blue .form-control.input-pill,
.form-blue .form-control-plaintext.input-pill,
.form-blue input.input-pill,
.form-blue textarea.input-pill,
.form-blue select.input-pill {
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    background-color: transparent !important;
}

.form-blue .form-control.input-pill::placeholder,
.form-blue textarea.input-pill::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* White theme: plain .form-control (no .input-pill) would otherwise keep the
   global white text from the dark public forms and vanish against the card. */
.form-white .form-control,
.form-white input.form-control,
.form-white textarea.form-control,
.form-white select.form-control {
    color: var(--color-gray) !important;
    background-color: var(--color-white);
    opacity: 1;
}

.form-white .form-control::placeholder {
    color: rgba(61, 61, 61, 0.55);
}

/* White theme input pills */
.form-white .form-control.input-pill,
.form-white .form-control-plaintext.input-pill,
.form-white input.input-pill,
.form-white textarea.input-pill,
.form-white select.input-pill {
    color: var(--color-gray) !important;
    border-color: var(--color-gray) !important;
    background-color: var(--color-white);
}

.form-white .form-control.input-pill::placeholder,
.form-white textarea.input-pill::placeholder {
    color: rgba(61, 61, 61, 0.55);
}

/* Multiline textarea styling */
textarea.form-control.input-pill {
    height: auto;
    min-height: 100px;
    border-radius: 6px;
    padding: 12px 15px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

textarea.form-control.input-pill::-webkit-scrollbar {
    width: 8px;
}

textarea.form-control.input-pill::-webkit-scrollbar-track {
    background: transparent;
}

textarea.form-control.input-pill::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

textarea.form-control.input-pill::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.55);
}

textarea.form-control.input-pill {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}


/* ====================================
Validation Styling - Global
======================================= */
.validation-message-wrapper {
    margin-top: 0.5rem;
    display: flex;
    margin-left: 20px;
    align-items: center;
    gap: 0.4rem;
    order: 3; /* ensures it comes after input in flex layouts */
}


.validation-message {
    font-size: var(--font-size-sm);
    font-weight:500;
    color: #9d2235;
}

.validation-message-wrapper ion-icon {
    font-size: 1rem;
    color: #9d2235;
}

/* Theme-specific overrides */
.form-gray .validation-message,
.form-gray .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-dark .validation-message,
.form-dark .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-blue .validation-message,
.form-blue .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-white .validation-message,
.form-white .validation-message-wrapper ion-icon {
    color: #9d2235;
}

/* Prevent label from turning red */
.float-label > .form-control.input-validation-error ~ .form-label,
.float-label > .input-pill.input-validation-error ~ .form-label {
    color: inherit !important;
}

/* ====================================
Browser Validation Tooltip Suppression
======================================= */

/* Global suppression of HTML5 validation bubbles */
input::-webkit-validation-bubble,
input::-webkit-validation-bubble-message,
input::-webkit-validation-bubble-arrow,
input::-webkit-validation-bubble-heading {
    display: none !important;
    visibility: hidden !important;
}

textarea::-webkit-validation-bubble,
textarea::-webkit-validation-bubble-message,
textarea::-webkit-validation-bubble-arrow,
textarea::-webkit-validation-bubble-heading {
    display: none !important;
    visibility: hidden !important;
}

select::-webkit-validation-bubble,
select::-webkit-validation-bubble-message,
select::-webkit-validation-bubble-arrow,
select::-webkit-validation-bubble-heading {
    display: none !important;
    visibility: hidden !important;
}

/* Firefox validation bubble suppression */
input:invalid::-moz-ui-invalid-border {
    border-color: inherit !important;
}

textarea:invalid::-moz-ui-invalid-border {
    border-color: inherit !important;
}

/* Suppress validation outline in Firefox */
input:invalid,
textarea:invalid {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove default invalid styling */
input:required:invalid {
    box-shadow: none !important;
    outline: none !important;
}

textarea:required:invalid {
    box-shadow: none !important;
    outline: none !important;
}

/* Login form specific suppression */
.login-form input::-webkit-validation-bubble,
.login-form input::-webkit-validation-bubble-message,
.login-form input::-webkit-validation-bubble-arrow,
.login-form input::-webkit-validation-bubble-heading {
    display: none !important;
    visibility: hidden !important;
}

.login-form input:invalid {
    box-shadow: none !important;
    outline: none !important;
}

.login-form input:focus:invalid {
    box-shadow: none !important;
    outline: var(--focus-outline-dark) !important;
    outline-offset: var(--focus-offset) !important;
}

/* Register form specific suppression */
.register-form input::-webkit-validation-bubble,
.register-form input::-webkit-validation-bubble-message,
.register-form input::-webkit-validation-bubble-arrow,
.register-form input::-webkit-validation-bubble-heading {
    display: none !important;
    visibility: hidden !important;
}

.register-form input:invalid {
    box-shadow: none !important;
    outline: none !important;
}

.register-form input:focus:invalid {
    box-shadow: none !important;
    outline: var(--focus-outline-dark) !important;
    outline-offset: var(--focus-offset) !important;
}


/* ===============================
   BrandHub Modern Sidebar - v2.0
   =============================== */

.bh-sidebar {
    --bh-text: #000000;
    --bh-muted: #a0a0a0;
    --bh-border: rgba(0,0,0,.08);
    --bh-hover: rgba(0,0,0,.04);
    --bh-active: rgba(0,0,0,.08);
    width: 280px;
    height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-right: 1px solid var(--bh-border);
    box-shadow: 2px 0 8px rgba(0,0,0,.06);
}

/* Brand */
.bh-sidebar__brand {
    padding: 2rem 1.5rem 1.4rem;
    border-bottom: 1px solid var(--bh-border);

}

.bh-brand {
    display: flex;
    gap: 0;
    text-decoration: none;
    color: var(--bh-text);
    transition: transform 200ms ease;
}

    .bh-brand:hover {
        transform: scale(1.05);
    }

.bh-brand__mark {
    display: none;
}

.bh-brand__stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bh-brand__title {
    font-size: 1.25rem;
    font-weight: 400;
    color: #000000;
    line-height: 1.2;
}

.bh-brand__subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    color: #a0a0a0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Navigation */
.bh-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .bh-nav::-webkit-scrollbar {
        width: 6px;
    }

    .bh-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .bh-nav::-webkit-scrollbar-thumb {
        background: rgba(15,23,42,.1);
        border-radius: 3px;
        transition: background 200ms;
    }

    .bh-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(15,23,42,.2);
    }

.bh-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Main links */
.bh-link {
    margin: .5rem 0;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: var(--bh-text);
    position: relative;
    cursor: pointer;
    border-radius: 0;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: 1px solid transparent;
    width: 100%;
    box-sizing: border-box;
    font-weight: 400;
}

    .bh-link:hover {
        background: transparent;
        border-color: transparent;
    }

    .bh-link:hover .bh-link__label {
        color: #505050;
    }

    /* underline */
    .bh-link::after,
    .bh-footer::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, #000000 0%, #1a1a1a 100%);
        border-radius: 1px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* No hover underline for main links */
    .bh-link:hover::after {
        transform: scaleX(0);
    }

    /* No hover underline for footer logout button */
    .bh-footer:hover::after {
        transform: scaleX(0);
    }

    /* Hide underline for solo red button */
    .bh-link--solo::after {
        display: none;
    }

    .bh-link.is-active {
        font-weight: 600;
        background: var(--bh-active);
        border-color: rgba(15,23,42,.1);
    }

        .bh-link.is-active::after {
            transform: scaleX(1);
        }

/* Icons */
.bh-link__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    color: #000000;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .bh-link:hover .bh-link__icon {
        color: #000000;
    }

    .bh-link.is-active .bh-link__icon {
        color: #000000;
    }

/* Label */
.bh-link__label {
    flex: 1;
    padding-left: 0.5rem;
    white-space: nowrap;
    text-align: left;
}

/* SOLO LINKS (Dashboard) */
.bh-link--solo {
    background: transparent !important;
    border: none !important;
    font-weight: 400;
}

.bh-link--solo.is-active {
    background: transparent !important;
    border: none !important;
    font-weight: 400;
}

/* Buttons with submenu */
.bh-link--btn {
    background: none;
    border: 0;
    font-size: 1rem;
}

/* Chevron
   Hidden on every admin navigation item. Open/closed state is already carried by the
   submenu expanding, so the arrow added nothing but noise. Kept as a single rule rather
   than stripping the markup so the icons can be restored by deleting this one block. */
.bh-link__chev {
    display: none;
}

/* Submenus */
.bh-sub {
    list-style: none;
    margin: .25rem 0 .75rem 1.25rem;
    padding-left: 0;
    border-left: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bh-group.is-open .bh-sub {
    max-height: 400px;
    opacity: 1;
}

.bh-sub__link {
    display: block;
    margin: .35rem 0;
    padding: .3rem 0.5rem .3rem 0.5rem;
    font-size: .83rem;
    font-weight: 450;
    color: rgba(100, 116, 139, 0.8);
    text-decoration: none !important;
    background: transparent;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 4px;
    border: none;
}

    /* remove underline on all link states */
    .bh-sub__link,
    .bh-sub__link:visited,
    .bh-sub__link:focus,
    .bh-sub__link:active,
    .bh-sub__link:hover {
        text-decoration: none !important;
    }

    /* lighter text on hover only */
    .bh-sub__link:hover {
        color: rgba(100, 116, 139, 1);
        background: transparent;
        padding-left: 0.5rem;
    }

    /* active submenu - darker text, no background */
    .bh-sub__link.is-active {
        color: #000000;
        font-weight: 500;
        text-decoration: none !important;
        background: transparent;
        border: none;
        padding-left: 0.5rem;
    }

/* Footer */
.bh-sidebar__footer {
    border-top: 1px solid var(--bh-border);
    padding: 1rem;
    background: linear-gradient(135deg, rgba(15,23,42,.02) 0%, transparent 100%);
}

.bh-footer-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .bh-footer-user-info:hover {
        background: rgba(0, 0, 0, 0.08);
    }

.bh-footer-user-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    color: #000000;
}

/* ====================================
   Admin Sidebar - mobile hide
======================================= */
@media (max-width: 768px) {
    .bh-sidebar {
        display: none;
    }
}


/* ====================================
Admin Form Page Overlay
======================================= */

/* When form page wrapper is present, hide all background */
html:has(.admin-form-page-wrapper),
body:has(.admin-form-page-wrapper),
html:has(.application-form-page-wrapper),
body:has(.application-form-page-wrapper) {
    overflow: hidden;
}

/* Form page wrapper - absolute full screen overlay */
.admin-form-page-wrapper,
.application-form-page-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide layout elements behind form */
.admin-form-page-wrapper ~ *,
.application-form-page-wrapper ~ * {
    display: none !important;
}

/* When form wrapper is present, hide any parent containers */
:has(> .admin-form-page-wrapper),
:has(> .application-form-page-wrapper) {
    overflow: hidden !important;
}

:has(> .admin-form-page-wrapper) > *,
:has(> .application-form-page-wrapper) > * {
    position: relative;
    z-index: 1;
}

:has(> .admin-form-page-wrapper) > .admin-form-page-wrapper,
:has(> .application-form-page-wrapper) > .application-form-page-wrapper {
    z-index: 99999 !important;
}

/* Ensure form content fills the wrapper */
.admin-form-page-wrapper .form-white,
.admin-form-page-wrapper .form-gray,
.admin-form-page-wrapper .form-dark,
.admin-form-page-wrapper .form-blue,
.application-form-page-wrapper .form-white,
.application-form-page-wrapper .form-gray,
.application-form-page-wrapper .form-dark,
.application-form-page-wrapper .form-blue {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2rem 3rem !important;
    transform: none !important;
    margin-left: 0 !important;
    background: #ffffff !important;
}

/* Checkout form container - adds left/right margins without full-screen overlay */
.checkout-form-container {
    margin-left: 2rem;
    margin-right: 2rem;
}

@media (max-width: 768px) {
    .checkout-form-container {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (max-width: 479px) {
    .checkout-form-container {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* ====================================
Login Form Styles
======================================= */
.login-form {
    width: 95%;
    /* Prevent browser from showing validation UI */
    --webkit-validation: none;
}

/* Override Bootstrap's btn-primary for login form to use custom primary variant */
.login-form .btn.btn-primary {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    position: relative;
    border: 1px solid var(--border-dark) !important;
    background-color: transparent !important;
    color: var(--color-black) !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    transition: transform var(--transition-fast), color var(--transition-base), background-color var(--transition-base);
    user-select: none;
}

.login-form .btn.btn-primary:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    transform: scale(0.98) !important;
    border-color: var(--border-dark) !important;
}

.login-form .btn.btn-primary:active {
    transform: scale(0.96) !important;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

.login-form .btn.btn-primary:focus,
.login-form .btn.btn-primary:focus-visible {
    outline: var(--focus-outline-dark) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: none !important;
}

/* ====================================
Register Form Styles
======================================= */
.register-form {
    width: 100%;
    /* Prevent browser from showing validation UI */
    --webkit-validation: none;
}

/* Disable browser's native validation messages for register form */
.register-form input:invalid {
    box-shadow: none !important;
}

/* Suppress the browser's validation tooltip */
.register-form input:required:invalid::-webkit-validation-bubble,
.register-form input:required:invalid::-webkit-validation-bubble-message,
.register-form input:required:invalid::-webkit-validation-bubble-arrow,
.register-form input:required:invalid::-webkit-validation-bubble-heading,
.register-form input:required:invalid::-webkit-validation-bubble-body {
    display: none !important;
}

/* Firefox validation message suppression */
.register-form input:invalid::-moz-validation-bubble,
.register-form input:invalid::-moz-validation-bubble-message {
    display: none !important;
}

/* Hide the default validation outline/shadow */
.register-form input:invalid {
    outline: none !important;
    box-shadow: none !important;
}

/* Override Bootstrap's btn-primary for register form to use custom primary variant */
.register-form .btn.btn-primary {
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    position: relative;
    border: 1px solid var(--border-dark) !important;
    background-color: transparent !important;
    color: var(--color-black) !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    transition: transform var(--transition-fast), color var(--transition-base), background-color var(--transition-base);
    user-select: none;
}

.register-form .btn.btn-primary:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    transform: scale(0.98) !important;
    border-color: var(--border-dark) !important;
}

.register-form .btn.btn-primary:active {
    transform: scale(0.96) !important;
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

.register-form .btn.btn-primary:focus,
.register-form .btn.btn-primary:focus-visible {
    outline: var(--focus-outline-dark) !important;
    outline-offset: var(--focus-offset) !important;
    box-shadow: none !important;
}

.register-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.register-form__field {
    width: 100%;
}

/* --- Mobile-first responsive adjustments for register form --- */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    .register-form__grid {
        grid-template-columns: 1fr;
        gap: clamp(0.75rem, 2vw, 1rem);
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .register-form__field {
        width: 100%;
    }
}

/* Small Devices / Tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    .register-form__grid {
        grid-template-columns: 1fr;
        gap: clamp(0.875rem, 2vw, 1.25rem);
        margin-bottom: clamp(1rem, 2vw, 1.25rem);
    }

    .register-form__field {
        width: 100%;
    }
}

/* Medium Devices / Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .register-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, 2.5vw, 1.5rem);
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
    }

    .register-form__field {
        width: 100%;
    }
}

/* Large Devices / Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .register-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .register-form__field {
        width: 100%;
    }
}

/* Extra Large Devices / Desktop (> 1440px) */
@media (min-width: 1441px) {
    .register-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .register-form__field {
        width: 100%;
    }
}



/* --- Responsive Form Elements (Login & Register) --- */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    .form-label {
        font-size: clamp(0.8rem, 2vw, 0.95rem) !important;
    }

    .form-control,
    .form-control.input-pill,
    input.input-pill,
    textarea.input-pill,
    select.input-pill {
        font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
        padding: clamp(0.6rem, 1.5vw, 0.75rem) clamp(0.8rem, 2vw, 1rem) !important;
        height: auto !important;
    }

    

    .btn.btn-primary {
        font-size: clamp(0.85rem, 2vw, 0.95rem);
        padding: clamp(0.5rem, 1.5vw, 0.6rem) clamp(1rem, 3vw, 1.25rem);
    }

    p {
        font-size: clamp(0.85rem, 2vw, 0.95rem);
    }
}

/* Small Devices / Tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    .form-label {
        font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
    }

    .form-control,
    .form-control.input-pill,
    input.input-pill,
    textarea.input-pill,
    select.input-pill {
        font-size: clamp(0.9rem, 2vw, 0.95rem) !important;
        padding: clamp(0.65rem, 1.5vw, 0.75rem) clamp(0.9rem, 2vw, 1rem) !important;
        height: auto !important;
    }


    .btn.btn-primary {
        font-size: clamp(0.9rem, 2vw, 0.95rem);
        padding: clamp(0.55rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.25rem);
    }

    p {
        font-size: clamp(0.9rem, 2vw, 0.95rem);
    }
}

/* Medium Devices / Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .form-label {
        font-size: clamp(0.9rem, 2vw, 0.95rem) !important;
    }

    .form-control,
    .form-control.input-pill,
    input.input-pill,
    textarea.input-pill,
    select.input-pill {
        font-size: clamp(0.9rem, 2vw, 0.95rem) !important;
        padding: clamp(0.65rem, 1.5vw, 0.75rem) clamp(0.9rem, 2vw, 1rem) !important;
        height: auto !important;
    }



    .btn.btn-primary {
        font-size: 0.95rem;
        padding: 0.6rem 1.25rem;
    }
}

/* Large Devices / Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .form-label {
        font-size: 0.95rem !important;
    }

    .form-control,
    .form-control.input-pill,
    input.input-pill,
    textarea.input-pill,
    select.input-pill {
        font-size: 0.95rem !important;
        padding: 0.7rem 1rem !important;
        height: auto !important;
    }

    .password-toggle-btn {
        top: 2.2rem !important;
    }

    .btn.btn-primary {
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
    }
}

/* Extra Large Devices / Desktop (> 1440px) */
@media (min-width: 1441px) {
    .form-label {
        font-size: 1rem !important;
    }

    .form-control,
    .form-control.input-pill,
    input.input-pill,
    textarea.input-pill,
    select.input-pill {
        font-size: 1rem !important;
        padding: 0.75rem 1.25rem !important;
        height: auto !important;
    }


    .btn.btn-primary {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* --- Register Page Specific Responsive Styling --- */



/* Responsive styling for register intro paragraph - inherit from content-section-body */
.form-white > p {
    font-size: clamp(0.9rem, 2vw, 1rem) !important;
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
    padding: 0 !important;
}

/* Responsive checkbox consent labels */
.register-form label[style*="display: flex"],
.login-form label[style*="display: flex"] {
    font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
}

/* Register/Login footer links responsive */
.register-link,
.login-link {
    font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
}

/* Register form consent/checkbox responsive styling */
@media (max-width: 479px) {
    .form-white > p {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    .register-form label[style*="display: flex"],
    .login-form label[style*="display: flex"] {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    .register-form label input[type="checkbox"],
    .login-form label input[type="checkbox"] {
        min-width: 1rem;
        margin-right: clamp(0.4rem, 1vw, 0.5rem) !important;
    }

    .register-link,
    .login-link {
        font-size: 0.8rem !important;
        margin-left: clamp(0.5rem, 2vw, 1rem) !important;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .form-white > p {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
        padding: 0 !important;
    }

    .register-form label[style*="display: flex"],
    .login-form label[style*="display: flex"] {
        font-size: 0.88rem !important;
        line-height: 1.4;
    }

    .register-form label input[type="checkbox"],
    .login-form label input[type="checkbox"] {
        min-width: 1rem;
        margin-right: clamp(0.4rem, 1vw, 0.5rem) !important;
    }

    .register-link,
    .login-link {
        font-size: 0.88rem !important;
        margin-left: clamp(0.75rem, 2vw, 1rem) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .form-white > p {
        font-size: 0.93rem !important;
        margin-bottom: 1.35rem !important;
        padding: 0 !important;
    }

    .register-form label[style*="display: flex"],
    .login-form label[style*="display: flex"] {
        font-size: 0.92rem !important;
        line-height: 1.5;
    }

    .register-form label input[type="checkbox"],
    .login-form label input[type="checkbox"] {
        min-width: 1rem;
        margin-right: 0.5rem !important;
    }

    .register-link,
    .login-link {
        font-size: 0.92rem !important;
        margin-left: 1rem !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .form-white > p {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
    }

    .register-form label[style*="display: flex"],
    .login-form label[style*="display: flex"] {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }

    .register-form label input[type="checkbox"],
    .login-form label input[type="checkbox"] {
        min-width: 1rem;
        margin-right: 0.5rem !important;
    }

    .register-link,
    .login-link {
        font-size: 0.95rem !important;
        margin-left: 1rem !important;
    }
}

@media (min-width: 1441px) {
    .form-white > p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
    }

    .register-form label[style*="display: flex"],
    .login-form label[style*="display: flex"] {
        font-size: 0.95rem !important;
        line-height: 1.6;
    }

    .register-form label input[type="checkbox"],
    .login-form label input[type="checkbox"] {
        min-width: 1rem;
        margin-right: 0.5rem !important;
    }

    .register-link,
    .login-link {
        font-size: 0.95rem !important;
        margin-left: 1rem !important;
    }
}

.login-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.login-form__field {
    width: 100%;
}

/* --- Mobile-first responsive adjustments for login form --- */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    .login-form__grid {
        grid-template-columns: 1fr;
        gap: clamp(0.75rem, 2vw, 1rem);
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .login-form__field {
        width:90%;
    }
}

/* Small Devices / Tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    .login-form__grid {
        grid-template-columns: 1fr;
        gap: clamp(0.875rem, 2vw, 1.25rem);
        margin-bottom: clamp(1rem, 2vw, 1.25rem);
    }

    .login-form__field {
        width: 90%;
    }
}

/* Medium Devices / Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .login-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, 2.5vw, 1.5rem);
        margin-bottom: clamp(1rem, 2vw, 1.5rem);
    }

    .login-form__field {
        width:90%;
    }
}

/* Large Devices / Desktop (1025px - 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .login-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .login-form__field {
        width: 90%;
    }
}

/* Extra Large Devices / Desktop (> 1440px) */
@media (min-width: 1441px) {
    .login-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .login-form__field {
        width: 90%;
    }
}


/* ====================================
Validation Styling - Global
======================================= */
.validation-message-wrapper {
    margin-top: 0.5rem;
    display: flex;
    margin-left: 20px;
    align-items: center;
    gap: 0.4rem;
    order: 3; /* ensures it comes after input in flex layouts */
}

.validation-message {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #9d2235;
}

.validation-message-wrapper ion-icon {
    font-size: 1rem;
    color: #9d2235;
}

/* Theme-specific overrides */
.form-gray .validation-message,
.form-gray .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-dark .validation-message,
.form-dark .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-blue .validation-message,
.form-blue .validation-message-wrapper ion-icon {
    color: #9d2235;
}

.form-white .validation-message,
.form-white .validation-message-wrapper ion-icon {
    color: #9d2235;
}

/* Prevent label from turning red */
.float-label > .form-control.input-validation-error ~ .form-label,
.float-label > .input-pill.input-validation-error ~ .form-label {
    color: inherit !important;
}

/* Login form validation messages */
.login-form .validation-message-wrapper {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.login-form .validation-message {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #9d2235;
}

.login-form .validation-message-wrapper ion-icon {
    font-size: 1rem;
    color: #9d2235;
}

/* Register form validation messages */
.register-form .validation-message-wrapper {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.register-form .validation-message {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #9d2235;
}

.register-form .validation-message-wrapper ion-icon {
    font-size: 1rem;
    color: #9d2235;
}


/* Full-bleed forms override */
.admin-form-page-wrapper .full-bleed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

/* Alert styling in form wrapper */
.admin-form-page-wrapper .alert {
    margin: 2rem 3rem !important;
}

/* Loading message styling */
.admin-form-page-wrapper .alert-info {
    text-align: center;
    padding: 2rem;
    margin-top: 50vh;
    transform: translateY(-50%);
}


}

.bh-footer-user-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bh-footer {
    color: #000000;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    width: 100%;
    text-align: left;
}

    .bh-footer:hover {
        color: #505050;
        background: none;
    }

    .bh-footer:hover .bh-logout-icon {
        color: #505050;
    }

.bh-logout-form {
    width: 100%;
}

.bh-logout-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    color: #000000;
}

.invalid-feedback {
    display: block;
    width: auto;
    color: #9d2235;
    font-size: 0.85rem;

    margin-top: 0.35rem;
    padding: 0; /* no pill */
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: slideDown 0.2s ease-out;
}

    /* Hide empty validation messages */
    .invalid-feedback:empty,
    .validation-message:empty {
        display: none;
        padding: 0;
        margin: 0;
    }

/* Valid/Success feedback styling - pill-shaped, content-fitted */
.valid-feedback {
    display: inline-block;
    width: fit-content;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    background-color: #28a745;
    border: none;
}

/* Animation for validation messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Invalid input state styling - applies to all input variants
   Do not force red borders or red focus outlines. Preserve each
   theme/variant's original border and focus colors; apply only a
   subtle background tint to indicate invalid state. */
.input-pill.invalid,
.input-pill-white.invalid,
.input-pill-gray.invalid,
.input-pill-black.invalid,
input.invalid,
select.invalid,
textarea.invalid {
    /* keep existing border color from the specific variant/theme */
    background-color: rgba(157, 34, 53, 0.03); /* subtle tint only */
}

    .input-pill.invalid:focus,
    .input-pill-white.invalid:focus,
    .input-pill-gray.invalid:focus,
    .input-pill-black.invalid:focus {
        /* do not override focus outline color; preserve theme behavior */
        outline-color: inherit;
        box-shadow: none;
    }





.content-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

}


    @media (max-width: 768px) {
        .content-columns {
            grid-template-columns: 1fr;
        }
    }

/* Override for dark filter select (place near end of app.css) */
select.form-control.dark-filter-select,
.form-control.dark-filter-select {
  color: var(--color-gray) !important;      /* selected value shows gray */
  background: transparent !important;
  border: 1px solid var(--color-black) !important;
}

/* Prevent the global green focus from winning */
select.form-control.dark-filter-select:focus,
.form-control.dark-filter-select:focus {
  outline: var(--focus-outline-dark) !important;
  outline-offset: var(--focus-offset) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.08) !important;
}

/* Make options readable (browser-dependent) */
select.form-control.dark-filter-select option {
  color: var(--color-black) !important;
}

/* try to style native option hover (browser support varies) */
select.dark-filter-select option {
  background-color: #fff;    /* default option bg */
  color: #000;               /* option text */
}

/* hover / focus for option - works in Firefox, limited in Chromium/WebKit */
select.dark-filter-select option:hover,
select.dark-filter-select option:focus {
  background-color: var(--color-gray) !important; /* luxe hover fill */
  color: #000;
}

/* selected row background when open (Firefox supports) */
select.dark-filter-select option:checked {
  background-color: #ececec;
  color: #000;
}

/* Promotional item highlights */
/* Promotion badge and free-item highlight styles were moved to the account/cart scoped CSS
   to avoid global collisions. See Components/Pages/Account/AccountCart.razor.css */

.admin-search-input {
    width: 100%;
    padding: 10px 40px 10px 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 100px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    color: #000 !important;
    height: 40px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}

/* ====================================
Fix: Full Bleed Form Layout
==================================== */
/* ====================================
✅ FINAL FIX: Full-Bleed Form Layout
==================================== */

.form-white.full-bleed,
.form-dark.full-bleed,
.form-gray.full-bleed,
.form-blue.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    /* ✅ CRITICAL FIX */
    display: block !important; /* kill grid layout */

    box-sizing: border-box;
    padding-left: clamp(2rem, 6vw, 5rem);
    padding-right: clamp(2rem, 6vw, 5rem);
}

/* Content inside a full-bleed form is spaced by the form's own left/right padding above,
   which applies equally to the header, the description and the field columns so they all
   line up on the same margin.

   A per-child `max-width: 1200px; margin: auto` used to sit here. It was dead code for a
   long time - a stray character above it broke the selector - and reinstating it squeezed
   every child into a narrow centred column inside the full-width band, leaving the title,
   description and columns floating well inside the form edge. Width is the padding's job,
   not each child's. */
.form-white.full-bleed {
    display: block;
}


/* ============================================================
   Admin list tables (shared look)

   Mirrors the AdminDataTable component's table styling so pages
   that build their own table markup (Promotions, Rebate Usage)
   match Brand Management. AdminDataTable's own CSS is component
   scoped, so it cannot be reused directly from another component.
   ============================================================ */
.admin-table-wrapper {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #ffffff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 0;
    color: #4b5563;
}

.admin-table thead {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.admin-table th {
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
    color: #374151;
    border-bottom: 2px solid #d1d5db;
    white-space: nowrap;
    user-select: none;
    background: transparent;
}

.admin-table th.sortable-header {
    cursor: pointer;
}

.admin-table th.sortable-header:hover {
    background-color: #f9fafb;
}

.admin-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.admin-table tbody tr:hover {
    background-color: #f9fafb;
}

.admin-table td {
    padding: 12px 16px;
    color: #4b5563;
    vertical-align: middle;
    text-align: left;
}

.admin-table td.num,
.admin-table th.num {
    text-align: right;
    white-space: nowrap;
}

.admin-table td code {
    background: #f3f4f6;
    padding: 2px 6px;
    font-size: 0.85rem;
    color: #1f2937;
}

.admin-table .badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table .badge.bg-success {
    background-color: #ecfdf5;
    color: #065f46;
}

.admin-table .badge.bg-secondary {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* Nested detail table (e.g. Rebate Usage line items) */
.admin-table-sub {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: #4b5563;
}

.admin-table-sub th,
.admin-table-sub td {
    padding: 6px 10px;
    border-bottom: 1px solid #ececec;
    text-align: left;
}

.admin-table-sub thead th {
    background: #efefef;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
}

.admin-table-sub .num {
    text-align: right;
    white-space: nowrap;
}

.admin-table-sub tfoot td {
    border-bottom: none;
    padding-top: 8px;
}


/* ============================================================
   Admin filter / toolbar inputs

   The global `.form-control` rule paints text white for the dark
   public forms. Admin toolbars sit on white, so any bare
   `.form-control` there is invisible. This class restores a
   readable pill on a white background.
   ============================================================ */
.admin-filter-input,
input.admin-filter-input,
select.admin-filter-input,
textarea.admin-filter-input {
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    opacity: 1 !important;
}

.admin-filter-input::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

.admin-filter-input:focus,
.admin-filter-input:focus-visible {
    opacity: 1 !important;
    border-color: #9ca3af !important;
}