/* css/style.css */

/* Definisi Variabel CSS untuk Warna Tema (Default OVO) */
/* Pastikan bagian ini sama persis dengan yang ada di :root di includes/header.php */
:root {
    --primary-color: #4F1D77; /* Ungu OVO */
    --primary-color-hover: #3A1657;
    --primary-text-color: #ffffff;

    --secondary-color: #FFDD00; /* Kuning OVO */
    --secondary-color-hover: #E0C000;
    --secondary-text-color: #222222; /* Teks gelap di atas kuning */

    --success-color: #4CAF50;
    --success-bg-light: #E8F5E9;
    --success-text-color: #2E7D32;

    --warning-color: #FFC107;
    --warning-bg-light: #FFF8E1;
    --warning-text-color: #664d03;

    --danger-color: #F44336;
    --danger-bg-light: #FFEBEE;
    --danger-text-color: #C62828;

    --info-color: #2196F3;
    --info-bg-light: #E3F2FD;
    --info-text-color: #1565C0;

    --body-bg: #F2F0F7;
    --card-bg: #ffffff;
    --text-color-dark: #222222;
    --text-color-medium: #555555;
    --text-color-light: #ffffff;
    --border-color: #E0E0E0;
    --shadow-light: rgba(0,0,0,0.05);
    --shadow-medium: rgba(0,0,0,0.15);

    --primary-color-rgb: 79, 29, 119;
    --secondary-color-rgb: 255, 221, 0;
}

/* Base Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color-dark);
}

/* --- Global Container --- */
.container-main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--card-bg);
    box-shadow: 0 0 15px var(--shadow-light); /* Shadow lebih tebal sedikit */
    border-radius: 12px; /* Lebih melengkung */
}

/* --- Header Styles (Pindahkan dari includes/header.php <style> ke sini) --- */
.header-top-bar {
    background-color: var(--primary-color); /* Bar atas menggunakan warna primary */
    font-size: 0.85em;
    padding: 5px 0;
    color: var(--primary-text-color);
}
.header-top-bar a {
    color: var(--primary-text-color);
    text-decoration: none;
    margin-left: 15px;
}
.header-top-bar a:hover {
    text-decoration: underline;
    color: var(--secondary-color); /* Hover dengan kuning OVO */
}

.main-header {
    background-color: var(--primary-color); /* Latar belakang header ungu OVO */
    padding: 10px 0;
    box-shadow: 0 2px 10px var(--shadow-medium); /* Bayangan lebih jelas */
    border-bottom: none;
}
.main-header .navbar-brand {
    font-size: 1.75em;
    font-weight: bold;
    color: var(--primary-text-color); /* Teks logo putih */
    text-decoration: none;
    margin-right: 20px;
}
.main-header .navbar-brand img {
    height: 30px;
    vertical-align: middle;
}

.search-form-header {
    flex-grow: 1;
    max-width: 600px;
    position: relative;
}
.search-form-header .form-control {
    border-radius: 25px; /* Lebih melengkung seperti OVO */
    border-color: var(--border-color);
    box-shadow: none;
    padding: 0.5rem 1rem;
    padding-right: 2.5rem;
    background-color: var(--card-bg); /* Input search bar putih */
    color: var(--text-color-dark);
}
.search-form-header .form-control::placeholder {
    color: var(--text-color-medium);
}
.search-form-header .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--secondary-color-rgb), 0.25); /* Focus shadow kuning OVO */
    border-color: var(--secondary-color);
}
.search-form-header .btn-outline-success {
    background-color: var(--secondary-color); /* Tombol cari warna kuning OVO */
    border-color: var(--secondary-color);
    color: var(--secondary-text-color); /* Teks gelap di atas kuning */
    border-radius: 25px;
    padding: 0.5rem 1rem;
}
.search-form-header .btn-outline-success:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}

.header-icons .nav-link {
    color: var(--primary-text-color); /* Ikon dan teks putih */
    font-size: 1.2em;
    margin-left: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    padding: 0.5rem 0.25rem;
}
.header-icons .nav-link:hover {
    color: var(--secondary-color); /* Hover kuning OVO */
}
.header-icons .nav-link span {
    font-size: 0.7em;
    display: block;
    margin-top: 3px;
}
.header-icons .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-medium);
}
.header-icons .dropdown-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Ungu transparan */
    color: var(--primary-color); /* Teks dropdown item saat hover */
}

/* --- Konten Utama (Produk, Kategori, Lainnya) --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color-dark); /* Judul umum gelap */
    font-weight: 500; /* Medium weight */
}

