html.cvpn-checkout-open,
html.cvpn-checkout-open body {
    overflow: hidden !important;
}

#cvpn-checkout [hidden] {
    display: none !important;
}

#cvpn-checkout {
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(130 154 193 / 24%);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgb(91 123 181 / 18%), transparent 34%),
        linear-gradient(180deg, #111722 0%, #0d121a 100%);
    color: #edf1f8;
    box-shadow:
        0 28px 90px rgb(0 0 0 / 48%),
        inset 0 1px 0 rgb(255 255 255 / 4%);
    font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
}

#cvpn-checkout::backdrop {
    background: rgb(2 5 10 / 76%);
    backdrop-filter: blur(12px) saturate(115%);
}

#cvpn-checkout[open] {
    animation: co-appear 180ms cubic-bezier(.2,.75,.25,1);
}

#cvpn-checkout * {
    box-sizing: border-box;
}

#cvpn-checkout .co-sheet-handle {
    display: none;
}

#cvpn-checkout .co-content {
    padding: 24px;
}

#cvpn-checkout .co-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
    padding: 0;
}

#cvpn-checkout .co-brand-wrap,
#cvpn-checkout .co-brand-mark,
#cvpn-checkout .co-order-card,
#cvpn-checkout .co-order-title-row,
#cvpn-checkout .co-order-topline,
#cvpn-checkout .co-account-card,
#cvpn-checkout .co-secure-note,
#cvpn-checkout .co-progress,
#cvpn-checkout .co-progress-item {
    display: flex;
    align-items: center;
}

#cvpn-checkout .co-brand-wrap {
    gap: 11px;
}

#cvpn-checkout .co-brand-mark,
#cvpn-checkout .co-order-icon,
#cvpn-checkout .co-account-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

#cvpn-checkout .co-brand-mark {
    width: 38px;
    height: 38px;
    border: 1px solid rgb(151 184 236 / 20%);
    border-radius: 12px;
    background: linear-gradient(145deg, rgb(176 203 255 / 17%), rgb(133 115 210 / 10%));
    color: #b9d3ff;
}

#cvpn-checkout .co-brand-mark svg,
#cvpn-checkout .co-order-icon svg,
#cvpn-checkout .co-account-icon svg,
#cvpn-checkout .co-close svg,
#cvpn-checkout .co-secure-note svg,
#cvpn-checkout .co-telegram-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cvpn-checkout .co-brand {
    display: block;
    font-size: 19px;
    font-weight: 760;
    letter-spacing: -.45px;
}

#cvpn-checkout .co-header-caption {
    display: block;
    margin-top: 1px;
    color: #8593aa;
    font-size: 11px;
}

#cvpn-checkout button,
#cvpn-checkout input {
    font: inherit;
}

#cvpn-checkout button {
    cursor: pointer;
}

#cvpn-checkout .co-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(143 160 188 / 17%);
    border-radius: 13px;
    background: rgb(255 255 255 / 4%);
    color: #aeb9ca;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#cvpn-checkout .co-close:hover:not(:disabled) {
    border-color: rgb(166 190 226 / 28%);
    background: rgb(255 255 255 / 7%);
    color: #edf1f8;
}

#cvpn-checkout .co-progress {
    gap: 8px;
    margin: 2px 0 18px;
    color: #68768c;
}

#cvpn-checkout .co-progress-item {
    flex: 0 0 auto;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

#cvpn-checkout .co-progress-item > span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #2e394b;
    border-radius: 999px;
    background: #0b1018;
    font-size: 10px;
}

#cvpn-checkout .co-progress-item.is-current,
#cvpn-checkout .co-progress-item.is-complete {
    color: #cfe0ff;
}

#cvpn-checkout .co-progress-item.is-current > span {
    border-color: #779cd4;
    background: #22324d;
    color: #f2f6ff;
    box-shadow: 0 0 0 4px rgb(109 145 204 / 9%);
}

#cvpn-checkout .co-progress-item.is-complete > span {
    border-color: #3f725d;
    background: #18362b;
    color: #a9e3c2;
}

#cvpn-checkout .co-progress-line {
    flex: 1 1 24px;
    min-width: 10px;
    height: 1px;
    background: #2a3444;
}

