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

:host, :root {
    --vl-primary: #653EE6;
    --vl-primary-lifted: #5632C9;
    --vl-primary-accented: #4829AD;

    --vl-secondary: #6B7280;
    --vl-secondary-lifted: #4B5563;
    --vl-secondary-accented: #374151;

    --vl-success: #00A63E;
    --vl-success-lifted: #008236;
    --vl-success-accented: #016630;

    --vl-info: #155DFC;
    --vl-info-lifted: #1447E6;
    --vl-info-accented: #193CB8;

    --vl-notice: #7F22FE;
    --vl-notice-lifted: #7008E7;
    --vl-notice-accented: #5D0EC0;

    --vl-warning: #F54A00;
    --vl-warning-lifted: #CA3500;
    --vl-warning-accented: #9F2D00;

    --vl-error: #E7000B;
    --vl-error-lifted: #C10007;
    --vl-error-accented: #9F0712;

    --vl-grayscale: #111827;
    --vl-grayscale-lifted: #1F2937;
    --vl-grayscale-accented: #374151;

    --vl-neutral: #6B7280;
    --vl-neutral-lifted: #4B5563;
    --vl-neutral-accented: #374151;

    --vl-text-inverted: #FFFFFF;
    --vl-text-muted: #8D86A8;
    --vl-text-lifted: #5B556F;
    --vl-text-accented: #231652;
    --vl-text: #110C2A;

    --vl-border-muted: #EEEAF8;
    --vl-border: #E3E0EE;
    --vl-border-lifted: #D6CFE9;
    --vl-border-accented: #8A78C9;

    --vl-bg: #FFFFFF;
    --vl-bg-muted: #F7F4FF;
    --vl-bg-lifted: #F2EEFF;
    --vl-bg-accented: #EAE3FF;
    --vl-bg-inverted: #110C2A;

    --vl-text-xs: 0.625rem;
    --vl-text-sm: 0.75rem;
    --vl-text-md: 0.875rem;
    --vl-text-lg: 1rem;

    --vl-outline-sm: 1px;
    --vl-outline-md: 2px;
    --vl-outline-lg: 3px;

    --vl-rounding-sm: 10px;
    --vl-rounding-md: 16px;
    --vl-rounding-lg: 24px;

    --vl-letter-spacing: 0;
    --vl-disabled-opacity: 35%;
}

:host {
    display: block;
    color: #110C2A;
    font-family: "Satoshi-Variable", "Satoshi-Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[class~="bg-default"] {
    background: transparent !important;
}

[class~="bg-muted"] {
    background:
        radial-gradient(circle at top right, rgba(101, 62, 230, 0.1), transparent 32%),
        linear-gradient(180deg, #fbf9ff 0%, #f5f1ff 100%) !important;
}

[class~="md:flex-row"][class~="gap-8"][class~="items-stretch"] {
    gap: 28px !important;
    align-items: start !important;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 0 44px;
}

[class~="md:w-3/5"][class~="py-6"] {
    width: 100% !important;
}

@media (min-width: 768px) {
    [class~="md:w-3/5"][class~="py-6"] {
        flex: 0 0 62%;
        max-width: 62%;
    }
}

[class~="border"],
[class~="border-default"],
[class~="border-muted"] {
    border-color: #E7E0F5 !important;
}

[class~="rounded-medium"] {
    border-radius: 18px !important;
}

[class~="rounded-large"] {
    border-radius: 26px !important;
}

[class~="bg-default"][class~="border"],
[class~="bg-default"][class~="border-default"],
[class~="bg-default"][class~="border-muted"],
[class~="bg-muted"][class~="border"],
[class~="bg-muted"][class~="border-default"],
[class~="bg-muted"][class~="border-muted"] {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFBFF 100%) !important;
    box-shadow: 0 18px 45px rgba(17, 12, 42, 0.08);
}

[class~="p-4"][class~="border"],
[class~="p-5"][class~="border"],
[class~="px-4"][class~="py-3"],
[class~="px-8"][class~="pb-6"] > *,
[class~="gap-sm"] > [class~="border"],
[class~="gap-xl"] > [class~="border"] {
    border-radius: 18px;
}

[class~="py-3"][class~="px-4"],
[class~="!p-5"] {
    border: 1px solid #E7E0F5;
    border-radius: 24px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFBFF 100%);
    box-shadow: 0 18px 45px rgba(17, 12, 42, 0.08);
}

[class~="sticky"][class*="bottom-"][class~="w-full"] {
    min-height: 58px;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(101, 62, 230, 0.24);
}

button,
a,
input,
textarea,
select {
    font-family: inherit;
}

input,
textarea,
select,
[class*="placeholder:text-"] {
    border-radius: 14px !important;
}

input,
textarea,
select {
    border-color: #DDD6EF !important;
    background: #FFFFFF !important;
    color: #110C2A !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #653EE6 !important;
    box-shadow: 0 0 0 4px rgba(101, 62, 230, 0.12) !important;
    outline: none;
}

[class~="text-lifted"] {
    color: #6F6885 !important;
}

[class~="text-muted"] {
    color: #8D86A8 !important;
}

[class~="text-default"] {
    color: #110C2A !important;
}

[class~="mt-4"][class~="border"],
[class~="mb-4"][class~="border"] {
    box-shadow: 0 14px 35px rgba(17, 12, 42, 0.06);
}

#order-standard_cart .prepend-icon .field-icon {
    height: 52px !important;
    line-height: 52px !important;
}

