/* Modal Text Visibility Improvements */

/* General modal text improvements */
.modal {
    color: #ffffff !important;
}

.modal-content {
    background: rgba(30, 35, 50, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.modal-body {
    background: transparent !important;
}

/* Trading/Market Modal Specific Improvements */
.modal-body input,
.modal-body .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
}

.modal-body input::placeholder,
.modal-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 400 !important;
}

.modal-body input:focus,
.modal-body .form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Labels and text in modals */
.modal-body label,
.modal-body .form-label,
.modal-body p,
.modal-body span,
.modal-body div {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Exception for wallet address text - should have dark text on light background */
.modal-body .address-text {
    color: #23272f !important;
    background: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

/* Currency/Token labels */
.modal-body .currency-label,
.modal-body .token-symbol {
    color: #00d4ff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Amount and receive text */
.modal-body .amount-text,
.modal-body .receive-text {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* Confirm button improvements */
.modal-footer .btn,
.modal-body .btn {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.modal-footer .btn:hover,
.modal-body .btn:hover {
    background: linear-gradient(135deg, #0099cc 0%, #007399 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4) !important;
}

/* Close button improvements */
.modal-header .btn-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 0.8 !important;
}

.modal-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
}

.modal-header .btn-close i {
    color: #ffffff !important;
    font-size: 1.2rem !important;
}

/* Input group styling */
.modal-body .input-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-body .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #00d4ff !important;
    font-weight: 700 !important;
}

/* Arrow/swap icon improvements */
.modal-body .swap-icon,
.modal-body .arrow-down {
    background: rgba(0, 212, 255, 0.2) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50% !important;
    color: #00d4ff !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 10px auto !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .modal-title {
        font-size: 1.3rem !important;
    }
    
    .modal-body input,
    .modal-body .form-control {
        font-size: 1rem !important;
    }
    
    .modal-footer .btn,
    .modal-body .btn {
        font-size: 1rem !important;
        padding: 10px 25px !important;
    }
}

/* Dark theme specific improvements */
body.dark-theme .modal-content,
.dark-modal .modal-content {
    background: rgba(20, 25, 35, 0.98) !important;
}

body.dark-theme .modal-title,
.dark-modal .modal-title {
    color: #f0f0f0 !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .modal-content {
        background: rgba(10, 15, 25, 0.99) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .modal-title,
    .modal-body label,
    .modal-body p,
    .modal-body span {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    }
}