/* ============================================================
   dialog-popup-box.css  -  Modal / Popup / Toast
   Selaras dengan: wedding style.css (reference)
   ============================================================ */

/* ---- OVERLAY --------------------------------------------- */
.modal-overlay,.dialog-overlay,.popup-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;transition:background .25s;overscroll-behavior:contain;
}
@media(min-width:520px){
  .modal-overlay,.dialog-overlay,.popup-overlay{align-items:center}
}
.modal-overlay.open,.dialog-overlay.open,.popup-overlay.open,.modal-overlay.active,.dialog-overlay.active{
  background:rgba(0,0,0,.55);pointer-events:all;
}

/* ---- BOX ------------------------------------------------- */
.modal-box,.dialog-box,.popup-box{
  background:#FFFFFF;width:100%;max-width:520px;
  border-radius:20px 20px 0 0;max-height:88vh;
  display:flex;flex-direction:column;
  transform:translateY(100%);opacity:0;
  transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .28s;
  overflow:hidden;will-change:transform,opacity;
}
@media(min-width:520px){
  .modal-box,.dialog-box,.popup-box{
    border-radius:20px;max-height:85vh;transform:translateY(20px) scale(.98);
  }
}
.modal-overlay.open .modal-box,
.dialog-overlay.open .dialog-box,
.popup-overlay.open .popup-box,
.modal-overlay.active .modal-box{transform:translateY(0);opacity:1}
@media(min-width:520px){
  .modal-overlay.open .modal-box,
  .dialog-overlay.open .dialog-box,
  .popup-overlay.open .popup-box,
  .modal-overlay.active .modal-box{transform:translateY(0) scale(1)}
}

/* ---- DRAG HANDLE ----------------------------------------- */
.modal-drag-handle{
  width:36px;height:4px;border-radius:99px;
  background:#D1D5DB;margin:10px auto 0;flex-shrink:0;
}
@media(min-width:520px){.modal-drag-handle{display:none}}

/* ---- HEADER ---------------------------------------------- */
.modal-head,.dialog-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid #EDE6D8;flex-shrink:0;
}
.modal-head-icon,.dialog-head-icon{
  width:40px;height:40px;border-radius:11px;background:var(--mb,#F3F4F6);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.modal-head-icon svg,.dialog-head-icon svg{width:20px;height:20px;color:var(--mc,#666)}
.modal-title,.dialog-title{
  font-family:'Playfair Display',Georgia,serif;font-size:17px;font-weight:700;
  color:#2A2118;margin-bottom:1px;
}
.modal-subtitle,.dialog-subtitle{font-size:12px;color:#8C7A65}

/* ---- CLOSE BUTTON ---------------------------------------- */
.modal-close,.dialog-close{
  margin-left:auto;width:32px;height:32px;border-radius:8px;background:#F3F4F6;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s;-webkit-tap-highlight-color:transparent;
}
.modal-close:hover,.dialog-close:hover{background:#E5E7EB}
.modal-close svg,.dialog-close svg{width:16px;height:16px;color:#555}

/* ---- BODY & FOOTER --------------------------------------- */
.modal-body,.dialog-body{
  flex:1;overflow-y:auto;padding:18px 18px 10px;overscroll-behavior:contain;
}
.modal-footer,.dialog-footer{
  padding:12px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #EDE6D8;flex-shrink:0;
}

/* ---- SAVE / CONFIRM BUTTON ------------------------------- */
.btn-save,.btn-confirm{
  width:100%;padding:13px;background:var(--mc,#9B6B3A);color:#fff;
  border:none;border-radius:10px;font-family:'Nunito',sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-save:hover,.btn-confirm:hover{opacity:.9}
.btn-save:active,.btn-confirm:active{opacity:.85}

/* ---- FIELD GROUP (fields inside modal) ------------------- */
.field-group{display:flex;flex-direction:column;gap:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{
  font-size:12.5px;font-weight:700;color:#8C7A65;
  display:flex;align-items:center;gap:3px;
}
.field-hint{font-size:11.5px;color:#8C7A65;margin-top:2px}
.field input,.field textarea,.field select{
  padding:11px 13px;border:1.5px solid #EDE6D8;border-radius:9px;
  font-family:'Nunito',sans-serif;font-size:16px;color:#2A2118;background:#fff;
  width:100%;transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#C4B8A8;font-size:13px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--mc,#9B6B3A);box-shadow:0 0 0 3px rgba(155,107,58,.1);
}
.field textarea{resize:vertical;min-height:88px;line-height:1.6}
.field select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C7A65' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}

/* ---- SECTION DIVIDER in modal ---------------------------- */
.sect-divider{
  display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--dc,#9B6B3A);margin:14px 0 4px;
}
.sect-divider::before,.sect-divider::after{content:'';flex:1;height:1px;background:#EDE6D8}

/* ---- TURUT MENGUNDANG rows ------------------------------- */
.turut-section{margin-bottom:18px}
.turut-group-label{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:8px 10px;border:1.5px solid;border-radius:8px;margin-bottom:10px;
}
.turut-list{display:flex;flex-direction:column;gap:8px}
.turut-row{display:flex;gap:8px;align-items:center}
.turut-row input{
  flex:1;padding:10px 12px;border:1.5px solid #EDE6D8;border-radius:8px;
  font-family:'Nunito',sans-serif;font-size:16px;color:#2A2118;background:#fff;min-width:0;
}
.turut-row input:focus{outline:none;border-color:#7C3AED;box-shadow:0 0 0 3px rgba(124,58,237,.08)}
.turut-remove{
  width:36px;height:36px;flex-shrink:0;background:#FFF5F5;
  border:1.5px solid #FCA5A5;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;-webkit-tap-highlight-color:transparent;
}
.turut-remove:hover{background:#FEE2E2}
.turut-remove svg{width:14px;height:14px;color:#EF4444}
.btn-add-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:10px 14px;margin-top:8px;
  border:1.5px dashed rgba(124,58,237,.4);border-radius:8px;background:transparent;
  cursor:pointer;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;
  color:#7C3AED;transition:background .15s;-webkit-tap-highlight-color:transparent;
}
.btn-add-row:hover{background:#F5F3FF}
.btn-add-row svg{width:15px;height:15px}

/* ---- BANK CARD ------------------------------------------- */
.bank-card{
  background:var(--bb,#FFFBEB);border:1.5px solid rgba(0,0,0,.08);
  border-radius:13px;padding:16px;margin-bottom:14px;
}
.bank-card-head{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--bc,#555);margin-bottom:14px;
}

/* ---- TOAST ----------------------------------------------- */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#1F2937;color:#fff;font-family:'Nunito',sans-serif;
  font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:99px;
  z-index:10001;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:#059669}
.toast.error{background:#DC2626}
.toast.info{background:#2563EB}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}