/* E-Payment 2026 — minimal bridge between Bootstrap defaults and theme expectations.
   Loaded by Angular app via theme-loader.ts AFTER style.css.
   Keep this file slim — let theme/css/style.css be the source of truth for component styling.
*/

html,
body {
  min-height: 100%;
}

body {
  background: linear-gradient(105deg, #f4f4f4 0%, #e1f4fa 103.25%);
  color: #1d2223;
  font-family: "Sarabun", "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  body {
    font-size: 16px;
  }
}

.page {
  min-height: 100vh;
  background: transparent;
}

/* Custom utility — used by Angular templates that need a non-card gradient background */
.bg-gradient2 {
  background: linear-gradient(105deg, #f4f4f4 0%, #e1f4fa 103.25%) !important;
}

/* ── Legacy .stepwizard stepper (sender-report + ewht list-detail) →
   เลียน .multi-step-bar ของ theme เป๊ะ: วงกลม+ชื่ออยู่บรรทัดเดียวกัน,
   แถบ progress 4px อยู่ใต้ล่างสุดของแต่ละ step (ฟ้า=ถึงแล้ว เทา=ยังไม่ถึง)
   markup BS3 เดิม (col-xs-3 ใช้ไม่ได้ใน BS5) จึงคุม layout ด้วย flex ที่นี่ */
.stepwizard {
  width: 100%;
}
.stepwizard-row {
  display: flex;
  position: relative;
}
/* step = เทียบ li ของ multi-step-bar: วงกลม + ชื่อ เรียงแนวนอนกลางช่อง */
.stepwizard-step {
  flex: 1 1 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem 1rem 0;
  text-align: center;
}
/* ซ่อนแถวบนวงกลมเดิม (<small>&nbsp;</small> / ไอคอนนิ้ว fa-hand-o-down) */
.stepwizard-step > p:first-child {
  display: none;
}
/* วงกลมเลขขั้นตอน — ขนาด/ระยะตาม multi-step-bar li:before */
.stepwizard-step .btn-circle {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px 5px 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  line-height: 1;
  font-weight: 600;
  font-size: 16px;
  background: #e6eef0;
  color: #5a6163;
}
/* step ที่ผ่านแล้ว = ฟ้า + เครื่องหมายถูก (ซ่อนเลข) เหมือน multi-step-bar li.active */
.stepwizard-step .btn-complate.btn-circle {
  background: #0a96cd;
  color: #fff;
  font-size: 0;
}
.stepwizard-step .btn-complate.btn-circle::before {
  content: "\f00c";
  font-family: "FontAwesome";
  font-size: 16px;
  font-weight: normal;
}
/* step ปัจจุบัน (สถานะ fail/รอ ของระบบ) = ฟ้า + เลข เหมือน li.active.current ของ theme */
.stepwizard-step .btn-danger.btn-circle,
.stepwizard-step .btn-warning.btn-circle {
  background: #0a96cd;
  color: #fff;
}
/* ยังไม่ถึง = เทา + เลข */
.stepwizard-step .btn-secondary.btn-circle {
  background: #e6eef0;
  color: #5a6163;
}
/* ชื่อขั้นตอน — ข้างวงกลม ขนาดเท่า body, step ที่ถึงแล้วเป็นฟ้า */
.stepwizard-step p {
  margin: 0;
}
.stepwizard-step p small {
  font-size: 18px;
  color: #1d2223;
}
.stepwizard-step:has(.btn-complate) p small,
.stepwizard-step:has(.btn-danger) p small,
.stepwizard-step:has(.btn-warning) p small {
  color: #0a96cd;
}
/* แถบ progress 4px ใต้ล่างสุดของแต่ละ step (เหมือน multi-step-bar li:after)
   ฟ้า = step ที่ถึงแล้ว (ผ่าน/ปัจจุบัน), เทา = ยังไม่ถึง */
.stepwizard-step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #e6eef0;
}
.stepwizard-step:has(.btn-complate)::after,
.stepwizard-step:has(.btn-danger)::after,
.stepwizard-step:has(.btn-warning)::after {
  background: #0a96cd;
}