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

/* navbar sits at 1020, toast needs to clear it */
.fixed.z-\[1000\] {
    z-index: 1030 !important;
}

: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);
}

/* grayscale is tuned dark for surfaces, icons went near-invisible */
.text-grayscale {
    color: var(--vl-text-muted);
}

/* D1: beats standard_cart scoping, base theme forced black text */
#order-standard_cart .field,
#order-standard_cart .form-control,
body #frmConfigureProduct .form-control {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}

/* D2: checkout account cards */
#order-standard_cart .account-select-container div.account {
    background: var(--bg-lifted);
    border: 1px solid var(--border);
}

#order-standard_cart .account-select-container div.account.active {
    background: var(--bg-accented);
    border-color: var(--primary);
}

/* D3: kill the base theme's grey filter on the sprite */
body #order-standard_cart .icheckbox_square-blue,
body #order-standard_cart .iradio_square-blue,
body #frmConfigureProduct .icheckbox_square-blue {
    width: 20px;
    height: 20px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--rounding-sm);
    box-sizing: border-box;
    filter: none;
}

body #order-standard_cart .iradio_square-blue {
    border-radius: 50%;
}

/* checked fill, kill the filter reapplied on this scope */
body #order-standard_cart .icheckbox_square-blue.checked,
body #order-standard_cart .iradio_square-blue.checked,
body #frmConfigureProduct .icheckbox_square-blue.checked {
    background: var(--primary);
    border: 1px solid var(--primary);
    filter: none;
}

body #order-standard_cart .icheckbox_square-blue.checked::after,
body #order-standard_cart .iradio_square-blue.checked::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 5px auto 0;
    border-radius: 50%;
    background: var(--text-inverted);
}

/* needs body to outrank the shared dot above, tick not a radio dot */
body #order-standard_cart .icheckbox_square-blue.checked::after {
    width: 10px;
    height: 6px;
    margin: 5px auto 0;
    border-radius: 0;
    background: transparent;
    border-left: 2px solid var(--text-inverted);
    border-bottom: 2px solid var(--text-inverted);
    transform: rotate(-45deg);
}

/* 27px clears bootstrap's -15px row margin, real 12px gutter */
@media (max-width: 767px) {
    body #order-standard_cart {
        padding-left: 27px !important;
        padding-right: 27px !important;
    }
    /* nexus cart draws its own panel padding, keep this narrow */
    body #order-standard_cart:has(#nexus-root) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* select sizes to its text, overflows narrow screens */
    body #order-standard_cart select.form-control {
        width: 100%;
        max-width: 100%;
    }
}

/* D5/D6: sits below the app's own 440px breakpoint */
@media (max-width: 439px) {
    /* breadcrumb, shrink one step so "Checkout" fits its column */
    .flex.flex-row.gap-2.items-center.justify-start.content-start {
        --text-small: var(--vl-text-xs);
    }

    /* never break mid-word */
    .flex.flex-row.gap-2.items-center.justify-start.content-start .wrap-anywhere {
        overflow-wrap: normal;
    }

    /* tab labels, fit "Estimate Taxes" */
    .flex.gap-1.w-full.mb-4 {
        --text-large: var(--vl-text-md);
    }
}

/* ===== nexus cart, panel shells ===== */

