/** * Payment Modal Styles * Модуль стилей модального окна оплаты * * Использование: * * * Для темной темы добавьте класс .dark-theme к или установите: * body { --pm-theme: dark; } */ /* CSS Variables - Light Theme (default) */ :root { --pm-overlay-bg: rgba(0, 0, 0, 0.8); --pm-content-bg: #ffffff; --pm-title-color: #333333; --pm-subtitle-color: #666666; --pm-input-bg: #ffffff; --pm-input-border: #e0e0e0; --pm-input-color: #333333; --pm-input-placeholder: #999999; --pm-btn-bg: linear-gradient(135deg, #eeff64 0%, #d4e652 100%); --pm-btn-color: #000000; --pm-btn-shadow: rgba(238, 255, 100, 0.3); --pm-error-color: #ff4444; --pm-note-color: #666666; --pm-close-color: #666666; --pm-close-hover: #333333; --pm-step-dot-inactive: rgba(238, 255, 100, 0.3); --pm-step-dot-active: #eeff64; --pm-focus-border: #eeff64; --pm-focus-shadow: rgba(238, 255, 100, 0.2); } /* Dark Theme */ body.dark-theme, [data-pm-theme="dark"] { --pm-overlay-bg: rgba(0, 0, 0, 0.9); --pm-content-bg: #1a1a2e; --pm-title-color: #ffffff; --pm-subtitle-color: #aaaaaa; --pm-input-bg: #16213e; --pm-input-border: #333355; --pm-input-color: #ffffff; --pm-input-placeholder: #666688; --pm-btn-bg: linear-gradient(135deg, #eeff64 0%, #d4e652 100%); --pm-btn-color: #000000; --pm-btn-shadow: rgba(238, 255, 100, 0.4); --pm-error-color: #ff6b6b; --pm-note-color: #aaaaaa; --pm-close-color: #888888; --pm-close-hover: #ffffff; --pm-step-dot-inactive: rgba(238, 255, 100, 0.2); --pm-step-dot-active: #eeff64; --pm-focus-border: #eeff64; --pm-focus-shadow: rgba(238, 255, 100, 0.3); } /* Modal Overlay */ .email-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--pm-overlay-bg); backdrop-filter: blur(5px); } .email-modal.active { display: flex; align-items: center; justify-content: center; } /* Modal Content */ .email-modal-content { background: var(--pm-content-bg); padding: 40px; border-radius: 16px; max-width: 500px; width: 90%; position: relative; animation: modalSlideIn 0.3s ease; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } /* Close Button */ .email-modal-close { position: absolute; right: 20px; top: 20px; font-size: 32px; font-weight: bold; color: var(--pm-close-color); background: none; border: none; cursor: pointer; line-height: 1; padding: 0; width: 32px; height: 32px; } .email-modal-close:hover { color: var(--pm-close-hover); } /* Title & Subtitle */ .email-modal-title { color: var(--pm-title-color); font-size: 28px; margin-bottom: 10px; font-weight: 600; } .email-modal-subtitle { color: var(--pm-subtitle-color); font-size: 16px; margin-bottom: 30px; } /* Form */ .email-form { display: flex; flex-direction: column; gap: 15px; } /* Email Input */ .email-input { padding: 16px 20px; font-size: 16px; border: 2px solid var(--pm-input-border); border-radius: 12px; background: var(--pm-input-bg); color: var(--pm-input-color); transition: all 0.3s ease; font-family: 'Montserrat', Arial, sans-serif; } .email-input:focus { outline: none; border-color: var(--pm-focus-border); box-shadow: 0 0 20px var(--pm-focus-shadow); } .email-input::placeholder { color: var(--pm-input-placeholder); } /* Submit Button */ .email-submit-btn { padding: 18px 32px; font-size: 18px; font-weight: 600; background: var(--pm-btn-bg); color: var(--pm-btn-color); border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; font-family: 'Montserrat', Arial, sans-serif; } .email-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--pm-btn-shadow); } .email-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Error Message */ .email-error { display: none; color: var(--pm-error-color); font-size: 14px; margin-top: -10px; } .email-error.active { display: block !important; } /* Phone Input Wrapper */ .phone-input-wrapper { display: flex; gap: 10px; align-items: stretch; } /* Country Code Select */ .country-code-select { width: 120px; padding: 16px 10px; font-size: 16px; border: 2px solid var(--pm-input-border); border-radius: 12px; background: var(--pm-input-bg); color: var(--pm-input-color); transition: all 0.3s ease; font-family: 'Montserrat', Arial, sans-serif; cursor: pointer; } .country-code-select:focus { outline: none; border-color: var(--pm-focus-border); box-shadow: 0 0 20px var(--pm-focus-shadow); } .country-code-select option { background: var(--pm-input-bg); color: var(--pm-input-color); } /* Phone Input */ .phone-input { flex: 1; padding: 16px 20px; font-size: 16px; border: 2px solid var(--pm-input-border); border-radius: 12px; background: var(--pm-input-bg); color: var(--pm-input-color); transition: all 0.3s ease; font-family: 'Montserrat', Arial, sans-serif; } .phone-input:focus { outline: none; border-color: var(--pm-focus-border); box-shadow: 0 0 20px var(--pm-focus-shadow); } .phone-input::placeholder { color: var(--pm-input-placeholder); } /* Phone Note */ .phone-note { color: var(--pm-note-color); font-size: 13px; text-align: center; margin-top: -10px; line-height: 1.4; } /* Two-step Modal */ .modal-step { display: none; } .modal-step.active { display: block; } /* Step Indicator */ .step-indicator { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pm-step-dot-inactive); transition: all 0.3s ease; } .step-dot.active { background: var(--pm-step-dot-active); width: 30px; border-radius: 5px; } /* Mobile Responsive */ @media (max-width: 768px) { .email-modal-content { padding: 30px 20px; } .email-modal-title { font-size: 24px; } .email-modal-subtitle { font-size: 14px; } .email-input { padding: 14px 16px; font-size: 14px; } .email-submit-btn { padding: 16px 24px; font-size: 16px; } .country-code-select { width: 100px; padding: 14px 8px; font-size: 14px; } .phone-input { padding: 14px 16px; font-size: 14px; } .phone-note { font-size: 12px; } }