/*
 * ApexCloud Pro Secure polish for Nexus Cart order form.
 * Loaded inside Nexus Cart Shadow DOM after the vendor stylesheet.
 * v4.8.9: cart view polish; standard WHMCS order logic restored on form pages.
 */
:host,
:root {
    /* Brand palette: TEJ INFO / ApexCloud */
    --vl-primary-50: #eff6ff;
    --vl-primary-100: #dbeafe;
    --vl-primary-200: #bfdbfe;
    --vl-primary-300: #93c5fd;
    --vl-primary-400: #60a5fa;
    --vl-primary-500: #2f86ff;
    --vl-primary-600: #0f6df5;
    --vl-primary-700: #075cd7;
    --vl-primary-800: #084aa6;
    --vl-primary-900: #0c3b7a;
    --vl-primary-950: #092653;

    --vl-neutral-50: #f8fbff;
    --vl-neutral-100: #eef4fb;
    --vl-neutral-200: #dfe9f6;
    --vl-neutral-300: #c8d6e8;
    --vl-neutral-400: #98a7bb;
    --vl-neutral-500: #667085;
    --vl-neutral-600: #475467;
    --vl-neutral-700: #344054;
    --vl-neutral-800: #1d2939;
    --vl-neutral-900: #07182f;
    --vl-neutral-950: #04101f;

    --vl-primary: #0f6df5;
    --vl-primary-lifted: #075cd7;
    --vl-primary-accented: #084aa6;
    --vl-secondary: #667085;
    --vl-secondary-lifted: #475467;
    --vl-secondary-accented: #344054;

    --vl-success: #12b76a;
    --vl-success-lifted: #039855;
    --vl-success-accented: #027a48;
    --vl-info: #0f6df5;
    --vl-info-lifted: #075cd7;
    --vl-info-accented: #084aa6;
    --vl-notice: #6938ef;
    --vl-notice-lifted: #5925dc;
    --vl-notice-accented: #4a1fb8;
    --vl-warning: #f79009;
    --vl-warning-lifted: #dc6803;
    --vl-warning-accented: #b54708;
    --vl-error: #f04438;
    --vl-error-lifted: #d92d20;
    --vl-error-accented: #b42318;

    --vl-grayscale: #07182f;
    --vl-grayscale-lifted: #1d2939;
    --vl-grayscale-accented: #344054;
    --vl-neutral: #667085;
    --vl-neutral-lifted: #475467;
    --vl-neutral-accented: #344054;

    --vl-text-inverted: #ffffff;
    --vl-text-muted: #667085;
    --vl-text-lifted: #475467;
    --vl-text-accented: #344054;
    --vl-text: #07182f;

    --vl-border-muted: #edf2fa;
    --vl-border: #dbe7f8;
    --vl-border-lifted: #c8d8ee;
    --vl-border-accented: #98a7bb;

    --vl-bg: #ffffff;
    --vl-bg-muted: #f8fbff;
    --vl-bg-lifted: #eef6ff;
    --vl-bg-accented: #e6f0ff;
    --vl-bg-inverted: #07182f;

    --vl-text-xs: .75rem;
    --vl-text-sm: .875rem;
    --vl-text-md: .965rem;
    --vl-text-lg: 1.125rem;
    --vl-outline-sm: 1px;
    --vl-outline-md: 2px;
    --vl-outline-lg: 3px;
    --vl-rounding-sm: .75rem;
    --vl-rounding-md: 1rem;
    --vl-rounding-lg: 1.35rem;
    /* IMPORTANT: Nexus Cart/Tailwind uses this as the base unit.
       Keep it at .25rem; 1rem makes select boxes, icons, gaps and padding 4x too large. */
    --vl-spacing: .25rem;
    --spacing: .25rem;
    --vl-letter-spacing: -0.01em;
    --vl-disabled-opacity: 45%;

    color-scheme: light;
    font-family: 'DM Sans', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:host {
    display: block;
    width: 100%;
    min-height: 560px;
}

* {
    font-family: inherit;
}

/* Dark mode mirrors the ApexCloud theme toggle. */
:host-context(body.apx-dark),
:host(.vl-dark) {
    --vl-bg: #0b1729;
    --vl-bg-muted: #07111f;
    --vl-bg-lifted: #10243f;
    --vl-bg-accented: #162c4d;
    --vl-bg-inverted: #f8fafc;
    --vl-text: #f8fafc;
    --vl-text-muted: #9fb2cc;
    --vl-text-lifted: #dbeafe;
    --vl-text-accented: #f8fafc;
    --vl-text-inverted: #07182f;
    --vl-border-muted: #1e3353;
    --vl-border: #263955;
    --vl-border-lifted: #345173;
    --vl-border-accented: #5d7fa9;
    --vl-grayscale: #f8fafc;
    --vl-grayscale-lifted: #dbeafe;
    --vl-grayscale-accented: #9fb2cc;
    color-scheme: dark;
}

/* Nexus utility overrides */
.bg-default {
    background-color: var(--vl-bg) !important;
}

.bg-muted {
    background: linear-gradient(180deg, var(--vl-bg-muted), #ffffff) !important;
}

:host-context(body.apx-dark) .bg-muted,
:host(.vl-dark) .bg-muted {
    background: linear-gradient(180deg, #07111f, #0b1729) !important;
}

.border-default,
.border-muted,
.divide-default > :not(:last-child),
.divide-muted > :not(:last-child) {
    border-color: var(--vl-border) !important;
}

.rounded-large {
    border-radius: 24px !important;
}

.rounded-medium {
    border-radius: 16px !important;
}

.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
[class*="shadow-"] {
    box-shadow: 0 18px 48px rgba(15, 109, 245, .08) !important;
}

.text-primary,
.hover\:text-primary:hover {
    color: var(--vl-primary) !important;
}

.bg-primary,
.hover\:bg-primary:hover,
button.bg-primary,
a.bg-primary {
    background: linear-gradient(135deg, #0f6df5, #075cd7) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 14px 32px rgba(15, 109, 245, .22) !important;
}

button,
a,
[role="button"] {
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

button:not(:disabled):hover,
a[href]:hover,
[role="button"]:not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
}

input,
select,
textarea {
    border-color: var(--vl-border) !important;
    border-radius: 14px !important;
    background-color: var(--vl-bg) !important;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .03) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0 !important;
    border-color: #0f6df5 !important;
    box-shadow: 0 0 0 4px rgba(15, 109, 245, .12) !important;
}

/* Cart layout refinement */
@media (min-width: 768px) {
    .md\:w-3\/5 {
        width: 62% !important;
    }

    .md\:w-2\/5 {
        width: 38% !important;
    }
}

.gap-8 {
    gap: 1.75rem !important;
}

.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.py-6 {
    padding-top: 1.7rem !important;
    padding-bottom: 1.7rem !important;
}

.pt-10 {
    padding-top: 2rem !important;
}

/* Keep the order summary premium but compact on smaller desktop widths. */
@media (max-width: 1180px) and (min-width: 768px) {
    .md\:flex-row {
        flex-direction: column !important;
    }

    .md\:w-3\/5,
    .md\:w-2\/5 {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    :host {
        min-height: 420px;
    }

    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-6,
    .pt-10,
    .pb-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .rounded-large {
        border-radius: 18px !important;
    }
}


/* v4.8.2 final compact cart polish */
:host {
    --apx-cart-gap: 1.35rem;
}

/* Make the cart feel native inside the ApexCloud client area, without oversized empty whitespace. */
.gap-8 {
    gap: var(--apx-cart-gap) !important;
}

.py-6 {
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
}

.pt-10 {
    padding-top: 1.55rem !important;
}

.pb-6 {
    padding-bottom: 1.35rem !important;
}

.px-8 {
    padding-left: 1.65rem !important;
    padding-right: 1.65rem !important;
}

/* Keep product/domain cards balanced. */
.bg-default,
.bg-muted {
    min-width: 0 !important;
}

/* Better select/input height after fixing Nexus spacing variable. */
input,
select,
textarea,
button {
    min-height: 42px;
}

/* Product/domain price block should remain readable on medium screens. */
@media (min-width: 981px) {
    .md\:w-3\/5 {
        width: 61% !important;
    }
    .md\:w-2\/5 {
        width: 39% !important;
    }
}

/* On small laptop widths, column layout is cleaner inside the fixed ApexCloud sidebar. */
@media (max-width: 1280px) and (min-width: 768px) {
    .md\:flex-row {
        flex-direction: column !important;
    }
    .md\:w-3\/5,
    .md\:w-2\/5 {
        width: 100% !important;
    }
    .pt-10 {
        padding-top: 1.25rem !important;
    }
}

/* Checkout CTA should never be hidden by the page bottom or browser taskbar. */
@media (min-width: 768px) {
    :host > div {
        padding-bottom: 1.5rem !important;
    }
}


/* ApexCloud v4.8.3 - cart heading padding + promo button visibility fix */
:host {
    --apx-cart-inner-x: clamp(1.15rem, 1.65vw, 1.75rem);
}

/* Add a clean inner gutter to the left cart column so the back link/title do not sit too close to the edge. */
.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default {
    padding-left: var(--apx-cart-inner-x) !important;
    padding-right: var(--apx-cart-inner-x) !important;
}

/* Reduce vertical gaps slightly so the promo section and its button are visible on laptop screens. */
.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default > .flex.flex-col.gap-6 {
    gap: 1rem !important;
}

.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default .p-4,
.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default .md\:p-6 {
    padding: 1.15rem !important;
}

/* Promo/tax card: keep it compact and make Apply visible beside the field on desktop. */
.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default .mt-4:has(input[placeholder*="promo" i]) {
    margin-top: .75rem !important;
    padding: 1rem 1.15rem !important;
}

.flex.flex-col.md\:flex-row.gap-8.items-stretch > .bg-default .mt-4:has(input[placeholder*="promo" i]) .mb-4 {
    margin-bottom: .75rem !important;
}

.flex.flex-col.gap-3:has(input[placeholder*="promo" i]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 152px !important;
    align-items: stretch !important;
    gap: .75rem !important;
    width: 100% !important;
}

.flex.flex-col.gap-3:has(input[placeholder*="promo" i]) > * {
    min-width: 0 !important;
}

.flex.flex-col.gap-3:has(input[placeholder*="promo" i]) button {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 15px !important;
    white-space: nowrap !important;
}

.flex.flex-col.gap-3:has(input[placeholder*="promo" i]) button:disabled {
    opacity: 1 !important;
    background: #d8dce4 !important;
    color: #778196 !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Keep input height aligned with the Apply button. */
.flex.flex-col.gap-3:has(input[placeholder*="promo" i]) input {
    min-height: 44px !important;
}

@media (max-width: 720px) {
    :host {
        --apx-cart-inner-x: 1rem;
    }

    .flex.flex-col.gap-3:has(input[placeholder*="promo" i]) {
        grid-template-columns: 1fr !important;
    }

    .flex.flex-col.gap-3:has(input[placeholder*="promo" i]) button {
        width: 100% !important;
    }
}


/* ApexCloud v4.9.0: restore Nexus required common.tpl without showing standard_cart side UI */
.apx-nexus-cart-page ~ .cart-sidebar,
.apx-nexus-domain-page ~ .cart-sidebar,
#order-standard_cart.apx-nexus-cart-page .cart-sidebar,
#order-standard_cart.apx-nexus-domain-page .cart-sidebar,
#order-standard_cart.apx-nexus-cart-page .secondary-cart-sidebar,
#order-standard_cart.apx-nexus-domain-page .secondary-cart-sidebar { display:none !important; }
#order-standard_cart.apx-nexus-cart-page,
#order-standard_cart.apx-nexus-domain-page { width:100% !important; }
#order-standard_cart.apx-nexus-cart-page .apx-nexus-cart-shell,
#order-standard_cart.apx-nexus-domain-page .apx-nexus-domain-shell { width:100% !important; }


/* v4.9.4 emergency stable restore: reverted form-heavy pages to WHMCS standard_cart logic while preserving Nexus viewcart. */

/* v4.9.5 update: merged Nexus Cart latest uploaded 9.0.5 core JS while preserving ApexCloud safe WHMCS form logic. */