#cvpn-checkout .co-order-card {
    gap: 14px;
    padding: 15px 16px;
    border: 1px solid rgb(99 126 168 / 31%);
    border-radius: 17px;
    background:
        linear-gradient(135deg, rgb(29 43 66 / 90%), rgb(18 27 42 / 88%));
}

#cvpn-checkout .co-order-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgb(147 184 236 / 18%);
    border-radius: 13px;
    background: rgb(146 181 235 / 9%);
    color: #a9c9fb;
}

#cvpn-checkout .co-order-main {
    min-width: 0;
    flex: 1;
}

#cvpn-checkout .co-order-topline,
#cvpn-checkout .co-order-title-row {
    justify-content: space-between;
    gap: 12px;
}

#cvpn-checkout .co-order-title-row {
    margin-top: 5px;
}

#cvpn-checkout .co-order-title-row strong:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
}

#cvpn-checkout #co-plan-price {
    flex: 0 0 auto;
    color: #f3f6fb;
    font-size: 17px;
}

#cvpn-checkout .co-overline {
    color: #8293ad;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

#cvpn-checkout .co-mode-chip {
    padding: 4px 7px;
    border: 1px solid rgb(151 178 220 / 17%);
    border-radius: 999px;
    background: rgb(255 255 255 / 4%);
    color: #aabbd4;
    font-size: 10px;
}

#cvpn-checkout .co-heading-block {
    margin: 23px 0 18px;
}

#cvpn-checkout h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -.8px;
}

#cvpn-checkout p {
    margin: 10px 0;
}

#cvpn-checkout .co-muted {
    color: #a7b4c7;
    font-size: 14px;
}

#cvpn-checkout .co-small {
    color: #8f9db2;
    font-size: 12px;
    line-height: 1.55;
}

#cvpn-checkout .co-message {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #38475e;
    border-radius: 13px;
    background: #172233;
    color: #c6d4e7;
    overflow-wrap: anywhere;
}

#cvpn-checkout .co-message.is-error {
    border-color: #67404c;
    background: #30202a;
    color: #ffd1d9;
}

#cvpn-checkout .co-stage {
    animation: co-stage-in 160ms ease-out;
}

#cvpn-checkout .co-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    border: 1px solid #273244;
    border-radius: 14px;
    background: #090e16;
}

#cvpn-checkout .co-tabs button {
    min-height: 43px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #91a0b6;
    transition: background .15s ease, color .15s ease;
}

#cvpn-checkout .co-tabs button[aria-pressed="true"] {
    background: #222f45;
    color: #f2f6ff;
}

#cvpn-checkout fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#cvpn-checkout .co-field {
    margin: 15px 0;
}

#cvpn-checkout label {
    display: block;
    margin-bottom: 7px;
    color: #c8d2e0;
    font-size: 13px;
    font-weight: 550;
}

#cvpn-checkout input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #344158;
    border-radius: 13px;
    outline: 0;
    background: #090e16;
    color: #edf1f8;
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#cvpn-checkout input::placeholder {
    color: #64738a;
}

#cvpn-checkout input:focus {
    border-color: #80a8e3;
    background: #0b111b;
    box-shadow: 0 0 0 4px rgb(104 145 209 / 10%);
}

#cvpn-checkout input[readonly] {
    color: #aebbd0;
}

#cvpn-checkout .co-password {
    display: flex;
    gap: 8px;
}

#cvpn-checkout .co-password button {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 0 10px;
    border: 1px solid #344158;
    border-radius: 13px;
    background: #171f2d;
    color: #c4d5ef;
    font-size: 12px;
}

#cvpn-checkout #co-code {
    letter-spacing: 6px;
    font-variant-numeric: tabular-nums;
}

#cvpn-checkout .co-button {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 650;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

#cvpn-checkout .co-button:active:not(:disabled) {
    transform: scale(.992);
}

#cvpn-checkout .co-primary {
    border-color: #abcaff;
    background: linear-gradient(110deg, #b6d4ff, #aaa2ff);
    color: #08152c;
    box-shadow: 0 10px 30px rgb(91 128 197 / 16%);
}

