/* Naisu Store - halaman pemesanan */
.order-page { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; padding-top: 30px; padding-bottom: 30px; }
.order-hero { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 16px; padding: 16px; background: rgba(25, 26, 27, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.order-hero img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.order-cat { display: inline-block; padding: 3px 12px; font-size: 11px; font-weight: 700; color: var(--primary); background: rgba(245, 182, 19, 0.12); border: 1px solid rgba(245, 182, 19, 0.35); border-radius: 999px; }
.order-hero h1 { margin: 10px 0 2px; font-size: 20px; color: #fff; }
.order-hero small { color: var(--text-soft); }
.order-hero p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

.order-form { display: flex; flex-direction: column; gap: 16px; }
.order-step { padding: 20px; background: rgba(25, 26, 27, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.order-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 16px; color: #fff; }
.order-step h2 span { display: grid; place-items: center; width: 26px; height: 26px; font-size: 13px; font-weight: 700; color: #191a1b; background: var(--primary); border-radius: 50%; }
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-fields label { display: block; margin-bottom: 6px; font-size: 13px; color: #ccc; }
.order-fields input { width: 100%; height: 46px; padding: 0 14px; font-size: 14px; color: #fff; background: #191a1b; border: 1px solid #444; border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.order-fields input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 182, 19, 0.3); }
.order-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--text-soft); }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid #444; border-radius: 8px; transition: all .2s ease; }
.opt-body b { font-size: 14px; color: #fff; }
.opt-body em { font-style: normal; font-size: 13px; color: var(--primary); }
.opt:hover .opt-body { border-color: #777; }
.opt input:checked + .opt-body { border-color: var(--primary); background: rgba(245, 182, 19, 0.1); box-shadow: 0 0 0 1px var(--primary); }
.opt input:focus-visible + .opt-body { box-shadow: 0 0 0 2px rgba(245, 182, 19, 0.5); }

.order-summary { position: sticky; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: #1c1d1f; border: 1px solid rgba(245, 182, 19, 0.4); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.order-summary small { display: block; font-size: 12px; color: var(--text-soft); }
.order-summary strong { display: block; font-size: 20px; color: #fff; }
.order-summary em { display: block; font-style: normal; font-size: 12px; color: var(--text-soft); min-height: 14px; }
.btn-order { height: 46px; padding: 0 28px; font-size: 14px; font-weight: 700; color: #191a1b; background: var(--primary); border: 0; border-radius: 8px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.btn-order:hover:not(:disabled) { box-shadow: 0 0 18px rgba(245, 182, 19, 0.5); transform: translateY(-1px); }
.btn-order:disabled { opacity: .5; cursor: not-allowed; }
.order-error { padding: 12px 16px; font-size: 13px; color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 8px; }

@media (max-width: 860px) {
  .order-page { grid-template-columns: 1fr; padding-top: 20px; }
  .order-hero { position: static; flex-direction: row; align-items: center; }
  .order-hero img { width: 90px; aspect-ratio: 3 / 4; flex-shrink: 0; }
  .order-hero p { display: none; }
}
@media (max-width: 480px) {
  .order-fields { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: repeat(2, 1fr); }
  .order-summary { flex-direction: column; align-items: stretch; }
}
.opt-body s { margin-left: 4px; font-size: 11px; color: #888; }
.flash-tag { align-self: flex-start; padding: 2px 8px; font-size: 10px; font-weight: 700; color: #fff; background: #ff7a00; border-radius: 999px; }

/* Popup konfirmasi pesanan */
.cm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.cm-overlay.show{display:flex}
.cm-box{width:100%;max-width:400px;max-height:92vh;overflow:auto;background:#0d1117;border:1px solid #232a36;border-radius:20px;color:#e8eaf0;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cm-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 4px}
.cm-head h3{margin:0;font-size:18px}
.cm-x{background:none;border:0;color:#9aa3b2;font-size:22px;cursor:pointer;line-height:1}
.cm-sub{padding:0 22px 14px;color:#9aa3b2;font-size:13px;margin:6px 0 0}
.cm-body{padding:0 22px 16px}
.cm-card{background:#141a23;border:1px solid #232a36;border-radius:14px;padding:14px;margin-bottom:14px}
.cm-card b{display:block;font-size:16px}.cm-card small{color:#9aa3b2}.cm-card .pr{font-weight:700;margin-top:6px;display:block}
.cm-label{color:#9aa3b2;font-size:12px;margin:12px 0 6px}
.cm-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.cm-row span:first-child{color:#9aa3b2}.cm-row span:last-child{font-weight:600;text-align:right;word-break:break-all}
.cm-total{background:#2a2112;border:1px solid #3a2f18;border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.cm-total strong{font-size:22px}
.cm-loading{display:flex;align-items:center;gap:10px;color:#cfd4de;font-size:14px;padding:18px 0}
.cm-spin{width:14px;height:14px;border:2px solid #4a5160;border-top-color:#e8b923;border-radius:50%;animation:cmspin .8s linear infinite}
@keyframes cmspin{to{transform:rotate(360deg)}}
.cm-err{background:#2a1015;border:1px solid #5a1d27;border-radius:12px;padding:12px 14px;margin-bottom:6px}
.cm-err b{color:#ff4d5e;display:block;font-size:14px;margin-bottom:4px}.cm-err p{margin:0;font-size:14px}
.cm-foot{display:flex;gap:12px;padding:14px 22px 20px;border-top:1px solid #232a36}
.cm-foot button{flex:1;border:0;border-radius:12px;padding:12px;font-weight:600;cursor:pointer;font-size:14px}
.cm-back{background:#141a23;color:#e8eaf0}
.cm-pay{background:#a97c0b;color:#fff}.cm-pay:disabled{opacity:.45;cursor:not-allowed}
/* Styling Container Logo Pembayaran */
.pay-logo-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pay-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pay-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.opt-grid.methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 2. Memperkecil tinggi dan padding card pembayaran agar lebih compact */
.opt-grid.methods .opt-body {
  padding: 10px 12px;
}

/* 3. Menyesuaikan ukuran font dan jarak teks di dalam card pembayaran */
.opt-grid.methods .opt-body b {
  font-size: 13px;
}

.opt-grid.methods .pay-admin-hint {
  margin-top: 4px;
  font-size: 11px;
}

/* Responsif untuk HP kecil (1 kolom) */
@media (max-width: 480px) {
  .opt-grid.methods {
    grid-template-columns: 1fr;
  }
}