/* =============================================
   Mizrahnik Floating Widgets — Shared Styles
   Coupon button
   ============================================= */

:root {
  --miz-green: #5FA886;
  --miz-green-dark: #4a8e6e;
  --miz-cream: #FFEEAD;
  --miz-glow: rgba(95, 168, 134, 0.5);
}

/* =============================================
   1. Coupon Button
   ============================================= */

#mizCouponContainer.miz-coupon-container {
  position: fixed;
  z-index: 99999;
  font-family: assistant, sans-serif;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#mizCouponContainer.miz-coupon-container * {
  pointer-events: auto;
}

.miz-coupon-link {
  text-decoration: none;
  display: block;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Desktop (above 768px) */
@media (min-width: 769px) {
  #mizCouponContainer.miz-coupon-container.desktop-pos {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding-left: 15px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  #mizCouponContainer.miz-coupon-container.desktop-pos.hidden {
    transform: translate(calc(100% - 25px), -50%);
  }

  #mizCouponContainer #mizToggleBtn.miz-coupon-toggle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--miz-green) !important;
    border-radius: 50% !important;
    color: var(--miz-green-dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 100000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
  }

  #mizCouponContainer #mizToggleBtn.miz-coupon-toggle svg.miz-chevron {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    display: block !important;
    fill: none !important;
    stroke: var(--miz-green-dark) !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #mizCouponContainer #mizToggleBtn.miz-coupon-toggle svg.miz-chevron path.miz-chevron-path {
    fill: none !important;
    stroke: var(--miz-green-dark) !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
  }

  #mizCouponContainer .miz-coupon-ticket-body {
    padding: 10px 15px 10px 25px;
    border-radius: 50px 0 0 50px;
  }
}

/* Mobile (up to 768px)
   1.2.2: the same motion as 1.2.1, without moving the layout. 1.2.1 animated
   the container's `right` and the body's `width`, so every frame of the
   shrink and of the expand was a layout shift: about 0.005 of CLS per scroll
   past 80px, on every page and every phone, enough on its own to break the
   0.01 budget (measured 28.10.2026 by the Next site's destination e2e). Now
   the pill keeps its full width and its full-pill position, and two
   compositor properties do the moving: `clip-path` closes the visible part
   down to a 48px window around the icon, and `transform` carries that window
   to the corner. At every point of the curve the visible box, the icon and
   the words are exactly where 1.2.1 put them: the window's left edge travels
   in a straight line, the visible width goes from full to 48 evenly, and the
   icon goes from 25px to 10px inside the left edge, as the padding did.
   On a phone the container spans the page (left 0, right 0, no pointer
   events of its own) with the link centred in it. --miz-full-w is the pill's
   measured width, set by the script; 178px is only the fallback
   (Assistant on WordPress measures 179px, Heebo on Next about 194px). */
