/**
 * Modeser Products Showcase Widget — one product shown at a time, stepped
 * through via Previous/Next arrows (assets/elementor/products-showcase.js).
 * Every matching product is rendered up front as its own `.mdsproduct-
 * showcase-slide`; only the one carrying `.is-active` is visible.
 *
 * `.mdsproduct-showcase-controls` (the Previous/Next arrows) is a SIBLING of
 * `.mdsproduct-showcase-slides`, not nested inside each slide's content —
 * rendered once for the whole widget instance, not duplicated per product,
 * so it can be positioned independently of the image/content columns.
 */

.mdsproduct-showcase-empty {
  opacity: 0.7;
}

.mdsproduct-showcase-slide {
  display: none;
  gap: 40px;
}

.mdsproduct-showcase-slide.is-active {
  display: flex;
  align-items: stretch;
}

.mdsproduct-showcase-media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.mdsproduct-showcase-image-1 {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
 * The actual photo lives on its OWN inner layer, separate from
 * `.mdsproduct-showcase-image-1` — that outer element is what carries the
 * Transition Animation trigger (Style > Transition Animation; see
 * `data-animation` in products-showcase.js), and CSS only lets ONE rule win
 * for a given `animation-*` longhand property on a given element. Putting
 * Ken Burns' OWN continuous `animation` on the SAME element as that
 * trigger would fight it for `animation-name`/`animation-duration`/
 * `animation-delay` — whichever rule's cascade happened to win would
 * silently blank out the other (e.g. Ken Burns' 20s duration getting
 * overridden down to the entrance animation's ~1s one, or vice versa).
 * Two separate elements means two fully independent `animation-name`s,
 * no collision, and both can be used together.
 */
.mdsproduct-showcase-image-1-media,
.mdsproduct-showcase-image-2 {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.mdsproduct-showcase-image-1-media {
  position: absolute;
  inset: 0;
}

.mdsproduct-showcase-image-2 {
  z-index: 1;
  width: 400px;
  height: 400px;
  background-size: contain;
}

/*
 * Overlay (Style > Image 1/2 Style) targets this ::after rather than the
 * element's own background — the element's background is the PRODUCT PHOTO
 * itself (background-image), so a second layer is needed to tint/darken/
 * cover it without replacing it. `content` is required for the pseudo to
 * render at all; everything the Elementor Background group control's
 * 'selectors' don't cover is static base CSS here.
 */
.mdsproduct-showcase-image-1-media::after,
.mdsproduct-showcase-image-2::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * Image 1's Overlay is the only one with Normal/Hover states (Group_Control_
 * Background used twice — see register_image_1_style_controls()) and an
 * optional Image sub-type of its own, so it gets its own small set of
 * sane image defaults (cover/centered, same as the photo layer beneath it)
 * plus a transition so switching to the Hover variant fades instead of
 * snapping.
 */
.mdsproduct-showcase-image-1-media::after {
  background-size: cover;
  background-position: center center;
  transition: background-color 0.3s ease, background-image 0.3s ease, opacity 0.3s ease;
}

/*
 * Ken Burns (Style > Image 1 Style) — a slow, continuous zoom while the
 * product is showing, on the inner `-media` layer (see above for why not
 * the outer `.mdsproduct-showcase-image-1`). Deliberately plain CSS with no
 * JS trigger: a hidden `.mdsproduct-showcase-slide` is `display: none` (see
 * below), and browsers already reset/stop a CSS animation on a display:none
 * element and restart it from 0% once it's shown again — so switching
 * products via the arrows naturally replays this every time, for free,
 * using the exact same show/hide mechanism already driving everything else
 * in this widget.
 */
@keyframes mdsproduct-showcase-kenburns-in {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
@keyframes mdsproduct-showcase-kenburns-out {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}
.mdsproduct-showcase-image-1-media.mdsproduct-showcase-kenburns-in {
  animation: mdsproduct-showcase-kenburns-in 20s ease-out forwards;
}
.mdsproduct-showcase-image-1-media.mdsproduct-showcase-kenburns-out {
  animation: mdsproduct-showcase-kenburns-out 20s ease-out forwards;
}

/*
 * `.animated` + `!important` mirrors product-card.css's own reasoning:
 * Elementor core's `.animated` class only sets animation-duration (no
 * fill-mode), so without one the element would snap back to its static
 * appearance the instant the transition animation finishes. `both` (not
 * just `forwards`) is required specifically because of Animation Delay:
 * with a positive `animation-delay` and no `backwards` fill, the browser
 * shows the element's NORMAL (fully visible) style for the whole delay
 * window and only jumps to the keyframe's 0% state (typically invisible)
 * the instant the delay ends — a visible "shows up, then vanishes, then
 * plays the entrance" flash. `both` = `backwards` (apply the 0% state
 * throughout the delay too) + `forwards` (hold the 100% state after it
 * finishes) in one declaration. The `!important` specifically defeats the
 * Elementor EDITOR's own editor-preview.min.css, which resets
 * `.animated{animation-fill-mode:none!important}` for ITS OWN scroll-replay
 * preview of entrance animations — that rule doesn't exist on the real
 * frontend.
 */
.mdsproduct-showcase-image-1.animated,
.mdsproduct-showcase-image-2.animated,
.mdsproduct-showcase-title.animated,
.mdsproduct-showcase-slogan.animated,
.mdsproduct-showcase-description.animated,
.mdsproduct-showcase-buttons.animated {
  animation-fill-mode: both !important;
}

.mdsproduct-showcase-content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

.mdsproduct-showcase-text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mdsproduct-showcase-title,
.mdsproduct-showcase-slogan,
.mdsproduct-showcase-description {
  margin: 0;
}

.mdsproduct-showcase-description > *:last-child {
  margin-bottom: 0;
}

/*
 * One button (no variations) or one PER VARIATION side by side (see
 * ProductsShowcase::buildButtonsHtml()) — either way this wrapper just
 * flex-wraps them so a long variation list breaks onto more than one row
 * instead of overflowing the content column.
 */
.mdsproduct-showcase-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mdsproduct-showcase-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #1a1a1a;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mdsproduct-showcase-button:hover {
  background-color: #3f3f3f;
  color: #ffffff;
}

/* Only takes effect once an icon is actually rendered next to the text
   (see ProductsShowcase::buttonInnerHtml()) — `gap` has no visible effect
   on a single-child flex container. */
.mdsproduct-showcase-button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
}

.mdsproduct-showcase-button-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.mdsproduct-showcase-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.mdsproduct-showcase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mdsproduct-showcase-arrow:hover {
  background-color: rgba(0, 0, 0, 0.12);
}

.mdsproduct-showcase-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.mdsproduct-showcase-arrow svg,
.mdsproduct-showcase-arrow i {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

@media (max-width: 1024px) {
  .mdsproduct-showcase-slide.is-active {
    flex-direction: column;
  }

  .mdsproduct-showcase-media,
  .mdsproduct-showcase-content {
    flex: 0 0 auto;
    width: 100%;
  }
}