/* ====================================================================
   SIM-CAWAPRES: Sistem Informasi Pendaftaran Calon Wakil Presiden RI
   Tema Baru: Desain Resmi Nasional Emas & Merah Putih (daftarwapres.my.id)
   ==================================================================== */

:root {
  --primary-gold: #F59E0B;
  --primary-gold-hover: #D97706;
  --primary-gold-light: #FEF3C7;
  --nav-gold: #FBBF24;
  --kpu-red: #DC2626;
  --kpu-red-dark: #991B1B;
  --text-dark: #1E293B;
  --text-muted: #64748B;
  --bg-page: #FAF9F5;
  --border-light: #E2E8F0;
  --border-focus: #F59E0B;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* NAVBAR ATAS WARNA EMAS (SESUAI DESAIN ACUAN) */
.gov-navbar {
  background-color: var(--nav-gold);
  border-bottom: 2px solid #E5A100;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.gov-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1F2937;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  cursor: pointer;
}

.gov-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.35);
  color: #000000;
}

.gov-nav-link.active {
  background-color: #FFFFFF;
  color: #1F2937;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* HERO BANNER DENGAN BENDERA MERAH PUTIH & SILUET MONAS */
.hero-banner-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F2 100%);
  border-bottom: 1px solid #E5E7EB;
  padding: 2.25rem 1rem;
}

.flag-waving-bg {
  position: absolute;
  top: 0;
  left: -20px;
  width: 260px;
  height: 140px;
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
}

.monas-silhouette-bg {
  position: absolute;
  top: 10px;
  right: 18%;
  height: 140px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.garuda-emblem-right {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
}

@media (max-width: 768px) {
  .garuda-emblem-right {
    display: none;
  }
}

/* KARTU FORMULIR PUTIH ELEGAN */
.form-card-container {
  background: #FFFFFF;
  border-radius: 1.25rem;
  border: 1px solid #E2E8F0;
  border-top: 5px solid var(--primary-gold);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  padding: 2rem;
  position: relative;
}

/* BADGE MERAH KHUSUS CALON WAKIL PRESIDEN */
.badge-cawapres-red {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background-color: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #DC2626;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* INPUT FIELD DENGAN IKON DI DALAM (SESUAI GAMBAR) */
.input-with-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-left {
  position: absolute;
  left: 0.85rem;
  color: #64748B;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gov-input {
  width: 100%;
  padding: 0.65rem 0.85rem 0.65rem 2.6rem;
  font-size: 0.875rem;
  border: 1.5px solid #E2E8F0;
  border-radius: 0.75rem;
  background-color: #FFFFFF;
  color: #1E293B;
  transition: all 0.2s ease-in-out;
  outline: none;
}

.gov-input:focus {
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.gov-input::placeholder {
  color: #94A3B8;
  font-size: 0.825rem;
}

.gov-input-plain {
  padding-left: 0.85rem;
}

/* LABEL FORMULIR DENGAN IKON DI ATAS */
.gov-field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 0.4rem;
}

/* TOMBOL KUNING EMAS SEPERTI PADA GAMBAR */
.btn-gold-action {
  background-color: #FBBF24;
  color: #1E293B;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 0.75rem;
  border: 1px solid #F59E0B;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-gold-action:hover {
  background-color: #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* BADGES & HASH PILLS */
.kpu-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-ms {
  background-color: #DEF7EC;
  color: #03543F;
  border: 1px solid #84E1BC;
}

.badge-bms {
  background-color: #FEF08A;
  color: #713F12;
  border: 1px solid #FACC15;
}

.badge-tms {
  background-color: #FDE8E8;
  color: #9B1C1C;
  border: 1px solid #F8B4B4;
}

.badge-review {
  background-color: #E1EFFE;
  color: #1E429F;
  border: 1px solid #A4CAFE;
}

.hash-pill {
  font-family: "Courier New", Courier, monospace;
  background-color: #0F172A;
  color: #38BDF8;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  border: 1px solid #334155;
  user-select: all;
  word-break: break-all;
}

/* DUAL VIEWER */
.dual-viewer-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  min-height: 720px;
}

@media (max-width: 1024px) {
  .dual-viewer-container {
    grid-template-columns: 1fr;
  }
}

.document-preview-box {
  background-color: #1E293B;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 650px;
}

.document-canvas-wrapper {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem;
  background: radial-gradient(circle, #334155 0%, #1E293B 100%);
  position: relative;
}

.diploma-paper {
  background-color: #FCFBF7;
  color: #1F2937;
  width: 580px;
  min-height: 760px;
  padding: 40px 48px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  border: 10px solid #233857;
  outline: 2px dashed #C28E00;
  outline-offset: -6px;
  position: relative;
  transform-origin: top center;
  transition: transform 0.2s ease;
  user-select: none;
}

.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 280px 180px;
  opacity: 0.14;
  z-index: 20;
}

.watermark-text-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: 1.35rem;
  font-weight: 800;
  color: #B91C1C;
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  border: 3px solid rgba(185, 28, 28, 0.35);
  padding: 12px 24px;
  border-radius: 8px;
  text-transform: uppercase;
}

.gold-seal {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, #FFE259 0%, #FFA751 100%);
  border-radius: 50%;
  border: 4px double #976F00;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5B4000;
  font-weight: bold;
  font-size: 0.65rem;
  text-align: center;
  position: absolute;
  bottom: 50px;
  left: 50px;
  transform: rotate(-10deg);
}

.bsre-stamp-box {
  background: #FFFFFF;
  border: 2px solid #059669;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 6px rgba(5, 150, 105, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* SILUET MONAS & GEDUNG JAKARTA DI BAGIAN BAWAH HALAMAN */
.cityscape-footer-bg {
  width: 100%;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23F5EEDC' opacity='0.7' d='M0,120 L0,95 L40,95 L40,75 L60,75 L60,95 L110,95 L110,55 L130,55 L130,95 L220,95 L220,105 L260,105 L260,40 L270,40 L270,10 L273,10 L273,0 L277,0 L277,10 L280,10 L280,40 L290,40 L290,105 L350,105 L350,70 L380,70 L380,105 L450,105 L450,60 L480,60 L480,105 L580,105 L580,80 L620,80 L620,105 L720,105 L720,50 L750,50 L750,105 L840,105 L840,40 L850,40 L850,10 L853,10 L853,0 L857,0 L857,10 L860,10 L860,40 L870,40 L870,105 L960,105 L960,65 L1000,65 L1000,105 L1100,105 L1100,85 L1150,85 L1150,105 L1200,105 L1200,120 Z'/%3E%3C/svg%3E") repeat-x bottom center;
  background-size: 1000px 90px;
  pointer-events: none;
}

@media print {
  body * {
    visibility: hidden;
  }
  #printableReceipt, #printableReceipt * {
    visibility: visible;
  }
  #printableReceipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }
  .no-print {
    display: none !important;
  }
}