/* ==========================================================================
   GMPI DPD Sidoarjo — Iuran keanggotaan
   Dipakai di index.html (ringkasan) dan iuran.html (halaman penuh).
   Semua kelas berawalan .dues- agar tidak menabrak gaya situs yang ada.
   ========================================================================== */

.dues-section {
  padding: 84px 7.3%;
  background: #14140f;
  color: #f4efe2;
  position: relative;
  overflow: hidden;
}
.dues-section:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(680px 380px at 88% -10%, rgba(198, 155, 59, .18), transparent 65%),
    radial-gradient(520px 320px at 4% 110%, rgba(229, 28, 36, .16), transparent 70%);
}
.dues-inner { position: relative; max-width: 1240px; margin: 0 auto; }
.dues-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; flex-wrap: wrap; }
.dues-eyebrow { display: flex; align-items: center; gap: 11px; font-size: 9px; font-weight: 900; letter-spacing: 2.1px; color: #c6b98f; }
.dues-eyebrow i { display: inline-block; width: 25px; height: 2px; background: #e51c24; }
.dues-section h2 {
  font: clamp(38px, 5vw, 62px)/.96 Impact, 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.6px;
  margin: 16px 0 0;
  color: #fffdf7;
}
.dues-section h2 em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; text-transform: none; letter-spacing: -1.6px; color: #e0b855; }
.dues-lead { max-width: 420px; font-size: 12.5px; line-height: 1.85; color: #b8b3a4; margin: 0; }
.dues-lead b { color: #f0e6cb; }

.dues-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.dues-card {
  background: #1d1d19;
  border: 1px solid rgba(224, 184, 85, .22);
  padding: 22px;
  position: relative;
}
.dues-card.is-dark { background: #181814; }
.dues-card-kicker { font-size: 8.5px; font-weight: 900; letter-spacing: 2.2px; color: #c69b3b; }
.dues-amount { font: clamp(34px, 4.4vw, 50px)/1 Impact, 'Arial Narrow', sans-serif; color: #fffdf7; margin: 8px 0 2px; letter-spacing: -.5px; }
.dues-amount small { font: 900 12px Arial, Helvetica, sans-serif; letter-spacing: 1.6px; color: #a09775; }
.dues-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.dues-meta li {
  font-size: 9.5px; letter-spacing: .9px; font-weight: 800; color: #ddd2b2;
  border: 1px solid rgba(224, 184, 85, .35); padding: 6px 9px;
}
.dues-meta li b { color: #fff; }
.dues-meta li.is-warn { border-color: rgba(229, 28, 36, .6); color: #ffb9b9; }
.dues-note { font-size: 11px; line-height: 1.75; color: #a9a296; margin: 14px 0 0; }
.dues-note b { color: #e4dcc6; }

.dues-steps { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.dues-steps li { display: flex; gap: 11px; font-size: 11.5px; line-height: 1.65; color: #bdb6a6; }
.dues-steps li b {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid rgba(224, 184, 85, .45); color: #e0b855;
  font-size: 10px; font-weight: 900;
}
.dues-steps li strong { color: #fffdf7; }

/* Tombol & tautan */
.dues-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent;
  font: 900 10.5px Arial, Helvetica, sans-serif; letter-spacing: 1.1px; text-transform: uppercase;
  cursor: pointer; transition: transform .18s, background .18s, color .18s;
  background: #e51c24; color: #fff; text-decoration: none;
}
.dues-btn:hover { transform: translateY(-2px); background: #ff2b32; }
.dues-btn.is-gold { background: #c69b3b; color: #17140c; }
.dues-btn.is-gold:hover { background: #e0b855; }
.dues-btn.is-outline { background: transparent; border-color: rgba(224, 184, 85, .55); color: #e8dcba; }
.dues-btn.is-outline:hover { background: rgba(224, 184, 85, .12); }
.dues-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.dues-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Pilihan metode pembayaran */
.dues-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.dues-methods label { position: relative; cursor: pointer; }
.dues-methods input { position: absolute; opacity: 0; inset: 0; }
.dues-methods span {
  display: flex; align-items: center; gap: 9px; padding: 12px 11px;
  border: 1px solid #46422f; background: #141410;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #b7b09f;
}
.dues-methods span i { font-style: normal; font-size: 15px; color: #a3986f; }
.dues-methods input:checked + span { border-color: #e0b855; background: rgba(224, 184, 85, .13); color: #fffdf7; }
.dues-methods input:checked + span i { color: #e0b855; }
.dues-methods input:focus-visible + span { outline: 2px solid #e0b855; outline-offset: 2px; }

.dues-panel { margin-top: 14px; }
.dues-panel[hidden] { display: none; }

/* QRIS */
.dues-qris { text-align: center; }
.dues-qris-frame {
  display: inline-block; padding: 12px; background: #fff; position: relative;
  border: 1px solid rgba(224, 184, 85, .5);
}
.dues-qris-frame canvas { display: block; width: min(260px, 62vw); height: auto; image-rendering: pixelated; }
.dues-qris-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px;
  background: #fff; color: #17140c; font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px;
}
.dues-qris-amount { margin: 10px 0 0; font: 900 13px Arial, Helvetica, sans-serif; color: #e0b855; letter-spacing: 1px; }
.dues-qris-hint { font-size: 10.5px; line-height: 1.7; color: #a9a296; margin: 8px 0 0; }
.dues-qris-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.dues-link-mini {
  background: none; border: 0; padding: 0; color: #d9c68b; font-size: 10.5px;
  text-decoration: underline dotted; cursor: pointer;
}
.dues-qris-zoom { background: none; border: 0; padding: 0; cursor: zoom-in; }

.dues-field-list { margin: 0; display: grid; gap: 10px; }
.dues-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed rgba(224, 184, 85, .4); padding: 12px 13px; }
.dues-kop span { font-size: 9px; letter-spacing: 1.4px; color: #9d947d; font-weight: 800; text-transform: uppercase; }
.dues-kop b { font-size: 13px; color: #fffdf7; letter-spacing: .4px; text-align: right; }
.dues-copy { background: none; border: 1px solid rgba(224, 184, 85, .5); color: #e0b855; font-size: 9px; font-weight: 900; letter-spacing: 1px; padding: 7px 9px; cursor: pointer; white-space: nowrap; }
.dues-copy:hover { background: rgba(224, 184, 85, .14); }

/* Jumlah periode */
.dues-qty { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dues-qty span.label { font-size: 9.5px; letter-spacing: 1.3px; color: #9d947d; font-weight: 800; text-transform: uppercase; }
.dues-qty button {
  width: 34px; height: 34px; border: 1px solid #4c4732; background: #141410;
  color: #e0b855; font-size: 15px; font-weight: 900; cursor: pointer;
}
.dues-qty button:disabled { opacity: .4; cursor: not-allowed; }
.dues-qty output { min-width: 26px; text-align: center; font: 900 15px Arial, Helvetica, sans-serif; color: #fffdf7; }

/* Form */
.dues-form { margin-top: 16px; display: grid; gap: 12px; }
.dues-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dues-form label, .dues-label { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #a99f86; margin-bottom: 5px; }
.dues-form input, .dues-form select, .dues-form textarea {
  width: 100%; padding: 12px 12px; background: #0f0f0c; border: 1px solid #4c4732;
  color: #fffdf7; font: 14px Arial, Helvetica, sans-serif; border-radius: 0;
}
.dues-form input:focus, .dues-form select:focus, .dues-form textarea:focus { border-color: #e0b855; outline: none; }
.dues-form textarea { min-height: 66px; resize: vertical; }
.dues-form option { background: #1d1d19; color: #fffdf7; }
.dues-help { font-size: 10px; line-height: 1.6; color: #8f887a; margin: 4px 0 0; }
.dues-status-msg { font-size: 11.5px; line-height: 1.65; padding: 11px 12px; border-left: 3px solid #c69b3b; background: rgba(198, 155, 59, .12); color: #f0e4c0; margin: 0; }
.dues-status-msg[hidden] { display: none; }
.dues-status-msg.is-error { border-color: #e51c24; background: rgba(229, 28, 36, .13); color: #ffb9b9; }
.dues-status-msg.is-ok { border-color: #74b56c; background: rgba(116, 181, 108, .14); color: #d5f0cf; }

/* Hasil / sukses */
.dues-success { text-align: center; border: 1px solid rgba(116, 181, 108, .5); background: rgba(116, 181, 108, .1); padding: 22px 18px; margin-top: 16px; }
.dues-success[hidden] { display: none; }
.dues-success .mark { font-size: 30px; color: #9cdc92; line-height: 1; }
.dues-success h3 { margin: 8px 0 6px; font: 900 17px Arial, Helvetica, sans-serif; color: #e9f6e5; letter-spacing: .3px; }
.dues-success p { margin: 0 0 4px; font-size: 11.5px; line-height: 1.7; color: #cfe6ca; }

/* Cek status */
.dues-check { border-top: 1px solid rgba(224, 184, 85, .22); margin-top: 20px; padding-top: 18px; }
.dues-check h3 { font: 900 12px Arial, Helvetica, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #e0b855; margin: 0 0 10px; }
.dues-check-result { margin-top: 12px; }
.dues-check-result[hidden] { display: none; }
.dues-check-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dues-check-table th, .dues-check-table td { text-align: left; padding: 8px 7px; border-bottom: 1px solid rgba(224, 184, 85, .18); color: #d8d1bf; }
.dues-check-table th { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #9d947d; }
.dues-pill { display: inline-block; padding: 3px 8px; font-size: 8.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.dues-pill.is-ok { background: rgba(116, 181, 108, .2); color: #a8e39f; }
.dues-pill.is-wait { background: rgba(224, 184, 85, .2); color: #e9d193; }

/* Lightbox QRIS */
.dues-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8, 8, 6, .92); padding: 20px; }
.dues-lightbox[hidden] { display: none; }
.dues-lightbox img { max-width: min(92vw, 460px); max-height: 78vh; background: #fff; padding: 10px; }
.dues-lightbox button { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid #e0b855; color: #e0b855; font-size: 12px; font-weight: 900; letter-spacing: 1px; padding: 9px 13px; cursor: pointer; }
.dues-lightbox p { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #bdb6a6; font-size: 10.5px; margin: 0; }

/* Ringkasan di beranda */
.dues-teaser-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.dues-teaser-stats div { border: 1px solid rgba(224, 184, 85, .3); padding: 10px 13px; min-width: 116px; }
.dues-teaser-stats span { display: block; font-size: 8px; letter-spacing: 1.5px; color: #948b73; font-weight: 900; text-transform: uppercase; }
.dues-teaser-stats b { display: block; margin-top: 5px; font-size: 15px; color: #fffdf7; letter-spacing: .3px; }
.dues-teaser-qr { text-align: center; }
.dues-teaser-qr canvas { display: block; width: min(180px, 44vw); height: auto; margin: 0 auto; background: #fff; padding: 10px; image-rendering: pixelated; }
.dues-teaser-qr small { display: block; margin-top: 9px; font-size: 9.5px; color: #9d947d; letter-spacing: .4px; }
.dues-off { border: 1px solid rgba(229, 28, 36, .5); background: rgba(229, 28, 36, .1); padding: 14px; font-size: 11.5px; line-height: 1.7; color: #ffc9c9; }

/* Halaman penuh iuran.html */
body.dues-page {
  margin: 0;
  background:
    radial-gradient(900px 520px at 50% -180px, rgba(179, 18, 26, .35), transparent 62%),
    radial-gradient(760px 480px at 50% 108%, rgba(198, 155, 59, .13), transparent 65%),
    linear-gradient(180deg, #100b0b, #151412 55%, #0c0808);
  color: #f4efe2;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}
.dues-page .dues-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 18px 20px 0; }
.dues-page .dues-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.dues-page .dues-brand img { width: 44px; height: auto; border-radius: 50%; border: 2px solid #e51c24; }
.dues-page .dues-brand b { display: block; font: 18px Impact, 'Arial Narrow', sans-serif; letter-spacing: 2px; }
.dues-page .dues-brand small { display: block; font-size: 9px; letter-spacing: 2.6px; color: #e0b855; margin-top: 3px; }
.dues-page .dues-back { font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #cfc4a6; text-decoration: none; border: 1px solid rgba(224, 184, 85, .4); padding: 10px 13px; }
.dues-page .dues-back:hover { color: #fff; border-color: #e0b855; }
.dues-page main { max-width: 1080px; margin: 0 auto; padding: 22px 20px 40px; }
.dues-page .dues-page-title { text-align: center; margin: 10px 0 26px; }
.dues-page .dues-page-title .dues-eyebrow { justify-content: center; }
.dues-page .dues-page-title h1 { font: clamp(34px, 6.4vw, 56px)/1 Impact, 'Arial Narrow', sans-serif; text-transform: uppercase; margin: 12px 0 8px; letter-spacing: -.5px; color: #fffdf7; }
.dues-page .dues-page-title h1 em { font-family: Georgia, serif; font-style: italic; text-transform: none; color: #e0b855; }
.dues-page .dues-page-title p { max-width: 540px; margin: 0 auto; font-size: 12px; line-height: 1.8; color: #b8b3a4; }
.dues-page .dues-foot { max-width: 640px; margin: 26px auto 0; text-align: center; font-size: 10px; line-height: 1.8; color: #857e6c; }
.dues-page .dues-foot b { color: #c9b98c; }
.dues-page .dues-foot a { color: #c9b98c; }
.dues-page footer { text-align: center; padding: 16px 20px 26px; font-size: 9px; letter-spacing: 2.4px; color: #6f6a55; }
.dues-page footer a { color: #9c9270; text-decoration: none; border-bottom: 1px dotted #9c9270; }

@media (max-width: 860px) {
  .dues-section { padding: 62px 6%; }
  .dues-grid { grid-template-columns: 1fr; }
  .dues-head { display: block; }
  .dues-lead { margin-top: 14px; }
}
@media (max-width: 520px) {
  .dues-methods { grid-template-columns: 1fr; }
  .dues-form-row { grid-template-columns: 1fr; }
  .dues-card { padding: 18px 15px; }
  .dues-kop { flex-wrap: wrap; }
  .dues-kop b { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dues-btn { transition: none; }
}

/* Chip status di kartu ringkasan beranda */
.dues-card-kicker [data-dues-field="status"] {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(229, 28, 36, .55);
  color: #ffb0b0;
  font-size: 8px;
  letter-spacing: 1.3px;
}
.dues-card-kicker [data-dues-field="status"].is-open {
  background: rgba(116, 181, 108, .16);
  border-color: rgba(116, 181, 108, .6);
  color: #a8e39f;
}

/* Pemilihan bulan (iuran boleh dicicil per bulan) */
.dues-months { margin: 16px 0 0; }
.dues-months[hidden] { display: none; }
.dues-months-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dues-months-head .label { font-size: 9.5px; letter-spacing: 1.3px; color: #9d947d; font-weight: 800; text-transform: uppercase; }
.dues-months-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dues-months-grid label { position: relative; cursor: pointer; }
.dues-months-grid input { position: absolute; opacity: 0; inset: 0; }
.dues-months-grid span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border: 1px solid #46422f; background: #141410;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #b7b09f; text-align: center;
}
.dues-months-grid small { font-size: 8px; letter-spacing: .8px; color: #8a8271; font-weight: 700; }
.dues-months-grid input:checked + span { border-color: #e0b855; background: rgba(224, 184, 85, .16); color: #fffdf7; }
.dues-months-grid input:checked + span small { color: #d8c58f; }
.dues-months-grid input:focus-visible + span { outline: 2px solid #e0b855; outline-offset: 2px; }
.dues-months-grid input:disabled + span { opacity: .45; cursor: not-allowed; }
.dues-months-total {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border: 1px dashed rgba(224, 184, 85, .45);
}
.dues-months-total .label { font-size: 9.5px; letter-spacing: 1.3px; color: #9d947d; font-weight: 800; text-transform: uppercase; }
.dues-months-total b { font: 900 16px Arial, Helvetica, sans-serif; color: #fffdf7; letter-spacing: .3px; }
@media (max-width: 430px) {
  .dues-months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Elemen yang disembunyikan lewat atribut hidden (mis. saat belum ada tagihan) */
.dues-card [hidden], .dues-section [hidden] { display: none !important; }