/* =========================================
   ROOT
========================================= */

:root {
  --white: #ffffff;
  --soft-orange: #ffb685;
  --dark-orange: #e83a00;
  --black: #000000;

  --yellow: #efa91a;
  --orange: #e16522;
  --red: #b1352f;

  --text: #000000;
  --text-soft: #59534c;

  --background: #f6f9fb;
  --border: #dce5e9;

  --success: #27754b;

  --radius: 16px;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* =========================================
   RESET
========================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);

  color: var(--text);

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;
}

/* =========================================
   GENERAL
========================================= */

button,
input,
select {
  font-family: inherit;
}

.container {
  width: min(1080px, 92%);

  margin: 0 auto;
}

.hidden {
  display: none !important;
}

/* =========================================
   HEADER
========================================= */

.site-header {
  background: linear-gradient(
    110deg,
    #fff8f3 0%,
    #ffe9da 30%,
    #ffd3b8 65%,
    #ffb17d 100%
  );

  width: 100%;
  position: relative;

  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.header-decoration {
  height: 5px;

  background: linear-gradient(
    90deg,
    var(--red),
    var(--orange),
    var(--yellow)
  );
}

.header-content {
  min-height: 30px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding-top: 3px;
  padding-bottom: 3px;

  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;

  gap: 12px;
}

.brand-icon {
  flex: 0 0 auto;

  width: clamp(60px, 11vw, 120px);
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-size: 10px;
  font-weight: 700;
}

.brand-icon img {
  width: 100%;
  height: auto;

  max-height: 100px;

  object-fit: contain;
  display: block;
}

.brand-text {
  flex: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.brand-text span {
  display: block;

  color: var(--text-soft);

  font-size: 10px;

  font-weight: 600;
}

.brand-text h1 {
  margin-top: 2px;

  font-size: 18px;

  color: #111827;

  font-weight: 720;

  line-height: 1.25;
}

/* =========================================
   MAIN
========================================= */

.main-content {
  padding: 48px 0 70px;
}

/* =========================================
   INTRO
========================================= */

.intro {
  max-width: 720px;

  margin-bottom: 34px;
}

.badge {
  display: inline-flex;

  padding: 6px 11px;

  border-radius: 100px;

  background: var(--soft-orange);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.8px;
}

.intro h2 {
  margin-top: 15px;

  max-width: 700px;

  font-size: clamp(28px, 5vw, 42px);

  line-height: 1.15;

  letter-spacing: -1.2px;
}

.intro p {
  max-width: 680px;

  margin-top: 14px;

  color: var(--text-soft);

  font-size: 14px;
}

/* =========================================
   PROGRESS
========================================= */

.progress-container {
  max-width: 720px;

  display: flex;

  align-items: center;

  margin-bottom: 24px;
}

.progress-item {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #9aa4a9;
}

.progress-number {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e7edef;

  font-size: 12px;

  font-weight: 800;
}

.progress-item strong {
  display: block;

  font-size: 12px;
}

.progress-item small {
  display: block;

  font-size: 10px;

  color: #929b9f;
}

.progress-item.active {
  color: var(--black);
}

.progress-item.active .progress-number {
  background: var(--dark-orange);

  color: var(--white);
}

.progress-item.completed .progress-number {
  background: var(--orange);

  color: var(--white);
}

.progress-line {
  flex: 1;

  height: 1px;

  margin: 0 16px;

  background: var(--border);
}

/* =========================================
   FORM CARD
========================================= */

.form-card,
.confirmation-card {
  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  padding: 34px;
}

.section-heading {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding-bottom: 24px;

  margin-bottom: 26px;

  border-bottom: 1px solid var(--border);
}

.section-icon {
  width: 44px;
  height: 44px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 12px;

  font-weight: 800;
}

.section-icon.blue {
  background: var(--soft-orange);
}

.section-icon.orange {
  background: #fff0df;
}

.section-heading h3 {
  font-size: 21px;
}

.section-heading p {
  margin-top: 2px;

  color: var(--text-soft);

  font-size: 13px;
}

/* =========================================
   FORM GRID
========================================= */

.form-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;
}

.full-width {
  grid-column: 1 / -1;
}

/* =========================================
   FIELD
========================================= */

.field {
  position: relative;
}

.field label {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 8px;

  font-size: 13px;

  font-weight: 700;
}

.required {
  color: var(--red);

  font-size: 9px;

  font-weight: 600;

  text-transform: uppercase;

  white-space: nowrap;
}

/* =========================================
   INPUT & SELECT
========================================= */

.field input,
.field select {
  width: 100%;

  min-height: 47px;

  padding: 12px 14px;

  border: 1px solid #cdd8dd;

  border-radius: 10px;

  background: var(--white);

  color: var(--black);

  outline: none;

  font-size: 14px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.field input::placeholder {
  color: #9ca6aa;
}

.field input:focus,
.field select:focus {
  border-color: var(--orange);

  box-shadow: 0 0 0 3px rgba(225, 101, 34, 0.1);
}

.field select:disabled {
  background: #f1f4f5;

  color: #9ca4a8;

  cursor: not-allowed;
}

.field input.valid,
.field select.valid {
  border-color: var(--success);
}

.field input.invalid,
.field select.invalid {
  border-color: var(--red);

  background: #fff9f8;
}

/* =========================================
   HINT & ERROR
========================================= */

.field-hint {
  margin-top: 5px;

  color: var(--text-soft);

  font-size: 11px;
}

.error-message {
  display: none;

  margin-top: 6px;

  color: var(--red);

  font-size: 11px;
}

.error-message.show {
  display: block;
}

/* =========================================
   FORM FOOTER
========================================= */

.form-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 30px;

  padding-top: 24px;

  border-top: 1px solid var(--border);
}

.required-note {
  color: var(--text-soft);

  font-size: 11px;
}

/* =========================================
   BUTTON
========================================= */

.btn {
  min-height: 45px;

  padding: 11px 19px;

  border: none;

  border-radius: 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--dark-orange);

  color: var(--white);
}

.btn-primary:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background: var(--dark-orange);

  color: var(--white);
}

.btn-submit {
  background: var(--dark-orange);

  color: var(--white);
}

.btn-submit:hover:not(:disabled) {
  background: var(--red);
}

.btn:disabled {
  background: #dfe5e7;

  color: #9aa3a6;

  cursor: not-allowed;
}

/* =========================================
   RESIDENCE
========================================= */

.residence-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;
}

.residence-option {
  min-height: 100px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: 1px solid #d5dfe3;

  border-radius: 12px;

  background: var(--white);

  color: var(--black);

  cursor: pointer;

  font-size: 12px;

  font-weight: 600;

  transition: 0.2s ease;
}

.residence-option:hover {
  border-color: var(--orange);

  background: #fffaf5;
}

.residence-option.selected {
  border-color: var(--orange);

  background: #fff1e5;

  color: var(--red);

  box-shadow: 0 0 0 2px rgba(225, 101, 34, 0.08);
}

.residence-icon {
  width: 35px;
  height: 35px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--soft-orange);

  font-size: 12px;

  font-weight: 800;
}

.residence-option.selected .residence-icon {
  background: var(--orange);

  color: var(--white);
}

/* =========================================
   GEO SECTION
========================================= */

/* =========================================================
   LOCATION / MAP - CURRENT VERSION
========================================================= */

.geo-section {
  display: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.geo-section.show {
  display: block;
}

/* =========================
   STATUS
========================= */

.geo-status {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  color: var(--text-soft);
  font-size: 12px;
}

.geo-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #cbd5d9;
}

.geo-dot.on {
  background: #2e8b57;
}

/* =========================
   LOCATION METHODS
========================= */

.location-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 12px;
}

.location-method {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: #ffffff;

  text-align: left;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.location-method:hover {
  border-color: var(--orange);
  background: #fff9f4;
}

.location-method.active {
  border-color: var(--orange);
  background: #fff2e8;
}

/* ICON */

.method-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: #fff0e4;

  font-size: 17px;
}

/* CONTENT */

.method-content {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.method-content strong {
  font-size: 13px;
  color: var(--text);
}

.method-content span {
  font-size: 10px;
  color: var(--text-soft);
}

/* =========================
   SEARCH
========================= */

.location-search {
  display: flex;

  gap: 8px;

  margin-top: 12px;
}

.location-search input {
  flex: 1;

  min-width: 0;

  padding: 11px 12px;

  border: 1px solid var(--border);
  border-radius: 8px;

  font-family: inherit;
  font-size: 12px;

  outline: none;
}

.location-search input:focus {
  border-color: var(--orange);
}

.btn-search {
  padding: 0 18px;

  border: none;
  border-radius: 8px;

  background: var(--orange);
  color: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

/* =========================
   SEARCH RESULT
========================= */

.search-result {
  display: none;

  margin-top: 8px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: #ffffff;

  overflow: hidden;
}

.search-result.show {
  display: block;
}

.location-result-item {
  display: flex;
  flex-direction: column;

  gap: 3px;

  padding: 11px 12px;

  border-bottom: 1px solid #edf1f2;

  cursor: pointer;
}

.location-result-item:last-child {
  border-bottom: none;
}

.location-result-item:hover {
  background: #fff8f2;
}

.location-result-item strong {
  font-size: 12px;
}

.location-result-item span {
  color: var(--text-soft);
  font-size: 10px;

  line-height: 1.4;
}

/* =========================
   MAP INSTRUCTION
========================= */

.map-instruction {
  margin-top: 12px;
  margin-bottom: 10px;

  padding: 11px 12px;

  border-radius: 8px;

  background: #f5f8f9;

  color: var(--text-soft);

  font-size: 11px;
  line-height: 1.5;
}

/* =========================
   MAP
========================= */

#mapPick {
  width: 100%;
  height: 380px;

  margin-top: 10px;

  border: 1px solid var(--border);
  border-radius: 10px;

  overflow: hidden;

  background: #eef3f4;
}

/* =========================
   LOCATION DETAIL
========================= */

.location-detail {
  margin-top: 12px;

  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: #faf8f2;
}

.detail-title {
  margin-bottom: 10px;

  font-size: 13px;
  font-weight: 700;
}

.detail-item {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 15px;

  padding: 8px 0;

  border-bottom: 1px solid #e8e3d8;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item span {
  color: var(--text-soft);

  font-size: 10px;
}

.detail-item strong {
  max-width: 65%;

  text-align: right;

  font-size: 11px;

  line-height: 1.4;
}

/* =========================
   LOCATION ERROR
========================= */

#locationError {
  display: none;

  margin-bottom: 10px;

  padding: 10px 12px;

  border: 1px solid #e5b7b0;
  border-radius: 8px;

  background: #fff0ee;

  color: #a83226;

  font-size: 11px;
  line-height: 1.5;
}

#locationError.show {
  display: block;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {
  .location-search {
    flex-direction: column;
  }

  .btn-search {
    min-height: 40px;
  }

  #mapPick {
    height: 300px;
  }

  .detail-item {
    flex-direction: column;
    gap: 3px;
  }

  .detail-item strong {
    max-width: 100%;
    text-align: left;
  }
}

/* =========================================================
   QUESTIONNAIRE
========================================================= */

/* =========================================
   QUESTIONNAIRE
========================================= */

#stepQuestionnaire {
  margin-top: 0;
}

/* QUESTION CARD */

.question-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
}

/* QUESTION HEADER */

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}


