/**
 * Payment Modal CSS Fix
 * Ensures proper contrast and consistent dark theme across all payment modals
 */

/* Override any existing modal styles for payment modals */
.course-modal,
.clubbercise-modal,
.modal,
#course-booking-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

/* Modal content with consistent dark theme */
.course-modal .modal-content,
.clubbercise-modal .modal-content,
.modal .modal-content,
#course-booking-modal .modal-content {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

/* Modal headers */
.course-modal .modal-content h2,
.course-modal .modal-content h3,
.clubbercise-modal .modal-content h2,
.clubbercise-modal .modal-content h3,
.modal .modal-content h2,
.modal .modal-content h3,
#course-booking-modal h2,
#course-booking-modal h3 {
    color: #ffffff !important;
    background: transparent !important;
    margin-bottom: 20px !important;
}

/* Close buttons */
.course-modal .close,
.clubbercise-modal .close,
.modal .close,
.modal-close,
#course-booking-modal .close {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.course-modal .close:hover,
.clubbercise-modal .close:hover,
.modal .close:hover,
.modal-close:hover,
#course-booking-modal .close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* Form labels */
.course-modal label,
.clubbercise-modal label,
.modal label,
#course-booking-modal label,
.form-group label,
.booking-step label {
    color: #cccccc !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Form inputs */
.course-modal input[type="text"],
.course-modal input[type="email"],
.course-modal input[type="tel"],
.course-modal input[type="password"],
.clubbercise-modal input[type="text"],
.clubbercise-modal input[type="email"],
.clubbercise-modal input[type="tel"],
.clubbercise-modal input[type="password"],
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input[type="password"],
#course-booking-modal input[type="text"],
#course-booking-modal input[type="email"],
#course-booking-modal input[type="tel"],
#course-booking-modal input[type="password"],
.form-group input,
.booking-step input {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
}

.course-modal input:focus,
.clubbercise-modal input:focus,
.modal input:focus,
#course-booking-modal input:focus,
.form-group input:focus,
.booking-step input:focus {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
    background: #333 !important;
}

.course-modal input::placeholder,
.clubbercise-modal input::placeholder,
.modal input::placeholder,
#course-booking-modal input::placeholder,
.form-group input::placeholder,
.booking-step input::placeholder {
    color: #888 !important;
}

/* Stripe card element */
#card-element,
#booking-card-element,
.stripe-card-element,
.StripeElement {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    transition: border-color 0.3s ease !important;
}

#card-element.StripeElement--focus,
#booking-card-element.StripeElement--focus,
.stripe-card-element.StripeElement--focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
    background: #333 !important;
}

#card-element.StripeElement--invalid,
#booking-card-element.StripeElement--invalid,
.stripe-card-element.StripeElement--invalid {
    border-color: #dc3545 !important;
}

/* Error messages */
#card-errors,
.error-message,
.course-modal .error-message,
.clubbercise-modal .error-message,
.modal .error-message,
#course-booking-modal .error-message {
    color: #ff6b6b !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    background: rgba(255, 107, 107, 0.1) !important;
    padding: 8px !important;
    border-radius: 4px !important;
    border-left: 3px solid #ff6b6b !important;
}

#card-errors:empty {
    display: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#card-errors:not(:empty) {
    display: block !important;
}

/* Buttons */
.course-modal .btn,
.clubbercise-modal .btn,
.modal .btn,
#course-booking-modal .btn,
.booking-step .btn {
    border-radius: 4px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.btn-primary,
.course-modal .btn-primary,
.clubbercise-modal .btn-primary,
.modal .btn-primary,
#course-booking-modal .btn-primary {
    background: #667eea !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.course-modal .btn-primary:hover,
.clubbercise-modal .btn-primary:hover,
.modal .btn-primary:hover,
#course-booking-modal .btn-primary:hover {
    background: #5a6fd8 !important;
    transform: translateY(-1px) !important;
}

.btn-secondary,
.course-modal .btn-secondary,
.clubbercise-modal .btn-secondary,
.modal .btn-secondary,
#course-booking-modal .btn-secondary {
    background: #6c757d !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.course-modal .btn-secondary:hover,
.clubbercise-modal .btn-secondary:hover,
.modal .btn-secondary:hover,
#course-booking-modal .btn-secondary:hover {
    background: #5a6268 !important;
    transform: translateY(-1px) !important;
}

.btn:disabled,
.course-modal .btn:disabled,
.clubbercise-modal .btn:disabled,
.modal .btn:disabled,
#course-booking-modal .btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Price display */
.price-display,
.booking-total,
.course-price-info {
    color: #ffffff !important;
    background: rgba(102, 126, 234, 0.1) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin: 15px 0 !important;
    text-align: center !important;
}

.price-amount {
    color: #ccff00 !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
}

.price-label {
    color: #cccccc !important;
}

/* Success messages */
.booking-success,
.success-message {
    color: #ffffff !important;
    background: rgba(40, 167, 69, 0.2) !important;
    border: 1px solid rgba(40, 167, 69, 0.5) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    text-align: center !important;
}

.booking-success h3 {
    color: #28a745 !important;
}

/* Form hints and help text */
.form-hint,
.payment-security-notice,
.payment-security-notice p {
    color: #aaaaaa !important;
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 8px 0 !important;
}

/* Form grid and layout */
.form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
}

.form-group.full-width {
    grid-column: 1 / -1 !important;
}

.form-actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #333 !important;
}

/* Loading states */
.btn-spinner {
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    .form-actions {
        flex-direction: column !important;
    }
    
    .course-modal .modal-content,
    .clubbercise-modal .modal-content,
    .modal .modal-content,
    #course-booking-modal .modal-content {
        margin: 10px !important;
        padding: 20px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* Override any conflicting styles */
.course-modal *,
.clubbercise-modal *,
.modal *,
#course-booking-modal * {
    box-sizing: border-box !important;
}

/* Ensure dark theme for dynamically generated content */
.booking-step {
    color: #ffffff !important;
    background: transparent !important;
}

.booking-step * {
    color: inherit !important;
}

.booking-step h2,
.booking-step h3 {
    color: #ffffff !important;
}