
/* X Freedom: consistent hover, focus and selection across every tariff. */
.pricing-section{grid-column:1/-1;min-width:0;margin:6px 0 18px}
.pricing-configuration{display:flex;align-items:center;gap:24px;padding:20px 24px;border:1px solid #00bac077;border-radius:20px;background:linear-gradient(110deg,#002c2d88,#102425aa);margin-bottom:32px}
.pricing-configuration strong{font:700 25px/1.2 Georgia,serif;color:#eef7f7}
.pricing-configuration p{margin:0;color:#a6b6b9;font-size:14px;line-height:1.5}
.duration-choice{display:flex;align-items:center;gap:12px;white-space:nowrap;font-weight:700}
.pricing-section input[type=radio],.pricing-section input[type=checkbox]{appearance:none;flex:none;min-width:24px;width:24px;height:24px;padding:0;border:2px solid #829294;border-radius:5px;background:transparent;display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
.pricing-section input:checked{background:#00d4d9;border-color:#00d4d9}
.pricing-section input:checked:after{content:"";width:10px;height:6px;border-left:3px solid #00272a;border-bottom:3px solid #00272a;transform:translateY(-2px) rotate(-45deg)}
.pricing-section input:focus-visible,.plan-buy:focus-visible{outline:2px solid #b5ffff;outline-offset:5px}
.duration-choice input:disabled{cursor:default;opacity:1}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pricing-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px 24px 24px;border:1px solid #3c4d4e;border-radius:20px;background:linear-gradient(150deg,#0a181aee,#030b0bea);box-shadow:0 12px 28px #0003;cursor:pointer;transition:border-color .22s,box-shadow .22s,transform .22s,background .22s}
.pricing-card:hover,.pricing-card:focus-within,.pricing-card.is-selected{border-color:#00d5d9;box-shadow:0 0 0 1px #00b7bd77,0 16px 50px -12px #00cfda88,inset 0 0 35px #00c8d409;background:linear-gradient(150deg,#0a1e20f7,#020d0df7);transform:translateY(-4px)}
.selected-badge{display:none;position:absolute;left:24px;top:-13px;padding:5px 13px;color:#001b1d;font-size:13px;line-height:1.2;font-weight:700;background:linear-gradient(90deg,#67e9e2,#00c9d4);border-radius:20px}
.is-selected .selected-badge{display:block}
.plan-top{display:flex;align-items:center;gap:12px;min-height:42px}
.plan-top h2{font:700 clamp(20px,2.2vw,26px)/1.2 Georgia,serif;margin:0;color:#edf4f5;overflow-wrap:anywhere}
.plan-top input{margin:0 0 0 auto}
.plan-crown{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid #00b3b866;border-radius:12px;background:radial-gradient(ellipse at center,#36d4d431,#09292d);color:#63d9dc;box-shadow:inset 0 0 12px #00c9d414}
.plan-crown svg{width:23px;height:23px}
.plan-description{display:block;color:#abb8bb;font-size:14px;line-height:1.55;min-height:66px;margin-top:14px;cursor:pointer}
.plan-meta{font-size:13px;color:#abb8bb;margin:12px 0 24px}
.plan-price{font:700 clamp(36px,4vw,52px)/1.05 Georgia,serif;color:#edf5f5;white-space:nowrap}
.plan-price-caption{font-size:13px;color:#9facb1;margin:4px 0 0}
.plan-features{list-style:none;padding:0;margin:28px 0 32px;display:grid;gap:14px}
.plan-features li{position:relative;padding-left:26px;color:#e2edef;font-size:14px;line-height:1.35}
.plan-features li:before{content:"";position:absolute;left:3px;top:3px;width:10px;height:6px;border-left:1.5px solid #64e2df;border-bottom:1.5px solid #64e2df;transform:rotate(-45deg)}
.plan-buy{width:100%;margin-top:auto;min-height:44px;border:1px solid #344d50;border-radius:9px;color:#e9f4f4;font-family:inherit;font-size:14px;line-height:1.3;font-weight:600;background:#071112;cursor:pointer;transition:background .22s,box-shadow .22s,color .22s,border-color .22s}
.pricing-card:hover .plan-buy,.pricing-card:focus-within .plan-buy,.pricing-card.is-selected .plan-buy{background:linear-gradient(105deg,#00b9b8,#08b5d6);border-color:#17d7df;color:#001f23;box-shadow:0 0 20px #00d2dd44,inset 0 1px 3px #b7ffff66}
.plan-buy:disabled{cursor:not-allowed}
.pricing-payment-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:#abb8bb}
.pricing-providers{display:flex;gap:8px;flex-wrap:wrap}
.provider-choice{display:flex;align-items:center;gap:9px;border:1px solid #405254;border-radius:16px;padding:8px 12px;color:#ebf4f4;background:#071112;cursor:pointer}
.provider-choice:has(input:checked){border-color:#00d2d6;background:#003b3d44}
.provider-choice input[type=radio]{min-width:19px;width:19px;height:19px;margin:0;border-radius:4px}
.provider-choice input:checked:after{width:8px;height:5px;border-width:2px}
.pricing-payment-row small{margin-left:auto;font-size:12px}
.payment-message{font-size:13px;line-height:1.5;color:#a6b8b9;margin:14px 0 0;min-height:20px}
@media(min-width:900px){.wrap{max-width:1320px}}
@media(max-width:900px){.pricing-configuration{gap:16px;flex-wrap:wrap;padding:18px}.pricing-configuration p{flex-basis:100%}.pricing-configuration strong{font-size:23px}.pricing-card{padding:22px 18px}.plan-top{flex-wrap:wrap;gap:8px}.plan-top h2{font-size:22px}.plan-price{font-size:39px}.plan-description{min-height:88px}}
@media(max-width:720px){.pricing-grid{grid-template-columns:1fr;gap:25px}.plan-description{min-height:0}.plan-top{flex-wrap:nowrap}.plan-top h2{font-size:25px}.pricing-card{padding:24px}.plan-price{font-size:49px}.plan-meta{margin-bottom:20px}.pricing-payment-row small{margin-left:0;flex-basis:100%}.pricing-configuration strong{font-size:21px}.pricing-configuration{gap:14px}.duration-choice{font-size:14px}.pricing-configuration p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.pricing-card,.plan-buy,.pricing-section input{transition:none}.pricing-card:hover,.pricing-card:focus-within,.pricing-card.is-selected{transform:none}}

/* ---- 2026-10-27 fix: tariff buy button unreadable on the selected «Свой путь» card ----
   Cause: .plan-buy is `disabled` while no payment provider is configured. A selected/hovered card paints a bright
   cyan gradient behind it, but iOS Safari / Android WebView force the grey disabled text colour
   (-webkit-text-fill-color + UA opacity) on the button → grey on cyan. Fix: own the text colour explicitly and give the
   disabled state its own calm look instead of the «active» gradient. */
.plan-buy { -webkit-text-fill-color: currentColor; opacity: 1; }
.plan-buy:disabled { cursor: not-allowed; color: #aebdc0; -webkit-text-fill-color: #aebdc0; background: #0a1415; border-color: #2c4144; box-shadow: none; }
.pricing-card:hover .plan-buy:disabled,
.pricing-card:focus-within .plan-buy:disabled,
.pricing-card.is-selected .plan-buy:disabled { background: #0c1b1d; border-color: #1fb7bd; color: #d5eeee; -webkit-text-fill-color: #d5eeee; box-shadow: none; }
.pricing-card:hover .plan-buy:not(:disabled),
.pricing-card:focus-within .plan-buy:not(:disabled),
.pricing-card.is-selected .plan-buy:not(:disabled) { -webkit-text-fill-color: #001f23; }