#cvpn-checkout .co-primary:hover:not(:disabled) {
    background: linear-gradient(110deg, #c7dfff, #bbb5ff);
}

#cvpn-checkout .co-secondary {
    border-color: #344158;
    background: #182130;
    color: #edf1f8;
}

#cvpn-checkout .co-secondary:hover:not(:disabled) {
    border-color: #4b5e7c;
    background: #202b3e;
}

#cvpn-checkout .co-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
}

#cvpn-checkout .co-link {
    min-height: 34px;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: #a9c9fb;
    text-align: left;
    font-size: 13px;
}

#cvpn-checkout .co-link:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#cvpn-checkout .co-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 10px;
    color: #728097;
    font-size: 11px;
}

#cvpn-checkout .co-divider::before,
#cvpn-checkout .co-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #283244;
}

#cvpn-checkout .co-telegram-button svg {
    width: 18px;
    height: 18px;
}

#cvpn-checkout .co-telegram-note {
    margin: 9px 5px 0;
    text-align: center;
}

#cvpn-checkout .co-ready-grid {
    display: grid;
    gap: 12px;
}

#cvpn-checkout .co-account-card {
    gap: 12px;
    padding: 14px;
    border: 1px solid #2f3d53;
    border-radius: 16px;
    background: #111925;
}

#cvpn-checkout .co-account-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #1b2a3e;
    color: #a9c9fb;
}

#cvpn-checkout .co-account-copy {
    min-width: 0;
    flex: 1;
}

#cvpn-checkout .co-account-copy strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 14px;
}

#cvpn-checkout .co-account-status {
    display: inline-block;
    margin-top: 3px;
    color: #7fc6a0;
    font-size: 10px;
}

#cvpn-checkout .co-switch {
    flex: 0 0 auto;
}

#cvpn-checkout .co-summary {
    padding: 15px 16px;
    border: 1px solid #2b3749;
    border-radius: 16px;
    background: #0c121b;
}

#cvpn-checkout .co-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    color: #8997ac;
    font-size: 12px;
}

#cvpn-checkout .co-summary-row + .co-summary-row {
    margin-top: 10px;
}

#cvpn-checkout .co-summary-row strong {
    color: #dfe7f2;
    font-size: 13px;
    text-align: right;
}

#cvpn-checkout .co-summary-divider {
    height: 1px;
    margin: 13px 0;
    background: #263142;
}

#cvpn-checkout .co-summary-total {
    color: #b8c5d7;
    font-size: 13px;
}

#cvpn-checkout .co-summary-total strong {
    color: #f4f7fb;
    font-size: 20px;
}

#cvpn-checkout .co-subscription-note {
    margin: 13px 2px 0;
    font-size: 12px;
}

#cvpn-checkout .co-pay {
    min-height: 54px;
    font-size: 15px;
}

#cvpn-checkout .co-secure-note {
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    color: #7f8da1;
    font-size: 11px;
    line-height: 1.5;
}

#cvpn-checkout .co-secure-note svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #7896bf;
}

#cvpn-checkout .co-legal {
    margin: 20px 2px 0;
    text-align: center;
}

#cvpn-checkout .co-legal a {
    color: #9dbcf0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#cvpn-checkout :focus-visible {
    outline: 3px solid #9fc4ff;
    outline-offset: 3px;
}

#cvpn-checkout button:disabled {
    cursor: default;
    opacity: .48;
}

@keyframes co-appear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes co-stage-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    #cvpn-checkout {
        width: 100%;
        max-height: min(94vh, 860px);
        max-height: min(94dvh, 860px);
        margin: auto auto 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 26px 26px 0 0;
    }

    #cvpn-checkout .co-sheet-handle {
        display: block;
        width: 38px;
        height: 4px;
        margin: 9px auto 0;
        border-radius: 999px;
        background: #566276;
        opacity: .6;
    }

    #cvpn-checkout .co-content {
        padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
    }

    #cvpn-checkout .co-header {
        margin-bottom: 16px;
    }

    #cvpn-checkout .co-progress {
        margin-bottom: 15px;
    }

    #cvpn-checkout .co-progress-item {
        gap: 4px;
        font-size: 10px;
    }

    #cvpn-checkout .co-progress-item > span {
        width: 20px;
        height: 20px;
    }

    #cvpn-checkout .co-order-card {
        padding: 13px 14px;
    }

    #cvpn-checkout .co-order-icon {
        width: 38px;
        height: 38px;
    }

    #cvpn-checkout .co-heading-block {
        margin: 19px 0 15px;
    }

    #cvpn-checkout h2 {
        font-size: 25px;
    }

    #cvpn-checkout .co-summary-total strong {
        font-size: 19px;
    }
}

