/* =========================================================================
   OTP Help Widget  —  prefix: otpw-
   ทุก selector ถูก scope ด้วย prefix เพื่อกันชนกับ CSS ของระบบเดิม
   (วางในหน้า ASP.NET Web Forms ได้โดยไม่กระทบ style เดิม)
   ========================================================================= */
.otpw-root {
  --otpw-navy:   #1B3A6B;
  --otpw-navy-2: #142c52;
  --otpw-orange: #F04E23;
  --otpw-amber:  #FFC233;
  --otpw-blue:   #2563EB;
  --otpw-ink:    #1f2733;
  --otpw-muted:  #5b6472;
  --otpw-line:   #e6e8ee;
  --otpw-bg:     #f4f6fb;
  --otpw-card:   #ffffff;
  --otpw-green:  #16a34a;
  --otpw-red:    #dc2626;
  --otpw-radius: 16px;
  --otpw-shadow: 0 18px 50px rgba(20,32,66,.22);
  /* --- ค่าฐาน + reset เชิงป้องกัน (กันค่า inherited จากหน้า host) --- */
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  white-space: normal;
  direction: ltr;
  color: var(--otpw-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.otpw-root *, .otpw-root *::before, .otpw-root *::after { box-sizing: border-box; }

/* reset เชิงป้องกัน — ใช้ :where() ให้ specificity เท่ากับ .otpw-root เท่านั้น
   ผล: "ชนะ" element selector ของ host (เช่น p{}, ul{}, button{})
        แต่ "ไม่ทับ" component class ของวิดเจ็ตเอง (.otpw-fab, .otpw-section__title ฯลฯ)
   วางไว้ก่อน component rules เพื่อให้ rule ที่ specificity เท่ากันแต่มาทีหลังชนะ */
.otpw-root :where(h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; }
.otpw-root :where(ul, ol) { list-style: none; }
.otpw-root :where(button, input, summary, textarea) {
  margin: 0;
  font: inherit;            /* ปลอดภัยเพราะ :where specificity ต่ำ — component override ได้ */
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: inherit;
  color: inherit;
  background: none;
}
.otpw-root :where(a) { text-decoration: none; color: inherit; }
.otpw-root :where(img, svg) { max-width: 100%; }

/* ---------- Floating pill button (สไตล์เดียวกับปุ่มสลับภาษา) ---------- */
.otpw-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px 12px 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--otpw-amber) 0%, var(--otpw-orange) 78%);
  box-shadow: 0 10px 26px rgba(240,78,35,.38), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.otpw-fab:hover  { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(240,78,35,.46); filter: brightness(1.03); }
.otpw-fab:active { transform: translateY(0); }
.otpw-fab:focus-visible { outline: 3px solid var(--otpw-navy); outline-offset: 3px; }
.otpw-fab__icon {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  font-weight: 800;
}
.otpw-fab__icon svg { width: 15px; height: 15px; display: block; }
.otpw-fab__ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(240,78,35,.55);
  animation: otpw-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes otpw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,78,35,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(240,78,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,78,35,0); }
}

