/* =========================================
   MY ACCOUNT CUSTOM STYLES (Mobile Friendly)
   ========================================= */

/* 1. Wrapper Utama: Mengatur layout menjadi Flexbox */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Default: Susun vertikal untuk Mobile */
    gap: 30px;
}

/* Clear floats jika ada style lama yang mengganggu */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
    content: "";
    display: table;
    clear: both;
}

/* 2. Styling Navigasi (Menu Samping/Kiri) */
.woocommerce-MyAccount-navigation {
    width: 100% !important; /* Paksa full width di mobile */
    float: none !important; /* Hapus float default */
}

/* Menghapus style list default */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Menu vertikal di mobile */
    gap: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Agar border radius kelihatan */
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Item Menu */
.woocommerce-MyAccount-navigation li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}
.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

/* Link Menu (Tombol) - Diubah jadi Flex untuk Ikon */
.woocommerce-MyAccount-navigation-link a {
    display: flex; /* Diubah dari block ke flex */
    align-items: center; /* Vertikal align tengah */
    gap: 12px; /* Jarak antara ikon dan teks */
    padding: 15px 20px;
    color: #333;
    text-decoration: none !important;
    font-weight: 500;
    transition:
        background 0.2s,
        color 0.2s;
}

/* Style untuk Ikon SVG di Menu */
.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Agar ikon tidak mengecil */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    fill: #555; /* Warna ikon default */
    transition: fill 0.2s ease;
}

/* Efek Hover - Teks & Ikon */
.woocommerce-MyAccount-navigation-link a:hover {
    background-color: #f9f9f9;
    color: #000;
}
.woocommerce-MyAccount-navigation-link a:hover .nav-icon svg {
    fill: #000; /* Ikon ikut gelap saat hover */
}

/* Item Aktif (Halaman saat ini) */
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: #000; /* Warna background aktif (hitam) */
    color: #fff !important; /* Warna teks aktif (putih) */
}
.woocommerce-MyAccount-navigation-link.is-active .nav-icon svg {
    fill: #fff; /* Warna ikon aktif (putih) */
}

/* 3. Styling Area Konten */
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    padding: 25px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    min-height: 300px;
}

/* Perbaikan tipografi di dalam konten */
.woocommerce-MyAccount-content p {
    line-height: 1.7;
    color: #444;
}

/* =========================================
   DESKTOP LAYOUT (Responsive)
   ========================================= */
@media (min-width: 768px) {
    /* Ubah layout menjadi 2 kolom (Sidebar + Konten) */
    .woocommerce-account .woocommerce {
        flex-direction: row;
        align-items: flex-start; /* Align ke atas */
    }

    /* Navigasi menjadi Sidebar Fixed Width */
    .woocommerce-MyAccount-navigation {
        flex: 0 0 250px; /* Lebar sidebar 250px */
        position: sticky;
        top: 20px; /* Sticky saat scroll */
    }

    /* Konten mengisi sisa ruang */
    .woocommerce-MyAccount-content {
        flex: 1;
    }
}

/* =========================================
   HEADER & TOGGLE BUTTON STYLES
   ========================================= */

/* Tambahan: Header Halaman */
body.woocommerce-account .site-header {
    border-bottom: 1px solid #eaeaea;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Agar header sejajar */
    padding: 1rem;
}
body.woocommerce-account .site-header .custom-logo-link img {
    max-height: 36px;
    width: auto;
}

body.woocommerce-account .page-header {
    margin-bottom: 20px;
    display: none;
}
.entry-title {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Style untuk Tombol Toggle di Header */
#my-account-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex; /* Flex untuk ikon SVG */
    align-items: center;
    gap: 8px;
}

#my-account-toggle-btn:hover {
    background-color: #333;
    transform: scale(1.05);
}

/* Style untuk Ikon SVG di dalam Tombol Toggle */
#my-account-toggle-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Warna ikon mengikuti warna teks (putih) */
}

/* Overlay Gelap */
.my-account-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Gradasi gelap */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* Status Aktif Overlay */
body.menu-slide-open .my-account-overlay {
    opacity: 1;
    visibility: visible;
}

/* Panel Geser (Sidebar) dari Kanan */
.my-account-slide-panel {
    position: fixed;
    top: 0;
    right: -300px; /* Sembunyi di kanan layar */
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    overflow-y: auto; /* Scroll jika menu panjang */
    padding: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Status Aktif Panel (Muncul) */
body.menu-slide-open .my-account-slide-panel {
    right: 0;
}

/* Konten di dalam Panel */
.my-account-slide-panel h3 {
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.my-account-slide-panel h3 svg {
    width: 24px;
    height: 24px;
    fill: #333;
}

.my-account-slide-panel .panel-menu-content {
    padding: 0; /* Padding diatur per item */
    flex: 1;
}

.my-account-slide-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-account-slide-panel ul li {
    /* border-bottom: 1px solid #f0f0f0; */ /* Opsional border */
}

.my-account-slide-panel ul li a {
    display: flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    transition:
        background 0.2s,
        color 0.2s;
}

.my-account-slide-panel ul li a:hover {
    background-color: #f9f9f9;
    color: #000;
}

/* Ikon di dalam Panel (warna hover/aktif) */
.my-account-slide-panel ul li a:hover .nav-icon svg {
    fill: #000;
}

/* Tombol Close di dalam Panel */
.slide-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    z-index: 10;
}

/* Sembunyikan menu asli di mobile (opsional) */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
        display: none !important;
    }
}