@media (max-width: 390px) {
    #cvpn-checkout .co-progress-item {
        font-size: 0;
    }

    #cvpn-checkout .co-progress-item > span {
        font-size: 10px;
    }

    #cvpn-checkout .co-progress-line {
        min-width: 6px;
    }

    #cvpn-checkout .co-order-topline {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cvpn-checkout[open],
    #cvpn-checkout .co-stage {
        animation: none;
    }

    #cvpn-checkout * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* =========================
   CVPN Checkout v8
   Unified homepage + account
   ========================= */

#cvpn-checkout {
    width: min(640px, calc(100% - 32px));
    border-color: rgb(133 161 205 / 26%);
    background:
        radial-gradient(circle at 92% 0%, rgb(112 147 221 / 16%), transparent 31%),
        radial-gradient(circle at 8% 100%, rgb(132 105 220 / 8%), transparent 28%),
        linear-gradient(180deg, #111824 0%, #0b1119 100%);
}

#cvpn-checkout .co-content {
    padding: 26px;
}

#cvpn-checkout .co-header {
    margin-bottom: 22px;
}

#cvpn-checkout .co-brand-copy {
    min-width: 0;
}

#cvpn-checkout .co-brand-mark {
    width: 40px;
    height: 40px;
    border-color: rgb(255 255 255 / 10%);
    background:
        url("/legal/icon.png") center / cover no-repeat,
        #0d131d;
    box-shadow:
        0 10px 28px rgb(0 0 0 / 22%),
        inset 0 1px 0 rgb(255 255 255 / 4%);
}

#cvpn-checkout .co-brand-mark svg {
    display: none;
}

#cvpn-checkout .co-brand {
    font-size: 15px;
    font-weight: 760;
    letter-spacing: .065em;
}

#cvpn-checkout .co-header-caption {
    margin-top: 3px;
    color: #7e8da4;
    font-size: 11px;
}

#cvpn-checkout .co-progress {
    margin: 4px 0 20px;
    padding: 0 2px;
}

#cvpn-checkout .co-progress-item {
    gap: 7px;
}

#cvpn-checkout .co-progress-item strong {
    font-size: 11px;
    font-weight: 620;
}

#cvpn-checkout .co-progress-item > span {
    width: 24px;
    height: 24px;
}

#cvpn-checkout .co-order-card {
    position: relative;
    overflow: hidden;
    min-height: 78px;
    padding: 16px 17px;
    border-color: rgb(117 153 213 / 30%);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgb(133 172 235 / 14%), transparent 44%),
        linear-gradient(135deg, rgb(28 42 64 / 94%), rgb(16 25 39 / 94%));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%),
        0 14px 36px rgb(0 0 0 / 15%);
}

#cvpn-checkout .co-order-card::after {
    content: "";
    position: absolute;
    inset: auto -20px -52px auto;
    width: 130px;
    height: 130px;
    border: 1px solid rgb(156 191 246 / 8%);
    border-radius: 50%;
    pointer-events: none;
}

#cvpn-checkout .co-order-icon {
    width: 44px;
    height: 44px;
    border-color: rgb(158 194 248 / 19%);
    background: rgb(126 168 231 / 10%);
    color: #b8d3ff;
}

#cvpn-checkout .co-order-title-row {
    margin-top: 6px;
}

#cvpn-checkout .co-order-title-row strong:first-child {
    color: #f0f5fd;
    font-size: 17px;
    font-weight: 670;
}

#cvpn-checkout #co-plan-price {
    font-size: 19px;
    font-weight: 730;
}

#cvpn-checkout .co-mode-chip {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-color: rgb(153 182 229 / 18%);
    background: rgb(255 255 255 / 4.5%);
    color: #b3c4db;
}

