/* EQ Insight — style.css
   Update 2025-08-22:
   - Fix layout ปุ่มหน้าผลลัพธ์ (Step 4) ให้เหมือนภาพตัวอย่าง
   - ปุ่ม Export อยู่มุมซ้ายบนเรียงกัน, ปุ่ม "ย้อนกลับ" ซ้าย / "กลับหน้าหลัก" ขวา
*/
/* ===== Theme base (Soft Pastel Wellness) ===== */
:root { --accent:#66ccff; --bg:#fafafa; --card:#ffffff; --text:#2b2b2b; --muted:#6b7280; --ring:rgba(0,0,0,.06); --shadow:0 10px 30px rgba(0,0,0,0.08); }
body{ font-family:'Prompt',sans-serif; margin:0; padding:0; background:var(--bg); color:var(--text); min-height:100vh; }

/* Theme backgrounds per step */
body.theme-good  { --accent:#3aa0d8; background: radial-gradient(1200px 600px at 20% -10%, #e6f4ff, transparent), linear-gradient(180deg, #f6fbff, #ffffff); }
body.theme-smart { --accent:#2aa772; background: radial-gradient(1200px 600px at 80% -10%, #e8fff2, transparent), linear-gradient(180deg, #f7fffb, #ffffff); }
body.theme-happy { --accent:#d67a8a; background: radial-gradient(1200px 600px at 50% -10%, #fff1f3, transparent), linear-gradient(180deg, #fff9fb, #ffffff); }
body.theme-result{ --accent:#c2851c; background: radial-gradient(1200px 600px at 10% -10%, #fff6e3, transparent), linear-gradient(180deg, #fffdf7, #ffffff); }

/* Header */
.custom-header{ background:#ffffffee; color:var(--accent); padding:12px 20px; width:100%; box-shadow:0 6px 16px rgba(0,0,0,0.06); border-bottom:1px solid var(--ring); position:sticky; top:0; z-index:1000; }
.header-content{ max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.header-logo{ font-weight:700; cursor:pointer; }
.header-sub{ color:var(--muted); }

/* Card/form */
form{ max-width:760px; width:90%; margin:20px auto 28px; background:var(--card); padding:1.6rem; border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--ring); }
.alert{ color:#e11d48; margin-bottom:1rem; font-weight:500; }

/* Progress */
#progressWrapper{ width:100%; height:10px; background:rgba(0,0,0,.06); border-radius:5px; overflow:hidden; margin-bottom:8px; }
#progressBar{ height:100%; width:0%; background: linear-gradient(90deg, #c3e7ff, #c9f7d2, #ffd8e1, #ffe9b7); background-size:200% 100%; background-position:0 0; transition:width .3s ease, background-position .3s ease; }
.progress-info{
  margin:6px 0 12px;
  font-weight:700; letter-spacing:.2px; color:#374151;
  display:flex; align-items:center; justify-content:flex-start;
  text-align:left; white-space:nowrap; max-width:100%;
  line-height:1.35; min-height:24px; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:640px){
  .progress-info{
    font-size:14px; line-height:1.4; letter-spacing:.1px;
    font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
  }
}

/* Steps base */
.step{ display:none; }
h3{ font-weight:700; margin-bottom:10px; }
.step-1 h3{ color:#3aa0d8; } .step-2 h3{ color:#2aa772; } .step-3 h3{ color:#b567d6; } .step-4 h3{ color:#c2851c; }

/* Single-question layout */
.question.oneq .q-text{ font-size: clamp(22px, 3vw, 36px); line-height:1.5; margin:0 0 12px; }
.question.oneq .options label{ display:flex; align-items:center; gap:12px; padding:14px 16px; margin:10px 0; border:1px solid var(--ring); border-radius:12px; min-height:52px; font-size: clamp(18px,2.4vw,26px); background:#fff; cursor:pointer; }
.question.oneq .options label:hover{ background:rgba(0,0,0,.03); }
.question.oneq .options label.is-selected{ background: color-mix(in oklab, var(--accent) 10%, #fff); border-color: color-mix(in oklab, var(--accent) 36%, #e5e7eb); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 15%, #fff) inset; }
.question.oneq input[type="radio"]{ -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; border:2px solid #cfd8e3; background:#fff; display:inline-grid; place-content:center; }
.question.oneq input[type="radio"]::after{ content:""; width:14px; height:14px; border-radius:50%; transform:scale(0); transition:transform .12s ease; background:var(--accent); }
.question.oneq input[type="radio"]:checked::after{ transform:scale(1); }
.question.oneq input[type="radio"]:checked{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 20%, #fff); }

/* Buttons (base) */
.btn-group{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.btn-next,.btn-prev,.btn-export,.btn-go-result{ background:#fff; color:var(--text); border:1px solid var(--ring); border-radius:10px; padding:12px 20px; font-weight:700; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.06); }
.btn-next:hover,.btn-prev:hover,.btn-export:hover,.btn-go-result:hover{ background:#f7f7f7; }
.q-back,.q-next,.q-home{ min-height:48px; }

/* Question page buttons: prevent stretch and keep equal height */
.step .btn-group .btn-prev,
.step .btn-group .btn-next,
.step .btn-group .btn-go-result,
.step .btn-group .q-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  height:48px;
  padding:0 16px;
  flex:0 0 auto;
}

/* Mobile: enlarge question buttons (Back/Home/Next/Go Result) without affecting other UI */
@media (max-width:640px){
  .step .btn-group .btn-prev,
  .step .btn-group .btn-next,
  .step .btn-group .btn-go-result,
  .step .btn-group .q-home{
    height:56px;           /* bigger tap target */
    min-height:56px;
    padding:0 22px;        /* more horizontal padding */
    font-size:17px;        /* clearer label */
    border-radius:14px;    /* slightly rounder */
    box-shadow:0 6px 14px rgba(0,0,0,.08); /* a bit more elevation */
  }
}

/* Transition view */
.transition-view{ display:none; }
.trans-card{ max-width:760px; width:90%; margin:14px auto 0; background:#fff; border:1px solid var(--ring); border-radius:14px; padding:22px; box-shadow:var(--shadow); text-align:center; }
.trans-head{ font-size: clamp(22px, 3vw, 32px); margin:0 0 8px; color:var(--accent); font-weight:800; }
.trans-body{ font-size: clamp(16px, 2.1vw, 20px); color:#374151; margin:4px 0 14px; line-height:1.7; }
.trans-actions{ display:flex; gap:10px; justify-content:center; }
.trans-actions .btn-prev,.trans-actions .btn-next,.trans-actions .btn-go-result{ min-width:160px; }
/* Make Transition buttons (ย้อนกลับ/พร้อมแล้ว) larger across all transitions */
.trans-actions .btn-prev,
.trans-actions .btn-next{
  min-width:200px;     /* wider buttons */
  height:52px;         /* taller buttons */
  padding:0 22px;      /* comfortable horizontal padding */
  font-size:16px;      /* larger label text */
  border-radius:14px;  /* slightly rounder */
}
@media (max-width:640px){
  .trans-actions{ flex-direction:column; }
  /* Stop buttons from stretching full width on mobile */
  .trans-actions .btn-prev,
  .trans-actions .btn-next,
  .trans-actions .btn-go-result{
    width:auto;            /* content-sized */
    align-self:center;     /* center in column layout */
    min-width:200px;       /* keep comfortable tap target */
    max-width:100%;        /* prevent overflow */
  }
}

/* Result styling */
canvas#eqChart{ display:block; margin:10px auto 0; max-width:460px; width:100%!important; height:auto!important; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; }
.fb-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px; margin-top:14px; box-shadow:var(--shadow); }
.fb-head{ font-weight:700; color:var(--accent); }
.fb-note,.fb-sub{ color:#6b7280; }
.fb-meter{ height:8px; border-radius:6px; background:rgba(0,0,0,.06); overflow:hidden; margin-bottom:6px; }
.fb-bar{ height:100%; display:block; border-radius:inherit; transition:width .35s ease; }
.fb-bar.fb-low{ background:linear-gradient(90deg,#ff9da4,#ffb199); }
.fb-bar.fb-mid{ background:linear-gradient(90deg,#a0ea8a,#c8ffae); }
.fb-bar.fb-high{ background:linear-gradient(90deg,#66ccff,#b3a0ff); }

/* Header actions */
.header-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn-reset{ background:#fff; color:var(--text); border:1px solid var(--ring); border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.06); }
.btn-reset:hover{ background:#f7f7f7; }

/* --- Header (compact) --- */
.custom-header{ background:#ffffffee; padding:8px 12px; }
.header-content{ max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.header-logo{ font-weight:700; display:flex; align-items:center; gap:8px; cursor:pointer; }
.header-sub{ color:var(--muted); font-size:14px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn-reset{ padding:6px 10px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.06); }

/* Anchor as button */
.btn-next,.btn-prev,.btn-export,.btn-go-result{ text-decoration:none; display:inline-block; }

/* ===================== RESULT PAGE (STEP 4) — BUTTON LAYOUT ===================== */
/* (1) แถวปุ่ม Export: ให้อยู่มุมซ้ายบน เรียงชิดกันและเว้นระยะ 10px */
#step4 > .btn-export{ margin-right:10px; margin-top:6px; }
#step4 > .btn-export:last-of-type{ margin-right:0; }

/* (2) กลุ่มปุ่มด้านล่าง: ซ้าย–ขวาแบบ space-between ตามภาพ */
#step4 .btn-group{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;  /* สำคัญ: ให้ "ย้อนกลับ" ซ้าย / "กลับหน้าหลัก" ขวา */
  gap:10px;
}

/* Mobile: make Back/Home buttons same size */
@media (max-width:640px){
  #step4 .btn-group .btn-prev,
  #step4 .btn-group .btn-next,
  #btnBackResult,
  #btnHomeResult{
    flex: 1 0 calc(50% - 5px) !important; /* two equal columns */
    width: calc(50% - 5px) !important;
    height: 48px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
  }
}

/* (3) สกินปุ่มทั้งหมดในหน้า Step 4 ให้เหมือนกัน */
#step4 .btn-export,
#step4 .btn-group button,
#step4 .btn-group a,
#step4 button,
#step4 a.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  height:42px;
  padding:0 16px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .02s ease, box-shadow .2s ease, background .2s ease;
}
#step4 .btn-export:hover,
#step4 .btn-group button:hover,
#step4 .btn-group a:hover,
#step4 button:hover,
#step4 a.btn:hover{ background:#f7f7f7; }
#step4 .btn-export:active,
#step4 .btn-group button:active,
#step4 .btn-group a:active,
#step4 button:active,
#step4 a.btn:active{ transform:translateY(1px); }

/* ===================== RESULT META (ชื่อ/ชิป) ===================== */
#step4 .rs-meta-top{ margin: 4px 0 8px; }
#step4 .rs-meta-top .rs-name{
  font-weight:800; font-size:clamp(20px, 2.4vw, 22px); line-height:1.25; color:#222;
}
#step4 .rs-meta-top .rs-sub{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:6px;
}
#step4 .rs-meta-top .rs-chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-weight:700; font-size:clamp(14px, 2vw, 16px);
  color:#2b6fff; background:rgba(43,111,255,.08); border:1px solid rgba(43,111,255,.22);
}

/* ป้ายโดเมน */
.fb-section .fb-badge{ font-weight:800; font-size:16px; margin-left:8px; }
.fb-section.fb-good .fb-badge{ color:#3aa0d8; }
.fb-section.fb-smart .fb-badge{ color:#2aa772; }
.fb-section.fb-happy .fb-badge{ color:#d67a8a; }
.fb-section .fb-title{ display:none !important; }

/* คำแนะนำ */
.fb-section .fb-sub,
.fb-section .fb-tips-title{ color: var(--muted, #666); font-size:14px; line-height:1.6; }
.fb-tips-title{ margin:6px 0 4px; font-weight:400; }

/* ย่อกราฟ */
canvas#eqChart{ max-width:340px; } /* เดิม 460px */

/* ===== Unified Buttons (not bold) — apply to all result pages ===== */
#resultSection a.btn,
#resultSection button.btn,
#resultSection .btn-prev,
#resultSection .btn-next,
#resultSection .btn-export,
#resultSection .navs .btn-prev,
#resultSection .navs .btn-next,
#resultSection .result-actions .btn-export,
#resultSection .export-actions .btn-export,
#btnSaveImage, #btnSavePDF, #btnBackResult, #btnHomeResult {
  font-weight: 600 !important;  /* ลดความหนาจาก 700/800 */
  font-size: 16px !important;   /* คงขนาดเดิม */
  letter-spacing: .1px !important;
}

/* คงสกินเดิม: เทาซ้าย, ขาวขวา (ถ้ามี) */
#btnSaveImage,
#btnSavePDF,
#btnBackResult,
#resultSection .navs .btn-prev {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

#btnHomeResult,
#resultSection .navs .btn-next {
  background: #fff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}