/* ===== MODAL OPTIN — mengikuti panel form signup (#cta):
   panel gelap bersudut siku, garis oranye di atas, label terlihat, input putih, tombol oranye flat. ===== */
#optin-modal { background: rgba(10, 11, 9, 0.9); }
#optin-modal > .absolute { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Buang sisa gaya utility lama: sudut membulat, blur kaca, glow dekoratif. */
#optin-modal [class*="rounded"] { border-radius: 0 !important; }
#optin-modal [class*="backdrop-blur"] { backdrop-filter: none; -webkit-backdrop-filter: none; }
#optin-modal .modal-right-col > .absolute { display: none; }

.performance-site #modal-container,
#modal-container {
  background: #111210 !important;
  border: 1px solid #ffffff24 !important;
  border-top: 3px solid #ed6a16 !important;
  border-radius: 0 !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85) !important;
  overflow: hidden;
}

/* Tombol tutup: kotak sederhana */
#modal-container > button[aria-label="Tutup modal"] {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid #ffffff2b; color: #b8b9b1;
  transition: color .2s ease, border-color .2s ease;
}
#modal-container > button[aria-label="Tutup modal"]:hover { color: #fff; border-color: #ffffff66; background: transparent; }

/* ---- Kolom kiri: foto + nilai penawaran ---- */
.modal-left-col {
  background: #0b0c0a;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-right: 1px solid #ffffff1a;
}
.modal-left-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  opacity: .4; filter: grayscale(100%) contrast(1.1);
}
.modal-left-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #0b0c0a 20%, rgba(11,12,10,.82) 60%, rgba(11,12,10,.5) 100%); pointer-events: none; }
.modal-badge-icon { display: none; }
.modal-left-col h4 { letter-spacing: -.03em; }
.modal-left-col h4 .italic { font-style: normal; }

/* Checklist: centang oranye polos, tanpa lingkaran */
.modal-left-col ul li > span:first-child { width: auto; height: auto; background: none; font-size: 12px; }

/* Bukti sosial: thumbnail kotak berjajar, bukan tumpukan avatar bulat */
.modal-left-col .-space-x-2\.5 { gap: 4px; }
.modal-left-col .-space-x-2\.5 > * { margin: 0 !important; border: 0; width: 32px; height: 32px; }
.modal-left-col .-space-x-2\.5 > div:last-child { background: #ed6a16; color: #111210; }
.modal-left-col > div:last-child { background: transparent; }

/* ---- Kolom kanan: form ---- */
.modal-right-col { background: #111210 !important; position: relative; display: flex; flex-direction: column; justify-content: center; }
#optin-modal .design-script { transform: rotate(-4deg); transform-origin: left bottom; display: inline-block; margin-bottom: 8px; }

.modal-fields { display: grid; gap: 16px; }
.modal-fields label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: #f6f6f0; }
.performance-site #optin-modal input.modal-input,
.modal-input {
  width: 100%;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #d6d8ce;
  border-radius: 0;
  color: #171815;
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}
.modal-input::placeholder { color: #72756b; }
.modal-input:focus { outline: 2px solid #ed6a16; outline-offset: 2px; }
/* Tanda error dari JS (setFieldError) */
#optin-modal .modal-input.border-red-400 { border-color: #f87171; outline: 2px solid #f87171; outline-offset: 2px; }

.modal-message { padding: 12px; margin-top: 16px; border: 1px solid; font-size: 14px; line-height: 1.6; }

.performance-site #optin-modal button[type="submit"].modal-submit-btn,
.modal-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  margin-top: 22px;
  background: #ed6a16;
  color: #111210;
  border: 1px solid #ed6a16;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.modal-submit-btn:hover { background: #ff7a24; border-color: #ff7a24; }
.modal-submit-btn > span { font-size: 22px; line-height: 1; }
.modal-submit-btn:disabled { cursor: wait; opacity: .7; }

/* Pratinjau video versi mobile */
.modal-mobile-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ffffff1f;
  padding: 8px 12px;
  margin-bottom: 20px;
}
/* Beri ruang untuk tombol tutup yang berada di pojok kanan atas */
@media (max-width: 767px) { .modal-mobile-preview { margin-right: 48px; } }