/* ====================================================================
   Modern Mobile Theme - Glassmorphic Design for jQuery Mobile
   Created: 2026-01-31
   Purpose: Shared styles for Mobile area login pages
   ==================================================================== */

/* Modern Mobile Form Styles
   ================================================================== */

.modern-mobile-form {
    margin-top: 5px;
    background: rgba(40, 40, 60, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* jQuery Mobile Input Overrides - Dark backgrounds with white text
   ================================================================== */

.ui-input-text input,
.ui-input-text textarea,
.modern-mobile-input,
.modern-mobile-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override specific jQuery Mobile classes */
.ui-input-text.ui-body-inherit,
.ui-input-text.ui-shadow-inset,
.ui-input-text.ui-corner-all {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

.ui-input-text.ui-body-inherit input,
.ui-input-text.ui-shadow-inset input,
.ui-input-text.ui-corner-all input {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Prevent browser autocomplete from changing background */
.ui-input-text input:-webkit-autofill,
.ui-input-text input:-webkit-autofill:hover,
.ui-input-text input:-webkit-autofill:focus,
.ui-input-text input:-webkit-autofill:active,
.modern-mobile-input:-webkit-autofill,
.modern-mobile-input:-webkit-autofill:hover,
.modern-mobile-input:-webkit-autofill:focus,
.modern-mobile-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.3) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.3) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.ui-input-text input:focus,
.ui-input-text textarea:focus,
.modern-mobile-input:focus,
.modern-mobile-select:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    outline: none !important;
}

.ui-input-text input::placeholder,
.ui-input-text textarea::placeholder,
.modern-mobile-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Label Styles
   ================================================================== */

.modern-mobile-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}

/* Button Styles
   ================================================================== */

.modern-mobile-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    height: 56px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4) !important;
    text-shadow: none !important;
}

.modern-mobile-btn-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    height: 56px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4) !important;
    text-shadow: none !important;
}

/* Error Alert Styles
   ================================================================== */

.modern-mobile-error {
    background: linear-gradient(135deg, rgba(220, 75, 75, 0.15) 0%, rgba(200, 50, 50, 0.1) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 75, 75, 0.3) !important;
    border-left: 4px solid rgba(220, 75, 75, 0.8) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 16px !important;
    color: #ffffff !important;
}