/* ---------- Overlay + modal ---------- */
.otpw-overlay {
  position: fixed; inset: 0;
  z-index: 2147483001;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(13,21,44,.55);
  backdrop-filter: blur(3px);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.otpw-overlay.otpw-open { opacity: 1; visibility: visible; }
@media (min-width: 720px) {
  .otpw-overlay { align-items: center; padding: 28px; }
}

.otpw-modal {
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  background: var(--otpw-bg);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--otpw-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.otpw-overlay.otpw-open .otpw-modal { transform: translateY(0); }
@media (min-width: 720px) {
  .otpw-modal { border-radius: 20px; transform: translateY(0) scale(.96); }
  .otpw-overlay.otpw-open .otpw-modal { transform: translateY(0) scale(1); }
}

/* ---------- Header ---------- */
.otpw-head {
  position: relative;
  background: linear-gradient(135deg, var(--otpw-navy) 0%, var(--otpw-navy-2) 100%);
  color: #fff;
  padding: 22px 56px 22px 22px;
  flex-shrink: 0;
}
.otpw-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--otpw-amber), var(--otpw-orange));
}
.otpw-head__eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--otpw-amber); margin: 0 0 4px;
  display: flex; align-items: center; gap: 7px;
  padding-bottom: .3rem;
}
.otpw-head__title { font-size: 21px; font-weight: 800; margin: 0; line-height: 1.25; }
.otpw-head__sub { font-size: 13.5px; font-weight: 400; margin: 6px 0 0; color: #c7d2e8; }
.otpw-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.otpw-close svg { width: 17px; height: 17px; display: block; }
.otpw-close:hover { background: rgba(255,255,255,.28); }
.otpw-close:focus-visible { outline: 3px solid var(--otpw-amber); outline-offset: 2px; }

/* ---------- Body (scroll area) ---------- */
.otpw-body { padding: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.otpw-section { margin-bottom: 18px; }
.otpw-section:last-child { margin-bottom: 4px; }
.otpw-section__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 800; color: var(--otpw-navy);
  margin: 0 0 10px;
}
.otpw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--otpw-orange); flex-shrink: 0; }

/* ---------- Quick steps (do this first) ---------- */
.otpw-quick {
  background: linear-gradient(180deg, #fff7e6 0%, #fffdf7 100%);
  border: 1px solid #ffe2a6;
  border-radius: var(--otpw-radius);
  padding: 16px;
}
.otpw-quick__head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.otpw-quick__badge {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--otpw-orange); padding: 3px 10px; border-radius: 999px;
}
.otpw-quick__head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--otpw-navy); }
.otpw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.otpw-step { display: flex; gap: 11px; align-items: flex-start; }
.otpw-step__n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--otpw-navy); color: #fff; font-size: 12.5px; font-weight: 700;
}
.otpw-step__txt { font-size: 14px; line-height: 1.45; }
.otpw-step__txt b { color: var(--otpw-ink); }
.otpw-step__txt span { color: var(--otpw-muted); font-size: 13px; }

/* ---------- Case accordion ---------- */
.otpw-filter {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--otpw-line);
  border-radius: 12px;
  font-family: inherit; font-size: 14px; color: var(--otpw-ink);
  background: #fff; margin-bottom: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.otpw-filter:focus { outline: none; border-color: var(--otpw-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.otpw-filter::placeholder { color: #9aa3b2; }

