/* ===================================================================
   VoucherNESIA • Theme (clean)
   - Palet: #1A1A1A, #F8F8F8, #FFC72C, #6B6B6B, #D62828
   - Mode: vns-dark / vns-light
   - Always-mobile app shell (max 480px)
   =================================================================== */

/* ===== Base tokens (fallback) ===== */
:root{
  --fg:#F8F8F8; --muted:#6B6B6B;
  --bg:#1A1A1A; --bg-elev:#202020;

  --card:rgba(255,255,255,.06);
  --card-2:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.16);

  --input-bg:#1F1F1F; --input-border:rgba(255,255,255,.26); --input-focus:#FFC72C;

  --link:#FFC72C; --link-hover:#FFD86A;

  --nav-bg:rgba(18,18,18,.94); --nav-border:rgba(255,255,255,.14); --nav-fg:var(--fg);

  --accent:linear-gradient(135deg,#FFC72C 0%,#FFD86A 100%);
  --accent-solid:#FFC72C; --accent-contrast:#1A1A1A; --accent-ghost:rgba(255,199,44,.16);

  --danger:#D62828;

  --shadow:0 12px 28px rgba(0,0,0,.32);
  --ring:0 0 0 3px rgba(255,199,44,.28);

  --table-border:rgba(255,255,255,.14);
  --table-stripe:rgba(255,255,255,.05);

  --bottom-nav-h:52px; --fab-d:54px; --fab-offset:18px;
}

/* ===== Global reset ===== */
html,body{ background:var(--bg); color:var(--fg); }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:none; }
hr{ border-color:rgba(255,255,255,.12); }
.small.text-muted,.card .text-muted{ color:var(--muted)!important; }

/* Cards & containers */
.card{ background:var(--card); border:1px solid var(--card-border); box-shadow:var(--shadow); border-radius:12px; }
.card-header{ background:var(--card-2); border-bottom:1px solid var(--card-border); }
.card-footer{ background:var(--card-2); border-top:1px solid var(--card-border); }

/* Forms */
.form-control,.form-select,.form-check-input,
.form-control:focus,.form-select:focus{
  background:var(--input-bg); color:var(--fg); border-color:var(--input-border);
}
.form-control::placeholder{ color:rgba(255,255,255,.6); }
.form-control:focus,.form-select:focus{ box-shadow:var(--ring); outline:0; }

/* Tables */
.table{ color:var(--fg); }
.table td,.table th{ border-color:var(--table-border); }
.table-striped>tbody>tr:nth-of-type(odd){ background-color:var(--table-stripe); }

/* Dropdowns */
.dropdown-menu{ background:var(--card); border:1px solid var(--card-border); color:var(--fg); box-shadow:0 10px 25px rgba(0,0,0,.25); }
.dropdown-item{ color:var(--fg); }
.dropdown-item:hover{ background:rgba(255,255,255,.07); color:var(--fg); }

/* Buttons */
.btn-accent{ color:var(--accent-contrast)!important; font-weight:700; border:0; background:var(--accent); background-size:200% 200%;
  transition:background-position .25s,transform .05s,box-shadow .2s; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.btn-accent:hover{ background-position:100% 0; transform:translateY(-1px); }
.btn-accent:focus-visible{ outline:0; box-shadow:var(--ring); }
.btn-outline-light{ color:var(--fg)!important; border-color:var(--input-border)!important; background:transparent; }
.btn-outline-light:hover,.btn-outline-light:focus{ background:rgba(255,255,255,.08)!important; color:#fff!important; border-color:var(--link-hover)!important; }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
a.btn-accent{ text-decoration:none!important; }

/* Product */
.hero{ background:var(--card); border:1px solid var(--card-border); border-radius:1rem; }
.product-card{ border:1px solid var(--card-border); border-radius:1rem; overflow:hidden; }
.product-card img{ aspect-ratio:1.6/1; object-fit:cover; }
.product-card{ margin-bottom:14px; }

/* Utils */
.link-balance{ text-decoration:none; }
.link-balance:hover{ text-decoration:none; }
.btn-file{ display:inline-flex; align-items:center; gap:.4rem; position:relative; overflow:hidden; }
.btn-file input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ===== App shell (always-mobile) ===== */
.app-shell{ max-width:480px; margin:0 auto; width:100%; padding:0 12px; }

/* ===== Header ===== */
.header-bar{
  background:var(--nav-bg)!important; color:var(--nav-fg)!important;
  border-bottom:1px solid var(--nav-border)!important; backdrop-filter:blur(8px);
}
.header-row{ padding:8px 0; }
.brand{ color:var(--fg); }
.brand img{ display:block; }

/* Hamburger (custom), pastikan tidak ada tombol lain */
.menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--nav-border); background:rgba(255,255,255,.06); color:var(--fg); }
.menu-btn:hover{ background:rgba(255,255,255,.10); }
.menu-icon{ display:block; width:20px; height:2px; background:currentColor; position:relative; }
.menu-icon::before,.menu-icon::after{ content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; }
.menu-icon::before{ top:-6px; } .menu-icon::after{ top:6px; }

