/*
 * VPN theme design system.
 *
 * Layered on top of the Bootstrap bundle the theme ships, so pages this theme
 * does not override still render correctly. Everything here is scoped to a
 * custom class (.vpn-*, .vpnpay-*) or a deliberate Bootstrap override.
 *
 * Structure:
 *   1. Tokens          design decisions as custom properties
 *   2. Base            document, typography, focus
 *   3. Frame           page shell, header, navigation
 *   4. Surfaces        cards, subscription hero, meters, stats
 *   5. Controls        buttons, pills, forms, tiles
 *   6. Content         plans, tables, lists, empty states
 *   7. Payments        markup emitted by Vpnpay\PaymentRenderer
 *   8. Bootstrap       harmonisation for non-overridden pages
 *   9. Motion          reduced-motion and print
 *
 * Colour is defined once on :root and re-pointed under [data-bs-theme="dark"],
 * so the header's theme toggle switches the whole system.
 */

/* ================================================================== */
/* 1. Tokens                                                          */
/* ================================================================== */

:root {
    /* Brand ramp -- indigo through violet, matching the reference design */
    --vpn-brand-50: #eef2ff;
    --vpn-brand-100: #e0e7ff;
    --vpn-brand-200: #c7d2fe;
    --vpn-brand-300: #a5b4fc;
    --vpn-brand-400: #818cf8;
    --vpn-brand-500: #6366f1;
    --vpn-brand-600: #4f46e5;
    --vpn-brand-700: #4338ca;
    --vpn-brand-800: #3730a3;

    --vpn-violet-400: #c084fc;
    --vpn-violet-500: #a855f7;
    --vpn-violet-600: #9333ea;
    --vpn-pink-300: #f9a8d4;
    --vpn-pink-400: #f472b6;
    --vpn-pink-500: #ec4899;
    --vpn-cyan-400: #22d3ee;

    /* Semantic */
    --vpn-success: #10b981;
    --vpn-success-ink: #047857;
    --vpn-success-soft: #d1fae5;
    --vpn-warning: #f59e0b;
    --vpn-warning-ink: #b45309;
    --vpn-warning-soft: #fef3c7;
    --vpn-danger: #ef4444;
    --vpn-danger-ink: #b91c1c;
    --vpn-danger-soft: #fee2e2;
    --vpn-info: #0ea5e9;
    --vpn-info-ink: #0369a1;
    --vpn-info-soft: #e0f2fe;

    /* Surfaces */
    --vpn-page: #eaeefb;
    --vpn-surface: #ffffff;
    --vpn-surface-2: #f8fafc;
    --vpn-surface-3: #f1f5f9;
    --vpn-surface-sunken: #eef2f7;
    --vpn-border: #e6ebf3;
    --vpn-border-strong: #cbd5e1;
    --vpn-hairline: rgba(15, 23, 42, .07);

    /* Ink */
    --vpn-text: #0b1220;
    --vpn-text-2: #4a5568;
    --vpn-text-3: #94a3b8;
    --vpn-on-brand: #ffffff;

    /* Radii -- generous and consistent, the core of the "soft" feel */
    --vpn-r-xs: 8px;
    --vpn-r-sm: 12px;
    --vpn-r-md: 16px;
    --vpn-r-lg: 22px;
    --vpn-r-xl: 28px;
    --vpn-r-2xl: 34px;
    --vpn-r-pill: 999px;

    /* Elevation -- layered, tinted toward the brand rather than pure black,
       which is what keeps the surfaces feeling soft instead of dirty. */
    --vpn-shadow-xs: 0 1px 2px rgba(30, 41, 90, .05);
    --vpn-shadow-sm: 0 1px 2px rgba(30, 41, 90, .04),
                     0 2px 6px rgba(30, 41, 90, .05);
    --vpn-shadow-md: 0 2px 4px rgba(30, 41, 90, .04),
                     0 8px 16px -4px rgba(30, 41, 90, .08);
    --vpn-shadow-lg: 0 4px 8px rgba(30, 41, 90, .04),
                     0 16px 32px -8px rgba(30, 41, 90, .10),
                     0 32px 64px -16px rgba(30, 41, 90, .10);
    --vpn-shadow-xl: 0 8px 16px -4px rgba(30, 41, 90, .06),
                     0 24px 48px -12px rgba(30, 41, 90, .12),
                     0 48px 96px -24px rgba(30, 41, 90, .14);

    --vpn-glow-brand: 0 8px 24px -6px rgba(99, 102, 241, .48),
                      0 2px 6px -1px rgba(99, 102, 241, .30);
    --vpn-glow-pink: 0 8px 24px -6px rgba(236, 72, 153, .45),
                     0 2px 6px -1px rgba(236, 72, 153, .28);

    /* Gradients */
    --vpn-grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #a855f7 100%);
    --vpn-grad-accent: linear-gradient(135deg, #6366f1 0%, #c026d3 55%, #f472b6 100%);
    --vpn-grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));

    /* Focus ring */
    --vpn-ring: 0 0 0 3px rgba(99, 102, 241, .32);

    /* Motion */
    --vpn-ease: cubic-bezier(.22, .61, .36, 1);
    --vpn-ease-out: cubic-bezier(.16, 1, .3, 1);
    --vpn-fast: 140ms;
    --vpn-med: 240ms;
}

[data-bs-theme="dark"] {
    --vpn-page: #070b16;
    --vpn-surface: #101728;
    --vpn-surface-2: #161f33;
    --vpn-surface-3: #1d2740;
    --vpn-surface-sunken: #0c1220;
    --vpn-border: #223049;
    --vpn-border-strong: #33415c;
    --vpn-hairline: rgba(255, 255, 255, .07);

    --vpn-text: #eaf0fb;
    --vpn-text-2: #a3b1c9;
    --vpn-text-3: #6b7c99;

    --vpn-success-ink: #6ee7b7;
    --vpn-success-soft: rgba(16, 185, 129, .16);
    --vpn-warning-ink: #fcd34d;
    --vpn-warning-soft: rgba(245, 158, 11, .16);
    --vpn-danger-ink: #fca5a5;
    --vpn-danger-soft: rgba(239, 68, 68, .16);
    --vpn-info-ink: #7dd3fc;
    --vpn-info-soft: rgba(14, 165, 233, .16);

    --vpn-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --vpn-shadow-sm: 0 1px 3px rgba(0, 0, 0, .40);
    --vpn-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .55);
    --vpn-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .65);
    --vpn-shadow-xl: 0 28px 64px -18px rgba(0, 0, 0, .72);

    --vpn-ring: 0 0 0 3px rgba(129, 140, 248, .38);
}

/* ================================================================== */
/* 2. Base                                                            */
/* ================================================================== */

body {
    background-color: var(--vpn-page);
    color: var(--vpn-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                 "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    position: relative;
}

/* Aurora field behind the app. Fixed and non-interactive, so it costs one
   composited layer and never affects scrolling or hit-testing. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46rem 30rem at 12% -8%, rgba(99, 102, 241, .22), transparent 60%),
        radial-gradient(38rem 26rem at 92% 4%, rgba(168, 85, 247, .18), transparent 62%),
        radial-gradient(34rem 24rem at 78% 96%, rgba(236, 72, 153, .14), transparent 60%),
        radial-gradient(30rem 22rem at 4% 88%, rgba(34, 211, 238, .12), transparent 62%);
}

[data-bs-theme="dark"] body::before {
    background:
        radial-gradient(46rem 30rem at 12% -8%, rgba(99, 102, 241, .26), transparent 62%),
        radial-gradient(38rem 26rem at 92% 4%, rgba(168, 85, 247, .20), transparent 64%),
        radial-gradient(34rem 24rem at 78% 96%, rgba(236, 72, 153, .14), transparent 62%);
}

/* Everything above the aurora. */
.vpn-app,
.vpn-auth,
.vpn-tabbar,
.toast-container {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vpn-text);
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.25;
}

a {
    text-decoration: none;
    transition: color var(--vpn-fast) var(--vpn-ease);
}

::selection {
    background: var(--vpn-brand-200);
    color: var(--vpn-brand-800);
}

[data-bs-theme="dark"] ::selection {
    background: rgba(129, 140, 248, .35);
    color: #fff;
}

/* One consistent, visible focus ring for keyboard users everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--vpn-ring);
    border-radius: var(--vpn-r-xs);
}

/* Numeric UI reads better with tabular figures. */
.vpn-stat__value,
.vpn-sub__days,
.vpn-sub__id,
.vpn-plan__price,
.vpn-meterrow strong,
.vpn-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.vpn-shell {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(14px, 3.5vw, 32px);
}

/* ================================================================== */
/* 3. Frame                                                           */
/* ================================================================== */