.otpw-cases { display: grid; gap: 9px; }
.otpw-case {
  background: var(--otpw-card);
  border: 1px solid var(--otpw-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.otpw-case[open] { border-color: #cdd6e8; box-shadow: 0 6px 18px rgba(27,58,107,.08); }
.otpw-case summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  user-select: none;
}
.otpw-case summary::-webkit-details-marker { display: none; }
.otpw-case summary:focus-visible { outline: 3px solid var(--otpw-blue); outline-offset: -3px; border-radius: 12px; }
.otpw-case__n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: #eef2fb; color: var(--otpw-navy);
  font-size: 13.5px; font-weight: 800;
}
.otpw-case__title { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.otpw-case__chev {
  flex-shrink: 0; color: var(--otpw-muted); transition: transform .2s ease;
}
.otpw-case[open] .otpw-case__chev { transform: rotate(180deg); }
.otpw-case__body { padding: 0 14px 14px 54px; }
.otpw-case__row { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.otpw-case__label {
  flex-shrink: 0; font-weight: 700; font-size: 12px;
  padding: 1px 8px; border-radius: 6px; height: fit-content; margin-top: 1px;
}
.otpw-case__label--symptom { background: #fff1ed; color: var(--otpw-orange); }
.otpw-case__label--fix     { background: #e9f8ef; color: var(--otpw-green); }
.otpw-case__row code {
  background: #eef1f6; padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px;
  word-break: break-all;
}
.otpw-empty { text-align: center; color: var(--otpw-muted); font-size: 13.5px; padding: 16px; display: none; }

/* ---------- Email search ---------- */
.otpw-searchbox {
  background: var(--otpw-card); border: 1px solid var(--otpw-line);
  border-radius: var(--otpw-radius); padding: 14px;
}
.otpw-searchbox p { margin: 0 0 10px; font-size: 13px; color: var(--otpw-muted); text-align: left; }
.otpw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.otpw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 9px;
  background: #f1f5fc; border: 1px solid #e0e8f6;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12.5px; color: var(--otpw-navy);
  cursor: pointer; transition: background .14s ease, transform .1s ease;
}
.otpw-chip:hover { background: #e4edfb; }
.otpw-chip:active { transform: scale(.97); }
.otpw-chip svg { width: 13px; height: 13px; opacity: .55; }
.otpw-chip.otpw-copied { background: #e9f8ef; border-color: #bce7cc; color: var(--otpw-green); }

/* ---------- Two-column info cards ---------- */
.otpw-grid { display: grid; gap: 12px; }
@media (min-width: 620px) { .otpw-grid { grid-template-columns: 1fr 1fr; } }
.otpw-info {
  background: var(--otpw-card); border: 1px solid var(--otpw-line);
  border-radius: var(--otpw-radius); padding: 14px;
}
.otpw-info h4 {
  margin: 0 0 9px; font-size: 14px; font-weight: 800; color: var(--otpw-navy);
  display: flex; align-items: center; gap: 7px;
}
.otpw-info ul { margin: 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; }
.otpw-info li { font-size: 13.5px; line-height: 1.45; }

.otpw-security {
  background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
  border: 1px solid #f7c9c9;
}
.otpw-security h4 { color: var(--otpw-red); }
.otpw-security li::marker { color: var(--otpw-red); }

/* ---------- Footer / contact ---------- */
.otpw-foot {
  flex-shrink: 0;
  background: #eef2fb; border-top: 1px solid #dfe5f2;
  padding: 14px 18px;
}
.otpw-foot__title { font-size: 13.5px; font-weight: 800; color: var(--otpw-navy); margin: 0 0 6px; text-align: left; }
.otpw-foot__tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-start; }
.otpw-tag {
  font-size: 12.5px; background: #fff; border: 1px solid #d6deee;
  color: var(--otpw-ink); padding: 4px 10px; border-radius: 999px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .otpw-root *, .otpw-overlay, .otpw-modal { transition: none !important; animation: none !important; }
  .otpw-fab__ring { display: none; }
}

/* ---------- Demo page only (ลบส่วนนี้เมื่อนำไปฝังในระบบจริง) ---------- */
.otpw-demo {
  min-height: 100vh; margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, #e8eefb, #f4f6fb 60%);
  font-family: 'Sarabun', sans-serif; color: #1B3A6B;
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.otpw-demo__intro h1 { font-size: 26px; margin: 0 0 8px; }
.otpw-demo__intro p { color: #5b6472; max-width: 460px; margin: 0 auto; line-height: 1.6; }


/* =========================================================================
   ส่วนเพิ่มเติมใหม่เท่านั้น (ไม่แก้ rule เดิมด้านบนแม้แต่บรรทัดเดียว)
   ใช้สำหรับ: กล่องเปรียบเทียบ Microsoft + ปุ่มดูภาพขนาดเต็ม (lightbox)
   ========================================================================= */
.otpw-imgtrigger {
    display: block;
    width: 100%;
    border: 1px dashed #ffd27a;
    background: #fff;
    border-radius: 12px;
    padding: 10px 10px 8px;
    cursor: zoom-in;
    margin-top: 12px;
    transition: border-color .15s ease, background .15s ease;
}

    .otpw-imgtrigger:hover {
        border-color: var(--otpw-orange);
        background: #fffaf0;
    }

    .otpw-imgtrigger figcaption {
        margin-top: 6px;
        font-size: 12px;
        color: var(--otpw-blue);
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

.otpw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,16,32,.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    padding: 24px;
}

    .otpw-lightbox.otpw-open {
        opacity: 1;
        visibility: visible;
    }

.otpw-lightbox__box {
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 16px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.otpw-lightbox__cap {
    margin-top: 10px;
    font-size: 13px;
    color: var(--otpw-muted);
    text-align: center;
}