#cvpn-checkout .co-heading-block {
    margin: 25px 0 18px;
}

#cvpn-checkout .co-section-kicker {
    display: block;
    margin-bottom: 7px;
    color: #7f9dcb;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.35px;
}

#cvpn-checkout h2 {
    font-size: 30px;
    letter-spacing: -1px;
}

#cvpn-checkout .co-muted {
    max-width: 540px;
    margin-top: 8px;
    color: #9aa9be;
    line-height: 1.6;
}

#cvpn-checkout .co-message {
    border-radius: 14px;
}

/* Why account */

#cvpn-checkout .co-auth-reason {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid #2c394d;
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgb(42 59 86 / 36%), transparent 72%),
        #0d151f;
}

#cvpn-checkout .co-auth-reason-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #30445f;
    border-radius: 12px;
    background: #152235;
    color: #a7c8f8;
}

#cvpn-checkout .co-auth-reason-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cvpn-checkout .co-auth-reason > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

#cvpn-checkout .co-auth-reason strong {
    color: #dfe8f5;
    font-size: 13px;
    font-weight: 650;
}

#cvpn-checkout .co-auth-reason span:last-child {
    color: #8291a7;
    font-size: 11px;
    line-height: 1.5;
}

#cvpn-checkout .co-tabs {
    margin-bottom: 18px;
    border-radius: 15px;
}

#cvpn-checkout .co-tabs button {
    min-height: 45px;
    border-radius: 11px;
}

#cvpn-checkout .co-tabs button[aria-pressed="true"] {
    background:
        linear-gradient(180deg, rgb(80 108 153 / 24%), rgb(52 73 106 / 30%)),
        #1a2638;
}

/* Inputs */

#cvpn-checkout .co-field {
    margin: 14px 0;
}

#cvpn-checkout .co-input-wrap {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

#cvpn-checkout .co-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #61758f;
    transform: translateY(-50%);
    pointer-events: none;
}

#cvpn-checkout .co-input-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cvpn-checkout .co-input-wrap input {
    padding-left: 43px;
}

#cvpn-checkout input {
    min-height: 52px;
    border-radius: 14px;
    background: #080e16;
}

#cvpn-checkout .co-code-input {
    text-align: center;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: 7px;
    font-variant-numeric: tabular-nums;
}

#cvpn-checkout .co-field-note {
    margin: 7px 2px 0;
}

#cvpn-checkout .co-password {
    align-items: stretch;
}

#cvpn-checkout .co-password > .co-input-wrap {
    min-width: 0;
}

#cvpn-checkout .co-password button {
    min-width: 86px;
    border-radius: 14px;
}

#cvpn-checkout .co-button {
    min-height: 52px;
    border-radius: 14px;
}

#cvpn-checkout .co-primary {
    border-color: rgb(185 211 255 / 88%);
    background: linear-gradient(115deg, #b9d6ff 0%, #aaa3ff 100%);
    color: #08152b;
    box-shadow:
        0 14px 34px rgb(86 121 188 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 30%);
}

#cvpn-checkout .co-primary:hover:not(:disabled) {
    background: linear-gradient(115deg, #cbe2ff 0%, #bbb5ff 100%);
    box-shadow:
        0 18px 42px rgb(86 121 188 / 24%),
        inset 0 1px 0 rgb(255 255 255 / 34%);
}

#cvpn-checkout .co-secondary {
    background: #151f2e;
}

#cvpn-checkout .co-links {
    margin-top: 8px;
}

#cvpn-checkout .co-divider {
    margin-top: 18px;
}

#cvpn-checkout .co-telegram-button {
    background:
        linear-gradient(180deg, rgb(67 107 158 / 11%), transparent),
        #151f2e;
}

#cvpn-checkout .co-telegram-note {
    max-width: 470px;
    margin: 9px auto 0;
}

/* Logged-in checkout */

#cvpn-checkout .co-ready-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(210px, .87fr);
    gap: 12px;
    align-items: stretch;
}

#cvpn-checkout .co-account-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 15px;
    padding: 16px;
    border-color: #304057;
    border-radius: 17px;
    background:
        radial-gradient(circle at 0% 0%, rgb(89 137 207 / 8%), transparent 42%),
        #101925;
}