/* strip wrapper bg, only the panels should read as cards */
.flex.flex-col.md\:flex-row.gap-8.items-stretch {
    background: none !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* match the summary column's padding, both read as cards */
.py-6.w-full.md\:w-3\/5.bg-default {
    padding-left: 2rem;
    padding-right: 2rem;
}
/* same glass treatment as .vx-glass, reads as one system */
.w-full.md\:w-3\/5.bg-default,
.w-full.md\:w-2\/5.bg-muted {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--vl-bg-lifted) 54%, transparent) 0%,
        color-mix(in srgb, var(--vl-bg-muted) 44%, transparent) 100%) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--vl-text) 12%, transparent);
    border-radius: var(--vl-rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 28px -18px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767px) {
    /* narrow screens get a tighter gutter, 2rem eats the row */
    .py-6.w-full.md\:w-3\/5.bg-default {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    .w-full.md\:w-2\/5.bg-muted {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    /* room under the sticky button, now floating clear */
    .w-full.md\:w-2\/5.bg-muted {
        padding-bottom: 1.5rem;
    }
    /* promo code input sizes to its own placeholder and clips */
    input[type="text"],
    input[type="search"] {
        width: 100%;
        min-width: 0;
    }
    /* only spot with adjacent buttons, equal halves fit the label */
    button:not(.bg-primary):has(+ button:not(.bg-primary)),
    button:not(.bg-primary) + button:not(.bg-primary) {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: center;
    }
}

/* ===== nexus cart, narrow-screen product rows ===== */

@media (max-width: 767px) {
    /* cycle select squeezes price column, amount breaks mid-word */
    .flex.flex-row.gap-4.items-end.justify-between.content-start {
        flex-wrap: wrap;
    }
    .flex.flex-row.gap-4.items-end.justify-between.content-start
    > .flex.flex-col.gap-0.items-end.justify-start.content-start {
        flex: 1 1 100%;
        align-items: flex-start;
    }
    /* the cycle select is fixed at 14rem, let it use the row */
    .w-56 {
        width: 100%;
        max-width: 100%;
    }
    /* never break an amount mid-word */
    .flex.flex-col.gap-0.items-end.justify-start.content-start .wrap-anywhere {
        overflow-wrap: normal;
        white-space: nowrap;
    }
    /* was covering the promo tabs while scrolling, pull off the edge */
    .sticky.bottom-\[50px\] {
        bottom: 0.75rem;
    }
}

/* config option layout moved to custom.css, next to its markup */

/* config option select matches its neighbours */
body #frmConfigureProduct select.form-control:not(.custom-select) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2.25rem;
}

/* even rhythm across additional-information fields too */
body #frmConfigureProduct .field-container .form-group:last-child {
    margin-bottom: 0;
}

/* fixed offset removed, see checkout block in custom.css */

/* ===== addon cards =====
   stock cart centres and shrinks these, and iCheck swaps the checkbox for a
   skin div, which the flex row then shrank from 20px flat to 8px.
   this file loads after both, so it resets the layout around them. */

#order-standard_cart .vx-cfg-grid.addon-products {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}

/* one text column shared by name, price and description, so the card
   reads down a single left edge instead of three */
#order-standard_cart .vx-addon {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    column-gap: 0.7rem;
    align-content: start;
    padding: 1.15rem 1.25rem;
    font-size: 1rem;
    text-align: left;
    border-radius: var(--rounding-md);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 160ms ease-out, background-color 160ms ease-out,
                box-shadow 160ms ease-out;
}
#order-standard_cart .vx-addon:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* the row wrapper steps aside, its children join the card grid */
#order-standard_cart .vx-addon .vx-addon-top {
    display: contents;
}
/* the theme already styles this box, it was only being shrunk flat */
#order-standard_cart .vx-addon .icheckbox_square-blue,
#order-standard_cart .vx-addon input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    margin: 0.15rem 0 0;
}
#order-standard_cart .vx-addon:hover .icheckbox_square-blue {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}

#order-standard_cart .vx-addon .vx-addon-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}
#order-standard_cart .vx-addon .vx-addon-price {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
#order-standard_cart .vx-addon .vx-addon-desc {
    grid-column: 2;
    grid-row: 3;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: left;
    color: var(--text-muted);
}

/* selected: stock JS sets panel-addon-selected, iCheck sets .checked */
#order-standard_cart .vx-addon.panel-addon-selected,
#order-standard_cart .vx-addon:has(.checked),
#order-standard_cart .vx-addon:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .vx-addon {
        transition: none;
    }
}