.question-required {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* QUESTION TEXT */

.question-text {
  margin: 0;
  max-width: 700px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

/* ANSWERS */

.answer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.answer-option {
  position: relative;

  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 48px;
  padding: 12px 14px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

/* HIDE RADIO */

.answer-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* CUSTOM RADIO */

.custom-radio {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  border: 1.5px solid #b9c3c7;
  border-radius: 50%;

  background: #ffffff;
}

/* HOVER */

.answer-option:hover {
  border-color: var(--orange);
  background: #fff9f4;
}

/* SELECTED */

.answer-option:has(input:checked) {
  border-color: var(--orange);
  background: #fff2e8;
}

/* SELECTED RADIO */

.answer-option:has(input:checked) .custom-radio {
  border: 5px solid var(--orange);
}

/* LABEL */

.answer-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* MOBILE */

@media (max-width: 600px) {
  .answer-options {
    grid-template-columns: 1fr;
  }

  .question-card {
    padding: 16px;
  }

  .question-text {
    font-size: 14px;
  }
}

.form-section.hidden {
  display: none;
}

/* =========================
   PANEL HEADING
========================= */

.panel-heading {
  display: flex;
  align-items: center;

  gap: 14px;
}

.panel-number {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #fff0df;
  color: var(--orange);

  font-size: 13px;
  font-weight: 800;
}

.panel-description {
  margin-top: 4px;

  color: var(--text-soft);

  font-size: 12px;
  line-height: 1.5;
}

/* =========================
   DIVIDER
========================= */

.section-divider {
  height: 1px;

  margin: 24px 0;

  background: var(--border);
}

/* =========================
   QUESTION CARD
========================= */

.question-card {
  padding: 20px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: #ffffff;
}

/* =========================
   QUESTION HEADER
========================= */

.question-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}


.question-required {
  color: var(--orange);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
}

/* =========================
   QUESTION TEXT
========================= */

.question-text {
  margin: 0;

  max-width: 700px;

  color: var(--text);

  font-size: 15px;
  font-weight: 700;

  line-height: 1.55;
}

/* =========================
   ANSWER OPTIONS
========================= */

.answer-options {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 18px;
}

/* =========================
   ANSWER OPTION
========================= */

.answer-option {
  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 48px;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

/* Hide native radio */

.answer-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

/* Custom radio */

.custom-radio {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  border: 1.5px solid #b9c3c7;

  border-radius: 50%;

  background: #ffffff;
}

/* Hover */

.answer-option:hover {
  border-color: var(--orange);

  background: #fff9f4;
}

/* Selected */

.answer-option:has(input:checked) {
  border-color: var(--orange);

  background: #fff2e8;
}

/* Selected radio */

.answer-option:has(input:checked) .custom-radio {
  border: 5px solid var(--orange);
}

/* Label */

.answer-label {
  font-size: 12px;

  font-weight: 600;

  color: var(--text);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {
  .answer-options {
    grid-template-columns: 1fr;
  }

  .question-card {
    padding: 16px;
  }

  .question-text {
    font-size: 14px;
  }
}

/* =========================================================
   ADDRESS + PIN WORKFLOW
========================================================= */
.address-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.address-card-title {
  font-size: 14px;
  font-weight: 800;
}

.address-card-desc {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.address-grid .full-width {
  grid-column: 1 / -1;
}

.address-autocomplete-wrap {
  position: relative;
}

.address-suggestions {
  display: none;
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.address-suggestions.show {
  display: block;
}

.address-suggestions .location-result-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
}

.location-tools-single {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.btn-location-search {
  width: 100%;
  margin-top: 16px;
  background: var(--orange);
  color: #fff;
}

.btn-location-search:hover:not(:disabled) {
  background: var(--dark-orange);
}

.location-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.location-tools .location-method {
  margin: 0;
}

.location-confirmed {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #b9d8c5;
  border-radius: 9px;
  background: #f2faf5;
  color: #276b46;
}

.location-confirmed.show {
  display: flex;
}

.location-confirmed > span {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #2e8b57;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.location-confirmed strong,
.location-confirmed small {
  display: block;
}

.location-confirmed strong {
  font-size: 11px;
}

.location-confirmed small {
  margin-top: 2px;
  font-size: 10px;
}

.detail-item-block {
  display: block;
}

.detail-item-block span,
.detail-item-block strong {
  display: block;
  max-width: 100%;
  text-align: left;
}

.detail-item-block strong {
  margin-top: 4px;
}

#mapPick {
  cursor: crosshair;
}

#locationError.err-msg {
  display: none;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #e5b7b0;
  border-radius: 8px;
  background: #fff0ee;
  color: #a83226;
  font-size: 11px;
  line-height: 1.5;
}

#locationError.err-msg.show {
  display: block;
}

@media (max-width: 600px) {
  .address-grid,
  .location-tools {
    grid-template-columns: 1fr;
  }

  .address-grid .full-width {
    grid-column: auto;
  }
}

/* =========================================================
   GOOGLE MAPS LOCATION UI
   ========================================================= */

#mapPick {
  width: 100%;
  height: 420px;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #dfe5e8);
  background: #eef2f3;
  position: relative;
}

.btn-location-search {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #ec6b1c;
  color: #fff;
  transition: 0.2s ease;
}

.btn-location-search:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
}

.btn-location-search:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.location-result-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin: 6px 0;
  border: 1px solid var(--border, #dfe5e8);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
  font-family: inherit;
}

.location-result-item:hover {
  border-color: #ec6b1c;
  background: #fff8f2;
}

.location-result-item strong {
  color: var(--text, #1f2933);
  font-size: 13px;
}

.location-result-item span {
  color: var(--text-soft, #6b7780);
  font-size: 11px;
  line-height: 1.45;
}

#mapPick .gm-style {
  font-family: Inter, Arial, sans-serif;
}

@media (max-width: 600px) {
  #mapPick {
    height: 330px;
    min-height: 330px;
  }
}




/* JS memakai class ini untuk mengatur pergantian halaman */
.app-content.hidden {
  display: none !important;
}

@media (max-width: 700px) {
  .welcome-page {
    padding: 0;
  }
  .welcome-card {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .welcome-hero {
    min-height: 210px;
    padding: 30px 20px 25px;
  }
  .welcome-agency {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .welcome-body {
    padding: 22px 20px 15px;
  }
  .welcome-progress {
    padding: 13px 12px 22px;
  }
  .welcome-step {
    min-width: 48px;
  }
  .welcome-step strong {
    font-size: 8px;
  }
  .welcome-number {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }
  .welcome-line {
    min-width: 8px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 24px;
  }
  .welcome-section-title {
    padding: 12px 20px;
    font-size: 15px;
  }
  .welcome-consent {
    margin: 18px 20px;
    padding: 20px;
  }
  .welcome-footer {
    padding: 0 20px 22px;
  }
}


/* ---------- MAIN 4-STEP PROGRESS ---------- */
.progress-container {
  width: 100%;
  max-width: none;
  margin-bottom: 24px;
}

.progress-item {
  min-width: 0;
  flex: 1 1 0;
}

.progress-item.completed {
  color: var(--black);
}

.progress-item.completed .progress-number {
  background: var(--orange);
  color: var(--white);
}

/* ---------- NAVIGATION ---------- */
.form-footer,
.form-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.form-nav {
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.form-footer .required-note {
  text-align: center;
}

.btn-secondary,
.btn-ghost {
  background: #ffffff;
  color: var(--text);
  border: 1px solid #cdd8dd;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: #fff8f2;
  border-color: var(--orange);
}

.btn-gold {
  background: var(--dark-orange);
  color: var(--white);
}

/* ---------- FORM CARD ---------- */
.form-card,
.confirmation-card {
  width: 100%;
}

/* ---------- MOBILE ---------- */
@media (max-width: 700px) {
  .container {
    width: min(100% - 28px, 1080px);
  }

  .site-header .header-content {
    min-height: 30px;
  }

  .brand {
    gap: 10px;
  }

  .brand-icon {
    width: clamp(55px, 16vw, 90px);
    height: 62px;
    border-radius: 13px;
  }

  .brand-text span {
    font-size: 9px;
  }

  .brand-text h1 {
    font-size: 16px;
  }

  .main-content {
    padding: 30px 0 50px;
  }

  .intro {
    margin-bottom: 24px;
  }

  .intro h2 {
    font-size: 30px;
    letter-spacing: -0.8px;
  }

  .intro p {
    font-size: 13px;
  }

  /* 4 steps fit cleanly without horizontal scrolling. */
  .progress-container,
  .welcome-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
  }

  .progress-container {
    padding: 0;
    margin-bottom: 20px;
  }

  .progress-item {
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    text-align: center;
  }

  .progress-item > div:last-child {
    width: 100%;
  }

  .progress-item strong {
    font-size: 9px;
    line-height: 1.2;
  }

  .progress-item small {
    display: none;
  }

  .progress-number {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }

  .progress-line,
  .welcome-line {
    display: none;
  }

  .form-card,
  .confirmation-card {
    padding: 20px;
    border-radius: 14px;
  }

  .section-heading {
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  .section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .section-heading h3 {
    font-size: 18px;
  }

  .section-heading p {
    font-size: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .full-width {
    grid-column: auto;
  }

  .field label {
    font-size: 12px;
  }

  .field input,
  .field select {
    min-height: 45px;
    font-size: 13px;
  }

  .residence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #mapPick {
    height: 300px;
    min-height: 300px;
  }

  .address-grid {
    grid-template-columns: 1fr;
  }

  .address-grid .full-width {
    grid-column: auto;
  }

  .form-footer {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .form-footer .required-note {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    margin-bottom: 2px;
  }

  .form-footer .btn {
    width: 100%;
  }

  .form-nav {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .form-nav .btn {
    width: 100%;
  }

  .btn {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .question-card {
    padding: 16px;
  }

  .question-text {
    font-size: 14px;
  }

  .answer-options {
    grid-template-columns: 1fr;
  }

  /* Front page follows the same spacing/card language as the form pages. */
  .welcome-page {
    padding: 0 0 40px;
  }

  .welcome-card {
    width: 100%;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .welcome-hero {
    padding: 26px 20px 22px;
  }

  .welcome-agency {
    font-size: 8px;
    letter-spacing: 0.9px;
  }

  .welcome-hero h1 {
    font-size: 30px;
  }

  .welcome-hero h2 {
    font-size: 17px;
  }

  .welcome-hero p {
    font-size: 12px;
  }

  .welcome-body {
    padding: 22px 20px 14px;
  }

  .welcome-description {
    font-size: 13px;
    line-height: 1.65;
  }

  .welcome-note {
    font-size: 11px;
  }

  .welcome-progress {
    padding: 14px 14px 20px;
  }

  .welcome-step {
    min-width: 0;
  }

  .welcome-number {
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
    font-size: 10px;
  }

  .welcome-step strong {
    font-size: 8px;
  }

  .welcome-step small {
    display: none;
  }

  .welcome-section-title {
    padding: 12px 20px;
    font-size: 14px;
  }

  .welcome-consent {
    margin: 18px 20px;
    padding: 18px;
  }

  .welcome-consent p {
    font-size: 13px;
  }

  .welcome-footer {
    padding: 0 20px 24px;
  }

  .welcome-next-btn {
    min-height: 44px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .container {
    width: calc(100% - 20px);
  }

  .brand-text h1 {
    font-size: 13px;
  }

  .progress-item strong,
  .welcome-step strong {
    font-size: 7px;
  }

  .form-card,
  .confirmation-card {
    padding: 16px;
  }

  .residence-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   VALIDATION + LAZY MAP LOADING
========================================= */
.question-error {
  margin-top: 12px;
}

#mapPick {
  position: relative;
}

.geo-dot.loading {
  animation: geoPulse 1s infinite ease-in-out;
}

.geo-dot.success {
  background: #28a745;
}

.geo-dot.error {
  background: #d9534f;
}

@keyframes geoPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (max-width: 600px) {
  .location-result-item {
    padding: 11px 12px;
  }

  #mapPick {
    min-height: 300px;
    height: 300px;
  }
}

/* =========================================================
   FRONT PAGE HEADING — MATCH MAIN FORM SECTION HEADING
   ========================================================= */

/*
   The consent heading uses the exact same .section-heading
   component as Data Akademik, Tempat Tinggal, and Kuesioner.
   This wrapper only supplies the same 34px horizontal inset
   that .form-card provides to its contents.
*/
@media (max-width: 700px) {
  .welcome-form-content {
    padding: 0 20px 24px;
  }

  .welcome-form-content .section-heading {
    gap: 12px;
  }

  .welcome-form-content .welcome-consent {
    margin: 0 0 18px;
    padding: 18px;
  }
}

/* =========================================================
   FRONT PAGE — HEADING OUTSIDE, CONSENT IN SEPARATE CARD
   ========================================================= */
.welcome-form-content {
  padding: 0 34px 34px;
}

.welcome-form-content .section-heading {
  margin-bottom: 24px;
}

.welcome-consent-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.welcome-consent-card .welcome-consent {
  margin: 0;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: #fafcfd;
}

.welcome-consent-card .welcome-footer {
  padding: 0 28px 28px;
}

@media (max-width: 700px) {
  .welcome-form-content {
    padding: 0 20px 24px;
  }

  .welcome-form-content .section-heading {
    margin-bottom: 20px;
  }

  .welcome-consent-card .welcome-consent {
    padding: 20px;
  }

  .welcome-consent-card .welcome-footer {
    padding: 0 20px 20px;
  }
}


/* .welcome-progress {
  background: transparent;
  
} */

.welcome-progress {
  margin: 20px 34px;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.welcome-form-card {
  width: min(910px, 100%);
  margin: 0 auto 34px;
  overflow: hidden;
}

@media (max-width: 700px) {
  .welcome-page {
    padding: 0 0 24px;
  }

  .welcome-hero,
  .welcome-body,
  .welcome-progress,
  .welcome-form-card {
    width: 100%;
  }

  .welcome-form-card {
    margin: 0 0 24px;
  }
}

/* =========================================================
   FRONT PAGE — ALIGN WITH THE SAME FULL-WIDTH CONTAINER
   AS THE OTHER FORM STEPS
   ========================================================= */
.welcome-page {
  min-height: 100vh;
  padding: 48px 0 70px;
  display: block;
  background: var(--background);
}

.welcome-page > .welcome-hero,
.welcome-page > .welcome-body,
.welcome-page > .welcome-progress,
.welcome-page > .welcome-form-card {
  width: min(1080px, 92%);
  margin-left: auto;
  margin-right: auto;
}

/* Hero is standalone; it is not wrapped by an outer card. */
.welcome-page > .welcome-hero {
  min-height: auto;
  padding: 28px 34px 26px;
  text-align: left;
  color: var(--text);
  background: var(--soft-orange);
  border-top: 6px solid var(--orange);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.welcome-page > .welcome-body {
  padding: 28px 34px 18px;
  background: var(--white);
}

.welcome-page > .welcome-progress {
  padding: 15px 34px 25px;
  background: var(--white);
}

/* The statement card must occupy the exact same width as
   form-card on steps 02–04; no extra 34px side margin. */
.welcome-page > .welcome-form-card {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .welcome-page {
    padding: 30px 0 50px;
  }

  .welcome-page > .welcome-hero,
  .welcome-page > .welcome-body,
  .welcome-page > .welcome-progress,
  .welcome-page > .welcome-form-card {
    width: min(100% - 28px, 1080px);
  }

  .welcome-page > .welcome-hero {
    padding: 22px 20px 20px;
  }

  .welcome-page > .welcome-body {
    padding: 22px 20px 15px;
  }

  .welcome-page > .welcome-progress {
    padding: 13px 12px 22px;
  }
}

/* =========================================================
   FRONT PAGE — SEPARATE OUTER SECTIONS FROM STATEMENT CARD
   Hero, intro, progress, and statement card are independent
   blocks, with visible spacing between each section.
   ========================================================= */
.welcome-page > .welcome-hero {
  margin-bottom: 18px;
  border-radius: var(--radius);
}

.welcome-page > .welcome-body {
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 8px;
  background: transparent;
}

.welcome-page > .welcome-progress {
  margin-bottom: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: transparent;
}

.welcome-page > .welcome-form-card {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .welcome-page > .welcome-hero {
    margin-bottom: 14px;
  }

  .welcome-page > .welcome-body {
    margin-bottom: 8px;
  }

  .welcome-page > .welcome-progress {
    margin-bottom: 18px;
  }
}

/* =========================================================
   FIXED TWO-MODE LOCATION UI
   ========================================================= */
.location-mode-card {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #f8fafc;
}
.location-mode-title {
  font-weight: 700;
  margin-bottom: 12px;
}
.location-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.location-mode-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.location-mode-option.active {
  border-color: #334155;
  box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.08);
}
.location-mode-option .mode-icon {
  font-size: 22px;
  flex: 0 0 auto;
}
.location-mode-option .mode-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.location-mode-option small {
  color: #64748b;
  line-height: 1.4;
}
.location-mode-panel {
  margin-top: 14px;
}
.location-mode-panel.hidden,
.location-after-tag.hidden {
  display: none !important;
}
.location-mode-status {
  margin-top: 8px;
  font-size: 13px;
  color: #475569;
  min-height: 18px;
}
.location-search-row {
  display: flex;
  gap: 8px;
  margin-top: 7px;
}
.location-search-row input {
  flex: 1;
  min-width: 0;
}
.search-action-button {
  white-space: nowrap;
}
.location-search-results {
  margin-top: 8px;
}
.location-search-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 11px;
  border-radius: 9px;
  margin-top: 6px;
  cursor: pointer;
}
.location-search-result:hover {
  background: #f8fafc;
}
.location-search-result small {
  color: #64748b;
  line-height: 1.4;
}
.manual-detail-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}
.manual-detail-notice span {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .location-mode-options {
    grid-template-columns: 1fr;
  }
  .location-search-row {
    flex-direction: column;
  }
  .search-action-button {
    width: 100%;
  }
}

/* FINAL FIX: location mode visibility */
#searchModePanel.hidden,
#gpsModePanel.hidden,
#locationAfterTag.hidden {
  display: none !important;
}
#searchModePanel:not(.hidden),
#gpsModePanel:not(.hidden) {
  display: block !important;
}
.location-mode-option {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}
.location-mode-option .mode-copy,
.location-mode-option .mode-icon {
  pointer-events: none;
}

/* UI FIX: location search input should dominate the row; button should be compact */
.location-search-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}
.location-search-row > input#locationSearchInput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
}
.location-search-row > button#locationSearchBtn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 125px !important;
  height: 48px !important;
  padding: 10px 18px !important;
  white-space: nowrap !important;
  font-size: 15px !important;
}
@media (max-width: 700px) {
  .location-search-row {
    display: flex !important;
    flex-direction: column !important;
  }
  .location-search-row > input#locationSearchInput,
  .location-search-row > button#locationSearchBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   Pojok Sensus — Landing Page refresh
   Scoped only to #welcomePage so existing questionnaire UI,
   map styling, APIs, and form components remain untouched.
========================================================= */
#welcomePage.welcome-page {
  min-height: 100vh;
  padding: 32px 20px 48px;
  align-items: flex-start;
  background:
    radial-gradient(circle at 8% 10%, rgba(240, 90, 8, 0.09), transparent 28%),
    radial-gradient(
      circle at 92% 18%,
      rgba(255, 193, 38, 0.13),
      transparent 25%
    ),
    #fffaf6;
}

#welcomePage .welcome-shell {
  width: min(960px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #f0ddd0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(107, 54, 19, 0.1);
}

/* #welcomePage .welcome-hero {
  min-height: 275px;
  padding: 42px 32px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ee5a08 0%, #d94707 58%, #bf3b0b 100%);
} */

#welcomePage .hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}
#welcomePage .hero-glow-one {
  width: 260px;
  height: 260px;
  left: -90px;
  bottom: -145px;
}
#welcomePage .hero-glow-two {
  width: 210px;
  height: 210px;
  right: -70px;
  top: -110px;
  background: rgba(255, 193, 38, 0.13);
}

#welcomePage .welcome-agency {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-align: center;
  opacity: 0.92;
}