.vpn-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-block: clamp(14px, 3vw, 30px) 44px;
}

/* The floating panel from the reference design. */
.vpn-frame {
    flex: 1;
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-hairline);
    border-radius: var(--vpn-r-2xl);
    box-shadow: var(--vpn-shadow-xl);
    padding: clamp(18px, 2.6vw, 32px) clamp(16px, 3vw, 40px) clamp(30px, 4vw, 48px);
}

@media (max-width: 767.98px) {
    .vpn-app {
        padding: 0;
    }

    .vpn-frame {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 14px 16px 104px;
    }
}

/* ---- Header ---- */

.vpn-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: clamp(20px, 3vw, 34px);
}

.vpn-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.03em;
    color: var(--vpn-text);
    flex-shrink: 0;
}

.vpn-brand:hover {
    color: var(--vpn-brand-600);
}

.vpn-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--vpn-grad-brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--vpn-glow-brand);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Glass highlight across the top of the mark. */
.vpn-brand__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpn-grad-sheen);
}

.vpn-brand__mark svg {
    width: 19px;
    height: 19px;
    position: relative;
}

.vpn-brand img {
    max-height: 36px;
    width: auto;
}

.vpn-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: auto;
    padding: 4px;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-surface-3);
    border: 1px solid var(--vpn-hairline);
}

.vpn-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--vpn-r-pill);
    font-size: .875rem;
    font-weight: 600;
    color: var(--vpn-text-2);
    white-space: nowrap;
    transition: color var(--vpn-fast) var(--vpn-ease),
                background-color var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-fast) var(--vpn-ease);
}

.vpn-nav__link svg {
    width: 16px;
    height: 16px;
    opacity: .7;
    transition: opacity var(--vpn-fast) var(--vpn-ease);
}

.vpn-nav__link:hover {
    color: var(--vpn-text);
    background: color-mix(in srgb, var(--vpn-surface) 70%, transparent);
}

.vpn-nav__link:hover svg {
    opacity: 1;
}

.vpn-nav__link.is-active {
    color: var(--vpn-brand-700);
    background: var(--vpn-surface);
    box-shadow: var(--vpn-shadow-sm);
}

.vpn-nav__link.is-active svg {
    opacity: 1;
}

[data-bs-theme="dark"] .vpn-nav__link.is-active {
    color: var(--vpn-brand-300);
    background: var(--vpn-surface-2);
}

.vpn-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.vpn-userpill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    box-shadow: var(--vpn-shadow-sm);
    color: var(--vpn-text);
    font-weight: 600;
    font-size: .875rem;
    transition: box-shadow var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                transform var(--vpn-fast) var(--vpn-ease);
}

.vpn-userpill:hover {
    border-color: var(--vpn-brand-300);
    box-shadow: var(--vpn-shadow-md);
}

.vpn-userpill:active {
    transform: translateY(1px);
}

.vpn-userpill img,
.vpn-userpill .vpn-userpill__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--vpn-surface), 0 0 0 3px var(--vpn-brand-200);
}

[data-bs-theme="dark"] .vpn-userpill img,
[data-bs-theme="dark"] .vpn-userpill .vpn-userpill__avatar {
    box-shadow: 0 0 0 2px var(--vpn-surface), 0 0 0 3px var(--vpn-border-strong);
}

.vpn-userpill__name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpn-iconbtn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text-2);
    flex-shrink: 0;
    transition: color var(--vpn-fast) var(--vpn-ease),
                border-color var(--vpn-fast) var(--vpn-ease),
                background-color var(--vpn-fast) var(--vpn-ease),
                transform var(--vpn-fast) var(--vpn-ease);
}

.vpn-iconbtn:hover {
    color: var(--vpn-brand-600);
    border-color: var(--vpn-brand-300);
    background: var(--vpn-brand-50);
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .vpn-iconbtn:hover {
    background: var(--vpn-surface-3);
    color: var(--vpn-brand-300);
}

.vpn-iconbtn svg {
    width: 17px;
    height: 17px;
}

/* ---- Page head ---- */

.vpn-pagehead {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr);
    gap: clamp(14px, 2.5vw, 30px);
    align-items: center;
    margin-bottom: clamp(18px, 3vw, 30px);
}

@media (max-width: 991.98px) {
    .vpn-pagehead {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.vpn-pagetitle {
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
}

.vpn-pagesub {
    color: var(--vpn-text-2);
    font-size: .9375rem;
    margin: 6px 0 0;
}

/* Expiry banner: pill action, message, dismiss. */
.vpn-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px 8px 8px;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    box-shadow: var(--vpn-shadow-sm);
    font-size: .9375rem;
    color: var(--vpn-text-2);
}

.vpn-banner--warn {
    border-color: color-mix(in srgb, var(--vpn-pink-400) 42%, transparent);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--vpn-pink-400) 12%, transparent),
            transparent 58%),
        var(--vpn-surface);
}

.vpn-banner__close {
    margin-inline-start: auto;
    border: 0;
    background: none;
    color: var(--vpn-text-3);
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--vpn-r-xs);
    transition: color var(--vpn-fast) var(--vpn-ease),
                background-color var(--vpn-fast) var(--vpn-ease);
}

.vpn-banner__close:hover {
    color: var(--vpn-danger);
    background: var(--vpn-danger-soft);
}

@media (max-width: 575.98px) {
    .vpn-banner {
        border-radius: var(--vpn-r-md);
        flex-wrap: wrap;
        padding: 12px;
    }
}

/* ---- Layout grid ---- */

.vpn-grid {
    display: grid;
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
    gap: clamp(16px, 2.2vw, 26px);
    align-items: start;
}

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

.vpn-stack {
    display: grid;
    gap: clamp(16px, 2.2vw, 24px);
    min-width: 0;
}

/* Content beside a fixed-width companion (the QR panel on the config page).
   A class rather than an inline style, so the stacking rule below can win. */
.vpn-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 2.5vw, 28px);
    align-items: start;
}

@media (max-width: 767.98px) {
    .vpn-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================== */
/* 4. Surfaces                                                        */
/* ================================================================== */

.vpn-card {
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-lg);
    box-shadow: var(--vpn-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease);
}

.vpn-card:hover {
    box-shadow: var(--vpn-shadow-md);
}

.vpn-card__body {
    padding: clamp(16px, 2.2vw, 26px);
}

.vpn-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.2vw, 26px) 0;
}

.vpn-card__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.vpn-eyebrow {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--vpn-text-3);
    margin: 0 0 6px;
}

/* ---- Subscription hero ---- */

.vpn-sub {
    border-radius: var(--vpn-r-lg);
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    box-shadow: var(--vpn-shadow-md);
    overflow: hidden;
}

.vpn-sub__top {
    position: relative;
    background: var(--vpn-grad-brand);
    color: #fff;
    padding: 28px 24px 34px;
    isolation: isolate;
    overflow: hidden;
}

/* Two soft light blobs plus a wave band, echoing the reference artwork
   without shipping an image. Animated with transform only. */
.vpn-sub__top::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    z-index: -2;
    background:
        radial-gradient(38% 42% at 26% 24%, rgba(255, 255, 255, .34), transparent 66%),
        radial-gradient(32% 38% at 82% 78%, rgba(255, 255, 255, .20), transparent 64%),
        radial-gradient(30% 30% at 68% 12%, rgba(244, 114, 182, .34), transparent 66%);
    animation: vpn-drift 22s var(--vpn-ease) infinite alternate;
}

/* Wave crest along the bottom edge. */
.vpn-sub__top::after {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -58%;
    height: 90%;
    z-index: -1;
    border-radius: 46% 54% 42% 58% / 62% 58% 42% 38%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
    animation: vpn-wave 18s var(--vpn-ease) infinite alternate;
}

@keyframes vpn-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.10); }
}

@keyframes vpn-wave {
    from { transform: translate3d(-2%, 0, 0) rotate(-2deg); }
    to   { transform: translate3d(2%, -3%, 0) rotate(2.5deg); }
}

.vpn-sub__icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .28);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
}

.vpn-sub__icon svg {
    width: 23px;
    height: 23px;
}

.vpn-sub__label {
    text-align: center;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 10px;
}

.vpn-sub__id {
    text-align: center;
    font-size: clamp(1.0625rem, .95rem + .75vw, 1.4375rem);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .18);
}

.vpn-sub__id .muted {
    opacity: .5;
    font-weight: 700;
    letter-spacing: .04em;
}

.vpn-sub__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px 20px;
    flex-wrap: wrap;
}

.vpn-sub__expiry {
    min-width: 0;
}

.vpn-sub__expiry-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vpn-text-3);
    margin: 0 0 3px;
}

.vpn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vpn-text-3);
    flex-shrink: 0;
    position: relative;
}

