/**
 * WPDM Custom Templates Styles
 *
 * Ubicación: tu-theme/download-manager/wpdm-custom-templates.css
 */

/* ==========================================================================
   Grid Container - Usa clases agregadas por JS
   .wpdm-custom-grid en el .row
   .wpdm-cols-X para número de columnas
   ========================================================================== */

.wpdm-custom-grid {
  display: grid !important;
  grid-column-gap: 20px !important;
  grid-row-gap: 60px !important;
}

/* Columnas - de 1 a 12 */
.wpdm-custom-grid.wpdm-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-7 { grid-template-columns: repeat(7, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-8 { grid-template-columns: repeat(8, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-9 { grid-template-columns: repeat(9, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-10 { grid-template-columns: repeat(10, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-11 { grid-template-columns: repeat(11, 1fr) !important; }
.wpdm-custom-grid.wpdm-cols-12 { grid-template-columns: repeat(12, 1fr) !important; }

/* ==========================================================================
   RESET Bootstrap - Quitar TODOS los estilos del wrapper col-*
   .wpdm-custom-col es agregada por JS a cada col-* wrapper
   ========================================================================== */

.wpdm-custom-col {
  -ms-flex: none !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Doble especificidad para ganar a Bootstrap */
.w3eden .wpdm-custom-col,
.wpdm_packages .wpdm-custom-col {
  -ms-flex: none !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* ==========================================================================
   Responsive - Todo baja a 2 columnas
   ========================================================================== */

@media (max-width: 991px) {
  .wpdm-custom-grid,
  .wpdm-custom-grid.wpdm-cols-1,
  .wpdm-custom-grid.wpdm-cols-2,
  .wpdm-custom-grid.wpdm-cols-3,
  .wpdm-custom-grid.wpdm-cols-4,
  .wpdm-custom-grid.wpdm-cols-5,
  .wpdm-custom-grid.wpdm-cols-6,
  .wpdm-custom-grid.wpdm-cols-7,
  .wpdm-custom-grid.wpdm-cols-8,
  .wpdm-custom-grid.wpdm-cols-9,
  .wpdm-custom-grid.wpdm-cols-10,
  .wpdm-custom-grid.wpdm-cols-11,
  .wpdm-custom-grid.wpdm-cols-12 {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 5px 7% !important;
  }
}

@media (max-width: 480px) {
  .wpdm-custom-grid,
  .wpdm-custom-grid.wpdm-cols-1,
  .wpdm-custom-grid.wpdm-cols-2,
  .wpdm-custom-grid.wpdm-cols-3,
  .wpdm-custom-grid.wpdm-cols-4,
  .wpdm-custom-grid.wpdm-cols-5,
  .wpdm-custom-grid.wpdm-cols-6,
  .wpdm-custom-grid.wpdm-cols-7,
  .wpdm-custom-grid.wpdm-cols-8,
  .wpdm-custom-grid.wpdm-cols-9,
  .wpdm-custom-grid.wpdm-cols-10,
  .wpdm-custom-grid.wpdm-cols-11,
  .wpdm-custom-grid.wpdm-cols-12 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Cards Base - Items ocupan 100% de su celda
   ========================================================================== */

.wpdm-custom-item {
  width: 100% !important;
  max-width: none !important;
}

/* ==========================================================================
   Video Body - Compartido entre todos los templates
   ========================================================================== */

.wpdm-video-body {
  padding: 10px 0;
}

.wpdm-video-body h3 {
  color: #261100;
  font-weight: 600;
  margin: 8px 0;
}

/* Títulos por template */
.wpdm-video-card .wpdm-video-body h3 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.wpdm-normal-card .wpdm-video-body h3 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.wpdm-description-card .wpdm-video-body h3 {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.wpdm-video-body p {
  color: #696969;
  font-weight: 500 !important;
  line-height: 24px;
  margin: 0 0 15px;
  font-size: 16px;
}

/* ==========================================================================
   Video Actions - Botones de descarga
   ========================================================================== */

.wpdm-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.wpdm-video-actions a {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: #00539B;
  font-size: 15px !important;
  font-weight: 700;
  text-transform: uppercase !important;
}

.wpdm-video-actions a::before {
  content: '';
  display: block;
  width: 20px;
  height: 24px;
  background: url('/wp-content/uploads/Icon-material-download@2x.png') no-repeat center / contain;
}

@media (max-width: 767px) {
  .wpdm-video-actions a {
    font-size: 12px !important;
    line-height: 1.2;
  }
}

/* ==========================================================================
   File Thumb
   ========================================================================== */

.wpdm-file-thumb {
  width: 100%;
}

.wpdm-file-thumb img {
  width: 100%;
  min-width: 100% !important;
  height: auto;
  display: block;
}

/* ==========================================================================
   Play Button
   ========================================================================== */

.wpdm-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10;
  padding: 0 !important;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.wpdm-play-btn::after {
  content: '' !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  margin: 0 auto;
}

/* ==========================================================================
   Video Card (template: custom-video)
   ========================================================================== */

.wpdm-video-card video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.wpdm-video-card .wpdm-video-thumb {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.wpdm-video-card .wpdm-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.25s ease;
}

.wpdm-video-card .wpdm-video-thumb:hover img {
  filter: brightness(0.5);
}

.wpdm-video-card .wpdm-video-thumb:hover .wpdm-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.wpdm-video-card .wpdm-video-playing {
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Description Card (template: custom-description)
   ========================================================================== */

.wpdm-description-card h3 {
  font-size: 18px;
}

.wpdm-description-card p {
  font-size: 12px;
  line-height: 16px !important;
  margin: 0px 0px 5px;
}

.wpdm-description-card .wpdm-video-actions {
  margin-top: 20px;
}

.wpdm-description-card img {
	height: 280px !important;
	object-fit: cover !important;
}


/* ==========================================================================
   Normal Card (template: custom-normal)
   ========================================================================== */

/* Hereda estilos base de .wpdm-video-body */