:root{
  --primary:#0d6efd; --primary-600:#1d4ed8;
  --ink:#0f172a; --muted:#64748b;
  --bg:#ffffff; --panel:#f8fafc; --border:#e5e7eb;
  --radius-lg:14px; --radius-md:10px;
  --shadow:0 6px 18px rgba(2,6,23,.06);
}
/* ---------- Hero ---------- */
.order-hero{
  background:linear-gradient(180deg,#fff 0%, #f3f7ff 100%);
}
.badge-hero{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:.45rem .9rem;color:var(--primary-600);font-weight:600;
}
.text-dark-blue{color:var(--ink)}
/* ---------- Loading overlay ---------- */
.loading-overlay{position:fixed;inset:0;display:grid;place-items:center;background:#fff;z-index:999;transition:opacity .4s}
.loading-spinner{width:40px;height:40px;border-radius:50%;border:4px solid #e8efff;border-top-color:var(--primary);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- Filter Bar ---------- */
.filter-bar{
  position: relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg);
  box-shadow:var(--shadow);
}
.filter-bar::before{
  content:"";
  position:absolute;
  top:-1px; left:-1px; right:-1px;
  height:4px;
  border-top-left-radius: calc(var(--radius-lg) + 2px);
  border-top-right-radius: calc(var(--radius-lg) + 2px);
  background:linear-gradient(90deg,#3b82f6,#22c55e,#f59e0b);
  opacity:1; pointer-events:none; z-index:1;
}
.filter-bar .card-body{ padding:14px 16px; }
/* Segmented buttons */
.segmented{
  display:flex; gap:6px; padding:4px;
  background:#f1f5f9; border:1px solid var(--border);
  border-radius:12px;
}
.seg-btn{
  appearance:none;border:0;background:transparent;color:#0f172a;
  padding:.42rem .8rem;border-radius:8px;font-weight:700;
  transition:background .15s ease;
}
.seg-btn:hover{background:#e9edf5}
.seg-btn.active{background:var(--primary); color:#fff}
/* Search & Sort */
.flex-1-min{min-width:260px}
.search-ctrl{min-width:260px;flex:1}
.search-ctrl .input-group-text,
.sort-ctrl .input-group-text{
  background:#fff;border-color:var(--border)
}
.search-ctrl .form-control,
.sort-ctrl .form-select{
  border-color:var(--border);border-left:0
}
.search-ctrl .form-control:focus,
.sort-ctrl .form-select:focus{
  box-shadow:0 0 0 3px rgba(13,110,253,.12)
}
/* Promo pill */
.promo-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--border);border-radius:999px;
  padding:.32rem .6rem;font-weight:700;font-size:.8rem;color:#475569;background:#fff;
}
.promo-pill[data-status="on"]{color:#0a7a46;background:#eefcf5;border-color:#c8f3dd}
.promo-pill[data-status="off"]{color:#8a4b10;background:#fff8ed;border-color:#ffe2c1}
/* metode badges */
.pm-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.pm{padding:.35rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid #e5e7eb;background:#fff;color:#334155}
.pm-bank{border-color:#b6e0fe;background:#eaf6ff}
.pm-ew{border-color:#ffd6a5;background:#fff7e6}
.pm-qris{border-color:#ffc2c2;background:#fff0f0}
.pm-retail{border-color:#cdeccf;background:#f1fff1}
.filter-methods{border-top:1px dashed var(--border);background:#fcfdff}
/* ---------- Restore Payment banner ---------- */
.pay-restore{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.pay-restore .spinner-border{width:1.35rem;height:1.35rem;border-width:.15rem}
/* ---------- Catalog Grid & Cards ---------- */
.catalog-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media(min-width:576px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.catalog-grid{grid-template-columns:repeat(3,1fr)}}
.card-prod{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-prod:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(2,6,23,.10);
  border-color:#dbe4ff;
}
.card-prod .thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#eef4ff;
  transform:scale(1.0); transition:transform .35s ease;
}
.card-prod:hover .thumb{ transform:scale(1.05); }
.card-prod::after{
  content:""; position:absolute; inset:0 0 auto 0; height:64px;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent);
  pointer-events:none;
}
/* Ribbon */
.card-prod .badge-ribbon{
  position:absolute; top:12px; left:-6px;
  background:linear-gradient(90deg,#ff8333,#ffb86b);
  color:#fff; padding:6px 12px; font-size:.78rem; font-weight:800;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
  box-shadow:0 6px 14px rgba(255,131,51,.35);
}
/* Body */
.card-prod .body{ padding:14px 14px 12px; }
.card-prod .title{
  margin:0 0 4px; font-weight:800; color:var(--ink); line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-prod .meta{ font-size:12px; color:var(--muted); margin-bottom:10px }

/* chips */
.card-prod .feat{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.card-prod .feat .chip{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); background:#f8fafc; color:#334155
}
.card-prod .feat .chip i{ opacity:.7; margin-right:4px }
/* CTA */
.card-prod .cta{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-top:10px; margin-top:8px; border-top:1px dashed #e7ecf5;
}
.card-prod .price{
  font-size:18px; font-weight:900; line-height:1.1;
  background:linear-gradient(90deg,#0d6efd,#00c6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card-prod .price .per{ font-size:.8rem; opacity:.75; background:none; color:inherit }
/* Buy button */
.card-prod .btn-buy{
  border:0; border-radius:10px; padding:.6rem 1rem; font-weight:800;
  background:linear-gradient(90deg,#0d6efd,#00c6ff); color:#fff;
  box-shadow:0 8px 18px rgba(13,110,253,.22);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.card-prod .btn-buy:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.card-prod .btn-buy:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(13,110,253,.2) }
/* ---------- Skeleton ---------- */
.skeleton{
  height:292px;border-radius:14px;
  background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 37%,#eef2f7 63%);
  background-size:400% 100%; animation:shimmer 1.2s infinite
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* ---------- Modal Checkout ---------- */
.modal-checkout{overflow:hidden;border-radius:14px}
.ch-header{
  background:linear-gradient(90deg,#0d6efd 0%, #00b2ff 100%);
  color:#fff; border-bottom:0; padding:14px 16px;
}
.ch-eyebrow{font-size:.8rem;opacity:.9;margin-bottom:2px}
.ch-body{background:#fff}
.ch-footer{background:#f8fafc;border-top:1px solid var(--border)}
.ch-summary{
  border:1px solid var(--border); border-radius:12px; background:#fbfdff;
}
.ch-summary .ch-item{
  display:flex; justify-content:space-between; gap:8px; padding:.25rem 0;
}
.ch-summary .k{color:#64748b; font-size:.9rem}
.ch-summary .v{font-weight:700; color:#0f172a}

.ch-price .base{
  color:#94a3b8; text-decoration:line-through; font-weight:700; line-height:1;
}
.ch-price .final{
  font-size:1.25rem; font-weight:800; color:#0a58ca; line-height:1.2;
}
.ch-price .note{min-height:1.2rem}
.ch-methods .pm{margin-right:.25rem;margin-bottom:.25rem}
.ch-trust{
  border:1px dashed var(--border);
  border-radius:10px; padding:.5rem .75rem; background:#fcfdff;
}
/* ---------- Mobile tweaks ---------- */
@media (max-width:576px){
  .search-ctrl{min-width:100%}
  .sort-ctrl{min-width:100%}
  .filter-methods .btn{width:100%}
  .pay-restore .card-body{gap:.75rem}
  .modal-dialog.modal-lg{margin:0 10px}
}
.faq-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#fff;
}
.faq-topbar{
  height:4px;
  background:linear-gradient(90deg,#3b82f6,#22c55e,#f59e0b,#ef4444);
}
.faq-eyebrow{
  font-size:.75rem; letter-spacing:.06em; color:#64748b;
}
.faq-desc{font-size:.95rem}
.faq-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media(min-width:992px){
  .faq-grid{ grid-template-columns: 2fr 1fr; }
}
.faq-accordion .accordion-item{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.faq-accordion .accordion-item + .accordion-item{ margin-top:10px; }
.faq-accordion .accordion-button{
  gap:.6rem; padding:.85rem 1rem; font-weight:700; color:#0f172a;
  background:#fff;
}
.faq-accordion .accordion-button::after{
  background-image: none;
  content:"\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  transform:rotate(0deg);
  transition: transform .2s ease;
  font-size:1rem; opacity:.7;
}
.faq-accordion .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg); opacity:1;
}
.faq-accordion .accordion-button:focus{
  box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.faq-accordion .accordion-body{
  background:#fcfdff; border-top:1px dashed var(--border);
  padding: .9rem 1rem; color:#334155;
}
.faq-icon{
  width:30px; height:30px; border-radius:999px;
  display:inline-grid; place-items:center;
  color:#fff; font-size:16px;
}
.bg-blue{  background:#3b82f6; }
.bg-green{ background:#22c55e; }
.bg-purple{background:#8b5cf6;}
.bg-amber{ background:#f59e0b; }
.bg-red{   background:#ef4444; }
.faq-side{
  border:1px dashed var(--border);
  border-radius:12px; padding:12px;
  background:#fbfdff; height:fit-content;
}
.faq-tip{
  font-size:.9rem; color:#475569; padding:.5rem .75rem;
  background:#f1f5f9; border:1px solid var(--border); border-radius:10px;
  margin-bottom:.75rem;
}
/* mobile */
@media(max-width:576px){
  .faq-accordion .accordion-button{ padding:.8rem .9rem; }
}
/* FAQ */
.faq-grid{ grid-template-columns: 1fr !important; }
.tip-bar{
  background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.03));
  border: 1px solid rgba(13,110,253,.15);
  border-radius: 14px;
}
.tip-bar .bi-activity{ color:#0d6efd; }

.btn-status{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-width: 1.5px;
  font-weight: 600;
  color: #0d6efd;
  border-color: rgba(13,110,253,.45);
  background-color: transparent;
}

.btn-status:hover{
  color:#0b5ed7;
  background-color:#e7f1ff;               /* jelas saat hover */
  border-color:#0b5ed7;
}
.btn-status:focus,
.btn-status:active,
.btn-status.active,
.show > .btn-status.dropdown-toggle{
  color:#fff !important;
  background-color:#0d6efd !important;
  border-color:#0d6efd !important;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.25) !important;
}

a.btn-status,
a.btn-status:visited{ color:inherit; }

/* ==== FIX DESKTOP ==== */
@media (hover:hover) {
  .btn.btn-outline-primary.btn-status:hover{
    background-color:#cfe5ff !important;
    border-color:#0d6efd !important;
    color:#0b5ed7 !important;
  }
  .btn.btn-outline-primary.btn-status:active{
    background-color:#0d6efd !important;
    border-color:#0d6efd !important;
    color:#fff !important;
  }
  .btn.btn-outline-primary.btn-status:focus,
  .btn.btn-outline-primary.btn-status:focus-visible{
    background-color:#0d6efd !important;
    border-color:#0d6efd !important;
    color:#fff !important;
    box-shadow:0 0 0 .2rem rgba(13,110,253,.25) !important;
  }
}