/*
 * Custom CSS for Nexus Cart Orderform
 *
 * This file allows you to customize the theme colors and styles for the Nexus Cart orderform.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color;
 * - You can also override any CSS properties here.
 *
 * Note: Changes here will apply to the orderform's Shadow DOM.
 */

/* Add you custom styles here */
:host, :root {
    /* Primary colors */
    --vl-primary: #7ea6ff;
    --vl-primary-lifted: #98b7ff;
    --vl-primary-accented: #4bdbff;

    /* Secondary colors */
    --vl-secondary: #242836;
    --vl-secondary-lifted: #2d3345;
    --vl-secondary-accented: #3b4662;

    /* Success colors */
    --vl-success: #1fdc8d;
    --vl-success-lifted: #29f39c;
    --vl-success-accented: #12b76a;

    /* Info colors */
    --vl-info: #4bdbff;
    --vl-info-lifted: #7ee8ff;
    --vl-info-accented: #2eb8e0;

    /* Notice colors */
    --vl-notice: #6d7bff;
    --vl-notice-lifted: #8a95ff;
    --vl-notice-accented: #515fe5;

    /* Warning colors */
    --vl-warning: #f0c978;
    --vl-warning-lifted: #f7d895;
    --vl-warning-accented: #ddb45f;

    /* Error colors */
    --vl-error: #ff6b6b;
    --vl-error-lifted: #ff8f8f;
    --vl-error-accented: #e15555;

    /* Grayscale colors */
    --vl-grayscale: #0d1220;
    --vl-grayscale-lifted: #151c30;
    --vl-grayscale-accented: #202944;

    /* Neutral colors */
    --vl-neutral: #3f4b69;
    --vl-neutral-lifted: #55617f;
    --vl-neutral-accented: #7080a6;

    /* Text neutral colors */
    --vl-text-inverted: #07101f;
    --vl-text-muted: #8e9ec0;
    --vl-text-lifted: #b5c6e8;
    --vl-text-accented: #dbe8ff;
    --vl-text: #edf3ff;

    /* Border neutral colors */
    --vl-border-muted: rgba(96, 126, 255, 0.1);
    --vl-border: rgba(96, 126, 255, 0.16);
    --vl-border-lifted: rgba(96, 126, 255, 0.22);
    --vl-border-accented: rgba(126, 166, 255, 0.3);

    /* Background neutral colors */
    --vl-bg: #0a0f1d;
    --vl-bg-muted: #10172b;
    --vl-bg-lifted: #141d34;
    --vl-bg-accented: #1a2540;
    --vl-bg-inverted: #141d34;
    --vl-text-inverted: #edf3ff;

    /* Additional custom properties */
    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

:host .bg-inverted,
:host [class*="bg-inverted"],
:host .text-inverted,
:host [class*="text-inverted"] {
    color: #edf3ff !important;
}

:host [class*="bg-default"],
:host [class*="bg-lifted"],
:host [class*="bg-muted"],
:host [class*="bg-inverted"],
:host [class*="rounded-large"][class*="bg-"],
:host [class*="rounded-medium"][class*="bg-"] {
    background: linear-gradient(180deg, rgba(14, 19, 35, 0.98), rgba(9, 13, 24, 0.98)) !important;
    border-color: rgba(96, 126, 255, 0.14) !important;
    color: #edf3ff !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34) !important;
}

:host [class*="border-default"],
:host [class*="border-lifted"],
:host [class*="border-muted"] {
    border-color: rgba(96, 126, 255, 0.14) !important;
}

:host [class*="text-default"],
:host [class*="text-lifted"],
:host [class*="text-muted"],
:host p,
:host li,
:host span,
:host small {
    color: #c7d5f0 !important;
}

:host h1,
:host h2,
:host h3,
:host h4,
:host h5,
:host h6,
:host [class*="font-semibold"],
:host [class*="font-bold"] {
    color: #f3f7ff !important;
}

:host [class*="price"],
:host [class*="amount"],
:host [class*="currency"],
:host [class*="text-primary"] {
    color: #9fc4ff !important;
}

body {
    background: linear-gradient(180deg, #070b16 0%, #0b1223 100%) !important;
}

#order-standard_cart {
    color: #edf3ff;
}

.nexus-cart-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2rem 1.5rem 1rem;
}

.nexus-cart-hero {
    margin-bottom: 1.25rem;
    padding: 1.6rem;
    border: 1px solid rgba(96, 126, 255, 0.14);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(75, 219, 255, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(13, 18, 34, 0.98), rgba(8, 11, 22, 0.98));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34);
}

.nexus-cart-kicker {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #9fc4ff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nexus-cart-hero h1 {
    margin: 0 0 0.8rem;
    color: #f3f7ff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.08;
}

.nexus-cart-hero p {
    margin: 0;
    max-width: 920px;
    color: #b7c5e3;
    font-size: 1rem;
}

.nexus-cart-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(96, 126, 255, 0.14);
    border-radius: 22px;
    background: rgba(10, 15, 28, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.nexus-cart-search {
    flex: 1 1 320px;
}

.nexus-cart-sort {
    flex: 0 1 240px;
}

.nexus-cart-search .form-control {
    height: 52px;
    border: 1px solid rgba(96, 126, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #edf3ff;
    box-shadow: none;
}

.nexus-cart-search .form-control::placeholder {
    color: rgba(214, 225, 248, 0.55);
}

.nexus-cart-sort .form-control {
    height: 52px;
    border: 1px solid rgba(96, 126, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #edf3ff;
    box-shadow: none;
}

.nexus-cart-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.nexus-cart-filter {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(96, 126, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #dce7ff;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nexus-cart-filter:hover,
.nexus-cart-filter.is-active {
    background: linear-gradient(135deg, #7ea6ff, #4bdbff);
    color: #07101f;
    border-color: transparent;
}

.nexus-cart-toolbar-note {
    width: 100%;
    margin: 0;
    color: #9fb0d4;
    font-size: 0.92rem;
}

#order-standard_cart .row {
    margin: 0 auto;
    max-width: 1240px;
    padding: 0 1.5rem 2rem;
}

#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body {
    background: transparent;
}

@media (max-width: 767.98px) {
    .nexus-cart-shell,
    #order-standard_cart .row {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nexus-cart-toolbar {
        padding: 1rem;
    }
}