/**
 * =============================================================================
 * ASC TRADE-IN — SHARED STYLES
 * Loaded by both asc_tradein_landing.twig and asc_tradein_wizard.twig.
 * Contains only rules that must be identical across both pages.
 * Page-specific layout (card width, hover bg, carousel, active state) stays
 * in asc-tradein-landing.css and asc_tradein_wizard.css respectively.
 * =============================================================================
 */

/* ── Shared category card shell ──────────────────────────────────────────── */
/* Both pages use a flex column card: icon on top, label below.              */
/* Size, spacing, border-colour, hover effect are page-specific.             */
.asc-tradein-cat-card,
.tradein-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  border: 1.5px solid var(--color-border-light, #e5e5e5);
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #111111);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ── Shared icon container ───────────────────────────────────────────────── */
/* Flex centring so the SVG sits centred regardless of its aspect ratio.     */
/* The SIZE (width/height) is set per-context in each page's own CSS.        */
.asc-tradein-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  transition: transform var(--transition, 0.2s ease),
              color    var(--transition, 0.2s ease);
}

/* SVG inherits container dimensions — preserves each icon's natural ratio   */
.asc-tradein-cat-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* lets paths near the viewBox edge render fully */
}

/* ── Icon size per context ───────────────────────────────────────────────── */
/* Landing page: larger cards, more breathing room → 64 × 64                */
.asc-tradein-cat-card .asc-tradein-cat-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text, #111111);
}

/* Wizard step 0: compact cards inside the wizard card → 44 × 44            */
.tradein-category-card .asc-tradein-cat-icon {
  width: 44px;
  height: 44px;
  color: var(--color-text-secondary, #6b6b6b);
}

/* Active state in wizard: icon inherits green from card colour              */
.tradein-category-card--active .asc-tradein-cat-icon {
  color: var(--color-eco-green, #00a86b);
}

/* Hover lift on icon (both pages)                                           */
.asc-tradein-cat-card:hover .asc-tradein-cat-icon,
.tradein-category-card:hover .asc-tradein-cat-icon {
  transform: translateY(-2px) scale(1.04);
}

/* ── Shared label ────────────────────────────────────────────────────────── */
.asc-tradein-cat-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: inherit;
}