/* ============================================================
   SCOPE — adapter template CSS untuk subtree /s/* (survey SPBU)
   Urutan load: tokens.base.css → tokens.css → components.css
                → skin.css → scope.css  (JANGAN diubah)

   STYLE 2026-08-13: "Lovable clone" — card putih max-w-md di
   bg krem hangat; pastel action cards radius 22px; hero ilustrasi.
   ============================================================ */

/* ---------- palet Lovable ---------- */
.sp-template {
  --lv-bg: #F7F6F0;            /* krem hangat (oklch .975 .004 106) */
  --lv-card: #FFFFFF;
  --lv-border: #E7E6E1;        /* oklch .915 .008 255 */
  --lv-text: #171717;          /* oklch .22 .02 265 ≈ #171717 */
  --lv-muted: #8A8A8A;         /* oklch .53 .02 260 */
  --lv-red: #E01020;           /* primary oklch .55 .221 27.4 */
  --lv-yellow: #FDF3D7;        /* pastel survey card */
  --lv-yellow-border: #F3E3B8;
  --lv-pink: #FBEAEA;          /* pastel pengaduan card */
  --lv-pink-border: #F0CFCF;
  --lv-green: #34C759;         /* kirim survey oklch .6 .155 148 ≈ #34C759 */
  --lv-star-on: #F5A623;       /* star aktif — amber hangat */

  --font-sans: var(--font-jakarta), "Plus Jakarta Sans", system-ui, sans-serif;
  font-family: var(--font-sans);
  background: var(--lv-bg);
  color: var(--lv-text);
  min-height: 100dvh;
}

/* Brandbar 3 warna khas BUMN (tetap dari template) */
.sp-brandbar {
  height: var(--c-brandbar-h);
  background: var(--c-brandbar-bg);
}

/* ============================================================
   LANDING — clone Lovable
   ============================================================ */

/* Frame: card putih tengah, max-w-md, di bg krem */
.sp-lv-shell {
  min-height: calc(100dvh - 4px);
  display: flex;
  justify-content: center;
  background: var(--lv-bg);
}
.sp-lv-card {
  width: 100%;
  max-width: 448px;
  background: var(--lv-card);
  border-left: 1px solid var(--lv-border);
  border-right: 1px solid var(--lv-border);
  display: flex;
  flex-direction: column;
}

/* Header bar: PERTAMINA + badge 135 */
.sp-lv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--lv-border);
}
.sp-lv-topbar .sp-lv-brand {
  display: block;
  width: 154px;
  max-width: calc(100% - 76px);
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.sp-lv-topbar .sp-lv-badge {
  background: var(--lv-red);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 10px;
}

/* Body landing */
.sp-lv-body {
  padding: 20px;
  flex: 1;
}
.sp-lv-title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sp-lv-sub {
  text-align: center;
  font-size: 13px;
  color: var(--lv-muted);
  margin-top: 2px;
  line-height: 1.45;
}
.sp-lv-hero {
  display: block;
  width: 100%;
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid var(--lv-border);
  object-fit: cover;
  aspect-ratio: 1431 / 600;
}
.sp-lv-prompt {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
}

/* Action card pastel — radius 22px, border 2px senada */
.sp-lv-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 2px solid;
  background: var(--lv-yellow);
  border-color: var(--lv-yellow-border);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.sp-lv-action:active { transform: scale(0.985); }
.sp-lv-action--pink {
  background: var(--lv-pink);
  border-color: var(--lv-pink-border);
}
.sp-lv-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sp-lv-action--yellow .sp-lv-action-icon {
  background: #FBE8B2;
  color: #B98A1F;
}
.sp-lv-action--pink .sp-lv-action-icon {
  background: #F7D7D7;
  color: var(--lv-red);
}
.sp-lv-action-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
}
.sp-lv-action-desc {
  display: block;
  font-size: 11.5px;
  color: var(--lv-muted);
  margin-top: 1px;
  line-height: 1.4;
}
.sp-lv-action-chevron {
  margin-left: auto;
  color: #B9B8B2;
  flex-shrink: 0;
}

/* Footer */
.sp-lv-footer {
  border-top: 1px solid var(--lv-border);
  padding: 14px;
  text-align: center;
  font-size: 10px;
  color: #B9B8B2;
}