/* Sembunyikan .navbar-toggler di header jika ada bawaan file lama */
.header-bar .navbar-toggler{ display:none!important; }

/* ===== Offcanvas top (menu) ===== */
.vns-offcanvas{
  --bs-offcanvas-height:auto;  /* tinggi menyesuaikan konten */
  background:transparent;      /* transparan: kartu yang berwarna */
  color:var(--fg);
  border:none;
  padding-top:10px;
}
.vns-offcanvas .btn-close{ filter:invert(1) grayscale(1); opacity:.9; }
.vns-offcanvas .menu-card{
  background:var(--bg-elev); border:1px solid var(--card-border);
  border-radius:12px; box-shadow:var(--shadow); padding:12px;
}
.vns-offcanvas .menu-sep{ height:8px; }
.vns-offcanvas .nav-link{
  color:var(--fg)!important; display:flex; align-items:center; gap:.6rem;
  padding:.45rem .5rem; border-radius:.5rem;
}
.vns-offcanvas .nav-link:hover{ color:var(--link-hover)!important; background:rgba(255,255,255,.07); }
.vns-offcanvas .nav-link i{ color:currentColor!important; }

/* ===== Bottom nav ===== */
.navbar.fixed-bottom.mobile-bottom-nav{
  background:var(--nav-bg)!important; border-top:1px solid var(--nav-border)!important;
  height:var(--bottom-nav-h)!important; min-height:var(--bottom-nav-h)!important; padding:6px 0!important;
}
.mobile-bottom-nav .nav-item{
  flex:1 1 0; text-align:center; color:var(--fg); text-decoration:none; font-size:.78rem; min-width:64px;
}
.mobile-bottom-nav .nav-item i{ font-size:1.15rem; display:block; line-height:1; }
.mobile-bottom-nav .nav-item small{ font-size:.66rem; }
.mobile-bottom-nav .nav-center{
  position:absolute; left:50%; top:0; transform:translate(-50%, calc(-1 * var(--fab-offset))); flex:0 0 auto; z-index:99;
}
/* ==== FAB DIAMOND (kotak berputar 45°) ==== */
/* ukuran dasar tetap pakai --fab-d, tapi offset & gap disesuaikan dgn diagonal */
:root{
  /* kalau diamond terasa “terlalu nongol”, boleh naikkan sedikit */
  --fab-offset: 18px;              /* semula 18px */
}

