@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;
    padding-bottom: 7rem;
}

/* 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;
}

/* 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 {
    grid-column: 1 / -1; /* spans across both columns */
}


/* 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 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 */
.bh-link__chev {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bh-muted);
    opacity: .6;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms, color 200ms;
}

    .bh-link:hover .bh-link__chev {
        opacity: 1;
        color: var(--bh-text);
    }

    /* Invisible chevron placeholder for alignment */
    .bh-link__chev--ghost {
        opacity: 0;
        pointer-events: none;
    }

    .bh-group.is-open > .bh-link .bh-link__chev {
        transform: rotate(90deg);
    }

/* 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);
    }
}

/* 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);
    }
}

/* 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);
}
S

    .form-white.full-bleed > * {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
.form-white.full-bleed {
    display: block;
}