/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

 /* Container for filter buttons */
            .events-filter-buttons {
                text-align: center;
                margin-bottom: 30px;
            }

            /* Filter buttons */
            .events-filter-buttons button,
            .events-filter-buttons a.filter-btn {
                margin: 0 10px 10px 0;
                padding: 10px 18px;
                border: none;
                background-color: #FE9E2C;
                color: #fff;
                cursor: pointer;
                border-radius: 30px;
                font-weight: 600;
                font-size: 16px;
                transition: background-color 0.3s ease;
                user-select: none;
                display: inline-block;
                text-align: center;
                text-decoration: none;
            }

            .events-filter-buttons button:hover,
            .events-filter-buttons button.active,
            .events-filter-buttons a.filter-btn:hover,
            .events-filter-buttons a.filter-btn.active {
                background-color: #185729;
            }

            /* Event wrapper container */
            .event-wrapper {
                padding: 10px;
                margin-bottom: 15px;
            }

            /* Event row uses flexbox */
            .event-row {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                align-items: flex-start;
            }

            /* Columns - 3 columns layout */
            .event-col {
                padding: 10px;
                box-sizing: border-box;
            }

            /* Column 1: Date and meta info */
            .event-col.event-meta {
                /* flex: 1 1 150px;
            min-width: 120px; */
                flex: 0 0 80px;
                min-width: 70px;
                font-size: 14px;
                color: #666;
                font-weight: 500;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                border-right: 1px solid #eee;
            }

            /* Date styling */
            .event-day {
                font-weight: bold;
                color: #000;
                font-size: 20px;
            }

            /* Column 2: Main info */
            .event-col:nth-child(2) {
                flex: 2 1 400px;
                min-width: 250px;
            }

            /* Time styling */
            .event-time {
                color: #666;
                font-weight: 600;
                margin-bottom: 8px;
                font-size: 15px;
            }

            /* Title */
            .event-title {
                font-size: 28px;
                font-weight: 700;
                color: #185729;
                margin-bottom: 12px;
                line-height: 1.2;
            }

            /* Subtitle */
            .event-subtitle {
                font-size: 15px;
                color: #555;
                margin-bottom: 12px;
            }

            /* Description */
            .event-desc {
                font-size: 15px;
                color: #555;
                margin-bottom: 15px;
                line-height: 1.5;
            }

            /* View detail button */
            .view-event-btn {
                display: inline-block;
                padding: 8px 0px 8px 0px;
                color: #ff6642;
            }

            .view-event-btn {
                display: inline-block;
                color: #ff6642;
                font-weight: bold;
                text-decoration: none;
                font-size: 16px;
            }

            .view-event-btn .view-underline {
                border-bottom: 2px solid #ff6642;
                padding-bottom: 2px;
            }

            /* Column 3: Image */
            .event-col:nth-child(3) {
                flex: 1 1 200px;
                min-width: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .event-col:nth-child(3) img {
                max-width: 100%;
                height: auto;
                border-radius: 6px;
                box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
            }

            /* Responsive: Tablets and below */
            @media (max-width: 991px) {

                .events-filter-buttons button,
                .events-filter-buttons a.filter-btn {
                    margin: 0 8px 8px 0;
                    padding: 8px 14px;
                    border: none;
                    background-color: #FE9E2C;
                    color: #fff;
                    cursor: pointer;
                    border-radius: 30px;
                    font-weight: 500;
                    font-size: 14px;
                    transition: background-color 0.3s ease;
                    user-select: none;
                    display: inline-block;
                    text-align: center;
                    text-decoration: none;
                }

                .event-row {
                    flex-direction: column;
                }

                .event-col.event-meta {
                    border-right: none;
                    border-bottom: 1px solid #eee;
                    padding-bottom: 15px;
                    margin-bottom: 15px;
                    text-align: left;
                    flex: none;
                    min-width: auto;
                }

                .event-col:nth-child(2),
                .event-col:nth-child(3) {
                    flex: none;
                    min-width: auto;
                }

                .event-col:nth-child(3) {
                    margin-top: 15px;
                }
            }

            /* Responsive: Mobile */
            @media (max-width: 575px) {
                .events-filter-buttons {
                    text-align: left;
                    margin-bottom: 10px;
                }

                .events-filter-buttons button,
                .events-filter-buttons a.filter-btn {
                    margin: 0 5px 5px 0;
                    padding: 5px 10px;
                    border: none;
                    background-color: #FE9E2C;
                    color: #fff;
                    cursor: pointer;
                    border-radius: 30px;
                    font-weight: 500;
                    font-size: 14px;
                    transition: background-color 0.3s ease;
                    user-select: none;
                    display: inline-block;
                    text-align: center;
                    text-decoration: none;
                }

                .event-title {
                    font-size: 24px;
                }

                .event-subtitle,
                .event-time,
                .event-desc,
                .event-date {
                    font-size: 14px;
                }

                .view-event-btn {
                    width: 100%;
                    text-align: center;
                    padding: 10px 0;
                    font-size: 16px;
                }
            }

            .events-pagination {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 40px;
            }

            .events-pagination a,
            .events-pagination span {
                display: inline-block;
                padding: 10px 16px;
                background-color: #fff;
                border: 1px solid #ddd;
                color: #333;
                text-decoration: none;
                font-size: 16px;
                font-weight: 500;
                border-radius: 4px;
                transition: background-color 0.3s ease, color 0.3s ease;
            }

            .events-pagination a:hover {
                background-color: #f7f7f7;
                border-color: #bbb;
                color: #000;
            }

            .events-pagination .current,
            .events-pagination .active,
            .events-pagination a.current {
                background-color: #FE9E2C;
                color: #fff;
                border-color: #FE9E2C;
            }

            .events-pagination .prev,
            .events-pagination .next {
                font-weight: bold;
                background-color: #f2f2f2;
                color: #333;
            }

            @media (max-width: 600px) {

                .events-pagination a,
                .events-pagination span {
                    padding: 8px 12px;
                    font-size: 14px;
                }
            }


            /** css for loader */
            .events-loader {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 30px 0;
            }

            .spinner {
                width: 40px;
                height: 40px;
                border: 5px solid #ddd;
                border-top: 5px solid #ff6642;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }