/* style-responsive.css */

/* Sembunyikan elemen mobile secara default di desktop */
.header-mobile-content,
.mobile-overlay-menu,
.mobile-search-bar-overlay,
.mobile-main-nav {
    display: none;
}

/* ==================================== */
/* Styles for Desktop (min-width: 769px) */
/* ==================================== */
@media (min-width: 769px) {
    /* Tampilkan elemen desktop */
    .app-header {
        display: block; /* atau flex, sesuai layout header desktop Anda */
    }
    .header-desktop-top-bar,
    .desktop-main-nav {
        display: flex; /* Sesuaikan dengan layout desktop Anda */
    }

    /* Sembunyikan elemen mobile di desktop */
    .header-mobile-content,
    .mobile-overlay-menu,
    .mobile-search-bar-overlay,
    .mobile-main-nav {
        display: none !important; /* Penting untuk memastikan tersembunyi */
    }

    /* Atur ulang padding body jika ada padding untuk footer mobile */
    body {
        padding-bottom: 0; /* Hapus padding yang ditambahkan untuk footer mobile */
    }
}

/* ==================================== */
/* Styles for Mobile (max-width: 768px) */
/* ==================================== */
@media (max-width: 768px) {
    /* Sembunyikan elemen desktop di mobile */
    .app-header .header-desktop-top-bar,
    .desktop-main-nav {
        display: none !important;
    }

    /* Tampilkan header mobile */
    .header-mobile-content {
        display: block;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
        position: fixed; /* Header mobile tetap di atas */
        top: 0;
        left: 0;
        z-index: 999;
    }

    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px; /* Tinggi bar atas mobile */
    }

    .mobile-logo a {
        font-weight: bold;
        color: #ee4d2d; /* Warna khas Shopee */
        font-size: 1.5em;
        text-decoration: none;
    }

    .mobile-top-actions {
        display: flex;
        gap: 15px;
    }

    .mobile-top-actions a {
        color: #555;
        font-size: 1.2em;
        text-decoration: none;
    }

    /* Mobile Overlay Menu */
    .mobile-overlay-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Sembunyikan di luar layar */
        width: 70%; /* Lebar overlay */
        height: 100%;
        background-color: #ffffff;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: right 0.3s ease-in-out;
        display: flex; /* Menggunakan flex untuk layout internal */
        flex-direction: column;
        padding-top: 20px; /* Padding untuk konten */
    }

    .mobile-overlay-menu.is-open {
        right: 0; /* Tampilkan */
    }

    .mobile-overlay-menu .overlay-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }

    .mobile-overlay-menu .profile-info {
        display: flex;
        align-items: center;
    }

    .mobile-overlay-menu .overlay-profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
    }

    .mobile-overlay-menu .overlay-username {
        font-weight: bold;
        color: #333;
    }

    .mobile-overlay-menu .overlay-guest {
        color: #777;
    }

    .mobile-overlay-menu .close-overlay-menu {
        background: none;
        border: none;
        font-size: 1.5em;
        color: #555;
        cursor: pointer;
    }

    .mobile-overlay-menu .overlay-links {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1; /* Biarkan daftar link mengambil sisa ruang */
    }

    .mobile-overlay-menu .overlay-links li a {
        display: flex;
        align-items: center;
        padding: 15px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #eee;
    }

    .mobile-overlay-menu .overlay-links li a i {
        margin-right: 10px;
        color: #ee4d2d; /* Warna ikon */
    }

    .mobile-overlay-menu .overlay-links li:last-child a {
        border-bottom: none;
    }

    /* Mobile Search Bar Overlay */
    .mobile-search-bar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        z-index: 1001; /* Lebih tinggi dari overlay menu */
        display: flex;
        align-items: flex-start; /* Align form to top */
        padding-top: 15px; /* Padding dari atas */
        transform: translateY(-100%); /* Sembunyikan di luar layar atas */
        transition: transform 0.3s ease-in-out;
    }

    .mobile-search-bar-overlay.is-open {
        transform: translateY(0); /* Tampilkan */
    }

    .mobile-search-bar-overlay .mobile-search-form {
        display: flex;
        width: 90%;
        margin: 0 auto;
        border: 1px solid #eee;
        border-radius: 5px;
        overflow: hidden;
    }

    .mobile-search-bar-overlay .mobile-search-form input {
        flex-grow: 1;
        border: none;
        padding: 10px;
        outline: none;
        font-size: 1em;
    }

    .mobile-search-bar-overlay .mobile-search-form button {
        background-color: #f8f8f8;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        color: #555;
        font-size: 1em;
    }

    .mobile-search-bar-overlay .mobile-search-form .back-button-search-mobile {
        background-color: transparent;
        border-right: 1px solid #eee;
    }

    /* Fixed Footer Navigation for Mobile (Shopee-like) */
    .mobile-main-nav {
        display: block; /* Tampilkan di mobile */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff; /* Latar belakang putih */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Bayangan di atas */
        z-index: 998; /* Di bawah overlay tapi di atas konten utama */
        padding: 5px 0; /* Sedikit padding atas bawah */
    }

    .mobile-main-nav ul.mobile-nav-links {
        display: flex;
        justify-content: space-around; /* Menyebarkan item secara merata */
        align-items: center;
        list-style: none; /* Hapus bullet point */
        margin: 0;
        padding: 0;
    }

    .mobile-main-nav ul.mobile-nav-links li {
        flex: 1; /* Setiap item mengambil ruang yang sama */
        text-align: center;
    }

    .mobile-main-nav ul.mobile-nav-links li a {
        display: block; /* Buat link menjadi blok agar mudah diklik */
        text-decoration: none;
        color: #888888; /* Warna teks abu-abu untuk item tidak aktif */
        font-size: 0.75em; /* Ukuran font teks */
        padding: 8px 0; /* Padding untuk area klik */
        display: flex; /* Untuk menata ikon dan teks secara vertikal */
        flex-direction: column;
        align-items: center;
        position: relative; /* Untuk posisi badge */
    }

    .mobile-main-nav ul.mobile-nav-links li a i {
        font-size: 20px; /* Ukuran ikon */
        margin-bottom: 2px; /* Jarak antara ikon dan teks */
        color: #888888; /* Warna ikon tidak aktif */
    }

    .mobile-main-nav ul.mobile-nav-links li a span {
        display: block; /* Pastikan teks ada di baris baru */
    }

    .mobile-main-nav ul.mobile-nav-links li a.active-nav-link {
        color: #ee4d2d; /* Warna aktif mirip Shopee */
    }

    .mobile-main-nav ul.mobile-nav-links li a.active-nav-link i {
        color: #ee4d2d; /* Warna ikon aktif */
    }

    /* Penyesuaian badge untuk footer mobile */
    .mobile-main-nav .notification-badge {
        position: absolute;
        top: 5px; /* Sesuaikan posisi vertikal */
        right: 15px; /* Sesuaikan posisi horizontal */
        transform: translate(50%, -50%); /* Geser agar badge tidak menutupi */
        font-size: 0.65em; /* Ukuran badge lebih kecil */
        padding: 1px 4px;
        min-width: 16px;
        line-height: 1; /* Pastikan teks di tengah */
    }

    /* Padding pada body untuk menghindari konten tertutup footer */
    body {
        padding-top: 60px; /* Sesuaikan dengan tinggi header mobile Anda */
        padding-bottom: 60px; /* Sesuaikan dengan tinggi footer mobile Anda */
    }
}