/* Tombol tengah berubah jadi diamond */
.mobile-bottom-nav .nav-center-btn{
  width: var(--fab-d);
  height: var(--fab-d);
  /* dari 50% → rounded square supaya sudutnya lembut */
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 1.35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 8px var(--accent-ghost);

  /* intinya: putar 45° */
  transform: rotate(45deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Icon tetap tegak (counter-rotate) */
.mobile-bottom-nav .nav-center-btn > *{
  transform: rotate(-45deg);
}

/* Hover state – naik dikit + scale */
.mobile-bottom-nav .nav-center-btn:hover{
  transform: rotate(45deg) translateY(-2px) scale(1.04);
}

/* Karena bentuknya diamond, lebar efektif (diagonal) = 0.7071 * d per sisi.
   Geser gap kiri/kanan item agar tidak mepet. */
.mobile-bottom-nav .app-shell > a.nav-item:nth-child(2){
  /* setengah diagonal + 10px */
  margin-right: calc(var(--fab-d) * 0.7071 / 2 + 10px);
}
.mobile-bottom-nav .app-shell > a.nav-item:nth-child(4){
  margin-left:  calc(var(--fab-d) * 0.7071 / 2 + 10px);
}

/* (Opsional) bila masih merasa mepet di layar sangat kecil, kecilkan sedikit gap */
@media (max-width: 360px){
  .mobile-bottom-nav .app-shell > a.nav-item:nth-child(2){
    margin-right: calc(var(--fab-d) * 0.7071 / 2 + 6px);
  }
  .mobile-bottom-nav .app-shell > a.nav-item:nth-child(4){
    margin-left:  calc(var(--fab-d) * 0.7071 / 2 + 6px);
  }
}


/* Safe area & layering */
body.has-bottom-nav main, body.has-bottom-nav .site-footer{
  padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px))!important;
}
.navbar.fixed-bottom{ z-index:1100; }
.site-footer{ position:relative; z-index:1; }

/* ===== Footer ===== */
.site-footer{ background:var(--card); border-top:1px solid var(--card-border); color:var(--fg); box-shadow:0 -4px 18px rgba(0,0,0,.08); }
.footer-links .footer-link{ color:var(--fg); opacity:.85; text-decoration:none; transition:opacity .2s ease; }
.footer-links .footer-link:hover{ opacity:1; text-decoration:none; }

/* ===== Themes ===== */
html[data-theme="vns-dark"]{
  --bg:#1A1A1A; --bg-elev:#202020; --fg:#F8F8F8; --muted:#CFCFCF;
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.08); --card-border:rgba(255,255,255,.16);
  --input-bg:#1F1F1F; --input-border:rgba(255,255,255,.26); --input-focus:#FFC72C;
  --link:#FFC72C; --link-hover:#FFD86A;
  --nav-bg:rgba(18,18,18,.94); --nav-border:rgba(255,255,255,.14); --nav-fg:var(--fg);
  --accent:linear-gradient(135deg,#FFC72C 0%,#FFD86A 100%); --accent-solid:#FFC72C; --accent-contrast:#1A1A1A; --accent-ghost:rgba(255,199,44,.16);
  --danger:#D62828; --shadow:0 14px 36px rgba(0,0,0,.45); --ring:0 0 0 3px rgba(255,199,44,.28);
  --table-border:rgba(255,255,255,.16); --table-stripe:rgba(255,255,255,.05);
}