#cvpn-checkout .co-account-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#cvpn-checkout .co-account-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid #2f496b;
    background: #15243a;
    color: #afd0ff;
}

#cvpn-checkout .co-account-copy strong {
    margin-top: 4px;
    color: #eaf0f9;
    font-size: 14px;
    font-weight: 650;
}

#cvpn-checkout .co-account-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 5px;
    margin-top: 5px;
    color: #8fd5ad;
    font-size: 10px;
}

#cvpn-checkout .co-account-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #78cf9e;
    box-shadow: 0 0 0 3px rgb(120 207 158 / 8%);
}

#cvpn-checkout .co-switch-button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #2b394d;
    border-radius: 11px;
    background: rgb(255 255 255 / 2.5%);
    color: #9eb2cf;
    cursor: pointer;
    font-size: 11px;
}

#cvpn-checkout .co-switch-button:hover:not(:disabled) {
    border-color: #435a79;
    background: rgb(255 255 255 / 4.5%);
    color: #d4e2f5;
}

#cvpn-checkout .co-switch-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cvpn-checkout .co-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 16px;
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent),
        #0a111a;
}

#cvpn-checkout .co-summary > .co-overline {
    display: block;
    margin-bottom: 13px;
}

#cvpn-checkout .co-summary-row {
    font-size: 11px;
}

#cvpn-checkout .co-summary-row strong {
    max-width: 58%;
    overflow-wrap: anywhere;
    font-size: 12px;
}

#cvpn-checkout .co-summary-divider {
    margin-top: auto;
}

#cvpn-checkout .co-summary-total strong {
    color: #f7f9fd;
    font-size: 21px;
    font-weight: 750;
}

#cvpn-checkout .co-subscription-note {
    margin: 13px 1px 0;
    padding: 11px 13px;
    border: 1px solid rgb(91 122 165 / 18%);
    border-radius: 13px;
    background: rgb(71 101 143 / 6%);
    color: #899ab0;
    font-size: 11px;
    line-height: 1.55;
}

#cvpn-checkout .co-pay {
    min-height: 56px;
    margin-top: 13px;
    font-size: 15px;
}

#cvpn-checkout .co-secure-note {
    margin-top: 12px;
    padding: 0 3px;
}

/* Legal */

#cvpn-checkout .co-legal {
    max-width: 540px;
    margin: 20px auto 0;
    color: #6e7e94;
    line-height: 1.6;
}

/* Responsive */

@media (max-width: 620px) {
    #cvpn-checkout {
        width: 100%;
        max-height: min(95vh, 920px);
        max-height: min(95dvh, 920px);
        margin: auto auto 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 27px 27px 0 0;
    }

    #cvpn-checkout .co-sheet-handle {
        display: block;
        width: 38px;
        height: 4px;
        margin: 9px auto 0;
        border-radius: 999px;
        background: #566276;
        opacity: .62;
    }

    #cvpn-checkout .co-content {
        padding: 15px 18px calc(18px + env(safe-area-inset-bottom));
    }

    #cvpn-checkout .co-header {
        margin-bottom: 16px;
    }

    #cvpn-checkout .co-brand {
        font-size: 14px;
    }

    #cvpn-checkout .co-progress {
        margin-bottom: 16px;
    }

    #cvpn-checkout .co-order-card {
        min-height: 70px;
        padding: 13px 14px;
    }

    #cvpn-checkout .co-order-icon {
        width: 39px;
        height: 39px;
    }

    #cvpn-checkout .co-heading-block {
        margin: 20px 0 15px;
    }

    #cvpn-checkout h2 {
        font-size: 26px;
    }

    #cvpn-checkout .co-auth-reason {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 12px;
    }

    #cvpn-checkout .co-auth-reason-icon {
        width: 36px;
        height: 36px;
    }

    #cvpn-checkout .co-ready-grid {
        grid-template-columns: 1fr;
    }

    #cvpn-checkout .co-summary-divider {
        margin-top: 13px;
    }
}