.vpn-dot--ok { background: var(--vpn-success); }
.vpn-dot--warn { background: var(--vpn-warning); }
.vpn-dot--danger { background: var(--vpn-danger); }

/* Slow pulse on the urgent states only, so it signals rather than decorates. */
.vpn-dot--warn::after,
.vpn-dot--danger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: vpn-pulse 2.4s var(--vpn-ease-out) infinite;
}

@keyframes vpn-pulse {
    0%   { transform: scale(1); opacity: .7; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.vpn-sub__days {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
}

.vpn-sub__days small {
    font-size: .875rem;
    font-weight: 600;
    color: var(--vpn-text-2);
    letter-spacing: -0.01em;
}

/* ---- Meters ---- */

.vpn-meter {
    height: 9px;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-surface-sunken);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07);
}

[data-bs-theme="dark"] .vpn-meter {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}

.vpn-meter__fill {
    height: 100%;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-grad-brand);
    position: relative;
    transition: width 600ms var(--vpn-ease-out);
}

.vpn-meter__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpn-grad-sheen);
    border-radius: inherit;
}

.vpn-meter__fill--warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.vpn-meter__fill--danger { background: linear-gradient(90deg, #fb7185, #ef4444); }

.vpn-meterrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .8125rem;
    color: var(--vpn-text-2);
    margin-bottom: 8px;
}

.vpn-meterrow strong {
    color: var(--vpn-text);
    font-weight: 700;
}

/* ---- Stats ---- */

.vpn-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 12px;
}

.vpn-stat {
    position: relative;
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    padding: 15px 16px;
    overflow: hidden;
    transition: transform var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease);
}

/* Accent rail on the reading edge, revealed on hover. Logical, so it moves
   to the right-hand side in Arabic and Persian. */
.vpn-stat::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--vpn-grad-brand);
    opacity: 0;
    transition: opacity var(--vpn-med) var(--vpn-ease);
}

.vpn-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vpn-shadow-md);
    border-color: var(--vpn-brand-200);
}

.vpn-stat:hover::before {
    opacity: 1;
}

.vpn-stat__label {
    font-size: .75rem;
    color: var(--vpn-text-3);
    font-weight: 600;
    margin: 0 0 4px;
}

.vpn-stat__value {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

/* ================================================================== */
/* 5. Controls                                                        */
/* ================================================================== */

.vpn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--vpn-r-pill);
    border: 1px solid transparent;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: transform var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                background-color var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                color var(--vpn-med) var(--vpn-ease);
}

.vpn-btn:hover {
    transform: translateY(-1px);
}

.vpn-btn:active {
    transform: translateY(0);
}

.vpn-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.vpn-btn--primary {
    background: var(--vpn-grad-brand);
    color: #fff;
    box-shadow: var(--vpn-glow-brand);
}

.vpn-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpn-grad-sheen);
    opacity: .9;
    pointer-events: none;
}

.vpn-btn--primary:hover {
    color: #fff;
    box-shadow: 0 12px 30px -6px rgba(99, 102, 241, .58),
                0 3px 8px -1px rgba(99, 102, 241, .34);
}

.vpn-btn--accent {
    background: var(--vpn-grad-accent);
    color: #fff;
    box-shadow: var(--vpn-glow-pink);
}

.vpn-btn--accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpn-grad-sheen);
    opacity: .9;
    pointer-events: none;
}

.vpn-btn--accent:hover {
    color: #fff;
    box-shadow: 0 12px 30px -6px rgba(236, 72, 153, .55),
                0 3px 8px -1px rgba(236, 72, 153, .32);
}

.vpn-btn--ghost {
    background: var(--vpn-surface);
    border-color: var(--vpn-border-strong);
    color: var(--vpn-text);
}

.vpn-btn--ghost:hover {
    border-color: var(--vpn-brand-400);
    color: var(--vpn-brand-600);
    background: var(--vpn-brand-50);
    box-shadow: var(--vpn-shadow-sm);
}

[data-bs-theme="dark"] .vpn-btn--ghost:hover {
    background: var(--vpn-surface-3);
    color: var(--vpn-brand-300);
}

.vpn-btn--soft {
    background: var(--vpn-brand-50);
    color: var(--vpn-brand-700);
}

.vpn-btn--soft:hover {
    background: var(--vpn-brand-100);
    color: var(--vpn-brand-800);
}

[data-bs-theme="dark"] .vpn-btn--soft {
    background: rgba(99, 102, 241, .18);
    color: var(--vpn-brand-300);
}

[data-bs-theme="dark"] .vpn-btn--soft:hover {
    background: rgba(99, 102, 241, .26);
    color: var(--vpn-brand-200);
}

.vpn-btn--sm {
    padding: 8px 16px;
    font-size: .8125rem;
}

.vpn-btn--lg {
    padding: 14px 30px;
    font-size: .9375rem;
}

.vpn-btn--block {
    width: 100%;
}

.vpn-btn[disabled],
.vpn-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* ---- Status pills ---- */

.vpn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--vpn-r-pill);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .005em;
    background: var(--vpn-surface-3);
    color: var(--vpn-text-2);
    white-space: nowrap;
}

/* Leading dot gives the pill a status read at a glance. */
.vpn-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
    flex-shrink: 0;
}

.vpn-pill--success { background: var(--vpn-success-soft); color: var(--vpn-success-ink); }
.vpn-pill--warning { background: var(--vpn-warning-soft); color: var(--vpn-warning-ink); }
.vpn-pill--danger  { background: var(--vpn-danger-soft);  color: var(--vpn-danger-ink); }
.vpn-pill--info    { background: var(--vpn-info-soft);    color: var(--vpn-info-ink); }

/* ---- Wizard steps ---- */

.vpn-step {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 18px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.vpn-step__n {
    color: var(--vpn-brand-600);
}

[data-bs-theme="dark"] .vpn-step__n {
    color: var(--vpn-brand-300);
}

/* ---- Selection tiles ---- */

.vpn-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: clamp(10px, 1.5vw, 16px);
}

@media (max-width: 420px) {
    .vpn-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vpn-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 138px;
    padding: 20px 12px;
    border-radius: var(--vpn-r-md);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-weight: 600;
    font-size: .875rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                color var(--vpn-med) var(--vpn-ease);
}

/* Gradient wash that fades in behind the content on hover. */
.vpn-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--vpn-brand-500) 10%, transparent),
        transparent 62%);
    opacity: 0;
    transition: opacity var(--vpn-med) var(--vpn-ease);
}

.vpn-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--vpn-shadow-lg);
    border-color: var(--vpn-brand-300);
    color: var(--vpn-text);
}

.vpn-tile:hover::before {
    opacity: 1;
}

.vpn-tile__icon,
.vpn-tile > span {
    position: relative;
}

.vpn-tile__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--vpn-text-2);
    transition: color var(--vpn-med) var(--vpn-ease),
                transform var(--vpn-med) var(--vpn-ease-out);
}

.vpn-tile__icon svg {
    width: 36px;
    height: 36px;
}

.vpn-tile:hover .vpn-tile__icon {
    color: var(--vpn-brand-600);
    transform: scale(1.06);
}

/* Selected state -- the highlighted card from the reference design. */
.vpn-tile.is-selected {
    background: var(--vpn-grad-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 34px -10px rgba(168, 85, 247, .58),
                0 3px 10px -2px rgba(168, 85, 247, .32);
}

.vpn-tile.is-selected::before {
    opacity: 0;
}

.vpn-tile.is-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpn-grad-sheen);
    pointer-events: none;
}

.vpn-tile.is-selected .vpn-tile__icon,
.vpn-tile.is-selected:hover .vpn-tile__icon {
    color: #fff;
}

.vpn-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vpn-tile:focus-visible {
    box-shadow: var(--vpn-ring), var(--vpn-shadow-md);
}

/* ---- Copy field / QR ---- */

.vpn-copyfield {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.vpn-copyfield__input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 15px;
    border-radius: var(--vpn-r-sm);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface-sunken);
    color: var(--vpn-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.vpn-qr {
    display: grid;
    place-items: center;
    padding: 16px;
    background: #fff;
    border-radius: var(--vpn-r-md);
    border: 1px solid var(--vpn-border);
    box-shadow: var(--vpn-shadow-sm);
    width: fit-content;
    margin-inline: auto;
}

.vpn-qr canvas,
.vpn-qr img,
.vpn-qr svg {
    display: block;
    width: 190px;
    height: 190px;
}

/* ---- Forms ---- */

.vpn-field {
    margin-bottom: 16px;
}

.vpn-field label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-2);
    margin-bottom: 7px;
}

