/**
 * Additional Info Panel Component Styles
 */

.additional-info-panel {
    border-radius: 12px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: #FFF;
    padding: 30px;

    &.primary {
      border-left: 8px solid var(--Colors-Blue-45, #006FB4);
    }
    &.secondary {
      border-left: 8px solid var(--Colors-Blue-45, #656C6F);
    }
    &.critical {
      border-left: 8px solid var(--Colors-Blue-45, #BE273A);
    }
}

@media (max-width: 767px) {
  .additional-info-panel {
    padding: 26px;
  }
}


.additional-info-panel__title {
  font-face: Noto Sans;
  color: var(--Text-Title-Color, #000);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.2rem;
  letter-spacing: 0.12px;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .additional-info-panel__title {
    margin-bottom: 10px;
  }
}

.additional-info-panel__inner {
  display: flex;
  flex-direction: column;
}

.additional-info-panel__body {
  color: #000;
  font-size: 1.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.8rem;
}

.additional-info-panel__body p:last-child {
  margin-bottom: 0;
}

/* Style variations */
.additional-info-panel.highlight {
  background: #E6F4FF;
  border-left: 4px solid #00639D;
}

.additional-info-panel.warning {
  background: #FFF9E6;
  border-left: 4px solid #F59E0B;
}

.additional-info-panel.success {
  background: #F0FDF4;
  border-left: 4px solid #10B981;
}
