/* VEYRO VPN — Neon Tariffs */

.tariffs {
    padding: 0;
    background: transparent;
}

.tariffs h1 {
    font-size: 28px;
    text-align: center;
    margin: 16px 0 8px;
}

.tariffs-subtitle {
    color: #9dc7e0;
    text-align: center;
    margin-bottom: 24px;
}

.tariff-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    margin-bottom: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #102b4a, #08172e);
    border: 1px solid #159fe6;
    box-shadow: 0 0 18px #008cff30;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.tariff-card:active {
    transform: scale(.98);
}

.tariff-card.selected {
    border: 2px solid #00f5b0;
    box-shadow: 0 0 24px #00f5b055;
}

.tariff-card.best {
    background: linear-gradient(135deg, #103b39, #092d32);
    border-color: #39ff85;
}

.tariff-name {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.tariff-price {
    font-size: 39px;
    font-weight: 900;
    color: #fff;
    margin-top: 14px;
}

.tariff-monthly {
    color: #9ec3d5;
    font-size: 13px;
}

.tariff-saving {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 10px;
    border-radius: 9px;
    background: #123e39;
    color: #49f5ae;
    font-size: 12px;
    font-weight: 700;
}

.tariff-best-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ffe16a, #ffba31);
    color: #322000;
    font-size: 11px;
    font-weight: 900;
}

.tariff-pay {
    position: sticky;
    bottom: 94px;
    width: 100%;
    padding: 16px;
    border-radius: 15px;
    background: linear-gradient(90deg, #30f58a, #00dfe8);
    color: #06241d;
    font-weight: 900;
    box-shadow: 0 0 24px #00f5b055;
}

/* VEYRO NEON V2 */
.tariffs h1 {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.8px;
    background: linear-gradient(90deg,#ffffff,#50dcff,#ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tariff-card {
    min-height: 148px;
    padding: 23px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 95% 0%,#1169c655,transparent 65%),
        linear-gradient(135deg,#142e60,#09142d 85%);
    border: 2px solid #18baff;
    box-shadow: 0 0 20px #009dff45,inset 0 0 25px #1165ff18;
}

.tariff-card:nth-of-type(3) {
    border-color: #a35aff;
    box-shadow: 0 0 22px #a35aff55;
}

.tariff-card.best {
    background:
        radial-gradient(ellipse at 95% 0%,#14ff9270,transparent 65%),
        linear-gradient(135deg,#12544d,#08252c);
    border: 2px solid #35ff9a;
    box-shadow: 0 0 28px #00ff9966,inset 0 0 35px #00ff9920;
}

.tariff-name {
    font-size: 21px;
}

.tariff-price {
    font-size: 48px;
    letter-spacing: -1px;
    text-shadow: 0 0 20px #6ddcff55;
}

.tariff-saving {
    background: linear-gradient(90deg,#00c97c,#04e0a0);
    color: #03271d;
    font-weight: 900;
    padding: 8px 12px;
    border-radius: 12px;
}

.tariff-best-label {
    background: linear-gradient(100deg,#fff2a2,#ffb900);
    box-shadow: 0 0 20px #ffc40075;
    font-size: 12px;
}

.tariff-pay {
    border: 0;
    font-size: 17px;
    background: linear-gradient(100deg,#37ff8b,#00dfff);
    box-shadow: 0 0 28px #00e9ca85;
}

/* VEYRO PREMIUM V3 */
.tariff-card {
    isolation: isolate;
    transition: transform .22s ease, border-color .22s ease,
                box-shadow .22s ease;
}

.tariff-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 160px;
    height: 160px;
    right: -55px;
    top: -75px;
    border-radius: 50%;
    background: #16baff;
    filter: blur(75px);
    opacity: .35;
    pointer-events: none;
}

.tariff-card.best::before {
    background: #25ff9c;
    opacity: .6;
}

.tariff-card.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px #00f5b0,
                0 0 30px #00f5b070;
}

.tariff-saving {
    font-size: 14px;
    padding: 9px 15px;
    box-shadow: 0 0 16px #00e6a04d;
}

.tariff-best-label {
    font-size: 13px;
    letter-spacing: .3px;
    padding: 9px 14px;
}

.tariff-card.best .tariff-price {
    color: #caffdf;
    text-shadow: 0 0 22px #00ff9970;
}

.tariff-pay {
    min-height: 54px;
    font-size: 18px;
    border-radius: 18px;
    transition: transform .2s ease;
}

.tariff-pay:active {
    transform: scale(.97);
}

/* VEYRO DISCOUNT BADGES */
.tariff-card {
    padding-top: 28px;
}

.tariff-saving {
    position: absolute;
    top: 18px;
    right: 16px;
    margin: 0;
    padding: 8px 11px;
    font-size: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg,#30ff9c,#00d9c6);
    box-shadow: 0 0 18px #00ffc477;
}

.tariff-card.best .tariff-saving {
    top: 20px;
    right: 12px;
}

.tariff-card.best .tariff-best-label {
    max-width: 60%;
}

.tariff-card.best .tariff-best-label::before {
    content: "♛ ";
}

/* VEYRO INDIVIDUAL TARIFF DESIGN V5 */

.tariff-monthly {
    font-size: 15px;
    font-weight: 600;
    color: #b6eaff;
    margin-top: 5px;
}

.tariff-saving {
    font-size: 14px;
    padding: 10px 13px;
    font-weight: 900;
    letter-spacing: .1px;
}

.tariff-card[data-months="1"] {
    background:
        radial-gradient(circle at 100% 0%, #168eff65, transparent 65%),
        linear-gradient(135deg, #143e75, #07172e);
    border-color: #20baff;
}

.tariff-card[data-months="3"] {
    background:
        radial-gradient(circle at 95% 5%, #00e5e955, transparent 65%),
        linear-gradient(135deg, #103b65, #08182e);
    border-color: #00d9f5;
}

.tariff-card[data-months="6"] {
    background:
        radial-gradient(circle at 95% 0%, #ae55ff65, transparent 65%),
        linear-gradient(135deg, #30225e, #0b1732);
    border-color: #ac65ff;
}

.tariff-card[data-months="12"] {
    background:
        radial-gradient(circle at 95% 0%, #29ff9a75, transparent 65%),
        linear-gradient(135deg, #125c4c, #082b30);
    border-color: #40ffad;
}

.tariff-card[data-months="1"] .tariff-price {
    color: #ffffff;
    text-shadow: 0 0 18px #36baff88;
}

.tariff-card[data-months="3"] .tariff-price {
    color: #e7ffff;
    text-shadow: 0 0 18px #00eaff88;
}

.tariff-card[data-months="6"] .tariff-price {
    color: #f4e9ff;
    text-shadow: 0 0 18px #a65aff88;
}

.tariff-card[data-months="12"] .tariff-price {
    color: #c9ffde;
    text-shadow: 0 0 22px #00ff9999;
}

EOFcat >> /home/veyro/veyro-miniapp/static/tariffs.css <<'EOF'

/* VEYRO INDIVIDUAL TARIFF DESIGN V5 */

.tariff-monthly {
    font-size: 15px;
    font-weight: 600;
    color: #b6eaff;
    margin-top: 5px;
}

.tariff-saving {
    font-size: 14px;
    padding: 10px 13px;
    font-weight: 900;
    letter-spacing: .1px;
}

.tariff-card[data-months="1"] {
    background:
        radial-gradient(circle at 100% 0%, #168eff65, transparent 65%),
        linear-gradient(135deg, #143e75, #07172e);
    border-color: #20baff;
}

.tariff-card[data-months="3"] {
    background:
        radial-gradient(circle at 95% 5%, #00e5e955, transparent 65%),
        linear-gradient(135deg, #103b65, #08182e);
    border-color: #00d9f5;
}

.tariff-card[data-months="6"] {
    background:
        radial-gradient(circle at 95% 0%, #ae55ff65, transparent 65%),
        linear-gradient(135deg, #30225e, #0b1732);
    border-color: #ac65ff;
}

.tariff-card[data-months="12"] {
    background:
        radial-gradient(circle at 95% 0%, #29ff9a75, transparent 65%),
        linear-gradient(135deg, #125c4c, #082b30);
    border-color: #40ffad;
}

.tariff-card[data-months="1"] .tariff-price {
    color: #ffffff;
    text-shadow: 0 0 18px #36baff88;
}

.tariff-card[data-months="3"] .tariff-price {
    color: #e7ffff;
    text-shadow: 0 0 18px #00eaff88;
}

.tariff-card[data-months="6"] .tariff-price {
    color: #f4e9ff;
    text-shadow: 0 0 18px #a65aff88;
}

.tariff-card[data-months="12"] .tariff-price {
    color: #c9ffde;
    text-shadow: 0 0 22px #00ff9999;
}


/* VEYRO TARIFF DECOR V6 */

.tariff-card::after {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    opacity: .12;
    pointer-events: none;
}

.tariff-card[data-months="1"]::after {
    content: "⚡";
}

.tariff-card[data-months="3"]::after {
    content: "◆";
    color: #3ffff0;
}

.tariff-card[data-months="6"]::after {
    content: "★";
    color: #c58cff;
}

.tariff-card[data-months="12"]::after {
    content: "♛";
    color: #ffe077;
    opacity: .22;
}

.tariff-card {
    background-clip: padding-box;
}

.tariff-card .tariff-name {
    position: relative;
    z-index: 1;
}


/* VEYRO TARIFF DECOR V6 */

.tariff-card::after {
    position: absolute;
    right: 20px;
    bottom: 12px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    opacity: .12;
    pointer-events: none;
}

.tariff-card[data-months="1"]::after {
    content: "⚡";
}

.tariff-card[data-months="3"]::after {
    content: "◆";
    color: #3ffff0;
}

.tariff-card[data-months="6"]::after {
    content: "★";
    color: #c58cff;
}

.tariff-card[data-months="12"]::after {
    content: "♛";
    color: #ffe077;
    opacity: .22;
}

.tariff-card {
    background-clip: padding-box;
}

.tariff-card .tariff-name {
    position: relative;
    z-index: 1;
}


/* VEYRO DECOR FINISH */
.tariff-card::after {
    opacity: .30;
    font-size: 52px;
    right: 18px;
    bottom: 14px;
    filter: drop-shadow(0 0 12px currentColor);
}

.tariff-card[data-months="1"]::after {
    color: #45c7ff;
}

.tariff-card[data-months="3"]::after {
    color: #42fff0;
}

.tariff-card[data-months="6"]::after {
    color: #d4a0ff;
}

.tariff-card[data-months="12"]::after {
    color: #ffe077;
    opacity: .35;
}

/* VEYRO ANIMATED TARIFF ICONS */

.tariff-card::after {
    opacity: .65;
    font-size: 54px;
    right: 17px;
    bottom: 13px;
    transform-origin: center;
    animation: veyro-icon-float 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 14px currentColor);
    will-change: transform;
}

.tariff-card[data-months="1"]::after {
    color: #4bd7ff;
    animation-delay: 0s;
}

.tariff-card[data-months="3"]::after {
    color: #42fff0;
    animation-delay: -.8s;
}

.tariff-card[data-months="6"]::after {
    color: #d9a0ff;
    animation-delay: -1.6s;
}

.tariff-card[data-months="12"]::after {
    color: #ffe477;
    opacity: .75;
    animation-delay: -2.4s;
}

@keyframes veyro-icon-float {
    0%, 100% {
        transform: translateY(0) rotate(-6deg) scale(1);
        filter: drop-shadow(0 0 8px currentColor);
    }

    50% {
        transform: translateY(-9px) rotate(6deg) scale(1.12);
        filter: drop-shadow(0 0 20px currentColor);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tariff-card::after {
        animation: none;
    }
}


/* VEYRO LIGHTNING POSITION FIX */

.tariff-card[data-months="1"]::after {
    right: 9px;
    animation-name: veyro-lightning-float;
}

@keyframes veyro-lightning-float {
    0%, 100% {
        transform: translateY(0) rotate(-3deg) scale(1);
        filter: drop-shadow(0 0 10px currentColor);
    }

    50% {
        transform: translateY(-7px) rotate(3deg) scale(1.08);
        filter: drop-shadow(0 0 20px currentColor);
    }
}