/**
 * Modern Login Popup Plugin - Styles
 * Version: 1.0.0
 */
 
/* CSS Variables */
:root {
--frb-primary: #007AFF;
--frb-primary-hover: #0051D5;
--frb-secondary: #34C759;
--frb-error: #FF3B30;
--frb-warning: #FF9500;
--frb-surface: rgba(255, 255, 255, 0.95);
--frb-surface-solid: #FFFFFF;
--frb-background: #F2F2F7;
--frb-text-primary: #1D1D1F;
--frb-text-secondary: #86868B;
--frb-text-muted: #C7C7CC;
--frb-border: rgba(0, 0, 0, 0.1);
--frb-border-light: rgba(0, 0, 0, 0.05);
--frb-radius-small: 8px;
--frb-radius-medium: 12px;
--frb-radius-large: 20px;
--frb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--frb-shadow-md: 0 8px 25px rgba(0, 0, 0, 0.12);
--frb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
}
 
/* Login Button */
.frb-login-button {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: var(--frb-primary) !important;
color: white !important;
padding: 10px 16px !important;
border-radius: var(--frb-radius-medium) !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 15px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: var(--frb-shadow-sm) !important;
border: none !important;
cursor: pointer !important;
}
 
.frb-login-button:hover {
background: var(--frb-primary-hover) !important;
transform: translateY(-2px) !important;
box-shadow: var(--frb-shadow-md) !important;
color: white !important;
text-decoration: none !important;
}
 
.frb-login-button svg {
transition: transform 0.3s ease !important;
}
 
.frb-login-button:hover svg {
transform: translateX(2px) !important;
}
 
/* Account Container */
.frb-account-container {
position: relative !important;
display: inline-block !important;
}
 
/* Account Trigger */
.frb-account-trigger {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: var(--frb-surface) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid var(--frb-border) !important;
border-radius: var(--frb-radius-medium) !important;
    padding: 10px 16px;
	cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: var(--frb-shadow-sm) !important;
}
 
.frb-account-trigger:hover {
background: var(--frb-surface-solid) !important;
transform: translateY(-2px) !important;
box-shadow: var(--frb-shadow-md) !important;
}
 
.frb-account-trigger.active {
background: var(--frb-surface-solid) !important;
box-shadow: var(--frb-shadow-lg) !important;
}
 
/* User Avatar */
.frb-user-avatar {
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--frb-background) !important;
}
 
.frb-user-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
 
.frb-avatar-placeholder {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--frb-primary) !important;
color: white !important;
font-weight: 600 !important;
font-size: 14px !important;
}
 
.frb-user-name {
font-weight: 600 !important;
color: var(--frb-text-primary) !important;
font-size: 14px !important;
}
 
.frb-dropdown-arrow {
color: var(--frb-text-secondary) !important;
transition: transform 0.3s ease !important;
}
 
.frb-account-trigger.active .frb-dropdown-arrow {
transform: rotate(180deg) !important;
}
 
/* Account Dropdown */
.frb-account-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
margin-top: 8px !important;
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: var(--frb-radius-large) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
min-width: 280px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) scale(0.95) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 1000 !important;
overflow: hidden !important;
}
 
.frb-account-container.active .frb-account-dropdown {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
}

/* iOS Safari Backdrop Support */
@supports (-webkit-backdrop-filter: none) {
.frb-account-dropdown {
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
}
 
/* Dropdown Arrow */
.frb-account-dropdown::before {
content: '' !important;
position: absolute !important;
top: -6px !important;
right: 20px !important;
width: 12px !important;
height: 12px !important;
background: var(--frb-surface) !important;
transform: rotate(45deg) !important;
border-top: 1px solid var(--frb-border) !important;
border-left: 1px solid var(--frb-border) !important;
}
 
/* Dropdown Header */
.frb-dropdown-header {
padding: 20px !important;
border-bottom: 1px solid var(--frb-border-light) !important;
}
 
.frb-dropdown-header .frb-greeting {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--frb-text-primary) !important;
margin-bottom: 8px !important;
}
 
