/* store/complaint/complaint_form.html — halaman publik, dibuka pelanggan di HP.
   Berdiri sendiri (tanpa shell toko/ERP), jadi variabel tema tidak tersedia di
   sini — warna ditulis eksplisit. Warna merek toko konstan, sama seperti layar
   pelanggan. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(170deg, #fde9f1 0%, #fdf6f9 40%, #f7f7fa 100%);
  min-height: 100vh;
  color: #26262c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.kel-wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem) clamp(.85rem, 4vw, 1.5rem) 3rem;
}

.kel-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #f1e3ea;
  box-shadow: 0 10px 30px rgba(157, 23, 77, .08);
  padding: clamp(1.1rem, 5vw, 1.8rem);
}

.kel-center { text-align: center; }

.kel-head { margin-bottom: 1.1rem; }

h1 {
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  font-weight: 800;
  margin: 0 0 .35rem;
  color: #9d174d;
  line-height: 1.25;
}

.kel-sub {
  margin: 0 0 .4rem;
  font-size: .93rem;
  line-height: 1.55;
  color: #6b6b76;
}
.kel-kecil { font-size: .82rem; }

/* Konteks dari token — pelanggan tidak mengisinya, hanya melihat. */
.kel-konteks {
  background: #fdf2f7;
  border: 1px solid #f7d4e2;
  border-radius: 14px;
  padding: .7rem .85rem;
  margin-bottom: 1.1rem;
  display: grid;
  gap: .3rem;
}
.kel-konteks div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
}
.kel-konteks span { color: #9a6b81; }
.kel-konteks strong { color: #9d174d; text-align: right; word-break: break-word; }

.kel-label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: #44444e;
  margin: .9rem 0 .35rem;
}
.kel-wajib {
  font-weight: 700;
  color: #be123c;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kel-opsional {
  font-weight: 600;
  color: #9a9aa6;
  font-size: .74rem;
}

.kel-input {
  width: 100%;
  /* 16px: di bawah itu Safari iOS ikut men-zoom halaman saat field disentuh. */
  font-size: 16px;
  font-family: inherit;
  color: #26262c;
  background: #fff;
  padding: .7rem .85rem;
  border: 1.5px solid #e6dce2;
  border-radius: 12px;
  outline: none;
}
.kel-input:focus {
  border-color: #f48fb1;
  box-shadow: 0 0 0 3.5px rgba(244, 143, 177, .25);
}
.kel-textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }

/* Foto bukti. <input type=file> bawaan tidak bisa digaya dan tombolnya kecil
   sekali di HP, jadi input aslinya disembunyikan DI DALAM <label> — label yang
   membungkus input tetap bisa membuka pemilih berkas tanpa JS sama sekali. */
