@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Comic+Neue:wght@300&family=Roboto:wght@300&display=swap');

    .offcanvas {
        z-index: 2050 !important;
        border-radius: 10px 0px 0px 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    }

    .form-control:focus {
        background-color: transparent;
        border-color: #4490ff;
        box-shadow: 0 0 0 0.25rem #fff;
    }

    ::-webkit-input-placeholder {
        color: #676666 !important;
    }

    .swal-custom-title {
        font-family: 'Chewy', 'Arial', sans-serif;
    }

    .swal-custom-popup {
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #f3e7ff, #e0f7fa);
        /* Toy-themed gradient */
    }

    .swal-custom-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #ff4081;
        /* Vibrant pink for fun */
        font-family: 'Comic Sans MS', 'Arial', sans-serif;
        /* Playful font */
    }

    .swal-custom-text {
        font-size: 1.1rem;
        color: #333;
        font-family: 'Arial', sans-serif;
    }

    .swal2-loader {
        border-color: #ff4081 transparent #ff4081 transparent;
        /* Match loader to theme */
    }


    .swal-custom-popup {
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #f3e7ff, #e0f7fa);
        /* Toy-themed gradient */
    }

    .swal-custom-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #ff4081;
        /* Vibrant pink */
        font-family: 'Chewy', 'Comic Sans MS', 'Arial', sans-serif;
        /* Playful font */
    }

    .swal-custom-text {
        font-size: 1.1rem;
        color: #333;
        font-family: 'Arial', sans-serif;
    }

    .swal-custom-button {
        border-radius: 10px;
        font-family: 'Chewy', 'Arial', sans-serif;
        font-size: 1rem;
        padding: 10px 20px;
    }

    .swal2-loader {
        border-color: #ff4081 transparent #ff4081 transparent;
        /* Match loader to theme */
    }