/* ============================================================
   VERO BAKERY — Tema utama (cokelat roti / krem)
   ============================================================ */
:root{
  --vero:#7b3f00;
  --vero-2:#b5651d;
  --vero-soft:#fff7ef;
  --vero-cream:#f3e6d6;
  --vero-ink:#2b2b2b;
  --vero-line:#ead9c6;
}
*{ box-sizing:border-box; }
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--vero-ink);
  background:var(--vero-soft);
}
a{ text-decoration:none; }

/* ---------- Tombol ---------- */
.btn-vero{
  background:var(--vero); color:#fff; border:1px solid var(--vero);
  border-radius:10px; font-weight:600;
}
.btn-vero:hover{ background:#612f00; color:#fff; }
.btn-vero-outline{
  background:transparent; color:var(--vero); border:1px solid var(--vero-2);
  border-radius:10px; font-weight:600;
}
.btn-vero-outline:hover{ background:var(--vero); color:#fff; }

/* ---------- Navbar ---------- */
.vero-navbar{
  background:#fff; border-bottom:1px solid var(--vero-line);
  box-shadow:0 2px 10px rgba(123,63,0,.05);
}
.vero-navbar .navbar-brand{ font-weight:800; color:var(--vero); font-size:1.4rem; letter-spacing:.5px; }
.vero-navbar .navbar-brand span{ color:var(--vero-2); }
.vero-navbar .nav-link{ color:#5a4a3c; font-weight:500; }
.vero-navbar .nav-link:hover,.vero-navbar .nav-link.active{ color:var(--vero); }
.badge-float{ position:absolute; top:2px; right:0; font-size:.62rem; }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(120deg,var(--vero-cream),var(--vero-soft)); border:1px solid var(--vero-line); }
.hero-title{ font-weight:800; color:var(--vero); font-size:2.1rem; line-height:1.2; }
.hero-title em{ color:var(--vero-2); font-style:italic; }
.hero-sub{ color:#6c5b4b; font-size:1.05rem; margin:.75rem 0 1.25rem; }
.hero-img{ width:100%; height:100%; min-height:280px; object-fit:cover; }

/* ---------- Judul section ---------- */
.section-title{ font-weight:700; color:var(--vero); position:relative; }
.link-vero{ color:var(--vero-2); font-weight:600; }
.link-vero:hover{ color:var(--vero); }

/* ---------- Kartu produk ---------- */
.produk-card{
  border:1px solid var(--vero-line); border-radius:14px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; background:#fff;
}
.produk-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(123,63,0,.12); }
.produk-thumb{ display:block; aspect-ratio:1/1; overflow:hidden; background:#f2ece4; }
.produk-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.produk-card:hover .produk-thumb img{ transform:scale(1.05); }
.produk-card .card-title a{ color:var(--vero-ink); }
.produk-card .card-title a:hover{ color:var(--vero); }
.badge-kategori{
  display:inline-block; font-size:.7rem; font-weight:600; color:var(--vero-2);
  background:var(--vero-soft); border:1px solid var(--vero-line);
  padding:.1rem .5rem; border-radius:20px;
}
.harga{ color:var(--vero); font-weight:800; }
.detail-img{ width:100%; object-fit:cover; border:1px solid var(--vero-line); }

/* ---------- Stok ---------- */
.stok{ font-size:.8rem; font-weight:600; }
.stok-ada{ color:#1f7a44; }
.stok-habis{ color:#b02a37; }

/* ---------- Keranjang / checkout ---------- */
.cart-thumb{ width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--vero-line); }
.opsi-box,.jadwal-box{
  display:block; border:1.5px solid var(--vero-line); border-radius:10px;
  padding:.7rem .8rem; cursor:pointer; background:#fff; transition:.15s;
}
.opsi-box:hover,.jadwal-box:hover{ border-color:var(--vero-2); }
.opsi-box:has(input:checked),.jadwal-box:has(input:checked){
  border-color:var(--vero); background:var(--vero-soft); box-shadow:0 0 0 2px rgba(123,63,0,.08);
}
.jadwal-box.penuh{ opacity:.5; cursor:not-allowed; background:#f6f2ee; }

/* ---------- Auth ---------- */
.auth-card{ border:1px solid var(--vero-line); border-radius:16px; box-shadow:0 8px 30px rgba(123,63,0,.07); }

/* ---------- Statistik ---------- */
.stat-box,.stat-card{
  background:#fff; border:1px solid var(--vero-line); border-radius:12px;
  padding:1rem; text-align:center; font-size:.85rem; color:#6c5b4b;
}
.stat-num{ font-size:1.6rem; font-weight:800; color:var(--vero); }

/* ---------- Akun sidebar ---------- */
.akun-side{ border:1px solid var(--vero-line); border-radius:14px; }
.akun-avatar{ font-size:3rem; color:var(--vero-2); }
.akun-side .nav-link{ color:#5a4a3c; border-radius:8px; }
.akun-side .nav-link.active,.akun-side .nav-link:hover{ background:var(--vero-soft); color:var(--vero); }

/* ---------- Badge status pesanan (solid, tema Vero) ---------- */
.badge-status{ font-weight:600; padding:.4em .7em; border-radius:20px; color:#fff; }
.status-pending{   background:#c79a3e; }
.status-confirmed{ background:#7b3f00; }
.status-process{   background:#b5651d; }
.status-ready{     background:#a07b2c; }
.status-delivered{ background:#1f7a44; }
.status-cancelled{ background:#b02a37; }

/* ---------- Footer ---------- */
.vero-footer{ background:#fff; border-top:1px solid var(--vero-line); color:#6c5b4b; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-body{ background:#f6f1ea; }
.admin-sidebar{
  width:248px; min-height:100vh; background:var(--vero); color:#fff;
  position:sticky; top:0;
}
.admin-sidebar .brand{ font-weight:800; }
.admin-sidebar .brand span{ color:#f0c89b; font-weight:400; }
.admin-sidebar .nav-link{ color:#f3e3d3; border-radius:8px; padding:.55rem .8rem; }
.admin-sidebar .nav-link:hover{ background:rgba(255,255,255,.12); color:#fff; }
.admin-sidebar .nav-link.active{ background:#fff; color:var(--vero); font-weight:600; }
.admin-sidebar hr{ border-color:rgba(255,255,255,.2); }
.admin-content{ min-height:100vh; }
.admin-stat{
  background:#fff; border:1px solid var(--vero-line); border-radius:12px; padding:1rem 1.2rem;
}
.admin-stat .lbl{ font-size:.8rem; color:#6c5b4b; }
.admin-stat .val{ font-size:1.5rem; font-weight:800; color:var(--vero); }
.admin-jadwal{ background:#fff; border:1px solid var(--vero-line); border-left:4px solid var(--vero-2); border-radius:10px; padding:.7rem .9rem; }
.admin-jadwal.penuh{ border-left-color:#b02a37; background:#fdf3f3; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .admin-sidebar{ position:fixed; z-index:1040; left:0; top:0; transform:translateX(-100%); transition:.2s; }
  .admin-sidebar.show{ transform:none; }
  .hero-title{ font-size:1.7rem; }
}
@media (max-width: 576px){
  .hero-img{ min-height:180px; }
  .stat-num{ font-size:1.3rem; }
}

/* ---------- Sembunyikan ikon panah carousel ---------- */
.carousel-control-prev,
.carousel-control-next { display: none !important; }

/* ---------- Logo bundar di navbar ---------- */
.vero-navbar .navbar-brand img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---------- Hero foto Tentang Kami ---------- */
.tentang-hero {
  background: url('/images/outlet-vero.png') center/cover no-repeat;
  overflow: hidden;
}
.tentang-overlay {
  background: linear-gradient(rgba(60,30,10,.72), rgba(60,30,10,.72));
  padding: 3rem 2rem;
}
@media (max-width: 576px){
  .tentang-overlay { padding: 2rem 1.2rem; }
}

/* ============================================================
   DASHBOARD ADMIN — kartu statistik & tabel
   ============================================================ */
.text-vero{ color:var(--vero); }

.stat-kartu{
  display:flex; align-items:center; gap:1rem;
  background:#fff; border:1px solid var(--vero-line);
  border-radius:14px; padding:1.1rem 1.2rem;
  box-shadow:0 4px 14px rgba(123,63,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.stat-kartu:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(123,63,0,.12); }
.stat-ikon{
  width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; font-size:1.5rem; color:#fff;
}
.stat-lbl{ font-size:.78rem; color:#6c5b4b; font-weight:500; }
.stat-val{ font-size:1.5rem; font-weight:800; color:var(--vero-ink); line-height:1.2; }

.stat-cokelat .stat-ikon{ background:linear-gradient(135deg,#7b3f00,#b5651d); }
.stat-kuning  .stat-ikon{ background:linear-gradient(135deg,#e0a528,#f0c462); }
.stat-hijau   .stat-ikon{ background:linear-gradient(135deg,#1f7a44,#34a35e); }
.stat-biru    .stat-ikon{ background:linear-gradient(135deg,#0a47a3,#3b78d4); }

.admin-tabel thead th{
  background:var(--vero-soft); color:var(--vero);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.3px;
  border-bottom:2px solid var(--vero-line);
}
.admin-tabel tbody tr{ transition:background .12s ease; }
.admin-tabel tbody tr:hover{ background:var(--vero-soft); }
.admin-tabel td, .admin-tabel th{ padding:.85rem 1rem; }

/* ---------- Foto thumbnail di tabel admin ---------- */
.admin-thumb{
  width:56px; height:56px; object-fit:cover;
  border-radius:10px; border:1px solid var(--vero-line);
  background:#f2ece4;
}

/* ---------- Pagination tema Vero ---------- */
.pagination{ --bs-pagination-color:var(--vero); }
.pagination .page-link{
  color:var(--vero);
  border:1px solid var(--vero-line);
  margin:0 2px; border-radius:8px;
}
.pagination .page-link:hover{
  background:var(--vero-soft);
  color:var(--vero);
  border-color:var(--vero-2);
}
.pagination .page-item.active .page-link{
  background:var(--vero);
  border-color:var(--vero);
  color:#fff;
}
.pagination .page-item.disabled .page-link{
  color:#b9a892;
  background:#fff;
  border-color:var(--vero-line);
}

/* ---------- Badge role user (tema Vero) ---------- */
.badge-role-customer{ background:#7b3f00; color:#fff; }
.badge-role-admin{    background:#a07b2c; color:#fff; }

/* ---------- Accordion FAQ tema Vero ---------- */
.accordion-button:not(.collapsed){
  background-color:var(--vero-soft);
  color:var(--vero);
  box-shadow:none;
}
.accordion-button:focus{
  border-color:var(--vero-line);
  box-shadow:0 0 0 .2rem rgba(123,63,0,.12);
}
.accordion-button:not(.collapsed)::after{
  filter:sepia(1) saturate(4) hue-rotate(-15deg) brightness(.5);
}
.accordion-item{ border-color:var(--vero-line); }