/* GTA V plan selection. Prices and checkout destinations are defined in the page. */
#tierModal {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    padding:24px;
    border:0;
    color:#f0f3f9;
    background:#05070bc9;
    backdrop-filter:blur(8px);
}
#tierModal[open] { display:flex; align-items:center; justify-content:center; }
#tierModal::backdrop { background:transparent; }
#tierModal .tier-modal-content {
    width:100%;
    max-width:850px;
    max-height:calc(100dvh - 48px);
    overflow-y:auto;
    padding:32px;
    border:1px solid #2a303d;
    border-radius:22px;
    background:#12151c;
    box-shadow:0 24px 100px #0009;
    animation:none;
}
#tierModal .payment-modal-close {
    position:absolute;
    top:20px;
    right:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #ffffff16;
    border-radius:10px;
    background:#ffffff05;
    color:#abb5c5;
    font-size:24px;
    cursor:pointer;
}
#tierModal .payment-modal-close:hover { color:#fff; background:#ffffff0e; }
.plan-eyebrow { margin:0 44px 12px 0; color:#8eaff0; font-size:10px; font-weight:700; letter-spacing:.16em; }
#tierModal .payment-modal-title { margin:0 36px 10px 0; text-align:left; font-size:30px; line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.plan-intro { margin:0 0 26px; color:#9ba7ba; font-size:13px; line-height:1.7; }
#tierModal .tier-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#tierModal .tier-card { align-items:stretch; min-width:0; padding:24px; border:1px solid #2b3342; border-radius:14px; background:#191e28; text-align:left; cursor:default; }
#tierModal .tier-card:hover { transform:none; box-shadow:none; border-color:#475975; }
#tierModal .tier-card-featured { background:#1c273b; border-color:#4f76af; }
#tierModal .tier-card-featured:hover { border-color:#8eaff0; }
.plan-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
#tierModal .tier-card-name { margin:0; color:#f0f3f9; font-size:18px; font-weight:650; letter-spacing:-.02em; }
.plan-badge { padding:5px 8px; border:1px solid #8eaff040; border-radius:5px; color:#8eaff0; background:#8eaff010; font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.plan-summary { margin:12px 0 20px; color:#a2adc0; font-size:12px; line-height:1.7; }
#tierModal .tier-card-price { justify-content:flex-start; gap:9px; margin:0; }
#tierModal .tier-price-current { color:#f0f3f9; font-size:40px; line-height:1.15; font-weight:700; letter-spacing:-.055em; }
#tierModal .tier-card-featured .tier-price-current { color:#8eaff0; }
#tierModal .tier-price-old { opacity:1; color:#8e9bad; font-size:15px; }
.plan-term { margin:7px 0 20px; color:#9ba7ba; font-size:11px; }
#tierModal .tier-card-features { margin:0 0 22px; padding:18px 0 0; border-top:1px solid #ffffff10; }
#tierModal .tier-card-features li { position:relative; border:0; padding:6px 0 6px 20px; color:#cbd5e5; font-size:12px; line-height:1.5; }
#tierModal .tier-card-features li::before { content:'✓'; position:absolute; left:0; color:#8eaff0; }
#tierModal .tier-card-btn { display:block; width:100%; min-height:44px; padding:12px 16px; border:1px solid #3a475b; border-radius:8px; background:#242c39; color:#d8e2f4; font:600 12px/1.5 Inter,system-ui,sans-serif; text-transform:none; letter-spacing:0; cursor:pointer; box-shadow:none; }
#tierModal .tier-card-btn:hover { background:#303c50; border-color:#627fa8; box-shadow:none; }
#tierModal .tier-card-featured .tier-card-btn { background:#5486ed; border-color:#5486ed; color:#ffffff; }
#tierModal .tier-card-featured .tier-card-btn:hover { background:#6595fa; border-color:#6595fa; }
.plan-upgrade { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; margin-top:18px; padding:20px 22px; border:1px solid #2b3342; border-radius:12px; background:#171c25; }
.plan-upgrade h3 { margin:0 0 6px; color:#e0e7f2; font-size:14px; font-weight:600; }
.plan-upgrade p { max-width:340px; margin:0; color:#a2adc0; font-size:11px; line-height:1.65; }
#tierModal .plan-upgrade .tier-price-current { font-size:28px; }
#tierModal .plan-upgrade .tier-price-old { font-size:12px; }
#tierModal .plan-upgrade .tier-card-btn { width:auto; white-space:nowrap; background:transparent; }
#tierModal .plan-upgrade .tier-card-btn:hover { background:#8eaff014; }
#tierModal button:focus-visible { outline:2px solid #8eaff0; outline-offset:4px; }
@media(max-width:620px) {
    #tierModal { padding:12px; }
    #tierModal .tier-modal-content { max-height:calc(100dvh - 24px); padding:26px 20px 20px; border-radius:16px; }
    #tierModal .payment-modal-close { top:14px; right:14px; }
    #tierModal .payment-modal-title { font-size:25px; }
    .plan-intro { margin-bottom:20px; font-size:12px; }
    #tierModal .tier-cards { grid-template-columns:1fr; gap:12px; }
    #tierModal .tier-card { padding:20px; }
    .plan-upgrade { grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:20px; }
    #tierModal .plan-upgrade .tier-card-btn { grid-column:1 / -1; width:100%; }
}
@media(prefers-reduced-motion:reduce) { #tierModal * { transition:none!important; animation:none!important; } }