@proveanything/smartlinks-auth-ui 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AccountManagement.d.ts.map +1 -1
- package/dist/components/ClaimUI.d.ts.map +1 -1
- package/dist/components/SmartlinksAuthUI.d.ts +4 -0
- package/dist/components/SmartlinksAuthUI.d.ts.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +953 -928
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +953 -928
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountManagement.d.ts","sourceRoot":"","sources":["../../src/components/AccountManagement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountManagement.d.ts","sourceRoot":"","sources":["../../src/components/AccountManagement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,UAAU,CAAC;AACpE,OAAO,qBAAqB,CAAC;AAE7B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+rB9D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClaimUI.d.ts","sourceRoot":"","sources":["../../src/components/ClaimUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"ClaimUI.d.ts","sourceRoot":"","sources":["../../src/components/ClaimUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,sBAAsB,EAAY,MAAM,UAAU,CAAC;AAEjE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqO9D,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,UAAU,CAAC;AAqB7F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAk4B5D,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.auth-container{align-items:center;background:linear-gradient(135deg,var(--auth-bg-color,#e0f2fe) 0,#f0f9ff 100%);display:flex;font-family:var(--auth-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);justify-content:center;min-height:100vh;padding:1rem}.auth-theme-dark.auth-container{background:linear-gradient(135deg,#0f172a,#1e293b)}.auth-minimal{background:transparent;display:block;font-family:inherit;min-height:auto;padding:0}.auth-card{animation:slideUp .4s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(59,130,246,.1);max-width:440px;padding:2.5rem;width:100%}.auth-theme-dark .auth-card{background:#1e293b;box-shadow:0 10px 40px rgba(0,0,0,.3)}.auth-minimal-card{animation:none;background:transparent;border-radius:0;box-shadow:none;max-width:440px;padding:0;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-header{margin-bottom:2rem;text-align:center}.auth-logo{animation:float 3s ease-in-out infinite;display:inline-flex;margin-bottom:1rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.auth-title{color:#1e293b;font-size:1.75rem;font-weight:700;margin:0}.auth-subtitle{color:#64748b;font-size:.875rem;margin:.25rem 0 0}.auth-theme-dark .auth-title{color:#f1f5f9}.auth-theme-dark .auth-subtitle{color:#94a3b8}.auth-footer{align-items:center;border-top:1px solid #e2e8f0;display:flex;font-size:.875rem;gap:.75rem;justify-content:center;margin-top:1rem;padding-top:1rem}.auth-theme-dark .auth-footer{border-top-color:#334155}.auth-footer a{color:var(--auth-primary-color,#3b82f6);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.auth-footer span{color:#cbd5e1}.auth-theme-dark .auth-footer span{color:#475569}.auth-spinner{border:3px solid #e2e8f0;border-top:3px solid var(--auth-primary-color,#3b82f6);height:40px;margin:0 auto;width:40px}@media (max-width:640px){.auth-container{min-height:100vh;min-height:100dvh;padding:.5rem}.auth-card{border-radius:12px;max-width:100%;padding:1.5rem 1.25rem}.auth-header{margin-bottom:1.25rem}.auth-logo{margin-bottom:.75rem}.auth-title{font-size:1.375rem;line-height:1.3}.auth-subtitle{font-size:.8125rem;margin-top:.125rem}.auth-footer{font-size:.8125rem;gap:.5rem;margin-top:.75rem;padding-top:.75rem}}@media (max-width:374px){.auth-card{padding:1.25rem 1rem}.auth-title{font-size:1.25rem}.auth-subtitle{font-size:.75rem}}.account-section{border-bottom:1px solid #e2e8f0;padding:1.5rem 0}.auth-theme-dark .account-section{border-bottom-color:#334155}.account-section:last-child{border-bottom:none}.section-title{color:#1e293b;font-size:1.125rem;font-weight:600;margin:0 0 1rem}.auth-theme-dark .section-title{color:#f1f5f9}.current-info{background:#f8fafc;border-radius:8px;font-size:.875rem;margin-bottom:1rem;padding:1rem}.auth-theme-dark .current-info{background:#0f172a}.current-info p{color:#475569;margin:.25rem 0}.auth-theme-dark .current-info p{color:#94a3b8}.current-info strong{color:#1e293b}.auth-theme-dark .current-info strong{color:#f1f5f9}.form-group{margin-bottom:1rem}.form-group label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.auth-theme-dark .form-group label{color:#cbd5e1}.button-group{display:flex;flex-wrap:wrap;gap:.75rem}.danger-zone{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1.5rem}.auth-theme-dark .danger-zone{background:#450a0a;border-color:#991b1b}.text-danger{color:#dc2626!important}.text-success{color:#16a34a}.text-warning{color:#ea580c}.auth-theme-dark .text-success{color:#22c55e}.auth-theme-dark .text-warning{color:#fb923c}.delete-confirm{margin-top:1rem}.warning-text{background:#fee2e2;border-radius:6px;color:#dc2626;font-size:.875rem;line-height:1.5;margin:0 0 1rem;padding:.75rem}.auth-theme-dark .warning-text{background:#7f1d1d;color:#fca5a5}.button-danger{background:#dc2626!important;color:#fff!important}.button-danger:hover:not(:disabled){background:#b91c1c!important}.button-secondary{background:#e2e8f0!important;color:#1e293b!important}.auth-theme-dark .button-secondary{background:#334155!important;color:#f1f5f9!important}.button-secondary:hover:not(:disabled){background:#cbd5e1!important}.auth-theme-dark .button-secondary:hover:not(:disabled){background:#475569!important}.photo-preview{display:block;-o-object-fit:cover;object-fit:cover}@media (max-width:640px){.account-section{padding:1rem 0}.section-title{font-size:1rem}.current-info{padding:.75rem}.button-group{flex-direction:column}.button-group .auth-button{width:100%}}.account-management{max-width:600px;width:100%}.account-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:1rem;padding:1.25rem}.auth-theme-dark .account-section{background:#1e293b;border-color:#334155}.account-field{align-items:start;display:grid;gap:1rem;grid-template-columns:1fr auto}.field-info{min-width:0}.field-label{color:#64748b;display:block;font-size:.75rem;font-weight:600;letter-spacing:.025em;margin-bottom:.5rem;text-transform:uppercase}.auth-theme-dark .field-label{color:#94a3b8}.field-value{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;gap:.5rem;word-break:break-word}.auth-theme-dark .field-value{color:#f1f5f9}.verification-badge{border-radius:9999px;display:inline-block;font-size:.6875rem;font-weight:500;padding:.125rem .5rem;white-space:nowrap}.verification-badge.verified{background:#dcfce7;color:#16a34a}.auth-theme-dark .verification-badge.verified{background:#14532d;color:#86efac}.verification-badge.unverified{background:#fef3c7;color:#d97706}.auth-theme-dark .verification-badge.unverified{background:#78350f;color:#fcd34d}.account-field .auth-button{align-self:start;font-size:.875rem;height:auto;padding:.5rem 1rem;white-space:nowrap}.edit-form{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem;width:100%}.auth-theme-dark .edit-form{border-top-color:#334155}.edit-form .form-group{margin-bottom:.75rem}.edit-form .button-group{display:flex;gap:.5rem;margin-top:1rem}@media (max-width:640px){.account-field{grid-template-columns:1fr}.account-field .auth-button{justify-content:center;width:100%}.edit-form .button-group{flex-direction:column}.edit-form .button-group .auth-button{width:100%}}.auth-form{width:100%}.auth-form-header{margin-bottom:1.5rem}.auth-form-title{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.auth-theme-dark .auth-form-title{color:#f1f5f9}.auth-form-subtitle{color:#64748b;font-size:.875rem;margin:0}.auth-theme-dark .auth-form-subtitle{color:#94a3b8}.auth-error{align-items:center;animation:shake .4s ease;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;color:#dc2626;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem}.auth-theme-dark .auth-error{background:#7f1d1d;border-color:#991b1b;color:#fca5a5}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.auth-form-group{margin-bottom:1rem}.auth-label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.auth-theme-dark .auth-label{color:#cbd5e1}.auth-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;box-sizing:border-box;color:#1e293b;font-size:1rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}.auth-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.auth-input:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-input{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-input:focus{background:#1e293b;border-color:#3b82f6}.auth-form-footer{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.auth-link{background:none;border:none;color:#3b82f6;cursor:pointer;font-size:.875rem;padding:0;transition:color .2s ease}.auth-link:hover:not(:disabled){color:#1d4ed8;text-decoration:underline}.auth-link:disabled{cursor:not-allowed;opacity:.6}.auth-button,.auth-link-bold{font-weight:600}.auth-button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-button-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 12px rgba(59,130,246,.25);color:#fff}.auth-button-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(59,130,246,.35);transform:translateY(-2px)}.auth-button-primary:active:not(:disabled){transform:translateY(0)}.auth-button-secondary{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#334155}.auth-button-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.auth-theme-dark .auth-button-secondary{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-button-secondary:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-spinner{animation:spin .8s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.auth-divider{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.5rem;justify-content:center;margin-top:1.5rem}.auth-theme-dark .auth-divider{color:#94a3b8}.auth-provider-buttons{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}.auth-provider-button{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;color:#334155;cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.75rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-provider-button:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}.auth-provider-button:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-provider-button{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-provider-button:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-or-divider{align-items:center;color:#94a3b8;display:flex;font-size:.875rem;margin:1.5rem 0;text-align:center}.auth-or-divider:after,.auth-or-divider:before{border-bottom:1px solid #e2e8f0;content:"";flex:1}.auth-or-divider span{padding:0 1rem}.auth-theme-dark .auth-or-divider:after,.auth-theme-dark .auth-or-divider:before{border-color:#334155}@media (max-width:640px){.auth-form-header{margin-bottom:1rem}.auth-form-title{font-size:1.125rem;margin-bottom:.375rem}.auth-error,.auth-form-subtitle{font-size:.8125rem}.auth-error{padding:.625rem .875rem}.auth-error,.auth-form-group{margin-bottom:.875rem}.auth-label{font-size:.8125rem;margin-bottom:.375rem}.auth-input{font-size:.9375rem;padding:.625rem .875rem}.auth-form-footer{margin-bottom:1rem}.auth-link{font-size:.8125rem}.auth-button,.auth-provider-button{font-size:.875rem;padding:.75rem 1rem}.auth-divider{font-size:.8125rem;margin-top:1rem}.auth-provider-buttons{gap:.625rem;margin-top:1rem}.auth-or-divider{font-size:.8125rem;margin:1rem 0}.auth-or-divider span{padding:0 .75rem}}@media (max-width:374px){.auth-form-title{font-size:1rem}.auth-input{font-size:.875rem;padding:.5rem .75rem}.auth-button,.auth-provider-button{font-size:.8125rem;padding:.625rem .875rem}}.otp-input-container{display:flex;gap:8px;justify-content:center}.otp-input-box{background-color:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#1f2937;font-size:24px;font-weight:600;height:56px;outline:none;text-align:center;transition:all .2s ease;width:48px}.otp-input-box:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.otp-input-box:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.auth-theme-dark .otp-input-box{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .otp-input-box:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .otp-input-box:disabled{background-color:#1f2937}@media (max-width:640px){.otp-input-box{font-size:18px;height:44px;width:36px}.otp-input-container{gap:5px}}@media (max-width:374px){.otp-input-box{font-size:16px;height:40px;width:32px}.otp-input-container{gap:4px}}:root{--PhoneInput-color--focus:#03b2cb;--PhoneInputInternationalIconPhone-opacity:0.8;--PhoneInputInternationalIconGlobe-opacity:0.65;--PhoneInputCountrySelect-marginRight:0.35em;--PhoneInputCountrySelectArrow-width:0.3em;--PhoneInputCountrySelectArrow-marginLeft:var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth:1px;--PhoneInputCountrySelectArrow-opacity:0.45;--PhoneInputCountrySelectArrow-color:currentColor;--PhoneInputCountrySelectArrow-color--focus:var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform:rotate(45deg);--PhoneInputCountryFlag-aspectRatio:1.5;--PhoneInputCountryFlag-height:1em;--PhoneInputCountryFlag-borderWidth:1px;--PhoneInputCountryFlag-borderColor:rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus:var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading:rgba(0,0,0,.1)}.PhoneInput{align-items:center;display:flex}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{height:var(--PhoneInputCountryFlag-height);width:calc(var(--PhoneInputCountryFlag-height)*var(--PhoneInputCountryFlag-aspectRatio))}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;height:100%;width:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{align-items:center;align-self:stretch;display:flex;margin-right:var(--PhoneInputCountrySelect-marginRight);position:relative}.PhoneInputCountrySelect{border:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-color:var(--PhoneInputCountrySelectArrow-color);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-style:solid;border-top-width:0;content:"";display:block;height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);opacity:var(--PhoneInputCountrySelectArrow-opacity);transform:var(--PhoneInputCountrySelectArrow-transform);width:var(--PhoneInputCountrySelectArrow-width)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.phone-input-wrapper{width:100%}.phone-input-wrapper .PhoneInput{align-items:center;display:flex;width:100%}.phone-input-wrapper .PhoneInputInput{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;color:#1f2937;flex:1;font-family:inherit;font-size:.9375rem;padding:.75rem;transition:all .2s;width:100%}.phone-input-wrapper .PhoneInputInput:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.phone-input-wrapper .PhoneInputInput:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.phone-input-wrapper .PhoneInputCountry{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;margin-right:.5rem;padding:.5rem;transition:all .2s}.phone-input-wrapper .PhoneInputCountry:hover{background-color:#f9fafb;border-color:#9ca3af}.phone-input-wrapper .PhoneInputCountrySelect{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;font-size:.9375rem;padding:.5rem}.phone-input-wrapper .PhoneInputCountryIcon{box-shadow:0 0 0 1px rgba(0,0,0,.1);height:24px;width:24px}.phone-input-wrapper .PhoneInputCountrySelectArrow{height:.5rem;margin-left:.5rem;opacity:.5;width:.5rem}.auth-theme-dark .phone-input-wrapper .PhoneInputInput{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled{background-color:#1f2937}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry{background-color:#374151;border-color:#4b5563}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover{background-color:#4b5563;border-color:#6b7280}.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect{background-color:#374151;border-color:#4b5563;color:#f9fafb}@media (max-width:640px){.phone-input-wrapper .PhoneInputInput{font-size:.9375rem;padding:.625rem .75rem}.phone-input-wrapper .PhoneInputCountry{margin-right:.375rem;padding:.375rem}.phone-input-wrapper .PhoneInputCountryIcon{height:20px;width:20px}}@media (max-width:374px){.phone-input-wrapper .PhoneInputInput{font-size:.875rem;padding:.5rem .625rem}.phone-input-wrapper .PhoneInputCountry{padding:.3125rem}.phone-input-wrapper .PhoneInputCountryIcon{height:18px;width:18px}}
|
|
1
|
+
.auth-container{align-items:center;background:linear-gradient(135deg,var(--auth-bg-color,#e0f2fe) 0,#f0f9ff 100%);display:flex;font-family:var(--auth-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);justify-content:center;min-height:100vh;padding:1rem}.auth-theme-dark.auth-container{background:linear-gradient(135deg,#0f172a,#1e293b)}.auth-minimal{background:transparent;display:block;font-family:inherit;min-height:auto;padding:0}.auth-card{animation:slideUp .4s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(59,130,246,.1);max-width:440px;padding:1.75rem;width:100%}.auth-theme-dark .auth-card{background:#1e293b;box-shadow:0 10px 40px rgba(0,0,0,.3)}.auth-minimal-card{animation:none;background:transparent;border-radius:0;box-shadow:none;max-width:440px;padding:0;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-header{margin-bottom:1.25rem;text-align:center}.auth-logo{animation:float 3s ease-in-out infinite;display:inline-flex;margin-bottom:.75rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.auth-title{color:#1e293b;font-size:1.75rem;font-weight:700;margin:0}.auth-subtitle{color:#64748b;font-size:.875rem;margin:.25rem 0 0}.auth-theme-dark .auth-title{color:#f1f5f9}.auth-theme-dark .auth-subtitle{color:#94a3b8}.auth-footer{align-items:center;border-top:1px solid #e2e8f0;display:flex;font-size:.875rem;gap:.75rem;justify-content:center;margin-top:1rem;padding-top:1rem}.auth-theme-dark .auth-footer{border-top-color:#334155}.auth-footer a{color:var(--auth-primary-color,#3b82f6);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.auth-footer span{color:#cbd5e1}.auth-theme-dark .auth-footer span{color:#475569}.auth-spinner{border:3px solid #e2e8f0;border-top:3px solid var(--auth-primary-color,#3b82f6);height:40px;margin:0 auto;width:40px}@media (max-width:640px){.auth-container{min-height:100vh;min-height:100dvh;padding:.5rem}.auth-card{border-radius:12px;max-width:100%;padding:1.5rem 1.25rem}.auth-header{margin-bottom:1.25rem}.auth-logo{margin-bottom:.75rem}.auth-title{font-size:1.375rem;line-height:1.3}.auth-subtitle{font-size:.8125rem;margin-top:.125rem}.auth-footer{font-size:.8125rem;gap:.5rem;margin-top:.75rem;padding-top:.75rem}}@media (max-width:374px){.auth-card{padding:1.25rem 1rem}.auth-title{font-size:1.25rem}.auth-subtitle{font-size:.75rem}}.account-section{border-bottom:1px solid #e2e8f0;padding:1.5rem 0}.auth-theme-dark .account-section{border-bottom-color:#334155}.account-section:last-child{border-bottom:none}.section-title{color:#1e293b;font-size:1.125rem;font-weight:600;margin:0 0 1rem}.auth-theme-dark .section-title{color:#f1f5f9}.current-info{background:#f8fafc;border-radius:8px;font-size:.875rem;margin-bottom:1rem;padding:1rem}.auth-theme-dark .current-info{background:#0f172a}.current-info p{color:#475569;margin:.25rem 0}.auth-theme-dark .current-info p{color:#94a3b8}.current-info strong{color:#1e293b}.auth-theme-dark .current-info strong{color:#f1f5f9}.form-group{margin-bottom:1rem}.form-group label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.auth-theme-dark .form-group label{color:#cbd5e1}.button-group{display:flex;flex-wrap:wrap;gap:.75rem}.danger-zone{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1.5rem}.auth-theme-dark .danger-zone{background:#450a0a;border-color:#991b1b}.text-danger{color:#dc2626!important}.text-success{color:#16a34a}.text-warning{color:#ea580c}.auth-theme-dark .text-success{color:#22c55e}.auth-theme-dark .text-warning{color:#fb923c}.delete-confirm{margin-top:1rem}.warning-text{background:#fee2e2;border-radius:6px;color:#dc2626;font-size:.875rem;line-height:1.5;margin:0 0 1rem;padding:.75rem}.auth-theme-dark .warning-text{background:#7f1d1d;color:#fca5a5}.button-danger{background:#dc2626!important;color:#fff!important}.button-danger:hover:not(:disabled){background:#b91c1c!important}.button-secondary{background:#e2e8f0!important;color:#1e293b!important}.auth-theme-dark .button-secondary{background:#334155!important;color:#f1f5f9!important}.button-secondary:hover:not(:disabled){background:#cbd5e1!important}.auth-theme-dark .button-secondary:hover:not(:disabled){background:#475569!important}.photo-preview{display:block;-o-object-fit:cover;object-fit:cover}@media (max-width:640px){.account-section{padding:1rem 0}.section-title{font-size:1rem}.current-info{padding:.75rem}.button-group{flex-direction:column}.button-group .auth-button{width:100%}}.account-management{max-width:600px;width:100%}.account-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:1rem;padding:1.25rem}.auth-theme-dark .account-section{background:#1e293b;border-color:#334155}.account-field{align-items:start;display:grid;gap:1rem;grid-template-columns:1fr auto}.field-info{min-width:0}.field-label{color:#64748b;display:block;font-size:.75rem;font-weight:600;letter-spacing:.025em;margin-bottom:.5rem;text-transform:uppercase}.auth-theme-dark .field-label{color:#94a3b8}.field-value{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;gap:.5rem;word-break:break-word}.auth-theme-dark .field-value{color:#f1f5f9}.verification-badge{border-radius:9999px;display:inline-block;font-size:.6875rem;font-weight:500;padding:.125rem .5rem;white-space:nowrap}.verification-badge.verified{background:#dcfce7;color:#16a34a}.auth-theme-dark .verification-badge.verified{background:#14532d;color:#86efac}.verification-badge.unverified{background:#fef3c7;color:#d97706}.auth-theme-dark .verification-badge.unverified{background:#78350f;color:#fcd34d}.account-field .auth-button{align-self:start;font-size:.875rem;height:auto;padding:.5rem 1rem;white-space:nowrap}.edit-form{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem;width:100%}.auth-theme-dark .edit-form{border-top-color:#334155}.edit-form .form-group{margin-bottom:.75rem}.edit-form .button-group{display:flex;gap:.5rem;margin-top:1rem}@media (max-width:640px){.account-field{grid-template-columns:1fr}.account-field .auth-button{justify-content:center;width:100%}.edit-form .button-group{flex-direction:column}.edit-form .button-group .auth-button{width:100%}}.auth-form{width:100%}.auth-form-header{margin-bottom:1rem}.auth-form-title{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.auth-theme-dark .auth-form-title{color:#f1f5f9}.auth-form-subtitle{color:#64748b;font-size:.875rem;margin:0}.auth-theme-dark .auth-form-subtitle{color:#94a3b8}.auth-error{align-items:center;animation:shake .4s ease;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;color:#dc2626;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem}.auth-theme-dark .auth-error{background:#7f1d1d;border-color:#991b1b;color:#fca5a5}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.auth-form-group{margin-bottom:.75rem}.auth-label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.auth-theme-dark .auth-label{color:#cbd5e1}.auth-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;box-sizing:border-box;color:#1e293b;font-size:1rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}.auth-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.auth-input:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-input{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-input:focus{background:#1e293b;border-color:#3b82f6}.auth-form-footer{display:flex;justify-content:flex-end;margin-bottom:1rem}.auth-link{background:none;border:none;color:#3b82f6;cursor:pointer;font-size:.875rem;padding:0;transition:color .2s ease}.auth-link:hover:not(:disabled){color:#1d4ed8;text-decoration:underline}.auth-link:disabled{cursor:not-allowed;opacity:.6}.auth-button,.auth-link-bold{font-weight:600}.auth-button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-button-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 12px rgba(59,130,246,.25);color:#fff}.auth-button-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(59,130,246,.35);transform:translateY(-2px)}.auth-button-primary:active:not(:disabled){transform:translateY(0)}.auth-button-secondary{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#334155}.auth-button-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.auth-theme-dark .auth-button-secondary{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-button-secondary:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-spinner{animation:spin .8s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.auth-divider{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.5rem;justify-content:center;margin-top:1rem}.auth-theme-dark .auth-divider{color:#94a3b8}.auth-provider-buttons{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem}.auth-provider-button{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;color:#334155;cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.75rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-provider-button:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}.auth-provider-button:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-provider-button{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-provider-button:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-or-divider{align-items:center;color:#94a3b8;display:flex;font-size:.875rem;margin:1rem 0;text-align:center}.auth-or-divider:after,.auth-or-divider:before{border-bottom:1px solid #e2e8f0;content:"";flex:1}.auth-or-divider span{padding:0 1rem}.auth-theme-dark .auth-or-divider:after,.auth-theme-dark .auth-or-divider:before{border-color:#334155}@media (max-width:640px){.auth-form-header{margin-bottom:1rem}.auth-form-title{font-size:1.125rem;margin-bottom:.375rem}.auth-error,.auth-form-subtitle{font-size:.8125rem}.auth-error{padding:.625rem .875rem}.auth-error,.auth-form-group{margin-bottom:.875rem}.auth-label{font-size:.8125rem;margin-bottom:.375rem}.auth-input{font-size:.9375rem;padding:.625rem .875rem}.auth-form-footer{margin-bottom:1rem}.auth-link{font-size:.8125rem}.auth-button,.auth-provider-button{font-size:.875rem;padding:.75rem 1rem}.auth-divider{font-size:.8125rem;margin-top:1rem}.auth-provider-buttons{gap:.625rem;margin-top:1rem}.auth-or-divider{font-size:.8125rem;margin:1rem 0}.auth-or-divider span{padding:0 .75rem}}@media (max-width:374px){.auth-form-title{font-size:1rem}.auth-input{font-size:.875rem;padding:.5rem .75rem}.auth-button,.auth-provider-button{font-size:.8125rem;padding:.625rem .875rem}}.otp-input-container{display:flex;gap:8px;justify-content:center}.otp-input-box{background-color:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#1f2937;font-size:24px;font-weight:600;height:56px;outline:none;text-align:center;transition:all .2s ease;width:48px}.otp-input-box:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.otp-input-box:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.auth-theme-dark .otp-input-box{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .otp-input-box:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .otp-input-box:disabled{background-color:#1f2937}@media (max-width:640px){.otp-input-box{font-size:18px;height:44px;width:36px}.otp-input-container{gap:5px}}@media (max-width:374px){.otp-input-box{font-size:16px;height:40px;width:32px}.otp-input-container{gap:4px}}:root{--PhoneInput-color--focus:#03b2cb;--PhoneInputInternationalIconPhone-opacity:0.8;--PhoneInputInternationalIconGlobe-opacity:0.65;--PhoneInputCountrySelect-marginRight:0.35em;--PhoneInputCountrySelectArrow-width:0.3em;--PhoneInputCountrySelectArrow-marginLeft:var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth:1px;--PhoneInputCountrySelectArrow-opacity:0.45;--PhoneInputCountrySelectArrow-color:currentColor;--PhoneInputCountrySelectArrow-color--focus:var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform:rotate(45deg);--PhoneInputCountryFlag-aspectRatio:1.5;--PhoneInputCountryFlag-height:1em;--PhoneInputCountryFlag-borderWidth:1px;--PhoneInputCountryFlag-borderColor:rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus:var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading:rgba(0,0,0,.1)}.PhoneInput{align-items:center;display:flex}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{height:var(--PhoneInputCountryFlag-height);width:calc(var(--PhoneInputCountryFlag-height)*var(--PhoneInputCountryFlag-aspectRatio))}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;height:100%;width:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{align-items:center;align-self:stretch;display:flex;margin-right:var(--PhoneInputCountrySelect-marginRight);position:relative}.PhoneInputCountrySelect{border:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-color:var(--PhoneInputCountrySelectArrow-color);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-style:solid;border-top-width:0;content:"";display:block;height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);opacity:var(--PhoneInputCountrySelectArrow-opacity);transform:var(--PhoneInputCountrySelectArrow-transform);width:var(--PhoneInputCountrySelectArrow-width)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.phone-input-wrapper{width:100%}.phone-input-wrapper .PhoneInput{align-items:center;display:flex;width:100%}.phone-input-wrapper .PhoneInputInput{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;color:#1f2937;flex:1;font-family:inherit;font-size:.9375rem;padding:.75rem;transition:all .2s;width:100%}.phone-input-wrapper .PhoneInputInput:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.phone-input-wrapper .PhoneInputInput:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.phone-input-wrapper .PhoneInputCountry{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;margin-right:.5rem;padding:.5rem;transition:all .2s}.phone-input-wrapper .PhoneInputCountry:hover{background-color:#f9fafb;border-color:#9ca3af}.phone-input-wrapper .PhoneInputCountrySelect{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;font-size:.9375rem;padding:.5rem}.phone-input-wrapper .PhoneInputCountryIcon{box-shadow:0 0 0 1px rgba(0,0,0,.1);height:24px;width:24px}.phone-input-wrapper .PhoneInputCountrySelectArrow{height:.5rem;margin-left:.5rem;opacity:.5;width:.5rem}.auth-theme-dark .phone-input-wrapper .PhoneInputInput{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled{background-color:#1f2937}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry{background-color:#374151;border-color:#4b5563}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover{background-color:#4b5563;border-color:#6b7280}.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect{background-color:#374151;border-color:#4b5563;color:#f9fafb}@media (max-width:640px){.phone-input-wrapper .PhoneInputInput{font-size:.9375rem;padding:.625rem .75rem}.phone-input-wrapper .PhoneInputCountry{margin-right:.375rem;padding:.375rem}.phone-input-wrapper .PhoneInputCountryIcon{height:20px;width:20px}}@media (max-width:374px){.phone-input-wrapper .PhoneInputInput{font-size:.875rem;padding:.5rem .625rem}.phone-input-wrapper .PhoneInputCountry{padding:.3125rem}.phone-input-wrapper .PhoneInputCountryIcon{height:18px;width:18px}}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AuthContainer.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"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","file":"index.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 */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: block;\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: 2.5rem;\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: 2rem;\r\n}\r\n\r\n.auth-logo {\r\n display: inline-flex;\r\n margin-bottom: 1rem;\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: 1.5rem;\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: 1rem;\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: 1.5rem;\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: 1.5rem;\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.75rem;\r\n margin-top: 1.5rem;\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: 1.5rem 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"]}
|
|
1
|
+
{"version":3,"sources":["AuthContainer.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"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","file":"index.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 */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: block;\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"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import type { SmartlinksAuthUIProps } from './types';
|
|
1
|
+
export { SmartlinksAuthUI } from './components/SmartlinksAuthUI';
|
|
3
2
|
export { AccountManagement } from './components/AccountManagement';
|
|
4
3
|
export { SmartlinksClaimUI } from './components/ClaimUI';
|
|
5
|
-
export declare const SmartlinksAuthUI: React.FC<SmartlinksAuthUIProps>;
|
|
6
4
|
export { AuthProvider, useAuth } from './context/AuthContext';
|
|
7
5
|
export { ProtectedRoute } from './components/ProtectedRoute';
|
|
8
6
|
export { tokenStorage } from './utils/tokenStorage';
|
|
9
7
|
export { AuthUIPreview } from './components/AuthUIPreview';
|
|
10
8
|
export type * from './types';
|
|
11
|
-
export { SmartlinksAuthUI as FirebaseAuthUI };
|
|
9
|
+
export { SmartlinksAuthUI as FirebaseAuthUI } from './components/SmartlinksAuthUI';
|
|
12
10
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAGjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,gBAAgB,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC"}
|
package/dist/index.esm.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.auth-container{align-items:center;background:linear-gradient(135deg,var(--auth-bg-color,#e0f2fe) 0,#f0f9ff 100%);display:flex;font-family:var(--auth-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);justify-content:center;min-height:100vh;padding:1rem}.auth-theme-dark.auth-container{background:linear-gradient(135deg,#0f172a,#1e293b)}.auth-minimal{background:transparent;display:block;font-family:inherit;min-height:auto;padding:0}.auth-card{animation:slideUp .4s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(59,130,246,.1);max-width:440px;padding:2.5rem;width:100%}.auth-theme-dark .auth-card{background:#1e293b;box-shadow:0 10px 40px rgba(0,0,0,.3)}.auth-minimal-card{animation:none;background:transparent;border-radius:0;box-shadow:none;max-width:440px;padding:0;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-header{margin-bottom:2rem;text-align:center}.auth-logo{animation:float 3s ease-in-out infinite;display:inline-flex;margin-bottom:1rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.auth-title{color:#1e293b;font-size:1.75rem;font-weight:700;margin:0}.auth-subtitle{color:#64748b;font-size:.875rem;margin:.25rem 0 0}.auth-theme-dark .auth-title{color:#f1f5f9}.auth-theme-dark .auth-subtitle{color:#94a3b8}.auth-footer{align-items:center;border-top:1px solid #e2e8f0;display:flex;font-size:.875rem;gap:.75rem;justify-content:center;margin-top:1rem;padding-top:1rem}.auth-theme-dark .auth-footer{border-top-color:#334155}.auth-footer a{color:var(--auth-primary-color,#3b82f6);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.auth-footer span{color:#cbd5e1}.auth-theme-dark .auth-footer span{color:#475569}.auth-spinner{border:3px solid #e2e8f0;border-top:3px solid var(--auth-primary-color,#3b82f6);height:40px;margin:0 auto;width:40px}@media (max-width:640px){.auth-container{min-height:100vh;min-height:100dvh;padding:.5rem}.auth-card{border-radius:12px;max-width:100%;padding:1.5rem 1.25rem}.auth-header{margin-bottom:1.25rem}.auth-logo{margin-bottom:.75rem}.auth-title{font-size:1.375rem;line-height:1.3}.auth-subtitle{font-size:.8125rem;margin-top:.125rem}.auth-footer{font-size:.8125rem;gap:.5rem;margin-top:.75rem;padding-top:.75rem}}@media (max-width:374px){.auth-card{padding:1.25rem 1rem}.auth-title{font-size:1.25rem}.auth-subtitle{font-size:.75rem}}.account-section{border-bottom:1px solid #e2e8f0;padding:1.5rem 0}.auth-theme-dark .account-section{border-bottom-color:#334155}.account-section:last-child{border-bottom:none}.section-title{color:#1e293b;font-size:1.125rem;font-weight:600;margin:0 0 1rem}.auth-theme-dark .section-title{color:#f1f5f9}.current-info{background:#f8fafc;border-radius:8px;font-size:.875rem;margin-bottom:1rem;padding:1rem}.auth-theme-dark .current-info{background:#0f172a}.current-info p{color:#475569;margin:.25rem 0}.auth-theme-dark .current-info p{color:#94a3b8}.current-info strong{color:#1e293b}.auth-theme-dark .current-info strong{color:#f1f5f9}.form-group{margin-bottom:1rem}.form-group label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.auth-theme-dark .form-group label{color:#cbd5e1}.button-group{display:flex;flex-wrap:wrap;gap:.75rem}.danger-zone{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1.5rem}.auth-theme-dark .danger-zone{background:#450a0a;border-color:#991b1b}.text-danger{color:#dc2626!important}.text-success{color:#16a34a}.text-warning{color:#ea580c}.auth-theme-dark .text-success{color:#22c55e}.auth-theme-dark .text-warning{color:#fb923c}.delete-confirm{margin-top:1rem}.warning-text{background:#fee2e2;border-radius:6px;color:#dc2626;font-size:.875rem;line-height:1.5;margin:0 0 1rem;padding:.75rem}.auth-theme-dark .warning-text{background:#7f1d1d;color:#fca5a5}.button-danger{background:#dc2626!important;color:#fff!important}.button-danger:hover:not(:disabled){background:#b91c1c!important}.button-secondary{background:#e2e8f0!important;color:#1e293b!important}.auth-theme-dark .button-secondary{background:#334155!important;color:#f1f5f9!important}.button-secondary:hover:not(:disabled){background:#cbd5e1!important}.auth-theme-dark .button-secondary:hover:not(:disabled){background:#475569!important}.photo-preview{display:block;-o-object-fit:cover;object-fit:cover}@media (max-width:640px){.account-section{padding:1rem 0}.section-title{font-size:1rem}.current-info{padding:.75rem}.button-group{flex-direction:column}.button-group .auth-button{width:100%}}.account-management{max-width:600px;width:100%}.account-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:1rem;padding:1.25rem}.auth-theme-dark .account-section{background:#1e293b;border-color:#334155}.account-field{align-items:start;display:grid;gap:1rem;grid-template-columns:1fr auto}.field-info{min-width:0}.field-label{color:#64748b;display:block;font-size:.75rem;font-weight:600;letter-spacing:.025em;margin-bottom:.5rem;text-transform:uppercase}.auth-theme-dark .field-label{color:#94a3b8}.field-value{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;gap:.5rem;word-break:break-word}.auth-theme-dark .field-value{color:#f1f5f9}.verification-badge{border-radius:9999px;display:inline-block;font-size:.6875rem;font-weight:500;padding:.125rem .5rem;white-space:nowrap}.verification-badge.verified{background:#dcfce7;color:#16a34a}.auth-theme-dark .verification-badge.verified{background:#14532d;color:#86efac}.verification-badge.unverified{background:#fef3c7;color:#d97706}.auth-theme-dark .verification-badge.unverified{background:#78350f;color:#fcd34d}.account-field .auth-button{align-self:start;font-size:.875rem;height:auto;padding:.5rem 1rem;white-space:nowrap}.edit-form{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem;width:100%}.auth-theme-dark .edit-form{border-top-color:#334155}.edit-form .form-group{margin-bottom:.75rem}.edit-form .button-group{display:flex;gap:.5rem;margin-top:1rem}@media (max-width:640px){.account-field{grid-template-columns:1fr}.account-field .auth-button{justify-content:center;width:100%}.edit-form .button-group{flex-direction:column}.edit-form .button-group .auth-button{width:100%}}.auth-form{width:100%}.auth-form-header{margin-bottom:1.5rem}.auth-form-title{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.auth-theme-dark .auth-form-title{color:#f1f5f9}.auth-form-subtitle{color:#64748b;font-size:.875rem;margin:0}.auth-theme-dark .auth-form-subtitle{color:#94a3b8}.auth-error{align-items:center;animation:shake .4s ease;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;color:#dc2626;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem}.auth-theme-dark .auth-error{background:#7f1d1d;border-color:#991b1b;color:#fca5a5}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.auth-form-group{margin-bottom:1rem}.auth-label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.auth-theme-dark .auth-label{color:#cbd5e1}.auth-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;box-sizing:border-box;color:#1e293b;font-size:1rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}.auth-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.auth-input:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-input{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-input:focus{background:#1e293b;border-color:#3b82f6}.auth-form-footer{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.auth-link{background:none;border:none;color:#3b82f6;cursor:pointer;font-size:.875rem;padding:0;transition:color .2s ease}.auth-link:hover:not(:disabled){color:#1d4ed8;text-decoration:underline}.auth-link:disabled{cursor:not-allowed;opacity:.6}.auth-button,.auth-link-bold{font-weight:600}.auth-button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-button-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 12px rgba(59,130,246,.25);color:#fff}.auth-button-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(59,130,246,.35);transform:translateY(-2px)}.auth-button-primary:active:not(:disabled){transform:translateY(0)}.auth-button-secondary{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#334155}.auth-button-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.auth-theme-dark .auth-button-secondary{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-button-secondary:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-spinner{animation:spin .8s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.auth-divider{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.5rem;justify-content:center;margin-top:1.5rem}.auth-theme-dark .auth-divider{color:#94a3b8}.auth-provider-buttons{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}.auth-provider-button{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;color:#334155;cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.75rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-provider-button:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}.auth-provider-button:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-provider-button{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-provider-button:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-or-divider{align-items:center;color:#94a3b8;display:flex;font-size:.875rem;margin:1.5rem 0;text-align:center}.auth-or-divider:after,.auth-or-divider:before{border-bottom:1px solid #e2e8f0;content:"";flex:1}.auth-or-divider span{padding:0 1rem}.auth-theme-dark .auth-or-divider:after,.auth-theme-dark .auth-or-divider:before{border-color:#334155}@media (max-width:640px){.auth-form-header{margin-bottom:1rem}.auth-form-title{font-size:1.125rem;margin-bottom:.375rem}.auth-error,.auth-form-subtitle{font-size:.8125rem}.auth-error{padding:.625rem .875rem}.auth-error,.auth-form-group{margin-bottom:.875rem}.auth-label{font-size:.8125rem;margin-bottom:.375rem}.auth-input{font-size:.9375rem;padding:.625rem .875rem}.auth-form-footer{margin-bottom:1rem}.auth-link{font-size:.8125rem}.auth-button,.auth-provider-button{font-size:.875rem;padding:.75rem 1rem}.auth-divider{font-size:.8125rem;margin-top:1rem}.auth-provider-buttons{gap:.625rem;margin-top:1rem}.auth-or-divider{font-size:.8125rem;margin:1rem 0}.auth-or-divider span{padding:0 .75rem}}@media (max-width:374px){.auth-form-title{font-size:1rem}.auth-input{font-size:.875rem;padding:.5rem .75rem}.auth-button,.auth-provider-button{font-size:.8125rem;padding:.625rem .875rem}}.otp-input-container{display:flex;gap:8px;justify-content:center}.otp-input-box{background-color:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#1f2937;font-size:24px;font-weight:600;height:56px;outline:none;text-align:center;transition:all .2s ease;width:48px}.otp-input-box:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.otp-input-box:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.auth-theme-dark .otp-input-box{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .otp-input-box:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .otp-input-box:disabled{background-color:#1f2937}@media (max-width:640px){.otp-input-box{font-size:18px;height:44px;width:36px}.otp-input-container{gap:5px}}@media (max-width:374px){.otp-input-box{font-size:16px;height:40px;width:32px}.otp-input-container{gap:4px}}:root{--PhoneInput-color--focus:#03b2cb;--PhoneInputInternationalIconPhone-opacity:0.8;--PhoneInputInternationalIconGlobe-opacity:0.65;--PhoneInputCountrySelect-marginRight:0.35em;--PhoneInputCountrySelectArrow-width:0.3em;--PhoneInputCountrySelectArrow-marginLeft:var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth:1px;--PhoneInputCountrySelectArrow-opacity:0.45;--PhoneInputCountrySelectArrow-color:currentColor;--PhoneInputCountrySelectArrow-color--focus:var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform:rotate(45deg);--PhoneInputCountryFlag-aspectRatio:1.5;--PhoneInputCountryFlag-height:1em;--PhoneInputCountryFlag-borderWidth:1px;--PhoneInputCountryFlag-borderColor:rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus:var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading:rgba(0,0,0,.1)}.PhoneInput{align-items:center;display:flex}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{height:var(--PhoneInputCountryFlag-height);width:calc(var(--PhoneInputCountryFlag-height)*var(--PhoneInputCountryFlag-aspectRatio))}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;height:100%;width:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{align-items:center;align-self:stretch;display:flex;margin-right:var(--PhoneInputCountrySelect-marginRight);position:relative}.PhoneInputCountrySelect{border:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-color:var(--PhoneInputCountrySelectArrow-color);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-style:solid;border-top-width:0;content:"";display:block;height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);opacity:var(--PhoneInputCountrySelectArrow-opacity);transform:var(--PhoneInputCountrySelectArrow-transform);width:var(--PhoneInputCountrySelectArrow-width)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.phone-input-wrapper{width:100%}.phone-input-wrapper .PhoneInput{align-items:center;display:flex;width:100%}.phone-input-wrapper .PhoneInputInput{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;color:#1f2937;flex:1;font-family:inherit;font-size:.9375rem;padding:.75rem;transition:all .2s;width:100%}.phone-input-wrapper .PhoneInputInput:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.phone-input-wrapper .PhoneInputInput:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.phone-input-wrapper .PhoneInputCountry{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;margin-right:.5rem;padding:.5rem;transition:all .2s}.phone-input-wrapper .PhoneInputCountry:hover{background-color:#f9fafb;border-color:#9ca3af}.phone-input-wrapper .PhoneInputCountrySelect{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;font-size:.9375rem;padding:.5rem}.phone-input-wrapper .PhoneInputCountryIcon{box-shadow:0 0 0 1px rgba(0,0,0,.1);height:24px;width:24px}.phone-input-wrapper .PhoneInputCountrySelectArrow{height:.5rem;margin-left:.5rem;opacity:.5;width:.5rem}.auth-theme-dark .phone-input-wrapper .PhoneInputInput{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled{background-color:#1f2937}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry{background-color:#374151;border-color:#4b5563}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover{background-color:#4b5563;border-color:#6b7280}.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect{background-color:#374151;border-color:#4b5563;color:#f9fafb}@media (max-width:640px){.phone-input-wrapper .PhoneInputInput{font-size:.9375rem;padding:.625rem .75rem}.phone-input-wrapper .PhoneInputCountry{margin-right:.375rem;padding:.375rem}.phone-input-wrapper .PhoneInputCountryIcon{height:20px;width:20px}}@media (max-width:374px){.phone-input-wrapper .PhoneInputInput{font-size:.875rem;padding:.5rem .625rem}.phone-input-wrapper .PhoneInputCountry{padding:.3125rem}.phone-input-wrapper .PhoneInputCountryIcon{height:18px;width:18px}}
|
|
1
|
+
.auth-container{align-items:center;background:linear-gradient(135deg,var(--auth-bg-color,#e0f2fe) 0,#f0f9ff 100%);display:flex;font-family:var(--auth-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);justify-content:center;min-height:100vh;padding:1rem}.auth-theme-dark.auth-container{background:linear-gradient(135deg,#0f172a,#1e293b)}.auth-minimal{background:transparent;display:block;font-family:inherit;min-height:auto;padding:0}.auth-card{animation:slideUp .4s cubic-bezier(.16,1,.3,1);background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(59,130,246,.1);max-width:440px;padding:1.75rem;width:100%}.auth-theme-dark .auth-card{background:#1e293b;box-shadow:0 10px 40px rgba(0,0,0,.3)}.auth-minimal-card{animation:none;background:transparent;border-radius:0;box-shadow:none;max-width:440px;padding:0;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.auth-header{margin-bottom:1.25rem;text-align:center}.auth-logo{animation:float 3s ease-in-out infinite;display:inline-flex;margin-bottom:.75rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.auth-title{color:#1e293b;font-size:1.75rem;font-weight:700;margin:0}.auth-subtitle{color:#64748b;font-size:.875rem;margin:.25rem 0 0}.auth-theme-dark .auth-title{color:#f1f5f9}.auth-theme-dark .auth-subtitle{color:#94a3b8}.auth-footer{align-items:center;border-top:1px solid #e2e8f0;display:flex;font-size:.875rem;gap:.75rem;justify-content:center;margin-top:1rem;padding-top:1rem}.auth-theme-dark .auth-footer{border-top-color:#334155}.auth-footer a{color:var(--auth-primary-color,#3b82f6);text-decoration:none}.auth-footer a:hover{text-decoration:underline}.auth-footer span{color:#cbd5e1}.auth-theme-dark .auth-footer span{color:#475569}.auth-spinner{border:3px solid #e2e8f0;border-top:3px solid var(--auth-primary-color,#3b82f6);height:40px;margin:0 auto;width:40px}@media (max-width:640px){.auth-container{min-height:100vh;min-height:100dvh;padding:.5rem}.auth-card{border-radius:12px;max-width:100%;padding:1.5rem 1.25rem}.auth-header{margin-bottom:1.25rem}.auth-logo{margin-bottom:.75rem}.auth-title{font-size:1.375rem;line-height:1.3}.auth-subtitle{font-size:.8125rem;margin-top:.125rem}.auth-footer{font-size:.8125rem;gap:.5rem;margin-top:.75rem;padding-top:.75rem}}@media (max-width:374px){.auth-card{padding:1.25rem 1rem}.auth-title{font-size:1.25rem}.auth-subtitle{font-size:.75rem}}.account-section{border-bottom:1px solid #e2e8f0;padding:1.5rem 0}.auth-theme-dark .account-section{border-bottom-color:#334155}.account-section:last-child{border-bottom:none}.section-title{color:#1e293b;font-size:1.125rem;font-weight:600;margin:0 0 1rem}.auth-theme-dark .section-title{color:#f1f5f9}.current-info{background:#f8fafc;border-radius:8px;font-size:.875rem;margin-bottom:1rem;padding:1rem}.auth-theme-dark .current-info{background:#0f172a}.current-info p{color:#475569;margin:.25rem 0}.auth-theme-dark .current-info p{color:#94a3b8}.current-info strong{color:#1e293b}.auth-theme-dark .current-info strong{color:#f1f5f9}.form-group{margin-bottom:1rem}.form-group label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem}.auth-theme-dark .form-group label{color:#cbd5e1}.button-group{display:flex;flex-wrap:wrap;gap:.75rem}.danger-zone{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:1.5rem}.auth-theme-dark .danger-zone{background:#450a0a;border-color:#991b1b}.text-danger{color:#dc2626!important}.text-success{color:#16a34a}.text-warning{color:#ea580c}.auth-theme-dark .text-success{color:#22c55e}.auth-theme-dark .text-warning{color:#fb923c}.delete-confirm{margin-top:1rem}.warning-text{background:#fee2e2;border-radius:6px;color:#dc2626;font-size:.875rem;line-height:1.5;margin:0 0 1rem;padding:.75rem}.auth-theme-dark .warning-text{background:#7f1d1d;color:#fca5a5}.button-danger{background:#dc2626!important;color:#fff!important}.button-danger:hover:not(:disabled){background:#b91c1c!important}.button-secondary{background:#e2e8f0!important;color:#1e293b!important}.auth-theme-dark .button-secondary{background:#334155!important;color:#f1f5f9!important}.button-secondary:hover:not(:disabled){background:#cbd5e1!important}.auth-theme-dark .button-secondary:hover:not(:disabled){background:#475569!important}.photo-preview{display:block;-o-object-fit:cover;object-fit:cover}@media (max-width:640px){.account-section{padding:1rem 0}.section-title{font-size:1rem}.current-info{padding:.75rem}.button-group{flex-direction:column}.button-group .auth-button{width:100%}}.account-management{max-width:600px;width:100%}.account-section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:1rem;padding:1.25rem}.auth-theme-dark .account-section{background:#1e293b;border-color:#334155}.account-field{align-items:start;display:grid;gap:1rem;grid-template-columns:1fr auto}.field-info{min-width:0}.field-label{color:#64748b;display:block;font-size:.75rem;font-weight:600;letter-spacing:.025em;margin-bottom:.5rem;text-transform:uppercase}.auth-theme-dark .field-label{color:#94a3b8}.field-value{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;gap:.5rem;word-break:break-word}.auth-theme-dark .field-value{color:#f1f5f9}.verification-badge{border-radius:9999px;display:inline-block;font-size:.6875rem;font-weight:500;padding:.125rem .5rem;white-space:nowrap}.verification-badge.verified{background:#dcfce7;color:#16a34a}.auth-theme-dark .verification-badge.verified{background:#14532d;color:#86efac}.verification-badge.unverified{background:#fef3c7;color:#d97706}.auth-theme-dark .verification-badge.unverified{background:#78350f;color:#fcd34d}.account-field .auth-button{align-self:start;font-size:.875rem;height:auto;padding:.5rem 1rem;white-space:nowrap}.edit-form{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem;width:100%}.auth-theme-dark .edit-form{border-top-color:#334155}.edit-form .form-group{margin-bottom:.75rem}.edit-form .button-group{display:flex;gap:.5rem;margin-top:1rem}@media (max-width:640px){.account-field{grid-template-columns:1fr}.account-field .auth-button{justify-content:center;width:100%}.edit-form .button-group{flex-direction:column}.edit-form .button-group .auth-button{width:100%}}.auth-form{width:100%}.auth-form-header{margin-bottom:1rem}.auth-form-title{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.auth-theme-dark .auth-form-title{color:#f1f5f9}.auth-form-subtitle{color:#64748b;font-size:.875rem;margin:0}.auth-theme-dark .auth-form-subtitle{color:#94a3b8}.auth-error{align-items:center;animation:shake .4s ease;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;color:#dc2626;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1rem;padding:.75rem 1rem}.auth-theme-dark .auth-error{background:#7f1d1d;border-color:#991b1b;color:#fca5a5}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.auth-form-group{margin-bottom:.75rem}.auth-label{color:#334155;display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.auth-theme-dark .auth-label{color:#cbd5e1}.auth-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;box-sizing:border-box;color:#1e293b;font-size:1rem;padding:.75rem 1rem;transition:all .2s ease;width:100%}.auth-input:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.auth-input:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-input{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-input:focus{background:#1e293b;border-color:#3b82f6}.auth-form-footer{display:flex;justify-content:flex-end;margin-bottom:1rem}.auth-link{background:none;border:none;color:#3b82f6;cursor:pointer;font-size:.875rem;padding:0;transition:color .2s ease}.auth-link:hover:not(:disabled){color:#1d4ed8;text-decoration:underline}.auth-link:disabled{cursor:not-allowed;opacity:.6}.auth-button,.auth-link-bold{font-weight:600}.auth-button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-button-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 12px rgba(59,130,246,.25);color:#fff}.auth-button-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(59,130,246,.35);transform:translateY(-2px)}.auth-button-primary:active:not(:disabled){transform:translateY(0)}.auth-button-secondary{background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#334155}.auth-button-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.auth-theme-dark .auth-button-secondary{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-button-secondary:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-spinner{animation:spin .8s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.auth-divider{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.5rem;justify-content:center;margin-top:1rem}.auth-theme-dark .auth-divider{color:#94a3b8}.auth-provider-buttons{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem}.auth-provider-button{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;color:#334155;cursor:pointer;display:flex;font-size:.9375rem;font-weight:500;gap:.75rem;justify-content:center;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.auth-provider-button:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}.auth-provider-button:disabled{cursor:not-allowed;opacity:.6}.auth-theme-dark .auth-provider-button{background:#0f172a;border-color:#334155;color:#f1f5f9}.auth-theme-dark .auth-provider-button:hover:not(:disabled){background:#1e293b;border-color:#475569}.auth-or-divider{align-items:center;color:#94a3b8;display:flex;font-size:.875rem;margin:1rem 0;text-align:center}.auth-or-divider:after,.auth-or-divider:before{border-bottom:1px solid #e2e8f0;content:"";flex:1}.auth-or-divider span{padding:0 1rem}.auth-theme-dark .auth-or-divider:after,.auth-theme-dark .auth-or-divider:before{border-color:#334155}@media (max-width:640px){.auth-form-header{margin-bottom:1rem}.auth-form-title{font-size:1.125rem;margin-bottom:.375rem}.auth-error,.auth-form-subtitle{font-size:.8125rem}.auth-error{padding:.625rem .875rem}.auth-error,.auth-form-group{margin-bottom:.875rem}.auth-label{font-size:.8125rem;margin-bottom:.375rem}.auth-input{font-size:.9375rem;padding:.625rem .875rem}.auth-form-footer{margin-bottom:1rem}.auth-link{font-size:.8125rem}.auth-button,.auth-provider-button{font-size:.875rem;padding:.75rem 1rem}.auth-divider{font-size:.8125rem;margin-top:1rem}.auth-provider-buttons{gap:.625rem;margin-top:1rem}.auth-or-divider{font-size:.8125rem;margin:1rem 0}.auth-or-divider span{padding:0 .75rem}}@media (max-width:374px){.auth-form-title{font-size:1rem}.auth-input{font-size:.875rem;padding:.5rem .75rem}.auth-button,.auth-provider-button{font-size:.8125rem;padding:.625rem .875rem}}.otp-input-container{display:flex;gap:8px;justify-content:center}.otp-input-box{background-color:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#1f2937;font-size:24px;font-weight:600;height:56px;outline:none;text-align:center;transition:all .2s ease;width:48px}.otp-input-box:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.otp-input-box:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.auth-theme-dark .otp-input-box{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .otp-input-box:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .otp-input-box:disabled{background-color:#1f2937}@media (max-width:640px){.otp-input-box{font-size:18px;height:44px;width:36px}.otp-input-container{gap:5px}}@media (max-width:374px){.otp-input-box{font-size:16px;height:40px;width:32px}.otp-input-container{gap:4px}}:root{--PhoneInput-color--focus:#03b2cb;--PhoneInputInternationalIconPhone-opacity:0.8;--PhoneInputInternationalIconGlobe-opacity:0.65;--PhoneInputCountrySelect-marginRight:0.35em;--PhoneInputCountrySelectArrow-width:0.3em;--PhoneInputCountrySelectArrow-marginLeft:var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth:1px;--PhoneInputCountrySelectArrow-opacity:0.45;--PhoneInputCountrySelectArrow-color:currentColor;--PhoneInputCountrySelectArrow-color--focus:var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform:rotate(45deg);--PhoneInputCountryFlag-aspectRatio:1.5;--PhoneInputCountryFlag-height:1em;--PhoneInputCountryFlag-borderWidth:1px;--PhoneInputCountryFlag-borderColor:rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus:var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading:rgba(0,0,0,.1)}.PhoneInput{align-items:center;display:flex}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{height:var(--PhoneInputCountryFlag-height);width:calc(var(--PhoneInputCountryFlag-height)*var(--PhoneInputCountryFlag-aspectRatio))}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;height:100%;width:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{align-items:center;align-self:stretch;display:flex;margin-right:var(--PhoneInputCountrySelect-marginRight);position:relative}.PhoneInputCountrySelect{border:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-color:var(--PhoneInputCountrySelectArrow-color);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-style:solid;border-top-width:0;content:"";display:block;height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);opacity:var(--PhoneInputCountrySelectArrow-opacity);transform:var(--PhoneInputCountrySelectArrow-transform);width:var(--PhoneInputCountrySelectArrow-width)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{color:var(--PhoneInputCountrySelectArrow-color--focus);opacity:1}.phone-input-wrapper{width:100%}.phone-input-wrapper .PhoneInput{align-items:center;display:flex;width:100%}.phone-input-wrapper .PhoneInputInput{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;color:#1f2937;flex:1;font-family:inherit;font-size:.9375rem;padding:.75rem;transition:all .2s;width:100%}.phone-input-wrapper .PhoneInputInput:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.phone-input-wrapper .PhoneInputInput:disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.phone-input-wrapper .PhoneInputCountry{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;margin-right:.5rem;padding:.5rem;transition:all .2s}.phone-input-wrapper .PhoneInputCountry:hover{background-color:#f9fafb;border-color:#9ca3af}.phone-input-wrapper .PhoneInputCountrySelect{background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;cursor:pointer;font-size:.9375rem;padding:.5rem}.phone-input-wrapper .PhoneInputCountryIcon{box-shadow:0 0 0 1px rgba(0,0,0,.1);height:24px;width:24px}.phone-input-wrapper .PhoneInputCountrySelectArrow{height:.5rem;margin-left:.5rem;opacity:.5;width:.5rem}.auth-theme-dark .phone-input-wrapper .PhoneInputInput{background-color:#374151;border-color:#4b5563;color:#f9fafb}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.1)}.auth-theme-dark .phone-input-wrapper .PhoneInputInput:disabled{background-color:#1f2937}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry{background-color:#374151;border-color:#4b5563}.auth-theme-dark .phone-input-wrapper .PhoneInputCountry:hover{background-color:#4b5563;border-color:#6b7280}.auth-theme-dark .phone-input-wrapper .PhoneInputCountrySelect{background-color:#374151;border-color:#4b5563;color:#f9fafb}@media (max-width:640px){.phone-input-wrapper .PhoneInputInput{font-size:.9375rem;padding:.625rem .75rem}.phone-input-wrapper .PhoneInputCountry{margin-right:.375rem;padding:.375rem}.phone-input-wrapper .PhoneInputCountryIcon{height:20px;width:20px}}@media (max-width:374px){.phone-input-wrapper .PhoneInputInput{font-size:.875rem;padding:.5rem .625rem}.phone-input-wrapper .PhoneInputCountry{padding:.3125rem}.phone-input-wrapper .PhoneInputCountryIcon{height:18px;width:18px}}
|
|
2
2
|
/*# sourceMappingURL=index.esm.css.map */
|
package/dist/index.esm.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AuthContainer.css","AuthForm.css","OTPInput.css","style.css","PhoneInput.css"],"names":[],"mappings":"AAAA,gBAGE,kBAAmB,CAGnB,8EAAmF,CAJnF,YAAa,CAKb,wHAAgI,CAHhI,sBAAuB,CAHvB,gBAAiB,CAIjB,YAGF,CAEA,gCACE,kDACF,CAGA,cAIE,sBAAuB,CAFvB,aAAc,CAGd,mBAAoB,CAJpB,eAAgB,CAEhB,SAGF,CAEA,WAOE,8CAAqD,CAJrD,eAAiB,CACjB,kBAAmB,CACnB,0CAA+C,CAH/C,eAAgB,CAIhB,cAAe,CALf,UAOF,CAEA,4BACE,kBAAmB,CACnB,qCACF,CAGA,mBAOE,cAAe,CAJf,sBAAuB,CACvB,eAAgB,CAChB,eAAgB,CAHhB,eAAgB,CAIhB,SAAU,CALV,UAOF,CAEA,mBACE,GACE,SAAU,CACV,0BACF,CACA,GACE,SAAU,CACV,uBACF,CACF,CAEA,aAEE,kBAAmB,CADnB,iBAEF,CAEA,WAGE,uCAAwC,CAFxC,mBAAoB,CACpB,kBAEF,CAEA,iBACE,MACE,uBACF,CACA,IACE,0BACF,CACF,CAEA,YAGE,aAAc,CAFd,iBAAkB,CAClB,eAAgB,CAEhB,QACF,CAEA,eAEE,aAAc,CADd,iBAAmB,CAEnB,iBACF,CAEA,6BACE,aACF,CAEA,gCACE,aACF,CAMA,aAEE,kBAAmB,CAKnB,4BAA6B,CAN7B,YAAa,CAOb,iBAAmB,CAJnB,UAAY,CADZ,sBAAuB,CAGvB,eAAgB,CADhB,gBAIF,CAEA,8BACE,wBACF,CAEA,eACE,uCAAyC,CACzC,oBACF,CAEA,qBACE,yBACF,CAEA,kBACE,aACF,CAEA,mCACE,aACF,CAEA,cAIE,wBAAoD,CAApD,sDAAoD,CAFpD,WAAY,CAKZ,aAAc,CANd,UAOF,CASA,yBACE,gBAEE,gBAAiB,CACjB,iBAAkB,CAFlB,aAGF,CAEA,WAEE,kBAAmB,CACnB,cAAe,CAFf,sBAGF,CAEA,aACE,qBACF,CAEA,WACE,oBACF,CAEA,YACE,kBAAmB,CACnB,eACF,CAEA,eACE,kBAAoB,CACpB,kBACF,CAEA,aAGE,kBAAoB,CACpB,SAAW,CAFX,iBAAmB,CADnB,kBAIF,CACF,CAGA,yBACE,WACE,oBACF,CAEA,YACE,iBACF,CAEA,eACE,gBACF,CACF,CAIA,iBAEE,+BAAgC,CADhC,gBAEF,CAEA,kCACE,2BACF,CAEA,4BACE,kBACF,CAEA,eAGE,aAAc,CAFd,kBAAmB,CACnB,eAAgB,CAEhB,eACF,CAEA,gCACE,aACF,CAEA,cACE,kBAAmB,CAEnB,iBAAkB,CAElB,iBAAmB,CADnB,kBAAmB,CAFnB,YAIF,CAEA,+BACE,kBACF,CAEA,gBAEE,aAAc,CADd,eAEF,CAEA,iCACE,aACF,CAEA,qBACE,aACF,CAEA,sCACE,aACF,CAEA,YACE,kBACF,CAEA,kBAIE,aAAc,CAHd,aAAc,CACd,iBAAmB,CACnB,eAAgB,CAEhB,qBACF,CAEA,mCACE,aACF,CAEA,cACE,YAAa,CAEb,cAAe,CADf,UAEF,CAEA,aACE,kBAAmB,CAGnB,wBAAyB,CADzB,iBAAkB,CADlB,cAGF,CAEA,8BACE,kBAAmB,CACnB,oBACF,CAEA,aACE,uBACF,CAEA,cACE,aACF,CAEA,cACE,aACF,CAEA,+BACE,aACF,CAEA,+BACE,aACF,CAEA,gBACE,eACF,CAEA,cAKE,kBAAmB,CACnB,iBAAkB,CALlB,aAAc,CACd,iBAAmB,CAKnB,eAAgB,CAJhB,eAAkB,CAClB,cAIF,CAEA,+BACE,kBAAmB,CACnB,aACF,CAEA,eACE,4BAA8B,CAC9B,oBACF,CAEA,oCACE,4BACF,CAEA,kBACE,4BAA8B,CAC9B,uBACF,CAEA,mCACE,4BAA8B,CAC9B,uBACF,CAEA,uCACE,4BACF,CAEA,wDACE,4BACF,CAEA,eACE,aAAc,CACd,mBAAiB,CAAjB,gBACF,CAGA,yBACE,iBACE,cACF,CAEA,eACE,cACF,CAEA,cACE,cACF,CAEA,cACE,qBACF,CAEA,2BACE,UACF,CACF,CAGA,oBAEE,eAAgB,CADhB,UAEF,CAEA,iBACE,eAAiB,CAIjB,wBAAyB,CAHzB,iBAAkB,CAElB,kBAAmB,CADnB,eAGF,CAEA,kCACE,kBAAmB,CACnB,oBACF,CAEA,eAIE,iBAAkB,CAHlB,YAAa,CAEb,QAAS,CADT,8BAGF,CAEA,YACE,WACF,CAEA,aAIE,aAAc,CAHd,aAAc,CACd,gBAAkB,CAClB,eAAgB,CAGhB,qBAAuB,CACvB,mBAAqB,CAFrB,wBAGF,CAEA,8BACE,aACF,CAEA,aAIE,kBAAmB,CAFnB,aAAc,CACd,YAAa,CAFb,kBAAoB,CAIpB,SAAW,CACX,qBACF,CAEA,8BACE,aACF,CAEA,oBAIE,oBAAqB,CAHrB,oBAAqB,CACrB,kBAAoB,CAGpB,eAAgB,CAFhB,qBAAwB,CAGxB,kBACF,CAEA,6BACE,kBAAmB,CACnB,aACF,CAEA,8CACE,kBAAmB,CACnB,aACF,CAEA,+BACE,kBAAmB,CACnB,aACF,CAEA,gDACE,kBAAmB,CACnB,aACF,CAEA,4BAKE,gBAAiB,CAFjB,iBAAmB,CACnB,WAAY,CAFZ,kBAAoB,CADpB,kBAKF,CAEA,WAIE,4BAA6B,CAF7B,eAAgB,CAChB,gBAAiB,CAFjB,UAIF,CAEA,4BACE,wBACF,CAEA,uBACE,oBACF,CAEA,yBAEE,YAAa,CACb,SAAW,CAFX,eAGF,CAEA,yBACE,eACE,yBACF,CAEA,4BAEE,sBAAuB,CADvB,UAEF,CAEA,yBACE,qBACF,CAEA,sCACE,UACF,CACF,CC3gBA,WACE,UACF,CAEA,kBACE,oBACF,CAEA,iBAGE,aAAc,CAFd,gBAAiB,CACjB,eAAgB,CAEhB,gBACF,CAEA,kCACE,aACF,CAEA,oBAEE,aAAc,CADd,iBAAmB,CAEnB,QACF,CAEA,qCACE,aACF,CAEA,YAEE,kBAAmB,CASnB,wBAA0B,CAN1B,kBAAmB,CACnB,wBAAyB,CACzB,mBAAqB,CACrB,aAAc,CAPd,YAAa,CAQb,iBAAmB,CANnB,SAAW,CAOX,kBAAmB,CANnB,mBAQF,CAEA,6BACE,kBAAmB,CACnB,oBAAqB,CACrB,aACF,CAEA,iBACE,MAAW,uBAA0B,CACrC,IAAM,0BAA6B,CACnC,IAAM,yBAA4B,CACpC,CAEA,iBACE,kBACF,CAEA,YAIE,aAAc,CAHd,aAAc,CACd,iBAAmB,CACnB,eAAgB,CAEhB,mBACF,CAEA,6BACE,aACF,CAEA,YAKE,kBAAmB,CACnB,wBAAyB,CACzB,mBAAqB,CAErB,qBAAsB,CALtB,aAAc,CADd,cAAe,CADf,mBAAqB,CAMrB,uBAAyB,CAPzB,UASF,CAEA,kBAGE,eAAiB,CADjB,oBAAqB,CAErB,wCAA6C,CAH7C,YAIF,CAEA,qBAEE,kBAAmB,CADnB,UAEF,CAEA,6BACE,kBAAmB,CACnB,oBAAqB,CACrB,aACF,CAEA,mCACE,kBAAmB,CACnB,oBACF,CAEA,kBACE,YAAa,CACb,wBAAyB,CACzB,oBACF,CAEA,WACE,eAAgB,CAChB,WAAY,CAGZ,aAAc,CACd,cAAe,CAFf,iBAAmB,CADnB,SAAU,CAIV,yBACF,CAEA,gCACE,aAAc,CACd,yBACF,CAEA,oBAEE,kBAAmB,CADnB,UAEF,CAMA,6BAHE,eAgBF,CAbA,aAUE,kBAAmB,CALnB,WAAY,CACZ,mBAAqB,CACrB,cAAe,CAEf,YAAa,CANb,cAAe,CASf,SAAW,CADX,sBAAuB,CATvB,sBAAwB,CAMxB,uBAAyB,CAPzB,UAYF,CAEA,sBAEE,kBAAmB,CADnB,UAEF,CAEA,qBACE,kDAA6D,CAE7D,0CAA+C,CAD/C,UAEF,CAEA,0CAEE,0CAA+C,CAD/C,0BAEF,CAEA,2CACE,uBACF,CAEA,uBACE,eAAiB,CAEjB,wBAAyB,CACzB,oCAAyC,CAFzC,aAGF,CAEA,4CACE,kBAAmB,CACnB,oBACF,CAEA,wCACE,kBAAmB,CAEnB,oBAAqB,CADrB,aAEF,CAEA,6DACE,kBAAmB,CACnB,oBACF,CAEA,cAOE,kCAAoC,CAFpC,mCAAuB,CACvB,iBAAkB,CADlB,qBAAuB,CAJvB,oBAAqB,CAErB,WAAY,CADZ,UAMF,CAEA,gBACE,GAAK,uBAA2B,CAClC,CAEA,cAEE,kBAAmB,CAKnB,aAAc,CANd,YAAa,CAKb,iBAAmB,CAFnB,SAAW,CADX,sBAAuB,CAEvB,iBAGF,CAEA,+BACE,aACF,CAEA,uBACE,YAAa,CACb,qBAAsB,CACtB,UAAY,CACZ,iBACF,CAEA,sBAYE,kBAAmB,CAPnB,eAAiB,CAEjB,wBAAyB,CACzB,mBAAqB,CAFrB,aAAc,CAGd,cAAe,CAEf,YAAa,CARb,kBAAoB,CACpB,eAAgB,CAUhB,UAAY,CADZ,sBAAuB,CAXvB,sBAAwB,CAQxB,uBAAyB,CATzB,UAcF,CAEA,2CACE,kBAAmB,CACnB,oBAAqB,CAErB,qCAA0C,CAD1C,0BAEF,CAEA,+BAEE,kBAAmB,CADnB,UAEF,CAEA,uCACE,kBAAmB,CAEnB,oBAAqB,CADrB,aAEF,CAEA,4DACE,kBAAmB,CACnB,oBACF,CAEA,iBAEE,kBAAmB,CAGnB,aAAc,CAJd,YAAa,CAKb,iBAAmB,CAFnB,eAAgB,CADhB,iBAIF,CAEA,+CAIE,+BAAgC,CAFhC,UAAW,CACX,MAEF,CAEA,sBACE,cACF,CAEA,iFAEE,oBACF,CAGA,yBACE,kBACE,kBACF,CAEA,iBACE,kBAAmB,CACnB,qBACF,CAMA,gCAHE,kBAOF,CAJA,YACE,uBAGF,CAEA,6BAHE,qBAKF,CAEA,YACE,kBAAoB,CACpB,qBACF,CAEA,YAEE,kBAAoB,CADpB,uBAEF,CAEA,kBACE,kBACF,CAEA,WACE,kBACF,CAEA,mCAGE,iBAAmB,CADnB,mBAEF,CAEA,cAEE,kBAAoB,CADpB,eAEF,CAEA,uBACE,WAAa,CACb,eACF,CAEA,iBAEE,kBAAoB,CADpB,aAEF,CAEA,sBACE,gBACF,CACF,CAGA,yBACE,iBACE,cACF,CAEA,YAEE,iBAAmB,CADnB,oBAEF,CAEA,mCAGE,kBAAoB,CADpB,uBAEF,CACF,CC3XA,qBACE,YAAa,CACb,OAAQ,CACR,sBACF,CAEA,eAQE,qBAAyB,CAFzB,wBAAyB,CACzB,iBAAkB,CAElB,aAAc,CANd,cAAe,CACf,eAAgB,CAFhB,WAAY,CASZ,YAAa,CANb,iBAAkB,CAKlB,uBAAyB,CATzB,UAWF,CAEA,qBACE,oBAAqB,CACrB,wCACF,CAEA,wBACE,wBAAyB,CACzB,kBAAmB,CACnB,UACF,CAGA,gCACE,wBAAyB,CACzB,oBAAqB,CACrB,aACF,CAEA,sCACE,oBAAqB,CACrB,wCACF,CAEA,yCACE,wBACF,CAGA,yBACE,eAGE,cAAe,CADf,WAAY,CADZ,UAGF,CAEA,qBACE,OACF,CACF,CAGA,yBACE,eAGE,cAAe,CADf,WAAY,CADZ,UAGF,CAEA,qBACE,OACF,CACF,CCtEA,MACC,iCAAkC,CAClC,8CAA+C,CAC/C,+CAAgD,CAChD,4CAA6C,CAC7C,0CAA2C,CAC3C,oFAAqF,CACrF,8CAA+C,CAC/C,2CAA4C,CAC5C,iDAAkD,CAClD,0EAA2E,CAC3E,sDAAuD,CACvD,uCAAwC,CACxC,kCAAmC,CACnC,uCAAwC,CACxC,kDAAoD,CACpD,yEAA0E,CAC1E,+DACD,CAEA,YAGC,kBAAmB,CADnB,YAED,CAEA,iBAEC,MAAO,CAGP,WACD,CAEA,uBAEC,0CAA2C,CAD3C,wFAED,CAEA,+BACC,yCACD,CAEA,+BAKC,sEAAuE,CAKvE,gMAED,CAEA,0BAGC,aAAc,CAId,WAAY,CADZ,UAED,CAEA,kCACC,uDACD,CAEA,kCACC,uDACD,CAIA,mBAIC,kBAAmB,CAFnB,kBAAmB,CACnB,YAAa,CAEb,uDAAwD,CAJxD,iBAKD,CAEA,yBAOC,QAAS,CAET,cAAe,CALf,WAAY,CADZ,MAAO,CAKP,SAAU,CAPV,iBAAkB,CAClB,KAAM,CAGN,UAAW,CACX,SAID,CAEA,sEAEC,cACD,CAEA,8BASC,mEAAoE,CAFpE,sDAAuD,CAGvD,mBAAoB,CACpB,kEAAmE,CALnE,kBAAmB,CAEnB,kBAAmB,CANnB,UAAW,CADX,aAAc,CAGd,gDAAiD,CACjD,0DAA2D,CAQ3D,mDAAoD,CADpD,uDAAwD,CATxD,+CAWD,CAEA,oFAEC,sDAAuD,CADvD,SAED,CAEA,8DACC,8MAED,CAEA,wFAEC,sDAAuD,CADvD,SAED,CCpIA,qBACE,UACF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAEb,UACF,CAEA,sCAOE,qBAAyB,CAFzB,wBAAyB,CACzB,mBAAqB,CAErB,aAAc,CAPd,MAAO,CASP,mBAAoB,CANpB,kBAAoB,CADpB,cAAgB,CAMhB,kBAAoB,CAPpB,UASF,CAEA,4CAEE,oBAAqB,CACrB,wCAA6C,CAF7C,YAGF,CAEA,+CACE,wBAAyB,CACzB,kBAAmB,CACnB,UACF,CAEA,wCAKE,qBAAyB,CAFzB,wBAAyB,CACzB,mBAAqB,CAErB,cAAe,CALf,kBAAoB,CACpB,aAAe,CAKf,kBACF,CAEA,8CACE,wBAAyB,CACzB,oBACF,CAEA,8CAIE,qBAAyB,CAFzB,wBAAyB,CACzB,mBAAqB,CAErB,cAAe,CACf,kBAAoB,CALpB,aAMF,CAEA,4CAGE,mCAAwC,CADxC,WAAY,CADZ,UAGF,CAEA,mDAEE,YAAc,CACd,iBAAmB,CACnB,UAAY,CAHZ,WAIF,CAGA,uDACE,wBAAyB,CACzB,oBAAqB,CACrB,aACF,CAEA,6DACE,oBAAqB,CACrB,wCACF,CAEA,gEACE,wBACF,CAEA,yDACE,wBAAyB,CACzB,oBACF,CAEA,+DACE,wBAAyB,CACzB,oBACF,CAEA,+DACE,wBAAyB,CACzB,oBAAqB,CACrB,aACF,CAGA,yBACE,sCAEE,kBAAoB,CADpB,sBAEF,CAEA,wCAEE,oBAAsB,CADtB,eAEF,CAEA,4CAEE,WAAY,CADZ,UAEF,CACF,CAGA,yBACE,sCAEE,iBAAmB,CADnB,qBAEF,CAEA,wCACE,gBACF,CAEA,4CAEE,WAAY,CADZ,UAEF,CACF","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 */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: block;\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: 2.5rem;\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: 2rem;\r\n}\r\n\r\n.auth-logo {\r\n display: inline-flex;\r\n margin-bottom: 1rem;\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: 1.5rem;\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: 1rem;\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: 1.5rem;\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: 1.5rem;\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.75rem;\r\n margin-top: 1.5rem;\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: 1.5rem 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"]}
|
|
1
|
+
{"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 */\r\n.auth-minimal {\r\n min-height: auto;\r\n display: block;\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"]}
|