/* ═══════════════════════════════════════
   dhr-popup.css  — DHR Popup Library
   include ไว้ใน assets/css/
   ═══════════════════════════════════════ */

/* ── Overlay ── */
#dhrPopupOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#dhrPopupOverlay.open {
  display: flex;
}

/* ── Modal box ── */
.dhr-popup-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  position: relative;
}
.dhr-popup-box.mode-image {
  max-width: 860px;
}
.dhr-popup-box.mode-pdf {
  max-width: 900px;
  height: calc(100vh - 40px);
}
.dhr-popup-box.mode-html {
  max-width: 900px;
  height: calc(100vh - 40px);
}

/* ── Top bar ── */
.dhr-popup-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f9;
  flex-shrink: 0;
}
.dhr-popup-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dhr-popup-badge.img {
  background: #1a4a8a;
}
.dhr-popup-badge.pdf {
  background: #b45309;
}
.dhr-popup-badge.html {
  background: #166534;
}

.dhr-popup-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: #172e5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dhr-popup-counter {
  font-size: 12px;
  font-weight: 600;
  color: #5a6a82;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Zoom controls (image only) ── */
.dhr-popup-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dhr-popup-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #e0eaf5;
  background: #f7fafd;
  cursor: pointer;
  font-size: 16px;
  color: #1a4a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.dhr-popup-zoom-btn:hover {
  background: #eef3fb;
}
.dhr-popup-zoom-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #1a4a8a;
  min-width: 38px;
  text-align: center;
}

/* ── Download / close ── */
.dhr-popup-dl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1a4a8a;
  padding: 5px 10px;
  border: 1.5px solid #c5d8f0;
  border-radius: 8px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.dhr-popup-dl:hover {
  background: #eef3fb;
  text-decoration: none;
}
.dhr-popup-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1.5px solid #e0eaf5;
  background: #f7fafd;
  cursor: pointer;
  font-size: 18px;
  color: #5a6a82;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.dhr-popup-close:hover {
  background: #eef3fb;
  color: #1a4a8a;
}

/* ── Image stage ── */
.dhr-popup-stage {
  position: relative;
  background: #f4f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  overflow: hidden;
  min-height: 200px;
}
.dhr-popup-imgwrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dhr-popup-imgwrap.single {
  cursor: default;
}
.dhr-popup-imgwrap.zoomed {
  cursor: grab;
}
.dhr-popup-imgwrap.grabbing {
  cursor: grabbing !important;
}
#dhrPopupImg {
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: transform 0.18s;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Prev/Next nav ── */
.dhr-popup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #e0eaf5;
  background: #fff;
  cursor: pointer;
  font-size: 36px;
  color: #1a4a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;

  /* เพิ่ม 2 บรรทัดนี้ครับ */
  padding: 0;
  padding-bottom: 14px; /* ปรับตัวเลขนี้ (2px - 5px) จนกว่าจะพอใจครับ */
}
.dhr-popup-nav:hover {
  background: #eef3fb;
}
.dhr-popup-nav:disabled {
  opacity: 0.25;
  cursor: default;
  box-shadow: none;
}
/* ปุ่มลูกศรตอน zoom — ลดความ opaque ลงแต่ยังกดได้ */
.dhr-popup-imgwrap.zoomed ~ .dhr-popup-nav,
.dhr-popup-stage:has(.dhr-popup-imgwrap.zoomed) .dhr-popup-nav {
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.85);
}
.dhr-popup-stage:has(.dhr-popup-imgwrap.zoomed) .dhr-popup-nav:hover {
  opacity: 1;
  background: #fff;
}
.dhr-popup-nav.prev {
  left: 10px;
}
.dhr-popup-nav.next {
  right: 10px;
}

/* ── Thumbnail strip ── */
.dhr-popup-strip {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex-shrink: 0;
  border-top: 1px solid #eef2f9;
  background: #fff;
}
.dhr-popup-strip::-webkit-scrollbar {
  display: none;
}
.dhr-popup-strip-item {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid transparent;
  scroll-snap-align: start;
  transition: border-color 0.15s;
}
.dhr-popup-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dhr-popup-strip-item.active {
  border-color: #1a4a8a;
}
.dhr-popup-strip-item:hover {
  border-color: #b45309;
}

/* ── PDF / HTML iframe ── */
.dhr-popup-frame {
  flex: 1;
  border: none;
  width: 100%;
  display: block;
}

/* ── Loading spinner ── */
.dhr-popup-loading {
  position: absolute;
  inset: 49px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #5a6a82;
  font-size: 14px;
  background: #f7fafd;
  pointer-events: none;
  border-radius: 0 0 18px 18px;
  z-index: 2;
}
.dhr-popup-loading.has-action {
  pointer-events: auto;
}
.dhr-load-msg {
  font-size: 13px;
  color: #5a6a82;
  text-align: center;
}
.dhr-load-fallback {
  display: none;
  text-align: center;
  margin-top: 4px;
}
.dhr-popup-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #e0eaf5;
  border-top-color: #1a4a8a;
  border-radius: 50%;
  animation: dhrSpin 0.9s linear infinite;
}
@keyframes dhrSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Clickable trigger styles ── */
[data-popup] {
  cursor: pointer;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .dhr-popup-nav {
    width: 38px;
    height: 38px;
    font-size: 36px;
    /* เพิ่ม 2 บรรทัดนี้ครับ */
    padding: 0;
    padding-bottom: 10px; /* ปรับตัวเลขนี้ (2px - 5px) จนกว่าจะพอใจครับ */
  }
  .dhr-popup-nav.prev {
    left: 6px;
  }
  .dhr-popup-nav.next {
    right: 6px;
  }
  .dhr-popup-strip-item {
    width: 46px;
    height: 46px;
  }
  #dhrPopupImg {
    max-height: calc(100vh - 260px);
  }
}