#welcomePage .welcome-brand-mark {
  width: 54px;
  height: 54px;
  margin: 18px 0 13px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 10px 24px rgba(82, 25, 4, 0.14);
}

#welcomePage .welcome-hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: 0.5px;
}

#welcomePage .welcome-subtitle {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

#welcomePage .welcome-location {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
  text-align: center;
}

#welcomePage .welcome-content {
  padding: 30px 34px 36px;
}

#welcomePage .welcome-info-card {
  padding: 26px 28px;
  border: 1px solid #f0e1d5;
  border-radius: 18px;
  background: #fffdfa;
}

#welcomePage .welcome-info-label {
  display: inline-block;
  color: #c94b08;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

#welcomePage .welcome-info-card h2 {
  margin: 8px 0 12px;
  color: #302b27;
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.25;
}

#welcomePage .welcome-info-card > p {
  margin: 0;
  color: #403a35;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.65;
  font-weight: 600;
}

#welcomePage .welcome-info-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #ead8c9;
  color: #786b61;
  font-size: 13px;
  line-height: 1.65;
}

#welcomePage .welcome-consent-card {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #f1d4bd;
  border-radius: 18px;
  background: #fff6ee;
}

#welcomePage .welcome-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}

#welcomePage .welcome-consent-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#welcomePage .welcome-checkbox {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 2px solid #d95a0a;
  border-radius: 7px;
  background: #fff;
}

#welcomePage .welcome-checkbox::after {
  content: "";
  width: 7px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}

#welcomePage .welcome-consent-check input:checked + .welcome-checkbox {
  background: #ed5a0a;
}
#welcomePage .welcome-consent-check input:checked + .welcome-checkbox::after {
  opacity: 1;
}

#welcomePage .welcome-consent-check strong,
#welcomePage .welcome-consent-check small {
  display: block;
}
#welcomePage .welcome-consent-check strong {
  color: #302b27;
  font-size: 15px;
  line-height: 1.45;
}
#welcomePage .welcome-consent-check small {
  margin-top: 3px;
  color: #76695f;
  font-size: 13px;
  line-height: 1.5;
}

#welcomePage .consent-error {
  margin-top: 12px;
  font-size: 13px;
}

#welcomePage .welcome-next-btn {
  margin-top: 18px;
  min-height: 54px;
  border-radius: 14px;
}

#welcomePage .welcome-next-btn:disabled {
  opacity: 0.6;
}

@media (max-width: 700px) {
  #welcomePage.welcome-page {
    padding: 16px 12px 30px;
  }
  #welcomePage .welcome-hero {
    min-height: 250px;
    padding: 34px 20px 30px;
  }
  #welcomePage .welcome-content {
    padding: 20px 16px 24px;
  }
  #welcomePage .welcome-info-card {
    padding: 21px;
  }
  #welcomePage .welcome-consent-card {
    padding: 18px;
  }
}

/* =========================================================
   LANDING PAGE — FULL WIDTH / FLAT INTRO
   ========================================================= */

#welcomePage {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#welcomePage .welcome-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

#welcomePage .welcome-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 42px 28px 24px;
  box-sizing: border-box;
}

#welcomePage .welcome-info,
#welcomePage .welcome-description,
#welcomePage .welcome-message {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

#welcomePage .welcome-info {
  padding: 0;
  margin-bottom: 28px;
}

#welcomePage .welcome-info h2,
#welcomePage .welcome-info h3 {
  margin-bottom: 12px;
}

#welcomePage .welcome-info p {
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
}

/* Only the confirmation area is a card. */
#welcomePage .welcome-consent,
#welcomePage .consent-box,
#welcomePage .consent-section {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 20px;
  margin-top: 8px;
}

#welcomePage .welcome-footer {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px 42px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#welcomePage .welcome-next-btn {
  width: 100%;
  max-width: 900px;
}