html[data-theme="vns-light"]{
  --bg:#F8F8F8; --bg-elev:#FFFFFF; --fg:#1A1A1A; --muted:#6B6B6B;
  --card:#FFFFFF; --card-2:#FBFBFB; --card-border:rgba(0,0,0,.10);
  --input-bg:#FFFFFF; --input-border:rgba(0,0,0,.18); --input-focus:#FFC72C;
  --link:#C69200; --link-hover:#FFC72C;
  --nav-bg:rgba(255,255,255,.94); --nav-border:rgba(0,0,0,.08); --nav-fg:var(--fg);
  --accent:linear-gradient(135deg,#FFC72C 0%,#FFD86A 100%); --accent-solid:#FFC72C; --accent-contrast:#1A1A1A; --accent-ghost:rgba(255,199,44,.12);
  --danger:#D62828; --shadow:0 10px 24px rgba(0,0,0,.12); --ring:0 0 0 3px rgba(255,199,44,.22);
  --table-border:rgba(0,0,0,.08); --table-stripe:rgba(0,0,0,.03);
}


/* ===== VoucherNESIA – Footer contrast fixes ===== */

/* dasar footer di semua tema */
.site-footer{
  background: var(--bg-elev);                 /* lebih solid daripada --card */
  border-top: 1px solid var(--card-border);
  color: var(--fg);
}

/* link di footer: selalu jelas + ada hover */
.site-footer .footer-links .footer-link{
  color: var(--fg) !important;
  opacity: .92;
  text-decoration: none;
}
.site-footer .footer-links .footer-link:hover,
.site-footer .footer-links .footer-link:focus{
  color: var(--link-hover) !important;
  opacity: 1;
  text-decoration: none;
}

/* teks kecil/muted di footer: pakai token theme, bukan bootstrap default */
.site-footer .text-muted{
  color: var(--muted) !important;   /* vns-dark: #CFCFCF; vns-light: #6B6B6B */
  opacity: 1 !important;            /* jangan dipudarkan lagi */
}

/* khusus dark: sedikit tambah kontras agar tetap kebaca di monitor gelap */
html[data-theme="vns-dark"] .site-footer .footer-links .footer-link{
  opacity: .95;
}
html[data-theme="vns-dark"] .site-footer .text-muted{
  color: #E2E2E2 !important;        /* lebih terang dari --muted jika perlu */
}

/* pastikan footer tidak “ketiban” blur/header & bottom-nav */
.site-footer{ position: relative; z-index: 1; }


/* VoucherNESIA: styling harga di kartu produk */
.product-card .price-label{
  color: var(--muted);
  font-weight: 600;
  font-size: .70rem;
}

.product-card .price-value{
  color: var(--link);               /* otomatis adapt ke dark/light */
  font-weight: 700;
  font-size: .80rem;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);  /* shadow halus agar kontras */
  transition: all .2s ease-in-out;
}

/* sedikit efek hover supaya responsif */
.product-card:hover .price-value{
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  transform: translateY(-1px);
}


/* ===== VoucherNESIA • Floating Telegram button ===== */
.vns-tg-fab{
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 1205; /* > bottom-nav (1100) */
}

/* Diamond-ish rounded square agar selaras dengan FAB tengah */
.vns-tg-fab .btn-tg{
  width: 52px; height: 52px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: #229ED9;              /* Telegram blue */
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  border: 0;
  transform: rotate(0deg);          /* tetap tegak (FAB tengah sudah diamond) */
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.vns-tg-fab .btn-tg:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.vns-tg-fab .btn-tg i{ font-size: 1.35rem; }


/* ===== Telegram FAB menu — solid background per theme (no blur) ===== */
.vns-tg-fab .vns-tg-menu{
  position: absolute !important;
  inset: auto 0 calc(100% + 8px) auto !important;
  transform: none !important;
  z-index: 3001;

  /* ganti dari var(--card)+blur -> full opaque agar selalu kontras */
  background: var(--bg-elev) !important;     /* SOLID */
  color: var(--fg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: .75rem;
  overflow: hidden;
  min-width: 190px;
  padding: .35rem 0;
}

/* Per-theme fine tune (opsional, makin tegas) */
html[data-theme="vns-dark"] .vns-tg-fab .vns-tg-menu{
  background: #12151b !important;           /* lebih gelap dari --bg-elev */
  border-color: rgba(255,255,255,.14) !important;
}
html[data-theme="vns-light"] .vns-tg-fab .vns-tg-menu{
  background: #ffffff !important;           /* putih solid */
  border-color: rgba(0,0,0,.08) !important;
}

/* Item & hover state: selalu terbaca di light/dark */
.vns-tg-fab .vns-tg-menu .dropdown-item{
  color: var(--fg) !important;
  padding: .65rem .95rem;
  display: flex; align-items: center; gap: .55rem;
  font-weight: 600;
}
html[data-theme="vns-dark"] .vns-tg-fab .vns-tg-menu .dropdown-item:hover{
  background: rgba(255,255,255,.08) !important;
  color: var(--link-hover) !important;
}
html[data-theme="vns-light"] .vns-tg-fab .vns-tg-menu .dropdown-item:hover{
  background: rgba(0,0,0,.05) !important;
  color: #1A1A1A !important;
}

/* Ikon ikut warna teks */
.vns-tg-fab .vns-tg-menu .dropdown-item i{
  color: currentColor !important;
}



/* ===== [PATCH] Teks dasar agar jelas di dark/light ===== */
h1,h2,h3,h4,h5,h6,
label,.form-label,
.fw-semibold,
.card .fw-semibold,
.card .fw-bold,
.navbar .navbar-brand,
#mainMenuLabel,
.navbar .nav-link,
.small, small {          /* ← .small (class) dan <small> (tag) */
  color: var(--fg) !important;
}

.form-text,
.small.text-muted,
.text-muted {
  color: var(--muted) !important;
  opacity: 1 !important; /* jangan dipudarkan lagi */
}

/* ===== [PATCH] Switch theme (form-switch) konsisten ===== */
/* Reset bawaan Bootstrap (svg ganda) lalu buat switch kustom */
.form-switch .form-check-input{
  appearance: none;
  -webkit-appearance: none;
  width: 44px;               /* ukuran track */
  height: 24px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: background-color .2s ease, border-color .2s ease;
  background-image: none !important; /* matikan svg bootstrap */
}
html[data-theme="vns-light"] .form-switch .form-check-input{
  background: rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.2);
}

/* knob */
.form-switch .form-check-input::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s ease;
}

