@charset "UTF-8";
/* flush-badges.scss ----------------------------------------------------- */
/* ─────────────────────────  Design tokens  ───────────────────────────── */
/* tweak size once here and everything follows */
/* Apple-like border radius */
/* Enhanced design tokens */
/* Map a "main colour" for each publication.  Extend as needed. */
/* Function to darken/lighten automatically for the "info" band */
/* ──────────────────────  Generic badge structure  ────────────────────── */
.tyre-badge {
  width: 148px;
  height: 200px; /* fixed height for uniform appearance */
  border-radius: 16px;
  overflow: hidden; /* cuts off rounded corners cleanly   */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff; /* default text colour                */
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  /* Subtle inner border for premium feel */
  /* Hover effect for interactivity */
  /* Enhanced clickable badge styles */
  /* ① logo zone – adjusted height */
  /* ② test details strip – new section */
  /* ③ info strip – adjusted height */
}
.tyre-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 1;
}
.tyre-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.tyre-badge.clickable-badge {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Add a subtle click indicator */
}
.tyre-badge.clickable-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  /* Add a subtle glow effect */
}
.tyre-badge.clickable-badge:hover::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: calc(16px + 2px);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  z-index: -1;
  opacity: 0.7;
}
.tyre-badge.clickable-badge:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tyre-badge.clickable-badge:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.tyre-badge.clickable-badge::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.tyre-badge.clickable-badge:hover::before {
  opacity: 1;
}
.tyre-badge .logo {
  flex: 3 1 0;
  min-height: 0; /* allow flex item to shrink if needed */
  display: grid;
  place-items: center; /* centres logo perfectly             */
  padding: 14px;
  position: relative;
}
.tyre-badge .logo img {
  max-width: 100%;
  max-height: 60px;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.tyre-badge .test-details {
  flex: 1 1 0;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.tyre-badge .test-details .dimension {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.9;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.tyre-badge .test-details .year {
  font-size: 0.55rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 1px;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.tyre-badge .info {
  flex: 2 1 0;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Subtle gradient overlay for depth */
}
.tyre-badge .info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}
.tyre-badge .info .position {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.tyre-badge .info .position sup {
  font-size: 0.5em;
  font-weight: 600;
}
.tyre-badge .info .position .ordinal-text-suffix {
  font-size: 0.45em; /* Smaller than sup */
  font-weight: 500;
  text-transform: lowercase;
  position: relative;
  top: -0.1em; /* Slight adjustment for alignment */
}
.tyre-badge .info .rating {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  white-space: normal; /* longer multi-lang phrases wrap     */
  word-wrap: break-word; /* break long words if needed         */
  overflow-wrap: break-word; /* modern standard for word breaking  */
  -webkit-hyphens: auto;
          hyphens: auto; /* add hyphens for better breaks      */
  letter-spacing: 0.02em;
  margin-top: 2px;
  position: relative;
  z-index: 1;
  opacity: 0.95;
  line-height: 1.1; /* tighter line height for multi-line */
  max-width: 100%; /* ensure it doesn't overflow         */
}

/* ─────────────────────  Paint each publication  ─────────────────────── */
.tyre-badge.autobild {
  background: linear-gradient(135deg, #d71920 0%, #c6171d 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.autobild .info {
  background: #ad1319;
}

.tyre-badge.adac {
  background: linear-gradient(135deg, #ffd400 0%, #ebc300 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.adac .info {
  background: #ccaa00;
}

.tyre-badge.automotorsport {
  background: linear-gradient(135deg, #e30613 0%, #d10611 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.automotorsport .info {
  background: #b6050f;
}

.tyre-badge.autozeitung {
  background: linear-gradient(135deg, #e60012 0%, #d40011 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.autozeitung .info {
  background: #b8000e;
}

.tyre-badge.tyrereviews {
  background: linear-gradient(135deg, #212529 0%, #1e2226 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.tyrereviews .info {
  background: #191e22;
}
.tyre-badge.tyrereviews .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.ace {
  background: linear-gradient(135deg, #c8c300 0%, #b8b300 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.ace .info {
  background: #a09c00;
}

.tyre-badge.autoklubcr {
  background: linear-gradient(135deg, #c00000 0%, #b10000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.autoklubcr .info {
  background: #9a0000;
}

.tyre-badge.sportauto {
  background: linear-gradient(135deg, #e41f26 0%, #d51a20 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.sportauto .info {
  background: #ba151b;
}

.tyre-badge.autoexpress {
  background: linear-gradient(135deg, #cc0000 0%, #bc0000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.autoexpress .info {
  background: #a30000;
}

.tyre-badge.gtu {
  background: linear-gradient(135deg, #c93644 0%, #b9323f 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.gtu .info {
  background: #a32935;
}

.tyre-badge.sportscars {
  background: linear-gradient(135deg, #000 0%, black 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.sportscars .info {
  background: black;
}
.tyre-badge.sportscars .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.gute-fahrt {
  background: linear-gradient(135deg, #ff0000 0%, #eb0000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.gute-fahrt .info {
  background: #cc0000;
}

.tyre-badge.offroad {
  background: linear-gradient(135deg, #a00000 0%, #930000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.offroad .info {
  background: maroon;
}
.tyre-badge.offroad .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.vibilagare {
  background: linear-gradient(135deg, #af1d1e 0%, #a11b1c 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.vibilagare .info {
  background: #8d1617;
}

.tyre-badge.promobil {
  background: linear-gradient(135deg, #00529b 0%, #004b8f 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.promobil .info {
  background: #00427c;
}
.tyre-badge.promobil .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.firmenauto {
  background: linear-gradient(135deg, #ff6600 0%, #eb5e00 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.firmenauto .info {
  background: #cc5200;
}

.tyre-badge.driveout {
  background: linear-gradient(135deg, #000 0%, black 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.driveout .info {
  background: black;
}
.tyre-badge.driveout .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.reifentester {
  background: linear-gradient(135deg, #f0f0f0 0%, #dddddd 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.reifentester .info {
  background: #c3bdbd;
}

.tyre-badge.hasznaltauto {
  background: linear-gradient(135deg, #ff6400 0%, #eb5c00 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.hasznaltauto .info {
  background: #cc5000;
}

.tyre-badge.aftonbladet {
  background: linear-gradient(135deg, #ffdf00 0%, #ebcd00 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.aftonbladet .info {
  background: #ccb200;
}

.tyre-badge.teknikens {
  background: linear-gradient(135deg, #e4002b 0%, #d20028 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.teknikens .info {
  background: #b60022;
}

.tyre-badge.arbo {
  background: linear-gradient(135deg, #b40000 0%, #a60000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.arbo .info {
  background: #900000;
}

.tyre-badge.strassenverkehr {
  background: linear-gradient(135deg, #f00 0%, #eb0000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.strassenverkehr .info {
  background: #cc0000;
}

.tyre-badge.evo {
  background: linear-gradient(135deg, #000 0%, black 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.evo .info {
  background: black;
}
.tyre-badge.evo .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.motor {
  background: linear-gradient(135deg, #003366 0%, #002f5e 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.motor .info {
  background: #002952;
}
.tyre-badge.motor .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.alvolante {
  background: linear-gradient(135deg, #E60000 0%, #d40000 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.alvolante .info {
  background: #b80000;
}

.tyre-badge.tuv {
  background: linear-gradient(135deg, #0050A0 0%, #004a93 100%);
  /* derived darker strip for the bottom band */
  /* If a logo is black or very dark, invert it automatically when
     the background is also dark.  Adjust threshold if needed.        */
}
.tyre-badge.tuv .info {
  background: #004080;
}
.tyre-badge.tuv .logo img {
  filter: invert(1) brightness(1.8) saturate(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tyre-badge.tyrereviews .logo img {
  filter: none !important;
}

.tyre-badge.reifentester .test-details,
.tyre-badge.reifentester .info {
  color: #333;
}
.tyre-badge.reifentester .info .position sup {
  color: #333;
}

/* ──────────────────────  Horizontal scrolling badge container  ────────────────── */
.badge-grid {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping to keep badges in one line */
  gap: 1.5rem;
  padding: 1.5rem;
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Hide vertical overflow */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  align-items: flex-start;
  position: relative; /* For fade effects */
  /* Custom scrollbar styling for better UX */
  /* Firefox scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.1);
  /* Ensure consistent badge alignment and prevent shrinking */
  /* Add subtle fade effect at the edges to indicate scrollability */
  /* Add scroll hint on first load */
}
.badge-grid::-webkit-scrollbar {
  height: 8px;
}
.badge-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.badge-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.badge-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.badge-grid .tyre-badge {
  flex-shrink: 0; /* prevent badges from shrinking */
  min-width: 148px; /* ensure minimum width is maintained */
}
.badge-grid::before, .badge-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 1;
}
.badge-grid::before {
  left: 0;
  background: linear-gradient(to right, rgba(245, 247, 250, 0.8), transparent);
}
.badge-grid::after {
  right: 0;
  background: linear-gradient(to left, rgba(195, 207, 226, 0.8), transparent);
}
.badge-grid.show-scroll-hint::after {
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.4);
  font-weight: bold;
  animation: pulse-hint 2s ease-in-out infinite;
}

/* Pulse animation for scroll hint */
@keyframes pulse-hint {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}
/* ──────────────────────  Badges wrapper container  ────────────────── */
.badges-wrapper {
  margin: 0 -15px; /* Extend beyond container padding */
  position: relative; /* For positioning fade effects */
  /* On larger screens, add some margin back */
  /* When connected to details container */
  /* Ensure the badge-grid fills the wrapper */
  /* Add fade effects to the wrapper instead - these won't scroll */
  /* Scroll hint on the wrapper instead */
}
@media (min-width: 768px) {
  .badges-wrapper {
    margin: 0;
    overflow: hidden; /* Ensure rounded corners are respected */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}
@media (min-width: 768px) {
  .badges-wrapper.connected {
    border-radius: 12px 12px 0 0; /* Remove bottom corners */
    box-shadow: none; /* Remove shadow for seamless connection */
  }
}
.badges-wrapper .badge-grid {
  margin: 0; /* Remove any default margins */
  border-radius: 0; /* Let wrapper handle border radius */
  /* Remove the fade effects from badge-grid since we'll put them on the wrapper */
}
.badges-wrapper .badge-grid::before, .badges-wrapper .badge-grid::after {
  display: none;
}
.badges-wrapper::before, .badges-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2; /* Higher z-index to appear above badges */
}
.badges-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(245, 247, 250, 0.9), transparent);
}
@media (min-width: 768px) {
  .badges-wrapper::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
  }
}
.badges-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(195, 207, 226, 0.9), transparent);
}
@media (min-width: 768px) {
  .badges-wrapper::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
  }
}
.badges-wrapper.show-scroll-hint::after {
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.4);
  font-weight: bold;
  animation: pulse-hint 2s ease-in-out infinite;
  background: linear-gradient(to left, rgba(195, 207, 226, 0.9), transparent);
}
@media (min-width: 768px) {
  .badges-wrapper.show-scroll-hint::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
  }
}

/* ──────────────────────  Mobile optimizations  ────────────────── */
@media (max-width: 767px) {
  .badge-grid {
    padding: 1rem; /* Reduce padding on mobile */
    gap: 1rem; /* Reduce gap on mobile */
    /* Adjust fade effects for mobile */
  }
  .badge-grid::before, .badge-grid::after {
    width: 15px; /* Smaller fade width on mobile */
  }
  .tyre-badge {
    min-width: calc(148px * 0.9); /* Slightly smaller badges on mobile */
  }
}
/* ──────────────────────  Test details container styling  ────────────────── */
#testDetailsContainer {
  /* Ensure it appears directly below badges with proper spacing */
  margin-top: 0 !important; /* Directly connected to badges */
  border-radius: 0 0 16px 16px; /* Only bottom corners rounded */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  /* Default styling when no organization class is applied */
  background: linear-gradient(135deg, #6c757d 0%, #636c73 100%);
  /* When connected to badges wrapper */
  /* When connected to badges wrapper */
}
#testDetailsContainer.details-container {
  margin-top: 0 !important; /* Directly connected */
  border-radius: 0 0 16px 16px; /* Only bottom corners rounded */
}
#testDetailsContainer.details-container {
  margin-top: 0 !important; /* Directly connected */
  border-radius: 0 0 16px 16px; /* Only bottom corners rounded */
}

/* Connected wrapper styling */
@media (min-width: 768px) {
  .badges-wrapper.connected {
    border-radius: 12px 12px 0 0 !important; /* Remove bottom corners */
    box-shadow: none !important; /* Remove shadow for seamless connection */
  }
}
.badges-wrapper.connected .card {
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.badges-wrapper.connected .card .card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.badges-wrapper.connected .card .card-header h5 {
  color: #495057;
  font-weight: 600;
}
.badges-wrapper.connected .card .card-body {
  background: #fff;
}

/* Apply organization colors to details container - match the badge info section exactly */
#testDetailsContainer.details-container.autobild {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #d71920 0%, #c6171d 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #d71920;
}

#testDetailsContainer.details-container.adac {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #ffd400 0%, #ebc300 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #ffd400;
}

#testDetailsContainer.details-container.automotorsport {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #e30613 0%, #d10611 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #e30613;
}

#testDetailsContainer.details-container.autozeitung {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #e60012 0%, #d40011 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #e60012;
}

#testDetailsContainer.details-container.tyrereviews {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #212529 0%, #1e2226 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #212529;
}

#testDetailsContainer.details-container.ace {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #c8c300 0%, #b8b300 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #c8c300;
}

#testDetailsContainer.details-container.autoklubcr {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #c00000 0%, #b10000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #c00000;
}

#testDetailsContainer.details-container.sportauto {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #e41f26 0%, #d51a20 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #e41f26;
}

#testDetailsContainer.details-container.autoexpress {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #cc0000 0%, #bc0000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #cc0000;
}

#testDetailsContainer.details-container.gtu {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #c93644 0%, #b9323f 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #c93644;
}

#testDetailsContainer.details-container.sportscars {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #000 0%, black 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #000;
}

#testDetailsContainer.details-container.gute-fahrt {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #ff0000 0%, #eb0000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #ff0000;
}

#testDetailsContainer.details-container.offroad {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #a00000 0%, #930000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #a00000;
}

#testDetailsContainer.details-container.vibilagare {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #af1d1e 0%, #a11b1c 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #af1d1e;
}

#testDetailsContainer.details-container.promobil {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #00529b 0%, #004b8f 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #00529b;
}

#testDetailsContainer.details-container.firmenauto {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #ff6600 0%, #eb5e00 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #ff6600;
}

#testDetailsContainer.details-container.driveout {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #000 0%, black 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #000;
}

#testDetailsContainer.details-container.reifentester {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #f0f0f0 0%, #dddddd 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #f0f0f0;
}

#testDetailsContainer.details-container.hasznaltauto {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #ff6400 0%, #eb5c00 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #ff6400;
}

#testDetailsContainer.details-container.aftonbladet {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #ffdf00 0%, #ebcd00 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #ffdf00;
}

#testDetailsContainer.details-container.teknikens {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #e4002b 0%, #d20028 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #e4002b;
}

#testDetailsContainer.details-container.arbo {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #b40000 0%, #a60000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #b40000;
}