/* Mobile */
@media (max-width: 640px) {
  #welcomePage .welcome-content {
    padding: 30px 18px 18px;
  }

  #welcomePage .welcome-info p {
    font-size: 16px;
    line-height: 1.65;
  }

  #welcomePage .welcome-consent,
  #welcomePage .consent-box,
  #welcomePage .consent-section {
    padding: 16px;
    border-radius: 14px;
  }

  #welcomePage .welcome-footer {
    padding: 0 18px 28px;
  }
}

/* Search result buttons: preserve the existing map/search styling while making
   fallback Nominatim results easy to read and tap. */
#locationSearchResults {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#locationSearchResults .location-search-result {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

#locationSearchResults .location-search-result strong,
#locationSearchResults .location-search-result small {
  display: block;
}

#locationSearchResults .location-search-result small {
  margin-top: 3px;
  line-height: 1.4;
}

/* =========================================================
   POJOK SENSUS — ELEGANT / FRIENDLY LANDING OVERRIDE
   Visual-only: does not change questionnaire/map/API logic.
   ========================================================= */

#welcomePage {
  min-height: 100vh;
  padding: 0 0 56px;
  background: #fffaf6;
}

/* Full-width hero, left aligned */
#welcomePage .welcome-hero {
  width: 100%;
  max-width: none;
  min-height: 300px;
  box-sizing: border-box;
  padding: 54px max(28px, calc((100% - 1080px) / 2)) 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: linear-gradient(110deg, #ef5b08 0%, #e84e08 52%, #d94709 100%);
  color: #fff;
  box-shadow: none;
}

/* Keep decorative circles subtle */
#welcomePage .hero-glow-one {
  width: 260px;
  height: 260px;
  left: -110px;
  bottom: -150px;
  background: rgba(255, 255, 255, 0.08);
}

#welcomePage .hero-glow-two {
  width: 190px;
  height: 190px;
  right: -75px;
  top: -105px;
  background: rgba(255, 255, 255, 0.08);
}

#welcomePage .welcome-agency {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1.4;
}

#welcomePage .welcome-brand-mark {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(84, 30, 4, 0.12);
}

#welcomePage .welcome-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.8px;
}

#welcomePage .welcome-subtitle {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

#welcomePage .welcome-location {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

/* Main intro area: no enclosing card */
#welcomePage .welcome-content {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 0 0;
  box-sizing: border-box;
}

#welcomePage .welcome-info-card {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#welcomePage .welcome-info-label {
  display: block;
  margin-bottom: 9px;
  color: #d9510a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

#welcomePage .welcome-info-card h2 {
  margin: 0 0 13px;
  color: #25211f;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.25px;
}

#welcomePage .welcome-info-card > p {
  max-width: 820px;
  margin: 0;
  color: #5b514b;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

#welcomePage .welcome-info-note {
  margin-top: 15px;
  padding-top: 0;
  border: 0;
  color: #81756d;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

/* Only confirmation remains a card */
#welcomePage .welcome-consent-card {
  margin-top: 32px;
  padding: 22px 24px 20px;
  border: 1px solid #f0d8c6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(86, 48, 28, 0.06);
}

#welcomePage .welcome-consent-check {
  gap: 13px;
}

#welcomePage .welcome-consent-check strong {
  color: #332d29;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

#welcomePage .welcome-consent-check small {
  color: #766b64;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

#welcomePage .welcome-checkbox {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

#welcomePage .welcome-next-btn {
  min-height: 48px;
  margin-top: 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 7px 18px rgba(226, 72, 7, 0.18);
}

/* Mobile */
@media (max-width: 700px) {
  #welcomePage {
    padding-bottom: 34px;
  }

  #welcomePage .welcome-hero {
    min-height: 270px;
    padding: 38px 22px 40px;
  }

  #welcomePage .welcome-agency {
    font-size: 9px;
    letter-spacing: 1.1px;
  }

  #welcomePage .welcome-hero h1 {
    font-size: 38px;
  }

  #welcomePage .welcome-subtitle {
    font-size: 15px;
  }

  #welcomePage .welcome-location {
    font-size: 12px;
  }

  #welcomePage .welcome-content {
    width: min(100% - 36px, 900px);
    padding-top: 34px;
  }

  #welcomePage .welcome-info-card h2 {
    font-size: 23px;
  }

  #welcomePage .welcome-info-card > p {
    font-size: 15px;
    line-height: 1.7;
  }

  #welcomePage .welcome-consent-card {
    margin-top: 26px;
    padding: 18px;
  }
}

/* =========================================================
   LANDING V2 — SEPARATE HERO + CONTENT
   ========================================================= */
#welcomePage .welcome-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Full-width hero, visually separate from the content below */
#welcomePage .welcome-hero {
  width: 100%;
  min-height: 340px;
  box-sizing: border-box;
  padding: 58px max(42px, calc((100% - 1120px) / 2)) 62px;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0 0 22px 22px;
  text-align: left;
}

/* Remove the small PS logo/badge completely */
#welcomePage .welcome-brand-mark {
  display: none;
}

#welcomePage .welcome-agency {
  margin: 0 0 20px;
  text-align: left;
}

#welcomePage .welcome-hero h1 {
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.8px;
  text-align: left;
}

#welcomePage .welcome-subtitle {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
}

#welcomePage .welcome-location {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

/* Wider content, separated from the hero */
#welcomePage .welcome-content {
  width: min(1100px, calc(100% - 64px));
  margin: 0 auto;
  padding: 52px 0 58px;
}

/* Intro is open — no card around it */
#welcomePage .welcome-info-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#welcomePage .welcome-info-card h2 {
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 650;
}

#welcomePage .welcome-info-card > p {
  max-width: 930px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

/* Keep ONLY the consent section boxed */
#welcomePage .welcome-consent-card {
  margin-top: 34px;
  padding: 24px 26px 22px;
  border: 1px solid #f0d8c6;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(86, 48, 28, 0.07);
}

@media (max-width: 700px) {
  #welcomePage .welcome-hero {
    min-height: 300px;
    padding: 44px 24px 48px;
    border-radius: 0 0 18px 18px;
  }

  #welcomePage .welcome-hero h1 {
    font-size: 40px;
  }

  #welcomePage .welcome-content {
    width: calc(100% - 40px);
    padding: 38px 0 44px;
  }
}

/* =========================================================
   LANDING V3 — SHARED CONTENT GRID
   Hero text and lower content use the exact same left edge.
   ========================================================= */
#welcomePage .welcome-hero {
  padding-left: max(42px, calc((100% - 1100px) / 2));
  padding-right: max(42px, calc((100% - 1100px) / 2));
}

#welcomePage .welcome-content {
  width: min(1100px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  #welcomePage .welcome-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  #welcomePage .welcome-content {
    width: calc(100% - 40px);
  }
}

/* =========================================================
   LANDING V4 — PIXEL-ALIGNED HERO / CONTENT
   The first character of every main section sits on the
   exact same vertical guide as the hero text.
   ========================================================= */
#welcomePage .welcome-content {
  width: min(1100px, calc(100% - 84px));
  margin-left: auto;
  margin-right: auto;
}

/* Keep the hero and content on the same 1100px grid */
#welcomePage .welcome-hero {
  padding-left: max(42px, calc((100% - 1100px) / 2));
  padding-right: max(42px, calc((100% - 1100px) / 2));
}

@media (max-width: 700px) {
  #welcomePage .welcome-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  #welcomePage .welcome-content {
    width: calc(100% - 48px);
  }
}

/* =========================================================
   LANDING HERO — RETURN TO ORIGINAL COMPACT STYLE
   Keep the newer content/consent styling, restore only the
   original hero proportions and centered composition.
   ========================================================= */
#welcomePage .welcome-shell {
  width: min(960px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #f0ddd0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(107, 54, 19, 0.1);
}

#welcomePage .welcome-hero {
  width: auto;
  min-height: 275px;
  box-sizing: border-box;
  padding: 42px 32px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  text-align: center;
  background: linear-gradient(135deg, #ee5a08 0%, #d94707 58%, #bf3b0b 100%);
}

/* Logo stays removed as requested */
#welcomePage .welcome-brand-mark {
  display: none;
}

#welcomePage .welcome-agency {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.4;
  text-align: center;
}

#welcomePage .welcome-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  text-align: center;
}

#welcomePage .welcome-subtitle {
  margin-top: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

#welcomePage .welcome-location {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 700px) {
  #welcomePage .welcome-shell {
    width: 100%;
    border-radius: 18px;
  }

  #welcomePage .welcome-hero {
    min-height: 270px;
    padding: 40px 24px 42px;
  }

  #welcomePage .welcome-hero h1 {
    font-size: 38px;
  }

  #welcomePage .welcome-subtitle {
    font-size: 15px;
  }

  #welcomePage .welcome-location {
    font-size: 12px;
  }
}

/* HERO ONLY — move hero text to the left; keep all other landing styles unchanged */
#welcomePage .welcome-hero {
  align-items: flex-start;
  text-align: left;
}

#welcomePage .welcome-hero .welcome-agency,
#welcomePage .welcome-hero h1,
#welcomePage .welcome-hero h2,
#welcomePage .welcome-hero p,
#welcomePage .welcome-subtitle,
#welcomePage .welcome-location {
  text-align: left;
}

/* =========================================================
   FINAL WELCOME HERO
   ONLY #welcomePage .welcome-hero is changed here.
   TEXT = LEFT | IMAGE = RIGHT
   ========================================================= */

#welcomePage .welcome-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
  align-items: center !important;
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: left !important;
  background: linear-gradient(
    110deg,
    #ef5b08 0%,
    #e84e08 55%,
    #d94709 100%
  ) !important;
}

#welcomePage .welcome-hero-text {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 42px 24px 42px 48px !important;
  text-align: left !important;
}

#welcomePage .welcome-hero-text .welcome-agency {
  margin: 0 0 16px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.7px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

#welcomePage .welcome-hero-text h1 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: clamp(38px, 5vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.8px !important;
  text-align: left !important;
}

#welcomePage .welcome-hero-text .welcome-subtitle {
  margin: 0 0 6px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

#welcomePage .welcome-hero-text .welcome-location {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#welcomePage .welcome-hero-image {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 20px 36px !important;
  overflow: hidden !important;
}

#welcomePage .welcome-hero-image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 170% !important;
  max-height: 800px !important;
  object-fit: contain !important;
  object-position: center !important;
}

#welcomePage .welcome-brand-mark {
  display: none !important;
}

@media (max-width: 700px) {
  #welcomePage .welcome-hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #welcomePage .welcome-hero-text {
    padding: 36px 24px 18px !important;
  }

  #welcomePage .welcome-hero-image {
    height: 180px !important;
    padding: 0 24px 24px !important;
  }

  #welcomePage .welcome-hero-image img {
    max-width: 100% !important;
    max-height: 800px !important;
  }
}

/* =========================================
   FORM 3 COMPATIBILITY
   Menggunakan visual yang sama dengan style.css
========================================= */

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.question-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f7fafb;
}

.subheading {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
}

.option-grid,
.asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option,
.asset-item {
    padding: 12px 14px;
    border: 1px solid #d5dfe3;
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
}

.option:hover,
.asset-item:hover {
    border-color: var(--orange);
    background: #fffaf5;
}

.option input,
.asset-item input {
    margin-right: 7px;
}

.conditional-field {
    margin-top: 12px;
}

.field textarea,
.field input[type="date"],
.field input[type="number"],
.field input[type="text"],
.field input[type="tel"] {
    width: 100%;
}

.field textarea {
    min-height: 100px;
    padding: 12px 14px;
    border: 1px solid #cdd8dd;
    border-radius: 10px;
    background: var(--white);
    color: var(--black);
    outline: none;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.field textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(225, 101, 34, .10);
}

