/* ============================================================
   DEC Kiosk — brand theme layer on top of Bootstrap 5.
   Brand palette (from dec4u.org / Avada theme):
     blue    #32507D  (primary — logo letters)
     purple  #A078B5  (accent — logo cross)
     paper   #F2F3F5  (page background)
     ink     #434549  (body text)
   ============================================================ */

:root {
  --dec-blue:   #32507D;
  --dec-blue-dk:#28405F;
  --dec-purple: #A078B5;
  --dec-paper:  #F2F3F5;
  --dec-ink:    #434549;
  --dec-soft:   #6E7681;
  --bs-body-font-family: Poppins, "PingFang SC", "PingFang TC", "Microsoft YaHei", Arial, sans-serif;
}

/* Re-point Bootstrap's primary components at the church blue */
.btn-primary {
  --bs-btn-bg: var(--dec-blue);
  --bs-btn-border-color: var(--dec-blue);
  --bs-btn-hover-bg: var(--dec-blue-dk);
  --bs-btn-hover-border-color: var(--dec-blue-dk);
  --bs-btn-active-bg: var(--dec-blue-dk);
  --bs-btn-active-border-color: var(--dec-blue-dk);
  --bs-btn-disabled-bg: var(--dec-blue);
  --bs-btn-disabled-border-color: var(--dec-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--dec-blue);
  --bs-btn-border-color: var(--dec-blue);
  --bs-btn-hover-bg: var(--dec-blue);
  --bs-btn-hover-border-color: var(--dec-blue);
  --bs-btn-active-bg: var(--dec-blue);
  --bs-btn-active-border-color: var(--dec-blue);
}
.progress-bar { background-color: var(--dec-blue); }
.form-control:focus {
  border-color: var(--dec-blue);
  box-shadow: 0 0 0 .25rem rgba(50, 80, 125, .15);
}

html, body { height: 100%; }
body {
  background: var(--dec-paper);
  color: var(--dec-ink);
  font-family: var(--bs-body-font-family);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.k-muted { color: var(--dec-soft); }

/* ---------- screens ---------- */
#kiosk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.k-screen { display: none; flex: 1; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.k-screen.is-active { display: flex; }
.k-center { align-items: center; justify-content: center; }
.k-center-inner { max-width: 640px; padding: 40px 24px; }

.k-logo-img { max-width: 300px; width: 70%; height: auto; }
.k-logo-head { height: 40px; width: auto; }
.k-welcome-title { font-size: 2.6rem; font-weight: 700; color: var(--dec-blue); }
.k-welcome-en { font-size: 1.4rem; font-weight: 600; color: var(--dec-soft); margin-top: .3rem; }
.k-lang-big { max-width: 380px; width: 100%; }
.k-lang-big .btn { padding: 1.1rem; font-size: 1.3rem; font-weight: 600; }

.k-check {
  width: 96px; height: 96px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--dec-blue); color: #fff; font-size: 52px; border-radius: 50%;
}

/* ---------- form chrome ---------- */
.k-lang-sm .btn.is-on {
  background: var(--dec-blue); border-color: var(--dec-blue); color: #fff;
}
.k-body { -webkit-overflow-scrolling: touch; }
.k-step { display: none; }
.k-step.is-active { display: block; }
.form-label { font-weight: 600; font-size: 1.05rem; }
.k-req { color: #C2410C; font-style: normal; font-weight: 700; }
.form-control-lg { min-height: 3.4rem; }

/* required-field highlight (toggled by kiosk.js on the .k-field wrapper) */
.k-field.is-invalid .form-control { border-color: #C2410C; background: #FDF0E8; }
.k-field.is-invalid .form-label { color: #C2410C; }
.k-field.is-invalid .k-opt { border-color: #C2410C; }

/* option pills (custom control driven by kiosk.js) */
.k-opt {
  font-size: 1.05rem; font-weight: 600; font-family: inherit; color: var(--dec-ink);
  padding: .8rem 1.25rem; min-height: 3.4rem;
  background: #fff; border: 1.5px solid #CDD3DA; border-radius: .75rem; cursor: pointer;
}
.k-opt.is-on { background: var(--dec-blue); border-color: var(--dec-blue); color: #fff; }

/* address collapse toggle */
.k-collapse-toggle { font-weight: 600; color: var(--dec-blue); padding: .9rem; }
.k-collapse-arrow { display: inline-block; transition: transform .2s; }
.k-collapse-toggle.is-open .k-collapse-arrow { transform: rotate(180deg); }

/* household rows (built by kiosk.js) */
.k-hh-tag {
  flex: none; font-size: .85rem; font-weight: 700; color: var(--dec-blue);
  background: rgba(160, 120, 181, .18); border-radius: .5rem; padding: .45rem .7rem;
}
.k-hh-del { flex: none; width: 2.8rem; }

/* footer */
.k-foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
.k-btn-foot { flex: 1; min-height: 3.8rem; font-weight: 600; }
.k-btn-main { flex: 2; }

/* idle overlay */
.k-idle {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(33, 35, 38, .55);
  display: flex; align-items: center; justify-content: center;
}
.k-idle[hidden] { display: none; }
.k-idle-box { max-width: 480px; margin: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .progress-bar, .k-collapse-arrow { transition: none; }
}