/* Custom SweetAlert2 Styles for LiveKenya */

/* Main popup styling */
.swal-popup-custom {
    font-family: inherit;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

.swal-title-custom {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 0.75rem !important;
}

.swal-content-custom {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
}

/* Button styling */
.swal2-confirm {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.swal2-cancel {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.swal2-cancel:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Icon styling */
.swal2-icon {
    border: none !important;
    margin: 1.5rem auto 1rem auto !important;
}

.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.swal2-icon.swal2-error {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-icon.swal2-info {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
    border-color: #8b5cf6 !important;
    color: #8b5cf6 !important;
}

/* Backdrop */
.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
}

/* Input field styling */
.swal2-input {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
    transition: border-color 0.2s ease !important;
}

.swal2-input:focus {
    border-color: #f59e0b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

/* Textarea styling */
.swal2-textarea {
    border-radius: 0.5rem !important;
    border: 1px solid #d1d5db !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
    transition: border-color 0.2s ease !important;
    resize: vertical !important;
}

.swal2-textarea:focus {
    border-color: #f59e0b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

/* Progress bar styling */
.swal2-timer-progress-bar {
    background: #f59e0b !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .swal-popup-custom {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
    }

    .swal-title-custom {
        color: #f1f5f9 !important;
    }

    .swal-content-custom {
        color: #cbd5e1 !important;
    }

    .swal2-cancel {
        background-color: #374151 !important;
        color: #d1d5db !important;
        border-color: #4b5563 !important;
    }

    .swal2-cancel:hover {
        background-color: #4b5563 !important;
        border-color: #6b7280 !important;
    }

    .swal2-input,
    .swal2-textarea {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f1f5f9 !important;
    }

    .swal2-input:focus,
    .swal2-textarea:focus {
        border-color: #f59e0b !important;
        background-color: #374151 !important;
    }
}

/* Custom colored notification boxes */
.swal2-html-container .bg-amber-50 {
    background-color: #fffbeb !important;
}

.swal2-html-container .border-amber-200 {
    border-color: #fde68a !important;
}

.swal2-html-container .text-amber-800 {
    color: #92400e !important;
}

.swal2-html-container .bg-blue-50 {
    background-color: #eff6ff !important;
}

.swal2-html-container .border-blue-200 {
    border-color: #bfdbfe !important;
}

.swal2-html-container .text-blue-800 {
    color: #1e40af !important;
}

.swal2-html-container .bg-red-50 {
    background-color: #fef2f2 !important;
}

.swal2-html-container .border-red-200 {
    border-color: #fecaca !important;
}

.swal2-html-container .text-red-800 {
    color: #991b1b !important;
}

.swal2-html-container .bg-green-50 {
    background-color: #f0fdf4 !important;
}

.swal2-html-container .border-green-200 {
    border-color: #bbf7d0 !important;
}

.swal2-html-container .text-green-800 {
    color: #166534 !important;
}

/* Dark mode for notification boxes */
@media (prefers-color-scheme: dark) {
    .swal2-html-container .bg-amber-50 {
        background-color: rgba(245, 158, 11, 0.1) !important;
    }

    .swal2-html-container .border-amber-200 {
        border-color: rgba(245, 158, 11, 0.3) !important;
    }

    .swal2-html-container .text-amber-800 {
        color: #fbbf24 !important;
    }

    .swal2-html-container .bg-blue-50 {
        background-color: rgba(59, 130, 246, 0.1) !important;
    }

    .swal2-html-container .border-blue-200 {
        border-color: rgba(59, 130, 246, 0.3) !important;
    }

    .swal2-html-container .text-blue-800 {
        color: #60a5fa !important;
    }

    .swal2-html-container .bg-red-50 {
        background-color: rgba(239, 68, 68, 0.1) !important;
    }

    .swal2-html-container .border-red-200 {
        border-color: rgba(239, 68, 68, 0.3) !important;
    }

    .swal2-html-container .text-red-800 {
        color: #f87171 !important;
    }

    .swal2-html-container .bg-green-50 {
        background-color: rgba(16, 185, 129, 0.1) !important;
    }

    .swal2-html-container .border-green-200 {
        border-color: rgba(16, 185, 129, 0.3) !important;
    }

    .swal2-html-container .text-green-800 {
        color: #34d399 !important;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .swal-popup-custom {
        margin: 0 1rem !important;
    }

    .swal-title-custom {
        font-size: 1.25rem !important;
    }

    .swal2-confirm,
    .swal2-cancel {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.8125rem !important;
    }
}