/* Payment Modal Fix - Lesbarkeit & Sichtbarkeit */

/* Modal Hintergrund - dunkel */
#paymentModal .modal-content {
    background: rgba(20, 20, 20, 0.98) !important;
    color: #ffffff !important;
}

/* License Cards - bessere Lesbarkeit */
.license-card {
    background: rgba(35, 35, 35, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.license-card h3 {
    color: #ffffff !important;
}

.license-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.license-card ul li {
    color: rgba(255, 255, 255, 0.8) !important;
}

.license-card.selected {
    border-color: #E63946 !important;
    background: rgba(230, 57, 70, 0.2) !important;
}

/* Payment Buttons - bessere Sichtbarkeit */
.payment-btn {
    background: rgba(35, 35, 35, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.payment-btn strong {
    color: #ffffff !important;
}

.payment-btn div {
    color: rgba(255, 255, 255, 0.8) !important;
}

.payment-btn:hover {
    border-color: #E63946 !important;
    background: rgba(230, 57, 70, 0.15) !important;
}

/* Stripe Payment Element Container - weiß für bessere Sichtbarkeit */
#stripe-payment-element {
    background: #ffffff !important;
    padding: 15px !important;
    border-radius: 8px !important;
    min-height: 100px !important;
}

/* PayPal Button Container */
#paypal-button-container {
    min-height: 50px !important;
    margin: 20px 0 !important;
}

/* Email Input Field (für Registrierung) */
.email-input-container {
    background: rgba(35, 35, 35, 0.9) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.email-input-container label {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.email-input-container input[type="email"] {
    width: 100% !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #000000 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
}

.email-input-container input[type="email"]:focus {
    border-color: #E63946 !important;
    outline: none !important;
}

.email-input-container button {
    width: 100% !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #E63946 0%, #F77F00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

/* Error Messages */
#stripe-error-message {
    background: rgba(230, 57, 70, 0.2) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border-left: 4px solid #E63946 !important;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    #paymentModal .modal-content {
        max-width: 95% !important;
        padding: 20px !important;
    }

    .license-card {
        padding: 15px !important;
    }

    .payment-btn {
        padding: 15px !important;
    }
}
