/* Measurements from the 9.2 source, corrected by the 10.19 review. */
:root {
    --action-gradient: linear-gradient(90deg, #36c0ff 0%, #85e4ff 100%);
    --font: "PingFang SC", "PingFang TC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.overlay { background: rgba(0, 0, 0, .7); }
.modal { box-shadow: none; }
.modal-close { right: 20px; top: 20px; width: 16px; height: 16px; }
.login-modal { grid-template-columns: 370px minmax(0, 446px); }
.login-intro { position: relative; padding: 52px 32px 35px 45px; border: 0; }
.login-intro::after { content: ""; position: absolute; right: 0; top: 44px; bottom: 29px; width: 1px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.1) 0 4px, transparent 4px 8px); }
.login-intro h2 { margin: 59px 0 9px; font-weight: 600; font-size: 28px; line-height: 40px; }
.login-intro p { line-height: 26px; text-wrap: pretty; }
.login-intro small { font-size: 12px; line-height: 17px; text-wrap: pretty; }
.login-intro small a { color: var(--text); text-decoration: underline; white-space: nowrap; }
html:lang(zh-Hans) .login-intro small, html:lang(zh-Hant) .login-intro small { white-space: nowrap; letter-spacing: -.15px; }
.login-panel { padding: 44px 45px 35px 44px; }
.login-tabs { gap: 30px; }
.login-tabs button { height: 25px; line-height: 25px; }
.auth-form { margin-top: 21px; }
.auth-submit { background: var(--action-gradient); font-weight: 600; }
.auth-submit:disabled { opacity: 1; color: rgba(16,28,52,.5); background: linear-gradient(90deg, rgba(54,192,255,.5), rgba(133,228,255,.5)); }
.auth-divider { bottom: 112px; height: .5px; background: rgba(255,255,255,.1); }
.auth-divider span { top: -11px; padding: 0 17px; font-size: 14px; line-height: 20px; font-weight: 500; }
.auth-social { justify-content: center; }
.auth-social a { flex: 1 1 0; max-width: 112px; }
.qr-login { margin-top: 21px; }
.qr-box { padding: 10px; background: #fff; }
.qr-box > img { width: 147px; height: 147px; image-rendering: pixelated; }
.qr-placeholder { background: #fff; }
.primary-button { background: var(--action-gradient); font-weight: 600; }
.sp-submit-btn, .support-form button { background: var(--action-gradient); font-weight: 600; }
.primary-button:hover:not(:disabled) { filter: brightness(.9); }
.mobile-login-modal, .logout-modal, .payment-hint-modal { padding: 30px; }
.mobile-login-modal h2, .logout-modal h2, .payment-hint-modal h2 { margin: 0 0 12px; font-size: 18px; line-height: 26px; font-weight: 600; }
.mobile-login-modal p, .logout-modal p, .payment-hint-modal p { font-size: 16px; line-height: 28px; text-wrap: pretty; }
.logout-modal .modal-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
.logout-modal .light-button { display: none; }
.logout-modal .primary-button, .payment-hint-modal .primary-button { width: 124px; height: 48px; }
.payment-hint-modal .modal-actions.single { display: flex; justify-content: flex-end; }
.download-coming-soon-modal { width: 375px; max-width: calc(100vw - 48px); padding: 30px; }
.download-coming-soon-modal h2 { margin: 0 24px 12px 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.download-coming-soon-modal p { margin: 0; color: var(--muted); font-size: 16px; line-height: 28px; }
.download-coming-soon-modal .modal-actions.single { display: flex; justify-content: flex-end; }
.download-coming-soon-modal .primary-button { width: 124px; height: 48px; }
.payment-modal { width: 375px; min-height: 359px; padding: 30px; }
.payment-header { display: contents; }
.payment-modal h2 { margin: 0 24px 24px 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.payment-summary { padding-bottom: 28px; }
.payment-summary div { min-height: 26px; padding: 0; gap: 12px; }
.payment-summary div + div { margin-top: 22px; }
.payment-summary dt { flex-shrink: 0; font-size: 16px; line-height: 22px; }
.payment-summary dd { text-align: right; font-size: 16px; line-height: 22px; font-weight: 400; text-wrap: pretty; }
.payment-summary [data-payment-price], .payment-summary [data-stripe-price] { font-size: 20px; font-weight: 600; }
.payment-method-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.payment-method-label { color: var(--muted); font-size: 16px; }
.payment-methods { display: flex; gap: 10px; padding: 0; }
.pay-choice[data-pay-channel="midtrans"], .pay-choice[data-pay-channel="stripe"] { flex: 0 1 76px; width: 76px; height: 48px; padding: 8px; border: 2px solid transparent; border-radius: 10px; background: transparent; }
.pay-choice[data-pay-channel="midtrans"] img { width: 58px; height: 24px; }
.pay-choice[data-pay-channel="stripe"] img { width: 48px; height: 28px; }
.pay-choice[data-pay-channel] span { display: none; }
.pay-choice[data-pay-channel].active { border-color: var(--blue); }
.payment-modal .payment-submit { display: block; width: 124px; height: 48px; margin: 32px 0 0 auto; background: var(--vip-gradient); }
.pay-label-mobile { display: none; }
.payment-modal[data-payment-tier="2"] .payment-submit, .stripe-modal[data-payment-tier="2"] .payment-submit { background: var(--pro-gradient); }
.stripe-modal[data-payment-tier="1"] .payment-submit { background: var(--vip-gradient); }
.payment-modal[data-payment-tier="2"] .pay-choice.active { border-color: var(--purple); }
.payment-error { margin: 16px 0 0; text-wrap: pretty; }
.download-page .section-title p { text-wrap: pretty; }
@media (min-width: 768px) {
    /* Without social login, use the whole panel instead of reserving its footer. */
    .login-modal-basic .login-panel { display: flex; flex-direction: column; }
    .login-modal-basic .login-tabs { flex-shrink: 0; }
    .login-modal-basic .auth-form.active { display: flex; flex: 1; flex-direction: column; }
    .login-modal-basic .auth-field, .login-modal-basic .auth-submit { flex-shrink: 0; }
    .login-modal-basic .auth-submit { margin-top: auto; }
    /* The QR box starts 14px below its frame, aligned with the intro heading. */
    .login-modal-basic .qr-login { margin-top: 58px; }
    /* Desktop downloads are selected in the header dropdown (review p45). */
    body[data-page="guide"] .download-page { visibility: hidden; min-height: 720px; }
}
@media (max-width: 767px) {
    .overlay { background: rgba(0,0,0,.8); }
    .download-coming-soon-modal { width: calc(100vw - 64px); max-width: 375px; padding: 24px; }
    .download-coming-soon-modal h2 { margin: 0 0 10px; text-align: center; font-weight: 500; }
    .download-coming-soon-modal p { text-align: center; }
    .download-coming-soon-modal .primary-button { width: 100%; height: 40px; }
    .mobile-login-modal, .logout-modal, .payment-hint-modal { padding: 24px; }
    .mobile-login-modal h2, .logout-modal h2, .payment-hint-modal h2 { text-align: center; font-weight: 500; margin-bottom: 10px; }
    .mobile-login-modal p, .logout-modal p, .payment-hint-modal p { text-align: center; line-height: 28px; }
    .modal-actions { margin-top: 22px; gap: 11px; }
    .modal-actions button { height: 40px; }
    .light-button { border: .5px solid rgba(255,255,255,.2); color: var(--text); background: transparent; }
    .logout-modal > .modal-close { display: none; }
    .logout-modal .modal-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
    .logout-modal .light-button { display: block; }
    .logout-modal .primary-button { width: auto; height: 40px; }
    .payment-modal { inset: 0; width: 100%; min-height: 100dvh; max-height: 100dvh; overflow-y: auto; transform: none; border-radius: 0; padding: 0 0 max(50px, env(safe-area-inset-bottom)); background: var(--bg); }
    .payment-modal > .modal-close { left: 24px; right: auto; top: 10px; width: 24px; height: 24px; background: url("/static/img/rivervpn/payment-back.png") center/24px no-repeat; }
    .payment-header { display: block; flex: 0 0 auto; min-height: 200px; padding: 10px 24px 34px; border-radius: 0 0 20px 20px; color: #101c34; background: #85e4ff; }
    .payment-modal[data-payment-tier="2"] .payment-header { background: #d2b8ff; }
    .payment-modal h2 { margin: 0; color: #101c34; text-align: center; font-size: 18px; line-height: 25px; font-weight: 500; }
    .payment-modal .payment-summary { margin: 39px 0 0; padding: 0; border: 0; text-align: center; }
    .payment-modal .payment-summary div { display: block; margin: 0; padding: 0; }
    .payment-modal .payment-summary dt { display: none; }
    .payment-modal .payment-summary dd { width: max-content; max-width: 100%; margin: 0 auto; color: #101c34; text-align: center; }
    .payment-modal [data-payment-plan] { min-height: 32px; padding: 5px 16px; border-radius: 18px; background: rgba(16,28,52,.06); line-height: 22px; }
    .payment-modal .payment-summary [data-payment-price] { display: flex; justify-content: center; align-items: baseline; margin-top: 10px; height: 50px; font-size: 36px; line-height: 50px; font-weight: 600; white-space: pre; }
    .payment-price-currency, .payment-price-unit { font-size: 18px; line-height: 1; font-weight: 500; }
    .pay-label-mobile { display: inline; }
    .pay-label-desktop { display: none; }
    .payment-method-row { display: block; margin: 20px 24px 0; }
    .payment-method-label { display: none; }
    .payment-methods { flex-direction: column; gap: 0; }
    .pay-choice[data-pay-channel="midtrans"], .pay-choice[data-pay-channel="stripe"] { flex: 0 0 56px; width: 100%; height: 56px; border: 0; border-bottom: .5px solid var(--line); border-radius: 0; padding: 0; justify-content: flex-start; gap: 12px; }
    .pay-choice[data-pay-channel="midtrans"] img { width: 76px; height: 28px; }
    .pay-choice[data-pay-channel="stripe"] img { width: 28px; height: 28px; }
    .pay-choice[data-pay-channel] span { display: none; }
    .pay-choice[data-pay-channel="stripe"] span { display: inline; margin-left: 0; color: var(--text); font-size: 16px; font-weight: 400; }
    .pay-choice i { width: 24px; height: 24px; margin-left: auto; background: url("/static/img/rivervpn/payment-radio.png") center/24px no-repeat; }
    .pay-choice.active i { background-image: url("/static/img/rivervpn/payment-radio-vip.png"); }
    .payment-modal[data-payment-tier="2"] .pay-choice.active i { background-image: url("/static/img/rivervpn/payment-radio-pro.png"); }
    .payment-modal .pay-choice[data-pay-channel].active { border-bottom-color: var(--line); }
    .payment-modal .pay-choice:last-child { border-bottom: 0; }
    .payment-modal .payment-error { margin: 16px 24px; }
    .payment-modal .payment-submit { flex-shrink: 0; width: calc(100% - 48px); height: 48px; margin: auto 24px 0; }
    .download-page { min-height: 493px; padding: 30px 24px 50px; }
    .download-page .section-title h1 { margin: 0; font-size: 32px; line-height: 45px; font-weight: 600; }
    .download-page .section-title p { margin: 15px 0 0; font-size: 16px; line-height: 30px; }
    .download-list { margin-top: 23px; gap: 10px; }
    .download-list a { min-height: 60px; height: 60px; padding: 0 19px 0 17px; border-radius: 15px; font-size: 16px; }
    .download-list img { width: 32px; height: 32px; }
    .download-list span { white-space: nowrap; }
}