/* Filter Kategori (index.php) */
.category-filter {
    background-color: var(--card-bg); /* Putih */
    border-radius: 12px; /* Lebih melengkung */
    box-shadow: 0 4px 10px var(--shadow-light);
    padding: 1.5rem !important; /* Padding lebih banyak */
}
.category-filter .btn { /* Tombol filter */
    border-radius: 20px; /* Sangat melengkung */
    padding: 0.5rem 1.2rem;
    font-weight: 500;
}
.category-filter .btn-primary.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
}
.category-filter .btn-outline-primary {
    border-color: var(--border-color); /* Border tombol tidak terlalu mencolok */
    color: var(--text-color-medium);
    background-color: var(--body-bg); /* Background tombol tidak aktif */
}
.category-filter .btn-outline-primary:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Hover ungu transparan */
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Kartu Produk (index.php) */
.card {
    border-radius: 12px; /* Lebih melengkung */
    box-shadow: 0 4px 10px var(--shadow-light); /* Bayangan lebih terlihat */
    border: none; /* Hapus border default Bootstrap */
    background-color: var(--card-bg);
    overflow: hidden; /* Penting agar border-radius berfungsi pada gambar */
}
.card-img-top {
    border-top-left-radius: 12px; /* Sesuaikan dengan card border-radius */
    border-top-right-radius: 12px;
}
.card-body {
    padding: 0.8rem 1rem 1rem 1rem; /* Padding disesuaikan: atas, kanan, bawah, kiri */
}
.card-title {
    font-weight: 500; /* Medium weight */
    color: var(--text-color-dark);
    line-height: 1.3;
}
.card-text.text-muted.small { /* Kategori produk */
    font-size: 0.75rem !important; /* Lebih kecil */
    color: var(--text-color-medium) !important;
    margin-bottom: 0.5rem;
}
.card-text.text-start.fw-bold.fs-5 { /* Harga produk */
    color: var(--primary-color) !important; /* Harga ungu OVO */
    font-size: 1.35rem !important; /* Ukuran harga */
    margin-bottom: 0.5rem !important;
}
.card-text.text-start.small { /* Stok */
    font-size: 0.7rem !important; /* Stok lebih kecil lagi */
    color: var(--text-color-medium) !important;
}
.card-body .btn-primary {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px; /* Tombol kecil melengkung */
    background-color: var(--secondary-color); /* Tombol detail kuning OVO */
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}
.card-body .btn-primary:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}


/* --- Halaman Detail Produk (product.php) --- */
.back-link {
    color: var(--text-color-medium) !important;
}
.back-link:hover {
    color: var(--primary-color) !important;
}
.product-detail .img-fluid {
    border-radius: 12px; /* Gambar detail melengkung */
    box-shadow: 0 4px 15px var(--shadow-medium);
}
.product-detail h1 {
    color: var(--text-color-dark);
    font-weight: 700; /* Lebih tebal */
}
.product-detail .lead.text-success.fw-bold.fs-3 { /* Harga */
    color: var(--primary-color) !important; /* Harga ungu OVO */
    font-size: 2rem !important; /* Ukuran harga lebih besar */
}
.product-detail .text-secondary {
    color: var(--text-color-medium) !important;
}
.product-detail .btn-success { /* Tambah ke Keranjang */
    background-color: var(--secondary-color); /* Kuning OVO */
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
    border-radius: 8px;
    font-size: 1.1em;
}
.product-detail .btn-success:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}
.product-detail .out-of-stock {
    color: var(--danger-color);
}
.product-detail .description h3 {
    color: var(--text-color-dark);
    font-weight: 600;
}


/* --- Halaman Keranjang (cart.php) --- */
.cart-table th {
    background-color: var(--body-bg); /* Header tabel */
    color: var(--text-color-dark);
}
.cart-table td {
    color: var(--text-color-dark);
}
.cart-total {
    color: var(--text-color-dark);
}
.cart-total span {
    color: var(--primary-color); /* Total harga ungu */
}
.cart-actions .update-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
    border-radius: 8px;
}
.cart-actions .update-button:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}
.cart-actions .checkout-button {
    background-color: var(--secondary-color); /* Kuning */
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
    border-radius: 8px;
}
.cart-actions .checkout-button:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}
.cart-actions .remove-button {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--primary-text-color); /* Teks putih */
    border-radius: 8px;
}


/* --- Halaman Checkout (checkout.php) --- */
.cart-summary {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-light);
}
.cart-summary .total-summary span {
    color: var(--primary-color);
}
.form-group label {
    color: var(--text-color-dark);
}
.form-control, .form-select {
    border-radius: 8px; /* Input dan select melengkung */
    border-color: var(--border-color);
    box-shadow: none;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
    border-color: var(--primary-color);
}
.button-submit.btn-success { /* Tombol Buat Pesanan */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
    border-radius: 8px;
    font-size: 1.1em;
}
.button-submit.btn-success:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}
.order-details-summary {
    background-color: var(--body-bg); /* Background konfirmasi */
    border-color: var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-light);
}
.order-details-summary .btn-success { /* Tombol WA di konfirmasi */
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}
.order-details-summary .btn-success:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}
.order-details-summary .btn-primary { /* Tombol Kembali ke Beranda di konfirmasi */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
}
.order-details-summary .btn-primary:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}
.order-details-summary .btn-info { /* Tombol Lacak Pesanan di konfirmasi */
    background-color: var(--info-color);
    border-color: var(--info-color);
}


