/* ========================================
   Trust Section Banner - Frontend Styles
   ======================================== */

.kss-trust-section {
  width: 100%;
  overflow: hidden;
}

/* ========================================
   Farbschemata
   ======================================== */

/* Hell (Light) - Standard */
.kss-trust-section--light {
  background-color: var(--kss-page-background-color, #f8f9fa);
  color: var(--kss-copy-text-color-primary, #212529);
}

.kss-trust-section--light .kss-trust-section__icon {
  color: var(--kss-primary-color, #0066cc);
}

.kss-trust-section--light .kss-trust-section__text {
  color: var(--kss-copy-text-color-secondary, #6c757d);
}

/* Dunkel (Dark) */
.kss-trust-section--dark {
  background-color: var(--kss-color-black, #212529);
  color: var(--kss-color-white, #fff);
}

.kss-trust-section--dark .kss-trust-section__icon {
  color: var(--kss-primary-color, #0066cc);
}

.kss-trust-section--dark .kss-trust-section__text {
  color: var(--kss-color-white, #fff);
  opacity: 0.85;
}

/* Primär */
.kss-trust-section--primary {
  background-color: var(--kss-primary-color, #0066cc);
  color: var(--kss-color-white, #fff);
}

.kss-trust-section--primary .kss-trust-section__icon {
  color: var(--kss-color-white, #fff);
}

.kss-trust-section--primary .kss-trust-section__text {
  color: var(--kss-color-white, #fff);
  opacity: 0.9;
}

/* Sekundär */
.kss-trust-section--secondary {
  background-color: var(--kss-secondary-color, #6c757d);
  color: var(--kss-color-white, #fff);
}

.kss-trust-section--secondary .kss-trust-section__icon {
  color: var(--kss-color-white, #fff);
}

.kss-trust-section--secondary .kss-trust-section__text {
  color: var(--kss-color-white, #fff);
  opacity: 0.9;
}

/* ========================================
   Layout
   ======================================== */

.kss-trust-section__inner {
  max-width: var(--kss-page-max-width, 1200px);
  margin: 0 auto;
  padding-left: var(--kss-page-layout-gap, 2rem);
  padding-right: var(--kss-page-layout-gap, 2rem);
}

/* Padding Varianten */
.kss-trust-section--padding-top-none {
  padding-top: 0;
}

.kss-trust-section--padding-top-small {
  padding-top: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
}

.kss-trust-section--padding-top-medium {
  padding-top: var(--kss-page-layout-gap, 2rem);
}

.kss-trust-section--padding-top-large {
  padding-top: calc(var(--kss-page-layout-gap, 2rem) * 1.5);
}

.kss-trust-section--padding-bottom-none {
  padding-bottom: 0;
}

.kss-trust-section--padding-bottom-small {
  padding-bottom: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
}

.kss-trust-section--padding-bottom-medium {
  padding-bottom: var(--kss-page-layout-gap, 2rem);
}

.kss-trust-section--padding-bottom-large {
  padding-bottom: calc(var(--kss-page-layout-gap, 2rem) * 1.5);
}

/* Items Container - Horizontal Layout */
.kss-trust-section__items {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--kss-page-layout-gap, 2rem) * 0.75);
  justify-content: center;
  align-items: flex-start;
}

/* Einzelnes Trust Item */
.kss-trust-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.kss-trust-section__item:hover {
  transform: translateY(-4px);
}

/* Icon */
.kss-trust-section__icon {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Content */
.kss-trust-section__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kss-trust-section__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.kss-trust-section__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ========================================
   Responsive Anpassungen
   ======================================== */

/* Tablet */
@media (max-width: 768px) {
  .kss-trust-section__items {
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.5);
  }

  .kss-trust-section__item {
    min-width: 150px;
    max-width: 250px;
    padding: 0.75rem;
  }

  .kss-trust-section__icon {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .kss-trust-section__title {
    font-size: 1rem;
  }

  .kss-trust-section__text {
    font-size: 0.875rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .kss-trust-section__items {
    flex-direction: column;
    gap: calc(var(--kss-page-layout-gap, 2rem) * 0.75);
  }

  .kss-trust-section__item {
    flex-direction: row;
    text-align: left;
    min-width: 100%;
    max-width: 100%;
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .kss-trust-section__icon {
    font-size: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .kss-trust-section__content {
    text-align: left;
  }

  .kss-trust-section__title {
    font-size: 1rem;
  }

  .kss-trust-section__text {
    font-size: 0.875rem;
  }
}

/* ========================================
   Accessibility
   ======================================== */

.kss-trust-section__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .kss-trust-section__item {
    transition: none;
  }

  .kss-trust-section__item:hover {
    transform: none;
  }
}

/* ========================================
   Hintergrundfarben (Custom Background)
   ======================================== */
.kss-trust-section--bg-black {
  background-color: var(--kss-color-black, #222) !important;
  color: #fff;
}

.kss-trust-section--bg-white {
  background-color: var(--kss-color-white, #fff) !important;
  color: #222;
}

.kss-trust-section--bg-primary {
  background-color: var(--kss-primary-color, #0066cc) !important;
  color: #fff;
}

.kss-trust-section--bg-secondary {
  background-color: var(--kss-secondary-color, #6c757d) !important;
  color: #fff;
}

/* ========================================
   Icon Farben
   ======================================== */
.kss-trust-section__icon--black {
  color: var(--kss-color-black, #222);
}

.kss-trust-section__icon--white {
  color: var(--kss-color-white, #fff);
}

.kss-trust-section__item:hover .kss-trust-section__icon--black {
  color: var(--kss-primary-color, #0066cc);
}

.kss-trust-section__item:hover .kss-trust-section__icon--white {
  color: var(--kss-primary-color, #0066cc);
}

.kss-trust-section__icon--primary {
  color: var(--kss-primary-color, #0066cc);
}

.kss-trust-section__icon--secondary {
  color: var(--kss-secondary-color, #6c757d);
}