/* ZaGreen Reuni Sept 2026 — Form Pendaftaran */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

.zg-sept-wrap{
  --zg-ink:#20291f; --zg-green-deep:#173822; --zg-green-mid:#28503a; --zg-green-soft:#e7efe4;
  --zg-cream:#faf6ec; --zg-paper:#fffdf7; --zg-gold:#b8863a; --zg-gold-bright:#d6a24d;
  --zg-line:#d8d0bd; --zg-red:#a94438; --zg-radius:14px;
  --zg-font-display:'Fraunces', Georgia, serif;
  --zg-font-body:'Plus Jakarta Sans', -apple-system, sans-serif;
  --zg-font-mono:'JetBrains Mono', monospace;
  max-width:640px; margin:0 auto; padding:0 4px 40px; font-family:var(--zg-font-body) !important; color:var(--zg-ink);
}
.zg-sept-wrap *{box-sizing:border-box; font-family:inherit !important;}
.zg-sept-wrap h1, .zg-sept-wrap h2{font-family:var(--zg-font-display) !important;}
.zg-sept-eyebrow{font-family:var(--zg-font-mono) !important;}
.zg-sept-hero-meta .item b{font-family:var(--zg-font-display) !important;}
.zg-sept-fee-total-num{font-family:var(--zg-font-display) !important;}
.zg-sept-num{font-family:var(--zg-font-mono) !important;}
.zg-sept-rekening-detail .norek{font-family:var(--zg-font-mono) !important;}

