/* TapFor5 v6 — explicit product-media contract and rebuilt phone journey. */

/* Every product image is identified in the DOM and obeys one non-cropping contract. */
img[data-product-media] {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
  background: #f4efe7;
  transition: filter .35s ease !important;
}

.concept-media,
.gallery-main,
.gallery-thumbs button,
.step-visual,
.bundle-media,
.context-card,
.comparison-card img[data-product-media],
.format-option img[data-product-media],
.cart-line img[data-product-media],
.checkout-product-line img[data-product-media] {
  isolation: isolate;
}

.concept-media {
  display: grid;
  place-items: center;
}

.concept-media > img[data-product-media] {
  width: 100%;
  height: 100%;
  padding: clamp(18px, 3vw, 38px) !important;
}

.gallery-main > .concept-media,
.story-image,
.package-image,
.offer-media > .concept-media,
.moment-visual > .concept-media {
  width: 100%;
  height: 100%;
}

.gallery-main img[data-product-media],
.story-image img[data-product-media],
.package-image img[data-product-media],
.offer-media img[data-product-media],
.moment-visual img[data-product-media] {
  padding: clamp(22px, 4vw, 52px) !important;
}

.comparison-card img[data-product-media] {
  width: 100%;
  height: 100%;
  padding: clamp(14px, 2vw, 24px) !important;
}

.format-option img[data-product-media],
.gallery-thumbs img[data-product-media],
.cart-line img[data-product-media],
.checkout-product-line img[data-product-media] {
  padding: 8px !important;
}

.bundle-media img[data-product-media] {
  width: 100%;
  height: 100%;
  padding: clamp(20px, 3vw, 38px) !important;
}

.context-card img[data-product-media] {
  position: relative;
  inset: auto;
  flex: 0 0 340px;
  width: 100%;
  height: 340px;
  padding: clamp(16px, 2.2vw, 26px) !important;
}

.step-visual img[data-product-media] {
  width: 100%;
  height: 100%;
  padding: clamp(12px, 1.8vw, 20px) !important;
}

.demo-scene-photo[data-product-media] {
  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 54px) !important;
  animation: tf5SceneLightV6 11.2s ease-in-out infinite !important;
  will-change: filter;
}

.concept-media:hover img[data-product-media],
.comparison-card:hover img[data-product-media],
.mixed-bundle-card:hover img[data-product-media],
.context-card:hover img[data-product-media],
.steps-v2 article:hover img[data-product-media] {
  transform: none !important;
  filter: brightness(1.012) saturate(1.012);
}

.gallery-concept {
  animation: tf5MediaEnterV6 .38s ease-out both !important;
}

@keyframes tf5MediaEnterV6 {
  from { opacity: .45; }
  to { opacity: 1; }
}

@keyframes tf5SceneLightV6 {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.015) saturate(1.008); }
}

/* Rebuilt sequence: white phone → approach → notification → review → five stars → send. */
.demo-phone,
.demo-large .demo-phone {
  --tf5-phone-approach: clamp(42px, 7vw, 96px);
  top: 12%;
  right: auto;
  left: 4%;
  width: clamp(184px, 17vw, 218px);
  height: auto;
  aspect-ratio: 225 / 458;
  opacity: 1 !important;
  visibility: visible !important;
  transform-origin: center center;
  animation: tf5WhitePhoneJourney 11.2s cubic-bezier(.45, 0, .2, 1) infinite !important;
  will-change: transform;
}

.demo-large .demo-phone {
  left: 8%;
}