@media (max-width: 600px) {
    .option-grid,
    .asset-grid {
        grid-template-columns: 1fr;
    }
}

/* Tanggal lahir */
#tanggalLahir {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

#tanggalLahir:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.question-box label[for="tanggalLahir"] small {
    font-size: 12px;
    font-weight: normal;
    color: #6b7280;
    margin-left: 4px;
}

.question-box label[for="tanggalLahir"] .required {
    color: #dc2626;
}

/* INPUT DI DALAM QUESTION BOX */
.question-box input[type="text"],
.question-box input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background-color: #fff;
    color: #1f2937;
    outline: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* PLACEHOLDER */
.question-box input[type="text"]::placeholder,
.question-box input[type="number"]::placeholder {
    color: #9ca3af;
}

/* SAAT INPUT DIKLIK */
.question-box input[type="text"]:focus,
.question-box input[type="number"]:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* SAAT INPUT DISABLED */
.question-box input[type="text"]:disabled,
.question-box input[type="number"]:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}


/* =========================================================
   TEXTAREA
========================================================= */

.question-box textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid #cdd8dd;
    border-radius: 10px;

    background: #ffffff;
    color: var(--black);

    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;

    outline: none;
    resize: vertical;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}


/* Placeholder */

.question-box textarea::placeholder {
    color: #9ca3af;
}


/* Saat textarea diklik */

.question-box textarea:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px rgba(225, 101, 34, .10);
}


/* Hover */

.question-box textarea:hover {
    border-color: #b8c5ca;
}


/* Validasi error */

.question-box textarea.invalid {
    border-color: var(--red) !important;
    background: #fff9f8 !important;

    box-shadow:
        0 0 0 3px rgba(177, 53, 47, .08) !important;
}


/* =========================================================
   CHECKBOX DROPDOWN
========================================================= */

.checkbox-dropdown {
    position: relative;
    width: 100%;
    z-index: 20;
}


/* =========================================================
   TOMBOL DROPDOWN
========================================================= */

.checkbox-dropdown-btn {
        position: relative;
    z-index: 21;

    width: 100%;
    min-height: 56px;

    padding: 12px 16px;

    border: 1px solid #cdd8dd;
    border-radius: 10px;

    background: #ffffff;
    color: #111827;

    font-size: 15px;
    font-family: inherit;

    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;
    text-align: left;
}


/* Hover tombol */

.checkbox-dropdown-btn:hover {
    border-color: var(--orange);
}


/* =========================================================
   MENU DROPDOWN
========================================================= */

.checkbox-dropdown-menu {
    display: none;
    position: absolute;

    top: calc(100% + 6px);
    left: 0;
    right: 0;

    z-index: 9999;

    display: none;

    padding: 8px;

    border: 1px solid #cdd8dd;
    border-radius: 10px;

    background: #ffffff;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);

    max-height: 220px;
    overflow-y: auto;
}


/* MENU TERBUKA */

.checkbox-dropdown-menu.show {
    display: block;
}


/* =========================================================
   PILIHAN CHECKBOX
========================================================= */

.checkbox-dropdown-menu label {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    margin: 0;

    border-radius: 7px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 400;

    box-sizing: border-box;
}


/* Hover */

.checkbox-dropdown-menu label:hover {
    background: #f7fafb;
}


/* Checkbox */

.checkbox-dropdown-menu input[type="checkbox"] {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    cursor: pointer;
}


/* Teks */

.checkbox-dropdown-menu span {
    display: block;
}


/* Helper */

.helper-text {
    margin-top: 10px;

    font-size: 14px;
    color: #718096;
}

.form-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-select:hover {
    border-color: #9ca3af;
}
/* =========================================================
   REVISI FORM 3 — WAJIB, DROPDOWN, VALIDASI & CONDITIONAL
========================================================= */

.form-step.hidden,
.conditional-field.hidden,
#usahaContent.hidden {
    display: none !important;
}

.required {
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    margin-left: auto;
    white-space: nowrap;
}

.question-box > label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.field > label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field input.invalid,
.field select.invalid,
.field textarea.invalid,
.checkbox-dropdown-btn.invalid {
    border-color: var(--red) !important;
    background: #fff8f7 !important;
    box-shadow: 0 0 0 3px rgba(177,53,47,.08) !important;
}

.validation-error {
    display: none;
    margin-top: 7px;
    color: var(--red);
    font-size: 11px;
    font-weight: 600;
}

.validation-error.show {
    display: block;
}

/* Dropdown checkbox harus berada di atas elemen lain dan mudah diklik. */
.checkbox-dropdown {
    position: relative;
    z-index: 20;
}

.checkbox-dropdown-btn {
    position: relative;
    z-index: 21;
    appearance: none;
    -webkit-appearance: none;
    user-select: none;
    touch-action: manipulation;
}

.checkbox-dropdown-btn:focus-visible {
    outline: 3px solid rgba(225,101,34,.18);
    outline-offset: 1px;
}

.checkbox-dropdown-menu {
    z-index: 10000;
    pointer-events: auto;
}

.checkbox-dropdown-menu label {
    position: relative;
    z-index: 10001;
    user-select: none;
}

.checkbox-dropdown-menu label span {
    pointer-events: none;
}

.checkbox-dropdown-menu input[type="checkbox"] {
    position: relative;
    z-index: 10002;
}

.checkbox-dropdown.has-selection .checkbox-dropdown-btn {
    border-color: var(--orange);
}

.checkbox-dropdown-arrow {
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform .2s ease;
}



/* Select normal agar konsisten dengan dropdown checkbox. */
.form-select,
.question-box select,
.field select {
    min-height: 47px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cdd8dd;
    border-radius: 10px;
    background: #fff;
    color: var(--black);
    font: inherit;
    outline: none;
}

.form-select:focus,
.question-box select:focus,
.field select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(225,101,34,.10);
}

.economy-note {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-left: 4px solid var(--orange);
    border-radius: 8px;
    background: #fff8f1;
}

#kkLainContainer {
    margin-top: 12px;
}

#kkLainContainer .field {
    min-width: 0;
}

#usahaContent {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .checkbox-dropdown-menu {
        max-height: 260px;
    }

    .required {
        font-size: 9px;
    }
}

/* =========================================================
   REVISI WAJIB & CHECKBOX DROPDOWN
========================================================= */
.required {
    display: inline-block;
    margin-left: 4px;
    color: var(--red);
    font-size: 14px;
    font-weight: 800;
    text-transform: none;
}

.question-box.invalid-group {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(177, 53, 47, .08);
}

.checkbox-dropdown {
    position: relative;
    width: 100%;
}

.checkbox-dropdown-btn {
    width: 100%;
    min-height: 47px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #cdd8dd;
    border-radius: 10px;
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}

.checkbox-dropdown-btn:hover,
.checkbox-dropdown-btn:focus {
    border-color: var(--orange);
    outline: none;
}

.checkbox-dropdown-arrow {
    flex-shrink: 0;
    transition: transform .2s ease;
}

.checkbox-dropdown-menu.show + * { display: block; }

.checkbox-dropdown-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid #cdd8dd;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}



.checkbox-dropdown-menu label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.checkbox-dropdown-menu label:hover {
    background: #fff5ed;
}

.checkbox-dropdown-menu input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--dark-orange);
    cursor: pointer;
}

.checkbox-dropdown.invalid .checkbox-dropdown-btn {
    border-color: var(--red);
    background: #fff9f8;
}

.checkbox-dropdown.has-value .checkbox-dropdown-btn {
    border-color: var(--orange);
}

.conditional-field.hidden,
#usahaContent.hidden,
#kkLainContainer.hidden {
    display: none !important;
}

.kk-lain-row.hidden {
    display: none !important;
}

input.invalid,
select.invalid,
textarea.invalid {
    border-color: var(--red) !important;
    background: #fff9f8 !important;
}

input:focus,
select:focus,
textarea:focus,
.checkbox-dropdown-btn:focus {
    outline: none;
}

@media (max-width: 700px) {
    .checkbox-dropdown-menu {
        max-height: 220px;
    }
}


/* =========================================================
   POJOK SENSUS — QUESTIONNAIRE POLISH
========================================================= */
.questionnaire-shell {
    padding-bottom: 30px;
}
.questionnaire-shell > .section-heading {
    margin-bottom: 18px;
}
.questionnaire-intro {
    margin: 0 34px 22px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafb;
    display: grid;
    gap: 6px;
}
.questionnaire-progress {
    margin: 0 34px 24px;
}
.questionnaire-progress .progress-container {
    margin: 0;
    padding: 14px 16px;
    gap: 10px;
}
.questionnaire-progress .progress-item {
    min-width: 0;
}
.questionnaire-progress .progress-item strong {
    font-size: 12px;
}
.questionnaire-progress .progress-item small {
    font-size: 10px;
}
#form3 {
    display: block;
}
#form3 .form-step {
    margin: 0 34px 18px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 6px 18px rgba(20, 43, 52, .05);
}
#form3 .form-step > .section-heading {
    margin: 0 0 20px;
}
#form3 .question-box {
    margin-top: 14px;
    padding: 18px 18px 20px;
    border-radius: 12px;
}
#form3 .question-box + .question-box {
    margin-top: 14px;
}
#form3 .question-box > label,
#form3 .question-box > .subheading {
    line-height: 1.55;
}
#form3 .question-box input[type="text"],
#form3 .question-box input[type="number"],
#form3 .question-box input[type="date"],
#form3 .question-box select,
#form3 .question-box textarea,
#form3 .checkbox-dropdown-btn {
    min-height: 44px;
    box-sizing: border-box;
}
#form3 .option-grid,
#form3 .asset-grid {
    gap: 10px;
    margin-top: 10px;
}
#form3 .option,
#form3 .asset-item {
    padding: 12px 14px;
    line-height: 1.45;
}
#form3 .conditional-field {
    margin-top: 12px;
}
#form3 .form-actions,
#form3 .form-navigation {
    margin-top: 22px;
}
#form3 .next-btn,
#form3 .prev-btn {
    min-height: 44px;
}
#form3 .checkbox-dropdown-menu {
    max-height: 260px;
    overflow-y: auto;
}
#form3 .question-box.invalid-group,
#form3 .checkbox-dropdown.invalid {
    border-color: #dc3545;
}
@media (max-width: 700px) {
    .questionnaire-intro,
    .questionnaire-progress {
        margin-left: 20px;
        margin-right: 20px;
    }
    #form3 .form-step {
        margin-left: 20px;
        margin-right: 20px;
        padding: 18px;
    }
    #form3 .question-box {
        padding: 15px;
    }
    #form3 .option-grid,
    #form3 .asset-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   QUESTIONNAIRE FINAL POLISH — V3
   Menjaga isi setiap tahap selalu tampil dan merapikan layout.
========================================================= */
#stepQuestionnaire {
    overflow: visible;
}

#stepQuestionnaire #form3 {
    width: 100%;
    margin: 0;
}

#form3 .form-step {
    width: auto;
    box-sizing: border-box;
    margin: 0 34px 22px;
    padding: 28px 30px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(20, 43, 52, .06);
}

/* JS also controls display inline; these rules are the CSS fallback. */
#form3 .form-step.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#form3 .form-step.hidden {
    display: none !important;
}

#form3 .form-step > .section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--border);
}

#form3 .form-step > .section-heading h3 {
    margin: 2px 0 5px;
    font-size: 22px;
    line-height: 1.3;
}

#form3 .form-step > .section-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

#form3 .question-box {
    margin: 0 0 16px;
    padding: 20px 20px 18px;
    background: #fbfcfd;
    border: 1px solid #e1e7ea;
    border-radius: 13px;
}

#form3 .question-box:last-of-type {
    margin-bottom: 0;
}

#form3 .question-box > label,
#form3 .question-box > .subheading {
    display: block;
    margin: 0 0 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