.vpn-input,
.vpn-field input:not([type="checkbox"]):not([type="radio"]),
.vpn-field select,
.vpn-field textarea {
    width: 100%;
    padding: 11px 15px;
    border-radius: var(--vpn-r-sm);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-fast) var(--vpn-ease);
}

.vpn-input:focus,
.vpn-field input:focus,
.vpn-field select:focus,
.vpn-field textarea:focus {
    outline: none;
    border-color: var(--vpn-brand-500);
    box-shadow: var(--vpn-ring);
}

/* ---- Mobile tab bar ---- */

.vpn-tabbar {
    display: none;
}

@media (max-width: 767.98px) {
    .vpn-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
        /* Solid first: browsers without color-mix keep an opaque bar rather
           than a transparent one with content scrolling behind it. */
        background: var(--vpn-surface);
        background: color-mix(in srgb, var(--vpn-surface) 88%, transparent);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border-top: 1px solid var(--vpn-border);
        box-shadow: 0 -6px 24px rgba(30, 41, 90, .10);
    }

    .vpn-tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px;
        border-radius: var(--vpn-r-sm);
        font-size: .625rem;
        font-weight: 600;
        color: var(--vpn-text-3);
        transition: color var(--vpn-fast) var(--vpn-ease),
                    background-color var(--vpn-fast) var(--vpn-ease);
    }

    .vpn-tabbar__item svg {
        width: 21px;
        height: 21px;
    }

    .vpn-tabbar__item.is-active {
        color: var(--vpn-brand-600);
        background: var(--vpn-brand-50);
    }

    [data-bs-theme="dark"] .vpn-tabbar__item.is-active {
        color: var(--vpn-brand-300);
        background: rgba(99, 102, 241, .16);
    }

    /* The tab bar replaces the desktop nav on small screens. */
    .vpn-nav {
        display: none;
    }
}

/* ================================================================== */
/* 6. Content                                                         */
/* ================================================================== */

.vpn-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: clamp(14px, 2vw, 22px);
    align-items: stretch;
}

.vpn-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-lg);
    padding: clamp(20px, 2.4vw, 28px);
    box-shadow: var(--vpn-shadow-sm);
    overflow: hidden;
    transition: transform var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease);
}

.vpn-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--vpn-shadow-lg);
    border-color: var(--vpn-brand-200);
}

/* Featured plan carries the brand gradient, as the price anchor. */
.vpn-plan--featured {
    border-color: transparent;
    background: var(--vpn-grad-brand);
    color: #fff;
    box-shadow: var(--vpn-glow-brand);
}

.vpn-plan--featured::before {
    content: "";
    position: absolute;
    inset: -50% -30% auto -30%;
    height: 120%;
    background: radial-gradient(40% 46% at 30% 20%, rgba(255, 255, 255, .26), transparent 68%);
    pointer-events: none;
}

.vpn-plan--featured:hover {
    box-shadow: 0 16px 40px -8px rgba(99, 102, 241, .6),
                0 4px 12px -2px rgba(99, 102, 241, .36);
}

.vpn-plan--featured .vpn-plan__name,
.vpn-plan--featured .vpn-plan__price,
.vpn-plan--featured .vpn-plan__spec strong {
    color: #fff;
}

.vpn-plan--featured .vpn-plan__desc,
.vpn-plan--featured .vpn-plan__period,
.vpn-plan--featured .vpn-plan__spec {
    color: rgba(255, 255, 255, .84);
}

.vpn-plan--featured .vpn-plan__specs {
    border-color: rgba(255, 255, 255, .22);
}

.vpn-plan--featured .vpn-btn--ghost {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.vpn-plan--featured .vpn-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--vpn-brand-700);
}

.vpn-plan > * {
    position: relative;
}

.vpn-plan__badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    padding: 5px 12px;
    border-radius: var(--vpn-r-pill);
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.vpn-plan__name {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 3px;
}

.vpn-plan__desc {
    font-size: .875rem;
    color: var(--vpn-text-2);
    margin: 0 0 18px;
}

.vpn-plan__price {
    font-size: 2.375rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
    margin: 0;
}

.vpn-plan__period {
    font-size: .8125rem;
    color: var(--vpn-text-2);
    font-weight: 600;
}

.vpn-plan__specs {
    list-style: none;
    margin: 20px 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--vpn-border);
    display: grid;
    gap: 11px;
    flex: 1;
}

.vpn-plan__spec {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    color: var(--vpn-text-2);
}

.vpn-plan__spec svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: .85;
}

.vpn-plan__spec strong {
    color: var(--vpn-text);
    font-weight: 700;
}

/* ---- Lists & tables ---- */

.vpn-list {
    display: grid;
}

.vpn-listitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--vpn-border);
    color: var(--vpn-text);
    flex-wrap: wrap;
}

.vpn-listitem:last-child {
    border-bottom: 0;
}

.vpn-listitem__main {
    min-width: 0;
}

.vpn-listitem__title {
    font-weight: 700;
    font-size: .9375rem;
    margin: 0 0 2px;
}

.vpn-listitem__meta {
    font-size: .8125rem;
    color: var(--vpn-text-3);
    margin: 0;
}

.vpn-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(clamp(16px, 2.2vw, 26px) * -1);
    padding-inline: clamp(16px, 2.2vw, 26px);
}

.vpn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 520px;
}

.vpn-table th {
    text-align: start;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vpn-text-3);
    padding: 0 14px 12px;
    white-space: nowrap;
}

.vpn-table td {
    padding: 14px;
    border-top: 1px solid var(--vpn-border);
    color: var(--vpn-text-2);
    vertical-align: middle;
}

.vpn-table td strong,
.vpn-table td a {
    color: var(--vpn-text);
    font-weight: 600;
}

.vpn-table td a:hover {
    color: var(--vpn-brand-600);
}

.vpn-table tbody tr {
    transition: background-color var(--vpn-fast) var(--vpn-ease);
}

.vpn-table tbody tr:hover td {
    background: var(--vpn-surface-2);
}

.vpn-table tbody tr:first-child td {
    border-top-color: var(--vpn-border);
}

/* ---- Empty state ---- */

.vpn-empty {
    text-align: center;
    padding: clamp(28px, 5vw, 52px) 20px;
    color: var(--vpn-text-2);
}

.vpn-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(150deg, var(--vpn-brand-50), var(--vpn-surface-3));
    border: 1px solid var(--vpn-border);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    color: var(--vpn-brand-400);
}

[data-bs-theme="dark"] .vpn-empty__icon {
    background: linear-gradient(150deg, rgba(99, 102, 241, .16), var(--vpn-surface-3));
}

.vpn-empty__icon svg {
    width: 28px;
    height: 28px;
}

.vpn-empty__title {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--vpn-text);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

/* ---- Auth ---- */

.vpn-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
}

.vpn-auth__card,
.vpn-auth .card {
    width: 100%;
    max-width: 440px;
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-hairline);
    border-radius: var(--vpn-r-xl);
    box-shadow: var(--vpn-shadow-xl);
    padding: clamp(26px, 4vw, 40px);
}

.vpn-auth__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 4px;
    text-align: center;
}

.vpn-auth__sub {
    color: var(--vpn-text-2);
    font-size: .9375rem;
    text-align: center;
    margin: 0 0 26px;
}

/* ================================================================== */
/* 7. Payments (markup from Vpnpay\PaymentRenderer)                   */
/* ================================================================== */

.vpnpay-pay {
    max-width: 740px;
}

.vpnpay-pay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--vpn-border);
}

.vpnpay-pay__title {
    font-size: 1.3125rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
}

.vpnpay-pay__amount {
    text-align: end;
}

.vpnpay-pay__amount-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--vpn-text-3);
    margin-bottom: 2px;
}

.vpnpay-pay__amount strong {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--vpn-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vpnpay-pay__notice {
    padding: 13px 16px;
    border-radius: var(--vpn-r-sm);
    background: var(--vpn-warning-soft);
    color: var(--vpn-warning-ink);
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 18px;
}

/* Shown instead of the bank details when a customer is not entitled to them:
   a locked state that explains itself, not an error. */
.vpnpay-pay--blocked .vpnpay-pay__head {
    margin-bottom: 4px;
}

.vpnpay-blocked {
    text-align: center;
    padding: 26px 22px 28px;
    border: 1.5px dashed var(--vpn-border);
    border-radius: var(--vpn-r-md);
    background: var(--vpn-surface-2);
}

.vpnpay-blocked__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vpn-warning-soft);
    color: var(--vpn-warning-ink);
}

.vpnpay-blocked__icon svg {
    width: 26px;
    height: 26px;
}

.vpnpay-blocked__text {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--vpn-text-2);
    max-width: 46ch;
    margin: 0 auto 18px;
}

