/* ==========================================================================
   SPRYTEK MASCOT STYLES - V2 FIXED LAYOUT
   Sprytna Paczka - Mascot CSS Module
   RULE: Sprytek ALWAYS on the RIGHT side of text on desktop
   ========================================================================== */

/* ==========================================================================
   BASE CONTAINER - TRANSPARENT, NO BACKGROUND
   ========================================================================== */

.sprytek {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  /* CRITICAL: No background, transparent */
  background: transparent !important;
  background-color: transparent !important;
}

.sprytek-container {
  background: transparent !important;
  background-color: transparent !important;
}

.sprytek-safe {
  /* Ensure no white background from parent */
  background: transparent !important;
}

.sprytek img {
  object-fit: contain;
  object-position: center bottom;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* Preserve natural colors - no filters */
  filter: none;
  /* Prevent CLS */
  aspect-ratio: 1 / 1;
  /* CRITICAL: Transparent background */
  background: transparent !important;
}

/* Subtle shadow under mascot */
.sprytek::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

/* No shadow variant */
.sprytek--no-shadow::after {
  display: none !important;
}

/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */

/* Hero - Large */
.sprytek--hero {
  max-width: 280px;
}

@media (min-width: 768px) {
  .sprytek--hero {
    max-width: 360px;
  }
}

@media (min-width: 1024px) {
  .sprytek--hero {
    max-width: 420px;
  }
}

/* Section - Medium */
.sprytek--section {
  max-width: 120px;
}

@media (min-width: 768px) {
  .sprytek--section {
    max-width: 160px;
  }
}

@media (min-width: 1024px) {
  .sprytek--section {
    max-width: 200px;
  }
}

/* Small - for tips/info boxes */
.sprytek--small {
  max-width: 64px;
}

@media (min-width: 768px) {
  .sprytek--small {
    max-width: 80px;
  }
}

/* Warning - subdued */
.sprytek--warning {
  max-width: 140px;
}

@media (min-width: 768px) {
  .sprytek--warning {
    max-width: 180px;
  }
}

/* ==========================================================================
   HOVER EFFECTS (Desktop only)
   ========================================================================== */

@media (min-width: 1024px) {
  .sprytek--hoverable {
    transition: transform 0.25s ease-out;
  }
  
  .sprytek--hoverable:hover {
    transform: scale(1.03);
  }
  
  /* Parent hover effect for cards */
  .sprytek-hover-parent:hover .sprytek--hoverable {
    transform: scale(1.03);
  }
}

/* No hover for warning sections */
.sprytek--no-hover {
  transition: none !important;
}

.sprytek--no-hover:hover {
  transform: none !important;
}

/* ==========================================================================
   CRITICAL: LAYOUT RULES - SPRYTEK ALWAYS RIGHT
   ========================================================================== */

/* Base layout container - text left, sprytek right */
.sprytek-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

/* Desktop: Sprytek on the RIGHT */
@media (min-width: 1024px) {
  .sprytek-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .sprytek-layout .sprytek-content {
    flex: 1;
    text-align: left;
  }
  
  .sprytek-layout .sprytek-mascot {
    flex-shrink: 0;
    margin-left: 2rem;
    order: 1; /* Force to right */
  }
}

/* Mobile: Sprytek below, right-aligned */
@media (max-width: 1023px) {
  .sprytek-layout {
    text-align: center;
  }
  
  .sprytek-layout .sprytek-mascot {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-right: 1rem;
  }
}

/* ==========================================================================
   SECTION-SPECIFIC LAYOUTS
   ========================================================================== */

/* How it works section */
.sprytek-how-it-works {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .sprytek-how-it-works {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .sprytek-how-it-works .sprytek {
    order: 1;
    margin-left: 2rem;
  }
}

@media (max-width: 1023px) {
  .sprytek-how-it-works .sprytek {
    align-self: flex-end;
    margin-right: 1rem;
  }
}

/* Why us section */
.sprytek-why-us-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .sprytek-why-us-container {
    flex-direction: row;
    align-items: flex-start;
  }
  
  .sprytek-why-us-container .sprytek {
    order: 1;
    margin-left: 2rem;
  }
}

@media (max-width: 1023px) {
  .sprytek-why-us-container .sprytek {
    align-self: flex-end;
    margin-right: 1rem;
  }
}

/* ==========================================================================
   FAQ SECTION - Sprytek on RIGHT
   ========================================================================== */

.faq-sprytek-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .faq-sprytek-wrapper {
    position: relative;
    margin-bottom: 0;
  }
}

/* Header row with Sprytek */
.header-sprytek-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .header-sprytek-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
  
  .header-sprytek-row .sprytek {
    flex-shrink: 0;
    margin-left: 2rem;
    order: 1; /* FORCE RIGHT */
  }
}

@media (max-width: 1023px) {
  .header-sprytek-row .sprytek {
    align-self: flex-end;
  }
}

/* FAQ and FinalCTA specific */
.faq-header-row,
.finalcta-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .faq-header-row,
  .finalcta-header-row {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .faq-header-row .header-content,
  .finalcta-header-row .header-content {
    flex: 1;
    text-align: left;
  }
  
  .faq-header-row .sprytek,
  .finalcta-header-row .sprytek {
    order: 1; /* FORCE RIGHT */
    margin-left: 2rem;
  }
}

@media (max-width: 1023px) {
  .faq-header-row .sprytek,
  .finalcta-header-row .sprytek {
    align-self: flex-end;
  }
}

/* ==========================================================================
   HERO SECTION - Special handling
   ========================================================================== */

.hero-sprytek-wrapper {
  position: relative;
  z-index: 10;
}

/* Section header with Sprytek */
.section-header-with-sprytek {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .section-header-with-sprytek {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .section-header-with-sprytek .sprytek {
    order: 1;
    margin-left: 2rem;
  }
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 639px) {
  /* Ensure mascot doesn't cover CTA */
  .sprytek {
    z-index: 1;
  }
  
  /* Smaller sizes on mobile */
  .sprytek--hero {
    max-width: 200px;
  }
  
  .sprytek--section {
    max-width: 100px;
  }
  
  .sprytek--warning {
    max-width: 100px;
  }
}

/* Mobile center option */
.sprytek-mobile-center {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .sprytek-mobile-center {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sprytek--hoverable {
    transition: none;
  }
  
  .sprytek--hoverable:hover {
    transform: none;
  }
}

/* ==========================================================================
   FIX: Remove any white background from containers
   ========================================================================== */

/* Remove white backgrounds that might appear behind Sprytek */
[class*="sprytek"] {
  background-color: transparent !important;
}

/* Specific fix for FAQ section where white bg might appear */
.faq-sprytek-wrapper > div,
.finalcta-header-row > div:has(.sprytek),
.header-sprytek-row > div:has(.sprytek) {
  background: transparent !important;
}