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

/* ===== Rahkarnet: compact, centered cart layout ===== */
/* Two columns: fluid cart list + fixed-width order summary */
[class*="md:flex-row"][class*="items-stretch"] {
    align-items: flex-start;
    gap: 24px;
}
[class*="md:w-3/5"] {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    background: transparent;
    padding-block: 8px;
}
[class*="md:w-2/5"] {
    flex: 0 0 380px;
    width: 380px;
    max-width: 100%;
    position: sticky;
    top: 16px;
    padding: 24px 20px;
    border: 1px solid var(--vl-border-muted, #e5e7eb);
    border-radius: 16px;
}
/* Titles are oversized on a full-width page */
[class*="text-2xl"] {
    font-size: 1.25rem;
}
/* Pay button must not float over the totals */
button[class*="sticky"][class*="bottom-"] {
    position: static;
}
@media (max-width: 767px) {
    [class*="md:w-2/5"] {
        position: static;
        flex-basis: auto;
        width: 100%;
    }
}

/* Order summary: tighter spacing so totals + pay button fit on screen */
[class*="md:w-2/5"] {
    position: static;
    padding: 20px 16px;
}
[class*="md:w-2/5"] [class*="gap-6"] { gap: 14px; }
[class*="md:w-2/5"] [class*="gap-3"] { gap: 8px; }
[class*="md:w-2/5"] [class*="rounded-large"][class*="py-3"] {
    padding: 10px 12px;
}
[class*="md:w-2/5"] [class*="rounded-large"][class*="py-3"] > div {
    align-items: center;
    gap: 12px;
}
[class*="md:w-2/5"] [class*="rounded-large"][class*="py-3"] button {
    padding: 6px 12px;
}

/* Hide "last chance" upsell block in the order summary */
[class*="md:w-2/5"] > div > div[class*="gap-6"]:has([class*="rounded-large"][class*="py-3"]) {
    display: none;
}
/* Hide the "Cart > Checkout" step breadcrumb next to the page title */
[class*="md:w-3/5"] > div > div[class*="items-baseline"] > div:not([class*="text-2xl"]) {
    display: none;
}

/* Hide the "Browse products & services" back link above the cart title */
[class*="md:w-3/5"] > div > div:first-child:has(> svg):has(> a) {
    display: none;
}

/* Desktop grid: title on top spanning both columns, cart list and summary top-aligned below it */
@media (min-width: 768px) {
    [class*="md:flex-row"][class*="items-stretch"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 24px;
        row-gap: 16px;
        align-items: start;
    }
    [class*="md:w-3/5"],
    [class*="md:w-3/5"] > div {
        display: contents;
    }
    [class*="md:w-3/5"] > div > div[class*="items-baseline"] {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    [class*="md:w-2/5"] {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: start;
    }
}

/* Coupon box: drop the tabs (tax estimate is removed), one compact row: input + apply button */
[class*="md:w-3/5"] > div > div[class*="bg-muted"] {
    padding: 12px;
    margin-top: 0;
    background: transparent;
}
[class*="md:w-3/5"] > div > div[class*="bg-muted"] > div:first-child:has(button) {
    display: none;
}
[class*="md:w-3/5"] > div > div[class*="bg-muted"] > div[class*="gap-3"] {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}
[class*="md:w-3/5"] > div > div[class*="bg-muted"] > div[class*="gap-3"] > div {
    flex: 1 1 0;
    min-width: 0;
}
[class*="md:w-3/5"] > div > div[class*="bg-muted"] > div[class*="gap-3"] > button {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 20px;
}
@media (max-width: 480px) {
    [class*="md:w-3/5"] > div > div[class*="bg-muted"] > div[class*="gap-3"] {
        flex-direction: column;
    }
}

/* ===== Rahkarnet: checkout page (scoped to the page that contains #frmCheckout) ===== */
body #order-standard_cart:has(#frmCheckout) {
    --co-border: #e5e7eb;
    --co-muted: #6b7280;
    --co-radius: 12px;
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px 56px;
}

/* Page title */
#order-standard_cart:has(#frmCheckout) .header-lined {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
}
#order-standard_cart:has(#frmCheckout) .header-lined h1 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: right;
}

/* "Already registered?" bar */
#order-standard_cart:has(#frmCheckout) .already-registered {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #f9fafb;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
}
#order-standard_cart:has(#frmCheckout) .already-registered::after { display: none; }
#order-standard_cart:has(#frmCheckout) .already-registered .pull-right,
#order-standard_cart:has(#frmCheckout) .already-registered .float-right {
    float: none !important;
    flex: 0 0 auto;
}
#order-standard_cart:has(#frmCheckout) .already-registered p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--co-muted);
}
#order-standard_cart:has(#frmCheckout) .already-registered .btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* Section headings: plain title + underline instead of the centered line-through style */
#order-standard_cart:has(#frmCheckout) .sub-heading {
    height: auto;
    border: 0;
    border-bottom: 1px solid var(--co-border);
    text-align: right;
    margin: 32px 0 16px;
    padding-bottom: 8px;
}
#order-standard_cart:has(#frmCheckout) .sub-heading span {
    position: static;
    display: inline;
    padding: 0;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #111827);
}
#order-standard_cart:has(#frmCheckout) .sub-heading span small,
#order-standard_cart:has(#frmCheckout) .sub-heading small {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--co-muted);
}

