/* ==========================================================================
   FeelForYou · แถบ "ตัวอย่างงาน" บนหัวหน้าเดโม — ของกลาง v1
   --------------------------------------------------------------------------
   ใส่เฉพาะหน้าเดโมเท่านั้น **ห้ามใส่ในงานลูกค้า** เพราะงานลูกค้าต้องไม่มีอะไร
   ที่ทำให้รู้สึกว่าเป็นตัวอย่างหรือมีโฆษณาของเราแปะอยู่

   ปรับสีให้เข้ากับแต่ละหน้าด้วยตัวแปรสี่ตัวนี้ใน :root ของหน้านั้น
   ถ้าไม่กำหนด จะใช้ค่าสำรองซึ่งเป็นสีชมพูแบรนด์

     --demo-bar-bg       พื้นแถบ
     --demo-bar-ink      ตัวหนังสือบนแถบ
     --demo-bar-cta-bg   พื้นปุ่มทักไลน์
     --demo-bar-cta-ink  ตัวหนังสือบนปุ่ม

   ความสูงอ่านจาก --demo-bar เพราะบางเทมเพลตต้องเผื่อระยะบนให้พอดีกับแถบนี้
   ========================================================================== */

:root {
  --demo-bar: 44px;
}

.demo-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--demo-bar);
  padding: 0 14px;
  background: var(--demo-bar-bg, #e4577d);
  color: var(--demo-bar-ink, #fff3e6);
  font-family: Kanit, "Noto Sans Thai", sans-serif;
  font-size: 0.82rem;
  text-decoration: none;
}

.demo-bar-logo {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
}

.demo-bar-tag {
  flex: 0 0 auto;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.demo-bar-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-bar-cta {
  flex: 0 0 auto;
  padding: 4px 12px;
  background: var(--demo-bar-cta-bg, #fff3e6);
  border-radius: 999px;
  color: var(--demo-bar-cta-ink, #b33a5c);
  font-size: 0.76rem;
  font-weight: 600;
}

.demo-bar:hover .demo-bar-cta,
.demo-bar:focus-visible .demo-bar-cta {
  filter: brightness(1.06);
}

/* จอแคบตัดประโยคขายออก เหลือแค่ป้ายกับปุ่ม ไม่งั้นแถบจะแน่นจนอ่านไม่ออก */
@media (max-width: 520px) {
  .demo-bar-text {
    display: none;
  }
}