.elementor-553 .elementor-element.elementor-element-38db673{--display:flex;}/* Start custom CSS for event-listing, class: .elementor-element-36ae240 *//* Import Syne font dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

/* Custom CSS untuk WP Event Manager - Tema Clubbing Modern */
.event_listings {
    font-family: 'Syne', sans-serif !important;
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Filter Section */
.event_filters {
    background-color: #111111 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    border: 1px solid #333333 !important;
}

.wpem-form-label {
    color: #FF4006 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.wpem-form-group input[type="text"] {
    background-color: #222222 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    font-family: 'Syne', sans-serif !important;
}

.wpem-form-group input[type="text"]:focus {
    border-color: #FF4006 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 64, 6, 0.2) !important;
}

/* Date Picker Button */
.comiseo-daterangepicker-triggerbutton {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    padding: 11px 15px !important;
    border-radius: 4px !important;
    width: 100% !important;
    text-align: left !important;
    transition: all 0.3s ease !important;
    font-family: 'Syne', sans-serif !important;
}

.comiseo-daterangepicker-triggerbutton:hover {
    border-color: #FF4006 !important;
}

/* Event Listings Header */
.wpem-event-listings-header {
    border-bottom: 2px solid #FF4006 !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
}

.wpem-heading-text {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Event Box Styling */
.wpem-event-layout-wrapper {
    background-color: #111111 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border: 1px solid #333333 !important;
    height: 100% !important;
}

.wpem-event-layout-wrapper:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(255, 64, 6, 0.2) !important;
    border-color: #FF4006 !important;
}

.wpem-event-banner-img {
    height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

.wpem-event-date {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background-color: #FF4006 !important;
    color: #000000 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-family: 'Syne', sans-serif !important;
}

.wpem-date {
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.wpem-month {
    font-size: 14px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.wpem-event-infomation {
    padding: 20px !important;
}

.wpem-event-title h3 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    transition: color 0.3s ease !important;
    letter-spacing: 0.5px !important;
}

.wpem-event-layout-wrapper:hover .wpem-event-title h3 {
    color: #FF4006 !important;
}

.wpem-event-date-time-text, .wpem-event-location-text {
    color: #bbbbbb !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Load More Button */
#load_more_events_loader {
    text-align: center !important;
    margin-top: 30px !important;
}

.load_more_events {
    display: inline-block !important;
    background-color: #FF4006 !important;
    color: #000000 !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'Syne', sans-serif !important;
    letter-spacing: 1px !important;
}

.load_more_events:hover {
    background-color: #ff521f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 64, 6, 0.4) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .wpem-col {
        margin-bottom: 15px !important;
    }
    
    .wpem-event-banner-img {
        height: 150px !important;
    }
    
    .wpem-heading-text {
        font-size: 26px !important;
    }
    
    .wpem-event-title h3 {
        font-size: 18px !important;
    }
}

/* Animation for modern feel */
@keyframes pulse {
    0% { transform: scale(1) !important; }
    50% { transform: scale(1.05) !important; }
    100% { transform: scale(1) !important; }
}

.wpem-event-layout-wrapper {
    animation: pulse 0.5s ease !important;
}

/* Custom scrollbar for modern browsers */
.event_listings_main::-webkit-scrollbar {
    width: 8px !important;
}

.event_listings_main::-webkit-scrollbar-track {
    background: #111111 !important;
}

.event_listings_main::-webkit-scrollbar-thumb {
    background: #FF4006 !important;
    border-radius: 4px !important;
}

/* Additional styles for better appearance */
.wpem-event-box-col {
    margin-bottom: 25px !important;
}

.wpem-row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.wpem-col {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.wpem-event-action-url {
    text-decoration: none !important;
    display: block !important;
    height: 100% !important;
}

.wpem-event-details {
    position: relative !important;
}

/* Hover effects for entire event box */
.wpem-event-layout-wrapper:hover .wpem-event-banner-img {
    opacity: 0.9 !important;
}

/* Neon glow effect for clubbing theme */
.wpem-event-layout-wrapper {
    box-shadow: 0 0 5px rgba(255, 64, 6, 0.3) !important;
}

.wpem-event-layout-wrapper:hover {
    box-shadow: 0 0 15px rgba(255, 64, 6, 0.6) !important;
}

/* Button styles */
.load_more_events:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 64, 6, 0.3) !important;
}

/* Form elements placeholder text */
.wpem-form-group input[type="text"]::placeholder {
    color: #888 !important;
    opacity: 1 !important;
    font-family: 'Syne', sans-serif !important;
}

.wpem-form-group input[type="text"]:-ms-input-placeholder {
    color: #888 !important;
    font-family: 'Syne', sans-serif !important;
}

.wpem-form-group input[type="text"]::-ms-input-placeholder {
    color: #888 !important;
    font-family: 'Syne', sans-serif !important;
}

/* Judul dengan font weight 800 */
.wpem-event-title h3, 
.wpem-heading-text, 
.load_more_events {
    font-weight: 800 !important;
}

/* Efek khusus untuk tema clubbing */
.wpem-event-title h3 {
    text-shadow: 0 0 10px rgba(255, 64, 6, 0.5) !important;
}

.wpem-event-layout-wrapper:hover .wpem-event-title h3 {
    text-shadow: 0 0 15px rgba(255, 64, 6, 0.8) !important;
}

/* Tambahan efek neon untuk judul event */
.wpem-event-title h3::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #FF4006;
    transition: width 0.3s;
    margin-top: 5px;
}