/* Fields */
#order-standard_cart:has(#frmCheckout) .form-group { margin-bottom: 14px; }
#order-standard_cart:has(#frmCheckout) .field,
#order-standard_cart:has(#frmCheckout) .form-control {
    height: 44px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    box-shadow: none;
    font-size: 0.95rem;
}
#order-standard_cart:has(#frmCheckout) textarea.field,
#order-standard_cart:has(#frmCheckout) textarea.form-control {
    height: auto;
    min-height: 90px;
}
#order-standard_cart:has(#frmCheckout) .field:focus,
#order-standard_cart:has(#frmCheckout) .form-control:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

/* Password strength: slimmer, tidier hint */
#order-standard_cart:has(#frmCheckout) #passwordStrengthTextLabel,
#order-standard_cart:has(#frmCheckout) .password-strength-meter {
    font-size: 0.8rem;
    color: var(--co-muted);
}
#order-standard_cart:has(#frmCheckout) .progress {
    height: 6px;
    border-radius: 6px;
}
#order-standard_cart:has(#frmCheckout) #btnGeneratePassword,
#order-standard_cart:has(#frmCheckout) .generate-password {
    border-radius: 10px;
    height: 44px;
}

/* Total due */
#order-standard_cart:has(#frmCheckout) #totalDueToday {
    padding: 14px 16px;
    font-size: 1rem;
    text-align: right;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: var(--co-radius);
}
#order-standard_cart:has(#frmCheckout) #totalDueToday strong { font-size: 1.15rem; }

/* Payment gateways as selectable cards */
#order-standard_cart:has(#frmCheckout) #paymentGatewaysContainer .text-center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
#order-standard_cart:has(#frmCheckout) #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    min-width: 200px;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    cursor: pointer;
}
#order-standard_cart:has(#frmCheckout) #paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: #111827;
    background: #f9fafb;
}
#order-standard_cart:has(#frmCheckout) #paymentGatewaysContainer > p { margin-bottom: 10px; }

/* Newsletter opt-in: a compact row instead of a big block */
#order-standard_cart:has(#frmCheckout) .marketing-email-optin {
    margin: 24px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
}
#order-standard_cart:has(#frmCheckout) .marketing-email-optin h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}
#order-standard_cart:has(#frmCheckout) .marketing-email-optin p {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--co-muted);
}

/* Submit */
#order-standard_cart:has(#frmCheckout) form > .text-center { margin-top: 24px; }
#order-standard_cart:has(#frmCheckout) #btnCompleteOrder {
    min-width: 260px;
    padding: 12px 28px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--co-radius);
}

/* Secure-form notice: unobtrusive footnote */
#order-standard_cart:has(#frmCheckout) .checkout-security-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--co-muted);
    background: #f9fafb;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
}
#order-standard_cart:has(#frmCheckout) .checkout-security-msg i {
    font-size: 1rem;
    color: var(--co-muted);
}

@media (max-width: 575px) {
    #order-standard_cart:has(#frmCheckout) .already-registered {
        flex-direction: column;
        align-items: stretch;
        text-align: right;
    }
    #order-standard_cart:has(#frmCheckout) #btnCompleteOrder { width: 100%; min-width: 0; }
    #order-standard_cart:has(#frmCheckout) #paymentGatewaysContainer .radio-inline { width: 100%; }
}

/* Checkout fixes: icon vertical centering, security notice, generate-password button */
#order-standard_cart:has(#frmCheckout) .prepend-icon .field-icon {
    top: 0;
    height: 44px;
    line-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
#order-standard_cart:has(#frmCheckout) .prepend-icon .field-icon i {
    line-height: 1;
}
#order-standard_cart:has(#frmCheckout) .checkout-security-msg {
    position: static;
    padding: 10px 14px !important;
}
#order-standard_cart:has(#frmCheckout) .checkout-security-msg i {
    position: static;
    float: none;
    margin: 0;
    flex: 0 0 auto;
}
#order-standard_cart:has(#frmCheckout) .checkout-security-msg .clearfix { display: none; }
#order-standard_cart:has(#frmCheckout) #frmCheckout .btn-default,
#order-standard_cart:has(#frmCheckout) #frmCheckout .btn-secondary {
    height: 44px;
    border-radius: 10px;
}