/* ============================================================
   SURVEY FORM — clone Lovable (green submit, dark star)
   ============================================================ */
.sp-lv-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--lv-border);
}
.sp-lv-back {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--lv-text);
  cursor: pointer;
  padding: 2px 6px;
  margin-left: -6px;
}
.sp-lv-form-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}
.sp-lv-form-question {
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0 4px;
}
.sp-lv-form-body {
  padding: 0 20px 20px;
}

/* Star rating ala Lovable: 32px, dark text, no box */
.sp-lv-star {
  background: none;
  border: none;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #171717;               /* gelap seperti Lovable (oklch .22 .02 265) */
  opacity: 0.28;                /* unselected state redup, masih terlihat gelap */
  transition: transform 120ms ease, opacity 120ms ease;
}
.sp-lv-star.is-on { opacity: 1; color: var(--lv-star-on); }
.sp-lv-star:active { transform: scale(0.9); }

/* Rating group: label bold 13px + row stars */
.sp-lv-rating-group { margin-top: 14px; }
.sp-lv-rating-label {
  font-size: 13px;
  font-weight: 700;
}

/* Komentar (textarea) */
.sp-lv-textarea {
  width: 100%;
  border: 1px solid var(--lv-border);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--lv-text);
  background: #fff;
  min-height: 88px;
  resize: vertical;
}
.sp-lv-textarea::placeholder { color: #B9B8B2; }

/* ============================================================
   COMPLAINT — input/select/radio ala Lovable
   ============================================================ */
.sp-lv-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--lv-text);
  margin-bottom: 6px;
}
.sp-lv-label.req::after { content: " *"; color: var(--lv-red); }

.sp-lv-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lv-border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--lv-text);
  background: #fff;
  box-sizing: border-box;
}
.sp-lv-input::placeholder { color: #B9B8B2; }
.sp-lv-input:focus { outline: 2px solid color-mix(in srgb, var(--lv-red) 25%, transparent); outline-offset: 0; border-color: var(--lv-red); }

/* DynamicForm pakai .form-control — samakan dimensi dgn .sp-lv-input agar sejajar */
.sp-lv-form-body .form-control {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--lv-border);
  box-sizing: border-box;
  padding: 9px 12px;
}
.sp-lv-form-body textarea.form-control {
  height: auto;
  min-height: 96px;
  border-radius: 12px;
  border: 1px solid var(--lv-border);
  box-sizing: border-box;
}

/* Radio — bullet merah, teks 14px */
.sp-lv-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--lv-text);
  cursor: pointer;
}
.sp-lv-radio input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--lv-red);
  cursor: pointer;
}

/* Checkbox consent (identity) */
.sp-lv-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11.5px;
  color: var(--lv-text);
  cursor: pointer;
  margin-top: 14px;
}
.sp-lv-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--lv-red);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Input teks umum (identity & form fields) — h 44px, radius 12 */
.sp-lv-field {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lv-border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--lv-text);
  background: #fff;
}
.sp-lv-field::placeholder { color: #B9B8B2; }
.sp-lv-field:focus { outline: 2px solid color-mix(in srgb, var(--lv-red) 25%, transparent); border-color: var(--lv-red); }

/* Tombol Selesai outline (thanks) */
.sp-lv-submit--ghost {
  background: transparent !important;
  color: var(--lv-text) !important;
  border: 1px solid var(--lv-border) !important;
  display: inline-block;
  width: auto;
  padding: 0 28px;
  line-height: 46px;
  text-decoration: none;
  text-align: center;
}
.sp-lv-submit--ghost:hover { background: #F7F6F0 !important; }

/* Tombol Lanjut merah solid (complaint) — 48px, radius 12, weight 600 */
.sp-lv-submit--red {
  background: var(--lv-red) !important;
}

/* Tombol submit hijau solid — 48px, radius 12px, weight 600 */
.sp-lv-submit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--lv-green);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity 120ms ease, transform 120ms ease;
}
.sp-lv-submit:hover { opacity: 0.92; }
.sp-lv-submit:active { transform: scale(0.99); }
.sp-lv-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error dinamis */
.form-error.is-shown { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sp-lv-action, .sp-lv-star, .sp-lv-submit { transition: none !important; }
  .sp-lv-action:active, .sp-lv-star:active, .sp-lv-submit:active { transform: none !important; }
}