/* ------------------------------------------------------------------
   ระบบสมาชิก SPENT — ต่อยอดจาก css/custom.css ของหน้าตรวจสอบสถานะเดิม
   สีแบรนด์ #1E9FB9 / hover #00849e  ฟอนต์ Prompt + Bai Jamjuree
-------------------------------------------------------------------*/
:root {
  --spm-primary: #1E9FB9;
  --spm-primary-dark: #00849e;
  --spm-tint: #1E9FB91A;
  --spm-ink: #253746;
  --spm-muted: #6b7c8a;
  --spm-line: #dfe6ea;
  --spm-bg: #f4f7f9;
  --spm-danger: #c0392b;
  --spm-warn: #8a6d1f;
}

body {
  font-family: "Bai Jamjuree", "Prompt", sans-serif;
  color: var(--spm-ink);
  background: var(--spm-bg);
  margin: 0;
}

h1, h2, h3, h4, .spm-title { font-family: "Prompt", sans-serif; font-weight: 600; }

/* ---------- Layout ---------- */
/* เว้นระยะใต้ header ให้เนื้อหาไม่ติดกับแถบเมนู */
.spm-main { padding: 2.25rem 0 3rem; }
.spm-card {
  background: #fff; border: 1px solid var(--spm-line); border-radius: 10px;
  padding: 1.75rem; box-shadow: 0 1px 3px rgba(37,55,70,.06);
}
.spm-card--narrow { max-width: 34rem; margin: 0 auto; }
.spm-card + .spm-card { margin-top: 1.25rem; }
.spm-title { font-size: 1.4rem; margin: 0 0 .35rem; }
/* หัวข้อย่อยในการ์ด — ต้องเว้นใต้หัวข้อเอง เพราะไม่มีคำโปรยคั่นเหมือนการ์ดแรก
   ต้องอยู่หลัง .spm-title เพราะ specificity เท่ากัน */
.spm-title--section { font-size: 1.15rem; margin: 0 0 1.35rem; }
.spm-lead { color: var(--spm-muted); margin-bottom: 1.5rem; }

/* ---------- ฟอร์ม ---------- */
.spm-form label { font-family: "Bai Jamjuree", sans-serif; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.spm-form .form-control {
  border: 1px solid var(--spm-line); border-radius: 6px; padding: .55rem .75rem;
  font-family: inherit; font-size: .95rem;
}
.spm-form .form-control:focus {
  border-color: var(--spm-primary); box-shadow: 0 0 0 3px var(--spm-tint); outline: none;
}
.spm-form textarea.form-control { min-height: 5.5rem; }
.spm-form .is-invalid { border-color: var(--spm-danger); }
.spm-field-error { color: var(--spm-danger); font-size: .82rem; margin-top: .25rem; }
.spm-hint { color: var(--spm-muted); font-size: .82rem; margin-top: .25rem; }
.spm-subhead {
  font-size: 1rem; font-weight: 600; color: var(--spm-ink);
  margin: .75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--spm-line);
}
.spm-required { color: var(--spm-danger); margin-left: .15rem; }

/* ---------- สถานะการยืนยันข้อมูล ---------- */
.spm-status { line-height: 1.7; }
.spm-status-ok {
  display: inline-block; margin: 0 0 1.25rem; padding: .3rem .8rem; border-radius: 999px;
  background: #e7f6ef; color: #1c6b45; font-size: .88rem; font-weight: 600;
}
.spm-confirm-alert { margin: 1.5rem 0 0; }