#testDetailsContainer.details-container.strassenverkehr {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #f00 0%, #eb0000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #f00;
}

#testDetailsContainer.details-container.evo {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #000 0%, black 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #000;
}

#testDetailsContainer.details-container.motor {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #003366 0%, #002f5e 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #003366;
}

#testDetailsContainer.details-container.alvolante {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #E60000 0%, #d40000 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #E60000;
}

#testDetailsContainer.details-container.tuv {
  /* Use the same gradient as the badge itself for seamless connection */
  background: linear-gradient(135deg, #0050A0 0%, #004a93 100%) !important;
  /* Add a subtle top border that matches the badge's main color for connection */
  border-top: 3px solid #0050A0;
}

/* Special handling for light backgrounds */
#testDetailsContainer.details-container.reifentester {
  color: #333 !important;
}
#testDetailsContainer.details-container.reifentester .text-white {
  color: #333 !important;
}
#testDetailsContainer.details-container.reifentester .opacity-75 {
  opacity: 1 !important;
  color: #555 !important;
}
#testDetailsContainer.details-container.reifentester .badge {
  color: #fff !important;
}
#testDetailsContainer.details-container.reifentester .badge.bg-dark, #testDetailsContainer.details-container.reifentester .badge.bg-opacity-25.bg-dark {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
}
#testDetailsContainer.details-container.reifentester .badge.bg-light, #testDetailsContainer.details-container.reifentester .badge.bg-opacity-25:not(.bg-dark) {
  color: #333 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
