/*
 * Pali Help Desk compact widget v1.4.56
 * Scoped completely to [pali_helpdesk_widget].
 */
.phdui-helpdesk-widget,
.phdui-helpdesk-widget *,
.phdui-helpdesk-widget *::before,
.phdui-helpdesk-widget *::after {
  box-sizing:border-box !important;
}

.phdui-helpdesk-widget {
  container-type:inline-size;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:14px !important;
  overflow:hidden !important;
  border:1px solid #244747 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  color:#173e3e !important;
  box-shadow:0 7px 18px rgba(3,79,79,.10) !important;
  font-family:"Sarabun",Arial,sans-serif !important;
  text-align:left !important;
}

.phdui-helpdesk-widget__nav {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

.phdui-helpdesk-widget__link,
html body .phdui-helpdesk-widget__link {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  margin:0 !important;
  padding:6px 8px !important;
  overflow-wrap:anywhere !important;
  border:1px solid #244747 !important;
  border-radius:6px !important;
  background:#ffffff !important;
  color:#173e3e !important;
  -webkit-text-fill-color:#173e3e !important;
  box-shadow:none !important;
  font-family:"Sarabun",Arial,sans-serif !important;
  font-size:clamp(12px,4.6cqi,14px) !important;
  font-weight:500 !important;
  line-height:1.16 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:normal !important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease !important;
}

.phdui-helpdesk-widget__link.is-primary,
html body .phdui-helpdesk-widget__link.is-primary {
  border-color:#d8a000 !important;
  background:#ffc000 !important;
  color:#173e3e !important;
  -webkit-text-fill-color:#173e3e !important;
  font-weight:700 !important;
}

.phdui-helpdesk-widget__link:hover,
.phdui-helpdesk-widget__link:focus-visible {
  border-color:#ffc000 !important;
  background:#fff7d6 !important;
  color:#034f4f !important;
  -webkit-text-fill-color:#034f4f !important;
  outline:2px solid transparent !important;
}

.phdui-helpdesk-widget__link.is-primary:hover,
.phdui-helpdesk-widget__link.is-primary:focus-visible {
  background:#ffd34d !important;
}

.phdui-helpdesk-widget__content {
  width:100% !important;
  min-width:0 !important;
  margin:12px 0 0 !important;
  padding:12px 0 0 !important;
  overflow:visible !important;
  border-top:1px solid #d8dfdf !important;
}

.phdui-helpdesk-widget__content h2 {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  color:#173e3e !important;
  -webkit-text-fill-color:#173e3e !important;
  font-family:"Sarabun",Arial,sans-serif !important;
  font-size:clamp(15px,5.5cqi,18px) !important;
  font-weight:700 !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-transform:none !important;
  white-space:normal !important;
}

.phdui-helpdesk-widget__content h2 span {
  white-space:nowrap !important;
}

.phdui-helpdesk-widget__content p {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:5px 0 0 !important;
  padding:0 !important;
  overflow:visible !important;
  color:#647070 !important;
  -webkit-text-fill-color:#647070 !important;
  font-family:"Sarabun",Arial,sans-serif !important;
  font-size:clamp(12px,4.4cqi,14px) !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  text-align:center !important;
  white-space:normal !important;
}

/*
 * Elementor อาจกำหนด min-width จาก widget เดิมไว้ จึงคืนขนาดให้หดตามคอลัมน์
 * โดย scope ผ่าน :has() เฉพาะกล่องที่มี shortcode นี้.
 */
.elementor-widget-shortcode:has(.phdui-helpdesk-widget),
.elementor-widget-container:has(> .phdui-helpdesk-widget),
.elementor-shortcode:has(> .phdui-helpdesk-widget) {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* คอลัมน์เล็กมาก เช่น หน้าจอแบ่งหลายช่อง ให้ปุ่มเรียงเดี่ยวและอ่านได้ครบ */
@container (max-width:229px) {
  .phdui-helpdesk-widget {
    padding:10px !important;
  }

  .phdui-helpdesk-widget__nav {
    grid-template-columns:minmax(0,1fr) !important;
    gap:6px !important;
  }

  .phdui-helpdesk-widget__link,
  html body .phdui-helpdesk-widget__link {
    min-height:36px !important;
    font-size:12px !important;
  }
}

/* พื้นที่กว้างขึ้นให้ข้อความอ่านง่ายขึ้น โดยยังคงรูปแบบ 2 × 2 ตามต้นแบบ */
@container (min-width:420px) {
  .phdui-helpdesk-widget {
    padding:18px !important;
  }

  .phdui-helpdesk-widget__nav {
    gap:10px !important;
  }

  .phdui-helpdesk-widget__link,
  html body .phdui-helpdesk-widget__link {
    min-height:44px !important;
    font-size:15px !important;
  }

  .phdui-helpdesk-widget__content h2 {
    font-size:19px !important;
  }

  .phdui-helpdesk-widget__content p {
    font-size:15px !important;
  }
}

@media (max-width:767px) {
  .phdui-helpdesk-widget {
    border-radius:8px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .phdui-helpdesk-widget__link {
    transition:none !important;
  }
}
