#root[data-product="vpn"] .product-page { padding-bottom: 108px; }
#root[data-product="vpn"] .product-plans { margin-top: 14px; }
.vpn-configurator { display: grid; gap: 13px; }
.vpn-progress { display: flex; align-items: center; padding: 4px 8px 9px; color: #9299aa; }
.vpn-progress span { display: inline-flex; align-items: center; gap: 5px; font-size: calc(10px * var(--font-scale)); font-weight: 800; white-space: nowrap; }
.vpn-progress i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e9ebf1; color: #747b8b; font-style: normal; }
.vpn-progress span.is-done { color: var(--brand-dark); }
.vpn-progress span.is-done i { color: #fff; background: var(--brand); box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 28%, transparent); }
.vpn-progress b { height: 1px; flex: 1; margin: 0 7px; background: #dfe2e9; }
.vpn-step { padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--paper) 96%, var(--brand-soft)); box-shadow: 0 10px 28px rgba(35, 39, 52, .055); }
.vpn-step--reveal { animation: vpn-reveal .28s ease both; }
@keyframes vpn-reveal { from { opacity: 0; transform: translateY(7px); } }
.vpn-step__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vpn-step__head span { display: block; margin-bottom: 2px; font-size: calc(9px * var(--font-scale)); font-weight: 800; color: var(--brand-dark); }
.vpn-step__head h2 { margin: 0; color: var(--ink); font-size: calc(14px * var(--font-scale)); font-weight: 900; line-height: 1.65; }
.vpn-step__head > button { border: 0; border-radius: 999px; padding: 6px 10px; background: var(--brand-soft); color: var(--brand-dark); font: inherit; font-size: calc(9.5px * var(--font-scale)); font-weight: 800; cursor: pointer; }
.vpn-country-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vpn-country { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 68px; padding: 10px; border: 1px solid #e2e5ec; border-radius: 15px; background: #fff; color: var(--ink); text-align: right; font: inherit; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vpn-country:active, .vpn-dc:active, .vpn-volume:active { transform: scale(.985); }
.vpn-country.is-active { border-color: color-mix(in srgb, var(--brand) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.vpn-country__flag { font-size: 27px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.vpn-country b, .vpn-country small { display: block; }
.vpn-country b { font-size: calc(12.5px * var(--font-scale)); }
.vpn-country small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: calc(8.5px * var(--font-scale)); text-overflow: ellipsis; white-space: nowrap; }
.vpn-choice-check { position: absolute; inset: 7px auto auto 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; opacity: 0; transform: scale(.7); transition: .18s ease; }
.vpn-choice-check svg { width: 12px; height: 12px; }
.is-active > .vpn-choice-check { opacity: 1; transform: scale(1); }
.vpn-dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vpn-dc { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-height: 158px; padding: 13px; overflow: hidden; border: 1px solid #dedbd4; border-radius: 17px; background: #fff; color: var(--ink); text-align: right; font: inherit; cursor: pointer; transition: .18s ease; }
.vpn-dc.is-active { border-color: color-mix(in srgb, var(--brand) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.vpn-dc--tehran { color: #f8fbff; border-color: #252d5f; background: radial-gradient(circle at 15% 5%, rgba(55, 222, 205, .3), transparent 40%), linear-gradient(145deg, #17205a, #101638 75%); box-shadow: 0 12px 25px rgba(17, 25, 65, .18); }
.vpn-dc--tehran.is-active { border-color: #52e5d2; box-shadow: 0 0 0 3px rgba(82, 229, 210, .18), 0 14px 28px rgba(17, 25, 65, .24); }
.vpn-dc--bamdad { background: linear-gradient(155deg, #fffdf8, #f5ecda); }
.vpn-dc--bamdad.is-active { border-color: #b88b47; box-shadow: 0 0 0 3px rgba(184, 139, 71, .13), 0 12px 24px rgba(100, 72, 34, .1); }
.vpn-dc__pattern { position: absolute; z-index: -1; inset: auto -24px -32px auto; width: 112px; height: 112px; border-radius: 50%; opacity: .16; pointer-events: none; }
.vpn-dc--bamdad .vpn-dc__pattern { background: repeating-conic-gradient(from 22.5deg, #a56f29 0 11.25deg, transparent 11.25deg 22.5deg); mask: radial-gradient(circle, transparent 0 24%, #000 25% 48%, transparent 49%); }
.vpn-dc--tehran .vpn-dc__pattern { inset: -35px -35px auto auto; background: repeating-radial-gradient(circle, rgba(103,231,216,.55) 0 1px, transparent 1px 8px); }
.vpn-dc__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 9px; border-radius: 13px; color: #815d2d; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(129,93,45,.1); }
.vpn-dc__icon svg { width: 34px; height: 34px; }
.vpn-dc--tehran .vpn-dc__icon { color: #66eadb; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vpn-dc__title { display: flex; align-items: baseline; gap: 5px; }
.vpn-dc__title b { font-size: calc(14px * var(--font-scale)); font-weight: 900; }
.vpn-dc__title small { color: var(--muted); font-size: calc(9px * var(--font-scale)); font-weight: 700; }
.vpn-dc--tehran .vpn-dc__title small, .vpn-dc--tehran .vpn-dc__hint { color: #b9c2e4; }
.vpn-dc__hint { display: block; margin-top: 4px; color: var(--muted); font-size: calc(9px * var(--font-scale)); line-height: 1.65; }
.vpn-dc__badge { margin-top: auto; border-radius: 999px; padding: 4px 8px; color: #3d5360; background: #eef2f4; font-size: calc(8.5px * var(--font-scale)); font-weight: 900; }
.vpn-dc--tehran .vpn-dc__badge { color: #092d31; background: #67e7d8; box-shadow: 0 4px 13px rgba(70, 229, 211, .2); }
.vpn-dc--bamdad .vpn-dc__badge { color: #694716; background: #ead5ad; }
.vpn-selection-summary { display: flex; align-items: center; gap: 10px; margin: -2px -2px 13px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 35%, #fff)); }
.vpn-selection-summary > span { font-size: 27px; }
.vpn-selection-summary b, .vpn-selection-summary small { display: block; }
.vpn-selection-summary b { font-size: calc(12px * var(--font-scale)); color: var(--ink); }
.vpn-selection-summary small { margin-top: 2px; font-size: calc(9px * var(--font-scale)); color: var(--muted); }
.vpn-volume-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vpn-volume { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 145px; padding: 13px; border: 1px solid #e1e4eb; border-radius: 16px; background: #fff; color: var(--ink); text-align: right; font: inherit; cursor: pointer; transition: .18s ease; }
.vpn-volume--popular { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: linear-gradient(155deg, #fff, color-mix(in srgb, var(--brand-soft) 48%, #fff)); }
.vpn-volume__popular { position: absolute; inset: -7px auto auto 9px; border-radius: 999px; padding: 3px 8px; background: var(--brand); color: #fff; font-size: calc(8px * var(--font-scale)); font-weight: 900; }
.vpn-volume__amount { display: flex; align-items: baseline; gap: 4px; }
.vpn-volume__amount b { font-size: calc(25px * var(--font-scale)); font-weight: 950; letter-spacing: -.5px; }
.vpn-volume__amount small { color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.vpn-volume__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.vpn-volume__price del { width: 100%; color: var(--muted); font-size: calc(9px * var(--font-scale)); }
.vpn-volume__price b { font-size: calc(12.5px * var(--font-scale)); font-weight: 900; }
.vpn-volume__price small { color: var(--muted); font-size: calc(8.5px * var(--font-scale)); }
.vpn-volume__action { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 30px; margin-top: auto; border-radius: 10px; color: var(--brand-dark); background: var(--brand-soft); font-size: calc(9.5px * var(--font-scale)); font-weight: 900; }
.vpn-volume__action svg { width: 12px; height: 12px; }
.vpn-volume.is-disabled { opacity: .55; }
.vpn-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed #d7dbe5; border-radius: 14px; color: var(--muted); text-align: center; font-size: calc(11px * var(--font-scale)); }
@media (max-width: 355px) { .vpn-step { padding: 11px; } .vpn-country-grid, .vpn-dc-grid, .vpn-volume-grid { gap: 7px; } .vpn-country { padding: 8px; } .vpn-country__flag { font-size: 23px; } .vpn-dc { min-height: 140px; padding: 11px; } .vpn-volume { min-height: 137px; padding: 11px; } }
@media (min-width: 720px) { .vpn-country-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vpn-volume-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .vpn-step--reveal { animation: none; } .vpn-country, .vpn-dc, .vpn-volume, .vpn-choice-check { transition: none; } }