#form3 .question-box input[type="text"],
#form3 .question-box input[type="number"],
#form3 .question-box input[type="date"],
#form3 .question-box input[type="file"],
#form3 .question-box select,
#form3 .question-box textarea,
#form3 .checkbox-dropdown-btn {
    width: 100%;
    box-sizing: border-box;
}

#form3 .question-box input[type="text"],
#form3 .question-box input[type="number"],
#form3 .question-box input[type="date"],
#form3 .question-box select {
    min-height: 46px;
    padding: 10px 13px;
}

#form3 .question-box textarea {
    min-height: 96px;
    padding: 12px 13px;
    resize: vertical;
}

#form3 .option-grid,
#form3 .asset-grid {
    gap: 10px;
    margin-top: 10px;
}

#form3 .form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

#form3 .form-footer .btn,
#form3 .form-navigation .btn,
#form3 .form-actions .btn {
    min-height: 44px;
}

/* Progress 5 tahap dibuat lebih ringkas dan tidak terlalu melebar. */
.questionnaire-progress {
    margin: 0 34px 24px;
}

.questionnaire-progress .progress-container {
    display: grid;
    grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr;
    align-items: center;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 18px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.questionnaire-progress .progress-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    padding: 2px 4px;
}

.questionnaire-progress .progress-number {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf1f3;
    color: #7b858a;
    font-size: 13px;
    font-weight: 800;
}

.questionnaire-progress .progress-item > div:last-child {
    min-width: 0;
}

.questionnaire-progress .progress-item strong,
.questionnaire-progress .progress-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questionnaire-progress .progress-item strong {
    font-size: 12px;
    line-height: 1.3;
}

.questionnaire-progress .progress-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
}

.questionnaire-progress .progress-item.active .progress-number,
.questionnaire-progress .progress-item.completed .progress-number {
    background: var(--orange);
    color: #fff;
}

.questionnaire-progress .progress-item.active strong {
    color: var(--orange);
}

.questionnaire-progress .progress-line {
    width: 100%;
    height: 1px;
    margin: 0;
    background: #dfe5e8;
}

@media (max-width: 900px) {
    .questionnaire-progress .progress-container {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .questionnaire-progress .progress-line {
        display: none;
    }

    .questionnaire-progress .progress-item {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }

    .questionnaire-progress .progress-item > div:last-child {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .questionnaire-intro,
    .questionnaire-progress {
        margin-left: 18px;
        margin-right: 18px;
    }

    #form3 .form-step {
        margin-left: 18px;
        margin-right: 18px;
        padding: 20px 16px;
    }

    #form3 .question-box {
        padding: 16px;
    }

    #form3 .form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    #form3 .form-footer .btn {
        width: 100%;
    }

    .questionnaire-progress .progress-container {
        padding: 14px 8px;
    }

    .questionnaire-progress .progress-number {
        width: 30px;
        height: 30px;
    }

    .questionnaire-progress .progress-item strong {
        font-size: 10px;
    }

    .questionnaire-progress .progress-item small {
        display: none;
    }
}

/* Confirmation card: beri jarak antara label dan nilai. */
#confirmDetail .confirmation-row {
    display: grid;
    grid-template-columns: minmax(130px, 180px) 1fr;
    gap: 18px;
    padding: 9px 0;
    line-height: 1.5;
}

#confirmDetail .confirmation-row span:first-child {
    font-weight: 700;
    color: var(--muted);
}

#confirmDetail .confirmation-row span:last-child {
    overflow-wrap: anywhere;
}


/* =========================================================
   QUESTIONNAIRE V4 — ISOLATED STEP LAYOUT
   Do not use the generic .form-card/.form-step classes here.
========================================================= */
#stepQuestionnaire #form3 {
    display: block !important;
    width: 100%;
    margin: 0;
}

#stepQuestionnaire .questionnaire-step {
    display: none !important;
    width: calc(100% - 68px);
    margin: 0 34px 24px;
    padding: 28px 30px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(20, 43, 52, .06);
}

#stepQuestionnaire .questionnaire-step.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#stepQuestionnaire .questionnaire-step > .section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--border);
}

#stepQuestionnaire .questionnaire-step > .section-heading h3 {
    margin: 0;
    padding: 0;
    border: 0;
}

#stepQuestionnaire .questionnaire-step .question-box {
    margin: 0 0 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafb;
}

#stepQuestionnaire .questionnaire-step .form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

#stepQuestionnaire .questionnaire-step .required-note {
    margin-right: auto;
}

#stepQuestionnaire .questionnaire-step .next-btn,
#stepQuestionnaire .questionnaire-step .prev-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
}

@media (max-width: 700px) {
    #stepQuestionnaire .questionnaire-step {
        width: calc(100% - 36px);
        margin-left: 18px;
        margin-right: 18px;
        padding: 20px 16px;
    }

    #stepQuestionnaire .questionnaire-step .form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    #stepQuestionnaire .questionnaire-step .required-note {
        margin-right: 0;
        margin-bottom: 4px;
    }

    #stepQuestionnaire .questionnaire-step .btn {
        width: 100%;
    }
}


/* =========================================
   MATRIX YES / NO
========================================= */
.matrix-question {
  overflow-x: auto;
}

.matrix-table {
  width: 100%;
  min-width: 620px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.matrix-header,
.matrix-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 90px 90px;
  align-items: center;
}

.matrix-header {
  background: #f7f9fa;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
}

.matrix-header span,
.matrix-row > * {
  padding: 12px 14px;
}

.matrix-header span:not(:first-child) {
  text-align: center;
}

.matrix-row {
  border-bottom: 1px solid #edf1f2;
  min-height: 54px;
}

.matrix-row:last-child {
  border-bottom: none;
}

.matrix-label {
  font-size: 13px;
  font-weight: 600;
}

.matrix-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.matrix-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--orange);
}

@media (max-width: 700px) {
  .residence-grid {
    grid-template-columns: 1fr;
  }

  .matrix-table {
    min-width: 560px;
  }
}

/* Dokumen yang perlu dipersiapkan sebelum pengisian */
.welcome-document-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff8f1;
  line-height: 1.5;
}

.welcome-document-note strong {
  font-weight: 700;
}

.welcome-document-note span {
  color: var(--text-muted, #666);
}

/* Penyesuaian textarea untuk pertanyaan Blok 3 */
#alamatUsaha {
    min-height: 160px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

#kegiatanUtama {
    min-height: 300px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

#produkUtama {
    min-height: 300px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

/* =========================================================
   BLOK 3 - USAHA EKONOMI: RESPONSIVE FINAL OVERRIDES
========================================================= */
#form3 .profit-income-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 360px);
    gap: 16px;
    align-items: end;
}

#form3 .profit-income-input {
    min-width: 0;
}

#form3 .profit-income-input input {
    width: 100%;
}

#form3 .field-hint {
    overflow-wrap: anywhere;
    word-break: normal;
}

#form3 input,
#form3 select,
#form3 textarea,
#form3 button {
    max-width: 100%;
}

#form3 textarea {
    resize: vertical;
}

@media (max-width: 900px) {
    #form3 .form-grid {
        grid-template-columns: 1fr;
    }

    #form3 .form-grid .full-width {
        grid-column: auto;
    }

    #form3 .form-step {
        margin-left: 12px;
        margin-right: 12px;
        padding: 16px 12px;
    }

    #form3 .question-box {
        padding: 14px;
    }

    #form3 .profit-income-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #stepQuestionnaire .questionnaire-step,
    #form3 .form-step {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        padding: 12px 10px;
        box-sizing: border-box;
    }

    #form3 .question-box,
    #stepQuestionnaire .questionnaire-step .question-box {
        padding: 12px;
        margin-bottom: 12px;
    }

    #form3 .question-box > label,
    #form3 .question-box .option,
    #form3 .field-hint {
        font-size: 14px;
        line-height: 1.5;
    }

    #form3 .question-box input[type="text"],
    #form3 .question-box input[type="number"],
    #form3 .question-box input[type="date"],
    #form3 .question-box input[type="url"],
    #form3 .question-box input[type="tel"],
    #form3 .question-box select,
    #form3 .question-box textarea,
    #form3 .checkbox-dropdown-btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        font-size: 15px;
        box-sizing: border-box;
    }

    #form3 .question-box textarea {
        min-height: 110px;
    }

    #form3 .option-group,
    #form3 .option-grid,
    #form3 .asset-grid,
    #form3 .checkbox-dropdown-menu {
        max-width: 100%;
    }

    #form3 .option-group {
        flex-wrap: wrap;
    }

    #form3 .form-footer,
    #form3 .form-navigation {
        gap: 10px;
    }

    #form3 .next-btn,
    #form3 .prev-btn,
    #form3 .form-footer .btn {
        width: 100%;
        min-height: 46px;
    }

    #form3 .checkbox-dropdown-menu {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 380px) {
    #form3 .form-step,
    #stepQuestionnaire .questionnaire-step {
        width: calc(100% - 12px);
        margin-left: 6px;
        margin-right: 6px;
        padding: 10px 8px;
    }

    #form3 .question-box,
    #stepQuestionnaire .questionnaire-step .question-box {
        padding: 10px;
    }

    #form3 .question-box > label,
    #form3 .question-box .option,
    #form3 .field-hint {
        font-size: 13px;
    }
}

/* =========================================================
   BLOK 3 - PENDAPATAN PEKERJAAN & KEUNTUNGAN USAHA
   RESPONSIVE
========================================================= */
#form3 .income-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

#form3 .income-detail-grid .question-box {
    margin-bottom: 0;
}

#form3 .income-detail-grid .full-width {
    grid-column: 1 / -1;
}

#form3 .income-job-block,
#form3 .income-profit-block {
    margin-top: 16px;
}

@media (max-width: 700px) {
    #form3 .income-detail-grid {
        grid-template-columns: 1fr;
    }

    #form3 .income-detail-grid .full-width {
        grid-column: auto;
    }
}

/* =========================================================
   BLOK 3 - PENDAPATAN PEKERJAAN: OPSI NORMAL + RINCIAN KONDISIONAL
========================================================= */
#form3 .income-option-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

#form3 .income-option-group .income-option-label {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
}

/* Total pendapatan selalu berada di bawah pilihan Ya/Tidak dan
   menggunakan lebar penuh question-box, bukan mengikuti lebar kartu Ya. */
#form3 .income-option-details {
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
}

#form3 .income-option-details .question-box {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

#form3 .income-option-details input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    #form3 .income-option-group {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   POJOK SENSUS — REVISI PROGRESS 7 BLOK
   4 item baris atas + 3 item baris bawah, tanpa garis.
========================================================= */
.questionnaire-progress .progress-container.questionnaire-progress-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, auto);
    align-items: center;
    gap: 12px 18px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px 22px;
}

.questionnaire-progress .progress-line {
    display: none !important;
}

.questionnaire-progress .progress-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 2px 4px;
}

.questionnaire-progress .progress-item > div:last-child {
    min-width: 0;
}

.questionnaire-progress .progress-item strong,
.questionnaire-progress .progress-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questionnaire-progress .progress-item strong {
    font-size: 12px;
    line-height: 1.3;
}

.questionnaire-progress .progress-item small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
}

@media (max-width: 900px) {
    .questionnaire-progress .progress-container.questionnaire-progress-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 8px;
    }

    .questionnaire-progress .progress-item {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 5px;
    }

    .questionnaire-progress .progress-item > div:last-child {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .questionnaire-progress .progress-container.questionnaire-progress-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 14px 8px;
        gap: 10px 5px;
    }

    .questionnaire-progress .progress-number {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .questionnaire-progress .progress-item strong {
        font-size: 10px;
    }

    .questionnaire-progress .progress-item small {
        display: none;
    }
}