.phone-shell {
  position: relative;
  height: 100%;
  padding: 8px 8px 13px;
  overflow: hidden;
  border: 2px solid #e2e5ea;
  border-radius: 38px;
  background: linear-gradient(145deg, #fff, #f1f2f4);
  box-shadow:
    0 34px 72px rgba(7, 19, 39, .28),
    0 0 0 1px rgba(7, 19, 39, .18);
  transform: rotate(-2deg);
}

.phone-screen {
  position: relative;
  height: 100%;
  padding: 16px 12px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(7, 19, 39, .14);
  border-radius: 30px;
  color: #0b1d3a;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 197, 49, .2), transparent 29%),
    linear-gradient(155deg, #d9e6f8 0%, #f9fbff 50%, #dce7f6 100%);
}

.phone-speaker {
  z-index: 12;
  top: 9px;
  width: 72px;
  height: 19px;
  border-radius: 0 0 14px 14px;
  background: #101827;
}

.phone-home-indicator {
  position: absolute;
  z-index: 14;
  right: 38%;
  bottom: 5px;
  left: 38%;
  height: 4px;
  border-radius: 999px;
  background: #1f2939;
}

.phone-status {
  position: relative;
  z-index: 9;
  color: #17243a;
}

.phone-wallpaper {
  opacity: 1;
  animation: tf5WallpaperV6 11.2s ease-in-out infinite !important;
}

.phone-notification {
  z-index: 10;
  top: 44px;
  right: 12px;
  left: 12px;
  padding: 10px;
  border: 1px solid rgba(11, 29, 58, .1);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 36px rgba(11, 29, 58, .18);
  opacity: 0;
  transform: translateY(-12px) scale(.96);
  animation: tf5NotificationV6 11.2s ease-in-out infinite !important;
}

.phone-notification img {
  object-fit: contain;
  background: #fff;
}

.review-sheet {
  z-index: 11;
  height: 72%;
  padding: 18px 15px 15px;
  border: 1px solid rgba(11, 29, 58, .08);
  background: #fff;
  box-shadow: 0 -12px 42px rgba(11, 29, 58, .14);
  opacity: 0;
  transform: translateY(108%);
  animation: tf5ReviewOpenV6 11.2s cubic-bezier(.22, 1, .36, 1) infinite !important;
}

.review-form {
  opacity: 1;
  transform: scale(1);
  animation: tf5ReviewFormV6 11.2s ease-in-out infinite !important;
}

.review-stars span {
  color: #c8ced8;
  text-shadow: none;
  transform: scale(.92);
}

.review-stars span:nth-child(1) { animation: tf5Star1V6 11.2s ease-in-out infinite !important; }
.review-stars span:nth-child(2) { animation: tf5Star2V6 11.2s ease-in-out infinite !important; }
.review-stars span:nth-child(3) { animation: tf5Star3V6 11.2s ease-in-out infinite !important; }
.review-stars span:nth-child(4) { animation: tf5Star4V6 11.2s ease-in-out infinite !important; }
.review-stars span:nth-child(5) { animation: tf5Star5V6 11.2s ease-in-out infinite !important; }

.review-submit {
  color: #7b8495;
  background: #e5e8ed;
  animation: tf5SubmitV6 11.2s ease-in-out infinite !important;
}

.review-confirmation {
  opacity: 0;
  transform: scale(.94);
  animation: tf5ConfirmationV6 11.2s ease-in-out infinite !important;
}

.tap-ripple {
  animation: tf5TapRippleV6 11.2s cubic-bezier(.2, .8, .2, 1) infinite !important;
}

.ripple-two {
  animation-delay: .18s !important;
}

@keyframes tf5WhitePhoneJourney {
  0%, 6% { transform: translate3d(0, 4px, 0) rotate(-1.3deg); }
  20%, 92% { transform: translate3d(var(--tf5-phone-approach), -2px, 0) rotate(.35deg); }
  97%, 100% { transform: translate3d(0, 4px, 0) rotate(-1.3deg); }
}

@keyframes tf5WallpaperV6 {
  0%, 33% { opacity: 1; transform: scale(1); }
  39%, 96% { opacity: .52; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tf5NotificationV6 {
  0%, 20% { opacity: 0; transform: translateY(-12px) scale(.96); }
  24%, 32% { opacity: 1; transform: translateY(0) scale(1); }
  35% { opacity: 1; transform: translateY(2px) scale(.965); }
  38%, 100% { opacity: 0; transform: translateY(-2px) scale(.965); }
}

@keyframes tf5ReviewOpenV6 {
  0%, 34% { opacity: 0; transform: translateY(108%); }
  40%, 96% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(108%); }
}

@keyframes tf5ReviewFormV6 {
  0%, 82% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(.98); }
}

@keyframes tf5Star1V6 {
  0%, 48% { color: #c8ced8; transform: scale(.92); }
  52%, 96% { color: #f2bd35; transform: scale(1); text-shadow: 0 3px 9px rgba(242, 189, 53, .28); }
  100% { color: #c8ced8; transform: scale(.92); }
}

@keyframes tf5Star2V6 {
  0%, 54% { color: #c8ced8; transform: scale(.92); }
  58%, 96% { color: #f2bd35; transform: scale(1); text-shadow: 0 3px 9px rgba(242, 189, 53, .28); }
  100% { color: #c8ced8; transform: scale(.92); }
}

@keyframes tf5Star3V6 {
  0%, 60% { color: #c8ced8; transform: scale(.92); }
  64%, 96% { color: #f2bd35; transform: scale(1); text-shadow: 0 3px 9px rgba(242, 189, 53, .28); }
  100% { color: #c8ced8; transform: scale(.92); }
}

@keyframes tf5Star4V6 {
  0%, 66% { color: #c8ced8; transform: scale(.92); }
  70%, 96% { color: #f2bd35; transform: scale(1); text-shadow: 0 3px 9px rgba(242, 189, 53, .28); }
  100% { color: #c8ced8; transform: scale(.92); }
}

@keyframes tf5Star5V6 {
  0%, 72% { color: #c8ced8; transform: scale(.92); }
  76%, 96% { color: #f2bd35; transform: scale(1); text-shadow: 0 3px 9px rgba(242, 189, 53, .28); }
  100% { color: #c8ced8; transform: scale(.92); }
}

@keyframes tf5SubmitV6 {
  0%, 74% { color: #7b8495; background: #e5e8ed; transform: scale(1); box-shadow: none; }
  77%, 80% { color: #fff; background: #246bfe; transform: scale(1); box-shadow: 0 8px 18px rgba(36, 107, 254, .2); }
  82% { color: #fff; background: #1d5edc; transform: scale(.96); box-shadow: 0 3px 8px rgba(36, 107, 254, .15); }
  84%, 100% { color: #fff; background: #246bfe; transform: scale(1); }
}

@keyframes tf5ConfirmationV6 {
  0%, 84% { opacity: 0; transform: scale(.94); }
  88%, 96% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.97); }
}

@keyframes tf5TapRippleV6 {
  0%, 15% { opacity: 0; transform: scale(.42); }
  21% { opacity: .64; }
  32%, 100% { opacity: 0; transform: scale(1.55); }
}

@media (max-width: 980px) {
  .concept-media > img[data-product-media] {
    padding: 24px !important;
  }

  .context-card img[data-product-media] {
    flex-basis: 310px;
    height: 310px;
    padding: 18px !important;
  }

  .demo-phone,
  .demo-large .demo-phone {
    --tf5-phone-approach: 54px;
    left: 4%;
    width: 176px;
  }
}

@media (max-width: 720px) {
  .concept-media > img[data-product-media],
  .gallery-main img[data-product-media],
  .story-image img[data-product-media],
  .package-image img[data-product-media],
  .offer-media img[data-product-media],
  .moment-visual img[data-product-media] {
    padding: 18px !important;
  }

  .comparison-card img[data-product-media],
  .bundle-media img[data-product-media] {
    padding: 15px !important;
  }

  .context-card img[data-product-media] {
    flex-basis: 270px;
    height: 270px;
    padding: 14px !important;
  }

  .demo-scene-photo[data-product-media] {
    padding: 18px !important;
  }

  .demo-phone,
  .demo-large .demo-phone {
    --tf5-phone-approach: 30px;
    top: 15%;
    left: 1.5%;
    width: 148px;
  }

  .review-sheet {
    padding: 14px 11px 11px;
  }

  .review-sheet .review-form > strong {
    margin: 9px 0 8px;
    font-size: 10px;
  }

  .review-stars {
    gap: 1px;
    margin: 3px 0 8px;
  }

  .review-stars span {
    font-size: 17px;
  }

  .review-comment-preview {
    min-height: 31px;
    padding: 7px;
  }

  .review-submit {
    min-height: 28px;
    font-size: 7px;
  }
}

@media (max-width: 420px) {
  .format-option img[data-product-media],
  .gallery-thumbs img[data-product-media],
  .cart-line img[data-product-media],
  .checkout-product-line img[data-product-media] {
    padding: 5px !important;
  }

  .demo-phone,
  .demo-large .demo-phone {
    --tf5-phone-approach: 22px;
    width: 138px;
  }
}

@media (prefers-reduced-motion: reduce) {
  img[data-product-media],
  .gallery-concept,
  .demo-phone,
  .phone-wallpaper,
  .phone-notification,
  .review-sheet,
  .review-form,
  .review-stars span,
  .review-submit,
  .review-confirmation,
  .tap-ripple {
    animation: none !important;
    transition: none !important;
  }

  .demo-phone,
  .review-sheet,
  .review-form {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .phone-notification,
  .review-confirmation,
  .tap-ripple {
    opacity: 0 !important;
  }

  .review-stars span {
    color: #f2bd35 !important;
    transform: none !important;
  }

  .review-submit {
    color: #fff !important;
    background: #246bfe !important;
  }
}