/*
  ACE UI CSS — FINAL (CLEAN)
  - Topbar: header.ace-topbar > .container.ace-topbar__wrap
  - Bottom bar: nav.ace-bottombar / .ace-tab / svg
*/

/* ==============================
   ROOT + BASE
   ============================== */
:root{
  --bg:#0a0c10;
  --text:#f5f7fb;
  --line:rgba(255,255,255,.10);

  --ace-topbar-h: 86px;   /* ruang aman untuk body */
  --ace-bb-h: 72px;

  --ace-inset: 10px;
  --ace-radius: 18px;

  --ctl: 40px;            /* tinggi kontrol (search + tombol) */
  --pill: 999px;
}

*{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  letter-spacing:.2px;

  padding-top: var(--ace-topbar-h);
  padding-bottom: calc(var(--ace-bb-h) + 22px);
}

a{ color:inherit; text-decoration:none; }

/* ==============================
   TOPBAR — SESUAI HTML KAMU
   header.ace-topbar > .container.ace-topbar__wrap
   ============================== */
header.ace-topbar{
  position:fixed !important;
  top: var(--ace-inset) !important;
  left: var(--ace-inset) !important;
  right: var(--ace-inset) !important;
  z-index: 9998 !important;

  background: rgba(15,19,26,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--ace-radius) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;

  padding: 10px 12px !important;
}

/* WRAPPER FLEX YANG BENAR: .container.ace-topbar__wrap (class gabung) */
header.ace-topbar > .container.ace-topbar__wrap{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;      /* center semua item */
  gap:12px !important;

  /* memastikan tinggi baris stabil */
  min-height: var(--ctl) !important;
}

/* Brand */
header.ace-topbar .ace-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex: 0 0 auto !important;
  min-width:max-content !important;
  color: rgba(245,247,251,.95) !important;
}

header.ace-topbar .ace-logo{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background: rgba(230,233,239,.08) !important;
  border: 1px solid rgba(230,233,239,.22) !important;
}

header.ace-topbar .ace-logo-img{
  width:22px !important;
  height:22px !important;
  display:block !important;
  object-fit:contain !important;
}

header.ace-topbar .ace-brand__text{
  font-weight:900 !important;
  font-size:15px !important;
  letter-spacing:.2px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
header.ace-topbar .ace-brand__text b{
  font-weight:900 !important;
  color: rgba(230,233,239,.95) !important;
}

/* Search — ini yang bikin CENTER PAS */
header.ace-topbar form.ace-search{
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display:flex !important;
  align-items:center !important;           /* center vertikal */
  height: var(--ctl) !important;

  border-radius: var(--pill) !important;
  overflow:hidden !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Reset keras untuk mengalahkan theme */
header.ace-topbar form.ace-search,
header.ace-topbar form.ace-search *{
  box-sizing:border-box !important;
}

/* Input */
header.ace-topbar .ace-search__input{
  flex: 1 1 auto !important;
  min-width:0 !important;

  height: 100% !important;
  padding: 0 14px !important;

  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color: rgba(245,247,251,.95) !important;

  font-size:13px !important;

  /* KUNCI: jangan biarkan theme pakai line-height aneh */
  line-height: 1 !important;
  margin:0 !important;

  -webkit-appearance:none !important;
  appearance:none !important;
}
header.ace-topbar .ace-search__input::placeholder{
  color: rgba(245,247,251,.70) !important;
}

/* Button */
header.ace-topbar .ace-search__btn{
  flex: 0 0 var(--ctl) !important;
  width: var(--ctl) !important;
  height: 100% !important;

  border:0 !important;
  background: transparent !important;   /* 1 bidang mulus */
  padding:0 !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color: rgba(245,247,251,.92) !important;

  -webkit-appearance:none !important;
  appearance:none !important;
}

/* Kunci SVG topbar */
header.ace-topbar .ace-ico-svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
}
header.ace-topbar .ace-ico-svg path{ fill: currentColor !important; }

/* Actions */
header.ace-topbar .ace-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex: 0 0 auto !important;
}