.frb-dropdown-header .frb-user-credits {
display: flex !important;
align-items: center !important;
gap: 6px !important;
color: var(--frb-text-secondary) !important;
font-size: 14px !important;
}
 
.frb-dropdown-header .frb-user-credits svg {
color: var(--frb-primary) !important;
}
 
/* Dropdown Navigation */
.frb-dropdown-nav {
}
 
.frb-dropdown-nav .frb-nav-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 20px !important;
color: var(--frb-text-primary) !important;
text-decoration: none !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
 
.frb-dropdown-nav .frb-nav-item:hover {
background: var(--frb-background) !important;
color: var(--frb-primary) !important;
}
 
.frb-dropdown-nav .frb-nav-item.active-dashboard {
background: var(--frb-background) !important;
color: var(--frb-primary) !important;
font-weight: 600 !important;
}
 
.frb-dropdown-nav .frb-nav-item svg {
color: var(--frb-text-secondary) !important;
transition: color 0.2s ease !important;
}
 
.frb-dropdown-nav .frb-nav-item:hover svg,
.frb-dropdown-nav .frb-nav-item.active-dashboard svg {
color: var(--frb-primary) !important;
}
 
/* Dropdown Footer */
.frb-dropdown-footer {
border-top: 1px solid var(--frb-border-light) !important;
}
 
.frb-dropdown-footer .frb-logout-link {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 20px !important;
color: var(--frb-error) !important;
text-decoration: none !important;
font-size: 14px !important;
transition: all 0.2s ease !important;
}
 
.frb-dropdown-footer .frb-logout-link:hover {
background: rgba(255, 59, 48, 0.1) !important;
}
 
/* Login Overlay */
.frb-login-overlay {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
z-index: 9999 !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
}
 
.frb-login-overlay.show {
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
}
 
/* Login Container */
.frb-login-container {
width: 100% !important;
max-width: 480px !important;
margin: 20px !important;
}
 
/* Login Content - Base */
.frb-login-content {
background: var(--frb-surface) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid var(--frb-border) !important;
border-radius: var(--frb-radius-large) !important;
box-shadow: var(--frb-shadow-lg) !important;
overflow: hidden !important;
position: relative !important;
}