@media (max-width: 768px) {
  #mizCouponContainer.miz-coupon-container.mobile-pos {
    top: auto;
    bottom: 20px;
    left: 0;
    right: 0;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(-4px 4px 15px var(--miz-glow));
  }

  #mizCouponContainer #mizToggleBtn.miz-coupon-toggle {
    display: none !important;
  }

  /* The clip sits on the link, so what can be tapped is what can be seen.
     The shadow moves from the body (the clip would cut a box-shadow off) to a
     drop-shadow on the container above it, which follows the clipped shape. */
  #mizCouponContainer.mobile-pos .miz-coupon-link {
    position: relative;
    width: var(--miz-full-w, 178px);
    margin: 0 auto;
    clip-path: inset(0 0 0 0 round 24px);
    transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* The clip does the rounding, so the body's own corners are square (its
     rounded end would shave the left of the circle, which sits inside it) and
     its border is kept, transparent, for its 1px. The faint white ring is two
     fixed outlines on the link that cross-fade, the pill's and the circle's
     at the window (on the body, overflow: hidden would cut the pill's top
     and bottom off). Neither moves, so neither shifts. */
  #mizCouponContainer.mobile-pos .miz-coupon-link::before,
  #mizCouponContainer.mobile-pos .miz-coupon-link::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #mizCouponContainer.mobile-pos .miz-coupon-link::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 24px;
  }

  #mizCouponContainer.mobile-pos .miz-coupon-link::after {
    top: 0;
    left: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    opacity: 0;
  }

  #mizCouponContainer.mobile-pos.mini .miz-coupon-link::before {
    opacity: 0;
  }

  #mizCouponContainer.mobile-pos.mini .miz-coupon-link::after {
    opacity: 1;
  }

  /* Fixed height and width, so an inherited line-height (1.7 on Next pages)
     cannot stretch it. The icon is the last item and the content is packed to
     the end, so the icon sits 25px inside the left edge and the circle's
     window is cut around it. */
  #mizCouponContainer.mobile-pos .miz-coupon-ticket-body {
    box-sizing: border-box;
    width: var(--miz-full-w, 178px);
    height: 48px;
    padding: 0 25px;
    gap: 10px;
    border-radius: 0;
    border-color: transparent !important;
    justify-content: flex-end;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
    background-origin: border-box !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    transition: background-size 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #mizCouponContainer.mobile-pos .miz-coupon-ticket-text,
  #mizCouponContainer.mobile-pos .miz-coupon-icon-wrap {
    flex-shrink: 0;
  }

  #mizCouponContainer.mobile-pos .miz-coupon-ticket-text {
    transition: opacity 0.25s linear;
  }

  /* Scrolled: a 48px circle in the bottom-right corner. UserWay keeps the
     bottom-left. The link keeps its aria-label, so nothing is lost to a
     screen reader when the words fade out. The window is [15px, 63px] of the
     pill, which puts the icon (25px in) 10px inside the circle, as 1.2.1's
     10px padding did, and the transform puts the window 16px from the right
     edge: 15px of inset plus 48px of circle plus 16px is the 79px. The
     container spans its containing block, so 50% is half of whatever 1.2.1's
     `right: 50%` and `right: 16px` were measured from, a page wider than the
     screen included, with nothing measured by the script. */
  #mizCouponContainer.miz-coupon-container.mobile-pos.mini {
    transform: translateX(calc(50% + var(--miz-full-w, 178px) / 2 - 79px)) !important;
  }

  #mizCouponContainer.mobile-pos.mini .miz-coupon-link {
    clip-path: inset(0 calc(var(--miz-full-w, 178px) - 63px) 0 15px round 24px);
  }

  /* The gradient is painted over the window only, so the circle shows the
     whole light-to-dark sweep as it did when the body itself was 48px. Paint,
     not layout, so it does not shift anything either. */
  #mizCouponContainer.mobile-pos.mini .miz-coupon-ticket-body {
    background-size: 48px 100% !important;
    background-position: 15px 0 !important;
  }

  #mizCouponContainer.mobile-pos.mini .miz-coupon-ticket-text {
    opacity: 0;
  }
}

/* Set for one reflow while the script changes --miz-full-w, so a new
   measurement snaps instead of animating. */
#mizCouponContainer.miz-no-anim,
#mizCouponContainer.miz-no-anim * {
  transition: none !important;
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #mizCouponContainer.miz-coupon-container.mobile-pos,
  #mizCouponContainer.mobile-pos .miz-coupon-link,
  #mizCouponContainer.mobile-pos .miz-coupon-ticket-body,
  #mizCouponContainer.mobile-pos .miz-coupon-link::before,
  #mizCouponContainer.mobile-pos .miz-coupon-link::after,
  #mizCouponContainer.mobile-pos .miz-coupon-ticket-text {
    transition: none;
  }
}

/* Ticket body */
.miz-coupon-ticket-body {
  background: linear-gradient(135deg, var(--miz-green), var(--miz-green-dark)) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: -4px 4px 15px var(--miz-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Shine effect */
.miz-coupon-ticket-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-150%) skewX(-25deg);
  animation: mizShineLoop 4s infinite;
  z-index: 1;
}

/* 1.2.2: moved by transform, not `left`, so the sweep is never a layout
   shift. The shine is the body's width, so a percentage of its own width is
   the same distance `left` travelled. */
@keyframes mizShineLoop {
  0%   { transform: translateX(-150%) skewX(-25deg); }
  20%  { transform: translateX(150%) skewX(-25deg); }
  100% { transform: translateX(150%) skewX(-25deg); }
}

/* Text + icon */
.miz-coupon-ticket-text {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: transparent !important;
}

.miz-coupon-icon-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: transparent !important;
}

.miz-coupon-svg-icon {
  width: 26px;
  height: 26px;
  fill: #ffffff;
}