| .login-page { |
| min-height: 100vh; |
| width: 100vw; |
| background: linear-gradient(120deg, #232946 0%, #3a3a6a 100%); |
| position: relative; |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .background-canvas { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| z-index: 0; |
| pointer-events: none; |
| } |
|
|
| .floating-particles { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100vw; |
| height: 100vh; |
| z-index: 1; |
| pointer-events: none; |
| } |
|
|
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| opacity: 0.7; |
| filter: blur(1px); |
| } |
|
|
| .login-container { |
| position: relative; |
| z-index: 2; |
| width: 100%; |
| max-width: 420px; |
| margin: 0 auto; |
| padding: 40px 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .login-card { |
| background: rgba(255,255,255,0.22); |
| border-radius: 32px; |
| box-shadow: 0 16px 64px 0 rgba(102,126,234,0.22), 0 2px 12px rgba(0,0,0,0.10); |
| padding: 56px 40px 40px 40px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| backdrop-filter: blur(24px); |
| margin-top: 32px; |
| border: 1.5px solid rgba(255,255,255,0.22); |
| position: relative; |
| transition: box-shadow 0.3s; |
| } |
| .login-card::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| border-radius: 32px; |
| background: linear-gradient(120deg, rgba(246,211,101,0.12) 0%, rgba(102,126,234,0.10) 100%); |
| z-index: 0; |
| pointer-events: none; |
| } |
| .brand-logo { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 18px; |
| } |
| .logo-glow { |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background: radial-gradient(circle, #764ba2 0%, transparent 80%); |
| position: absolute; |
| z-index: -1; |
| left: 0; |
| top: 0; |
| opacity: 0.2; |
| } |
| .brand-title { |
| font-size: 2rem; |
| font-weight: 800; |
| color: #fff; |
| margin-bottom: 8px; |
| text-align: center; |
| } |
| .brand-highlight { |
| color: #f6d365; |
| margin-left: 8px; |
| } |
| .brand-subtitle { |
| color: #e0e0e0; |
| font-size: 1.1rem; |
| margin-bottom: 24px; |
| text-align: center; |
| } |
| .brand-features { |
| display: flex; |
| gap: 12px; |
| margin-bottom: 18px; |
| justify-content: center; |
| } |
| .feature-item { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(102,126,234,0.10); |
| color: #fff; |
| border-radius: 14px; |
| padding: 4px 10px; |
| font-size: 0.95rem; |
| } |
| .brand-stats { |
| display: flex; |
| gap: 18px; |
| justify-content: center; |
| margin-bottom: 18px; |
| } |
| .stat-item { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| .stat-value { |
| font-size: 1.1rem; |
| font-weight: 700; |
| color: #4ecdc4; |
| } |
| .stat-label { |
| color: #e0e0e0; |
| font-size: 0.95rem; |
| } |
|
|
| .form-header { |
| text-align: center; |
| margin-bottom: 32px; |
| position: relative; |
| } |
| .form-header h2 { |
| font-size: 2rem; |
| font-weight: 900; |
| color: #fff; |
| margin-bottom: 8px; |
| letter-spacing: 0.01em; |
| text-shadow: 0 2px 16px rgba(102,126,234,0.18); |
| position: relative; |
| z-index: 1; |
| } |
| .form-header h2::after { |
| content: ""; |
| display: block; |
| margin: 12px auto 0 auto; |
| width: 60px; |
| height: 4px; |
| border-radius: 2px; |
| background: linear-gradient(90deg, #f6d365, #4ecdc4); |
| opacity: 0.7; |
| } |
| .form-header p { |
| color: #bdbdbd; |
| font-size: 1.08rem; |
| margin-bottom: 0; |
| z-index: 1; |
| position: relative; |
| } |
|
|
| .social-login, .social-btn, .social-row, .divider { display: none !important; } |
|
|
| .auth-form { |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| width: 100%; |
| max-width: 350px; |
| margin: 0 auto; |
| } |
| .form-group { |
| margin-bottom: 16px; |
| } |
|
|
| .input-wrapper { |
| position: relative; |
| display: flex; |
| align-items: center; |
| background: transparent; |
| border-radius: 24px !important; |
| min-height: 52px; |
| box-shadow: 0 2px 16px rgba(102,126,234,0.10), 0 4px 24px 0 rgba(76,205,196,0.08); |
| padding: 0 16px; |
| transition: box-shadow 0.2s, border 0.2s, background 0.2s; |
| border: 2px solid rgba(102,126,234,0.18); |
| overflow: hidden; |
| outline: 2px solid #764ba2; |
| } |
| .input-wrapper.focused { |
| box-shadow: 0 0 16px 2px #4ecdc4, 0 2px 16px rgba(102,126,234,0.13); |
| background: transparent; |
| border: 1.5px solid rgba(76,205,196,0.18); |
| } |
| .input-wrapper.error { |
| box-shadow: 0 0 8px 2px #fc5c7d, 0 2px 16px rgba(102,126,234,0.13); |
| border: 1.5px solid rgba(252,92,125,0.18); |
| background: transparent; |
| } |
| .input-icon { |
| color: #764ba2; |
| margin-right: 8px; |
| font-size: 1.1rem; |
| display: flex; |
| align-items: center; |
| height: 28px; |
| z-index: 8; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
| .form-input { |
| flex: 1; |
| border: none !important; |
| background: transparent !important; |
| color: #e0e0e0; |
| font-size: 1.08rem; |
| padding: 16px 0 16px 0; |
| outline: none; |
| font-weight: 500; |
| z-index: 5; |
| border-radius: 24px; |
| min-height: 50px; |
| height: 50px; |
| line-height: 1.2; |
| box-sizing: border-box; |
| box-shadow: none !important; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
| .form-input:focus { |
| background: transparent; |
| } |
| .floating-label { |
| position: absolute; |
| left: 44px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: #bdbdbd; |
| font-size: 1rem; |
| pointer-events: none; |
| transition: 0.2s; |
| z-index: 10; |
| font-weight: 600; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
| } |
| .form-input:focus + .floating-label, |
| .form-input:not(:placeholder-shown) + .floating-label { |
| top: 6px; |
| left: 44px; |
| font-size: 0.88rem; |
| color: #764ba2; |
| } |
| .password-toggle { |
| background: none; |
| border: none; |
| color: #764ba2; |
| cursor: pointer; |
| margin-left: 0; |
| margin-right: 0; |
| display: flex; |
| align-items: center; |
| font-size: 1.2rem; |
| position: absolute; |
| right: 18px; |
| top: 50%; |
| transform: translateY(-50%); |
| z-index: 19; |
| height: 24px; |
| line-height: 1; |
| } |
| .error-message { |
| color: #ff4757; |
| font-size: 0.95rem; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| margin-top: 4px; |
| } |
| .form-options { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 6px; |
| } |
| .checkbox-wrapper { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-size: 0.98rem; |
| color: #232946; |
| } |
| .checkbox-input { |
| display: none; |
| } |
| .checkbox-custom { |
| width: 18px; |
| height: 18px; |
| border-radius: 5px; |
| background: #fff; |
| border: 1.5px solid #bdbdbd; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s, border 0.2s; |
| } |
| .checkbox-input:checked + .checkbox-custom { |
| background: #764ba2; |
| border-color: #764ba2; |
| color: #fff; |
| } |
| .forgot-link { |
| background: none; |
| color: #c4921cda; |
| font-weight: 700; |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
|
|
| .forgot-link:active { |
| color: #c0ac17; |
| text-decoration: none; |
| } |
| .submit-btn { |
| width: 100%; |
| background: linear-gradient(90deg, #764ba2, #4ecdc4 80%); |
| color: #fff; |
| font-size: 1.18rem; |
| font-weight: 800; |
| border: none; |
| border-radius: 18px; |
| padding: 18px 0; |
| margin-top: 16px; |
| cursor: pointer; |
| box-shadow: 0 4px 18px rgba(102,126,234,0.13); |
| position: relative; |
| overflow: hidden; |
| transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s, transform 0.2s; |
| border: 2px solid transparent; |
| z-index: 1; |
| letter-spacing: 0.01em; |
| } |
| @keyframes buttonGlow { |
| 0% { box-shadow: 0 6px 32px rgba(246,211,101,0.18), 0 2px 12px rgba(102,126,234,0.10); } |
| 100% { box-shadow: 0 12px 48px rgba(246,211,101,0.28), 0 4px 18px rgba(102,126,234,0.18); } |
| } |
| .submit-btn:hover:not(:disabled) { |
| background: linear-gradient(90deg, #4ecdc4, #764ba2 80%); |
| color: #fff; |
| box-shadow: 0 8px 32px rgba(102,126,234,0.22); |
| border-image: linear-gradient(90deg, #4ecdc4, #764ba2) 1; |
| border-width: 2px; |
| border-style: solid; |
| transform: translateY(-2px) scale(1.03); |
| } |
| .submit-btn:disabled { |
| opacity: 0.7; |
| cursor: not-allowed; |
| } |
| .btn-content { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| } |
| .btn-glow { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| height: 4px; |
| background: linear-gradient(90deg, #764ba2, #4ecdc4); |
| border-radius: 2px; |
| opacity: 0.12; |
| } |
| .btn-shimmer { |
| position: absolute; |
| top: 0; |
| left: -75%; |
| width: 50%; |
| height: 100%; |
| background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%); |
| transform: skewX(-20deg); |
| animation: shimmer 2.5s infinite; |
| } |
| @keyframes shimmer { |
| 100% { |
| left: 125%; |
| } |
| } |
| .loading-spinner { |
| width: 22px; |
| height: 22px; |
| border: 3px solid #fff; |
| border-top: 3px solid #764ba2; |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| margin-right: 8px; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| .form-footer { |
| text-align: center; |
| margin-top: 14px; |
| color: #fff; |
| position: relative; |
| z-index: 20; |
| pointer-events: auto; |
| } |
| .auth-link { |
| color: #764ba2; |
| text-decoration: underline; |
| font-weight: 600; |
| margin-left: 4px; |
| transition: color 0.2s; |
| z-index: 21; |
| pointer-events: auto; |
| } |
|
|
| .trust-indicators { |
| display: flex; |
| gap: 14px; |
| justify-content: center; |
| margin-top: 18px; |
| } |
| .trust-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| background: rgba(102,126,234,0.10); |
| color: #232946; |
| border-radius: 14px; |
| padding: 4px 10px; |
| font-size: 0.95rem; |
| } |
|
|
| @media (max-width: 600px) { |
| .login-container { |
| padding: 10px 0; |
| } |
| .login-card { |
| padding: 18px 6px 18px 6px; |
| border-radius: 18px; |
| } |
| .auth-form { |
| max-width: 100%; |
| padding: 0 2px; |
| } |
| .form-header h2 { |
| font-size: 1.1rem; |
| } |
| } |
| .submit-btn { |
| width: 100%; |
| background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%); |
| color: #fff; |
| font-size: 1.18rem; |
| font-weight: 800; |
| border: none; |
| border-radius: 32px; |
| padding: 18px 0; |
| margin-top: 16px; |
| cursor: pointer; |
| box-shadow: 0 4px 24px 0 rgba(106,130,251,0.18), 0 2px 12px rgba(252,92,125,0.10); |
| position: relative; |
| overflow: hidden; |
| transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; |
| outline: none; |
| } |
| .submit-btn:focus { |
| outline: none; |
| box-shadow: 0 0 0 0 rgba(106,130,251,0.18), 0 4px 24px 0 rgba(106,130,251,0.18); |
| } |
| .submit-btn:hover:not(:disabled) { |
| background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%); |
| color: #fff; |
| box-shadow: 0 8px 32px rgba(106,130,251,0.22); |
| border: none; |
| transform: translateY(-2px) scale(1.03); |
| } |
| .checkbox-wrapper { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| font-size: 0.98rem; |
| color: #e0e0e0; |
| user-select: none; |
| } |
| .checkbox-input { |
| display: none; |
| } |
| .checkbox-custom { |
| width: 22px; |
| height: 22px; |
| border-radius: 50%; |
| background: rgba(106,130,251,0.10); |
| border: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s, box-shadow 0.2s; |
| box-shadow: 0 2px 8px rgba(106,130,251,0.10); |
| position: relative; |
| } |
| .checkbox-input:checked + .checkbox-custom { |
| background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%); |
| color: #fff; |
| box-shadow: 0 0 0 2px #764ba2, 0 2px 8px #4ecdc433; |
| } |
| .checkbox-custom svg { |
| display: block; |
| margin: 0 auto; |
| font-size: 1.1rem; |
| color: #fff; |
| font-weight: 900; |
| } |
| .auth-link { |
| background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
|
|
| font-weight: 700; |
| margin-left: 4px; |
| text-decoration: none; |
| transition: none; |
| } |
| .auth-link:hover { |
| text-shadow: none; |
| color: inherit; |
| } |
| .gradient-next-btn { |
| background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%); |
| color: #fff !important; |
| border: none; |
| font-weight: 800; |
| font-size: 1.18rem; |
| border-radius: 32px; |
| box-shadow: 0 4px 24px 0 rgba(106,130,251,0.18), 0 2px 12px rgba(252,92,125,0.10); |
| transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; |
| } |
| .gradient-next-btn:disabled { |
| opacity: 0.7; |
| cursor: not-allowed; |
| } |
| .submit-btn:active, |
| .gradient-next-btn:active { |
| transform: scale(0.97); |
| box-shadow: 0 0 16px 2px #6a82fb, 0 2px 16px #fc5c7d; |
| filter: brightness(0.98); |
| transition: transform 0.1s, box-shadow 0.1s, filter 0.1s; |
| } |
| .auth-link:active { |
| filter: brightness(1.2) drop-shadow(0 2px 8px #fc5c7d); |
| text-decoration: underline; |
| transition: filter 0.1s, text-decoration 0.1s; |
| } |
| .form-wrapper { |
| background: rgba(44, 62, 80, 0.65); |
| border-radius: 24px; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); |
| backdrop-filter: blur(18px) saturate(180%); |
| -webkit-backdrop-filter: blur(18px) saturate(180%); |
| border: 1.5px solid rgba(255, 255, 255, 0.18); |
| padding: 32px 24px; |
| max-width: 420px; |
| margin: 0 auto; |
| width: 100%; |
| } |
| .auth-branding { |
| background: rgba(44, 62, 80, 0.55); |
| border-radius: 24px; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); |
| backdrop-filter: blur(14px) saturate(160%); |
| -webkit-backdrop-filter: blur(14px) saturate(160%); |
| border: 1.5px solid rgba(255, 255, 255, 0.13); |
| padding: 40px 32px; |
| color: #fff; |
| max-width: 480px; |
| margin: 0 auto; |
| width: 100%; |
| } |
|
|
| .auth-branding .brand-title, |
| .auth-branding .brand-subtitle, |
| .auth-branding .brand-benefits, |
| .auth-branding .benefit-item, |
| .auth-branding .benefit-content, |
| .auth-branding .benefit-icon { |
| color: #fff; |
| text-shadow: 0 2px 8px rgba(44,62,80,0.18); |
| } |
|
|
| .auth-branding .brand-title { |
| font-size: 2.2rem; |
| font-weight: 900; |
| margin-bottom: 12px; |
| } |
|
|
| .auth-branding .brand-subtitle { |
| font-size: 1.15rem; |
| margin-bottom: 24px; |
| } |
|
|
| .auth-branding .brand-benefits { |
| margin-top: 24px; |
| } |
|
|
| .auth-branding .benefit-item { |
| display: flex; |
| align-items: flex-start; |
| gap: 16px; |
| margin-bottom: 18px; |
| } |
|
|
| .auth-branding .benefit-icon { |
| font-size: 1.5rem; |
| color: #ffe082; |
| } |
|
|
| .auth-branding .benefit-content h4 { |
| font-size: 1.1rem; |
| font-weight: 700; |
| margin-bottom: 4px; |
| color: #ffe082; |
| } |
|
|
| .auth-branding .benefit-content p { |
| font-size: 1rem; |
| color: #e0e0e0; |
| margin: 0; |
| } |
| .login-branding { |
| background: rgba(44, 62, 80, 0.55); |
| border-radius: 24px; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); |
| backdrop-filter: blur(14px) saturate(160%); |
| -webkit-backdrop-filter: blur(14px) saturate(160%); |
| border: 1.5px solid rgba(255, 255, 255, 0.13); |
| padding: 40px 32px; |
| color: #fff; |
| max-width: 480px; |
| margin: 0 auto; |
| width: 100%; |
| } |
|
|
| .login-branding .brand-title, |
| .branding-content .brand-title { |
| font-size: 2.2rem; |
| font-weight: 900; |
| margin-bottom: 12px; |
| } |
|
|
| .login-branding .brand-subtitle, |
| .branding-content .brand-subtitle { |
| font-size: 1.15rem; |
| margin-bottom: 24px; |
| } |
|
|
| .login-branding .brand-features, |
| .branding-content .brand-benefits { |
| margin-top: 24px; |
| } |
|
|
| .login-branding .feature-item, |
| .branding-content .benefit-item { |
| display: flex; |
| align-items: flex-start; |
| gap: 16px; |
| margin-bottom: 18px; |
| } |
|
|
| .login-branding .feature-icon, |
| .branding-content .benefit-icon { |
| font-size: 1.5rem; |
| color: #ffe082; |
| } |
|
|
| .login-branding .stat-value, |
| .branding-content .benefit-content h4 { |
| font-size: 1.1rem; |
| font-weight: 700; |
| margin-bottom: 4px; |
| color: #ffe082; |
| } |
|
|
| .login-branding .stat-label, |
| .branding-content .benefit-content p { |
| font-size: 1rem; |
| color: #e0e0e0; |
| margin: 0; |
| } |
| .auth-grid, .login-grid, .register-grid { |
| display: flex; |
| flex-direction: row; |
| align-items: stretch; |
| justify-content: center; |
| gap: 40px; |
| width: 100%; |
| max-width: 1000px; |
| margin: 0 auto; |
| } |
|
|
| @media (max-width: 900px) { |
| .auth-grid, .login-grid, .register-grid { |
| flex-direction: column; |
| gap: 24px; |
| max-width: 98vw; |
| } |
| } |
|
|
| input:-webkit-autofill, |
| input:-webkit-autofill:focus, |
| input:-webkit-autofill:hover, |
| input:-webkit-autofill:active { |
| -webkit-box-shadow: 0 0 0 1000px rgba(40, 40, 60, 0.22) inset !important; |
| box-shadow: 0 0 0 1000px rgba(40, 40, 60, 0.22) inset !important; |
| -webkit-text-fill-color: #e0e0e0 !important; |
| transition: background-color 5000s ease-in-out 0s; |
| caret-color: #e0e0e0 !important; |
| } |
| .select-wrapper { |
| position: relative; |
| display: flex; |
| align-items: center; |
| background: transparent; |
| border-radius: 28px; |
| min-height: 60px; |
| box-shadow: none; |
| padding: 0 18px; |
| transition: box-shadow 0.2s, border 0.2s, background 0.2s; |
| border: 2.5px solid rgba(102,126,234,0.18); |
| overflow: hidden; |
| margin-bottom: 12px; |
| } |
| .form-select { |
| flex: 1; |
| border: none !important; |
| background: transparent !important; |
| color: #e0e0e0; |
| font-size: 1.13rem; |
| padding: 20px 0 20px 0; |
| outline: none; |
| font-weight: 500; |
| z-index: 2; |
| border-radius: 0 !important; |
| min-height: 58px; |
| height: 58px; |
| line-height: 1.2; |
| box-sizing: border-box; |
| box-shadow: none !important; |
| appearance: none; |
| } |
| .form-select:focus { |
| background: transparent !important; |
| outline: none !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| .form-select option { |
| background: rgba(255,255,255,0.75) !important; |
| color: #232946 !important; |
| border-radius: 22px; |
| padding: 14px 18px; |
| font-size: 1.08rem; |
| font-weight: 600; |
| border: 1.5px solid rgba(102,126,234,0.13); |
| margin: 4px 0; |
| box-shadow: 0 2px 12px rgba(44,62,80,0.08) inset, 0 1px 8px #4ecdc422; |
| backdrop-filter: blur(8px) saturate(160%); |
| -webkit-backdrop-filter: blur(8px) saturate(160%); |
| transition: box-shadow 0.2s, background 0.2s; |
| } |
| .form-select option:checked { |
| background: linear-gradient(90deg, #e0eafc 0%, #cfdef3 100%) !important; |
| color: #232946 !important; |
| font-weight: 700; |
| position: relative; |
| box-shadow: 0 0 0 2px #764ba2, 0 2px 12px #4ecdc433; |
| } |
| .form-select option:hover, .form-select option:focus { |
| background: rgba(255,255,255,0.92) !important; |
| box-shadow: 0 0 12px 2px #4ecdc4, 0 2px 12px #764ba233; |
| } |
| .form-select option:checked::after { |
| content: '✔'; |
| color: #43e97b; |
| font-size: 1.1rem; |
| font-weight: 900; |
| position: absolute; |
| right: 18px; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
|
|
| input[type="date"].form-input { |
| background: transparent; |
| border-radius: 28px; |
| min-height: 58px; |
| height: 58px; |
| color: #e0e0e0; |
| font-size: 1.13rem; |
| box-shadow: none; |
| border: none; |
| padding: 20px 0 20px 0; |
| } |
| input[type="date"].form-input::-webkit-calendar-picker-indicator { |
| filter: invert(0.7) sepia(1) saturate(5) hue-rotate(180deg); |
| cursor: pointer; |
| opacity: 0.8; |
| } |
| input[type="date"].form-input:focus { |
| outline: none; |
| background: transparent; |
| } |
| .select-wrapper .input-icon { |
| color: #764ba2; |
| margin-right: 10px; |
| font-size: 1.2rem; |
| display: flex; |
| align-items: center; |
| height: 32px; |
| } |
|
|
| .select-wrapper.focused { |
| box-shadow: 0 0 16px 2px #4ecdc4, 0 2px 16px rgba(102,126,234,0.13); |
| background: rgba(76,205,196,0.08); |
| border: 1.5px solid rgba(76,205,196,0.18); |
| } |
|
|
| .select-wrapper.error { |
| box-shadow: 0 0 8px 2px #fc5c7d, 0 2px 16px rgba(102,126,234,0.13); |
| border: 1.5px solid rgba(252,92,125,0.18); |
| background: rgba(252,92,125,0.08); |
| } |
|
|
| .field-label { |
| display: block; |
| font-size: 1rem; |
| font-weight: 600; |
| color: #6f18b6; |
| margin-bottom: 12px; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .radio-group { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| margin-bottom: 8px; |
| } |
|
|
| .radio-group-horizontal { |
| display: flex; |
| flex-direction: row; |
| gap: 24px; |
| margin-bottom: 8px; |
| justify-content: flex-start; |
| align-items: center; |
| } |
|
|
| .radio-group.error, |
| .radio-group-horizontal.error { |
| border: 1px solid rgba(252,92,125,0.3); |
| border-radius: 12px; |
| padding: 8px; |
| background: rgba(252,92,125,0.05); |
| } |
|
|
| .radio-option { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| padding: 8px 12px; |
| border-radius: 8px; |
| transition: background 0.2s; |
| } |
|
|
| .radio-option:hover { |
| background: rgba(102,126,234,0.1); |
| } |
|
|
| .radio-option input[type="radio"] { |
| display: none; |
| } |
|
|
| .radio-custom { |
| width: 20px; |
| height: 20px; |
| border: 2px solid rgba(102,126,234,0.5); |
| border-radius: 50%; |
| position: relative; |
| transition: all 0.2s; |
| background: transparent; |
| } |
|
|
| .radio-option input[type="radio"]:checked + .radio-custom { |
| border-color: #4ecdc4; |
| background: #4ecdc4; |
| } |
|
|
| .radio-option input[type="radio"]:checked + .radio-custom::after { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| width: 8px; |
| height: 8px; |
| background: white; |
| border-radius: 50%; |
| } |
|
|
| .radio-label { |
| font-size: 1rem; |
| color: #e0e0e0; |
| font-weight: 500; |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .nav-btn.prev-btn { |
| background: rgba(40, 40, 60, 0.22); |
| border-radius: 22px; |
| border: 2px solid rgba(102,126,234,0.18); |
| color: #fff; |
| font-weight: 700; |
| font-size: 1.08rem; |
| padding: 12px 28px; |
| box-shadow: 0 2px 16px rgba(102,126,234,0.10); |
| transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s; |
| outline: none; |
| margin-right: 12px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| .nav-btn.prev-btn:hover, .nav-btn.prev-btn:focus { |
| background: rgba(76,205,196,0.18); |
| color: #232946; |
| border: 2px solid #4ecdc4; |
| box-shadow: 0 4px 18px #4ecdc433; |
| } |