.vpnpay-blocked__steps {
    text-align: start;
    max-width: 42ch;
    margin: 0 auto 22px;
    padding-inline-start: 22px;
    font-size: .875rem;
    line-height: 1.9;
    color: var(--vpn-text-2);
}

.vpnpay-blocked__steps li::marker {
    font-weight: 700;
    color: var(--vpn-brand-500);
}

/* The renderer emits raw HTML, so it cannot use the .vpn-btn component. */
.vpnpay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--vpn-r-sm);
    font-size: .9375rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--vpn-fast) var(--vpn-ease), box-shadow var(--vpn-med) var(--vpn-ease);
}

.vpnpay-btn--primary {
    background: var(--vpn-grad-brand);
    color: #fff;
    box-shadow: var(--vpn-shadow-sm);
}

.vpnpay-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--vpn-shadow-md);
    color: #fff;
}

.vpnpay-pay__instructions {
    font-size: .9375rem;
    color: var(--vpn-text-2);
    margin-bottom: 20px;
    line-height: 1.7;
}

.vpnpay-pay__details {
    margin: 0 0 20px;
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    overflow: hidden;
    background: var(--vpn-surface-2);
}

.vpnpay-pay__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--vpn-border);
    flex-wrap: wrap;
}

.vpnpay-pay__row:last-child {
    border-bottom: 0;
}

.vpnpay-pay__row dt {
    flex: 0 0 auto;
    min-width: 150px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-3);
    margin: 0;
}

.vpnpay-pay__row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 200px;
    min-width: 0;
}

.vpnpay-pay__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875rem;
    font-weight: 600;
    color: var(--vpn-text);
    word-break: break-all;
}

.vpnpay-copy {
    border: 1px solid var(--vpn-border-strong);
    background: var(--vpn-surface);
    color: var(--vpn-text-2);
    border-radius: var(--vpn-r-pill);
    padding: 5px 13px;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--vpn-fast) var(--vpn-ease),
                border-color var(--vpn-fast) var(--vpn-ease),
                background-color var(--vpn-fast) var(--vpn-ease);
}

.vpnpay-copy:hover {
    border-color: var(--vpn-brand-400);
    color: var(--vpn-brand-600);
    background: var(--vpn-brand-50);
}

.vpnpay-pay__figure {
    margin: 0 0 20px;
    text-align: center;
}

.vpnpay-pay__figure img {
    max-width: 210px;
    width: 100%;
    height: auto;
    border-radius: var(--vpn-r-md);
    border: 1px solid var(--vpn-border);
    background: #fff;
    padding: 10px;
    box-shadow: var(--vpn-shadow-sm);
}

.vpnpay-pay__figure figcaption {
    font-size: .75rem;
    color: var(--vpn-text-3);
    margin-top: 9px;
}

.vpnpay-choices {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vpnpay-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 11px 18px;
    border-radius: var(--vpn-r-sm);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text-2);
    cursor: pointer;
    font-size: .875rem;
    transition: transform var(--vpn-fast) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                color var(--vpn-med) var(--vpn-ease);
}

.vpnpay-choice:hover {
    border-color: var(--vpn-brand-300);
    transform: translateY(-1px);
}

.vpnpay-choice.is-active {
    background: var(--vpn-grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--vpn-glow-brand);
}

.vpnpay-choice__name {
    font-weight: 700;
}

.vpnpay-choice__net {
    font-size: .6875rem;
    opacity: .78;
}

.vpnpay-panel {
    display: none;
}

.vpnpay-panel.is-active {
    display: block;
    animation: vpn-fade-up var(--vpn-med) var(--vpn-ease-out);
}

@keyframes vpn-fade-up {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
}

.vpnpay-links {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.vpnpay-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px;
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    background: var(--vpn-surface);
    flex-wrap: wrap;
    transition: transform var(--vpn-med) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease);
}

.vpnpay-link:hover {
    border-color: var(--vpn-brand-300);
    box-shadow: var(--vpn-shadow-md);
    transform: translateY(-2px);
}

.vpnpay-link__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--vpn-r-sm);
    flex-shrink: 0;
    background: var(--vpn-surface-2);
}

.vpnpay-link__body {
    flex: 1 1 200px;
    min-width: 0;
}

.vpnpay-link__name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.vpnpay-link__desc,
.vpnpay-link__hint {
    font-size: .8125rem;
    color: var(--vpn-text-2);
    margin: 4px 0 0;
}

.vpnpay-link__cta {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-grad-brand);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    box-shadow: var(--vpn-glow-brand);
    flex-shrink: 0;
    transition: box-shadow var(--vpn-med) var(--vpn-ease),
                transform var(--vpn-fast) var(--vpn-ease);
}

.vpnpay-link__cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(99, 102, 241, .58);
}

.vpnpay-form {
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    padding: clamp(18px, 2.4vw, 24px);
    background: var(--vpn-surface-2);
}

.vpnpay-form__title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

.vpnpay-form__hint {
    font-size: .875rem;
    color: var(--vpn-text-2);
    margin: 0 0 18px;
    line-height: 1.65;
}

/* Two-up field layout on wider screens, stacking on phones. */
.vpnpay-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 14px;
}

.vpnpay-form__field {
    margin-bottom: 15px;
}

.vpnpay-form__field select {
    width: 100%;
    padding: 11px 15px;
    border-radius: var(--vpn-r-sm);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-size: .9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-fast) var(--vpn-ease);
}

.vpnpay-form__field select:focus {
    outline: none;
    border-color: var(--vpn-brand-500);
    box-shadow: var(--vpn-ring);
}

/* ---- Previous submission summary ---- */

.vpnpay-status {
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    background: var(--vpn-surface-2);
    padding: 16px 18px;
}

.vpnpay-status--rejected {
    border-color: color-mix(in srgb, var(--vpn-danger) 35%, transparent);
}

.vpnpay-status--info_requested {
    border-color: color-mix(in srgb, var(--vpn-info) 35%, transparent);
}

.vpnpay-status--approved {
    border-color: color-mix(in srgb, var(--vpn-success) 35%, transparent);
}

.vpnpay-status__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.vpnpay-status__time {
    font-size: .8125rem;
    color: var(--vpn-text-3);
    margin-inline-start: auto;
}

.vpnpay-status__list {
    display: grid;
    gap: 9px;
    margin: 0;
}

.vpnpay-status__list > div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vpnpay-status__list dt {
    flex: 0 0 auto;
    min-width: 150px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-3);
    margin: 0;
}

.vpnpay-status__list dd {
    margin: 0;
    flex: 1 1 200px;
    min-width: 0;
    font-size: .875rem;
    color: var(--vpn-text);
    word-break: break-word;
}

.vpnpay-status__list code {
    font-size: .8125rem;
    color: var(--vpn-text);
}

.vpnpay-status__note {
    font-size: .875rem;
    color: var(--vpn-text-2);
    margin-top: 12px;
}

.vpnpay-form__field label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-2);
    margin-bottom: 7px;
}

.vpnpay-form__field input,
.vpnpay-form__field textarea {
    width: 100%;
    padding: 11px 15px;
    border-radius: var(--vpn-r-sm);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-fast) var(--vpn-ease);
}

.vpnpay-form__field input:focus,
.vpnpay-form__field textarea:focus {
    outline: none;
    border-color: var(--vpn-brand-500);
    box-shadow: var(--vpn-ring);
}

.vpnpay-form__field input[type="file"] {
    padding: 9px 12px;
    cursor: pointer;
}

.vpnpay-form__field small {
    display: block;
    font-size: .75rem;
    color: var(--vpn-text-3);
    margin-top: 6px;
}

.vpnpay-req {
    color: var(--vpn-danger);
}

.vpnpay-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border: 0;
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-grad-brand);
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--vpn-glow-brand);
    transition: box-shadow var(--vpn-med) var(--vpn-ease),
                transform var(--vpn-fast) var(--vpn-ease);
}

.vpnpay-form__submit:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(99, 102, 241, .58);
}

.vpnpay-form__submit[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.vpnpay-form__result {
    margin-top: 15px;
    font-size: .875rem;
    font-weight: 600;
}

.vpnpay-form__result.is-success,
.vpnpay-form__result.is-error {
    padding: 13px 16px;
    border-radius: var(--vpn-r-sm);
    animation: vpn-fade-up var(--vpn-med) var(--vpn-ease-out);
}

.vpnpay-form__result.is-success {
    background: var(--vpn-success-soft);
    color: var(--vpn-success-ink);
}

.vpnpay-form__result.is-error {
    background: var(--vpn-danger-soft);
    color: var(--vpn-danger-ink);
}

/* ------------------------------------------------------------------ */
/* Cart & checkout (markup from the Orderbutton module)                */
/* ------------------------------------------------------------------ */

/* This flow ships as a Bootstrap accordion with stock tables and radio
   buttons. The rules below restyle it in place - the module templates are
   left untouched so a FOSSBilling update cannot conflict with them. */

#vpn-cart .accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    display: grid;
    gap: 10px;
}