/* Desktop Animation */
@media (min-width: 641px) {
.frb-login-content {
transform: scale(0.95) translateY(20px) !important;
opacity: 0 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.frb-login-overlay.show .frb-login-content {
transform: scale(1) translateY(0) !important;
opacity: 1 !important;
}
}

/* Mobile Animation */
@media (max-width: 640px) {
.frb-login-content {
border-radius: var(--frb-radius-large) var(--frb-radius-large) 0 0 !important;
width: 100% !important;
max-height: 90vh !important;
overflow-y: auto !important;
transform: translateY(100%) !important;
opacity: 1 !important;
transition: none !important;
}

.frb-login-overlay.show .frb-login-content {
animation: slideUpMobile 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transform: translateY(0) !important;
}

.frb-login-overlay.closing .frb-login-content {
animation: slideDownMobile 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}
}
 
/* Close Button - Improved */
.frb-login-close {
position: absolute !important;
top: 80px !important;
right: 16px !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 0, 0, 0.05) !important;
border: none !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 100 !important;
color: var(--frb-text-secondary) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
 
.frb-login-close:hover {
background: var(--frb-error) !important;
color: white !important;
transform: rotate(90deg) scale(1.1) !important;
box-shadow: var(--frb-shadow-sm) !important;
}
 
.frb-login-close svg {
width: 13px !important;
height: 13px !important;
stroke-width: 2.5 !important;
flex-shrink: 0;
}
 
/* Login Tabs */
.frb-login-tabs {
display: flex !important;
border-bottom: 1px solid var(--frb-border-light) !important;
background: var(--frb-background) !important;
}
 
.frb-login-tabs .frb-login-tab {
flex: 1 !important;
padding: 16px !important;
background: none !important;
border: none !important;
border-bottom: 2px solid transparent !important;
color: var(--frb-text-secondary) !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
 
.frb-login-tabs .frb-login-tab:hover {
color: var(--frb-text-primary) !important;
background: transparent !important;
}
 
.frb-login-tabs .frb-login-tab.active {
color: var(--frb-primary) !important;
border-bottom-color: var(--frb-primary) !important;
}
 
/* Form Panels */
.frb-forms-container {
position: relative !important;
}
 
.frb-forms-container .frb-form-panel {
display: none !important;
padding: 40px !important;
opacity: 0 !important;
transform: translateX(20px) !important;
transition: all 0.3s ease !important;
background: white !important;
}
 
.frb-forms-container .frb-form-panel.active {
display: block !important;
opacity: 1 !important;
transform: translateX(0) !important;
}
 
/* Form Header */
.frb-form-panel .frb-form-header {
text-align: center !important;
margin-bottom: 32px !important;
}
 
.frb-form-panel .frb-form-header h2 {
color: var(--frb-text-primary) !important;
font-size: 24px !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
}
 
.frb-form-panel .frb-form-header p {
color: var(--frb-text-secondary) !important;
font-size: 16px !important;
margin: 0 !important;
}
 
/* Form Groups */
.frb-form-panel .frb-form-group {
margin-bottom: 24px !important;
}
 
.frb-form-panel .frb-form-group label {
display: block !important;
margin-bottom: 8px !important;
color: var(--frb-text-primary) !important;
font-weight: 500 !important;
font-size: 14px !important;
}
 
.frb-form-panel .frb-form-group input[type="text"],
.frb-form-panel .frb-form-group input[type="email"],
.frb-form-panel .frb-form-group input[type="password"] {
width: 100% !important;
padding: 12px 16px !important;
border: 1px solid var(--frb-border) !important;
border-radius: var(--frb-radius-medium) !important;
font-size: 16px !important;
transition: all 0.3s ease !important;
background: white !important;
color: var(--frb-text-primary) !important;
font-family: inherit !important;
box-sizing: border-box !important;
}
 
.frb-form-panel .frb-form-group input[type="text"]:focus,
.frb-form-panel .frb-form-group input[type="email"]:focus,
.frb-form-panel .frb-form-group input[type="password"]:focus {
outline: none !important;
border-color: var(--frb-primary) !important;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
background: white !important;
}
 
/* Password Field */
.frb-form-panel .frb-password-field {
position: relative !important;
}
 
.frb-form-panel .frb-password-field input {
padding-right: 48px !important;
}
 
.frb-form-panel .frb-toggle-password {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
color: var(--frb-text-secondary) !important;
cursor: pointer !important;
padding: 4px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
}
 
.frb-form-panel .frb-toggle-password:hover {
color: var(--frb-text-primary) !important;
background: var(--frb-background) !important;
}
 
/* Password Strength */
.frb-form-panel .frb-password-strength {
margin-top: 8px !important;
height: 4px !important;
background: var(--frb-border-light) !important;
border-radius: 2px !important;
overflow: hidden !important;
}
 
.frb-form-panel .frb-strength-bar {
height: 100% !important;
width: 0% !important;
transition: all 0.3s ease !important;
border-radius: 2px !important;
}
 
.frb-form-panel .frb-strength-bar.weak {
width: 25% !important;
background: var(--frb-error) !important;
}
 
.frb-form-panel .frb-strength-bar.medium {
width: 50% !important;
background: var(--frb-warning) !important;
}
 
.frb-form-panel .frb-strength-bar.strong {
width: 75% !important;
background: var(--frb-secondary) !important;
}
 
.frb-form-panel .frb-strength-bar.very-strong {
width: 100% !important;
background: var(--frb-secondary) !important;
}
 
/* Form Elements */
.frb-form-panel .frb-form-hint {
font-size: 13px !important;
color: var(--frb-text-secondary) !important;
margin-top: 4px !important;
}
 
.frb-form-panel .frb-form-error {
font-size: 13px !important;
color: var(--frb-error) !important;
margin-top: 4px !important;
min-height: 0 !important;
transition: all 0.2s ease !important;
}
 
.frb-form-panel .frb-form-error:not(:empty) {
min-height: 20px !important;
}
 
/* Buttons */
.frb-form-panel .frb-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 24px !important;
border: none !important;
border-radius: var(--frb-radius-medium) !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-decoration: none !important;
min-height: 48px !important;
font-family: inherit !important;
}
 
.frb-form-panel .frb-btn-primary {
background: var(--frb-primary) !important;
color: white !important;
}
 
.frb-form-panel .frb-btn-primary:hover {
background: var(--frb-primary-hover) !important;
transform: translateY(-2px) !important;
box-shadow: var(--frb-shadow-md) !important;
}
 
.frb-form-panel .frb-btn-primary:active {
transform: translateY(0) !important;
}
 
.frb-form-panel .frb-btn-primary:disabled {
background: var(--frb-border) !important;
cursor: not-allowed !important;
transform: none !important;
}
 
.frb-form-panel .frb-btn-full {
width: 100% !important;
}
 
/* Form Footer */
.frb-form-panel .frb-form-footer {
text-align: center !important;
margin-top: 16px !important;
}
 
.frb-form-panel .frb-form-link {
color: var(--frb-primary) !important;
text-decoration: none !important;
font-size: 14px !important;
transition: color 0.2s ease !important;
}
 
.frb-form-panel .frb-form-link:hover {
color: var(--frb-primary-hover) !important;
text-decoration: underline !important;
}
 
/* Form Divider */
.frb-form-panel .frb-form-divider {
position: relative !important;
text-align: center !important;
margin: 24px 0 !important;
}
 
.frb-form-panel .frb-form-divider::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: var(--frb-border-light) !important;
}
 