/* --- Default / Light Theme Styles (Tema Terang) --- */
/* Ini adalah gaya dasar yang akan diterapkan jika tidak ada kelas tema lain, atau secara eksplisit untuk light-theme */
body.light-theme {
    /* Warna latar belakang dasar */
    background-color: #f0f2f5; /* Abu-abu terang */
    /* Warna teks dasar */
    color: #333; /* Abu-abu gelap */
}

body.light-theme .card-panel {
    background-color: #ffffff; /* Putih bersih untuk panel */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sedikit bayangan */
    border: 1px solid #e0e0e0;
}

body.light-theme .settings-sidebar a {
    color: #555;
}

body.light-theme .settings-sidebar a.active {
    background-color: #e6e6e6; /* Latar belakang untuk link aktif */
    color: #007bff; /* Warna teks untuk link aktif */
}

/* --- Dark Theme Styles (Tema Gelap) --- */
body.dark-theme {
    background-color: #1a1a1a; /* Latar belakang sangat gelap */
    color: #f0f2f5; /* Teks terang */
}

body.dark-theme .card-panel {
    background-color: #2c2c2c; /* Panel sedikit lebih terang dari background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
}

body.dark-theme .settings-sidebar a {
    color: #bbb;
}

body.dark-theme .settings-sidebar a.active {
    background-color: #3a3a3a;
    color: #6daffb; /* Biru terang untuk link aktif di tema gelap */
}