#vpn-cart .accordion-item {
    background: var(--vpn-surface);
    border: 1px solid var(--vpn-border);
    border-radius: var(--vpn-r-md) !important;
    overflow: hidden;
}

#vpn-cart .accordion-header {
    margin: 0;
}

#vpn-cart .accordion-button {
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: -0.015em;
    padding: 15px 18px;
    box-shadow: none;
    gap: 10px;
}

#vpn-cart .accordion-button:not(.collapsed) {
    background: var(--vpn-brand-50);
    color: var(--vpn-brand-700);
}

[data-bs-theme="dark"] #vpn-cart .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, .16);
    color: var(--vpn-brand-300);
}

#vpn-cart .accordion-button::after {
    filter: none;
    opacity: .5;
}

#vpn-cart .accordion-button .icon {
    width: 18px;
    height: 18px;
    opacity: .7;
}

#vpn-cart .accordion-body {
    padding: 18px;
}

/* Step counters ("3 Items", "1") become pills rather than raw badges. */
#vpn-cart .badge {
    background: var(--vpn-grad-brand) !important;
    color: #fff;
    font-size: .6875rem;
    padding: .35em .75em;
}

/* Cart table */
#vpn-cart .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#vpn-cart .table,
#vpn-cart .table-bordered > :not(caption) > * > * {
    border-color: var(--vpn-border);
}

#vpn-cart .table thead th {
    background: transparent;
    border-bottom: 1px solid var(--vpn-border);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vpn-text-3);
    padding: 0 14px 10px;
}

#vpn-cart .table tbody td {
    background: transparent;
    border-top: 1px solid var(--vpn-border);
    border-bottom: 0;
    padding: 14px;
    color: var(--vpn-text);
    vertical-align: middle;
}

#vpn-cart .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    box-shadow: none;
    color: var(--vpn-text);
}

/* The order total, given the weight it deserves. */
#vpn-cart .table tbody tr:last-child td {
    font-weight: 700;
}

#vpn-cart .table .btn-danger,
#vpn-cart .table .btn-dark {
    background: var(--vpn-surface-3);
    border: 1px solid var(--vpn-border);
    color: var(--vpn-text-3);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

#vpn-cart .table .btn-danger:hover,
#vpn-cart .table .btn-dark:hover {
    background: var(--vpn-danger-soft);
    border-color: transparent;
    color: var(--vpn-danger);
}

/* ---- Payment method picker ----------------------------------------
   The module renders each option as a radio + a label carrying the mark as an
   inline background-image, with the gateway name only in a tooltip. These rules
   turn that into a proper tile: a physical icon plate, a visible caption pulled
   from the tooltip attribute, and a clear selected state - all without editing
   the module template. */

.invoice-gateway {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    padding: 16px 10px 34px !important;
    border: 1.5px solid var(--vpn-border);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%),
        var(--vpn-surface);
    box-shadow: var(--vpn-shadow-xs);
    cursor: pointer;
    /* Slight overshoot on settle: the selection feels physical rather than abrupt. */
    transition: transform 220ms cubic-bezier(.34, 1.42, .64, 1),
                border-color 200ms var(--vpn-ease),
                box-shadow 260ms var(--vpn-ease);
}

[data-bs-theme="dark"] .invoice-gateway {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 42%),
        var(--vpn-surface-2);
}

.invoice-gateway:hover {
    transform: translateY(-3px);
    border-color: var(--vpn-border-strong);
    box-shadow: var(--vpn-shadow-lg);
}

/* The label is the whole hit target and carries the icon plate. */
.invoice-gateway .btn {
    position: static;
    border: 0;
    padding: 0;
    margin: 0;
    /* Beat the template's inline width/height so the plate is optically sized. */
    width: 56px !important;
    height: 56px !important;
    background-size: 56px 56px !important;
    background-position: center !important;
    border-radius: 15px;
    /* Grounds the icon plate so it reads as a physical object on the tile. */
    filter: drop-shadow(0 4px 10px rgba(30, 41, 90, .22));
    transition: transform 220ms cubic-bezier(.34, 1.42, .64, 1);
}

.invoice-gateway:hover .btn {
    transform: scale(1.05);
}

.invoice-gateway .btn::after {
    /* Caption, taken from the tooltip the template already provides. */
    content: attr(data-bs-title);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--vpn-text-2);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 8px;
    transition: color 200ms var(--vpn-ease);
}

/* Selected state: brand ring, lifted plate, and a confirming check. */
.invoice-gateway:has(.btn-check:checked) {
    border-color: var(--vpn-brand-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .16), var(--vpn-shadow-md);
    transform: translateY(-2px);
}

.invoice-gateway:has(.btn-check:checked) .btn {
    transform: scale(1.04);
}

.invoice-gateway:has(.btn-check:checked) .btn::after {
    color: var(--vpn-brand-700);
    font-weight: 700;
}

[data-bs-theme="dark"] .invoice-gateway:has(.btn-check:checked) .btn::after {
    color: var(--vpn-brand-300);
}

.invoice-gateway::after {
    content: "";
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--vpn-brand-600)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .45);
    opacity: 0;
    transform: scale(.4);
    transition: opacity 180ms var(--vpn-ease),
                transform 260ms cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.invoice-gateway:has(.btn-check:checked)::after {
    opacity: 1;
    transform: scale(1);
}

/* Keyboard users get the same ring the pointer gets. */
.invoice-gateway:has(.btn-check:focus-visible) {
    box-shadow: var(--vpn-ring), var(--vpn-shadow-md);
}

/* Browsers without :has() still show a usable, if plainer, picker. */
@supports not selector(:has(*)) {
    .invoice-gateway::after {
        display: none;
    }
}

/* Checkout call to action */
#checkoutButton {
    background: var(--vpn-grad-brand);
    border: 0;
    border-radius: var(--vpn-r-pill);
    color: #fff;
    font-weight: 700;
    padding: 13px 34px;
    font-size: .9375rem;
    box-shadow: var(--vpn-glow-brand);
    transition: transform var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease);
}

#checkoutButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(99, 102, 241, .58);
}

#vpn-cart .form-control,
#vpn-cart .form-select {
    border-radius: var(--vpn-r-sm);
    border-color: var(--vpn-border);
}

/* The pay-as-you-go card sits beside the priced plans, so it is distinguished
   by a dashed edge rather than by shouting a number it cannot honestly quote. */
.vpn-plan--hourly {
    border-style: dashed;
    border-color: var(--vpn-brand-300);
    background:
        linear-gradient(160deg, var(--vpn-brand-50), transparent 55%),
        var(--vpn-surface);
}

[data-bs-theme="dark"] .vpn-plan--hourly {
    background:
        linear-gradient(160deg, rgba(99, 102, 241, .14), transparent 55%),
        var(--vpn-surface);
}

.vpn-plan__badge--soft {
    background: var(--vpn-brand-100);
    border-color: transparent;
    color: var(--vpn-brand-700);
}

[data-bs-theme="dark"] .vpn-plan__badge--soft {
    background: rgba(99, 102, 241, .22);
    color: var(--vpn-brand-200);
}

/* A word, not a figure: the same slot as a price, without the false precision. */
.vpn-plan__price--word {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    background: var(--vpn-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------------ */
/* Billing-mode switch (Monthly / Hourly)                              */
/* ------------------------------------------------------------------ */

.vpn-switch {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin: 0 auto clamp(20px, 3vw, 30px);
    border-radius: var(--vpn-r-pill);
    background: var(--vpn-surface-3);
    border: 1px solid var(--vpn-hairline);
    /* Centred without a wrapper, and never wider than the screen. */
    display: flex;
    width: fit-content;
    max-width: 100%;
}

.vpn-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: 0;
    border-radius: var(--vpn-r-pill);
    background: none;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--vpn-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--vpn-fast) var(--vpn-ease),
                background-color var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease);
}

.vpn-switch__opt svg {
    width: 17px;
    height: 17px;
    opacity: .7;
}

.vpn-switch__opt:hover {
    color: var(--vpn-text);
}

.vpn-switch__opt.is-active {
    background: var(--vpn-surface);
    color: var(--vpn-brand-700);
    box-shadow: var(--vpn-shadow-sm);
}

.vpn-switch__opt.is-active svg { opacity: 1; }

[data-bs-theme="dark"] .vpn-switch__opt.is-active {
    background: var(--vpn-surface-2);
    color: var(--vpn-brand-300);
}

.vpn-billing-panel {
    display: none;
}