/* Jarak helper/contoh dari pilihan jawaban pada Blok 4. */
#form3 .questionnaire-step[data-step="4"] .field-hint {
    margin-top: 7px;
    margin-bottom: 11px;
    line-height: 1.55;
}

/* Pastikan dua pertanyaan usaha non-pertanian terakhir tetap berdampingan. */
#form3 .questionnaire-step[data-step="4"] .form-grid {
    align-items: start;
}

/* Opsi Iya/Tidak dan rincian pendapatan pada Blok 5. */
#form3 .questionnaire-step[data-step="5"] .income-option-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

#form3 .questionnaire-step[data-step="5"] .income-option-label {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
}

#form3 .questionnaire-step[data-step="5"] .income-option-details {
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
}

#form3 .questionnaire-step[data-step="5"] .income-option-details .question-box {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

@media (max-width: 700px) {
    #form3 .questionnaire-step[data-step="5"] .income-option-group {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   QUESTIONNAIRE HIERARCHY — A-G / 1-2-3 / a-b-c
========================================================= */
#form3 .question-group {
    margin: 0 0 18px;
    padding: 18px 20px 20px;
    border: 1px solid #e1e7ea;
    border-radius: 14px;
    background: #fbfcfd;
}

#form3 .question-group > .subheading {
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}



#form3 .subquestion-number {
    min-width: 22px;
    margin-right: 5px;
    color: #59666c;
}

#form3 .question-box > label {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

#form3 .question-box > label .required {
    margin-left: 3px;
}

#form3 .question-group .question-box {
    margin: 0 0 12px;
    background: #fff;
}

#form3 .question-group .question-box:last-child {
    margin-bottom: 0;
}

#form3 .question-group .field-hint {
    margin-top: 8px;
}

#form3 .question-group .form-grid {
    margin-top: 0;
}

/* The questionnaire has exactly 7 blocks: four on the first row, three on the second. */
.questionnaire-progress .progress-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px 10px !important;
    align-items: stretch !important;
}

.questionnaire-progress .progress-item {
    justify-content: flex-start !important;
    padding: 8px 6px !important;
}

.questionnaire-progress .progress-line {
    display: none !important;
}

@media (max-width: 900px) {
    .questionnaire-progress .progress-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .questionnaire-progress .progress-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #form3 .question-group {
        padding: 15px;
    }
}

/* Nested follow-up questions stay visually inside their main question card. */
#form3 .question-box > .question-box {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5eaed;
    border-radius: 10px;
}

#form3 .question-box > .question-box:last-child {
    margin-bottom: 0;
}

#form3 .question-box > .question-box > label {
    margin-bottom: 8px;
}


/* =========================================================
   FINAL — NOMOR/HURUF + TEKS + HIGHLIGHT TETAP SATU ALUR INLINE
========================================================= */
.field > label,
#form3 .question-box > label {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    text-align: left !important;
    line-height: 1.5;
}

/* Nomor/huruf menyatu dengan teks, sehingga ketika teks membungkus
   ke baris berikutnya, highlight juga tetap mengikuti alur kalimat. */
.field > label > strong:first-child,
#form3 .question-box > label > strong:first-child {
    display: inline !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}

/* Highlight harus tetap inline; jangan pernah menjadi flex/grid item. */
#form3 .question-highlight-red {
    display: inline !important;
    color: var(--red);
    font-weight: 700;
    white-space: normal !important;
}

/* Tanda wajib juga mengikuti alur teks secara inline. */
.field > label .required,
#form3 .question-box > label .required {
    display: inline !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    white-space: nowrap;
}

/* Nomor pada subheading Blok G tetap inline dengan judulnya. */
#form3 .question-group > .subheading {
    display: block !important;
}


/* =========================================================
   FINAL FIX — NOMOR & PERTANYAAN HARUS BERDEKATAN
   Contoh: 1. Nama                                      *
========================================================= */
.field > label,
#form3 .question-box > label {
    justify-content: flex-start !important;
    text-align: left !important;
}



/* Tanda wajib tetap mentok kanan */
.field > label .required,
#form3 .question-box > label .required {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
}

/* =========================================================
   ABSOLUTE FINAL FIX — NOMOR & PERTANYAAN TIDAK CENTER
   Format: 1. Nama                                      *
   Nomor + pertanyaan selalu di sisi kiri dan berdekatan.
========================================================= */
.field > label,
#form3 .question-box > label {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    align-items: start !important;
    justify-content: normal !important;
    column-gap: 0 !important;
    width: 100% !important;
    text-align: left !important;
}



/* Teks pertanyaan (text node pertama setelah nomor) */
.field > label,
#form3 .question-box > label {
    word-spacing: normal;
}

/* required selalu di kolom paling kanan */
.field > label .required,
#form3 .question-box > label .required {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}



/* Nomor dan pertanyaan selalu berada berdampingan.
   Tanda wajib (*) tetap berada di ujung kanan. */
#form3 .field > label,
#form3 .question-box > label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    column-gap: 5px !important;
    align-items: start !important;
}


#form3 .field > label .required,
#form3 .question-box > label .required {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
}

/* Selaraskan jarak nomor subpertanyaan dengan nomor utama */
#form3 .subquestion-number {
    font-size: 13px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   LABEL NUMBERING — nomor/huruf menyatu dengan pertanyaan
   ========================================================= */
.field > label,
#form3 .question-box > label {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

.field > label > strong:first-child,
#form3 .question-box > label > strong:first-child {
    flex: 0 0 auto !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.field > label .required,
#form3 .question-box > label .required {
    margin-left: auto !important;
    white-space: nowrap !important;
}

/* Nomor 2 dan 3 pada pertanyaan lanjutan Blok C */
#form3 .question-box > label > strong:first-child {
    font-weight: 700 !important;
}

/* =========================================================
   HIGHLIGHT TEKS PERTANYAAN
   Gunakan: <span class="question-highlight-red">Teks</span>
========================================================= */
#form3 .question-highlight-red {
    color: var(--red);
    font-weight: 700;
}

/* BLOK G — nomor subbagian mengikuti gaya penomoran blok A–F */
#form3 .asset-section-group > .subheading {
    display: flex;
    align-items: flex-start;
    gap: 0 !important;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
}


/* =========================================================
   FINAL INLINE QUESTION FLOW — nomor + pertanyaan + highlight
   tetap satu alur; tanda wajib berada di atas kanan
========================================================= */
#form3 .question-box > label,
#form3 .field > label {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 22px !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

#form3 .question-box > label > strong:first-child,
#form3 .field > label > strong:first-child {
    display: inline !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}

#form3 .question-box > label .question-highlight-red,
#form3 .field > label .question-highlight-red {
    display: inline !important;
    color: var(--red) !important;
    font-weight: 700 !important;
    white-space: normal !important;
}

#form3 .question-box > label .required,
#form3 .field > label .required {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
}


/* =========================================================
   FINAL REVISION — PENOMORAN BLOK D & G
   Nomor menjadi bagian dari heading yang sama, mengikuti pola
   penomoran pertanyaan pada Blok A, B, dan C.
========================================================= */
#form3 .numbered-question-group > .subheading,
#form3 .asset-section-group > .subheading {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

#form3 .numbered-question-group > .subheading > strong,
#form3 .asset-section-group > .subheading > strong {
    display: inline !important;
    margin: 0 7px 0 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}

/* =========================================================
   FINAL REVISION — BLOK E
   Detail pendapatan langsung tampil ketika blok induknya aktif.
   Tidak ada lagi layout khusus untuk pilihan Iya/Tidak pendapatan.
========================================================= */
#form3 .questionnaire-step[data-step="5"] .income-option-details {
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
}


/* =========================================================
   SUBQUESTION LABELS — a., b., c.
   Main question numbers are written directly in the label.
========================================================= */
#form3 .subquestion-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    margin-right: 5px;
    color: #59666c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

/* =========================================
   BLOK D — SPACING NILAI ASET & PETUNJUK
   Khusus pertanyaan nomor 8 agar input c dan
   kotak petunjuk tidak berdempetan.
========================================= */
#form3 .questionnaire-step[data-step="4"] .usaha-aset-helper {
    margin-top: 18px;
}

#form3 .questionnaire-step[data-step="4"] .usaha-aset-helper .field-hint {
    margin-top: 9px;
    line-height: 1.55;
}

#form3 .questionnaire-step[data-step="4"] .usaha-aset-field {
    margin-bottom: 6px;
}


/* =========================================================
   REVISI POJOK SENSUS — BLOK A & IDENTITAS USAHA DINAMIS
========================================================= */

/* Blok A: grid dan container dibuat konsisten tanpa mengubah visual utama. */
#form3 .questionnaire-step[data-step="1"] .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

#form3 .questionnaire-step[data-step="1"] .question-box {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

#form3 .questionnaire-step[data-step="1"] .question-box > input,
#form3 .questionnaire-step[data-step="1"] .question-box > select,
#form3 .questionnaire-step[data-step="1"] .question-box > textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#form3 .questionnaire-step[data-step="1"] .question-box.full-width {
    grid-column: 1 / -1;
}

#form3 .identitas-usaha-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#form3 .identitas-usaha-list .usaha-identity-card {
    margin: 0;
}

#form3 .identitas-usaha-list .usaha-identity-card.hidden {
    display: none !important;
}

#form3 .quantity-usaha-field {
    margin-top: 12px;
}

#form3 .asset-ownership-hint {
    margin: -4px 0 12px;
}

#form3 .field-hint {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    #form3 .questionnaire-step[data-step="1"] .form-grid {
        grid-template-columns: 1fr;
    }

    #form3 .questionnaire-step[data-step="1"] .question-box.full-width {
        grid-column: auto;
    }
}

.google-maps-address-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}
.google-maps-address-link:hover {
    text-decoration-thickness: 2px;
}


/* =========================================================
   BLOK D — KETERANGAN USAHA/PERUSAHAAN
   Kelompok a-g tampil sebagai card terpisah di dalam setiap usaha.
========================================================= */
#form3 .identitas-usaha-list .usaha-identity-card {
    padding: 20px;
    margin: 0 0 22px;
    border: 1px solid #dfe6e9;
    border-radius: 14px;
    background: #fbfcfd;
    box-sizing: border-box;
}

#form3 .identitas-usaha-list .usaha-identity-card > .subheading {
    margin: 0 0 20px !important;
    padding: 0 !important;
    display: block !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

#form3 .identitas-usaha-list .usaha-identity-card > .subheading > strong {
    display: inline !important;
    margin-right: 7px !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

#form3 .usaha-subsection-card {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 18px 20px;
    margin: 0 0 18px;
    border: 1px solid #e1e7ea;
    border-radius: 12px;
    background: #fff;
}

#form3 .usaha-subsection-card:last-child {
    margin-bottom: 0;
}

#form3 .usaha-subsection-heading {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
    color: var(--text) !important;
}

#form3 .usaha-subsection-heading > strong {
    display: inline !important;
    margin-right: 6px !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

#form3 .usaha-subsection-card > .form-grid {
    margin-top: 0 !important;
}

#form3 .usaha-subsection-card > .question-box,
#form3 .usaha-subsection-card > .form-grid > .question-box {
    margin-bottom: 16px;
}

#form3 .usaha-subsection-card > .question-box:last-child,
#form3 .usaha-subsection-card > .form-grid > .question-box:last-child {
    margin-bottom: 0;
}

#form3 .usaha-subsection-card .question-box > label {
    margin-bottom: 8px;
}

#form3 .usaha-subsection-card input,
#form3 .usaha-subsection-card select,
#form3 .usaha-subsection-card textarea {
    max-width: 100%;
    box-sizing: border-box;
}

#form3 .usaha-subsection-card .field-hint {
    margin-top: 9px;
    line-height: 1.55;
}

#form3 .usaha-period-branch {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#form3 .usaha-period-branch.hidden {
    display: none !important;
}

