.soon-subscribe-modal { text-align: left; background: var(--soon-bg-panel); color: var(--soon-text); } .soon-subscribe-modal__head { padding: 20px 48px 16px 22px; border-bottom: 1px solid var(--soon-border-subtle); background: linear-gradient(160deg, rgba(0, 150, 136, 0.1) 0%, transparent 100%); } .soon-subscribe-modal__eyebrow { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--soon-accent); } .soon-subscribe-modal__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--soon-text-strong); line-height: 1.35; } .soon-subscribe-modal__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--soon-text-muted); } .soon-subscribe-modal__features { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; } .soon-subscribe-modal__features li { font-size: 12px; color: var(--soon-text); padding-left: 11px; position: relative; } .soon-subscribe-modal__features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--soon-accent); } .soon-subscribe-modal__body { padding: 16px 22px 18px; } .soon-subscribe-plans__loading, .soon-subscribe-plans__empty { margin: 0; padding: 24px 0; text-align: center; font-size: 14px; color: var(--soon-text-muted); grid-column: 1 / -1; } .soon-subscribe-modal__section-head { margin: 0 0 12px; } .soon-subscribe-modal__section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--soon-text-strong); } .soon-subscribe-modal__section-mark { display: inline-block; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--soon-accent), #26a69a); } .soon-subscribe-modal__section-sub { margin: 0; padding-left: 12px; font-size: 12px; line-height: 1.5; color: var(--soon-text-muted); } .soon-subscribe-plans-grid { gap: 14px; align-items: stretch; } @media (max-width: 860px) { .soon-subscribe-plans-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } } .soon-subscribe-modal .soon-plan-card--picker { width: 100%; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.07); font: inherit; color: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; animation: none; } .soon-subscribe-modal .soon-plan-card--gate { overflow: hidden; } .soon-subscribe-modal .soon-plan-card--gate .soon-plan-card__head { padding: 20px 16px 16px; } .soon-subscribe-modal .soon-plan-card--badged.soon-plan-card--gate .soon-plan-card__head { padding-top: 36px; } .soon-subscribe-modal .soon-plan-card--save.soon-plan-card--gate .soon-plan-card__head { padding-top: 40px; } .soon-subscribe-modal .soon-plan-card--gate .soon-plan-card__name { font-size: 16px; margin-bottom: 4px; } .soon-subscribe-modal .soon-plan-card--gate .soon-plan-card__desc { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .soon-subscribe-modal .soon-plan-card--gate .soon-plan-card__price-row { margin-top: 10px; padding-top: 10px; } .soon-subscribe-modal .soon-plan-card--gate .soon-plan-card__price { font-size: 26px; } .soon-subscribe-modal .soon-plan-card--picker:hover { transform: none; border-color: rgba(0, 150, 136, 0.35); } .soon-subscribe-modal .soon-plan-card--picker.soon-plan-card--selected { border-color: var(--soon-accent); box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.35); background: linear-gradient(165deg, rgba(0, 150, 136, 0.1) 0%, rgba(54, 61, 69, 0.85) 45%); } .soon-subscribe-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--soon-border-subtle); background: rgba(0, 0, 0, 0.12); } .soon-subscribe-modal__stay { flex-shrink: 0; padding: 8px 16px; border: 1px solid var(--soon-border-subtle); border-radius: 8px; background: transparent; color: var(--soon-text-muted); font-size: 13px; line-height: 1.4; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .soon-subscribe-modal__stay:hover { color: var(--soon-text); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); } .soon-subscribe-modal__pay { min-width: 160px; padding: 10px 22px; font-size: 14px; font-weight: 600; } .soon-subscribe-modal__pay:disabled { opacity: 0.45; cursor: not-allowed; }