/** * VIP pay modal + hover cards (legacy payvip-modal / vip-card). */ /* VIP now uses the shared modal runtime host. */ .aksrt-modal-runtime.aksrt-vip-modal-shell { z-index: 1200; } .aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog { width: min(560px, 100%); max-height: min(90vh, 760px); background: var(--main-bg-color, #fff); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); } .aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__content { padding: 0; } @media (max-width: 768px) { .aksrt-modal-runtime.aksrt-vip-modal-shell.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog { width: 100%; max-width: 100%; max-height: calc(100vh - 20px); border-radius: 16px 16px 0 0; } } .payvip-modal { position: relative; padding: 18px 16px 16px; } .aksrt-vip-points-modal__title { margin: 0 0 6px; padding-right: 24px; font-size: 20px; } .aksrt-vip-points-modal__desc, .aksrt-vip-points-modal__note { margin: 0 0 12px; color: var(--muted-color, #777); font-size: 13px; line-height: 1.6; } .aksrt-vip-points-modal__balance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; background: rgba(16, 185, 129, 0.08); } .aksrt-vip-points-modal__balance-label { color: var(--muted-color, #777); font-size: 13px; } .aksrt-vip-points-modal__balance-value { color: #047857; font-size: 17px; } .aksrt-vip-points-modal__packages { display: grid; gap: 9px; margin-bottom: 14px; } .aksrt-vip-points-option { display: block; cursor: pointer; } .aksrt-vip-points-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; } .aksrt-vip-points-option__card { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 13px; border: 1px solid var(--color-line, rgba(0, 0, 0, 0.1)); border-radius: 10px; background: var(--main-bg-color, #fff); transition: border-color .15s ease, box-shadow .15s ease; } .aksrt-vip-points-option__title { font-size: 14px; } .aksrt-vip-points-option__days { color: var(--muted-color, #777); font-size: 12px; } .aksrt-vip-points-option__cost { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #047857; font-size: 14px; font-weight: 700; } .aksrt-vip-points-option > input:checked + .aksrt-vip-points-option__card { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14); } .aksrt-vip-points-option > input:focus-visible + .aksrt-vip-points-option__card { outline: 3px solid rgba(16, 185, 129, 0.3); outline-offset: 2px; } .aksrt-vip-points-option.is-disabled { cursor: not-allowed; opacity: .55; } .aksrt-vip-points-option.is-disabled .aksrt-vip-points-option__cost { color: #b91c1c; } .aksrt-vip-points-modal__empty { padding: 22px 12px; color: var(--muted-color, #777); text-align: center; } .aksrt-vip-points-submit { width: 100%; min-height: 42px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #059669, #10b981); cursor: pointer; font: inherit; font-weight: 700; } .aksrt-vip-points-submit:disabled { cursor: not-allowed; opacity: .5; } .aksrt-vip-points-submit.is-loading { cursor: wait; opacity: .7; } .aksrt-vip-points-modal__tip { min-height: 1.4em; margin: 9px 0 0; } @media (max-width: 480px) { .aksrt-vip-points-modal { padding: 16px 13px 14px; } .aksrt-vip-points-modal__balance { align-items: flex-start; flex-direction: column; gap: 3px; } } .pay-vip-form-row { display: grid; gap: 12px; } @media (min-width: 640px) { .pay-vip-form-row { grid-template-columns: 1fr 1.2fr; } } /* Modal-only equity (admin HTML; no forced bullets) */ .payvip-modal .v-equity { display: block; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; line-height: 1.6; } .payvip-modal .v-equity > li { display: block; margin: 0 0 6px; padding: 0; list-style: none; } .payvip-modal .v-equity > li::before, .payvip-modal .v-equity > li::after { content: none !important; display: none !important; } .aksrt-vip-submit.is-loading, .aksrt-vip-submit:disabled { opacity: 0.7; cursor: wait; } .vipbg-v2 { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px; border-radius: 8px; color: #fff; background: linear-gradient(90deg, #ffb347, #ff6b6b); } .vipbg-v2.level-2 { background: linear-gradient(90deg, #9b59b6, #3f51b5); } .vip-expdate-tag { font-size: 12px; }