/* General alert box styles */
.custom-alert {
    border-radius: 20px !important;
    padding: 20px !important;
    background-color: #f9f9f9 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Titles */
.custom-title {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #21be4e !important;
}

.custom-bold {
    font-weight: bold !important;
    color: #23cd48 !important; /* Adjust color if needed */
    font-size: 22px !important; /* Increase size for visibility */
}

/* Content */
.custom-content {
    font-size: 19px !important;
    font-weight: 600;
    color: #555 !important;
}


/* Styling for the countdown text */
#countdown-text {
    font-size: 16px; /* Make text larger */
    font-weight: bold;
    color: #8b8585; /* Dark gray color */
    text-align: center; /* Center the text */
    margin-top: 10px; /* Add spacing */
}

/* Styling for the countdown number */
#countdown {
    font-size: 16px; /* Bigger countdown numbers */
    font-weight: bold;
    color: #d9534f; /* Default red countdown */
}

/* Make countdown RED in the last 3 seconds */
@keyframes blink {
    0% { color: #d9534f; } /* Red */
    50% { color: #ff0000; } /* Bright red */
    100% { color: #d9534f; } /* Red */
}

.blinking {
    animation: blink 0.8s infinite alternate;
}

/* Confirm button */
.custom-confirm-button {
    border-radius: 8px !important;
    font-weight: bold !important;
    background-color: #3085d6 !important;
}

/* Cancel button */
.custom-cancel-button {
    border-radius: 8px !important;
    font-weight: bold !important;
    background-color: #d33 !important;
}

/* Success alert background */
.swal2-popup.swal2-icon-success {
    background-color: #e8f5e9 !important; /* Light green */
    color: #388e3c !important; /* Dark green text */
}

/* Error alert background */
.swal2-popup.swal2-icon-error {
    background-color: #ffebee !important; /* Light red */
    color: #d32f2f !important; /* Dark red text */
}

/* Warning alert background */
.swal2-popup.swal2-icon-warning {
    background-color: #fff8e1 !important; /* Light yellow */
    color: #ffa000 !important; /* Dark yellow text */
}

/* Info alert background */
.swal2-popup.swal2-icon-info {
    background-color: #e3f2fd !important; /* Light blue */
    color: #1976d2 !important; /* Dark blue text */
}

/* ✅ Large Desktops (1920px and above) */
@media (min-width: 1920px) {
    .custom-alert {
        border-radius: 22px !important;
        padding: 22px !important;
    }

    .custom-title {
        font-size: 24px !important;
    }

    .custom-bold {
        font-size: 24px !important;
    }

    .custom-content {
        font-size: 20px !important;
    }

    #countdown-text {
        font-size: 18px;
    }

    #countdown {
        font-size: 20px;
    }

    .custom-confirm-button,
    .custom-cancel-button {
        font-size: 16px !important;
        padding: 10px 18px !important;
    }
}

/* ✅ Standard Laptops (1280px - 1536px) */
@media (max-width: 1280px) {
    .custom-alert {
        border-radius: 18px !important;
        padding: 18px !important;
    }

    .custom-title {
        font-size: 20px !important;
    }

    .custom-bold {
        font-size: 20px !important;
    }

    .custom-content {
        font-size: 18px !important;
    }

    #countdown-text {
        font-size: 15px;
    }

    #countdown {
        font-size: 16px;
    }

    .custom-confirm-button,
    .custom-cancel-button {
        font-size: 14px !important;
        padding: 8px 14px !important;
    }
}

/* ✅ Small Laptops (1024px - 1280px) */
@media (max-width: 1024px) {
    .custom-alert {
        border-radius: 16px !important;
        padding: 16px !important;
    }

    .custom-title {
        font-size: 18px !important;
    }

    .custom-bold {
        font-size: 18px !important;
    }

    .custom-content {
        font-size: 16px !important;
    }

    #countdown-text {
        font-size: 14px;
    }

    #countdown {
        font-size: 15px;
    }

    .custom-confirm-button,
    .custom-cancel-button {
        font-size: 13px !important;
        padding: 7px 12px !important;
    }
}