.wpem-event-layout-wrapper:hover .wpem-event-title h3::after {
    width: 50px !important;
}

/* Perbaikan Date Range */
.wpem-form-group .comiseo-daterangepicker-triggerbutton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    padding: 11px 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.wpem-form-group .comiseo-daterangepicker-triggerbutton > .comiseo-daterangepicker-display,
.wpem-form-group .comiseo-daterangepicker-triggerbutton .cdr-display {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .wpem-form-group .comiseo-daterangepicker-triggerbutton {
        display: flex !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important; /* cegah geser ke samping */
    }

    .comiseo-daterangepicker {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-width: 100% !important;
        background: #111 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .comiseo-daterangepicker-main {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important; /* sisakan buat tombol bawah */
        overflow: hidden !important;
    }

    /* paksa jadi single calendar */
    .ui-datepicker-multi {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ui-datepicker-group {
        width: 100% !important;
        float: none !important;
    }
    .ui-datepicker-group.ui-datepicker-group-last {
        display: none !important; /* hide bulan kedua */
    }

    .ui-datepicker {
        width: 100% !important;
        font-size: 1.1rem !important;
        background: #111 !important;
        border: none !important;
    }

    .ui-datepicker td, 
    .ui-datepicker th {
        width: 14.28% !important;
        height: 44px !important;
        text-align: center !important;
    }

    /* presets di atas kalender */
    .comiseo-daterangepicker-presets {
        order: -1 !important;
        width: 100% !important;
        border-bottom: 1px solid #333 !important;
        background: #1a1a1a !important;
        overflow-y: auto !important;
        max-height: 160px !important;
    }

    /* panel tombol bawah */
    .comiseo-daterangepicker-buttonpanel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 8px !important;
        background: #111 !important;
        border-top: 1px solid #333 !important;
        padding: 12px !important;
    }

    .comiseo-daterangepicker-buttonpanel button {
        flex: 1 !important;
        width: 100% !important;
        border-radius: 6px !important;
        min-width: auto !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-38db673 *//* ==================== WRAPPER UTAMA ==================== */
.comiseo-daterangepicker {
    background: #111 !important;
    color: #FF4006 !important; /* Orange utama */
    border: 1px solid #333 !important;
}

/* Reset semua UI */
.comiseo-daterangepicker *,
.ui-datepicker,
.ui-datepicker * {
    background: #111 !important;
    color: #FF4006 !important;
    border-color: #333 !important;
}

/* ==================== MAIN LAYOUT ==================== */
.comiseo-daterangepicker-main {
    gap: 15px !important;
    padding: 15px !important;
    min-height: 360px !important;
}

/* ==================== PRESETS ==================== */
.comiseo-daterangepicker-presets li {
    background: #1a1a1a !important; /* hitam sedikit lebih terang */
    border: 1px solid #333 !important;
    color: #FF4006 !important;
}

.comiseo-daterangepicker-presets li:hover {
    background: #FF4006 !important; /* orange saat hover */
    color: #111 !important; /* teks hitam */
    border-color: #FF4006 !important;
}

/* ==================== CALENDAR ==================== */
.ui-datepicker-header {
    background: #FF4006 !important; /* orange header */
    color: #111 !important; /* teks hitam */
}

.ui-datepicker-prev, .ui-datepicker-next {
    background: #333 !important;
    color: #FF4006 !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #FF4006 !important;
    color: #111 !important;
}

.ui-datepicker-calendar th {
    color: #FF4006 !important;
}

/* Tanggal default */
.ui-datepicker-calendar td a {
    background: #1a1a1a !important;
    color: #FF4006 !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    display: block !important;
    text-align: center !important;
    padding: 6px 0 !important;
    transition: 0.2s !important;
}

/* Hover tanggal */
.ui-datepicker-calendar td a:hover {
    background: #FF4006 !important;
    color: #111 !important;
    border-color: #FF4006 !important;
}

/* Tanggal start / end */
.ui-state-active,
.ui-datepicker-current-day .ui-state-default {
    background: #FF4006 !important;
    color: #111 !important;
    font-weight: bold !important;
    border-radius: 4px !important;
}

/* Tanggal di range (bukan start/end) */
.ui-datepicker-calendar .ui-state-highlight {
    background: #FF4006 !important;
    opacity: 0.4; /* transparan supaya beda dari start/end */
    color: #111 !important;
    border-radius: 4px !important;
}

/* Hover tanggal di range */
.ui-datepicker-calendar .ui-state-highlight:hover {
    opacity: 0.6 !important;
}

/* ==================== BUTTON PANEL ==================== */
button.ui-priority-primary {
    background: #FF4006 !important;
    color: #111 !important;
}
button.ui-priority-primary:hover {
    background: #FF6A33 !important; /* orange lebih terang saat hover */
}

button.ui-priority-secondary {
    background: #333 !important;
    color: #FF4006 !important;
}
button.ui-priority-secondary:hover {
    background: #444 !important;
    color: #FF4006 !important;
}/* End custom CSS */