/* Nexus One SaaS Messaging & Lead Credits Checkout
 * Brand: Nexus One
 * Author: Brand Works App
 * Color refresh: 17.0.2.1.1
 */

.nexus_credit_checkout_step {
    --nexus-credit-accent: #0795a6;
    --nexus-credit-ink: #202b3a;
    --nexus-credit-muted: #6b7686;
    --nexus-credit-border: #dfe6ee;
    --nexus-credit-soft: #f4fbfc;
    --nexus-sms-accent: #0795a6;
    --nexus-sms-accent-2: #15b8a6;
    --nexus-sms-soft: #effcfc;
    --nexus-sms-soft-2: #e7f8f6;
    --nexus-lead-accent: #6558e8;
    --nexus-lead-accent-2: #8b5cf6;
    --nexus-lead-soft: #f6f4ff;
    --nexus-lead-soft-2: #eef3ff;
}

.nexus_credit_once_summary {
    min-width: 160px;
    padding: 14px 20px;
    border: 1px solid #cfe1e8;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f4fbfd 100%);
    box-shadow: 0 10px 26px rgba(32, 43, 58, .06);
    text-align: right;
}

.nexus_credit_once_summary span,
.nexus_credit_once_summary strong {
    display: block;
}

.nexus_credit_once_summary span {
    color: var(--nexus-credit-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nexus_credit_once_summary strong {
    margin-top: 2px;
    color: var(--nexus-credit-accent);
    font-size: 22px;
}

.nexus_credit_plan_allowance,
.nexus_credit_charge_notice,
.nexus_credit_empty_notice {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 15px 17px;
    border: 1px solid #bfe9ef;
    border-radius: 14px;
    background:
        radial-gradient(circle at 94% 20%, rgba(101, 88, 232, .10) 0, rgba(101, 88, 232, 0) 19%),
        radial-gradient(circle at 83% 100%, rgba(21, 184, 166, .16) 0, rgba(21, 184, 166, 0) 28%),
        linear-gradient(110deg, #eefcfd 0%, #f6fbff 60%, #f7f5ff 100%);
    color: var(--nexus-credit-ink);
}

.nexus_credit_plan_allowance::after {
    content: '';
    position: absolute;
    right: 24px;
    bottom: -38px;
    width: 150px;
    height: 76px;
    border-radius: 50%;
    background: rgba(7, 149, 166, .08);
    transform: rotate(-8deg);
    pointer-events: none;
}

.nexus_credit_plan_allowance > .fa,
.nexus_credit_charge_notice > .fa,
.nexus_credit_empty_notice > .fa {
    position: relative;
    z-index: 1;
    margin-top: 2px;
    color: var(--nexus-credit-accent);
    font-size: 18px;
}

.nexus_credit_plan_allowance div,
.nexus_credit_charge_notice div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
}

.nexus_credit_plan_allowance span:last-child,
.nexus_credit_charge_notice span:last-child,
.nexus_credit_empty_notice span:last-child {
    color: var(--nexus-credit-muted);
    font-size: 13px;
    line-height: 1.45;
}

.nexus_credit_service_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.nexus_credit_service_card {
    --service-accent: var(--nexus-credit-accent);
    --service-accent-2: var(--nexus-sms-accent-2);
    --service-soft: var(--nexus-sms-soft);
    --service-soft-2: var(--nexus-sms-soft-2);
    position: relative;
    overflow: hidden;
    border: 1px solid #cce8eb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
    box-shadow: 0 16px 38px rgba(34, 48, 68, .07);
}

.nexus_credit_service_card[data-credit-service="sms"] {
    --service-accent: var(--nexus-sms-accent);
    --service-accent-2: var(--nexus-sms-accent-2);
    --service-soft: var(--nexus-sms-soft);
    --service-soft-2: var(--nexus-sms-soft-2);
    border-color: #bfe8ea;
    box-shadow: 0 16px 38px rgba(7, 149, 166, .08);
}

.nexus_credit_service_card[data-credit-service="lead"] {
    --service-accent: var(--nexus-lead-accent);
    --service-accent-2: var(--nexus-lead-accent-2);
    --service-soft: var(--nexus-lead-soft);
    --service-soft-2: var(--nexus-lead-soft-2);
    border-color: #d8d3fa;
    box-shadow: 0 16px 38px rgba(101, 88, 232, .08);
}

.nexus_credit_service_head {
    position: relative;
    display: flex;
    gap: 14px;
    min-height: 112px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--service-accent) 14%, #e9eef4);
    background:
        radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--service-accent) 12%, transparent) 0, transparent 26%),
        linear-gradient(135deg, var(--service-soft) 0%, #ffffff 70%);
}

.nexus_credit_service_head::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 14px;
    width: 62px;
    height: 34px;
    opacity: .55;
    background-image: radial-gradient(circle, var(--service-accent) 1.5px, transparent 1.6px);
    background-size: 9px 9px;
    pointer-events: none;
}

