/* ============================================
   Custom SweetAlert2 Styling for MentesOkos
   ============================================ */

/* Popup container */
.mo-swal-popup {
    border-radius: 1.25rem !important;
    padding: 2rem !important;
    box-shadow: 0 20px 60px -20px rgba(39, 112, 62, 0.35) !important;
    border: 1px solid rgba(90, 164, 115, 0.15) !important;
    background: #ffffff !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Title styling */
.mo-swal-title {
    color: #27703E !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    font-family: 'Fredoka', 'Quicksand', sans-serif !important;
}

/* Text content */
.mo-swal-text {
    color: #4b5563 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* Actions container */
.mo-swal-actions {
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
    flex-wrap: wrap !important;
}

/* Confirm button - Fix white flash by ensuring gradient always present */
.mo-swal-confirm {
    background: linear-gradient(135deg, #5AA473, #6EC689) !important;
    background-color: #5AA473 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 6px 20px -4px rgba(90, 164, 115, 0.45) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
    cursor: pointer !important;
    min-width: 120px !important;
    will-change: transform !important;
}

.mo-swal-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px -4px rgba(90, 164, 115, 0.55) !important;
    filter: brightness(1.1) !important;
    background: linear-gradient(135deg, #5AA473, #6EC689) !important;
    background-color: #6EC689 !important;
}

.mo-swal-confirm:active {
    transform: translateY(0) !important;
    filter: brightness(1) !important;
}

.mo-swal-confirm:focus {
    outline: none !important;
    box-shadow: 0 6px 20px -4px rgba(90, 164, 115, 0.45), 0 0 0 3px rgba(90, 164, 115, 0.25) !important;
}

/* Cancel button - Smooth transitions without flash */
.mo-swal-cancel {
    background-color: #ffffff !important;
    color: #5AA473 !important;
    border: 2px solid #5AA473 !important;
    border-radius: 9999px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 12px -4px rgba(90, 164, 115, 0.25) !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
    cursor: pointer !important;
    min-width: 120px !important;
    will-change: transform !important;
}

.mo-swal-cancel:hover {
    background-color: #5AA473 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px -4px rgba(90, 164, 115, 0.35) !important;
}

.mo-swal-cancel:active {
    transform: translateY(0) !important;
    background-color: #27703E !important;
}

.mo-swal-cancel:focus {
    outline: none !important;
    box-shadow: 0 4px 12px -4px rgba(90, 164, 115, 0.25), 0 0 0 3px rgba(90, 164, 115, 0.25) !important;
}

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

.swal2-icon.swal2-success {
    border-color: #5AA473 !important;
}

.swal2-success-ring {
    border-color: rgba(90, 164, 115, 0.3) !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
    background-color: #5AA473 !important;
}

.swal2-icon.swal2-question {
    border-color: #5AA473 !important;
    color: #5AA473 !important;
}

.swal2-icon.swal2-info {
    border-color: #5AA473 !important;
    color: #5AA473 !important;
}

/* Close button */
.swal2-close {
    color: #9ca3af !important;
    font-size: 2rem !important;
    transition: color 0.2s ease !important;
}

.swal2-close:hover {
    color: #27703E !important;
}

.swal2-close:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(90, 164, 115, 0.25) !important;
}

/* Backdrop styling */
.swal2-container {
    backdrop-filter: blur(4px) !important;
}

/* Input fields in SweetAlert */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    transition: all 0.25s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: #5AA473 !important;
    box-shadow: 0 0 0 3px rgba(90, 164, 115, 0.15) !important;
    outline: none !important;
}

/* Validation message */
.swal2-validation-message {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #F7B7D4, #5AA473) !important;
}

/* Loading state */
.swal2-loading .swal2-confirm {
    background: #5AA473 !important;
    opacity: 0.7 !important;
}

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

    .mo-swal-title {
        font-size: 1.5rem !important;
    }

    .mo-swal-text {
        font-size: 0.95rem !important;
    }

    .mo-swal-confirm,
    .mo-swal-cancel {
        padding: 0.65rem 1.5rem !important;
        font-size: 0.95rem !important;
        min-width: 100px !important;
    }

    .mo-swal-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .mo-swal-confirm,
    .mo-swal-cancel {
        width: 100% !important;
    }
}