.zg-sept-hero{
  margin-top:20px; background:linear-gradient(165deg, var(--zg-green-deep), var(--zg-green-mid) 65%);
  border-radius:20px; padding:32px 26px 26px; position:relative; overflow:hidden; color:#f4efdf;
  box-shadow:0 10px 30px -14px rgba(23,56,34,.28);
}
.zg-sept-hero::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(214,162,77,.09) 0 2px, transparent 2px 34px);
  opacity:.6;
}
.zg-sept-hero-arch{
  position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  border:1.5px solid rgba(214,162,77,.35); border-radius:50%;
}
.zg-sept-hero-arch.two{ right:-10px; top:-10px; width:110px; height:110px; border-color:rgba(214,162,77,.5); }
.zg-sept-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--zg-gold-bright); font-weight:700; position:relative; z-index:1;
}
.zg-sept-eyebrow::before{content:""; width:16px; height:1px; background:var(--zg-gold-bright);}
.zg-sept-hero h1{color:#fbf7ea; font-size:24px; font-weight:600; margin:10px 0 0; line-height:1.25; position:relative; z-index:1;}
.zg-sept-hero .zg-sept-tag{color:#cdd9c8; font-size:14px; margin-top:8px; max-width:38ch; position:relative; z-index:1;}
.zg-sept-hero-meta{display:flex; gap:20px; margin-top:20px; flex-wrap:wrap; position:relative; z-index:1;}
.zg-sept-hero-meta .item{font-size:13px; color:#e7ecdd;}
.zg-sept-hero-meta .item b{display:block; font-size:15px; color:#fff; font-weight:600; margin-top:2px;}

.zg-sept-locked-notice{
  margin-top:16px; background:var(--zg-green-soft); border:1px solid #9db08f; border-radius:10px;
  padding:12px 16px; font-size:13px; color:#25401f;
}
.zg-sept-info-notice{
  margin-top:16px; background:#fdf6e8; border:1px solid var(--zg-gold-bright); border-radius:10px;
  padding:12px 16px; font-size:12.5px; line-height:1.5; color:#5c4620;
}
.zg-sept-info-notice strong{color:var(--zg-green-deep);}
.zg-sept-deadline-notice{
  margin-top:12px; background:#fdece8; border:1px solid #e08a6f; border-radius:10px;
  padding:12px 16px; font-size:12.5px; line-height:1.5; color:#7a3018;
}
.zg-sept-deadline-notice strong{color:#c0392b;}

.zg-sept-section{margin-top:30px;}
.zg-sept-section-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.zg-sept-num{
  font-size:12px; color:var(--zg-gold); border:1px solid var(--zg-gold); border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.zg-sept-section-head h2{font-size:18px; font-weight:600; margin:0; color:var(--zg-green-deep);}
.zg-sept-section-desc{font-size:13px; color:#736a54; margin:2px 0 10px 32px;}

.zg-sept-card{
  background:var(--zg-paper); border:1px solid var(--zg-line); border-radius:var(--zg-radius);
  padding:18px; box-shadow:0 2px 10px -6px rgba(23,56,34,.08);
}
.zg-sept-field{margin-bottom:14px;}
.zg-sept-field:last-child{margin-bottom:0;}
.zg-sept-field label{display:block; font-size:12.5px; font-weight:600; color:var(--zg-green-deep); margin-bottom:6px;}
.zg-sept-field label .req{color:var(--zg-red);}
.zg-sept-field label .opt{color:#a39c86; font-weight:500; font-size:11px;}
.zg-sept-wrap input[type=text], .zg-sept-wrap input[type=tel], .zg-sept-wrap select, .zg-sept-wrap textarea{
  width:100%; padding:10px 12px; border:1.3px solid var(--zg-line); border-radius:9px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--zg-ink);
}
.zg-sept-wrap input:focus, .zg-sept-wrap select:focus, .zg-sept-wrap textarea:focus{
  outline:none; border-color:var(--zg-green-mid); box-shadow:0 0 0 3px rgba(40,80,58,.1);
}
.zg-sept-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.zg-sept-row2{grid-template-columns:1fr;}}

.zg-sept-pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.zg-sept-pill{
  border:1.3px solid var(--zg-line); border-radius:30px; padding:8px 15px; font-size:13px;
  cursor:pointer; background:#fff; font-weight:500; color:#57503f; user-select:none;
}
.zg-sept-pill:hover{border-color:var(--zg-green-mid);}
.zg-sept-pill.active{background:var(--zg-green-deep); border-color:var(--zg-green-deep); color:#fbf7ea;}

.zg-sept-yesno{display:flex; gap:10px;}
.zg-sept-yesno .zg-sept-pill{flex:1; text-align:center;}

#zg-sept-companion-list{margin-top:14px;}
.zg-sept-companion{
  border:1.3px solid var(--zg-line); border-radius:var(--zg-radius); padding:16px;
  background:#fffef9; margin-bottom:12px;
}
.zg-sept-companion-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.zg-sept-companion-head .tag{
  font-size:11px; background:var(--zg-gold); color:#fff; padding:3px 9px; border-radius:20px;
}
.zg-sept-companion-remove{background:none; border:none; color:var(--zg-red); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 6px;}
.zg-sept-same-toggle{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#57503f; margin:10px 0 2px; cursor:pointer;}
.zg-sept-same-toggle input{width:15px; height:15px; accent-color:var(--zg-green-mid);}
.zg-sept-companion-address{margin-top:10px;}
.zg-sept-companion-address.hidden{display:none;}

.zg-sept-add-companion-btn{
  width:100%; padding:11px; border:1.5px dashed var(--zg-green-mid); border-radius:10px;
  background:transparent; color:var(--zg-green-mid); font-weight:700; font-size:13.5px; cursor:pointer; margin-top:2px;
}
.zg-sept-add-companion-btn:hover{background:var(--zg-green-soft);}
.zg-sept-companion-summary{margin-top:14px; display:none; align-items:center; gap:8px; font-size:12.5px; color:var(--zg-green-mid); font-weight:600;}
.zg-sept-companion-summary.show{display:flex;}
.zg-sept-companion-summary .dot{width:6px; height:6px; border-radius:50%; background:var(--zg-gold);}

.zg-sept-fee-card{
  background:linear-gradient(160deg, var(--zg-green-deep), var(--zg-green-mid)); border-radius:var(--zg-radius);
  padding:20px 22px; color:#f4efdf;
}
.zg-sept-fee-row{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.12);}
.zg-sept-fee-row:last-of-type{border-bottom:none;}
.zg-sept-fee-total-num{font-size:20px; color:var(--zg-gold-bright); font-weight:700;}
.zg-sept-fee-includes{font-size:11.5px; color:#c9d4c1; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.2);}
.zg-sept-fee-includes b{color:#f4efdf;}

.zg-sept-payopt{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.zg-sept-payopt label{border:1.3px solid var(--zg-line); border-radius:11px; padding:13px; cursor:pointer; display:block;}
.zg-sept-payopt label b{display:block; font-size:13.5px; color:var(--zg-green-deep);}
.zg-sept-payopt label span{font-size:11.5px; color:#8c8368;}
.zg-sept-payopt label.checked{border-color:var(--zg-green-deep); background:var(--zg-green-soft);}

#zg-sept-panel-bayar{margin-top:16px; display:none;}
#zg-sept-panel-bayar.show{display:block;}
.zg-sept-metode-bayar-group{display:flex; gap:8px; margin-bottom:16px;}
.zg-sept-metode-bayar-group .zg-sept-pill{flex:1; text-align:center; padding:10px 12px;}
.zg-sept-metode-panel{display:none;}
.zg-sept-metode-panel.show{display:block;}

.zg-sept-rekening-box{display:flex; align-items:center; gap:12px; background:var(--zg-green-soft); border-radius:11px; padding:13px 14px; margin-bottom:12px;}
.zg-sept-bank-logo{width:44px !important; height:44px !important; max-width:44px !important; border-radius:9px; background:#fff; border:1px solid var(--zg-line); object-fit:contain; padding:4px; flex-shrink:0; display:block;}
.zg-sept-rekening-detail{font-size:13px; flex:1;}
.zg-sept-rekening-detail .norek{font-size:15px; font-weight:700; color:var(--zg-green-deep);}
.zg-sept-copy-btn{background:var(--zg-gold); color:#fff; border:none; border-radius:8px; padding:7px 11px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;}

.zg-sept-qris-box{text-align:center; border:1.3px dashed #9db08f; border-radius:11px; padding:18px; margin-bottom:14px;}
.zg-sept-qris-img{width:150px; height:150px; object-fit:contain; margin:0 auto 8px; border-radius:8px; display:block;}
.zg-sept-qris-box p{font-size:11.5px; color:#8c8368; margin:0;}
.zg-sept-download-qris-btn{
  display:inline-block; margin-top:12px; background:transparent; color:var(--zg-green-mid);
  border:1.3px solid var(--zg-green-mid); border-radius:20px; padding:8px 16px; font-size:12px;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.zg-sept-download-qris-btn:hover{background:var(--zg-green-soft);}

.zg-sept-upload-area{border:1.5px dashed var(--zg-gold); border-radius:11px; padding:20px; text-align:center; cursor:pointer; background:#fffdf5;}
.zg-sept-upload-area:hover{background:var(--zg-green-soft);}
.zg-sept-upload-area .icon{font-size:22px;}
.zg-sept-upload-area .txt{font-size:12.5px; color:#6b6250; margin-top:5px;}
.zg-sept-upload-area .fname{font-size:12px; color:var(--zg-green-deep); font-weight:700; margin-top:6px;}

.zg-sept-submit-bar{margin-top:32px;}
.zg-sept-btn-submit{
  width:100%; padding:16px; border:none; border-radius:12px; cursor:pointer; background:var(--zg-gold);
  color:#fff; font-size:15px; font-weight:800; box-shadow:0 12px 24px -10px rgba(184,134,58,.55);
}
.zg-sept-btn-submit:disabled{opacity:.6; cursor:not-allowed;}
.zg-sept-submit-note{text-align:center; font-size:11.5px; color:#8c8368; margin-top:10px;}
.zg-sept-form-error{text-align:center; font-size:13px; color:var(--zg-red); margin-top:10px; font-weight:600;}

/* Confirm view */
.zg-sept-confirm-hero{text-align:center; margin-top:30px; padding:24px 16px 6px;}
.zg-sept-confirm-check{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px; background:var(--zg-green-deep);
  color:#fbf7ea; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -10px rgba(23,56,34,.5);
}
.zg-sept-confirm-hero h2{font-size:20px; font-weight:600; margin:0; color:var(--zg-green-deep);}
.zg-sept-confirm-hero p{font-size:13.5px; color:#736a54; margin-top:6px;}
.zg-sept-confirm-summary{margin-top:20px;}
.zg-sept-confirm-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--zg-line); font-size:13.5px;}
.zg-sept-confirm-row:last-child{border-bottom:none;}
.zg-sept-confirm-row span{color:#736a54;}
.zg-sept-confirm-row b{color:var(--zg-green-deep); font-weight:700; text-align:right;}
.zg-sept-status-pending{color:var(--zg-gold);}

.zg-sept-receipt-card{
  margin-top:14px; display:flex; align-items:center; gap:12px; background:var(--zg-paper);
  border:1.3px solid var(--zg-gold-bright); border-radius:var(--zg-radius); padding:14px 16px;
}
.zg-sept-receipt-card .icon{font-size:24px; flex-shrink:0;}
.zg-sept-receipt-card .text{flex:1; min-width:0; display:flex; flex-direction:column;}
.zg-sept-receipt-card .text b{font-size:13.5px; color:var(--zg-green-deep);}
.zg-sept-receipt-card .text span{font-size:11.5px; color:#8c8368; margin-top:2px;}
.zg-sept-btn-receipt{
  background:var(--zg-gold); color:#fff; border:none; border-radius:9px; padding:9px 14px;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none;
}

.zg-sept-confirm-note{margin-top:16px; background:var(--zg-green-soft); border-radius:var(--zg-radius); padding:16px 18px; font-size:13px; color:#3c4a37; line-height:1.55;}
.zg-sept-confirm-note b{color:var(--zg-green-deep);}

.zg-sept-btn-edit{
  width:100%; margin-top:18px; padding:14px; border:1.5px solid var(--zg-green-deep); border-radius:12px;
  background:transparent; color:var(--zg-green-deep); font-size:14px; font-weight:700; cursor:pointer;
}
.zg-sept-btn-edit:hover{background:var(--zg-green-soft);}