/* ==========================================================================
   Custom Form Components - Shared Styles
   Replaces Radzen form fields with dark mode support
========================================================================== */

/* Form Group Container */
.custom-form-group {
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Form Labels */
.custom-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    transition: color 0.2s ease;
}

/* Text Inputs */
.custom-form-input {
    width: 100%;
    height: 54px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #333;
    transition: all 0.2s ease;
    font-family: inherit;
}

.custom-form-input:focus {
    outline: none;
    border-color: #00b4ff;
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.1);
}

.custom-form-input::placeholder {
    color: #9ca3af;
}

.custom-form-input:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Text Areas */
.custom-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #333;
    transition: all 0.2s ease;
    font-family: inherit;
    resize: vertical;
}

.custom-form-textarea:focus {
    outline: none;
    border-color: #00b4ff;
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.1);
}

.custom-form-textarea::placeholder {
    color: #9ca3af;
}

.custom-form-textarea:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Password Input Wrapper */
.custom-password-wrapper {
    position: relative;
  width: 100%;
}

.custom-password-wrapper .custom-form-input {
    padding-right: 3rem; /* Make room for toggle button */
}

/* Password Toggle Button */
.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
 top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.password-toggle-btn:hover {
    color: #00b4ff;
}

.password-toggle-btn:focus {
    outline: 2px solid #00b4ff;
    outline-offset: 2px;
}

.password-toggle-btn .material-icons {
    font-size: 1.25rem;
}

/* ==========================================================================
   Dark Mode Styles
   ========================================================================== */

