/* Custom Popup */
.custom-popup {
    position: fixed; /* Fix it to the screen, not the document flow */
    top: 50%; /* Position it vertically in the center */
    left: 50%; /* Position it horizontally in the center */
    transform: translate(-50%, -50%); /* Center it exactly */
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 650px;
    /* position: absolute;  */
    max-width: 90%;
    z-index: 9999; /* Ensure it's above other content */
    display: none; /* Initially hidden */
}

/* Inside popup content */
.custom-popup-content {
    flex-direction: column;
    background-color: #fff3e6;
    border: 2px solid #ff8c42;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 600px;
    max-width: 90%;
    margin: auto;
}

/* Title styling */
.custom-popup h3 {
    color: #ff6f00;
    font-family: Arial, sans-serif;
    text-align: center;
    margin-bottom: 20px;
}

/* Label styling */
.custom-popup label {
    margin-bottom: 5px;
}

/* Input fields styling */
.custom-popup input,
.custom-popup select,
.custom-popup textarea {
    margin-bottom: 10px;
    padding: 8px;
    font-size: 14px;
}

/* Form styling */
form label {
    font-size: 14px;
    color: #ff6f00;
    margin-bottom: 5px;
    display: block;
    font-family: Arial, sans-serif;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ff8c42;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-group:last-child {
    margin-right: 0;
}

.form-group label {
    margin-bottom: 5px;
}

.form-group input {
    padding: 8px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

button {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
}

form button#deleteEvent {
    background-color: #e63946;
}

form button#closePopup {
    background-color: #6c757d;
}

form button:hover {
    background-color: #ff8c42;
}

form button#deleteEvent:hover {
    background-color: #ff5252;
}

form button#closePopup:hover {
    background-color: #5a6268;
}

/* Custom styling for Notes textarea */
textarea#Notes {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #d7d7d7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    resize: vertical;
}

/* Mobile responsiveness using media queries */
@media (max-width: 767px) {
    .custom-popup {
        width: 90%; /* Make the popup take up 90% of the screen width */
        padding: 15px; /* Reduce padding */
    }

    .custom-popup-content {
        width: 100%; /* Ensure the content takes full width */
        max-width: 100%;
    }

    .form-row {
        flex-direction: column; /* Stack the form fields vertically */
    }

    .form-group {
        margin-right: 0;
        margin-bottom: 10px; /* Add spacing between form groups */
    }

    button {
        width: 100%; /* Make buttons full width */
        padding: 12px; /* Adjust padding for buttons */
        font-size: 16px; /* Increase font size for easier touch interaction */
    }

    form button#deleteEvent {
        background-color: #e63946;
    }

    form button#closePopup {
        background-color: #6c757d;
    }

    form button:hover {
        background-color: #ff8c42;
    }

    form button#deleteEvent:hover {
        background-color: #ff5252;
    }

    form button#closePopup:hover {
        background-color: #5a6268;
    }
}

@media (max-width: 480px) {
    .custom-popup {
        width: 95% !important; /* Make the popup take up almost full width on small screens */
        max-width: 95%;
        max-height: 90vh; /* Limits height to 90% of the viewport height */
        overflow-y: auto; /* Enables vertical scrolling if needed */
        padding: 2px !important; /* Further reduce padding */
    }

    .custom-popup-content {
        width: 95% !important; /* Make the popup take up almost full width on small screens */
        padding: 2px;
        max-width: 95%;
    }
    .custom-popup h3 {
        font-size: 14px; /* Smaller font size for mobile */
    }
    .custom-popup textarea {
        margin-bottom: 5px;
        padding: 2px;
        font-size: 10px;
    }
    .form-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1px;
    }
    /* Form styling */
    form label {
        font-size: 14px;
        color: #ff6f00;
        margin-bottom: 5px;
        display: block;
        font-family: Arial, sans-serif;
    }


    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 5px;
    }

    form input {
        width: 100%;
        padding: 2px;
        margin-bottom: 5px;
        border: 1px solid #ff8c42;
        border-radius: 2px;
        box-sizing: border-box;
    }


    textarea#Notes {
        height: 30px; /* Reduce the height of the textarea */
    }

    button {
        padding: 10px 12px; /* Slightly smaller buttons */
        font-size: 12px; /* Adjust button text size */
    }
}