/**
 * UGC Carousels & Shoppable Videos for WooCommerce — Frontend Styles
 */

.ugcc-carousel {
  --ugcc-bg: transparent;
  --ugcc-text: var(--pdp-color-text, #2a2a2a);
  --ugcc-primary: var(--pdp-color-primary, #8a171a);

  font-family: Montserrat, sans-serif;
  color: var(--ugcc-text);
  position: relative;
  box-sizing: border-box;
}

.ugcc-carousel * {
  box-sizing: border-box;
}

/* Header Area */
.ugcc-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.ugcc-header__text h2.ugcc-heading {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.ugcc-header__text p.ugcc-subheading {
  margin: 0;
  font-size: 1rem;
  color: #666;
}

/* Arrow Navigation (Header & Carousel) */
.ugcc-arrows {
  display: flex;
  gap: 8px;
}

.ugcc-arrow,
.ugcc-product-arrow {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
  padding: 0;
}

.ugcc-arrow:hover:not(:disabled),
.ugcc-product-arrow:hover:not(:disabled) {
  background: #f0f0f0;
  color: #111;
  border-color: #bbb;
}

.ugcc-arrow:disabled,
.ugcc-product-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Stage & Track (Desktop: ~5 slides visible) */
.ugcc-stage {
  overflow: hidden;
  position: relative;
}

/* Flex layout with transition for sliding */
.ugcc-track {
  display: flex;
  align-items: flex-start; /* keep all slides at their own natural height, not stretched to match the tallest */
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* Individual Slide Container — ~4.5 visible so edges peek. 12px each side =
   24px between adjacent cards, matching Figma's gap-[24px]. */
.ugcc-slide {
  flex: 0 0 calc(100% / 4.5);
  padding: 0 12px;
  min-width: 0;
}

/* Video Wrap & Element */
.ugcc-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  cursor: pointer;
  aspect-ratio: 13/18;
}

/* The active card is a little taller than its neighbours (Figma: 559px vs
   526px, ~6.3% — same proportion applied to our own aspect-ratio here since
   our base ratio isn't Figma's literal pixel values). */
.ugcc-slide--active .ugcc-video-wrap {
  aspect-ratio: 13 / 19.13;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.ugcc-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ugcc-video.ugcc-video--revealed {
  opacity: 1;
}

.ugcc-poster-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ugcc-poster-img.ugcc-poster--hidden {
  opacity: 0;
}

/* Mute Button */
.ugcc-mute-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  /* above .ugcc-products (z-index: 4) so it stays clickable over the product overlay */
  z-index: 5;
  /* !important: host-theme button reset, see .ugcc-atc-btn above */
  background: rgba(0, 0, 0, 0.5) !important;
  border: none !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
  padding: 0;
}

.ugcc-mute-btn:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

.ugcc-icon-mute,
.ugcc-icon-unmute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.ugcc-mute-btn:hover {
  background: rgba(0, 0, 0, 0.7) !important;
}

.ugcc-mute-btn:focus {
  outline: none;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.5) !important;
}

.ugcc-mute-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Product card: overlays the bottom of the video/poster for the active slide
   only (Figma — the card sits ON the image, not in a strip below it). Nested
   inside .ugcc-video-wrap (which is already position:relative + overflow:
   hidden) so it can be positioned against it directly. A gradient scrim
   behind the card keeps it legible over any video frame. Hidden via opacity/
   transform rather than display, so it stays out of layout flow (no height
   change) and the reveal is a transition off the .ugcc-slide--active class
   JS already toggles on slide change — no JS needed for the animation. */
.ugcc-products {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 32px 8px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 35%, transparent 100%);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.ugcc-slide--active .ugcc-products {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ugcc-products--carousel {
  overflow: hidden;
}

.ugcc-products-track {
  display: flex;
  gap: 12px;
  transition: transform 0.3s ease;
  will-change: transform;
  width: 100%;
}

/* Product internal sub-carousel arrows */
.ugcc-products--carousel .ugcc-product-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #555;
  opacity: 1;
}

.ugcc-products--carousel .ugcc-product-arrow:focus,
.ugcc-products--carousel .ugcc-product-arrow:focus-visible,
.ugcc-products--carousel .ugcc-product-arrow:active {
  color: #555;
  opacity: 1;
}

.ugcc-products--carousel .ugcc-product-arrow svg {
  display: block;
}

.ugcc-products--carousel .ugcc-product-arrow--prev {
  left: -8px;
}
.ugcc-products--carousel .ugcc-product-arrow--next {
  right: -8px;
}

/* Single Product Card (Figma: image + name/price/rating, then a small
   circular button linking to the product page — no Add to Cart here). */
.ugcc-product-item {
  flex: 0 0 100%; /* Match exactly the width of the video wrapper */
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.ugcc-products--carousel .ugcc-product-item {
  flex: 0 0 100%; /* If multiple, show 1 at a time in sub-carousel */
}

.ugcc-product-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ugcc-product-img {
  width: 89px;
  height: 89px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
}

.ugcc-product-img-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ugcc-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ugcc-product-info {
  flex: 1;
  min-width: 0;
}

.ugcc-product-name {
  margin: 0 0 2px 0;
  font-family: var(--pdp-font-display, Georgia, "Times New Roman", serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--ugcc-text);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ugcc-product-name-link {
  color: var(--ugcc-text) !important;
  text-decoration: none !important;
}

.ugcc-product-price {
  font-size: 14px;
  color: var(--ugcc-text) !important;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 1.2;
}

.ugcc-product-price del {
  opacity: 0.6;
  margin-right: 4px;
  font-size: 11px;
  text-decoration: line-through !important;
}

.ugcc-product-price del * {
  text-decoration: none !important;
}

.ugcc-product-price ins {
  text-decoration: none !important;
}

.ugcc-product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 0;
}

.ugcc-product-rating svg {
  width: 12px;
  height: 12px;
  color: #d9d9d9; /* empty star */
}

.ugcc-product-rating svg.ugcc-star--full {
  color: var(--ugcc-primary);
}

/* PDP navigation button — plain <a>, not <button>, so it isn't caught by
   the host-theme button reset the way .ugcc-atc-btn/.ugcc-mute-btn were. */
.ugcc-product-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--ugcc-primary);
  color: #fff;
  transition: background-color 0.2s;
}

.ugcc-product-nav-btn:hover {
  background-color: var(--pdp-color-primary-hover, #6f1215);
}

.ugcc-product-nav-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .ugcc-slide {
    flex: 0 0 calc(100% / 3.3);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Break out of container padding so carousel touches viewport edges */
  .ugcc-carousel {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .ugcc-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 16px;
  }

  .ugcc-arrows {
    align-self: flex-end;
  }

  /* Show ~1.3 slides to hint there's more */
  .ugcc-slide {
    flex: 0 0 75%;
    padding: 0 8px;
  }

  /* ~10% taller than 3/5: increase height denominator from 5 to 5.5 */
  .ugcc-video-wrap {
    aspect-ratio: 13/20;
  }

  /* The active card stays ~6% taller than its neighbours here too (the rule above made
     the neighbours taller than the desktop active ratio, so the active one looked shorter). */
  .ugcc-slide--active .ugcc-video-wrap {
    aspect-ratio: 13 / 21.25;
  }
}

/* Phones: a card is only ~55% of the screen wide (the script shows 1.7 cards), so
   the desktop-sized product overlay (89px image, 20px name, 37px button) left the
   name about 40px wide and the mute button sat on top of the stars. Everything in
   the overlay gets smaller, and the mute button moves to the top corner. */
@media (max-width: 768px) {
  /* No scrim behind the white product card on phones. */
  .ugcc-products {
    padding: 8px;
    background: none;
  }

  .ugcc-product-item {
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .ugcc-product-main {
    gap: 6px;
    flex: 1;
  }

  .ugcc-product-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
  }

  .ugcc-product-name {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .ugcc-product-price {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .ugcc-product-price del {
    font-size: 10px;
  }

  .ugcc-product-rating {
    gap: 2px;
  }

  .ugcc-product-rating svg {
    width: 10px;
    height: 10px;
  }

  .ugcc-product-nav-btn {
    width: 26px;
    height: 26px;
  }

  .ugcc-product-nav-btn svg {
    width: 12px;
    height: 12px;
  }

  .ugcc-mute-btn {
    top: 8px;
    right: 8px;
    bottom: auto;
    width: 28px;
    height: 28px;
  }
}

/* "-Name | Place" badge, top-left of the card (Figma). */
.ugcc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  max-width: calc(100% - 56px);
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ugcc-text);
  font-family: var(--font-jost, "Jost", sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ugcc-badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 14px;
  }
}