/* Overall container for the date range picker */
.daterangepicker {
    background-color: #181818 !important; /* Dark background to match your site */
    border: 0.0625rem solid #444 !important; /* Subtle border */
    color: #999 !important; /* Light text */
    box-shadow: 0 0 5px rgba(0,0,0,0.8) !important;
}

    /* Input styling */
    .daterangepicker .form-control {
        background-color: #181818 !important;
        color: #999 !important;
        border: 1px solid #444 !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }

    /* Calendar area */
    .daterangepicker .calendar-table {
        background-color: #181818 !important;
        color: #999 !important;
        border: none !important;
    }

        .daterangepicker .calendar-table table {
            width: 100% !important;
            border-collapse: collapse !important;
        }

            .daterangepicker .calendar-table table th {
                background-color: #181818 !important;
                color: #999 !important;
                border-bottom: 1px solid #444 !important;
                padding: 0.5rem !important;
            }

            .daterangepicker .calendar-table table thead tr:first-child th {
                background-color: #2c2c2c !important;
                border-radius: 0 !important;
            }

            .daterangepicker .calendar-table table td {
                padding: 0.5rem !important;
                text-align: center !important;
                cursor: pointer !important;
                border: 1px solid transparent !important;
                background-color: #181818 !important;
            }

                .daterangepicker .calendar-table table td:hover {
                    background-color: #2c2c2c !important;
                }

                /* Selected day styles */
                .daterangepicker .calendar-table table td.active {
                    background-color: #66B2FF !important; /* Your vibrant blue */
                    color: #fff !important; /* White text on selected day */
                }

                /* In-range days (the days between the start and end date) */
                .daterangepicker .calendar-table table td.in-range {
                    background-color: rgba(102, 178, 255, 0.2) !important;
                    color: #999 !important;
                }

                .daterangepicker .calendar-table table td.start-date,
                .daterangepicker .calendar-table table td.end-date {
                    color: #fff !important; /* White text on selected day */
                    background-color: #66B2FF !important;
                }

    /* Left-side range list */
    .daterangepicker .ranges {
        background-color: #181818 !important;
        border-right: 1px solid #444 !important;
    }

        .daterangepicker .ranges li {
            color: #999 !important;
            padding: 0.5rem 1rem !important;
            cursor: pointer !important;
        }

            .daterangepicker .ranges li:hover {
                background-color: #2c2c2c !important;
            }

            .daterangepicker .ranges li.active {
                background-color: #66B2FF !important;
                color: #fff !important;
            }

    /* footer-section buttons container */
    .daterangepicker .drp-buttons {
        background-color: #181818 !important;
        padding: 0.5rem !important;
        text-align: right !important;
    }

        /* General button styling: removes any lift/movement on hover, no pink outline */
        .daterangepicker .drp-buttons button {
            /* By default, let's assume "apply" style (we'll override cancel next) */
            background-color: #66B2FF !important;
            color: #fff !important;
            border: none !important;
            margin: 0 0.25rem !important;
            padding: 0.5rem 1rem !important;
            cursor: pointer !important;
            border-radius: 5px !important;
            /* Only animate background-color; remove transform so no "lift" */
            transition: background-color 0.3s ease !important;
            transform: none !important;
        }

            /* Remove pink/white focus outline or box shadow */
            .daterangepicker .drp-buttons button:focus {
                outline: none !important;
                box-shadow: none !important;
                transform: none !important;
            }

            /* Also remove any transform on hover/active if the library sets it */
            .daterangepicker .drp-buttons button:hover,
            .daterangepicker .drp-buttons button:active {
                transform: none !important;
            }

            /* Apply Button (explicit) */
            .daterangepicker .drp-buttons button.applyBtn {
                background-color: #66B2FF !important;
            }

                .daterangepicker .drp-buttons button.applyBtn:hover {
                    background-color: #1A73E8 !important;
                }

                .daterangepicker .drp-buttons button.applyBtn:active {
                    background-color: #1E4E7A !important;
                }

            /* Cancel Button: Transparent by default, subtle hover */
            .daterangepicker .drp-buttons button.cancelBtn {
                background-color: transparent !important;
                color: #999 !important; /* Matches site text */
            }

                .daterangepicker .drp-buttons button.cancelBtn:hover {
                    background-color: #2c2c2c !important;
                    color: #fff !important;
                }

                .daterangepicker .drp-buttons button.cancelBtn:active {
                    background-color: #333 !important;
                    color: #fff !important;
                }