#form3 .usaha-period-branch > .question-box {
    margin-bottom: 16px;
}

#form3 .usaha-period-branch > .question-box:last-child {
    margin-bottom: 0;
}

#form3 .usaha-subsection-card .conditional-field {
    margin-top: 12px;
}

@media (max-width: 700px) {
    #form3 .identitas-usaha-list .usaha-identity-card {
        padding: 15px;
        margin-bottom: 18px;
    }

    #form3 .usaha-subsection-card {
        padding: 15px;
        margin-bottom: 15px;
    }
}


/* Blok D — compact, consistent spacing for business subsection cards */
#form3 .usaha-subsection-card {
    padding: 18px 18px 20px;
    margin-bottom: 16px;
}

#form3 .usaha-subsection-card > .usaha-subsection-heading {
    margin-bottom: 14px !important;
}

#form3 .usaha-subsection-card > .question-box,
#form3 .usaha-subsection-card > .form-grid > .question-box {
    margin-bottom: 14px;
}

#form3 .usaha-subsection-card .question-box > label {
    margin-bottom: 7px;
}

#form3 .usaha-subsection-card .question-box + .conditional-field {
    margin-top: 8px;
}

#form3 .usaha-subsection-card .conditional-field > .question-box {
    margin-bottom: 12px;
}

#form3 .usaha-subsection-card .conditional-field > .question-box:last-child {
    margin-bottom: 0;
}

#form3 .usaha-subsection-card .usaha-period-branch {
    padding-top: 2px;
}

#form3 .usaha-subsection-card [id^="alasanTidakNIBField"] {
    margin-top: 0;
}

#form3 .usaha-subsection-card [id^="alasanTidakNIBJawabanField"] {
    margin-top: 8px;
}

#form3 .usaha-subsection-card [id^="alasanTidakNIBLainnyaField"] {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

#form3 .usaha-subsection-card .usaha-subsection-card {
    padding: 0;
    border: 0;
    margin-bottom: 0;
}

#form3 .usaha-subsection-card [data-period-group="e"],
#form3 .usaha-subsection-card [data-period-group="f"],
#form3 .usaha-subsection-card [data-period-group="g"] {
    width: 100%;
}

/* =========================================================
   SECTION BRAND FOOTER
   Branding untuk Data Akademik, Tempat Tinggal, dan Kuesioner
========================================================= */
.section-brand-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid rgba(225, 101, 34, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5ed 0%, #ffb685 100%);
  box-shadow: 0 8px 22px rgba(177, 53, 47, 0.08);
}

.section-brand-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
}

.section-brand-footer-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.section-brand-label {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.section-brand-footer-text strong {
  color: var(--black);
  font-size: 13px;
  line-height: 1.45;
}

.section-brand-footer-text small {
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
}

.section-brand-logo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 190px;
  height: 72px;
  object-fit: contain;
  object-position: center;
}

.questionnaire-brand-footer {
  margin-top: 28px;
}

@media (max-width: 700px) {
  .section-brand-footer {
    align-items: flex-start;
    gap: 14px;
    padding: 17px 16px;
  }

  .section-brand-footer-text strong {
    font-size: 12px;
  }

  .section-brand-logo {
    width: 145px;
    height: 58px;
  }
}

@media (max-width: 480px) {
  .section-brand-footer {
    flex-direction: column;
  }

  .section-brand-logo {
    align-self: flex-end;
    width: 170px;
    height: 62px;
  }
}

/* =========================================================
   FINAL — HALAMAN DEPAN POJOK SENSUS SE2026
   COMPACT / CLEAN / TIDAK BANYAK RUANG KOSONG
   ========================================================= */

#welcomePage .welcome-shell {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    overflow: hidden;

    border-radius: 20px;
    background: #ffffff;

    box-shadow: 0 12px 35px rgba(120, 60, 20, 0.10);
}


/* =========================================================
   BAGIAN ORANGE / HERO
   ========================================================= */

#welcomePage .welcome-hero {
    position: relative;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;

    /* INI YANG MEMBUAT BOX LEBIH PENDEK */
    min-height: 0;
    height: auto;

    /* Jarak atas - kanan - bawah - kiri */
    padding: 22px 0px;

    overflow: hidden;

    text-align: left;
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(238, 90, 8, 0.96),
            rgba(217, 70, 7, 0.88)
        ),
        url("../assets/slogan.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 20px 20px 0 0;
}


/* =========================================================
   TEKS SEBELAH KIRI
   ========================================================= */

#welcomePage .welcome-hero-text {
    position: relative;
    z-index: 2;

    max-width: 520px;
}


#welcomePage .welcome-agency {
    margin: 0 0 8px;

    color: rgba(255,255,255,0.92);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1.3;

    text-align: left;
}


#welcomePage .welcome-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(38px, 4.5vw, 52px);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -1px;

    text-align: left;
}


#welcomePage .welcome-subtitle {
    margin: 9px 0 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;

    text-align: left;
}


#welcomePage .welcome-location {
    margin: 5px 0 0;

    color: rgba(255,255,255,0.86);

    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;

    text-align: left;
}


/* =========================================================
   GAMBAR SENSUSIN AJA — SEBELAH KANAN
   ========================================================= */

#welcomePage .welcome-hero-image {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Jangan biarkan gambar membuat hero tinggi */
    width: 100%;
    height: 120px;

    min-height: 0;

    overflow: visible;
}


#welcomePage .welcome-hero-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 380px;

    object-fit: contain;

    /* Sedikit miring */
    transform: rotate(-5deg);

    transform-origin: center center;
}


/* =========================================================
   BAGIAN PUTIH DI BAWAH HERO
   ========================================================= */

#welcomePage .welcome-content {
    width: 100%;

    margin: 0;
    padding: 28px 40px 32px;

    background: #ffffff;
}


/* =========================================================
   KRITERIA KUESIONER
   ========================================================= */

#welcomePage .welcome-info-card {
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}


#welcomePage .welcome-info-label {
    display: block;

    margin-bottom: 7px;

    color: #ee5a08;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


#welcomePage .welcome-info-card h3 {
    margin: 0;

    color: #222222;

    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
}


#welcomePage .welcome-info-card > p {
    max-width: 850px;

    margin: 8px 0 0;

    color: #666666;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   CARD PERSIAPAN DOKUMEN
   ========================================================= */

#welcomePage .welcome-consent-card {
    margin-top: 18px;

    padding: 16px 18px;

    border: 1px solid #f0d8c6;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 6px 18px rgba(86, 48, 28, 0.06);
}


#welcomePage .welcome-document-note {
    margin: 0 0 13px;

    padding: 11px 13px;

    border: 1px solid #f0e0d5;
    border-radius: 10px;

    background: #fff9f5;

    color: #666666;

    font-size: 12px;
    line-height: 1.5;
}


#welcomePage .welcome-document-note > strong {
    display: block;

    margin-bottom: 3px;

    color: #222222;

    font-size: 12px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

#welcomePage .welcome-consent-check {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    cursor: pointer;
}


#welcomePage .welcome-checkbox {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    border: 2px solid #ee5a08;
    border-radius: 5px;

    background: #ffffff;
}


#welcomePage .welcome-consent-check > span:last-child {
    color: #333333;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   TOMBOL
   ========================================================= */

#welcomePage .welcome-next-btn {
    width: 100%;

    min-height: 43px;

    margin-top: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(
        90deg,
        #f05a08,
        #d94707
    );

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #welcomePage .welcome-shell {
        width: 100%;
        border-radius: 0;
    }

    #welcomePage .welcome-hero {
        grid-template-columns: 1fr;

        padding: 25px 22px 18px;

        border-radius: 0;
    }

    #welcomePage .welcome-hero-image {
        height: 95px;
        margin-top: 8px;
    }

    #welcomePage .welcome-hero-image img {
        max-height: 90px;
        max-width: 65%;
    }

    #welcomePage .welcome-content {
        padding: 24px 20px 28px;
    }

    #welcomePage .welcome-info-card h3 {
        font-size: 18px;
    }

    #welcomePage .welcome-consent-card {
        padding: 14px;
    }
}






\n\n/* ============================================================\n   GLOBAL SPACING REFINEMENT — Pojok Sensus\n   Visual-only override: no JS/logic/data attributes changed.\n   ============================================================ */\n\n/* Base vertical rhythm */\n
:root {\n    --space-1: 6px;\n    --space-2: 10px;\n    --space-3: 14px;\n    --space-4: 18px;\n    --space-5: 24px;\n    --space-6: 30px;\n}\n\n/* Main section/card containers */\n.section,\n.questionnaire-section,\n.block,\n.card,\n.form-section,\n.business-section,\n.usaha-section {\n    margin-top: var(--space-5);\n    margin-bottom: var(--space-5);\n    padding-top: var(--space-5);\n    padding-bottom: var(--space-5);\n}\n\n/* Avoid doubled spacing between adjacent cards */\n.card + .card,\n.question-box + .question-box,\n.form-group + .form-group,\n.field + .field,\n.question + .question {\n    margin-top: var(--space-4);\n}\n\n/* Question boxes */\n.question-box,\n.question-card,\n.field,\n.form-group {\n    margin-top: var(--space-3);\n    margin-bottom: var(--space-3);\n    padding-top: var(--space-4);\n    padding-bottom: var(--space-4);\n}\n\n/* Labels and question text */\n.question-box label,\n.question-card label,\n.field label,\n.form-group label {\n    margin-bottom: var(--space-2);\n}\n\n/* Inputs/selects/textareas */\n.question-box input,\n.question-box select,\n.question-box textarea,\n.question-card input,\n.question-card select,\n.question-card textarea,\n.field input,\n.field select,\n.field textarea,\n.form-group input,\n.form-group select,\n.form-group textarea {\n    margin-top: var(--space-2);\n    margin-bottom: var(--space-2);\n}\n\n/* Helper/instruction text */\n.helper-text,\n.help-text,\n.instruction,\n.field-hint,\n.question-help,\nsmall {\n    margin-top: var(--space-2);\n    margin-bottom: var(--space-2);\n}\n\n/* Conditional follow-up fields */\n.conditional,\n.conditional-field,\n.follow-up,\n.sub-question {\n    margin-top: var(--space-3);\n    margin-bottom: var(--space-3);\n}\n\n/* Two-column grids */\n.grid,\n.form-grid,\n.question-grid,\n.fields-grid,\n.row {\n    row-gap: var(--space-4);\n}\n\n/* Headings inside cards */\n.card h2, .card h3, .card h4,\n.section h2, .section h3, .section h4,\n.business-section h2, .business-section h3, .business-section h4 {\n    margin-top: 0;\n    margin-bottom: var(--space-4);\n}\n\n/* Nested cards: enough breathing room without excessive height */\n.card .card,\n.question-box .question-box,\n.form-section .form-section {\n    margin-top: var(--space-4);\n    margin-bottom: var(--space-4);\n}\n\n/* Buttons/footer */\n.form-actions,\n.navigation-buttons,\n.step-actions,\n.nav-buttons {\n    margin-top: var(--space-6);\n    padding-top: var(--space-5);\n}\n\n/* Mobile: keep the same rhythm but slightly tighter */\n@media (max-width: 768px) {\n    .section, .questionnaire-section, .block, .card,\n    .form-section, .business-section, .usaha-section {\n        margin-top: var(--space-4);\n        margin-bottom: var(--space-4);\n        padding-top: var(--space-4);\n        padding-bottom: var(--space-4);\n    }\n\n    .question-box, .question-card, .field, .form-group {\n        margin-top: var(--space-2);\n        margin-bottom: var(--space-2);\n        padding-top: var(--space-3);\n        padding-bottom: var(--space-3);\n    }\n\n    .grid, .form-grid, .question-grid, .fields-grid, .row {\n        row-gap: var(--space-3);\n    }\n}\n