.kel-foto-pilihan {
  display: flex;
  gap: .55rem;
}
.kel-foto {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .85rem .6rem;
  border: 1.5px dashed #e6dce2;
  border-radius: 12px;
  background: #fffafc;
  color: #8a6b7a;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.kel-foto:active { border-color: #f48fb1; background: #fff2f7; }
.kel-foto-ikon { font-size: 1.45rem; line-height: 1; }
.kel-foto-teks {
  margin: .5rem 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: #9d174d;
  overflow-wrap: anywhere;
}
.kel-foto-teks[hidden] { display: none; }
/* Tidak `display:none`: sebagian browser melewatkan field yang benar-benar
   tersembunyi, dan foto pelanggan ikut hilang tanpa jejak. */
.kel-foto-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.kel-foto-input:focus-visible + .kel-foto-teks { text-decoration: underline; }
.kel-foto-pratinjau {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
  margin-top: .55rem;
  border-radius: 12px;
  background: #f3eef1;
}
.kel-foto-pratinjau[hidden] { display: none; }

.kel-kirim {
  width: 100%;
  margin-top: 1.3rem;
  padding: .95rem 1rem;
  font-size: 1.02rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #f48fb1, #e0629a);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(224, 98, 154, .32);
}
.kel-kirim:active { transform: translateY(1px); }
.kel-kirim:disabled { opacity: .65; box-shadow: none; cursor: default; }

.kel-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 12px;
  padding: .65rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* Dua pilihan pembuka. Sengaja sama besar dan "tanpa nama" ditaruh DULUAN:
   pelanggan yang paling kecewa justru yang paling segan menyebut nama, apalagi
   kalau kasirnya masih berdiri di depannya. Kalau opsi anonim terlihat seperti
   pilihan kelas dua, keluhan terburuk tidak akan pernah sampai. */
.kel-pilih {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  text-align: left;
  margin-bottom: .6rem;
  padding: .9rem 1rem;
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.45;
  color: #6b6b76;
  background: #fff;
  border: 1.5px solid #e6dce2;
  border-radius: 16px;
  cursor: pointer;
}
.kel-pilih:active { transform: translateY(1px); }
.kel-pilih strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #26262c;
  margin-bottom: .12rem;
}
.kel-pilih-ikon { flex: none; font-size: 1.5rem; line-height: 1.1; }
.kel-pilih-member { border-color: #f7c7dc; background: #fdf7fa; }
.kel-pilih-member strong { color: #9d174d; }

/* Jalan keluar ke anonim, tersedia di SETIAP langkah — pelanggan boleh berubah
   pikiran di tengah jalan tanpa harus mengulang dari awal. */
.kel-tautan {
  display: block;
  width: 100%;
  margin-top: .9rem;
  padding: .5rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: #a83a6b;
  text-decoration: underline;
  cursor: pointer;
}

.kel-privasi {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  background: #f7f7fa;
  border-radius: 12px;
  padding: .6rem .75rem;
  font-size: .78rem;
  color: #6b6b76;
  line-height: 1.5;
  margin-top: .9rem;
}

.kel-sebagai {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fdf2f7;
  border: 1px solid #f7d4e2;
  border-radius: 14px;
  padding: .6rem .8rem;
  margin-bottom: .3rem;
  font-size: .88rem;
  color: #55555f;
  line-height: 1.4;
}
.kel-sebagai-ikon { flex: none; font-size: 1.3rem; }

.kel-ikon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}
.kel-ikon-sukses { background: linear-gradient(135deg, #34d399, #10b981); }
.kel-ikon-gagal { background: linear-gradient(135deg, #fb923c, #f97316); }
/* Halaman sambutan ailincomplain.info — bukan sukses, bukan gagal. */
.kel-ikon-info { background: linear-gradient(135deg, #f472b6, #9d174d); }

@media (prefers-color-scheme: dark) {
  body { background: #14141c; color: #e8e8f0; }
  .kel-card { background: #1c1c26; border-color: #2e2e3c; box-shadow: none; }
  .kel-sub { color: #a0a0b0; }
  .kel-label { color: #d0d0dc; }
  .kel-input { background: #14141c; color: #e8e8f0; border-color: #34343f; }
  .kel-konteks { background: #241923; border-color: #46283a; }
  .kel-pilih { background: #14141c; border-color: #34343f; color: #a0a0b0; }
  .kel-pilih strong { color: #e8e8f0; }
  .kel-pilih-member { background: #241923; border-color: #46283a; }
  .kel-pilih-member strong { color: #f9a8c9; }
  .kel-privasi { background: #14141c; color: #a0a0b0; }
  .kel-sebagai { background: #241923; border-color: #46283a; color: #c0c0cc; }
  .kel-tautan { color: #f9a8c9; }
  .kel-foto { background: #241923; border-color: #46283a; color: #b08a9c; }
  .kel-foto:active { background: #2c1e2a; }
  .kel-foto-teks { color: #f9a8c9; }
  .kel-foto-pratinjau { background: #14141c; }
  .kel-kirim:disabled { opacity: .6; }
  .kel-konteks strong { color: #f9a8c9; }
  .kel-konteks span { color: #b08a9c; }
  h1 { color: #f9a8c9; }
}