/*
 * PDF Gallery Viewer – UI/UX refresh
 *
 * Notes:
 * - Keep it self-contained and resilient to theme styles.
 * - Avoid fixed widths; use CSS grid + clamps.
 */

:root{
  --pgv-max: 1200px;
  --pgv-gap: 18px;
  --pgv-radius: 16px;
  --pgv-radius-sm: 12px;
  --pgv-border: #e7e7e7;
  --pgv-ink: #1b1b1b;
  --pgv-muted: #60646b;
  --pgv-surface: #ffffff;
  --pgv-surface-2: #f6f7f8;
  --pgv-accent: #7db3da;
  --pgv-shadow: 0px 6px 18px rgba(0,0,0,0.06);
  --pgv-shadow-hover: 0px 10px 26px rgba(0,0,0,0.10);
}

/* ---------------------------------
   Wrapper + controls
---------------------------------- */

.pdf-gallery-wrapper{
  width: 100%;
}

.pdf-gallery-controls{
  width: 100%;
  max-width: var(--pgv-max);
  margin: 0 auto 14px;
  padding: 0 12px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;

  font-family: Arial, sans-serif;
}

.pdf-gallery-control{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--pgv-surface);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.pdf-gallery-control-label{
  font-size: 13px;
  color: var(--pgv-muted);
  white-space: nowrap;
}

.pdf-gallery-controls select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--pgv-border);
  background: #fff;
  font-size: 14px;
  color: var(--pgv-ink);
  line-height: 1.1;
}

.pdf-gallery-save,
.pdf-gallery-reset{
  border: 1px solid var(--pgv-border);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  background: #fff;
  color: var(--pgv-ink);
  font-weight: 600;
}

.pdf-gallery-save:hover,
.pdf-gallery-reset:hover{
  background: rgba(125,179,218,0.10);
}

.pdf-gallery-save[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile controls */
@media (max-width: 640px){
  .pdf-gallery-controls{
    flex-direction: column;
    align-items: stretch;
  }
  .pdf-gallery-control{
    width: 100%;
    justify-content: space-between;
  }
  .pdf-gallery-controls select,
  .pdf-gallery-save,
  .pdf-gallery-reset{
    width: 100%;
  }
}

/* ---------------------------------
   Grid layout (default)
---------------------------------- */

.pdf-gallery-container{
  width: 100%;
  max-width: var(--pgv-max);
  margin: 0 auto;
  padding: 12px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pgv-gap);
  align-items: stretch;
}

/* Slightly denser on tiny screens */
@media (max-width: 480px){
  .pdf-gallery-container{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 10px;
  }
}

/* ---------------------------------
   Card
---------------------------------- */

.pdf-gallery-item{
  border: 1px solid var(--pgv-border);
  border-radius: var(--pgv-radius);
  background: var(--pgv-surface);
  box-shadow: var(--pgv-shadow);
  padding: 14px;

  font-family: Arial, sans-serif;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 12px;

  transition: transform .18s ease, box-shadow .18s ease;
}

.pdf-gallery-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--pgv-shadow-hover);
}

/* Thumbnail = consistent area (prevents huge whitespace) */
.pdf-icon{
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--pgv-radius-sm);
  overflow: hidden;
  background: var(--pgv-surface-2);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Works for BOTH fallback img and pdf.js canvas */
.pdf-icon img,
.pdf-icon canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
}

/* Info area */
.pdf-info{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Theme-proof primary action */
.pdf-view-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  padding: 0.5vh 0 !important;
  border-radius: 12px !important;

  background: transparent !important;
  color: var(--pgv-ink) !important;

  text-decoration: none !important;
  font-weight: 700;
  line-height: 1.1;
}

.pdf-view-link:hover{
  background: rgba(125,179,218,0.14) !important;
}

/* Title: 2 lines, stable height */
.pdf-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--pgv-ink);
  line-height: 1.25em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: calc(1em * 2);
  word-break: break-word;
}

/* Manual ordering (drag & drop) */
.pdf-gallery-container.is-manual .pdf-gallery-item{
  cursor: grab;
}
.pdf-gallery-container.is-manual .pdf-gallery-item:active{
  cursor: grabbing;
}
.pdf-gallery-item.is-dragging{
  opacity: 0.55;
}
.pdf-gallery-item.drop-hint{
  outline: 2px dashed #999;
  outline-offset: 4px;
}

/* ---------------------------------
   List layout (readable, no broken thumbnail)
---------------------------------- */

.pdf-gallery-container.layout-list{
  display: block;
  padding: 0 12px;
}

