/*
 * 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: var(--primary);
    --vl-primary-lifted: var(--primary-lifted);
    --vl-primary-accented: var(--primary-accented);

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* 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);
}
.ultra-domain-wrapper{
    direction:rtl;
    font-family:Vazirmatn,sans-serif;
    background:#f5f7fb;
}

/* HERO */
.ultra-hero{
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    color:#fff;
}

.ultra-hero h1{
    font-size:42px;
    font-weight:800;
}

/* CART */
.ultra-cart{
    max-width:1200px;
    margin:-60px auto 100px;
}

.ultra-cart-card{
    background:#fff;
    padding:40px;
    border-radius:28px;
    box-shadow:0 40px 80px rgba(0,0,0,.08);
}

/* WHY */
.ultra-why{
    padding:80px 20px;
    text-align:center;
}

.why-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    margin-top:50px;
}

.why-box{
    background:#fff;
    width:240px;
    padding:35px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.06);
    transition:.3s;
}

.why-box:hover{
    transform:translateY(-8px);
}

.counter{
    font-size:36px;
    font-weight:800;
    color:#4f46e5;
}

/* LIVE */
.ultra-live{
    padding:70px 20px;
    text-align:center;
}

.live-random{
    font-size:48px;
    font-weight:900;
    color:#111827;
}

/* CHARTS */
.ultra-charts{
    max-width:1200px;
    margin:0 auto 140px;
    display:flex;
    gap:40px;
}

.chart-card{
    background:#fff;
    flex:1;
    padding:30px;
    border-radius:24px;
    box-shadow:0 25px 50px rgba(0,0,0,.07);
}

@media(max-width:992px){
    .ultra-charts{
        flex-direction:column;
    }
}