.frb-form-panel .frb-form-divider span {
position: relative !important;
background: white !important;
padding: 0 16px !important;
color: var(--frb-text-secondary) !important;
font-size: 14px !important;
}
 
/* Form Switch */
.frb-form-panel .frb-form-switch {
text-align: center !important;
margin-top: 24px !important;
color: var(--frb-text-secondary) !important;
font-size: 14px !important;
}
 
.frb-form-panel .frb-form-switch p {
margin: 0 !important;
}
 
.frb-form-panel .frb-switch-link {
color: var(--frb-primary) !important;
text-decoration: none !important;
font-weight: 600 !important;
transition: color 0.2s ease !important;
}
 
.frb-form-panel .frb-switch-link:hover {
color: var(--frb-primary-hover) !important;
text-decoration: underline !important;
}
 
/* Info Box */
.frb-form-panel .frb-info-box {
background: var(--frb-background) !important;
border-radius: var(--frb-radius-medium) !important;
padding: 16px !important;
margin-top: 24px !important;
display: flex !important;
gap: 12px !important;
}
 
.frb-form-panel .frb-info-box svg {
flex-shrink: 0 !important;
color: var(--frb-primary) !important;
}
 
.frb-form-panel .frb-info-box p {
color: var(--frb-text-secondary) !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin: 0 !important;
}
 
/* Confirm Content */
.frb-form-panel .frb-confirm-content {
text-align: center !important;
padding: 20px 0 !important;
}
 
.frb-form-panel .frb-confirm-icon {
margin-bottom: 24px !important;
}
 
.frb-form-panel .frb-confirm-icon svg {
color: var(--frb-secondary) !important;
}
 
.frb-form-panel .frb-confirm-content h2 {
color: var(--frb-text-primary) !important;
margin-bottom: 16px !important;
}
 
.frb-form-panel .frb-confirm-content p {
color: var(--frb-text-secondary) !important;
margin-bottom: 12px !important;
line-height: 1.5 !important;
}
 
.frb-form-panel .frb-text-muted {
color: var(--frb-text-muted) !important;
font-size: 14px !important;
}
 
/* Loading States */
.frb-form-panel .frb-btn.loading {
position: relative !important;
color: transparent !important;
}
 
