/**
 * Facade stills: original marketing pages keep full artwork visible inside frames.
 * Mirrored HTML used object-cover / cover in many places — that crops aggressively at some viewports.
 */

/* i18n: restore visibility after krak-i18n-boot.js (pending hides #root in head.php for non-RU) */
html.krak-i18n-ready #root {
  visibility: visible;
}

/* Rounded “phone / card” tiles in carousels (808×1010 stills, class aspect-4/5) */
div.overflow-hidden.rounded-3xl.shadow-sm:has(> picture.krak-image[class*="aspect-4/5"]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.overflow-hidden.rounded-3xl.shadow-sm:has(> picture.krak-image[class*="aspect-4/5"]) > picture.krak-image {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 100%;
  align-items: center;
  justify-content: center;
}

div.overflow-hidden.rounded-3xl.shadow-sm:has(> picture.krak-image[class*="aspect-4/5"]) > picture.krak-image img.krak-image {
  object-fit: contain !important;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
  /* width: auto !important;
  height: auto !important; */
}

/* Footer / nav: large SVG assets inside small square wrappers */
.krak-footer .krak-image-svg,
header .krak-image-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.krak-footer .krak-image-svg img,
header .krak-image-svg img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* CMS blocks: raster stills — override inline object-fit:cover on mirrored markup */
.krak-components picture.krak-image > img.krak-image,
.krak-component picture.krak-image > img.krak-image {
  object-fit: contain !important;
}

/* Spend / Send / Grow SVG watermarks — scroll-in (requires html.js-krak-wm from inline snippet in head) */
html.js-krak-wm .krak-watermark-word:not(.krak-watermark-word--visible) {
  opacity: 0 !important;
  transform: translate3d(0, 36px, 0) !important;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}

html.js-krak-wm .krak-watermark-word.krak-watermark-word--visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js-krak-wm .krak-watermark-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* FAQ / accordion: static HTML has no React — open state via .krak-accordion-open */
[id^="content-accordion-item-"].krak-accordion-open {
  max-height: min(4800px, 500vh) !important;
  opacity: 1 !important;
}

button[id^="accordion-item-"] [data-testid="chevron-down"] svg {
  transition: transform 0.25s ease;
  transform-origin: center;
}

button[id^="accordion-item-"].krak-accordion-open [data-testid="chevron-down"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  button[id^="accordion-item-"] [data-testid="chevron-down"] svg {
    transition: none;
  }
}