.nexus_credit_service_card[data-credit-service="lead"] .nexus_credit_service_head::after {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    opacity: .12;
    background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
}

.nexus_credit_service_icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--service-accent) 18%, transparent);
    border-radius: 13px;
    background: linear-gradient(145deg, #ffffff 0%, var(--service-soft-2) 100%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--service-accent) 18%, transparent);
    color: var(--service-accent);
    font-size: 18px;
}

.nexus_credit_service_card[data-credit-service="lead"] .nexus_credit_service_icon {
    background: linear-gradient(145deg, #ffffff 0%, #eeeaff 100%);
}

.nexus_credit_service_kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--service-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nexus_credit_service_head h3 {
    margin: 0;
    color: var(--nexus-credit-ink);
    font-size: 18px;
    font-weight: 800;
}

.nexus_credit_service_head p {
    margin: 5px 0 0;
    color: var(--nexus-credit-muted);
    font-size: 13px;
    line-height: 1.45;
}

.nexus_credit_options {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--service-soft) 55%, #ffffff) 100%);
}

.nexus_credit_option {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--service-accent) 17%, #dfe6ee);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    color: var(--nexus-credit-ink);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.nexus_credit_option:hover {
    border-color: color-mix(in srgb, var(--service-accent) 58%, #ffffff);
    background: linear-gradient(110deg, #ffffff 0%, var(--service-soft) 100%);
    box-shadow: 0 9px 22px color-mix(in srgb, var(--service-accent) 13%, transparent);
    transform: translateY(-1px);
}

.nexus_credit_option.is-selected {
    border-color: var(--service-accent);
    background: linear-gradient(110deg, var(--service-soft) 0%, #ffffff 68%, var(--service-soft-2) 100%);
    box-shadow: 0 0 0 1px var(--service-accent), 0 11px 26px color-mix(in srgb, var(--service-accent) 16%, transparent);
}

.nexus_credit_option.is-popular:not(.is-selected) {
    border-color: color-mix(in srgb, var(--service-accent) 38%, #dfe6ee);
    background: linear-gradient(110deg, #ffffff 0%, color-mix(in srgb, var(--service-soft) 66%, #ffffff) 100%);
}

.nexus_credit_option_icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #ffffff 0%, var(--service-soft-2) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--service-accent) 9%, transparent);
    color: var(--service-accent);
}

.nexus_credit_option.is-selected .nexus_credit_option_icon {
    background: linear-gradient(145deg, var(--service-accent) 0%, var(--service-accent-2) 100%);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--service-accent) 22%, transparent);
    color: #fff;
}

.nexus_credit_option_copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.nexus_credit_option_copy strong,
.nexus_credit_option_copy b,
.nexus_credit_option_copy small {
    display: block;
}

.nexus_credit_option_copy strong {
    color: var(--nexus-credit-ink);
    font-size: 14px;
    font-weight: 800;
}

.nexus_credit_option_copy b {
    color: var(--service-accent);
    font-size: 12px;
    font-weight: 900;
}

.nexus_credit_option_copy small {
    overflow: hidden;
    color: var(--nexus-credit-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.nexus_credit_option_price {
    display: grid;
    justify-items: end;
    min-width: 78px;
    color: var(--service-accent);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.nexus_credit_option_price strong {
    font-size: 15px;
}

.nexus_credit_option_price small {
    color: var(--nexus-credit-muted);
    font-size: 10px;
    font-weight: 600;
}

.nexus_credit_option_badge {
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--service-accent), var(--service-accent-2));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--service-accent) 24%, transparent);
    color: #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nexus_credit_charge_notice {
    margin: 18px 0 0;
    border-color: #d7e2eb;
    background: linear-gradient(110deg, #f8fafc 0%, #f3f8fb 100%);
}

.nexus_credit_empty_notice[hidden] {
    display: none !important;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nexus_credit_service_head {
        border-bottom-color: #e7edf3;
    }

    .nexus_credit_service_icon,
    .nexus_credit_option,
    .nexus_credit_option.is-popular:not(.is-selected) {
        border-color: var(--nexus-credit-border);
    }

    .nexus_credit_service_icon,
    .nexus_credit_option_icon {
        box-shadow: none;
    }

    .nexus_credit_option:hover,
    .nexus_credit_option.is-selected {
        border-color: var(--service-accent);
    }
}

@media (max-width: 991.98px) {
    .nexus_credit_service_grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .nexus_credit_once_summary {
        width: 100%;
        text-align: left;
    }

    .nexus_credit_service_head {
        min-height: auto;
    }

    .nexus_credit_option {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .nexus_credit_option_price {
        grid-column: 2;
        justify-items: start;
    }
}