.frb-form-panel .frb-btn.loading::after {
content: '' !important;
position: absolute !important;
width: 16px !important;
height: 16px !important;
top: 50% !important;
left: 50% !important;
margin: -8px 0 0 -8px !important;
border: 2px solid white !important;
border-top-color: transparent !important;
border-radius: 50% !important;
animation: frb-spin 0.8s linear infinite !important;
}
 
@keyframes frb-spin {
to { transform: rotate(360deg); }
}
 
/* Form Validation States */
.frb-form-panel .frb-form-group.error input {
border-color: var(--frb-error) !important;
}
 
.frb-form-panel .frb-form-group.success input {
border-color: var(--frb-secondary) !important;
}
 
/* Responsive */

@media (max-width: 640px) {
/* Mobile: Nur Avatar und Chevron anzeigen */
.frb-user-name,
.frb-hide-mobile {
display: none !important;
}

.frb-account-trigger {
padding: 6px !important;
gap: 4px !important;
}

.frb-dropdown-arrow {
margin-left: 4px !important;
}

.frb-login-container {
margin: 0 !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: flex-end !important;
}
 
.frb-forms-container .frb-form-panel {
padding: 30px 20px !important;
}
 
.frb-login-tabs .frb-login-tab {
font-size: 13px !important;
padding: 12px 5px !important;
}
 
.frb-form-panel .frb-form-header h2 {
font-size: 20px !important;
}

.frb-account-dropdown {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
border-radius: var(--frb-radius-large) var(--frb-radius-large) 0 0 !important;
width: 100% !important;
}

.frb-account-dropdown::before {
display: none !important;
}

.frb-login-close {
top: 50px !important;
right: 12px !important;
}

/* Mobile: Login Button kompakter */
.frb-login-button {
padding: 8px 12px !important;
font-size: 14px !important;
}

.frb-login-button svg {
width: 18px !important;
height: 18px !important;
}
}
 
/* Form slide animations - Für alle Geräte */
@keyframes slideInRight {
from {
transform: translateX(100%) !important;
opacity: 0 !important;
}
to {
transform: translateX(0) !important;
opacity: 1 !important;
}
}
 
@keyframes slideOutLeft {
from {
transform: translateX(0) !important;
opacity: 1 !important;
}
to {
transform: translateX(-100%) !important;
opacity: 0 !important;
}
}
 
@keyframes slideInLeft {
from {
transform: translateX(-100%) !important;
opacity: 0 !important;
}
to {
transform: translateX(0) !important;
opacity: 1 !important;
}
}
 
@keyframes slideOutRight {
from {
transform: translateX(0) !important;
opacity: 1 !important;
}
to {
transform: translateX(100%) !important;
opacity: 0 !important;
}
}
 
/* Form animation classes - Verstärkte Selektoren */
.frb-login-overlay .frb-forms-container .frb-form-panel.slide-in-right {
animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transform: translateX(0) !important;
opacity: 1 !important;
}
 
.frb-login-overlay .frb-forms-container .frb-form-panel.slide-out-left {
animation: slideOutLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transform: translateX(-100%) !important;
opacity: 0 !important;
}
 
.frb-login-overlay .frb-forms-container .frb-form-panel.slide-in-left {
animation: slideInLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transform: translateX(0) !important;
opacity: 1 !important;
}
 
.frb-login-overlay .frb-forms-container .frb-form-panel.slide-out-right {
animation: slideOutRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
transform: translateX(100%) !important;
opacity: 0 !important;
}

/* Debug: Formular-Container overflow verstecken */
.frb-forms-container {
position: relative !important;
overflow: hidden !important;
width: 100% !important;
}

/* Mobile slide animations */
@keyframes slideUpMobile {
from { 
transform: translateY(100%) !important;
opacity: 1 !important;
}
to { 
transform: translateY(0) !important;
opacity: 1 !important;
}
}
 
@keyframes slideDownMobile {
from { 
transform: translateY(0) !important;
opacity: 1 !important;
}
to { 
transform: translateY(100%) !important;
opacity: 1 !important;
}
}

/* Desktop slide animations bleiben unverändert */
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
 
@keyframes slideDown {
from { transform: translateY(0); }
to { transform: translateY(100%); }