#order-standard_cart {
    --checkout-panel-border: #e8e3f2;
    --checkout-panel-bg: #ffffff;
    --checkout-panel-accent: #110c2a;
    --checkout-panel-muted: #f6f3fb;
}

#order-standard_cart #containerNewUserSignup,
#order-standard_cart #containerNewUserSecurity,
#order-standard_cart .domain-registrant-container,
#order-standard_cart #containerExistingUserSignin {
    position: relative;
    margin-bottom: 24px;
    padding: 26px 26px 18px;
    border: 1px solid var(--checkout-panel-border);
    border-radius: 20px;
    background: var(--checkout-panel-bg);
    box-shadow: 0 10px 24px rgba(17, 12, 42, 0.05);
    overflow: hidden;
}

#order-standard_cart #containerNewUserSignup::before,
#order-standard_cart #containerNewUserSecurity::before,
#order-standard_cart .domain-registrant-container::before,
#order-standard_cart #containerExistingUserSignin::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #110c2a 0%, #653ee6 55%, #d9cff7 100%);
}

#order-standard_cart #containerNewUserSignup .sub-heading,
#order-standard_cart #containerNewUserSecurity .sub-heading,
#order-standard_cart .domain-registrant-container .sub-heading,
#order-standard_cart #containerExistingUserSignin .sub-heading {
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #efeaf8;
}

#order-standard_cart #containerNewUserSignup .sub-heading span,
#order-standard_cart #containerNewUserSecurity .sub-heading span,
#order-standard_cart .domain-registrant-container .sub-heading span,
#order-standard_cart #containerExistingUserSignin .sub-heading span {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--checkout-panel-accent) !important;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: none;
}

#order-standard_cart #containerNewUserSignup .small.text-muted,
#order-standard_cart .domain-registrant-container .small.text-muted {
    display: block;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--checkout-panel-muted);
    color: #6f6885 !important;
}

#order-standard_cart #containerNewUserSignup > .row,
#order-standard_cart #containerNewUserSignup > .field-container > .row,
#order-standard_cart #containerNewUserSecurity > .row,
#order-standard_cart #containerExistingUserSignin > .row,
#order-standard_cart .domain-registrant-container .row {
    margin-left: -10px;
    margin-right: -10px;
}

#order-standard_cart #containerNewUserSignup > .row > [class*="col-"],
#order-standard_cart #containerNewUserSignup > .field-container > .row > [class*="col-"],
#order-standard_cart #containerNewUserSecurity > .row > [class*="col-"],
#order-standard_cart #containerExistingUserSignin > .row > [class*="col-"],
#order-standard_cart .domain-registrant-container .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

#order-standard_cart #containerNewUserSignup .field-container {
    margin-top: 6px;
}

#order-standard_cart .domain-registrant-container #domainRegistrantInputFields {
    margin-top: 8px;
}

#order-standard_cart #containerNewUserSignup .form-group,
#order-standard_cart #containerNewUserSecurity .form-group,
#order-standard_cart .domain-registrant-container .form-group,
#order-standard_cart #containerExistingUserSignin .form-group {
    margin-bottom: 18px;
}

#order-standard_cart #containerNewUserSignup .field.form-control,
#order-standard_cart #containerNewUserSignup select.form-control,
#order-standard_cart #containerNewUserSecurity .field.form-control,
#order-standard_cart #containerNewUserSecurity select.form-control,
#order-standard_cart .domain-registrant-container .field.form-control,
#order-standard_cart .domain-registrant-container select.form-control,
#order-standard_cart #containerExistingUserSignin .field.form-control,
#order-standard_cart #containerExistingUserSignin select.form-control {
    border: 1px solid #ddd5ef !important;
    border-radius: 14px !important;
    background: #fbfaff !important;
    box-shadow: none !important;
}

#order-standard_cart #containerNewUserSignup .field.form-control:focus,
#order-standard_cart #containerNewUserSignup select.form-control:focus,
#order-standard_cart #containerNewUserSecurity .field.form-control:focus,
#order-standard_cart #containerNewUserSecurity select.form-control:focus,
#order-standard_cart .domain-registrant-container .field.form-control:focus,
#order-standard_cart .domain-registrant-container select.form-control:focus,
#order-standard_cart #containerExistingUserSignin .field.form-control:focus,
#order-standard_cart #containerExistingUserSignin select.form-control:focus {
    background: #fff !important;
    border-color: #8c6df0 !important;
    box-shadow: 0 0 0 4px rgba(101, 62, 230, 0.1) !important;
}

#order-standard_cart #containerNewUserSignup .field-icon,
#order-standard_cart #containerNewUserSecurity .field-icon,
#order-standard_cart .domain-registrant-container .field-icon,
#order-standard_cart #containerExistingUserSignin .field-icon {
    color: #7f769a !important;
}

@media (max-width: 767.98px) {
    #order-standard_cart #containerNewUserSignup,
    #order-standard_cart #containerNewUserSecurity,
    #order-standard_cart .domain-registrant-container,
    #order-standard_cart #containerExistingUserSignin {
        padding: 22px 18px 14px;
        border-radius: 18px;
    }
}

[class~="min-h-"][class~="bg-inverted"] {
    border-radius: 24px;
}

@media (max-width: 767.98px) {
    [class~="md:flex-row"][class~="gap-8"][class~="items-stretch"] {
        padding: 20px 0 32px;
        gap: 20px !important;
    }

    [class~="sticky"][class*="bottom-"][class~="w-full"] {
        position: static !important;
        margin-top: 8px;
    }
}