/* --- Halaman Bantuan & FAQ (help_faq.php), Cara Belanja (how_to_shop.php), Kebijakan (privacy.php, terms.php, return_policy.php), Karir (careers.php), Status Pesanan (order_status.php) --- */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden; /* Penting untuk border-radius */
}
.accordion-button {
    background-color: var(--card-bg);
    color: var(--text-color-dark);
    font-weight: 500;
    border-radius: 12px !important;
}
.accordion-button:not(.collapsed) {
    color: var(--primary-color); /* Warna judul saat aktif */
    background-color: var(--body-bg); /* Background saat aktif */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); /* Garis bawah halus */
}
.accordion-body {
    background-color: var(--card-bg);
    color: var(--text-color-medium);
}
.accordion-body a {
    color: var(--primary-color); /* Link internal di body accordion */
}
.accordion-body a:hover {
    color: var(--primary-color-hover);
}
.list-group-item {
    background-color: var(--card-bg);
    color: var(--text-color-dark);
    border-color: var(--border-color);
}

/* Halaman Status Pesanan (order_status.php) */
.card-header.bg-success { /* Untuk header detail pesanan */
    background-color: var(--primary-color) !important; /* Gunakan primary color OVO */
    color: var(--primary-text-color);
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* Badge status (contoh untuk Pending) */
.badge.bg-warning {
    background-color: var(--secondary-color) !important; /* Kuning OVO untuk warning/pending */
    color: var(--secondary-text-color) !important;
}
/* Pastikan badge status lainnya juga menggunakan variabel CSS yang sesuai */
.badge.bg-success { background-color: var(--success-color) !important; color: var(--success-text-color) !important;}
.badge.bg-info { background-color: var(--info-color) !important; color: var(--info-text-color) !important;}
.badge.bg-danger { background-color: var(--danger-color) !important; color: var(--danger-text-color) !important;}
.badge.bg-primary { background-color: var(--primary-color) !important; color: var(--primary-text-color) !important;} /* Untuk shipped, bisa tetap primary */
.order-details-summary .btn-success { /* Tombol WA di konfirmasi checkout */
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-text-color);
}
.order-details-summary .btn-success:hover {
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}


/* --- Footer Styles (Pindahkan dari includes/footer.php <style> ke sini) --- */
footer {
    background-color: var(--primary-color); /* Footer menjadi ungu OVO */
    color: var(--primary-text-color);
    box-shadow: 0 -2px 10px var(--shadow-medium);
    border-radius: 0; /* Pastikan tidak ada border-radius di sini jika ingin full width */
}
footer h5 {
    color: var(--secondary-color); /* Judul kolom footer kuning OVO */
}
footer p {
    color: var(--primary-text-color); /* Paragraf putih */
}
footer a {
    color: var(--primary-text-color); /* Link footer putih */
}
footer a:hover {
    color: var(--secondary-color); /* Link hover kuning OVO */
}
footer strong {
    color: var(--secondary-color); /* Nama toko di copyright kuning OVO */
}
footer hr {
    border-color: rgba(255, 255, 255, 0.2) !important; /* Warna hr lebih terang */
}

/* --- Admin Panel (admin/ folder) --- */
/* Anda juga harus mengupdate CSS di admin/index.php, admin/add_product.php, admin/edit_product.php, admin/orders.php, dan admin/categories.php
   untuk menggunakan variabel CSS dan styling OVO. Ini adalah proses terpisah karena mereka tidak meng-include header/footer utama. */
/* Contoh untuk admin/index.php */
/* .admin-header { background-color: var(--primary-color); }
.admin-header h1 { color: var(--primary-text-color); }
.admin-nav a { color: var(--primary-text-color); }
.admin-nav a:hover { color: var(--secondary-color); }
.admin-container { background-color: var(--card-bg); box-shadow: 0 0 15px var(--shadow-light); border-radius: 12px; }
.admin-container h2 { color: var(--text-color-dark); }
.admin-container .card { border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-light); }
.admin-container .card.bg-primary { background-color: var(--primary-color) !important; }
.admin-container .card.bg-success { background-color: var(--success-color) !important; }
.admin-container .card.bg-info { background-color: var(--info-color) !important; }
.admin-container .card.bg-warning { background-color: var(--secondary-color) !important; color: var(--secondary-text-color) !important; }
.admin-container .card.bg-danger { background-color: var(--danger-color) !important; }
.admin-container .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--primary-text-color); border-radius: 8px; }
.admin-container .btn-primary:hover { background-color: var(--primary-color-hover); border-color: var(--primary-color-hover); }
.admin-container .btn-warning { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--secondary-text-color); border-radius: 8px; }
.admin-container .btn-warning:hover { background-color: var(--secondary-color-hover); border-color: var(--secondary-color-hover); }
.admin-container .btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--primary-text-color); border-radius: 8px; }
.admin-list-table th { background-color: var(--body-bg); color: var(--text-color-dark); }
.admin-list-table td { color: var(--text-color-dark); }
*/