.vpn-billing-panel.is-active {
    display: block;
    animation: vpn-fade-up var(--vpn-med) var(--vpn-ease-out);
}

.vpn-hourly__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vpn-hourly__wallet {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vpn-hourly__wallet strong {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Read-only country tiles on the plans page: informative, not selectable. */
.vpn-country--buy {
    cursor: default;
}

.vpn-country--buy:hover {
    transform: none;
    border-color: var(--vpn-border);
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Gift vouchers                                                       */
/* ------------------------------------------------------------------ */

/* Codes are read aloud and copied by hand, so they get monospace, wide
   letter-spacing and no ambiguity between similar glyphs. */
.vpn-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: var(--vpn-r-xs);
    background: var(--vpn-surface-3);
    color: var(--vpn-text);
    white-space: nowrap;
}

.vpn-code-input {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.0625rem !important;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-align: center;
}

.vpn-voucheritem {
    align-items: flex-start;
}

.vpn-voucheritem .vpnpay-copy {
    margin-inline-start: 8px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Referral tiers                                                      */
/* ------------------------------------------------------------------ */

.vpn-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.vpn-tier {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 12px;
    border-radius: var(--vpn-r-md);
    border: 1px solid var(--vpn-border);
    background: var(--vpn-surface-2);
    text-align: center;
}

.vpn-tier__pct {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--vpn-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vpn-tier__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--vpn-text-3);
    line-height: 1.35;
}

/* ------------------------------------------------------------------ */
/* Wallet                                                              */
/* ------------------------------------------------------------------ */

.vpn-walletcard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vpn-walletcard__balance {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.vpn-walletcard__mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--vpn-grad-brand);
    color: #fff;
    box-shadow: var(--vpn-glow-brand);
    flex-shrink: 0;
}

.vpn-walletcard__mark svg { width: 20px; height: 20px; }


.vpn-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
}

.vpn-amount {
    padding: 12px 8px;
    border-radius: var(--vpn-r-sm);
    border: 1.5px solid var(--vpn-border);
    background: var(--vpn-surface);
    color: var(--vpn-text);
    font-weight: 700;
    font-size: .9375rem;
    cursor: pointer;
    transition: transform var(--vpn-fast) var(--vpn-ease),
                border-color var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                color var(--vpn-med) var(--vpn-ease);
}

.vpn-amount:hover {
    border-color: var(--vpn-brand-300);
    transform: translateY(-2px);
}

.vpn-amount.is-selected {
    border-color: var(--vpn-brand-500);
    background: var(--vpn-brand-50);
    color: var(--vpn-brand-700);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

[data-bs-theme="dark"] .vpn-amount.is-selected {
    background: rgba(99, 102, 241, .18);
    color: var(--vpn-brand-300);
}

/* Credits and debits read at a glance in the history. */
.vpn-amount-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vpn-amount-cell.is-credit { color: var(--vpn-success-ink); }
.vpn-amount-cell.is-debit { color: var(--vpn-text-2); }

/* ------------------------------------------------------------------ */
/* Hourly (pay-as-you-go)                                              */
/* ------------------------------------------------------------------ */

/* The picker holds every country in the world, so it needs a way to search
   and a way to reveal more a batch at a time. */
.vpn-countries__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}

.vpn-countries__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    max-width: 340px;
}

.vpn-countries__search svg {
    position: absolute;
    inset-inline-start: 13px;
    width: 17px;
    height: 17px;
    color: var(--vpn-text-3);
    pointer-events: none;
}

.vpn-countries__search input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    font-size: .9375rem;
    color: var(--vpn-text);
    background: var(--vpn-surface-2);
    border: 1.5px solid var(--vpn-border);
    border-radius: var(--vpn-r-md);
    transition: border-color var(--vpn-med) var(--vpn-ease), box-shadow var(--vpn-med) var(--vpn-ease);
}

.vpn-countries__search input:focus {
    outline: none;
    border-color: var(--vpn-brand-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}

/* Safari draws its own clear button on a search field; the theme's is enough. */
.vpn-countries__search input::-webkit-search-decoration,
.vpn-countries__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.vpn-countries__count {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-3);
    white-space: nowrap;
}

.vpn-countries__more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.vpn-countries__none {
    text-align: center;
}

.vpn-countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: clamp(10px, 1.5vw, 14px);
}

/* Hidden by the search or the reveal limit. Must beat the grid display. */
.vpn-country.is-hidden {
    display: none !important;
}

.vpn-country {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "flag name"
        "flag rate"
        "day  day";
    align-items: center;
    gap: 2px 12px;
    padding: 15px 16px;
    border-radius: var(--vpn-r-md);
    border: 1.5px solid var(--vpn-border);
    background: var(--vpn-surface);
    text-align: start;
    cursor: pointer;
    transition: transform 200ms cubic-bezier(.34, 1.4, .64, 1),
                border-color var(--vpn-med) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease);
}

.vpn-country:hover {
    transform: translateY(-3px);
    border-color: var(--vpn-brand-300);
    box-shadow: var(--vpn-shadow-md);
}

.vpn-country.is-selected {
    border-color: var(--vpn-brand-500);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .15), var(--vpn-shadow-md);
}

/* Countries we do not run a server in yet. Listed so a customer can see where
   we are, but visibly inert: no hover lift, no pointer, nothing to press. */
.vpn-country--soon {
    cursor: default;
    background: var(--vpn-surface-2);
    border-style: dashed;
    border-color: var(--vpn-border);
}

.vpn-country--soon:hover {
    transform: none;
    border-color: var(--vpn-border);
    box-shadow: none;
}

.vpn-country--soon .vpn-country__flag,
.vpn-country--soon .vpn-country__name {
    opacity: .55;
}

.vpn-country__soon {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--vpn-text-3);
    text-transform: none;
}

.vpn-country__flag {
    grid-area: flag;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--vpn-surface-3);
    color: var(--vpn-text-3);
}

.vpn-country__flag .fi {
    width: 34px;
    height: 34px;
    background-size: cover;
    background-position: center;
}

.vpn-country__flag svg { width: 20px; height: 20px; }

.vpn-country__name {
    grid-area: name;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--vpn-text);
    line-height: 1.25;
}

.vpn-country__rate {
    grid-area: rate;
    font-size: .875rem;
    font-weight: 700;
    color: var(--vpn-brand-600);
    font-variant-numeric: tabular-nums;
}

.vpn-country__rate small { font-weight: 600; opacity: .7; }

[data-bs-theme="dark"] .vpn-country__rate { color: var(--vpn-brand-300); }

.vpn-country__day {
    grid-area: day;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vpn-border);
    font-size: .75rem;
    color: var(--vpn-text-3);
    font-variant-numeric: tabular-nums;
}

/* Selected tick, matching the payment tiles. */
.vpn-country.is-selected::after {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--vpn-brand-600)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .45);
}

.vpn-hourly__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vpn-hourly__where {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vpn-flag,
.vpn-hourly__where .fi {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.vpn-hourly__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--vpn-border);
}

/* ================================================================== */
/* 8. Bootstrap harmonisation                                         */
/* ================================================================== */

/* Pages this theme does not override still use Bootstrap components; soften
   them so they sit alongside the VPN surfaces instead of looking foreign. */

.card {
    border-radius: var(--vpn-r-lg);
    border-color: var(--vpn-border);
    box-shadow: var(--vpn-shadow-sm);
    background: var(--vpn-surface);
}

.card-header {
    background: transparent;
    border-bottom-color: var(--vpn-border);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.card-footer {
    background: transparent;
    border-top-color: var(--vpn-border);
}

.btn {
    border-radius: var(--vpn-r-pill);
    font-weight: 600;
    padding-inline: 1.15rem;
    transition: transform var(--vpn-fast) var(--vpn-ease),
                box-shadow var(--vpn-med) var(--vpn-ease),
                background-color var(--vpn-med) var(--vpn-ease);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--vpn-grad-brand);
    border-color: transparent;
    box-shadow: var(--vpn-glow-brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--vpn-grad-brand);
    border-color: transparent;
    filter: saturate(1.1) brightness(1.04);
}

.btn-outline-primary {
    border-color: var(--vpn-brand-400);
    color: var(--vpn-brand-600);
}

.btn-outline-primary:hover {
    background: var(--vpn-brand-500);
    border-color: var(--vpn-brand-500);
}

.form-control,
.form-select {
    border-radius: var(--vpn-r-sm);
    border-color: var(--vpn-border);
    background-color: var(--vpn-surface);
    color: var(--vpn-text);
    padding: .625rem .875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vpn-brand-500);
    box-shadow: var(--vpn-ring);
}

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vpn-text-2);
}

.table {
    --bs-table-bg: transparent;
    color: var(--vpn-text-2);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--vpn-border);
}

