/**
 * Custom Mega Menu Frontend Styles
 *
 * Basic layout and styling for the mega menu functionality.
 * Styling controls in the Elementor widget should override/complement these.
 *
 * @version 1.1.0
 */

/* Widget Wrapper - Pastikan class ini sesuai dengan yang Anda gunakan di render() */
.elementor-widget-custom-mega-menu .custom-mega-menu-widget {
    position: relative; /* Konteks untuk dropdown yang diposisikan absolut */
}

/* Daftar Menu Utama */
.custom-mega-menu-widget ul.custom-main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Asumsi layout horizontal default */
    flex-wrap: wrap; /* Izinkan wrap jika perlu */
}

/* Item Menu Individual */
.custom-mega-menu-widget ul.custom-main-menu > li {
    position: relative; /* Diperlukan untuk dropdown absolut */
    /* Jarak antar item sebaiknya diatur oleh kontrol widget */
    /* margin-right: 10px; */
}

/* Link Item Menu (Trigger) */
.custom-mega-menu-widget ul.custom-main-menu > li > a {
    display: block; /* Agar link mengisi area padding */
    text-decoration: none;
    position: relative; /* Untuk potensi pseudo-element pointer */
    /* Padding, Warna, Tipografi idealnya dari kontrol widget */
     padding: 15px 20px; /* Contoh padding default */
     color: #333; /* Contoh warna default */
     transition: color 0.3s ease, background-color 0.3s ease; /* Transisi halus */
}

/* Gaya untuk item yang ditandai sebagai trigger mega menu */
.custom-mega-menu-widget li.menu-item-has-mega > a {
    /* Opsional: Tambahkan indikator (misal panah bawah) */
    /* cursor: pointer; */ /* Bisa ditambahkan jika link utama tidak punya href valid */
}
/* Contoh indikator menggunakan pseudo-element (membutuhkan font icon) */
/* .custom-mega-menu-widget li.menu-item-has-mega > a::after {
    content: '\f078'; // Font Awesome caret down
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 8px;
    font-size: 0.8em;
    display: inline-block;
    transition: transform 0.3s ease;
} */
/* .custom-mega-menu-widget li.menu-item-has-mega.mega-menu-open > a::after {
    transform: rotate(180deg); // Putar panah saat terbuka
} */


/* Kontainer Dropdown Mega Menu */
.custom-mega-menu-widget li.menu-item-has-mega .mega-menu-content-container {
    position: absolute;
    top: 100%; /* Posisikan di bawah item li induk */
    left: 0; /* Sejajarkan kiri dengan li induk (default) */
    z-index: 1000; /* Pastikan di atas konten lain */
    background-color: #fff; /* Latar belakang default */
    min-width: 300px; /* Lebar minimum contoh */
    /* Lebar bisa diatur lebih lanjut dari kontrol widget */
     width: 500px; /* Contoh lebar tetap, atau 'auto', 'max-content' */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Bayangan contoh */
    border: 1px solid #eee; /* Border contoh */
    padding: 25px; /* Padding contoh - idealnya bisa diatur */
    display: none; /* Sembunyikan default, JS yang akan menampilkan */
    opacity: 0; /* Mulai transparan untuk transisi fade */
    transform: translateY(15px); /* Mulai sedikit di bawah untuk transisi slide */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transisi halus */
    box-sizing: border-box; /* Padding & border termasuk dalam total ukuran */
}

/* Gaya saat mega menu terbuka */
.custom-mega-menu-widget li.menu-item-has-mega.mega-menu-open > .mega-menu-content-container {
    display: block; /* Tampilkan */
    opacity: 1;
    transform: translateY(0);
}

/* Indikator Loading */
.custom-mega-menu-widget .mega-menu-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Pastikan area loading terlihat */
    color: #888;
    font-size: 14px;
    text-align: center;
}
/* Menggunakan class spinner Elementor (pastikan ada di versi Anda) */
.custom-mega-menu-widget .mega-menu-loading .e-load-more-spinner {
    display: inline-block;
}
.custom-mega-menu-widget .mega-menu-loading .e-load-more-spinner-loader {
     width: 25px;
     height: 25px;
     border: 2px solid rgba(0, 0, 0, 0.2);
     /* Warna border atas bisa diambil dari Global Colors Accent Elementor */
     border-top-color: var(--e-global-color-accent, #61ce70);
     border-radius: 50%;
     animation: cwe-spinner-spin 1s linear infinite; /* Ganti nama animasi agar unik */
}
@keyframes cwe-spinner-spin {
    to { transform: rotate(360deg); }
}


/* Konten di dalam mega menu */
.custom-mega-menu-widget .mega-menu-content-container > div[data-elementor-type] {
    /* Mungkin perlu reset margin jika Elementor menambahkan margin default */
    /* margin: 0; */
}

/* --- Pertimbangan Responsif --- */
/* Contoh: Buat dropdown full width di mobile */
/* @media (max-width: 767px) { // Sesuaikan breakpoint
    .custom-mega-menu-widget li.menu-item-has-mega .mega-menu-content-container {
        width: 100vw; // Full viewport width
        left: 50%; // Pusatkan relatif ke viewport
        transform: translateX(-50%); // Tarik kembali 50% lebarnya
        position: absolute; // Atau 'fixed' jika perlu
        top: auto; // Atau sesuaikan
        bottom: auto; // Atau sesuaikan
        max-width: none;
        box-shadow: none;
        border-left: none;
        border-right: none;
        // Perlu penanganan untuk menu utama yang tersembunyi (toggle)
    }
} */

/* --- Dropdown Rata Kanan (Contoh) --- */
/* Jika ada opsi alignment, perlu class seperti ini */
/* .elementor-nav-menu__align-right .custom-mega-menu-widget li.menu-item-has-mega .mega-menu-content-container {
    left: auto;
    right: 0; // Sejajarkan kanan dengan li induk
} */

/* --- Dropdown Rata Tengah (Lebih kompleks) --- */
/* .elementor-nav-menu__align-center .custom-mega-menu-widget li.menu-item-has-mega .mega-menu-content-container {
    left: 50%;
    transform: translateX(-50%); // Centering dasar
    // Mungkin perlu JS untuk penyesuaian posisi agar tidak keluar viewport
} */