/* ======================
   COMPARISON ITEM COMPONENT
   Reusable responsive component for comparison section items
   Supports both positive/negative variants with mobile-first design
   ====================== */

/* Comparison Items - Mobile First */
.comparisonItem {
  align-self: stretch;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 24px;
  width: 100%;
  /* Removed max-width constraint for mobile full-width */
}

.comparisonItemPositive {
  align-self: stretch;
  border-radius: 50px;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 24px;
  width: 100%;
  /* Removed max-width constraint for mobile full-width */
}

/* Desktop adjustments - Add max-width only for desktop layout */
@media (min-width: 1025px) {
  .comparisonItem,
  .comparisonItemPositive {
    max-width: none; /* No constraint on desktop side-by-side layout */
  }
}

.itemBlur {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  filter: blur(10px);
  border-radius: 50px;
  z-index: 0;
}

.itemBlurPositive {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  filter: blur(10px);
  border-radius: 50px;
  background: linear-gradient(95.49deg, rgba(52, 148, 253, 0.3), rgba(243, 127, 84, 0.3));
  z-index: 0;
}

.itemContent {
  flex: 1;
  border-radius: 50px;
  background-color: #f2f2f3;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 12px;
  gap: 16px;
  z-index: 1;
}

.itemContentPositive {
  flex: 1;
  border-radius: 50px;
  background-color: #fcf9f8;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 12px;
  gap: 16px;
  z-index: 1;
}

/* Desktop padding adjustments */
@media (min-width: 768px) {
  .itemContent,
  .itemContentPositive {
    padding: 16px 32px 16px 16px;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .itemContent,
  .itemContentPositive {
    padding: 12px 24px 12px 12px;
    gap: 12px;
  }
}

.itemIcon {
  width: 40px;
  height: 40px;
  border-radius: 500px;
  max-height: 100%;
}

/* Desktop icon size */
@media (min-width: 768px) {
  .itemIcon {
    width: 48px;
    height: 48px;
  }
}

/* Tablet icon size */
@media (min-width: 768px) and (max-width: 1023px) {
  .itemIcon {
    width: 40px;
    height: 40px;
  }
}

.itemText {
  position: relative;
  letter-spacing: -0.02em;
  line-height: 145%;
  font-size: 17px;
  font-family: 'Avenir Next';
  font-weight: 600;
}

/* Desktop text styles */
@media (min-width: 768px) {
  .itemText {
    letter-spacing: -0.03em;
    line-height: 150%;
    font-size: 20px;
  }
}

/* Tablet text adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .itemText {
    font-size: clamp(16px, 2.5vw, 20px);
  }
}