header.ace-topbar .ace-iconbtn{
  width: var(--ctl) !important;
  height: var(--ctl) !important;
  border-radius: var(--pill) !important;

  display:grid !important;
  place-items:center !important;

  background: linear-gradient(180deg, rgba(230,233,239,.10), rgba(200,208,220,.05)) !important;
  border: 1px solid rgba(230,233,239,.18) !important;
  color: rgba(245,247,251,.92) !important;

  overflow:hidden !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Mobile kecil */
@media (max-width:420px){
  header.ace-topbar .ace-brand__text{ font-size:14px !important; }
  header.ace-topbar .ace-actions{ gap:8px !important; }
  header.ace-topbar .ace-iconbtn{ width:38px !important; height:38px !important; }
  header.ace-topbar .ace-search__btn{ width:40px !important; flex-basis:40px !important; }
}

/* Checkout: hide topbar + reset padding */
body.woocommerce-checkout header.ace-topbar,
body.woocommerce-order-received header.ace-topbar{
  display:none !important;
}
body.woocommerce-checkout{ padding-top:0 !important; }

/* ==============================
   BOTTOM BAR — STRUKTUR LAMA
   ============================== */
nav.ace-bottombar,
.ace-bottombar{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 9999;

  display:flex;
  gap: 6px;
  align-items: stretch;
  justify-content: space-around;

  height: var(--ace-bb-h);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-radius: 22px;

  background: rgba(15,19,26,.92);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.ace-bottombar .ace-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;

  padding: 8px 0;
  border-radius: 16px;
  color: rgba(245,247,251,.72);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.ace-bottombar .ace-ico{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
}
.ace-bottombar .ace-ico svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: .95;
}

.ace-bottombar .ace-tab__txt{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2px;
}

.ace-bottombar .ace-tab.is-active{
  color: var(--text);
  background: linear-gradient(180deg, rgba(230,233,239,.16), rgba(200,208,220,.06));
  border: 1px solid rgba(230,233,239,.22);
}

.ace-bottombar .ace-tab:active{ transform: translateY(1px); }

@media (min-width: 900px){
  .ace-bottombar{ display:none !important; }
  body{ padding-bottom: 24px; }
}

body.woocommerce-checkout .ace-bottombar,
body.woocommerce-order-received .ace-bottombar{
  display:none !important;
}
body.woocommerce-checkout{ padding-bottom: 0 !important; }

/* =========================================================
   ACE TOPBAR — NUKE OVERRIDE (PASTI KENA)
   sesuai HTML:
   header.ace-topbar > div.container.ace-topbar__wrap
   ========================================================= */

header.ace-topbar{
  padding: 10px 12px !important;
}

/* cover dua kemungkinan: direct child / tidak */
header.ace-topbar > div.container.ace-topbar__wrap,
header.ace-topbar div.container.ace-topbar__wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;

  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;

  min-height:40px !important;
}

/* pastikan form tidak punya margin bawaan theme */
header.ace-topbar form.ace-search{
  margin:0 !important;
  padding:0 !important;

  flex:1 1 auto !important;
  min-width:0 !important;

  height:40px !important;
  display:flex !important;
  align-items:center !important;

  border-radius:999px !important;
  overflow:hidden !important;
}

/* RESET keras: theme sering set line-height & font input/button */
header.ace-topbar form.ace-search input,
header.ace-topbar form.ace-search button{
  font: inherit !important;
  line-height: normal !important;
  letter-spacing: inherit !important;
  text-transform: none !important;

  -webkit-appearance:none !important;
  appearance:none !important;
}

/* INPUT: bikin benar2 center tinggi 40px */
header.ace-topbar form.ace-search input.ace-search__input{
  flex:1 1 auto !important;
  min-width:0 !important;

  height:40px !important;
  padding:0 14px !important;
  margin:0 !important;

  border:0 !important;
  outline:0 !important;
  background:transparent !important;

  display:block !important;
}

/* BUTTON: fix baseline “naik/turun” */
header.ace-topbar form.ace-search button.ace-search__btn{
  flex:0 0 44px !important;
  width:44px !important;
  height:40px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  background:transparent !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* SVG dalam tombol */
header.ace-topbar form.ace-search button.ace-search__btn svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
}

/* brand & actions jangan ikut menyusut */
header.ace-topbar a.ace-brand,
header.ace-topbar .ace-actions{
  flex:0 0 auto !important;
}