/* กำหนด Animation การขยาย-หด และเงาเรืองแสงสไตล์นีออน */
@keyframes pulse-expand {
  0% {
    transform: scale(1);
    box-shadow: 
      0 0 10px rgba(0, 255, 170, 0.4),
      inset 0 0 10px rgba(0, 255, 170, 0.2);
  }
  50% {
    transform: scale(1.05); /* ขยายใหญ่ขึ้นเล็กน้อย */
    box-shadow: 
      0 0 20px rgba(0, 255, 170, 0.8),
      0 0 35px rgba(0, 255, 170, 0.4),
      inset 0 0 15px rgba(0, 255, 170, 0.5); /* เรืองแสงสีเขียวนีออนสว่างขึ้นทั้งนอกและใน */
  }
  100% {
    transform: scale(1);
    box-shadow: 
      0 0 10px rgba(0, 255, 170, 0.4),
      inset 0 0 10px rgba(0, 255, 170, 0.2);
  }
}

.wp-encoded-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ขนาดมาตรฐานสำหรับ Desktop */
  min-height: 66px;
  padding: 1.2rem 2.5rem;

  /* เส้นขอบนีออนสีเขียวมินต์/นีออน */
  border: 2px solid #00ffaa;
  border-radius: 50px;

  /* พื้นหลังสีเข้มแบบไล่ระดับ (จากเขียวมืดไปหาดำ) */
  background: linear-gradient(180deg, #021a12 0%, #000805 100%);
  
  /* ตัวหนังสือสีขาวเอียงเล็กน้อย พร้อมเงาข้อความเรืองแสง */
  color: #ffffff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 255, 170, 0.8);

  cursor: pointer;

  /* เรียกใช้ Animation */
  animation: pulse-expand 1.8s infinite ease-in-out;

  transition: all 200ms ease-in-out;
}

/* ========================================
   RESPONSIVE FOR MOBILE (หน้าจอ <= 768px)
======================================== */

@media (max-width: 768px) {
  .wp-encoded-cta {
    min-height: 48px;         /* ลดความสูงปุ่มลง */
    padding: 0.75rem 1.5rem;  /* ลดระยะขอบด้านใน */
    font-size: 1rem;          /* ปรับขนาดตัวอักษรให้พอดีกับมือถือ */
    max-width: 100%;          /* ป้องกันปุ่มล้นหน้าจอ */
    box-sizing: border-box;
  }
}

/* ========================================
   HOVER & ACTIVE
======================================== */

.wp-encoded-cta:hover {
  /* เมื่อชี้: สว่างขึ้น ข้อความเปลี่ยนเป็นสีเขียวนีออนสด */
  background: linear-gradient(180deg, #043323 0%, #01140d 100%);
  color: #00ffaa;
  border-color: #55ffc4;
  text-shadow: 0 0 12px rgba(0, 255, 170, 1);
  
  /* หยุดขยาย และเพิ่มเงาสว่างขึ้น */
  animation-play-state: paused;
  box-shadow: 
    0 0 25px rgba(0, 255, 170, 0.9),
    inset 0 0 15px rgba(0, 255, 170, 0.6);
}

.wp-encoded-cta:active {
  transform: scale(0.97);
}

.wp-encoded-cta:focus-visible {
  outline: 3px solid #00ffaa;
  outline-offset: 4px;
}