/* =====================================================
   SWEETALERT CUSTOM THEME
   Matches TOL Website Color Scheme
   ===================================================== */

/* Theme Colors:
   --primary: #31262A (dark brown)
   --accent: #E68A8A (soft pink)
   --accent-light: #FFEAEA (light pink background)
   --success: #4CAF50 (green)
   --error: #f44336 (red)
*/

/* General Popup Styling */
.swal2-popup {
    font-family: "Montserrat", sans-serif !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 10px 40px rgba(49, 38, 42, 0.2) !important;
}

/* Title */
.swal2-title {
    font-family: "Playfair Display", serif !important;
    color: #31262A !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
}

/* Content Text */
.swal2-html-container {
    font-family: "Montserrat", sans-serif !important;
    color: #555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Icon Colors */
.swal2-success-ring {
    border-color: rgba(230, 138, 138, 0.3) !important;
}

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

.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
    background-color: #fff !important;
}

/* Confirm Button - Pink Theme */
.swal2-confirm {
    background: linear-gradient(135deg, #E68A8A 0%, #d47070 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: "Playfair Display", serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 14px 40px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(230, 138, 138, 0.4) !important;
}

.swal2-confirm:hover {
    background: linear-gradient(135deg, #d47070 0%, #c45858 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(230, 138, 138, 0.5) !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(230, 138, 138, 0.4) !important;
}

/* Cancel Button - Light Style */
.swal2-cancel {
    background-color: #f5f5f5 !important;
    color: #31262A !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
}

.swal2-cancel:hover {
    background-color: #eee !important;
    border-color: #ccc !important;
}

/* Deny Button */
.swal2-deny {
    background-color: #31262A !important;
    border-radius: 10px !important;
    font-family: "Montserrat", sans-serif !important;
}

/* Close Button */
.swal2-close {
    color: #999 !important;
    font-size: 2rem !important;
}

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

/* Timer Progress Bar */
.swal2-timer-progress-bar {
    background: linear-gradient(90deg, #E68A8A, #FFEAEA) !important;
}

/* Toast Notifications */
.swal2-toast {
    font-family: "Montserrat", sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
}

.swal2-toast .swal2-title {
    font-family: "Montserrat", sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Success Popup Custom Styles */
.swal2-popup.swal2-toast.swal-success-toast {
    background: linear-gradient(135deg, #fff 0%, #f0fff0 100%) !important;
    border-left: 4px solid #4CAF50 !important;
}

/* Error Popup Custom Styles */
.swal2-popup.swal-error-popup {
    border-top: 4px solid #f44336 !important;
}

/* Input Fields (for prompts) */
.swal2-input,
.swal2-textarea {
    border-radius: 10px !important;
    border: 1px solid #ddd !important;
    font-family: "Montserrat", sans-serif !important;
    padding: 12px 15px !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: #E68A8A !important;
    box-shadow: 0 0 0 3px rgba(230, 138, 138, 0.2) !important;
}

/* Animation Overrides */
.swal2-show {
    animation: swal2-show 0.4s ease-out !important;
}

@keyframes swal2-show {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    .swal2-popup {
        width: 90% !important;
        padding: 20px !important;
    }
    
    .swal2-title {
        font-size: 1.4rem !important;
    }
    
    .swal2-confirm {
        padding: 12px 30px !important;
        font-size: 1rem !important;
    }
}