.spm-btn {
  font-family: "Prompt", sans-serif; font-weight: 600;
  background: var(--spm-primary); border: 0; color: #fff;
  padding: .6rem 1.6rem; border-radius: 6px;
}
.spm-btn:hover { background: var(--spm-primary-dark); color: #fff; }
.spm-btn--ghost { background: transparent; color: var(--spm-muted); border: 1px solid var(--spm-line); }
.spm-btn--ghost:hover { background: #fff; color: var(--spm-ink); }
.spm-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.spm-actions [hidden] { display: none !important; }
/* แถบปุ่มยืนยันติดขอบล่างจอระหว่างเลื่อนฟอร์ม เมื่อยังต้องยืนยันหรือมีการแก้ที่ยังไม่บันทึก */
.spm-actions--confirm.is-sticky {
  position: sticky; bottom: 0; z-index: 5;
  margin: 1.5rem -1.75rem -1.75rem; padding: .9rem 1.75rem;
  border-radius: 0 0 10px 10px; background: #fff; border-top: 1px solid var(--spm-line);
  box-shadow: 0 -4px 12px rgba(37,55,70,.06);
}
.spm-confirm-alert + .spm-actions--confirm { margin-top: 1rem; }

/* ---------- ข้อมูลอ่านอย่างเดียว ---------- */
.spm-readonly { background: var(--spm-tint); border-radius: 8px; padding: 1.1rem 1.25rem; }
.spm-readonly dl { display: grid; grid-template-columns: 11rem 1fr; gap: .45rem 1rem; margin: 0; }
.spm-readonly dt { font-weight: 600; color: var(--spm-muted); font-size: .88rem; }
.spm-readonly dd { margin: 0; font-size: .95rem; word-break: break-word; }
.spm-readonly__note { color: var(--spm-muted); font-size: .82rem; margin: .9rem 0 0; }

/* ---------- แจ้งเตือน ---------- */
.spm-alert { border-radius: 8px; border: 1px solid transparent; padding: .8rem 1rem; margin-bottom: 1.25rem; }
.spm-alert--success { background: #e7f6ef; border-color: #b6e3cd; color: #1c6b45; }
.spm-alert--error   { background: #fdecea; border-color: #f5c2bd; color: var(--spm-danger); }
.spm-alert--info    { background: var(--spm-tint); border-color: #a9dbe6; color: #10627a; }
.spm-alert--warn    { background: #fdf5e0; border-color: #f0dda6; color: var(--spm-warn); }

/* ---------- Footer ---------- */
.spm-footer { background: #fff; border-top: 1px solid var(--spm-line); padding: 2rem 0 1.25rem; margin-top: 2rem; }
.spm-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; }
.spm-footer__title { font-size: .95rem; margin: 0 0 .5rem; }
.spm-footer__line { font-size: .86rem; color: var(--spm-muted); margin: 0 0 .3rem; }
.spm-footer__line a { color: var(--spm-primary-dark); }
.spm-footer__copy {
  font-size: .8rem; color: var(--spm-muted); margin: 1.5rem 0 0;
  padding-top: 1rem; border-top: 1px solid var(--spm-line);
}

/* ---------- แท็บเล็ต / มือถือ ---------- */
@media (max-width: 767px) {
  .spm-card { padding: 1.25rem; }
  .spm-readonly dl { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .spm-readonly dd { margin-bottom: .6rem; }
  .spm-footer__grid { grid-template-columns: 1fr; }
  .spm-actions .spm-btn { width: 100%; text-align: center; }
  .spm-actions--confirm.is-sticky { margin: 1.5rem -1.25rem -1.25rem; padding: .75rem 1.25rem; }
}

/* ==========================================================================
   Header — สไตล์วัดจาก spent.or.th จริง (โลโก้ 108px, Bai Jamjuree 18px, #222)
   แต่เมนูเป็นของระบบสมาชิกเอง ไม่ได้ยกเมนูเว็บหลักมาทั้งชุด
   ========================================================================== */

.spm-topbar {
  background: #fff;
  border-bottom: 1px solid #e4ebef;
  position: relative;
  z-index: 5;
}
.spm-topbar__inner {
  padding: 0 80px;
  height: 108px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.spm-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.spm-logo img { width: 108px; height: 108px; display: block; }

/* ป้ายบอกว่ากำลังอยู่ในระบบสมาชิก — แทนแถบสีฟ้าเดิม */
.spm-section {
  font-family: "Bai Jamjuree", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--spm-primary);
  padding-left: 1.15rem;
  border-left: 2px solid #e0e7eb;
  line-height: 1.2;
  white-space: nowrap;     /* กันไม่ให้ "ระบบสมาชิก" ตกบรรทัดบนจอแคบ */
}

.spm-mainnav {
  margin-left: auto;                /* ดันเมนูไปชิดขวาเหมือนเว็บหลัก */
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Bai Jamjuree", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.spm-mainnav a {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.spm-mainnav a:hover,
.spm-mainnav a:focus { color: var(--spm-primary); text-decoration: none; }

/* ชื่อผู้ที่ล็อกอิน — ข้อความเฉย ๆ ไม่ใช่ลิงก์ */
.spm-who {
  font-size: 15px;
  color: var(--spm-muted);
  max-width: 20rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: .35rem;
  border-right: 1px solid #e0e7eb;
}

.spm-logout {
  border: 1px solid var(--spm-primary);
  border-radius: 999px;
  padding: .18rem .95rem !important;
  color: var(--spm-primary) !important;
  font-size: 16px;
}
.spm-logout:hover { background: var(--spm-primary); color: #fff !important; }

/* ---- จอแคบลง ---- */
@media (max-width: 1100px) {
  .spm-topbar__inner { padding: 0 40px; }
}
@media (max-width: 860px) {
  .spm-topbar__inner { padding: 0 20px; height: 78px; gap: .8rem; }
  .spm-logo img { width: 58px; height: 58px; }
  .spm-section { font-size: 17px; padding-left: .8rem; }
  .spm-mainnav { gap: 6px; font-size: 15.5px; }
  .spm-mainnav a { padding: 0 6px; }
  .spm-who { display: none; }        /* ชื่อแสดงอยู่ในการ์ดหน้าโปรไฟล์แล้ว */
  .spm-logout { font-size: 14.5px; padding: .15rem .75rem !important; }
}
@media (max-width: 460px) {
  .spm-topbar__inner { padding: 0 14px; gap: .55rem; height: 70px; }
  .spm-logo img { width: 48px; height: 48px; }
  .spm-section { font-size: 15px; padding-left: .6rem; }
  .spm-mainnav { font-size: 13.5px; gap: 2px; }
  .spm-mainnav a { padding: 0 4px; }
  .spm-logout { font-size: 13.5px; padding: .12rem .6rem !important; }
}