/* --- High-Contrast Theme Styles (Tema Kontras Tinggi) --- */
body.high-contrast-theme {
    background-color: #000000; /* Latar belakang hitam pekat */
    color: #ffff00; /* Teks kuning terang untuk kontras maksimal */
}

body.high-contrast-theme .card-panel {
    background-color: #000000;
    color: #ffff00;
    border: 2px solid #ffff00; /* Border kuning cerah */
    box-shadow: none; /* Tanpa bayangan untuk kontras bersih */
}

body.high-contrast-theme .settings-sidebar a {
    color: #ffff00;
}

body.high-contrast-theme .settings-sidebar a.active {
    background-color: #333333; /* Latar belakang abu-abu gelap untuk link aktif */
    color: #00ff00; /* Hijau terang untuk link aktif */
    border: 1px solid #00ff00;
}

/* --- General Styles (Pastikan ini ada dan sesuai) --- */
/* Beberapa gaya umum yang mungkin sudah ada di CSS Anda */
.settings-container {
    display: flex;
    max-width: 1000px;
    margin: 30px auto;
    gap: 20px; /* Jarak antara sidebar dan konten */
}

.settings-sidebar {
    flex: 0 0 200px; /* Lebar sidebar tetap */
    padding: 20px;
}

.settings-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-sidebar li {
    margin-bottom: 10px;
}

.settings-sidebar a {
    display: block;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.settings-sidebar a:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05); /* Sedikit perubahan hover di tema terang */
}
body.dark-theme .settings-sidebar a:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
}
body.high-contrast-theme .settings-sidebar a:hover:not(.active) {
    background-color: #111;
}


.settings-content {
    flex-grow: 1; /* Konten mengisi sisa ruang */
    padding: 20px;
}

/* Sembunyikan semua tab content secara default, JS yang akan menampilkan yang aktif */
.tab-content {
    display: none; /* Dikelola oleh JavaScript */
}

/* Contoh styling untuk input dan button agar konsisten dengan tema */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="date"],
body textarea,
body select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    background-color: inherit; /* Warisi dari body */
    color: inherit; /* Warisi dari body */
}

body.dark-theme input[type="text"],
body.dark-theme input[type="email"],
body.dark-theme input[type="password"],
body.dark-theme input[type="date"],
body.dark-theme textarea,
body.dark-theme select {
    border-color: #555;
    background-color: #333;
    color: #f0f2f5;
}

body.high-contrast-theme input[type="text"],
body.high-contrast-theme input[type="email"],
body.high-contrast-theme input[type="password"],
body.high-contrast-theme input[type="date"],
body.high-contrast-theme textarea,
body.high-contrast-theme select {
    border-color: #ffff00;
    background-color: #000;
    color: #ffff00;
}