@media (max-width: 390px) {
    #cvpn-checkout .co-progress-item strong {
        display: none;
    }

    #cvpn-checkout .co-progress-line {
        min-width: 7px;
    }

    #cvpn-checkout .co-brand-copy .co-header-caption {
        max-width: 170px;
    }

    #cvpn-checkout .co-order-title-row {
        align-items: flex-start;
    }

    #cvpn-checkout .co-order-title-row strong:first-child {
        font-size: 15px;
    }

    #cvpn-checkout #co-plan-price {
        font-size: 17px;
    }

    #cvpn-checkout .co-auth-reason span:last-child {
        font-size: 10px;
    }

    #cvpn-checkout .co-password {
        display: grid;
        grid-template-columns: 1fr;
    }

    #cvpn-checkout .co-password button {
        min-height: 40px;
    }
}
/* =========================================================
   CVPN Unified Checkout v11
   ========================================================= */

#cvpn-checkout {
    border-color: var(--cvpn-border-strong);
    border-radius: calc(var(--cvpn-radius-xl) + 4px);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(139,194,255,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(17,23,34,.98) 0%,
            rgba(12,17,25,.98) 100%
        );
    color: var(--cvpn-text);
    box-shadow:
        0 30px 96px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.035);
}

#cvpn-checkout::backdrop {
    background: rgba(2,5,10,.78);
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
}

#cvpn-checkout .co-brand-mark.cvpn-brand-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-color: var(--cvpn-border);
    border-radius: 13px;
    background:
        url("/legal/icon.png") center / cover no-repeat,
        #0d121a;
    color: transparent;
}

#cvpn-checkout .co-brand {
    color: var(--cvpn-text);
}

#cvpn-checkout .co-header-caption,
#cvpn-checkout .co-muted,
#cvpn-checkout .co-small {
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-close {
    border-color: var(--cvpn-border);
    background: var(--cvpn-surface-soft);
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-close:hover:not(:disabled) {
    border-color: var(--cvpn-border-strong);
    background: rgba(255,255,255,.07);
    color: var(--cvpn-text);
}

#cvpn-checkout .co-progress {
    color: var(--cvpn-faint);
}

#cvpn-checkout .co-progress-item > span {
    border-color: var(--cvpn-border);
    background: var(--cvpn-bg-raised);
}

#cvpn-checkout .co-progress-item.is-current,
#cvpn-checkout .co-progress-item.is-complete {
    color: var(--cvpn-text);
}

#cvpn-checkout .co-progress-item.is-current > span {
    border-color: rgba(139,194,255,.52);
    background:
        linear-gradient(
            135deg,
            rgba(139,194,255,.15),
            rgba(159,136,255,.11)
        ),
        #172238;
    color: var(--cvpn-text);
    box-shadow: 0 0 0 4px rgba(125,184,255,.08);
}

#cvpn-checkout .co-progress-item.is-complete > span {
    border-color: var(--cvpn-success-border);
    background: var(--cvpn-success-surface);
    color: var(--cvpn-success);
}

#cvpn-checkout .co-progress-line {
    background: var(--cvpn-border);
}

#cvpn-checkout .co-order-card {
    border-color: var(--cvpn-info-border);
    border-radius: var(--cvpn-radius-lg);
    background:
        linear-gradient(
            135deg,
            rgba(139,194,255,.075),
            rgba(159,136,255,.045)
        ),
        rgba(16,22,31,.84);
}

#cvpn-checkout .co-order-icon,
#cvpn-checkout .co-account-icon {
    border-color: var(--cvpn-info-border);
    background: var(--cvpn-info-surface);
    color: #afd0ff;
}

#cvpn-checkout .co-mode-chip {
    border-color: var(--cvpn-border);
    background: var(--cvpn-surface-soft);
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-message {
    border-color: var(--cvpn-info-border);
    background: var(--cvpn-info-surface);
    color: rgba(218,232,250,.88);
}

#cvpn-checkout .co-message.is-error {
    border-color: var(--cvpn-danger-border);
    background: var(--cvpn-danger-surface);
    color: var(--cvpn-danger);
}

#cvpn-checkout .co-tabs {
    background: rgba(8,12,18,.82);
}