.pdf-gallery-container.layout-list .pdf-gallery-item{
  max-width: var(--pgv-max);
  margin: 10px auto;
  padding: 14px;
  text-align: left;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.pdf-gallery-container.layout-list .pdf-icon{
  flex: 0 0 140px;
  width: 140px;
  aspect-ratio: 3 / 4;
}

.pdf-gallery-container.layout-list .pdf-info{
  flex: 1;
  gap: 8px;
}

@media (max-width: 640px){
  .pdf-gallery-container.layout-list .pdf-gallery-item{
    flex-direction: column;
    text-align: center;
    align-items: stretch;
  }

  .pdf-gallery-container.layout-list .pdf-icon{
    width: 100%;
    flex: unset;
  }

  .pdf-gallery-container.layout-list .pdf-view-link{
    width: 100% !important;
  }
}

/* ---------------------------------
   Slider (Swiper) – make it polished
---------------------------------- */

.swiper.layout-slider{
  width: 100%;
  max-width: var(--pgv-max);
  margin: 0 auto;
  padding: 24px 12px 36px;
}

.layout-slider .swiper-wrapper{
  align-items: stretch;
}

/* Slides: responsive width, consistent */
.layout-slider .swiper-slide.pdf-gallery-item{
  width: clamp(180px, 22vw, 240px) !important;
  max-width: none;
  min-width: 0;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Center pagination nicely */
.layout-slider .swiper-pagination{
  bottom: 10px !important;
}

.swiper-pagination-bullet{
  opacity: 0.35;
}
.swiper-pagination-bullet-active{
  opacity: 1;
  background-color: var(--pgv-accent);
}

/* Navigation: compact circular buttons */
.swiper-button-next,
.swiper-button-prev{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  color: var(--pgv-accent);
}

.swiper-button-next:after,
.swiper-button-prev:after{
  font-size: 18px;
  font-weight: 900;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
  background: #fff;
}

/* Keep arrows inside container on mobile */
@media (max-width: 640px){
  .swiper-button-next,
  .swiper-button-prev{
    width: 38px;
    height: 38px;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after{
    font-size: 16px;
  }
}

/* ---------------------------------
   Modal viewer styles (keep, just slightly nicer)
---------------------------------- */

.pdf-modal{
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.pdf-modal-content{
  background-color: #fff;
  margin: auto;
  padding: 20px;
  width: 92%;
  max-width: 900px;
  border-radius: 14px;
  position: relative;
}

.pdf-modal-close{
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.pdf-modal-close:hover{
  color: #000;
}

.pdf-modal-controls{
  text-align: center;
  margin-bottom: 10px;
}

.pdf-modal-controls button,
.pdf-modal-controls a{
  background-color: var(--pgv-accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  margin: 0 5px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.pdf-modal-controls button:disabled{
  background-color: #ccc;
  cursor: not-allowed;
}

.pdf-modal-navigation{
  text-align: center;
  margin-top: 15px;
}

.pdf-modal-navigation button{
  background-color: var(--pgv-accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  margin: 0 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

.pdf-modal-navigation button:disabled{
  background-color: #ccc;
  cursor: not-allowed;
}

/* --- Actions (View + Download) always visible --- */
.pdf-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pdf-actions a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding:  0.5vh 0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 700;
  line-height: 1.1;
}

/* View = primary */
.pdf-view-link{
  background: transparent !important;
  color: #1b1b1b !important;
}

.pdf-view-link:hover{
  background: rgba(125,179,218,0.14) !important;
}

/* Download = secondary */
.pdf-download-link{
  background: transparent !important;
  color: #1b1b1b !important;
}

.pdf-download-link:hover{
  background: rgba(0,0,0,0.05) !important;
}

/* List layout: align left */
.pdf-gallery-container.layout-list .pdf-actions{
  justify-content: flex-start;
}

/* Mobile: buttons full width */
@media (max-width: 640px){
  .pdf-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .pdf-actions a{
    width: 100% !important;
  }
}


/* ===== FIX readability: title + actions aligned ===== */

/* Info column */
.pdf-info{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* In list layout, center vertically with preview */
.pdf-gallery-container.layout-list .pdf-info{
  justify-content: center;
}

/* Title: a bit bigger and readable */
.pdf-title{
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pgv-ink);
  text-align: center;
}

/* Actions: keep near title and avoid huge whitespace feeling */
.pdf-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

/* Buttons: consistent size, visible target, theme-proof */
.pdf-actions a{
  width: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 12px !important;
  border: 1px solid var(--pgv-border) !important;
  background: #fff !important;

  text-decoration: none !important;
  color: var(--pgv-ink) !important;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* Primary (View) */
.pdf-actions .pdf-view-link{
  border: 2px solid var(--pgv-accent) !important;
}

/* Hover */
.pdf-actions a:hover{
  background: rgba(125,179,218,0.12) !important;
}

/* Icons: size and alignment */
.pdf-actions i{
  font-size: 18px;
  line-height: 1;
}

/* GRID view: center everything (optional) */
.pdf-gallery-container:not(.layout-list) .pdf-title{
  text-align: center;
}
.pdf-gallery-container:not(.layout-list) .pdf-actions{
  justify-content: center;
}

/* Mobile: full width buttons row if you want */
@media (max-width: 640px){
  .pdf-gallery-container.layout-list .pdf-title{
    text-align: center;
  }
  .pdf-gallery-container.layout-list .pdf-actions{
    justify-content: center;
  }
}


.pdf-gallery-container.layout-list .pdf-gallery-item{
  justify-content: flex-start;
}