/* KARTAP CMS 2.8.2 — page hero controls, social icons, comparison labels, floating actions */

/* Then & Now: labels are anchored independently to opposite corners. */
.before-after-label {
  min-width: 62px;
  text-align: center;
  box-shadow: 0 7px 22px rgb(4 22 32 / 22%);
}
.before-after-label--old { left: 16px !important; right: auto !important; }
.before-after-label--new { right: 16px !important; left: auto !important; }

/* Slider admin badges: order is useful, translation state is useful; neither should look like a stray black chip. */
.slider-sort-badge,
.slider-language-badge {
  z-index: 3;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 7px 20px rgb(3 20 29 / 18%);
  backdrop-filter: blur(10px);
}
.slider-sort-badge {
  color: #fff;
  background: rgb(7 31 45 / 66%);
}
.slider-language-badge--manual {
  color: #173544;
  background: rgb(255 255 255 / 92%);
  border-color: rgb(255 255 255 / 70%);
}
.slider-language-badge--auto {
  color: #075f71;
  background: rgb(230 249 251 / 94%);
  border-color: rgb(12 145 169 / 28%);
}

/* Social icons: normalized optical box and crisp strokes in admin/footer. */
.social-brand-icon {
  display: block;
  overflow: visible;
  flex: 0 0 auto;
}
.social-brand-icon * {
  vector-effect: non-scaling-stroke;
}
.social-brand-icon--youtube,
.social-brand-icon--spotify,
.social-brand-icon--reddit,
.social-brand-icon--pinterest,
.social-brand-icon--whatsapp {
  shape-rendering: geometricPrecision;
}

/* Floating utilities: larger, modern gradients, centered icon geometry. */
.floating-stack {
  width: 64px !important;
  gap: 14px !important;
  right: 24px !important;
  bottom: 24px !important;
}
.floating-button {
  width: 64px !important;
  height: 64px !important;
  flex-basis: 64px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  border: 1px solid rgb(255 255 255 / 28%) !important;
  box-shadow: 0 16px 40px rgb(4 25 35 / 31%), inset 0 1px 0 rgb(255 255 255 / 18%) !important;
  transition: height .32s, margin .32s, opacity .34s, transform .28s ease, box-shadow .28s ease, filter .28s ease !important;
}
.floating-button--whatsapp {
  background: linear-gradient(135deg, #35df7b 0%, #18bd60 48%, #089a48 100%) !important;
}
.floating-button--top {
  background: linear-gradient(135deg, #14a1b8 0%, #0b7186 42%, #071f2d 100%) !important;
}
.floating-button:hover {
  transform: translateY(-3px) scale(1.035) !important;
  box-shadow: 0 20px 46px rgb(4 25 35 / 38%), inset 0 1px 0 rgb(255 255 255 / 22%) !important;
  filter: saturate(1.06);
}
.floating-button svg {
  display: block !important;
  margin: 0 !important;
  transform: none;
}
.floating-button--whatsapp svg {
  width: 31px !important;
  height: 31px !important;
  transform: translateX(.7px) !important;
}
.floating-button--top svg {
  width: 25px !important;
  height: 25px !important;
}
.floating-button > span {
  right: 76px !important;
}
.whatsapp-pulse::before {
  inset: -7px !important;
  border-radius: 24px !important;
  border-color: rgb(33 211 102 / 48%) !important;
}
.floating-action--collapsed {
  height: 0 !important;
  flex-basis: 0 !important;
}

@media (max-width: 640px) {
  .before-after-label--old { left: 12px !important; }
  .before-after-label--new { right: 12px !important; }
  .before-after-label { top: 12px !important; min-width: 56px; padding: 7px 9px !important; }

  .floating-stack {
    width: 60px !important;
    right: 16px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .floating-button {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px !important;
    border-radius: 18px !important;
  }
  .floating-button--whatsapp svg {
    width: 29px !important;
    height: 29px !important;
  }
  .floating-button--top svg {
    width: 24px !important;
    height: 24px !important;
  }
  .whatsapp-pulse::before {
    border-radius: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-button:hover { transform: none !important; }
}