/* Reward content text styling */
.reward-content {
  text-align: center;
  margin: 0 auto 15px auto;
  max-width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.reward-content p {
  font-size: clamp(13px, 2.8vw, 16px);
  line-height: 1.25;
  margin: 2px 0;
  word-break: break-word;
}
/* Clipped image container */
.free-product-image-container {
  position: relative;
  width: min(280px, 90%);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 6px auto;
  overflow: hidden;
}
.free-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    15% 5%, 25% 8%, 35% 5%, 45% 8%, 55% 5%, 65% 7%, 75% 5%,
    100% 20%, 97% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%,
    100% 80%, 85% 95%, 75% 92%, 65% 95%, 50% 92%, 35% 95%,
    25% 92%, 15% 95%, 0% 80%, 3% 70%, 0% 60%, 5% 50%, 0% 40%,
    3% 30%, 0% 20%, 3% 10%
  );
  -webkit-clip-path: polygon(
    15% 5%, 25% 8%, 35% 5%, 45% 8%, 55% 5%, 65% 7%, 75% 5%,
    100% 20%, 97% 30%, 100% 40%, 95% 50%, 100% 60%, 95% 70%,
    100% 80%, 85% 95%, 75% 92%, 65% 95%, 50% 92%, 35% 95%,
    25% 92%, 15% 95%, 0% 80%, 3% 70%, 0% 60%, 5% 50%, 0% 40%,
    3% 30%, 0% 20%, 3% 10%
  );
}

/* Small screens: tighten spacing/sizing for reward content */
@media (max-width: 480px) {
  .reward-content { padding: 0 8px; }
  .reward-content p { margin: 2px 0; font-size: clamp(12px, 3.4vw, 15px); }
  .free-product-image-container { width: min(220px, 85%); }
}
/* Wrapper for scratch canvas */
.scratch-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* avoid seams when rotating */
  background: transparent;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-radius: 12px;
}
canvas.scratchCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: transparent;
  backface-visibility: hidden; /* prevent 1px gaps during transforms */
  transform: translateZ(0);
  border-radius: 12px;
}

/* Gift icon styling */
#giftIcon {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 32px;
  cursor: pointer;
  z-index: 10000;
  user-select: none;
}
/* Ensure inner graphic fills container */
#giftIcon img.gift-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
#giftIcon .gift-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Apply same padding when inline SVG wrapper is used */
#giftIcon .gift-icon-svg {
  width: 100%;
  height: 100%;
}
/* Badge showing count */
#giftIcon .badge {
  position: absolute;
  /* Move badge a bit further away from the icon */
  top: calc(-6px - var(--badge-offset, 6px));
  right: calc(-6px - var(--badge-offset, 6px));
  width: 20px; /* fixed circle */
  height: 20px;
  background: #e53935;
  color: white;
  border-radius: 50%;
  display: block;            /* isolate from parent text metrics */
  padding: 0;                /* keep perfect circle */
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* micro-adjustments for centering across engines */
  --badge-x-nudge: 0.5px; /* move right (+) or left (-) */
  --badge-y-nudge: 0px;   /* move down (+) or up (-) */
}
#giftIcon .badge::after {
  content: attr(data-count);
  position: absolute;
  top: calc(50% + var(--badge-y-nudge, 0px));
  left: calc(50% + var(--badge-x-nudge, 0px));
  transform: translate(-50%, -50%);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Slightly smaller badge on small screens to match icon scale */
@media (max-width: 480px) {
  #giftIcon .badge {
    width: 18px;
    height: 18px;
  }
  #giftIcon .badge::after {
    font-size: 11px;
  }
}

/* Button styling */
button.subscribeButton,
button.subscribeButton.disabled {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
  display: inline-block;
  min-width: 130px;
  text-align: center;
}

/* Inline validation hint below inputs */
.validation-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #d32f2f;
  line-height: 1.3;
  display: none;
}