#cvpn-checkout .co-tabs button {
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-tabs button[aria-pressed="true"] {
    background:
        linear-gradient(
            135deg,
            rgba(139,194,255,.12),
            rgba(159,136,255,.09)
        ),
        #202b3f;
    color: var(--cvpn-text);
}

#cvpn-checkout label {
    color: rgba(224,233,246,.86);
}

#cvpn-checkout input {
    border-color: var(--cvpn-border-strong);
    background: rgba(8,12,18,.88);
    color: var(--cvpn-text);
}

#cvpn-checkout input:focus {
    border-color: rgba(139,194,255,.68);
    box-shadow: 0 0 0 4px rgba(125,184,255,.08);
    outline: 0;
}

#cvpn-checkout .co-password button,
#cvpn-checkout .co-secondary {
    border-color: var(--cvpn-border-strong);
    background: rgba(255,255,255,.045);
    color: var(--cvpn-text);
}

#cvpn-checkout .co-secondary:hover:not(:disabled) {
    border-color: rgba(139,194,255,.24);
    background: rgba(255,255,255,.07);
}

#cvpn-checkout .co-primary {
    border-color: transparent;
    background: linear-gradient(
        135deg,
        var(--cvpn-accent),
        var(--cvpn-accent-2)
    );
    color: var(--cvpn-accent-text);
    box-shadow: 0 14px 34px rgba(125,184,255,.18);
}

#cvpn-checkout .co-primary:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        #9ccaff,
        #ad99ff
    );
    box-shadow:
        0 18px 42px rgba(125,184,255,.22),
        0 0 24px rgba(159,136,255,.10);
}

#cvpn-checkout .co-link,
#cvpn-checkout .co-legal a {
    color: #a8c9fb;
}

#cvpn-checkout .co-account-card {
    border-color: var(--cvpn-border);
    background: rgba(16,22,31,.78);
}

#cvpn-checkout .co-account-status {
    color: var(--cvpn-success);
}

#cvpn-checkout .co-summary {
    border-color: var(--cvpn-border);
    background: rgba(8,12,18,.72);
}

#cvpn-checkout .co-summary-row {
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-summary-row strong,
#cvpn-checkout .co-summary-total strong {
    color: var(--cvpn-text);
}

#cvpn-checkout .co-summary-divider {
    background: var(--cvpn-border);
}

#cvpn-checkout .co-secure-note {
    color: var(--cvpn-faint);
}

#cvpn-checkout :focus-visible {
    outline-color: rgba(156,196,255,.72);
}

@media (max-width: 600px) {
    #cvpn-checkout {
        border-radius:
            calc(var(--cvpn-radius-xl) + 2px)
            calc(var(--cvpn-radius-xl) + 2px)
            0
            0;
    }
}
/* =========================================================
   Checkout resilience UX v12
   ========================================================= */

#cvpn-checkout .co-code-hint {
    margin: 8px 2px 0;
    color: var(--cvpn-muted);
}

#cvpn-checkout .co-code-hint.is-expired {
    color: var(--cvpn-warning);
}

#cvpn-checkout #co-new-code:disabled {
    cursor: default;
    text-decoration: none;
    opacity: .48;
}

#cvpn-checkout .co-recovery {
    display: grid;
    gap: 14px;
}

#cvpn-checkout .co-recovery-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--cvpn-warning-border);
    border-radius: var(--cvpn-radius-lg);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(239,195,111,.07),
            transparent 40%
        ),
        var(--cvpn-warning-surface);
}

#cvpn-checkout .co-recovery-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--cvpn-warning-border);
    border-radius: 14px;
    background: rgba(151,103,33,.10);
    color: var(--cvpn-warning);
}

#cvpn-checkout .co-recovery-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cvpn-checkout .co-recovery h3 {
    margin: 5px 0 6px;
    color: var(--cvpn-text);
    font-size: 17px;
    line-height: 1.25;
}

#cvpn-checkout .co-recovery-card p {
    margin: 0;
    line-height: 1.55;
}

#cvpn-checkout .co-recovery-actions {
    display: grid;
    gap: 8px;
}

#cvpn-checkout .co-recovery-actions .co-button {
    margin-top: 0;
}

#cvpn-checkout .co-recovery-close {
    justify-self: center;
    margin-top: 2px;
}