@proveanything/smartlinks-auth-ui
Version:
Lightweight React authentication UI components with bearer token support and Smartlinks SDK integration
1 lines • 35.8 kB
Source Map (JSON)
{"version":3,"sources":["AuthContainer.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"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","file":"index.esm.css","sourcesContent":[".auth-container {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1rem;\r\n background: linear-gradient(135deg, var(--auth-bg-color, #e0f2fe) 0%, #f0f9ff 100%);\r\n font-family: var(--auth-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);\r\n}\r\n\r\n.auth-theme-dark.auth-container {\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n}\r\n\r\n/* Minimal mode - transparent, no framing, inherits from parent, but centered */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n background: transparent;\r\n font-family: inherit;\r\n}\r\n\r\n.auth-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);\r\n padding: 1.75rem;\r\n animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.auth-theme-dark .auth-card {\r\n background: #1e293b;\r\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n/* Minimal card - no background, border, shadow, or animation */\r\n.auth-minimal-card {\r\n width: 100%;\r\n max-width: 440px;\r\n background: transparent;\r\n border-radius: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n animation: none;\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.auth-header {\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n}\r\n\r\n.auth-logo {\r\n display: inline-flex;\r\n margin-bottom: 0.75rem;\r\n animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes float {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n 50% {\r\n transform: translateY(-8px);\r\n }\r\n}\r\n\r\n.auth-title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0;\r\n}\r\n\r\n.auth-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0.25rem 0 0 0;\r\n}\r\n\r\n.auth-theme-dark .auth-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-content {\r\n /* Content styles handled by child components */\r\n}\r\n\r\n.auth-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n padding-top: 1rem;\r\n margin-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .auth-footer {\r\n border-top-color: #334155;\r\n}\r\n\r\n.auth-footer a {\r\n color: var(--auth-primary-color, #3B82F6);\r\n text-decoration: none;\r\n}\r\n\r\n.auth-footer a:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-footer span {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-footer span {\r\n color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid #e2e8f0;\r\n border-top-color: var(--auth-primary-color, #3B82F6);\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n margin: 0 auto;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Mobile optimizations - reduced white space and condensed layout */\r\n@media (max-width: 640px) {\r\n .auth-container {\r\n padding: 0.5rem;\r\n min-height: 100vh;\r\n min-height: 100dvh; /* Dynamic viewport height for mobile browsers */\r\n }\r\n\r\n .auth-card {\r\n padding: 1.5rem 1.25rem;\r\n border-radius: 12px;\r\n max-width: 100%;\r\n }\r\n \r\n .auth-header {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n .auth-logo {\r\n margin-bottom: 0.75rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.375rem;\r\n line-height: 1.3;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.8125rem;\r\n margin-top: 0.125rem;\r\n }\r\n \r\n .auth-footer {\r\n padding-top: 0.75rem;\r\n margin-top: 0.75rem;\r\n font-size: 0.8125rem;\r\n gap: 0.5rem;\r\n }\r\n}\r\n\r\n/* Extra small devices (< 375px) */\r\n@media (max-width: 374px) {\r\n .auth-card {\r\n padding: 1.25rem 1rem;\r\n }\r\n \r\n .auth-title {\r\n font-size: 1.25rem;\r\n }\r\n \r\n .auth-subtitle {\r\n font-size: 0.75rem;\r\n }\r\n}\r\n\r\n/* ============= Account Management Styles ============= */\r\n\r\n.account-section {\r\n padding: 1.5rem 0;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n border-bottom-color: #334155;\r\n}\r\n\r\n.account-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.section-title {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: #1e293b;\r\n margin: 0 0 1rem 0;\r\n}\r\n\r\n.auth-theme-dark .section-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.current-info {\r\n background: #f8fafc;\r\n padding: 1rem;\r\n border-radius: 8px;\r\n margin-bottom: 1rem;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-theme-dark .current-info {\r\n background: #0f172a;\r\n}\r\n\r\n.current-info p {\r\n margin: 0.25rem 0;\r\n color: #475569;\r\n}\r\n\r\n.auth-theme-dark .current-info p {\r\n color: #94a3b8;\r\n}\r\n\r\n.current-info strong {\r\n color: #1e293b;\r\n}\r\n\r\n.auth-theme-dark .current-info strong {\r\n color: #f1f5f9;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.375rem;\r\n}\r\n\r\n.auth-theme-dark .form-group label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.button-group {\r\n display: flex;\r\n gap: 0.75rem;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.danger-zone {\r\n background: #fef2f2;\r\n padding: 1.5rem;\r\n border-radius: 8px;\r\n border: 1px solid #fecaca;\r\n}\r\n\r\n.auth-theme-dark .danger-zone {\r\n background: #450a0a;\r\n border-color: #991b1b;\r\n}\r\n\r\n.text-danger {\r\n color: #dc2626 !important;\r\n}\r\n\r\n.text-success {\r\n color: #16a34a;\r\n}\r\n\r\n.text-warning {\r\n color: #ea580c;\r\n}\r\n\r\n.auth-theme-dark .text-success {\r\n color: #22c55e;\r\n}\r\n\r\n.auth-theme-dark .text-warning {\r\n color: #fb923c;\r\n}\r\n\r\n.delete-confirm {\r\n margin-top: 1rem;\r\n}\r\n\r\n.warning-text {\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin: 0 0 1rem 0;\r\n padding: 0.75rem;\r\n background: #fee2e2;\r\n border-radius: 6px;\r\n line-height: 1.5;\r\n}\r\n\r\n.auth-theme-dark .warning-text {\r\n background: #7f1d1d;\r\n color: #fca5a5;\r\n}\r\n\r\n.button-danger {\r\n background: #dc2626 !important;\r\n color: white !important;\r\n}\r\n\r\n.button-danger:hover:not(:disabled) {\r\n background: #b91c1c !important;\r\n}\r\n\r\n.button-secondary {\r\n background: #e2e8f0 !important;\r\n color: #1e293b !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary {\r\n background: #334155 !important;\r\n color: #f1f5f9 !important;\r\n}\r\n\r\n.button-secondary:hover:not(:disabled) {\r\n background: #cbd5e1 !important;\r\n}\r\n\r\n.auth-theme-dark .button-secondary:hover:not(:disabled) {\r\n background: #475569 !important;\r\n}\r\n\r\n.photo-preview {\r\n display: block;\r\n object-fit: cover;\r\n}\r\n\r\n/* Mobile optimizations for account management */\r\n@media (max-width: 640px) {\r\n .account-section {\r\n padding: 1rem 0;\r\n }\r\n \r\n .section-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .current-info {\r\n padding: 0.75rem;\r\n }\r\n \r\n .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Account Management Layout */\r\n.account-management {\r\n width: 100%;\r\n max-width: 600px;\r\n}\r\n\r\n.account-section {\r\n background: white;\r\n border-radius: 8px;\r\n padding: 1.25rem;\r\n margin-bottom: 1rem;\r\n border: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .account-section {\r\n background: #1e293b;\r\n border-color: #334155;\r\n}\r\n\r\n.account-field {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n gap: 1rem;\r\n align-items: start;\r\n}\r\n\r\n.field-info {\r\n min-width: 0;\r\n}\r\n\r\n.field-label {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #64748b;\r\n text-transform: uppercase;\r\n letter-spacing: 0.025em;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .field-label {\r\n color: #94a3b8;\r\n}\r\n\r\n.field-value {\r\n font-size: 0.9375rem;\r\n color: #1e293b;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n word-break: break-word;\r\n}\r\n\r\n.auth-theme-dark .field-value {\r\n color: #f1f5f9;\r\n}\r\n\r\n.verification-badge {\r\n display: inline-block;\r\n font-size: 0.6875rem;\r\n padding: 0.125rem 0.5rem;\r\n border-radius: 9999px;\r\n font-weight: 500;\r\n white-space: nowrap;\r\n}\r\n\r\n.verification-badge.verified {\r\n background: #dcfce7;\r\n color: #16a34a;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.verified {\r\n background: #14532d;\r\n color: #86efac;\r\n}\r\n\r\n.verification-badge.unverified {\r\n background: #fef3c7;\r\n color: #d97706;\r\n}\r\n\r\n.auth-theme-dark .verification-badge.unverified {\r\n background: #78350f;\r\n color: #fcd34d;\r\n}\r\n\r\n.account-field .auth-button {\r\n white-space: nowrap;\r\n padding: 0.5rem 1rem;\r\n font-size: 0.875rem;\r\n height: auto;\r\n align-self: start;\r\n}\r\n\r\n.edit-form {\r\n width: 100%;\r\n margin-top: 1rem;\r\n padding-top: 1rem;\r\n border-top: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-theme-dark .edit-form {\r\n border-top-color: #334155;\r\n}\r\n\r\n.edit-form .form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.edit-form .button-group {\r\n margin-top: 1rem;\r\n display: flex;\r\n gap: 0.5rem;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .account-field {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .account-field .auth-button {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .edit-form .button-group {\r\n flex-direction: column;\r\n }\r\n \r\n .edit-form .button-group .auth-button {\r\n width: 100%;\r\n }\r\n}\r\n\r\n",".auth-form {\r\n width: 100%;\r\n}\r\n\r\n.auth-form-header {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-form-title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin: 0 0 0.5rem 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-title {\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-form-subtitle {\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n margin: 0;\r\n}\r\n\r\n.auth-theme-dark .auth-form-subtitle {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-error {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.75rem 1rem;\r\n background: #fef2f2;\r\n border: 1px solid #fecaca;\r\n border-radius: 0.5rem;\r\n color: #dc2626;\r\n font-size: 0.875rem;\r\n margin-bottom: 1rem;\r\n animation: shake 0.4s ease;\r\n}\r\n\r\n.auth-theme-dark .auth-error {\r\n background: #7f1d1d;\r\n border-color: #991b1b;\r\n color: #fca5a5;\r\n}\r\n\r\n@keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n}\r\n\r\n.auth-form-group {\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.auth-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: #334155;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.auth-theme-dark .auth-label {\r\n color: #cbd5e1;\r\n}\r\n\r\n.auth-input {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n font-size: 1rem;\r\n color: #1e293b;\r\n background: #f8fafc;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n transition: all 0.2s ease;\r\n box-sizing: border-box;\r\n}\r\n\r\n.auth-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n background: white;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.auth-input:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-input {\r\n background: #0f172a;\r\n border-color: #334155;\r\n color: #f1f5f9;\r\n}\r\n\r\n.auth-theme-dark .auth-input:focus {\r\n background: #1e293b;\r\n border-color: #3b82f6;\r\n}\r\n\r\n.auth-form-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.auth-link {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font-size: 0.875rem;\r\n color: #3b82f6;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n}\r\n\r\n.auth-link:hover:not(:disabled) {\r\n color: #1d4ed8;\r\n text-decoration: underline;\r\n}\r\n\r\n.auth-link:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-link-bold {\r\n font-weight: 600;\r\n}\r\n\r\n.auth-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.auth-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-button-primary {\r\n background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n color: white;\r\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.auth-button-primary:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);\r\n}\r\n\r\n.auth-button-primary:active:not(:disabled) {\r\n transform: translateY(0);\r\n}\r\n\r\n.auth-button-secondary {\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.auth-button-secondary:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-button-secondary:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-spinner {\r\n display: inline-block;\r\n width: 18px;\r\n height: 18px;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-top-color: white;\r\n border-radius: 50%;\r\n animation: spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.auth-divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n font-size: 0.875rem;\r\n color: #64748b;\r\n}\r\n\r\n.auth-theme-dark .auth-divider {\r\n color: #94a3b8;\r\n}\r\n\r\n.auth-provider-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n}\r\n\r\n.auth-provider-button {\r\n width: 100%;\r\n padding: 0.875rem 1.5rem;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n background: white;\r\n color: #334155;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.75rem;\r\n}\r\n\r\n.auth-provider-button:hover:not(:disabled) {\r\n background: #f8fafc;\r\n border-color: #cbd5e1;\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.auth-provider-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button {\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n border-color: #334155;\r\n}\r\n\r\n.auth-theme-dark .auth-provider-button:hover:not(:disabled) {\r\n background: #1e293b;\r\n border-color: #475569;\r\n}\r\n\r\n.auth-or-divider {\r\n display: flex;\r\n align-items: center;\r\n text-align: center;\r\n margin: 1rem 0;\r\n color: #94a3b8;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.auth-or-divider::before,\r\n.auth-or-divider::after {\r\n content: '';\r\n flex: 1;\r\n border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.auth-or-divider span {\r\n padding: 0 1rem;\r\n}\r\n\r\n.auth-theme-dark .auth-or-divider::before,\r\n.auth-theme-dark .auth-or-divider::after {\r\n border-color: #334155;\r\n}\r\n\r\n/* Mobile optimizations - condensed spacing and sizing */\r\n@media (max-width: 640px) {\r\n .auth-form-header {\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .auth-form-title {\r\n font-size: 1.125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-form-subtitle {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-error {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-form-group {\r\n margin-bottom: 0.875rem;\r\n }\r\n \r\n .auth-label {\r\n font-size: 0.8125rem;\r\n margin-bottom: 0.375rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .auth-form-footer {\r\n margin-bottom: 1rem;\r\n }\r\n \r\n .auth-link {\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.75rem 1rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-divider {\r\n margin-top: 1rem;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-provider-buttons {\r\n gap: 0.625rem;\r\n margin-top: 1rem;\r\n }\r\n \r\n .auth-or-divider {\r\n margin: 1rem 0;\r\n font-size: 0.8125rem;\r\n }\r\n \r\n .auth-or-divider span {\r\n padding: 0 0.75rem;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .auth-form-title {\r\n font-size: 1rem;\r\n }\r\n \r\n .auth-input {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .auth-button,\r\n .auth-provider-button {\r\n padding: 0.625rem 0.875rem;\r\n font-size: 0.8125rem;\r\n }\r\n}\r\n",".otp-input-container {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: center;\r\n}\r\n\r\n.otp-input-box {\r\n width: 48px;\r\n height: 56px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n text-align: center;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 8px;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s ease;\r\n outline: none;\r\n}\r\n\r\n.otp-input-box:focus {\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.otp-input-box:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .otp-input-box {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .otp-input-box:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n/* Mobile responsiveness - more compact for mobile devices */\r\n@media (max-width: 640px) {\r\n .otp-input-box {\r\n width: 36px;\r\n height: 44px;\r\n font-size: 18px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 5px;\r\n }\r\n}\r\n\r\n/* Extra small devices - very compact */\r\n@media (max-width: 374px) {\r\n .otp-input-box {\r\n width: 32px;\r\n height: 40px;\r\n font-size: 16px;\r\n }\r\n \r\n .otp-input-container {\r\n gap: 4px;\r\n }\r\n}\r\n","/* CSS variables. */\r\n:root {\r\n\t--PhoneInput-color--focus: #03b2cb;\r\n\t--PhoneInputInternationalIconPhone-opacity: 0.8;\r\n\t--PhoneInputInternationalIconGlobe-opacity: 0.65;\r\n\t--PhoneInputCountrySelect-marginRight: 0.35em;\r\n\t--PhoneInputCountrySelectArrow-width: 0.3em;\r\n\t--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);\r\n\t--PhoneInputCountrySelectArrow-borderWidth: 1px;\r\n\t--PhoneInputCountrySelectArrow-opacity: 0.45;\r\n\t--PhoneInputCountrySelectArrow-color: currentColor;\r\n\t--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountrySelectArrow-transform: rotate(45deg);\r\n\t--PhoneInputCountryFlag-aspectRatio: 1.5;\r\n\t--PhoneInputCountryFlag-height: 1em;\r\n\t--PhoneInputCountryFlag-borderWidth: 1px;\r\n\t--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);\r\n\t--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);\r\n\t--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);\r\n}\r\n\r\n.PhoneInput {\r\n\t/* This is done to stretch the contents of this component. */\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n.PhoneInputInput {\r\n\t/* The phone number input stretches to fill all empty space */\r\n\tflex: 1;\r\n\t/* The phone number input should shrink\r\n\t to make room for the extension input */\r\n\tmin-width: 0;\r\n}\r\n\r\n.PhoneInputCountryIcon {\r\n\twidth: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));\r\n\theight: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--square {\r\n\twidth: var(--PhoneInputCountryFlag-height);\r\n}\r\n\r\n.PhoneInputCountryIcon--border {\r\n\t/* Removed `background-color` because when an `<img/>` was still loading\r\n\t it would show a dark gray rectangle. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom. */\r\n\tbackground-color: var(--PhoneInputCountryFlag-backgroundColor--loading);\r\n\t/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */\r\n\t/* For some reason the `<img/>` is not stretched to 100% width and height\r\n\t and sometime there can be seen white pixels of the background at top and bottom,\r\n\t so an additional \"inset\" border is added. */\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);\r\n}\r\n\r\n.PhoneInputCountryIconImg {\r\n\t/* Fixes weird vertical space above the flag icon. */\r\n\t/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */\r\n\tdisplay: block;\r\n\t/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.\r\n\t Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.PhoneInputInternationalIconPhone {\r\n\topacity: var(--PhoneInputInternationalIconPhone-opacity);\r\n}\r\n\r\n.PhoneInputInternationalIconGlobe {\r\n\topacity: var(--PhoneInputInternationalIconGlobe-opacity);\r\n}\r\n\r\n/* Styling native country `<select/>`. */\r\n\r\n.PhoneInputCountry {\r\n\tposition: relative;\r\n\talign-self: stretch;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tmargin-right: var(--PhoneInputCountrySelect-marginRight);\r\n}\r\n\r\n.PhoneInputCountrySelect {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\tborder: 0;\r\n\topacity: 0;\r\n\tcursor: pointer;\r\n}\r\n\r\n.PhoneInputCountrySelect[disabled],\r\n.PhoneInputCountrySelect[readonly] {\r\n\tcursor: default;\r\n}\r\n\r\n.PhoneInputCountrySelectArrow {\r\n\tdisplay: block;\r\n\tcontent: '';\r\n\twidth: var(--PhoneInputCountrySelectArrow-width);\r\n\theight: var(--PhoneInputCountrySelectArrow-width);\r\n\tmargin-left: var(--PhoneInputCountrySelectArrow-marginLeft);\r\n\tborder-style: solid;\r\n\tborder-color: var(--PhoneInputCountrySelectArrow-color);\r\n\tborder-top-width: 0;\r\n\tborder-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\tborder-left-width: 0;\r\n\tborder-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);\r\n\ttransform: var(--PhoneInputCountrySelectArrow-transform);\r\n\topacity: var(--PhoneInputCountrySelectArrow-opacity);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {\r\n\tbox-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),\r\n\t\tinset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);\r\n}\r\n\r\n.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {\r\n\topacity: 1;\r\n\tcolor: var(--PhoneInputCountrySelectArrow-color--focus);\r\n}",".phone-input-wrapper {\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInput {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput {\r\n flex: 1;\r\n width: 100%;\r\n padding: 0.75rem;\r\n font-size: 0.9375rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n color: #1f2937;\r\n transition: all 0.2s;\r\n font-family: inherit;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #f3f4f6;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry {\r\n margin-right: 0.5rem;\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #f9fafb;\r\n border-color: #9ca3af;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelect {\r\n padding: 0.5rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 0.5rem;\r\n background-color: #ffffff;\r\n cursor: pointer;\r\n font-size: 0.9375rem;\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 24px;\r\n height: 24px;\r\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.phone-input-wrapper .PhoneInputCountrySelectArrow {\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n margin-left: 0.5rem;\r\n opacity: 0.5;\r\n}\r\n\r\n/* Dark theme support */\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus {\r\n border-color: #60a5fa;\r\n box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled {\r\n background-color: #1f2937;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover {\r\n background-color: #4b5563;\r\n border-color: #6b7280;\r\n}\r\n\r\n.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect {\r\n background-color: #374151;\r\n border-color: #4b5563;\r\n color: #f9fafb;\r\n}\r\n\r\n/* Mobile responsiveness - condensed */\r\n@media (max-width: 640px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.625rem 0.75rem;\r\n font-size: 0.9375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.375rem;\r\n margin-right: 0.375rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n}\r\n\r\n/* Extra small devices */\r\n@media (max-width: 374px) {\r\n .phone-input-wrapper .PhoneInputInput {\r\n padding: 0.5rem 0.625rem;\r\n font-size: 0.875rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountry {\r\n padding: 0.3125rem;\r\n }\r\n \r\n .phone-input-wrapper .PhoneInputCountryIcon {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n}\r\n"]}