body.dark-mode .custom-form-label {
    color: var(--text-color, #e0e0e0);
}

body.dark-mode .custom-form-input,
body.dark-mode .custom-form-textarea {
    background: var(--input-bg, #1f1f1f);
    border-color: var(--border-color, #404040);
    color: var(--text-color, #e0e0e0);
}

body.dark-mode .custom-form-input:focus,
body.dark-mode .custom-form-textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode .custom-form-input::placeholder,
body.dark-mode .custom-form-textarea::placeholder {
    color: #6b7280;
}

body.dark-mode .custom-form-input:disabled,
body.dark-mode .custom-form-textarea:disabled {
    background-color: #2d2d2d;
    color: #6b7280;
}

body.dark-mode .password-toggle-btn {
    color: #9ca3af;
}

body.dark-mode .password-toggle-btn:hover {
    color: #60a5fa;
}

/* ==========================================================================
   Validation States
   ========================================================================== */

.custom-form-input.invalid,
.custom-form-textarea.invalid {
    border-color: #ef4444;
}

.custom-form-input.invalid:focus,
.custom-form-textarea.invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.custom-form-input.valid,
.custom-form-textarea.valid {
    border-color: #10b981;
}

.custom-form-input.valid:focus,
.custom-form-textarea.valid:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .custom-form-group {
      margin-bottom: 1.25rem;
    }

    .custom-form-input,
    .custom-form-textarea {
        font-size: 0.9375rem; /* 15px - prevents iOS zoom */
    }

    .custom-form-label {
   font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .custom-form-input {
        height: 48px;
        padding: 0.625rem 0.875rem;
    }

    .custom-form-textarea {
        min-height: 100px;
        padding: 0.625rem 0.875rem;
    }

    .password-toggle-btn {
        right: 0.375rem;
        padding: 0.375rem;
    }

    .password-toggle-btn .material-icons {
  font-size: 1.125rem;
    }
}

/* Payment form specific input styling */
.custom-form-input.payment-input {
    height: 44px;
 background: white;
}

body.dark-mode .custom-form-input.payment-input {
    background: var(--input-bg, #1f1f1f);
}

/* Fix Radzen floating labels in payment forms for dark mode */
.payment-form-container .rz-formfield {
    margin-bottom: 0.75rem;
}

/* Light mode - ensure white background for floating labels */
.payment-form-container .rz-formfield > label,
.payment-form-container .rz-formfield label.rz-floating-label {
    background: white !important;
    padding: 0 0.25rem;
    z-index: 1;
}

/* Dark mode - CRITICAL FIX for floating label backgrounds */
body.dark-mode .payment-form-container {
    background: rgba(30, 30, 30, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .payment-form-container .rz-formfield > label,
body.dark-mode .payment-form-container .rz-formfield label.rz-floating-label,
body.dark-mode .payment-form-container .rz-formfield .rz-floating-label {
    background: #1f1f1f !important;
    color: #e0e0e0 !important;
    padding: 0 0.25rem;
    z-index: 1;
}

/* Dark mode - fix input/mask backgrounds and text */
body.dark-mode .payment-form-container .rz-mask,
body.dark-mode .payment-form-container .rz-textbox,
body.dark-mode .payment-form-container input[type="text"],
body.dark-mode .payment-form-container input.rz-inputtext {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Dark mode - placeholder text */
body.dark-mode .payment-form-container .rz-mask::placeholder,
body.dark-mode .payment-form-container .rz-textbox::placeholder,
body.dark-mode .payment-form-container input::placeholder {
    color: #888 !important;
}

/* Dark mode - focus states */
body.dark-mode .payment-form-container .rz-mask:focus,
body.dark-mode .payment-form-container .rz-textbox:focus,
body.dark-mode .payment-form-container input:focus {
    border-color: #00b4ff !important;
    background: #333 !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2) !important;
}

/* Dark mode - floating label when input has focus or value (raised state) */
body.dark-mode .payment-form-container .rz-formfield.rz-has-value > label,
body.dark-mode .payment-form-container .rz-formfield:focus-within > label {
    background: #1f1f1f !important;
    color: #e0e0e0 !important;
}

/* Dark mode - ensure label background covers the border line */
body.dark-mode .payment-form-container .rz-formfield > label::before,
body.dark-mode .payment-form-container .rz-formfield > label::after {
    background: #1f1f1f !important;
}

/* Dark mode - payment section headers */
body.dark-mode .payment-form-container h6,
body.dark-mode .payment-form-container .rz-text-h6 {
    color: #e0e0e0 !important;
}

/* Dark mode - payment icons */
body.dark-mode .payment-form-container .rz-icon {
    color: #00b4ff !important;
}

/* Dark mode - payment security section */
body.dark-mode .payment-security-section {
    background: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
}

/* Dark mode - section dividers */
body.dark-mode .payment-form-container > div[style*="border-bottom"] {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode - validation error messages */
body.dark-mode .payment-form-container .rz-text-caption[style*="color: red"] {
    color: #ff6b6b !important;
}

/* ==========================================================================
   Dark Mode Fixes for .form-floating (PaymentForm.razor and other forms)
   ========================================================================== */

/* Light mode - ensure white background for floating labels */
.form-floating label {
    background: white !important;
    padding: 0 0.25rem;
}

/* Dark mode - fix floating label backgrounds in .form-floating */
body.dark-mode .form-floating {
    background: transparent;
}

body.dark-mode .form-floating label {
    background: #1f1f1f !important;
    color: #e0e0e0 !important;
 padding: 0 0.25rem;
    z-index: 1;
}

body.dark-mode .form-floating .form-control,
body.dark-mode .form-floating .rz-mask,
body.dark-mode .form-floating .rz-textbox,
body.dark-mode .form-floating input {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .form-floating .form-control::placeholder,
body.dark-mode .form-floating .rz-mask::placeholder,
body.dark-mode .form-floating input::placeholder {
    color: #888 !important;
}

body.dark-mode .form-floating .form-control:focus,
body.dark-mode .form-floating .rz-mask:focus,
body.dark-mode .form-floating input:focus {
    border-color: #00b4ff !important;
    background: #333 !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.2) !important;
}

/* Dark mode - floating label when input has focus or value */
body.dark-mode .form-floating:focus-within label,
body.dark-mode .form-floating:has(.form-control:not(:placeholder-shown)) label,
body.dark-mode .form-floating:has(input:not(:placeholder-shown)) label {
    background: #1f1f1f !important;
    color: #e0e0e0 !important;
}