/* ===========================
   KOUTAKILAT.ID — Global Styles
   Mobile-first + Dark/Light
   =========================== */

/* CSS Variables (Light) */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, .08);
  --primary: #0d6efd;
  --danger: #dc3545;
  --warning: #ffc107;
  --success: #198754;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Dark Theme Overrides */
body.dark-theme{
  --bg: #0e0f12;
  --surface: #151720;
  --text: #e7e7e7;
  --muted: #a5b4c0;
  --border: rgba(255,255,255,.08);
  --shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Base */
html, body{height:100%;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Keep content visible above fixed bottom navbar on mobile */
@media (max-width:991.98px){
  body{ padding-bottom: 66px; }
}

/* Typography tweaks */
.lead{ font-weight: 600; }
.brand{ color: var(--primary); }
h2,h3,h4{ font-weight: 700; letter-spacing:.2px; }
h2{ font-size: 1.6rem; }
@media (min-width:992px){
  h2{ font-size: 1.9rem; }
}

/* ===========================
   Header / Navbar / Offcanvas
   =========================== */
header.bg-light{
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:1030;
}
.navbar-brand{
  font-weight: 800; letter-spacing:.7px;
}
.navbar .nav-link{
  color: var(--text);
}
.navbar .nav-link:hover{ opacity:.8; }
.navbar-toggler{
  border-color: var(--border);
}
.offcanvas{
  background: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
}
.list-group-item{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.list-group-item-action:hover{ background: rgba(13,110,253,.08); }

/* ===========================
   Carousel
   =========================== */
.carousel,
.carousel-inner,
.carousel-item{
  background: transparent;
}
.carousel-item img{
  width:100%;
  height: 220px;           /* mobile default */
  object-fit: cover;
  border-radius: 0;
  filter: saturate(1.02);
}
@media (min-width:768px){
  .carousel-item img{ height: 340px; }
}
@media (min-width:1200px){
  .carousel-item img{ height: 420px; }
}
/* Indicators */
.carousel-indicators [data-bs-target]{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.7);
}
.carousel-indicators .active{ background:#fff; }
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ===========================
   Service Buttons (ikon layanan)
   =========================== */
.btn-outline-primary, .btn-outline-danger,
.btn-outline-warning, .btn-outline-success{
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.btn-outline-primary:hover{ background:#0d6efd; color:#fff; border-color:#0d6efd; }
.btn-outline-danger:hover{ background:#dc3545; color:#fff; border-color:#dc3545; }
.btn-outline-warning:hover{ background:#ffc107; color:#000; border-color:#ffc107; }
.btn-outline-success:hover{ background:#198754; color:#fff; border-color:#198754; }

/* ===========================
   Cards (Kategori & Produk)
   =========================== */
.card{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-img-top{
  height: 140px; object-fit: cover;
}
@media (min-width:992px){
  .card-img-top{ height: 160px; }
}
.card-title{
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card:hover{ transform: translateY(-2px); transition: .15s ease; }

/* Anchor card text color in light/dark */
a.card{ color: var(--text); }
a.card .card-title{ color: var(--text); }

/* Alerts harmonized for dark */
.alert{
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ===========================
   Bottom Navbar (Mobile)
   =========================== */
.navbar.fixed-bottom{
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
.navbar.fixed-bottom .nav-link{
  color: var(--muted);
  padding: 8px 10px;
}
.navbar.fixed-bottom .nav-link i{
  font-size: 1.1rem; line-height:1;
}
.navbar.fixed-bottom .nav-link small{
  display:block; font-size:.74rem; margin-top:2px;
}

/* ===========================
   Footer
   =========================== */
footer.bg-light{
  background: var(--surface) !important;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ===========================
   Utilities / Helpers
   =========================== */
.shadow-sm{ box-shadow: var(--shadow) !important; }
.border, .table, .table>:not(caption)>*>*{
  border-color: var(--border) !important;
}
.table{
  color: var(--text);
  background: var(--surface);
}
.table thead{ background: rgba(0,0,0,.02); }
body.dark-theme .table thead{ background: rgba(255,255,255,.04); }

/* Section spacing helpers */
.section{ padding: 1.25rem 0; }
.section + .section{ padding-top: 0; }

/* Carousel dark overlay (optional, improves readability if you add captions) */
.carousel-item::after{
  content: ""; position: absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0));
  pointer-events:none;
}

/* Buttons radiuses unify */
.btn{ border-radius: var(--radius); }

/* Form controls in dark */
body.dark-theme .form-control,
body.dark-theme .form-select{
  background: #1b1e29; color: #e7e7e7; border-color: #2b3040;
}
body.dark-theme .form-control::placeholder{ color:#a7b0be; }

/* Offcanvas close btn contrast */
body.dark-theme .btn-close{
  filter: invert(1) grayscale(100%);
}

/* Fix bootstrap bg-light components in dark */
body.dark-theme .bg-light{
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Links color */
a{ color: var(--primary); }
a:hover{ opacity:.9; }

/* Small helper for badges on product (e.g., featured) */
.badge{
  border-radius: 999px;
}
/* ====== FIX: Offcanvas menu terlihat jelas ====== */
.offcanvas {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.offcanvas .offcanvas-title { color: var(--text) !important; }
.offcanvas .list-group-item {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  opacity: 1 !important;              /* jangan pudar */
}
.offcanvas .list-group-item i { 
  color: var(--primary) !important; 
}
.offcanvas .list-group-item:hover {
  background: rgba(13,110,253,.08) !important;
}

/* ====== FIX: Header nav-link warna kuat ====== */
.navbar .nav-link {
  color: var(--text) !important;
  opacity: 1 !important;
}
.navbar .nav-link:hover { opacity: 0.85 !important; }

/* ====== FIX: Bottom navbar mobile terlihat jelas ====== */
.navbar.fixed-bottom {
  background: var(--surface) !important;   /* jangan transparan */
  border-top: 1px solid var(--border) !important;
}
.navbar.fixed-bottom .nav-link {
  color: var(--text) !important;           /* teks jelas */
  opacity: 1 !important;
  padding: 8px 10px;
}
.navbar.fixed-bottom .nav-link i {
  font-size: 1.2rem; line-height: 1;
  color: var(--text) !important;
}
.navbar.fixed-bottom .nav-link small {
  color: var(--text) !important;
  opacity: 0.9;
}

/* aktif/hover state di bottom navbar */
.navbar.fixed-bottom .nav-link:hover,
.navbar.fixed-bottom .nav-link:focus {
  color: var(--primary) !important;
}
.navbar.fixed-bottom .nav-link.active {
  color: var(--primary) !important;
}

/* ====== FIX: Dark mode untuk komponen "bg-light" Bootstrap ====== */
body.dark-theme .bg-light,
body.dark-theme .navbar,
body.dark-theme footer.bg-light {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ====== Tambahan: ikon burger lebih kontras ====== */
.navbar-toggler {
  border-color: var(--border) !important;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-light .navbar-toggler-icon { filter: none; }           /* terang */
body.dark-theme .navbar-light .navbar-toggler-icon { filter: invert(1); } /* kontras di dark */
.card-title{
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .5px;
}
/* Header kategori rapi */
.category-header .cat-thumb{
  width: 64px; height: 64px; object-fit: cover;
}
.category-header .search-input{
  min-width: 260px;  /* supaya input tidak terlalu pendek di desktop */
}
@media (max-width: 767.98px){
  .category-header .search-form{
    width: 100%;
  }
  .category-header .search-input{
    min-width: 0;      /* biar fleksibel penuh di HP */
    flex: 1 1 auto;
  }
}
/* ====== END ====== */