#testDetailsContainer.details-container.reifentester a,
#testDetailsContainer.details-container.reifentester a.text-white {
  color: #0056b3 !important;
}
#testDetailsContainer.details-container.reifentester a:hover,
#testDetailsContainer.details-container.reifentester a.text-white:hover {
  color: #003d80 !important;
}

/* ──────────────────────  Connector arrow  ────────────────── */
#testDetailsContainer.details-container {
  /* CSS custom property will be set from JS to position the arrow */
  --arrow-left: 50%;
  /* State when arrow should be visible */
}
#testDetailsContainer.details-container::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background: inherit; /* Inherit gradient/colour from container */
  transform: translateY(-10px) rotate(45deg); /* Initial position for animation & Diamond shape */
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Keep arrow non-interactive */
  border-top: 1.5px solid rgba(0, 0, 0, 0.12);
  border-left: 1.5px solid rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
  top: -14px;
  left: calc(var(--arrow-left) - 14px);
}
#testDetailsContainer.details-container.arrow-visible::before {
  opacity: 1;
  transform: translateY(0) rotate(45deg); /* Final position */
}

/* Special handling for ADAC (yellow) and similar light/bright backgrounds */
#testDetailsContainer.details-container.adac,
#testDetailsContainer.details-container.ace,
#testDetailsContainer.details-container.aftonbladet {
  color: #212529 !important;
}
#testDetailsContainer.details-container.adac .text-white,
#testDetailsContainer.details-container.ace .text-white,
#testDetailsContainer.details-container.aftonbladet .text-white {
  color: #212529 !important;
}
#testDetailsContainer.details-container.adac .opacity-75,
#testDetailsContainer.details-container.ace .opacity-75,
#testDetailsContainer.details-container.aftonbladet .opacity-75 {
  opacity: 1 !important;
  color: #495057 !important;
}
#testDetailsContainer.details-container.adac .badge.bg-light, #testDetailsContainer.details-container.adac .badge.bg-opacity-25:not(.bg-dark),
#testDetailsContainer.details-container.ace .badge.bg-light,
#testDetailsContainer.details-container.ace .badge.bg-opacity-25:not(.bg-dark),
#testDetailsContainer.details-container.aftonbladet .badge.bg-light,
#testDetailsContainer.details-container.aftonbladet .badge.bg-opacity-25:not(.bg-dark) {
  color: #212529 !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
}
#testDetailsContainer.details-container.adac .badge.bg-dark, #testDetailsContainer.details-container.adac .badge.bg-opacity-25.bg-dark,
#testDetailsContainer.details-container.ace .badge.bg-dark,
#testDetailsContainer.details-container.ace .badge.bg-opacity-25.bg-dark,
#testDetailsContainer.details-container.aftonbladet .badge.bg-dark,
#testDetailsContainer.details-container.aftonbladet .badge.bg-opacity-25.bg-dark {
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
}
#testDetailsContainer.details-container.adac a,
#testDetailsContainer.details-container.adac a.text-white,
#testDetailsContainer.details-container.ace a,
#testDetailsContainer.details-container.ace a.text-white,
#testDetailsContainer.details-container.aftonbladet a,
#testDetailsContainer.details-container.aftonbladet a.text-white {
  color: #0056b3 !important;
}
#testDetailsContainer.details-container.adac a:hover,
#testDetailsContainer.details-container.adac a.text-white:hover,
#testDetailsContainer.details-container.ace a:hover,
#testDetailsContainer.details-container.ace a.text-white:hover,
#testDetailsContainer.details-container.aftonbladet a:hover,
#testDetailsContainer.details-container.aftonbladet a.text-white:hover {
  color: #003d80 !important;
}
#testDetailsContainer.details-container.adac .display-4,
#testDetailsContainer.details-container.adac .h5,
#testDetailsContainer.details-container.ace .display-4,
#testDetailsContainer.details-container.ace .h5,
#testDetailsContainer.details-container.aftonbladet .display-4,
#testDetailsContainer.details-container.aftonbladet .h5 {
  color: #212529 !important;
}/*# sourceMappingURL=badges.css.map */