.badge {
    border-radius: var(--vpn-r-pill);
    font-weight: 700;
    padding: .42em .9em;
    letter-spacing: .005em;
}

.breadcrumb {
    font-size: .8125rem;
    margin-bottom: 16px;
}

.breadcrumb a {
    color: var(--vpn-text-3);
}

.breadcrumb a:hover {
    color: var(--vpn-brand-600);
}

.alert {
    border-radius: var(--vpn-r-md);
    border: 1px solid var(--vpn-border);
}

.dropdown-menu {
    border-radius: var(--vpn-r-md);
    border-color: var(--vpn-border);
    box-shadow: var(--vpn-shadow-lg);
    padding: 6px;
    background: var(--vpn-surface);
}

.dropdown-item {
    border-radius: var(--vpn-r-xs);
    padding: 8px 12px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--vpn-text-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--vpn-brand-50);
    color: var(--vpn-brand-700);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: var(--vpn-surface-3);
    color: var(--vpn-brand-300);
}

.modal-content {
    border-radius: var(--vpn-r-xl);
    border-color: var(--vpn-border);
    box-shadow: var(--vpn-shadow-xl);
    background: var(--vpn-surface);
}

.toast {
    border-radius: var(--vpn-r-md);
    box-shadow: var(--vpn-shadow-lg);
}

/* Scrollbars, where the browser lets us style them. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--vpn-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--vpn-border-strong);
    border-radius: var(--vpn-r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vpn-text-3);
    background-clip: content-box;
}

/* ================================================================== */
/* 9. Responsive safety net                                           */
/* ================================================================== */

/* A single element wider than the viewport makes the whole page scroll
   sideways, which on a phone reads as "the page didn't load properly".
   These rules stop that at the source rather than hiding it with
   overflow:hidden, which would also clip sticky and fixed children. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Grid and flex children default to min-width:auto, so a long URL or a wide
   table refuses to shrink and pushes the layout out. */
.vpn-grid > *,
.vpn-stack > *,
.vpn-split > *,
.vpn-card__body > *,
.vpn-listitem > * {
    min-width: 0;
}

/* Media never exceeds its column. */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Long, unbroken strings (subscription URLs, wallet addresses, UUIDs). */
.vpn-listitem__meta,
.vpn-card__body p,
.vpnpay-status__list dd,
.vpn-plan__desc {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    /* The header has to fit brand + theme toggle + account on a 320px screen. */
    .vpn-header {
        gap: 8px;
    }

    .vpn-userpill {
        padding: 4px 10px 4px 4px;
        gap: 7px;
    }

    .vpn-userpill__name {
        /* Below ~360px the name is the first thing worth dropping; the avatar
           still identifies the account and the menu still opens. */
        display: none;
    }

    .vpn-brand span:not(.vpn-brand__mark) {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Tables stay readable by scrolling inside their own box. */
    .vpn-table {
        min-width: 440px;
    }

    /* Full-width primary actions are easier to hit with a thumb. */
    .vpn-hourly__cta .vpn-btn,
    .vpn-hourly__cta {
        width: 100%;
    }

    .vpn-hourly__cta .vpn-btn {
        justify-content: center;
    }

    .vpn-countries {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }

    .invoice-gateway {
        width: calc(33.333% - 8px);
        min-width: 92px;
    }
}

/* ---- Tablet & small laptop (768-1199) -----------------------------
   The two-column dashboard needs ~610px of usable width before the left
   column stops squeezing the right one. Below that, stack. */
@media (max-width: 1199.98px) {
    .vpn-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The nav is the first thing to overflow on a tablet: let it scroll
       horizontally instead of pushing the header wider than the screen. */
    .vpn-nav {
        margin-inline: 0 auto;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
    }

    .vpn-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 991.98px) {
    /* Below this the label text costs more than it earns. */
    .vpn-nav__link {
        padding-inline: 12px;
    }

    .vpn-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 767.98px) {
    /* Clear the fixed tab bar, including the home indicator on iPhone. */
    .vpn-frame {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    /* The billing switch becomes two equal halves. */
    .vpn-switch {
        width: 100%;
    }

    .vpn-switch__opt {
        flex: 1;
        padding-inline: 12px;
    }

    .vpn-hourly__intro,
    .vpn-hourly__wallet {
        width: 100%;
    }

    /* The search field takes the whole row and the running count moves under
       it, rather than the two fighting over a phone's width. */
    .vpn-countries__tools {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .vpn-countries__search {
        max-width: none;
    }

    /* 16px keeps iOS from zooming the page when the field takes focus. */
    .vpn-countries__search input {
        font-size: 1rem;
    }

    .vpn-countries__count {
        text-align: center;
    }

    /* Full-width so the next batch is one easy thumb press. */
    .vpn-countries__more .vpn-btn {
        width: 100%;
    }

    /* Anchored jumps should not land under the tab bar. */
    html {
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    /* The QR sits under the URL rather than beside it. */
    .vpn-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpn-qr {
        margin-inline: auto;
    }
}

/* Coarse pointers get larger hit targets. */
@media (pointer: coarse) {
    .vpn-btn {
        min-height: 44px;
    }

    .vpn-tabbar__item {
        min-height: 48px;
        justify-content: center;
    }
}

/* ================================================================== */
/* 10. Motion & print                                                 */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .vpn-btn:hover,
    .vpn-tile:hover,
    .vpn-plan:hover,
    .vpn-stat:hover,
    .vpnpay-link:hover {
        transform: none;
    }
}

@media print {
    body::before,
    .vpn-header,
    .vpn-tabbar,
    .vpn-banner,
    .vpn-btn {
        display: none !important;
    }

    .vpn-frame,
    .vpn-card {
        box-shadow: none;
        border: 1px solid #ddd;
        padding: 0;
    }
}


/* ------------------------------------------------------------------ */
/* Plan cards: fair-use note                                           */
/* ------------------------------------------------------------------ */

/* Sits under "Unlimited traffic" on the plan that has a stated ceiling. */
.vpn-plan__fairuse {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--vpn-text-3);
}

/* The card on a highlighted plan sits on a coloured ground, so the muted
   grey would disappear into it. */
.vpn-plan--featured .vpn-plan__fairuse {
    color: rgba(255, 255, 255, .78);
}

/* ================================================================== */
/* 11. Right-to-left                                                  */
/* ================================================================== */

/* Most of the layout mirrors itself, because the stylesheet uses logical
   properties (inset-inline, margin-inline, text-align: start). What is left
   here is the handful of things a direction swap cannot infer. */

/* An arrow means "onwards", and onwards is leftwards in Arabic and Persian. */
[dir="rtl"] .vpn-tile svg.icon use[href="#arrow-right"],
[dir="rtl"] .vpn-btn svg.icon,
[dir="rtl"] .vpn-nav__link svg.icon {
    transform: scaleX(-1);
}

/* The shield, wallet, receipt and lifebuoy read the same either way; only the
   arrows should flip, so the blanket rule above is narrowed back for them. */
[dir="rtl"] .vpn-nav__link svg.icon:not([data-flip]),
[dir="rtl"] .vpn-btn svg.icon:not([data-flip]) {
    transform: none;
}

/* Numbers, money, codes and URLs stay left-to-right inside right-to-left text.
   Without this a subscription URL or a card number is reordered on screen and
   becomes wrong when read aloud or copied by eye. */
[dir="rtl"] .vpn-code,
[dir="rtl"] .vpn-code-input,
[dir="rtl"] .vpnpay-pay__amount,
[dir="rtl"] .vpn-plan__amount,
[dir="rtl"] .vpn-country__rate,
[dir="rtl"] .vpn-country__day,
[dir="rtl"] .vpn-amount-cell,
[dir="rtl"] .vpnpay-pay__value,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .mono {
    direction: ltr;
    unicode-bidi: isolate;
}

/* A price is still read as a unit, so it is isolated but stays on the
   reading edge of its own cell. */
[dir="rtl"] .vpn-amount-cell {
    text-align: end;
}

/* The search icon sits inside the field's padding, which the logical padding
   above already moved; the icon needs the same treatment. */
[dir="rtl"] .vpn-countries__search input {
    padding-inline: 38px 14px;
}

/* Persian and Arabic digits sit lower and need a little more line height than
   Latin at the same size. */
[dir="rtl"] body {
    line-height: 1.75;
}

/* A plan whose price is withheld until sign-in. The lock keeps the card the
   same height as a priced one, so a row of cards does not go ragged. */
.vpn-plan__price--hidden {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--vpn-text-3);
}

.vpn-plan__price--hidden svg {
    width: 30px;
    height: 30px;
}

.vpn-plan--featured .vpn-plan__price--hidden {
    color: rgba(255, 255, 255, .8);
}