/**
 * Product Gallery Thumbnails
 *
 * Desktop: 8px border-radius thumbnails
 * Mobile: Dot-style pagination indicators
 *
 * @package eRide
 * @version 1.0.0
 * @since 1.1.6
 */

/* ==========================================================================
   DESKTOP THUMBNAILS (768px+)
   Square thumbnails with 8px border radius
   ========================================================================== */

@media (min-width: 768px) {
  /* Override default 12px to 8px */
  .flex-control-nav li img {
    border-radius: 8px;
  }

  /* Active thumbnail border also gets 8px radius */
  .flex-control-nav li > * {
    border-radius: 8px;
  }
}

/* ==========================================================================
   MOBILE DOT NAVIGATION (below 768px)
   Converts thumbnails to minimal dot indicators
   ========================================================================== */

@media (max-width: 767px) {
  .flex-control-nav {
    /* Center the dots */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .flex-control-nav li {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide thumbnail images on mobile */
  .flex-control-nav li img {
    display: none;
  }

  /* Create dot indicators */
  .flex-control-nav li > * {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--gray-300, #d1d5db);
    border: none;
    opacity: 1;
    transition: all 0.2s ease;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
  }

  /* Hover state for dots */
  .flex-control-nav li > *:hover {
    background-color: var(--wp--preset--color--gray-500, #6b7280);
    transform: scale(1.2);
  }

  /* Active dot */
  .flex-control-nav li .flex-active {
    background-color: var(--wp--preset--color--primary, #000);
    border: none;
    transform: scale(1.2);
  }
}