/* checked state */
.form-switch .form-check-input:checked{
  background: var(--link);
  border-color: var(--link);
}
.form-switch .form-check-input:checked::after{
  transform: translateX(20px);
}

/* fokus/aksesibilitas */
.form-switch .form-check-input:focus{
  box-shadow: var(--ring);
}

/* label di samping switch biar selalu kebaca */
.form-switch .form-check-label{
  color: var(--fg) !important;
}

/* === Fix btn-close agar kontras di semua tema === */

/* Hapus efek invert universal di offcanvas */
.vns-offcanvas .btn-close{
  filter: none !important;
  opacity: .85;
  background-color: transparent;
  border: 0;
}

/* Pakai variable Bootstrap supaya warnanya ikut theme */
html[data-theme="vns-light"] {
  --bs-btn-close-color: #000;   /* hitam di light */
  --bs-btn-close-opacity: .75;
  --bs-btn-close-hover-opacity: 1;
}

html[data-theme="vns-dark"] {
  --bs-btn-close-color: #fff;   /* putih di dark */
  --bs-btn-close-opacity: .9;
  --bs-btn-close-hover-opacity: 1;
  /* untuk jaga-jaga kalau ada filter lain */
  .vns-offcanvas .btn-close{ filter: none !important; }
}

/* (opsional) saat fokus, bayangan terlihat */
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(255,199,44,.35); outline: 0; }


/* ==== VoucherNESIA Modal auto-theme ==== */
.vns-modal-theme {
  background: var(--bg-elev) !important;
  color: var(--fg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow);
  border-radius: 12px;
}

.vns-modal-theme .modal-header {
  background: var(--card-2);
  color: var(--fg);
  border-bottom: 1px solid var(--card-border);
}

.vns-modal-theme .modal-body {
  background: var(--bg-elev);
  color: var(--fg);
}

.vns-modal-theme .form-label,
.vns-modal-theme label {
  color: var(--fg);
}

/* btn-close menyesuaikan theme */
html[data-theme="vns-light"] .vns-modal-theme .btn-close {
  filter: none;
  color: #000 !important;
}

html[data-theme="vns-dark"] .vns-modal-theme .btn-close {
  filter: none;
  color: #fff !important;
}

/* Tampilkan kontrol & indikator dengan pasti pada hero */
.hero .carousel-control-prev,
.hero .carousel-control-next{
  display: flex !important;
  opacity: .95;
  width: 12%;
  z-index: 5;
}

.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.hero .carousel-indicators{
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  margin: 0 auto;
  justify-content: center;
}

.hero .carousel-item{ display: none; }
.hero .carousel-item.active{ display: block; }