body button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

body button:hover {
    background-color: #0056b3;
}

body.dark-theme button {
    background-color: #6daffb;
    color: #1a1a1a;
}
body.dark-theme button:hover {
    background-color: #4a8ee6;
}

body.high-contrast-theme button {
    background-color: #00ff00;
    color: #000;
    border: 2px solid #00ff00;
}
body.high-contrast-theme button:hover {
    background-color: #00cc00;
}

/* Styling untuk pesan */
p[style="color: green;"], p[style="color: red;"] {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Tambahan: Styling untuk pratinjau gambar profil */
.profile-picture-upload {
    text-align: center;
    margin-bottom: 20px;
}

.profile-pic-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 10px;
    border: 2px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

body.dark-theme .profile-pic-preview {
    border-color: #555;
}

body.high-contrast-theme .profile-pic-preview {
    border-color: #ffff00;
}


/* --- Komentar Section --- */
.comments-section {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

.comments-section h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.comment-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end; /* Memastikan tombol di bawah textarea */
}

.comment-form textarea {
    flex-grow: 1; /* Mengambil ruang sebanyak mungkin */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height: 60px;
    resize: vertical; /* Hanya memungkinkan resize vertikal */
    font-size: 0.95em;
}

.comment-form .btn {
    padding: 10px 20px;
    font-size: 0.9em;
    white-space: nowrap; /* Mencegah tombol pecah baris */
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar komentar */
}

.comment-item {
    background-color: #f0f2f5; /* Warna latar belakang mirip bubble komentar FB */
    padding: 10px 15px;
    border-radius: 18px; /* Sudut melengkung */
    position: relative;
    word-wrap: break-word; /* Mencegah teks keluar dari batas */
}

.comment-item .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    position: relative; /* Untuk positioning options */
}

.comment-item .commenter-profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.comment-item .profile-pic-comment {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 1px solid #eee;
}

.comment-item .commenter-username {
    font-size: 0.95em;
    color: #050505; /* Warna teks username */
}

.comment-item .comment-time {
    font-size: 0.8em;
    color: #65676b; /* Warna teks waktu */
    margin-left: 10px;
}

.comment-item .comment-options {
    position: absolute; /* Posisikan tombol edit/hapus di pojok */
    right: 0;
    top: 5px;
    display: flex;
    gap: 5px;
}

.comment-item .comment-options .action-icon {
    background: none;
    border: none;
    color: #65676b;
    font-size: 0.9em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.comment-item .comment-options .action-icon:hover {
    background-color: #e4e6eb;
}

.comment-item .comment-content {
    font-size: 0.9em;
    line-height: 1.4;
    color: #1c1e21; /* Warna teks konten */
    margin-top: 5px;
    margin-left: 40px; /* Sejajar dengan teks komentar Facebook */
    padding-right: 15px; /* Ruang untuk edit/delete jika terlalu panjang */
}

.no-comments {
    text-align: center;
    color: #65676b;
    margin-top: 20px;
    font-style: italic;
}

/* Styles for Edit Comment Form */
.edit-comment-form {
    margin-top: 10px;
    margin-left: 40px; /* Sejajar dengan konten komentar */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.edit-comment-textarea {
    width: calc(100% - 20px); /* Kurangi padding */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 60px;
    resize: vertical;
    font-size: 0.9em;
}

.edit-comment-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end; /* Rata kanan tombol */
}

.edit-comment-actions .btn-sm { /* Contoh gaya untuk tombol kecil */
    padding: 5px 10px;
    font-size: 0.85em;
}

/* Utility classes (dari alert-message yang sudah ada) */
.alert-container {
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
}

.alert-message {
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    color: white; /* Default text color for alerts */
}

.alert-message.green {
    background-color: #4CAF50; /* Green */
}

.alert-message.red {
    background-color: #f44336; /* Red */
}

.alert-message.info {
    background-color: #2196F3; /* Blue */
}