/* หน้า PHP (ลงทะเบียน / แดชบอร์ด) — เสริมธีมเดิม */
.app-php-body {
  font-family: "Prompt", system-ui, sans-serif;
}

.app-php-main {
  font-size: 1.08rem;
  line-height: 1.55;
}

@media (min-width: 992px) {
  .app-php-main {
    font-size: 1.125rem;
  }
}

/* หน้า register.php — ปุ่มหลักสีทองให้สอดคล้องแถบขั้นตอน */
.app-php-body.app-register-page .app-card .btn-primary {
  background-color: #c9a227;
  border-color: #b8921f;
  color: #fff;
  font-weight: 700;
}

.app-php-body.app-register-page .app-card .btn-primary:hover:not(:disabled) {
  background-color: #d4ae32;
  border-color: #a67f18;
  color: #fff;
}

.app-php-body.app-register-page .app-card .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.45);
  color: #fff;
}

.app-php-body.app-register-page .app-card .btn-primary:active:not(:disabled) {
  background-color: #b8921f;
  border-color: #9a7b1a;
  color: #fff;
}

.app-php-body.app-register-page .app-card .btn-primary:disabled {
  opacity: 0.55;
}

/* หัวข้อ wizard บนหน้า register — พื้นน้ำเงิน ไอคอนขาว (เช่นเดียวกับหน้าเปิดบัญชี) */
.app-php-body.app-register-page .register-wizard-hero .register-signup-hero__icon {
  background: linear-gradient(145deg, #1a2e4e 0%, #2a4570 55%, #1a2e4e 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(26, 46, 78, 0.28);
}

.app-php-body.app-register-page .register-wizard-hero .register-signup-hero__step {
  background: #c9a227;
  color: #1a1a1a;
  border-color: #fff;
}

.app-php-main .app-card {
  background: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 8px 28px rgba(26, 46, 78, 0.08);
  border: 1px solid rgba(26, 46, 78, 0.08);
}

/* หัวข้อหน้า admin / staff — แถบพื้นน้ำเงินเข้ม (ใช้คู่กับ Bootstrap) */
.cwie-admin-page-hero {
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #0f2744 0%, #1a3a5c 50%, #0c1f33 100%);
  color: #fff;
  padding: 1.25rem 1.35rem 1.15rem;
  box-shadow: 0 10px 36px rgba(15, 39, 68, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cwie-admin-page-hero__title {
  font-family: "Montserrat", "Prompt", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

.cwie-admin-page-hero__lead {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 52rem;
  line-height: 1.55;
}

.cwie-admin-page-hero .btn-light {
  color: #0f2744;
  font-weight: 600;
}

.cwie-admin-page-hero .btn-light:hover {
  color: #0a1a2e;
  background: #f8fafc;
}

/* หัวข้อเปิดบัญชี (ขั้นตอนที่ 1 — อีเมล / รหัสผ่าน) */
.app-php-main .register-signup-hero__visual {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-php-main .register-signup-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a2e4e 0%, #2a4570 55%, #1a2e4e 100%);
  color: #fff;
  font-size: 1.65rem;
  box-shadow: 0 8px 22px rgba(26, 46, 78, 0.28);
}

.app-php-main .register-signup-hero__step {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #c9a227;
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.app-php-main .register-signup-hero__title {
  color: #0a1f3c;
  font-size: clamp(1.4rem, 4.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.38;
}

/* Custom dropdown — รูปแบบการเข้าร่วมงาน (signup) */
.app-php-main .cwie-participation-dd-wrap .cwie-participation-dd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.125rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  text-align: left;
  border: 2px solid rgba(26, 46, 78, 0.16);
  border-radius: 0.75rem;
  background: linear-gradient(165deg, #fff 0%, #f6f8fc 45%, #eef2f8 100%);
  box-shadow: 0 2px 10px rgba(26, 46, 78, 0.07);
  color: #1a1f26;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.app-php-main .cwie-participation-dd-wrap .cwie-participation-dd__trigger:hover {
  border-color: rgba(26, 46, 78, 0.28);
  background: linear-gradient(165deg, #fff 0%, #fafbfd 50%, #f0f4fa 100%);
}

.app-php-main .cwie-participation-dd.is-open .cwie-participation-dd__trigger {
  border-color: #c9a227;
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.28), 0 4px 14px rgba(26, 46, 78, 0.1);
}

.app-php-main .cwie-participation-dd__trigger:focus {
  outline: 0;
}

.app-php-main .cwie-participation-dd__trigger:focus-visible {
  outline: 0.2rem solid rgba(26, 46, 78, 0.45);
  outline-offset: 2px;
}

.app-php-main .cwie-participation-dd__trigger-leading {
  flex-shrink: 0;
}

.app-php-main .cwie-participation-dd__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  font-size: 1.2rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-php-main .cwie-participation-dd__trigger-icon--placeholder {
  background: rgba(26, 46, 78, 0.08);
  color: #4a5f78;
}

.app-php-main .cwie-participation-dd__trigger-icon--offline {
  background: linear-gradient(145deg, rgba(26, 46, 78, 0.14) 0%, rgba(26, 46, 78, 0.22) 100%);
  color: #1a2e4e;
}

.app-php-main .cwie-participation-dd__trigger-icon--online {
  background: linear-gradient(145deg, rgba(13, 110, 253, 0.12) 0%, rgba(13, 110, 253, 0.2) 100%);
  color: #0a58ca;
}

.app-php-main .cwie-participation-dd__trigger-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.app-php-main .cwie-participation-dd__trigger-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: #1a1f26;
}

.app-php-main .cwie-participation-dd__trigger-sub {
  font-size: 0.82rem;
  line-height: 1.3;
  color: #5c6570;
  font-weight: 500;
}

.app-php-main .cwie-participation-dd__trigger-chevron {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: rgba(201, 162, 39, 0.18);
  color: #5c4810;
  font-size: 0.75rem;
  transition: transform 0.22s ease, background 0.15s ease;
}

.app-php-main .cwie-participation-dd.is-open .cwie-participation-dd__trigger-chevron {
  transform: rotate(180deg);
  background: rgba(201, 162, 39, 0.32);
}

.app-php-main .cwie-participation-dd__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  border-radius: 0.85rem;
  border: 2px solid rgba(26, 46, 78, 0.12);
  background: #fff;
  box-shadow: 0 12px 40px rgba(26, 46, 78, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.app-php-main .cwie-participation-dd__panel::before {
  content: "";
  display: block;
  height: 3px;
  margin: -0.4rem -0.4rem 0.35rem;
  background: linear-gradient(90deg, #c9a227 0%, #e4c04a 50%, #c9a227 100%);
}

.app-php-main .cwie-participation-dd__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.75rem;
  margin: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.app-php-main .cwie-participation-dd__option + .cwie-participation-dd__option {
  margin-top: 0.2rem;
}

.app-php-main .cwie-participation-dd__option:hover {
  background: rgba(26, 46, 78, 0.05);
}

.app-php-main .cwie-participation-dd__option:focus {
  outline: 0;
}

.app-php-main .cwie-participation-dd__option:focus-visible {
  outline: 0.15rem solid rgba(26, 46, 78, 0.45);
  outline-offset: 0;
  background: rgba(26, 46, 78, 0.06);
}

.app-php-main .cwie-participation-dd__option.is-selected {
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14) 0%, rgba(201, 162, 39, 0.06) 100%);
  box-shadow: inset 3px 0 0 #c9a227;
}

.app-php-main .cwie-participation-dd__option-icon {
  flex-shrink: 0;
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  font-size: 1.25rem;
}

.app-php-main .cwie-participation-dd__option-icon--offline {
  background: rgba(26, 46, 78, 0.1);
  color: #1a2e4e;
}

.app-php-main .cwie-participation-dd__option-icon--online {
  background: rgba(13, 110, 253, 0.12);
  color: #0a58ca;
}

.app-php-main .cwie-participation-dd__option.is-selected .cwie-participation-dd__option-icon--offline {
  background: rgba(201, 162, 39, 0.28);
  color: #5c4810;
}

.app-php-main .cwie-participation-dd__option.is-selected .cwie-participation-dd__option-icon--online {
  background: rgba(13, 110, 253, 0.22);
  color: #052c65;
}

.app-php-main .cwie-participation-dd__option-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.app-php-main .cwie-participation-dd__option-title {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #1a1f26;
}

.app-php-main .cwie-participation-dd__option-sub {
  font-size: 0.88rem;
  line-height: 1.35;
  color: #5c6570;
}

.app-php-main .cwie-participation-dd__option-check {
  flex-shrink: 0;
  font-size: 1.15rem;
  color: rgba(201, 162, 39, 0.35);
  transition: color 0.15s ease, transform 0.15s ease;
}

.app-php-main .cwie-participation-dd__option.is-selected .cwie-participation-dd__option-check {
  color: #b8941f;
  transform: scale(1.05);
}

/* หัวข้อ wizard หลังล็อกอิน (ขั้นตอนที่ 2 — 3 ส่วน) */
.app-php-main .register-wizard-hero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.app-php-main .register-wizard-hero__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(201, 162, 39, 0.16);
  color: #7a6218;
  font-size: 0.95rem;
}

/* ฟอร์มลงทะเบียน ส่วนที่ 1: ป้าย + ช่องกรอก / dropdown บรรทัดเดียว */
.app-php-main .app-inline-field-group {
  --app-inline-field-min-h: 3.125rem;
  --app-inline-field-py: 0.6875rem;
  flex-wrap: nowrap;
  align-items: stretch;
}

.app-php-main .app-inline-field-group__label {
  flex: 0 1 auto;
  align-items: center;
  white-space: nowrap;
  color: #3d3d3d;
  font-weight: 500;
}

.app-php-main .app-inline-field-group > .input-group-text {
  display: flex;
  align-items: center;
  min-height: var(--app-inline-field-min-h);
}

.app-php-main .app-inline-field-group .form-select,
.app-php-main .app-inline-field-group .form-control {
  min-width: 0;
  flex: 1 1 auto;
  min-height: var(--app-inline-field-min-h);
  box-sizing: border-box;
  line-height: 1.5;
  padding-top: var(--app-inline-field-py);
  padding-bottom: var(--app-inline-field-py);
}

/* ประสบการณ์ CWIE + จำนวนปี + จำนวนเดือน — แถวเดียว */
.app-php-main .app-cwie-exp-inline {
  --app-inline-field-min-h: 3.125rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.app-php-main .app-cwie-exp-inline__banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0 0.75rem;
  min-height: var(--app-inline-field-min-h);
  border-radius: 0.5rem;
  background: linear-gradient(145deg, #1a2e4e 0%, #2a4570 55%, #1a2e4e 100%);
  color: #fff;
  font-weight: 600;
  font-size: clamp(0.75rem, 1.65vw, 0.95rem);
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(26, 46, 78, 0.15);
}

.app-php-main .app-cwie-exp-inline__banner .fa-clock {
  color: #fff;
  opacity: 0.95;
  flex-shrink: 0;
}

.app-php-main .app-cwie-exp-inline__field {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.app-php-main .app-cwie-exp-inline .app-inline-field-group .form-control {
  flex: 0 0 4.75rem;
  width: 4.75rem;
  max-width: 6rem;
  min-width: 3.25rem;
}

@media (max-width: 575.98px) {
  .app-php-main .app-cwie-exp-inline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
    margin-inline: -0.15rem;
    padding-inline: 0.15rem;
  }
}

.app-php-main .app-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.app-php-main .app-step {
  flex: 1;
  min-width: min(100%, 9.5rem);
  text-align: center;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: #e8e3db;
  color: #5c574e;
  font-size: clamp(0.92rem, 2.1vw, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
}

.app-php-main .app-step.app-step--active {
  background: #1a2e4e;
  color: #fff;
}

.app-php-main .app-step.app-step--done {
  background: #c9a227;
  color: #1a1a1a;
}

.app-php-main fieldset.app-fieldset {
  border: 1px solid #e5e0d8;
  border-radius: 0.65rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: #faf8f4;
}

.app-php-main fieldset.app-fieldset legend {
  float: none;
  width: auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2e4e;
  padding: 0 0.4rem;
}

/* ตัวเลือกรถรับ-ส่ง (ไม่ต้องการ / ต้องการ) */
.app-php-main .app-van-choice {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .app-php-main .app-van-choice {
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
  }
}

.app-php-main .app-van-choice__pill {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.app-php-main .app-van-choice__box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 1rem 1.15rem 0.65rem;
  min-height: 4.5rem;
  border: 2px solid rgba(26, 46, 78, 0.18);
  border-radius: 0.75rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.app-php-main .app-van-choice__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.app-php-main .app-van-choice__tap-hint {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.05rem;
  padding: 0.32rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a2e4e;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: 0 1px 3px rgba(26, 46, 78, 0.1);
}

.app-php-main .app-van-choice__tap-hint i {
  font-size: 0.95em;
  color: #b8941f;
}

.app-php-main .app-van-choice__pill input:checked + .app-van-choice__box .app-van-choice__tap-hint {
  border-color: rgba(26, 46, 78, 0.28);
  background: rgba(255, 253, 248, 0.98);
}

.app-php-main .app-van-choice__pill:hover .app-van-choice__box {
  border-color: rgba(26, 46, 78, 0.32);
  background: #f8fafc;
}

.app-php-main .app-van-choice__pill:focus-within .app-van-choice__box {
  outline: 0.15rem solid rgba(26, 46, 78, 0.4);
  outline-offset: 2px;
}

.app-php-main .app-van-choice__pill input:checked + .app-van-choice__box {
  border-color: #c9a227;
  background: rgba(201, 162, 39, 0.12);
  box-shadow: 0 0 0 0.12rem rgba(201, 162, 39, 0.35);
}

.app-php-main .app-van-choice__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.app-php-main .app-van-choice__icon--no {
  background: rgba(108, 117, 125, 0.16);
  color: #495057;
}

.app-php-main .app-van-choice__icon--yes {
  background: rgba(26, 46, 78, 0.12);
  color: #1a2e4e;
}

.app-php-main .app-van-choice__pill input:checked + .app-van-choice__box .app-van-choice__icon--yes {
  background: rgba(201, 162, 39, 0.28);
  color: #5c4810;
}

.app-php-main .app-van-choice__pill input:checked + .app-van-choice__box .app-van-choice__icon--no {
  background: rgba(26, 46, 78, 0.2);
  color: #142a45;
}

.app-php-main .app-van-choice__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.app-php-main .app-van-choice__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #1a1f26;
  line-height: 1.25;
}

@media (min-width: 576px) {
  .app-php-main .app-van-choice__title {
    font-size: 1.2rem;
  }
}

.app-php-main .app-van-choice__hint {
  font-size: 0.95rem;
  color: #5c574e;
  line-height: 1.35;
}

/* Modal แจ้งเตือนกรอกข้อมูลรถตู้ (register step 2) */
.app-php-main .app-van-booking-modal-wrap .app-van-booking-modal {
  border-radius: 0.85rem;
  overflow: hidden;
  border-top: 4px solid #c9a227;
}

.app-php-main .app-van-booking-modal__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: linear-gradient(145deg, #1a2e4e 0%, #2a4570 100%);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.app-php-main .app-van-booking-modal__message {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #1a1f26;
}

/* —— แถบเมนูหลังล็อกอิน (ผู้เข้าร่วม / เจ้าหน้าที่) —— */
.app-user-header {
  box-shadow: 0 1px 0 rgba(26, 46, 78, 0.06);
}

/* โครงสองคอลัมน์: rail = โปรไฟล์ / ช่องว่างเทียบเท่า, body = เมนู + เนื้อหา (ขอบซ้ายตรงกัน) */
.app-logged-shell {
  --app-logged-rail: minmax(11rem, 14.5rem);
  display: grid;
  grid-template-columns: var(--app-logged-rail) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
}

.app-logged-shell--header {
  align-items: center;
}

.app-logged-shell__rail {
  min-width: 0;
}

.app-logged-shell__body {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .app-logged-shell--header {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* โปรไฟล์ซ้าย (แทนโลโก้) */
.app-user-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #6c757d;
  color: #fff;
  font-size: 1.1rem;
}

.app-user-header__profile-email {
  font-size: 0.78rem;
  color: #5c6b7a;
  max-width: 11rem;
}

.app-user-header__role-label {
  color: #9a7b4f;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* เมนูหลังล็อกอิน — ห่อหลายบรรทัดได้ ไม่ซ่อนเป็นแถบเลื่อนแนวนอน */
.app-user-header__nav-wrap {
  overflow-x: visible;
  overflow-y: visible;
}

.app-user-header__nav .nav-item {
  flex-shrink: 0;
}

.app-user-header__nav--cta {
  gap: 0.4rem !important;
}

/* ผู้เข้าร่วม + แอดมิน/รีพอร์ตเตอร์ (ul.app-user-header__nav--cta): ปุ่มแบบ Get Started — น้ำเงิน, มุม 5px, แบน */
.app-user-header__nav--cta .btn {
  border-radius: 5px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-width: 1px;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.app-user-header__nav--cta .btn:hover {
  box-shadow: none;
}

.app-user-header__nav--cta .btn:active {
  transform: none;
}

/* หน้าปัจจุบัน — น้ำเงินเข้มกว่าปุ่มทั่วไป */
.app-user-header__nav--cta .btn-primary {
  background-color: #255a94;
  border-color: #1f4d80;
  color: #fff;
}

.app-user-header__nav--cta .btn-primary:hover,
.app-user-header__nav--cta .btn-primary:focus {
  background-color: #1c4878;
  border-color: #183d66;
  color: #fff;
}

/* รายการอื่น — น้ำเงินกลาง (โทนเดียวกับปุ่มตัวอย่าง Get Started) */
.app-user-header__nav--cta .btn-outline-secondary {
  color: #fff;
  background-color: #2b6cb0;
  border-color: #2b6cb0;
  font-weight: 600;
}

.app-user-header__nav--cta .btn-outline-secondary:hover,
.app-user-header__nav--cta .btn-outline-secondary:focus {
  color: #fff;
  background-color: #3182ce;
  border-color: #2b6cb0;
}

/* ออกจากระบบ — แยกจากเมนูหลัก แต่ยังมุม 5px */
.app-user-header__nav--cta .btn-outline-danger {
  color: #b91c1c;
  background-color: #fff;
  border-color: #f56565;
  font-weight: 600;
}

.app-user-header__nav--cta .btn-outline-danger:hover,
.app-user-header__nav--cta .btn-outline-danger:focus {
  color: #fff;
  background-color: #c53030;
  border-color: #9b2c2c;
}

/* สแกนผู้เข้างาน — ปุ่มสีเหลือง (โทนเดียวกับทองธีมงาน) */
.app-user-header__nav .app-user-header__nav-btn-scan {
  background-color: #f5cc33;
  border: 1px solid #e6b82e;
  color: #1a1a1a;
  font-weight: 700;
}

.app-user-header__nav .app-user-header__nav-btn-scan:hover,
.app-user-header__nav .app-user-header__nav-btn-scan:focus {
  background-color: #ffe066;
  border-color: #d4ae32;
  color: #111;
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.4);
}

.app-user-header__nav .app-user-header__nav-btn-scan[aria-current="page"] {
  background-color: #eabd23;
  border-color: #c9a227;
  color: #141414;
  box-shadow: inset 0 0 0 1px rgba(26, 46, 78, 0.12);
}

.app-user-header__online-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #28a745;
  margin-right: 0.35rem;
  vertical-align: 0.05em;
}

.app-user-header__link {
  color: #4a4035 !important;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .app-user-header__link {
    font-size: 0.88rem;
  }
}

.app-user-header__link:hover {
  background: rgba(26, 46, 78, 0.06);
  color: #1a2e4e !important;
}

.app-user-header__link--active {
  background: #e8e8e8 !important;
  color: #1a2e4e !important;
}

.app-user-header__link--logout {
  color: #8b1538 !important;
  font-weight: 600;
}

.app-user-header__link--logout:hover {
  background: rgba(139, 21, 56, 0.08) !important;
  color: #6d0f2b !important;
}

.app-php-body--logged-in .app-php-main {
  padding-top: 1.25rem;
}

/* เนื้อหาหลังล็อกอินเต็มความกว้าง container (เท่าแถบหัว) */
.app-php-body--logged-in .app-php-main .app-card {
  width: 100%;
  max-width: none;
}

/* —— participant/info.php —— */
.app-php-body.app-info-page .app-info-overview {
  background: linear-gradient(135deg, rgba(26, 46, 78, 0.05) 0%, rgba(201, 162, 39, 0.07) 100%);
  border: 1px solid rgba(26, 46, 78, 0.1) !important;
  border-radius: 0.85rem;
}

.app-php-body.app-info-page .app-info-reg-summary {
  border: 1px solid rgba(26, 46, 78, 0.1) !important;
  border-radius: 0.85rem;
  background: #fff;
}

.app-php-body.app-info-page .app-info-reg-summary__head {
  background: linear-gradient(135deg, rgba(26, 46, 78, 0.06) 0%, rgba(201, 162, 39, 0.1) 100%);
}

.app-php-body.app-info-page .app-info-reg-summary__cta {
  background: rgba(26, 46, 78, 0.03);
  border-bottom: 1px solid rgba(26, 46, 78, 0.08);
}

.app-php-body.app-info-page .app-info-edit-btn {
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-block: 0.95rem;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  box-shadow: 0 6px 20px rgba(26, 46, 78, 0.18);
}

.app-php-body.app-info-page .app-info-edit-btn:hover {
  box-shadow: 0 8px 26px rgba(26, 46, 78, 0.22);
}

.app-php-body.app-info-page .app-info-reg-summary__dl dt {
  color: #6c757d;
  font-weight: 600;
  font-size: 0.88rem;
}

.app-php-body.app-info-page .app-info-reg-summary__dl dd {
  font-weight: 600;
  color: #212529;
}

.app-php-body.app-info-page .app-info-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.app-php-body.app-info-page .app-info-tile__grow {
  min-width: 0;
  flex: 1;
}

.app-php-body.app-info-page .app-info-tile__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 46, 78, 0.09);
  color: #1a2e4e;
  font-size: 1.05rem;
}

.app-php-body.app-info-page .app-info-tile__icon--ok {
  background: rgba(25, 135, 84, 0.14);
  color: #0f5132;
}

.app-php-body.app-info-page .app-info-tile__icon--pending {
  background: rgba(255, 193, 7, 0.22);
  color: #664d03;
}

.app-php-body.app-info-page .app-info-tile__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  margin-bottom: 0.3rem;
}

.app-php-body.app-info-page .app-info-tile__value {
  font-size: 0.98rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.45;
}

.app-php-body.app-info-page .app-info-pill {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
}

.app-php-body.app-info-page .app-info-pill--success {
  background: #d1e7dd;
  color: #0a3622;
  border: 1px solid rgba(25, 135, 84, 0.45);
}

.app-php-body.app-info-page .app-info-pill--warning {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid rgba(255, 193, 7, 0.85);
}

.app-php-body.app-info-page .app-info-pill--inline {
  font-size: 0.92em;
  font-weight: 600;
}

.app-php-body.app-info-page .app-info-transport {
  border-radius: 0.85rem;
  border: 1px solid rgba(26, 46, 78, 0.1) !important;
  overflow: hidden;
}

.app-php-body.app-info-page .app-info-transport__header {
  background: rgba(26, 46, 78, 0.04) !important;
}

.app-php-body.app-info-page .app-info-transport__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(201, 162, 39, 0.22);
  color: #5c4810;
  font-size: 0.95rem;
}

.app-php-body.app-info-page .app-info-transport__head-title {
  color: #1a2e4e;
  font-size: 1.02rem;
}

.app-php-body.app-info-page .app-info-transport__badge {
  background: rgba(26, 46, 78, 0.1);
  color: #1a2e4e;
  font-weight: 600;
  font-size: 0.78rem;
}

.app-php-body.app-info-page .app-info-transport__badge--muted {
  background: #e9ecef;
  color: #495057;
}

.app-php-body.app-info-page .app-info-transport__item {
  border-color: rgba(26, 46, 78, 0.08);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.app-php-body.app-info-page .app-info-transport__bullet {
  color: #c9a227;
  margin-top: 0.12rem;
  font-size: 0.85rem;
}

.app-php-body.app-info-page .app-info-transport__text {
  color: #3d3935;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* คำแนะนำด้านบนหน้าบัตร */
.participant-badge-page__head {
  width: 100%;
}

.participant-badge-page__title {
  line-height: 1.3;
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  font-weight: 800;
}

.participant-badge-page__status {
  flex-shrink: 0;
  max-width: 100%;
}

/* ป้ายสถานะข้างหัวข้อ — ใหญ่กว่า .participant-badge__status บนบัตร */
.participant-badge-page__head .participant-badge__status {
  font-size: clamp(1rem, 3.1vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
}

.participant-badge-page__status.participant-badge__status--confirmed .participant-badge__status-time {
  font-size: 0.92em;
  font-weight: 600;
}

.participant-badge-page-intro {
  font-size: 16px;
  line-height: 1.5;
  max-width: 40rem;
  margin-inline: auto;
}

.participant-badge-page-intro__emphasis {
  color: #b42318;
  font-weight: 700;
}

/* —— บัตรผู้เข้าร่วม (หน้าจอ + ดาวน์โหลด PNG) —— */
.participant-badge {
  max-width: 28rem;
  margin-inline: auto;
  background: #fffbf4;
  border: 1px solid rgba(26, 46, 78, 0.08);
  border-radius: 0.85rem;
  box-shadow: 0 8px 28px rgba(26, 46, 78, 0.08);
  padding: 1.35rem 1.5rem 1.5rem;
  box-sizing: border-box;
}

.participant-badge__inner {
  min-width: 0;
}

.participant-badge__head {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.participant-badge__banner {
  display: block;
  margin-inline: auto;
  width: 100%;
  max-width: 18rem;
  height: auto;
  max-height: 5.5rem;
  object-fit: contain;
  object-position: center center;
}

.participant-badge__title {
  color: #3d4f2f;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0.45rem 0 0.85rem;
  letter-spacing: 0.02em;
  text-align: center;
  width: 100%;
}

.participant-badge__gold {
  position: relative;
  background: #a68952;
  background-image: none;
  color: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: none;
}

.participant-badge--no-perks .participant-badge__gold {
  background: #1a2e4e;
  background-image: none;
}

.participant-badge__tier {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 0 0 0.75rem;
}

.participant-badge__tier-pill {
  display: inline-block;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.14rem 0.95rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* html2canvas export: Thai baseline tends to sit low → bias padding to lift text */
.is-badge-export .participant-badge__tier-pill {
  line-height: 1.2;
  padding: 0 0.95rem 0.55rem;
}

.participant-badge__tier-pill--extra {
  background: #fff3cd;
  color: #664d03;
  border-color: rgba(255, 193, 7, 0.95);
}

.participant-badge__tier-pill--quota {
  background: #d1e7dd;
  color: #0a3622;
  border-color: #198754;
}

.participant-badge__dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.65rem;
  margin: 0;
}

.participant-badge__dl dt {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.participant-badge__dl dt::after {
  content: ' :';
}

.participant-badge__dl dd {
  margin: 0;
  word-break: break-word;
}

.participant-badge__status {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
}

.participant-badge__status-time {
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
}

.participant-badge__status--pending {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid rgba(255, 193, 7, 0.95);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.participant-badge__status--confirmed {
  background: #d1e7dd;
  color: #0a3622;
  border: 1px solid #198754;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.participant-badge__van-heading {
  position: relative;
  z-index: 1;
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 0;
}

.participant-badge__trip {
  position: relative;
  z-index: 1;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.98;
}

.participant-badge__trip:last-of-type {
  margin-bottom: 0;
}

.participant-badge__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26, 46, 78, 0.1);
}

.participant-badge__qr-wrap {
  flex-shrink: 0;
}

.participant-badge__qr-host {
  width: 168px;
  height: 168px;
  background: #fff;
  border-radius: 0.35rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.participant-badge__qr-host table {
  margin: 0 !important;
  border-collapse: collapse;
}

.participant-badge__qr-host img {
  display: block;
  margin: 0 auto;
}

.participant-badge__qr-note {
  flex: 1;
  min-width: 8rem;
  color: #3d4f2f;
  font-size: 0.8rem;
  line-height: 1.4;
}

.participant-badge__qr-note ul {
  padding-left: 1.15rem;
  margin: 0.4rem 0 0;
}

.participant-badge__qr-note li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.22rem 0;
}

.participant-badge__qr-note li > span {
  flex: 1;
  min-width: 0;
}

.participant-badge__li-icon {
  flex: 0 0 auto;
  margin-top: 0.08rem;
  color: #1a2e4e;
  opacity: 0.95;
}

.participant-badge--no-perks .participant-badge__li-icon {
  color: #c9a227;
}

.participant-badge__qr-missing {
  flex: 1;
  color: #5c574e !important;
}

/* —— หน้า participant/booth_visit.php —— */
.app-php-body.app-booth-page .app-booth-hero {
  display: flex;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(26, 46, 78, 0.1);
}

.app-php-body.app-booth-page .app-booth-hero__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.85rem;
  background: linear-gradient(145deg, #1a2e4e 0%, #2a4570 55%, #1a2e4e 100%);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 6px 18px rgba(26, 46, 78, 0.22);
}

.app-php-body.app-booth-page .app-booth-hero__title {
  color: #1a2e4e;
  font-weight: 800;
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.app-php-body.app-booth-page .app-booth-hero__lead {
  color: #5c574e;
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.app-php-body.app-booth-page .app-booth-stat-card__icon {
  color: #b8d4ff;
}

.app-php-body.app-booth-page .card.app-booth-stat-card {
  position: relative;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 4px 24px rgba(8, 22, 48, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  background: linear-gradient(
    155deg,
    #0c1f3d 0%,
    #15325c 28%,
    #1e4680 52%,
    #163a6e 78%,
    #0f2848 100%
  );
  background-color: #15325c;
}

.app-php-body.app-booth-page .card.app-booth-stat-card::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%);
  opacity: 0.55;
}

.app-php-body.app-booth-page .card.app-booth-stat-card .card-body {
  position: relative;
  z-index: 1;
}

.app-php-body.app-booth-page .app-booth-stat-card .text-dark,
.app-php-body.app-booth-page .app-booth-stat-card .fw-semibold.text-dark {
  color: #f0f5ff !important;
}

.app-php-body.app-booth-page .app-booth-stat-card .text-muted {
  color: rgba(224, 234, 255, 0.78) !important;
}

.app-php-body.app-booth-page .app-booth-stat-card .text-muted strong {
  color: rgba(255, 255, 255, 0.96) !important;
}

.app-php-body.app-booth-page .app-booth-stat-card .text-success {
  color: #8ef5c4 !important;
}

.app-php-body.app-booth-page .app-booth-stat-card .badge.bg-light.text-dark {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #f4f8ff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
}

.app-php-body.app-booth-page .app-booth-stat-card .badge.bg-success {
  box-shadow: 0 2px 10px rgba(25, 135, 84, 0.45);
}

.app-php-body.app-booth-page .app-booth-stat-card .progress {
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.app-php-body.app-booth-page .app-booth-stat-card .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #5ab0ff 0%, #7ec8ff 38%, #e8c76a 88%, #f0d78a 100%);
  box-shadow: 0 0 12px rgba(122, 200, 255, 0.35);
}

.app-php-body.app-booth-page .app-booth-stat-card .progress-bar.app-booth-progress-bar--complete {
  background: linear-gradient(90deg, #1fa366 0%, #2fd88a 100%);
  box-shadow: 0 0 14px rgba(47, 216, 138, 0.4);
}

.app-php-body.app-booth-page .app-booth-journey-card {
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid rgba(26, 46, 78, 0.1);
}

.app-php-body.app-booth-page .app-booth-journey__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}

.app-php-body.app-booth-page .app-booth-journey__icon--done {
  background: linear-gradient(145deg, #1b8f54, #2db86f);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 14px rgba(25, 135, 84, 0.35);
}

.app-php-body.app-booth-page .app-booth-journey__icon--pending {
  background: linear-gradient(145deg, #9d4f45, #c06052);
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(120, 50, 40, 0.22);
}

/* ขั้นปัจจุบัน: ป้ายคำพูด + มาร์กเกอร์วงเขียว–วงขาว–กากบาทเขียว */
.app-php-body.app-booth-page .app-booth-journey__here-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 11rem;
}

.app-php-body.app-booth-page .app-booth-journey__here-bubble {
  position: relative;
  z-index: 1;
  margin-bottom: 0.55rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  background: #43a047;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}

.app-php-body.app-booth-page .app-booth-journey__here-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.38rem;
  transform: translateX(-50%);
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.42rem solid #43a047;
}

.app-php-body.app-booth-page .app-booth-journey__here-marker {
  position: relative;
  z-index: 0;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #43a047;
  padding: 0.32rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  animation: app-booth-here-glow 2.4s ease-in-out infinite;
}

.app-php-body.app-booth-page .app-booth-journey__here-marker-inner {
  flex: 1;
  min-height: 0;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.app-php-body.app-booth-page .app-booth-journey__here-marker-inner .fa-xmark {
  color: #2e7d32;
  font-size: 0.95rem;
  line-height: 1;
}

@keyframes app-booth-here-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.35),
      0 0 14px 4px rgba(67, 160, 71, 0.38);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45),
      0 0 22px 7px rgba(67, 160, 71, 0.52);
  }
}

.app-php-body.app-booth-page .app-booth-journey__label {
  background: #1d2a5b;
  border-radius: 0.45rem;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(29, 42, 91, 0.22);
}

.app-php-body.app-booth-page .app-booth-journey__hint {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 0.2rem;
  line-height: 1.3;
}

.app-php-body.app-booth-page .app-booth-journey__arrow {
  flex: 0 0 auto;
  min-width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-php-body.app-booth-page .app-booth-journey__arrow--vertical {
  min-width: 0;
  padding-block: 0.25rem;
}

.app-php-body.app-booth-page .app-booth-journey__arrow-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  transition:
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

@media (min-width: 768px) {
  .app-php-body.app-booth-page .app-booth-journey__arrow-ctrl {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
  }
}

.app-php-body.app-booth-page .app-booth-journey__arrow-ctrl--ready {
  color: #0f6e42;
  background: linear-gradient(165deg, rgba(25, 135, 84, 0.22) 0%, rgba(25, 135, 84, 0.08) 100%);
  border: 2px solid rgba(25, 135, 84, 0.42);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.65) inset,
    0 4px 14px rgba(25, 135, 84, 0.2);
}

.app-php-body.app-booth-page .app-booth-journey__arrow-ctrl--muted {
  color: #7d8fa3;
  background: linear-gradient(165deg, rgba(148, 163, 184, 0.28) 0%, rgba(148, 163, 184, 0.1) 100%);
  border: 2px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.app-php-body.app-booth-page .app-booth-section-title {
  color: #1a2e4e;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.app-php-body.app-booth-page .app-booth-section-title .fa-solid {
  color: #c9a227;
  font-size: 0.95rem;
}

.app-php-body.app-booth-page .app-booth-table-wrap {
  border-radius: 0.65rem;
  border: 1px solid rgba(26, 46, 78, 0.1);
  overflow: hidden;
  background: #fff;
}

.app-php-body.app-booth-page .app-booth-table-wrap .table {
  margin-bottom: 0;
}

.app-php-body.app-booth-page .app-booth-table-wrap thead th {
  background: rgba(26, 46, 78, 0.06);
  color: #1a2e4e;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom-color: rgba(26, 46, 78, 0.12);
  white-space: nowrap;
}

.app-php-body.app-booth-page .app-booth-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.app-php-body.app-booth-page .app-booth-empty {
  text-align: center;
  padding: 2rem 1.25rem;
  border: 2px dashed rgba(26, 46, 78, 0.18);
  border-radius: 0.75rem;
  background: rgba(26, 46, 78, 0.03);
  color: #5c574e;
}

.app-php-body.app-booth-page .app-booth-empty__icon {
  font-size: 2.25rem;
  color: rgba(26, 46, 78, 0.35);
  margin-bottom: 0.75rem;
}

.app-php-body.app-booth-page .app-booth-booth-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(26, 46, 78, 0.12);
  background: linear-gradient(180deg, #fff 0%, rgba(26, 46, 78, 0.03) 100%);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.app-php-body.app-booth-page .app-booth-booth-card__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.app-php-body.app-booth-page .app-booth-booth-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2e4e;
  line-height: 1.35;
  margin: 0;
}

.app-php-body.app-booth-page .app-booth-mini-stat {
  border-radius: 0.65rem;
  border: 1px solid rgba(26, 46, 78, 0.1);
  padding: 0.85rem 1rem;
  height: 100%;
  background: #fff;
}

.app-php-body.app-booth-page .app-booth-mini-stat__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a2e4e;
  line-height: 1.2;
}

.app-php-body.app-booth-page .app-booth-mini-stat__label {
  font-size: 0.82rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.app-php-body.app-booth-page .app-booth-actions .btn {
  font-weight: 600;
}

.app-php-body.app-booth-page .app-booth-actions .btn-primary {
  background-color: #c9a227;
  border-color: #b8921f;
  color: #fff;
}

.app-php-body.app-booth-page .app-booth-actions .btn-primary:hover {
  background-color: #d4ae32;
  border-color: #a67f18;
  color: #fff;
}

.app-php-body.app-booth-page .app-booth-actions .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.45);
  color: #fff;
}

.app-php-body.app-booth-page .app-booth-survey-cta-wrap {
  display: block;
}

/* ปุ่มตอบแบบประเมินเมื่อยังไม่ครบบูธ — พื้นเทาชัดว่าใช้งานไม่ได้ */
.app-php-body.app-booth-page .app-booth-survey-cta--locked {
  background-color: #868e96 !important;
  background-image: none !important;
  border-color: #6c757d !important;
  color: rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* —— admin/survey_design.php —— */
.app-php-body.survey-design-body .survey-design-page {
  --sd-navy: #1a2e4e;
  --sd-gold: #c9a227;
  --sd-radius: 1rem;
}

.app-php-body.survey-design-body .survey-design-title {
  color: var(--sd-navy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-php-body.survey-design-body .survey-design-lead {
  max-width: 52rem;
  line-height: 1.55;
}

.app-php-body.survey-design-body .survey-design-alert {
  margin-bottom: 1.25rem;
}

.app-php-body.survey-design-body .survey-design-section-head {
  background: linear-gradient(120deg, rgba(26, 46, 78, 0.07) 0%, rgba(201, 162, 39, 0.14) 55%, rgba(26, 46, 78, 0.05) 100%);
}

.app-php-body.survey-design-body .survey-design-section-icon {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, var(--sd-navy), #2a4570);
  box-shadow: 0 2px 8px rgba(26, 46, 78, 0.2);
}

.app-php-body.survey-design-body .survey-design-section-icon--list {
  font-size: 0.95rem;
  font-weight: 700;
}

.app-php-body.survey-design-body .survey-design-add-card {
  border-radius: var(--sd-radius) !important;
}

.app-php-body.survey-design-body .survey-design-list-head {
  padding-top: 0.25rem;
}

.app-php-body.survey-design-body .survey-design-count-pill {
  background: rgba(26, 46, 78, 0.08) !important;
  color: var(--sd-navy) !important;
  border: 1px solid rgba(26, 46, 78, 0.12);
}

.app-php-body.survey-design-body .survey-design-empty {
  border-color: rgba(26, 46, 78, 0.1) !important;
}

.app-php-body.survey-design-body .survey-design-input,
.app-php-body.survey-design-body .survey-design-page .form-select.survey-design-input {
  border-radius: 0.5rem;
  border: 1px solid rgba(26, 46, 78, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-php-body.survey-design-body .survey-design-input:focus,
.app-php-body.survey-design-body .survey-design-page .form-select.survey-design-input:focus {
  border-color: var(--sd-navy);
  box-shadow: 0 0 0 0.2rem rgba(26, 46, 78, 0.12);
}

.app-php-body.survey-design-body .survey-design-q-stack {
  gap: 1.35rem !important;
}

.app-php-body.survey-design-body .survey-design-q-card {
  border-radius: var(--sd-radius) !important;
  background: #fff;
  box-shadow: 0 6px 32px rgba(26, 46, 78, 0.08) !important;
  border: 1px solid rgba(26, 46, 78, 0.08) !important;
}

.app-php-body.survey-design-body .survey-design-q-toolbar {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid rgba(26, 46, 78, 0.08) !important;
}

.app-php-body.survey-design-body .survey-design-q-num {
  background: linear-gradient(135deg, var(--sd-navy), #2a4570);
  color: #fff !important;
  font-weight: 700;
  border: none;
}

/* ป้ายประเภทคำถาม + มีตัวเลือกอื่น ๆ — ตัวอักษรน้ำเงินเข้มอ่านชัดบนพื้นแถบเครื่องมือ */
.app-php-body.survey-design-body .survey-design-q-toolbar .badge.text-bg-primary,
.app-php-body.survey-design-body .survey-design-q-toolbar .badge.text-bg-info,
.app-php-body.survey-design-body .survey-design-q-toolbar .badge.text-bg-secondary {
  background-color: #e2e8f4 !important;
  background-image: none !important;
  color: #0c1d38 !important;
  border: 1px solid rgba(26, 46, 78, 0.32) !important;
  font-weight: 600;
}

.app-php-body.survey-design-body .survey-design-q-body {
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
}

.app-php-body.survey-design-body .survey-design-field-label {
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  opacity: 0.92;
}

.app-php-body.survey-design-body .survey-design-q-prompt-panel {
  background: #fff;
  border: 1px solid rgba(26, 46, 78, 0.14);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.app-php-body.survey-design-body .survey-design-q-prompt-input {
  color: #212529 !important;
  background-color: #fff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 0.5rem;
}

.app-php-body.survey-design-body .survey-design-q-prompt-input:focus {
  color: #212529 !important;
  background-color: #fff !important;
  border-color: var(--sd-navy) !important;
  box-shadow: 0 0 0 0.2rem rgba(26, 46, 78, 0.12);
}

.app-php-body.survey-design-body .survey-design-q-type-select {
  color: #212529 !important;
  background-color: #fff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 0.5rem;
}

.app-php-body.survey-design-body .survey-design-subhead {
  border-color: rgba(26, 46, 78, 0.1) !important;
}

.app-php-body.survey-design-body .survey-design-opt-item {
  border: 1px solid rgba(26, 46, 78, 0.1) !important;
  border-radius: 0.75rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.app-php-body.survey-design-body .survey-design-opt-item:hover {
  border-color: rgba(26, 46, 78, 0.18) !important;
  box-shadow: 0 8px 28px rgba(26, 46, 78, 0.1) !important;
}

.app-php-body.survey-design-body .survey-design-add-opt {
  border: 2px dashed rgba(26, 46, 78, 0.2) !important;
  background: linear-gradient(165deg, #fff 0%, rgba(248, 250, 252, 0.95) 100%);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.app-php-body.survey-design-body .survey-design-add-opt:focus-within {
  border-color: rgba(201, 162, 39, 0.55) !important;
  background: #fff;
}

.app-php-body.survey-design-body .survey-design-q-footer {
  background: #fff !important;
  border-top: 1px solid rgba(26, 46, 78, 0.08) !important;
  margin-top: 0;
}

.app-php-body.survey-design-body .survey-design-page .btn-primary {
  background: linear-gradient(135deg, var(--sd-navy), #243d64);
  border: none;
  color: #fff;
}

.app-php-body.survey-design-body .survey-design-page .btn-primary:hover {
  background: linear-gradient(135deg, #243d64, #2d4a78);
  color: #fff;
}

.app-php-body.survey-design-body .survey-design-page .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 46, 78, 0.28);
  color: #fff;
}

.app-php-body.survey-design-body .survey-design-add-card .btn-primary {
  background: linear-gradient(135deg, var(--sd-gold), #b8921f);
  color: #1a1a1a;
}

.app-php-body.survey-design-body .survey-design-add-card .btn-primary:hover {
  background: linear-gradient(135deg, #d4ae32, #c9a227);
  color: #1a1a1a;
}

.app-php-body.survey-design-body .survey-design-add-card .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.45);
  color: #1a1a1a;
}

/* —— participant/survey.php —— */
.app-php-body.survey-participant-page .survey-participant-survey {
  border-radius: 1rem;
}

.app-php-body.survey-participant-page .survey-participant-hero {
  background: linear-gradient(125deg, #0a1628 0%, #132a4a 38%, #1a3d6b 72%, #0f2847 100%);
  position: relative;
  overflow: hidden;
}

.app-php-body.survey-participant-page .survey-participant-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 100% 0%, rgba(201, 162, 39, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 75% 55% at 0% 100%, rgba(255, 255, 255, 0.07) 0%, transparent 48%);
  pointer-events: none;
}

.app-php-body.survey-participant-page .survey-participant-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.app-php-body.survey-participant-page .survey-participant-hero__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.app-php-body.survey-participant-page .survey-participant-hero__subtitle {
  font-size: clamp(0.95rem, 2.4vw, 1.12rem);
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.93);
}

.app-php-body.survey-participant-page .survey-participant-survey__body {
  background: linear-gradient(180deg, #fafbfc 0%, #f0f3f7 100%);
}

.app-php-body.survey-participant-page .survey-participant-notice {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 45%, #bbf7d0 100%) !important;
  border: 1px solid rgba(5, 150, 105, 0.38) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 4px 22px rgba(5, 150, 105, 0.14) !important;
}

.app-php-body.survey-participant-page .survey-participant-notice__lead {
  color: #064e3b;
  font-size: 1.06rem;
  line-height: 1.5;
}

.app-php-body.survey-participant-page .survey-participant-notice__hint {
  color: #047857;
}

.app-php-body.survey-participant-page .survey-participant-btn-primary {
  background: linear-gradient(135deg, #1a2e4e, #243d64);
  border: none;
  color: #fff;
}

.app-php-body.survey-participant-page .survey-participant-btn-primary:hover {
  background: linear-gradient(135deg, #243d64, #2d4a78);
  color: #fff;
}

.app-php-body.survey-participant-page .survey-participant-btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 46, 78, 0.3);
  color: #fff;
}

.app-php-body.survey-participant-page .survey-participant-section-title {
  color: #fff;
  background: linear-gradient(135deg, #6b4f2a 0%, #4a3421 55%, #3b2a1a 100%);
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(75, 52, 33, 0.18);
}

.app-php-body.survey-participant-page .survey-participant-form fieldset {
  background: #fff;
  border: 1px solid rgba(26, 46, 78, 0.1) !important;
  border-radius: 0.85rem;
  padding: 1rem 1.15rem 1.2rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 2px 14px rgba(26, 46, 78, 0.06);
}

.app-php-body.survey-participant-page .survey-participant-form fieldset legend {
  float: none;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  box-sizing: border-box;
  font-size: clamp(1.05rem, 2.35vw, 1.22rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0c1f3d;
  background: linear-gradient(120deg, #dfe8f6 0%, #eef3fb 45%, #e4ebf8 100%);
  border: 1px solid rgba(26, 46, 78, 0.14);
  border-radius: 0.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}