/* Tooltip-style validation bubble (top of popup; no layout shift) */
.validation-tooltip {
  position: fixed; /* use viewport coords from getBoundingClientRect */
  background: #2a2a2a;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 2147483647; /* on top of anything */
  pointer-events: none;
  display: none;
}
.validation-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px; /* arrow points down to the popup */
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: #2a2a2a;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}
.validation-tooltip.below::after {
  bottom: auto;
  top: -5px; /* when placed inside popup at top */
}
button.subscribeButton.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button.subscribeButton:hover:not(.disabled) {
  background-color: #0056b3;
}

/* Post-scratch: center title, message, and apply button nicely */
.post-scratch-center [class*='header-section'],
.post-scratch-center [class*='reward-content'],
.post-scratch-center [class*='subscribeButton'],
.post-scratch-center [class*='header-section'] *,
.post-scratch-center [class*='reward-content'] * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.post-scratch-center [class*='header-section'] { margin-top: 8px; margin-bottom: 8px; padding: 0 12px; }
.post-scratch-center [class*='reward-content'] { margin-top: 8px; margin-bottom: 8px; padding: 0 12px; }
.post-scratch-center [class*='subscribeButton'] { display: inline-block; margin: 8px auto; }

/* Space items evenly vertically within the section */
.post-scratch-center .content-wrapper {
  display: flex !important;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 12px;
  height: 100%;
  min-height: 100%;
}
/* Ensure the textual section distributes items evenly */
.post-scratch-center [class*='text-section'],
.post-scratch-center [class*='right-section'],
.post-scratch-center [class*='top-section'],
.post-scratch-center [class*='bottom-section'] {
  display: flex !important;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  min-height: 100%;
}
/* Give even vertical breathing room to the three key elements */
.post-scratch-center [class*='header-section'],
.post-scratch-center [class*='reward-content'],
.post-scratch-center [class*='subscribeButton'] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Mobile refinements: tighter spacing (keep original font sizes) */
@media (max-width: 480px) {
  /* General popup container target (works for left/right suffixes) */
  [class*='popup-container'] .content-wrapper {
    gap: 8px !important;
    padding: 8px !important;
  }
  /* Post-scratch: keep elements together instead of stretching to bottom */
  .post-scratch-center .content-wrapper,
  .post-scratch-center [class*='text-section'],
  .post-scratch-center [class*='right-section'],
  .post-scratch-center [class*='top-section'],
  .post-scratch-center [class*='bottom-section'] {
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .post-scratch-center [class*='header-section'],
  .post-scratch-center [class*='reward-content'],
  .post-scratch-center [class*='subscribeButton'] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .post-scratch-center [class*='subscribeButton'] {
    margin: 6px auto 8px auto !important;
  }
  /* Inputs */
  [class*='popup-container'] input[type="email"],
  [class*='popup-container'] input[type="tel"],
  [class*='popup-container'] input[type="text"] {
    padding: 8px 10px !important;
    margin: 4px 0 !important;
  }
  /* Subscribe / Apply button */
  [class*='popup-container'] .subscribeButton,
  [class*='popup-container'] button.subscribeButton {
    padding: 8px 14px !important;
    margin: 6px auto !important;
  }
  /* Post-scratch centered layout adjustments */
  .post-scratch-center [class*='header-section'] { padding: 0 10px !important; }
  .post-scratch-center [class*='reward-content'] { padding: 0 10px !important; }
  /* Make post-scratch title/message/button breathe a bit more */
  .post-scratch-center [class*='header-section'],
  .post-scratch-center [class*='reward-content'],
  .post-scratch-center .subscribeButton {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .post-scratch-center .subscribeButton { margin: 10px auto !important; }
}
/* Entry animation: spin + drop + crash bounce */
@keyframes spinDropCrash {
  0%   { transform: translateY(-120vh) rotate(-360deg) scale(0.85); opacity: 0; }
  60%  { transform: translateY(8px) rotate(-20deg)  scale(1.05);  opacity: 1; }
  80%  { transform: translateY(-6px) rotate(6deg)   scale(0.98);  opacity: 1; }
  100% { transform: translateY(0)     rotate(0deg)   scale(1);     opacity: 1; }
}
.enter-spin-crash {
  animation: spinDropCrash 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
  transform-origin: center;
  backface-visibility: hidden;
}

/* Continuous spin loop until reward ready (pure rotate) */
@keyframes spinLoop {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.enter-spin-loop {
  animation: spinLoop 900ms linear infinite;
  transform-origin: center;
  will-change: transform;
  backface-visibility: visible;
}

/* Tornado-style flip loop: front/back (rotateY) + zigzag + depth (translateZ) */
@keyframes flipLoop {
  0%   { transform: translate3d(  0px,   0px,   0px) rotateY(   0deg) rotateX(10deg) rotateZ( 0deg) scale(1); }
  10%  { transform: translate3d(  8px,  -6px,  40px) rotateY( 180deg) rotateX( 9deg) rotateZ( 3deg) scale(1.01); }
  25%  { transform: translate3d(  0px, -10px, -25px) rotateY( 360deg) rotateX(10deg) rotateZ( 0deg) scale(0.995); }
  40%  { transform: translate3d( -10px, -6px,  55px) rotateY( 540deg) rotateX( 9deg) rotateZ(-3deg) scale(1.01); }
  55%  { transform: translate3d(  0px,  -4px, -35px) rotateY( 630deg) rotateX(10deg) rotateZ( 0deg) scale(1.005); }
  70%  { transform: translate3d(  10px, -2px,  45px) rotateY( 720deg) rotateX( 9deg) rotateZ( 2deg) scale(1.01); }
  85%  { transform: translate3d(  -8px, -3px, -20px) rotateY( 810deg) rotateX( 9deg) rotateZ(-2deg) scale(1.0); }
  100% { transform: translate3d(   0px,  0px,   0px) rotateY( 900deg) rotateX(10deg) rotateZ( 0deg) scale(1); }
}
.enter-flip-loop {
  animation: flipLoop 680ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
  transform-origin: center;
  will-change: transform;
  backface-visibility: visible; /* keep back face visible during Y flips */
}

/* Rapid front/back flash flip */
@keyframes rapidFlipLoop {
  0%   { transform: rotateY(0deg)    scale(1); }
  16%  { transform: rotateY(180deg)  scale(0.96); }
  33%  { transform: rotateY(360deg)  scale(1.02); }
  50%  { transform: rotateY(540deg)  scale(0.97); }
  66%  { transform: rotateY(720deg)  scale(1.02); }
  83%  { transform: rotateY(900deg)  scale(0.97); }
  100% { transform: rotateY(1080deg) scale(1); }
}
.enter-rapid-flip-loop {
  animation: rapidFlipLoop 520ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
  transform-origin: center;
  will-change: transform;
  backface-visibility: visible;
}

/* New: gentle zoom pulse loop (no rotation) */
@keyframes zoomPulseLoop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.enter-zoom-pulse-loop {
  animation: zoomPulseLoop 1200ms ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

/* Slot reel: horizontal loop (left ↔ right with subtle easing) */
@keyframes reelHLoop {
  0%   { transform: translate3d(-130vw, 0, 0); }
  100% { transform: translate3d( 130vw, 0, 0); }
}
.enter-reel-h-loop {
  animation: reelHLoop 260ms linear infinite;
  transform-origin: center;
  will-change: transform;
}

/* Slot reel: vertical loop (top ↔ bottom with subtle easing) */
@keyframes reelVLoop {
  0%   { transform: translate3d(0, -130vh, 0); }
  100% { transform: translate3d(0,  130vh, 0); }
}
.enter-reel-v-loop {
  animation: reelVLoop 320ms linear infinite;
  transform-origin: center;
  will-change: transform;
}

/* Ensure section-level transforms behave predictably */
.spin-section {
  /* Keep original layout; only influence transform behavior */
  transform-origin: center center;
  will-change: transform;
  border-radius: 12px;
  overflow: hidden;
  background-clip: padding-box;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Decelerating spin stop (2–3s) */
@keyframes spinSlowStop {
  0%   { transform: rotate(-720deg) scale(0.98); }
  70%  { transform: rotate(-20deg)  scale(1.03); }
  85%  { transform: rotate(6deg)    scale(0.995); }
  100% { transform: rotate(0deg)    scale(1); }
}
.enter-spin-slow-stop {
  animation-name: spinSlowStop;
  animation-duration: 2200ms; /* tweaked by JS if needed */
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
}

/* Flip slow stop: decelerate rotateY and bring zigzag/depth to rest */
@keyframes flipSlowStop {
  0%   { transform: translate3d( 0px, -8px,  40px) rotateY(-720deg) rotateX(10deg) rotateZ(0deg)  scale(0.98); }
  60%  { transform: translate3d( 2px, -3px, -20px) rotateY( -60deg) rotateX( 9deg) rotateZ(0deg)  scale(1.03); }
  80%  { transform: translate3d(-1px, -1px,  10px) rotateY(  12deg) rotateX( 9deg) rotateZ(0deg)  scale(0.995); }
  100% { transform: translate3d( 0px,  0px,   0px) rotateY(   0deg) rotateX(10deg) rotateZ(0deg)  scale(1); }
}
.enter-flip-slow-stop {
  animation-name: flipSlowStop;
  animation-duration: 2200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
  backface-visibility: visible;
}

@keyframes rapidFlipSlowStop {
  0%   { transform: rotateY(-720deg) scale(0.96); }
  60%  { transform: rotateY(-30deg)  scale(1.03); }
  80%  { transform: rotateY(14deg)   scale(0.99); }
  100% { transform: rotateY(0deg)    scale(1); }
}
.enter-rapid-flip-stop {
  animation-name: rapidFlipSlowStop;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
  backface-visibility: visible;
}

/* New: zoom crash stop (no rotation) */
@keyframes zoomCrashStop {
  0%   { transform: scale(1.08); }
  65%  { transform: scale(0.96); }
  85%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.enter-zoom-crash-stop {
  animation-name: zoomCrashStop;
  animation-duration: 2200ms; /* overridden by JS */
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
}

/* Reel slow stop: gently land to center */
@keyframes reelHSlowStop {
  0%   { transform: translate3d(12px, 0, 0); }
  70%  { transform: translate3d(-4px, 0, 0); }
  85%  { transform: translate3d(2px, 0, 0); }
  100% { transform: translate3d(0px, 0, 0); }
}
.enter-reel-h-stop {
  animation-name: reelHSlowStop;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
}

@keyframes reelVSlowStop {
  0%   { transform: translate3d(0, 14px, 0); }
  70%  { transform: translate3d(0, -5px, 0); }
  85%  { transform: translate3d(0,  2px, 0); }
  100% { transform: translate3d(0,  0px, 0); }
}
.enter-reel-v-stop {
  animation-name: reelVSlowStop;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  will-change: transform;
  transform-origin: center;
}

/* Canvas shine pulse to hint scratching */
@keyframes canvasShinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,152,219,0.0); }
  40%  { box-shadow: 0 0 18px 6px var(--glow-color, #3498db); }
  70%  { box-shadow: 0 0 10px 2px rgba(52,152,219,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(52,152,219,0.0); }
}
.scratch-highlight {
  animation: canvasShinePulse 1200ms ease-in-out 2;
  border-radius: 8px; /* slightly soften the glow */
}

/* Continuous shine loop to cue scratching */
@keyframes shineLoop {
  0%   { box-shadow: 0 0 0 0 rgba(52,152,219,0.0); }
  50%  { box-shadow: 0 0 20px 8px var(--glow-color, #3498db); }
  100% { box-shadow: 0 0 0 0 rgba(52,152,219,0.0); }
}
.scratch-shine-loop {
  animation: shineLoop 1500ms ease-in-out infinite;
  border-radius: 10px;
}

/* Below-popup Apply button container */
.apply-below-container {
  position: fixed;
  transform: translateX(-50%);
  z-index: 2147483647; /* ensure above any overlay */
  pointer-events: auto;
}

/* Compact consent message sizing across popups */
[class*='popup-container'] .consent-message {
  font-size: 9px !important;
  line-height: 1.3 !important;
}
@media (max-width: 480px) {
  [class*='popup-container'] .consent-message {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }
}

/* Guard against store theme typography overrides */
[class*='popup-container'] {
  font-family: var(--font-family, system-ui, -apple-system, Segoe UI, Arial, sans-serif) !important;
}
/* Ensure generic theme p/h overrides don’t leak in; specific sizes are set in orientation CSS with !important */
[class*='popup-container'] p,
[class*='popup-container'] h1,
[class*='popup-container'] h2,
[class*='popup-container'] h3,
[class*='popup-container'] h4,
[class*='popup-container'] h5,
[class*='popup-container'] h6,
[class*='popup-container'] button,
[class*='popup-container'] input,
[class*='popup-container'] label,
[class*='popup-container'] a,
[class*='popup-container'] span {
  font-family: inherit !important;
}

/* Normalize consent text size across checkbox on/off variants */
[class*='popup-container'] .consent-message,
[class*='popup-container'] .consent-message-only,
[class*='popup-container'] .consent-message-only p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Align consent message with the checkbox */
[class*='popup-container'] .consent-container {
  align-items: center !important; /* vertically center label with checkbox */
  gap: 6px; /* keep a small gap between box and text */
}
[class*='popup-container'] .consent-checkbox {
  margin-top: 0 !important; /* remove top nudge from orientation CSS */
  vertical-align: middle;
  width: 16px !important;
  height: 16px !important;
  transform: none !important; /* neutralize any scale() from theme/orientation */
}
[class*='popup-container'] .consent-message {
  margin: 0 0 0 0; /* reset any inherited margins */
  display: inline-block;
}

/* Pulse glow to indicate required consent (use consent color) — softened */
@keyframes consentPulseGlow {
  0%   { box-shadow: 0 0 0 0 var(--consent-message-color, #666); opacity: .9; }
  35%  { box-shadow: 0 0 8px 3px var(--consent-message-color, #666); opacity: 1; }
  65%  { box-shadow: 0 0 5px 2px var(--consent-message-color, #666); opacity: .98; }
  100% { box-shadow: 0 0 0 0 var(--consent-message-color, #666); opacity: 1; }
}
[class*='popup-container'] .consent-checkbox.consent-pulse {
  animation: consentPulseGlow 1200ms ease-out 2;
  border-radius: 4px;
}
[class*='popup-container'] .consent-container.consent-pulse {
  animation: consentPulseGlow 1200ms ease-out 2;
  border-radius: 6px;
  /* remove background tint to avoid boxy corners */
  background-color: transparent;
}

/* Provide a local shake animation so it works on storefront as well */
@keyframes inlineShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
[class*='popup-container'] .shake {
  animation: inlineShake 320ms ease-in-out 1;
}
/* Phone field alignment and visuals */
.phone-field,
[class^="phone-field-wrapper-"] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.phoneCountry,
[class^="phoneCountry-"] {
  min-width: 112px;
  height: 40px;
  padding: 10px 12px 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}
.dialPrefix,
[class^="dialPrefix-"] {
  color: #8a8a8a;
  white-space: nowrap;
}
.phoneInput,
[class^="phoneInput-"] {
  height: 40px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  flex: 1;
}
.flag-picker,
[class^="flag-picker-"] {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.flag-panel,
[class^="flag-panel-"] {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 6px;
  max-height: 220px;
  overflow: auto;
  z-index: 99999;
}