/**
 * @file
 * Icon Step List Item component styles.
 */

.layout-container {

  /* ==========================================================================
     Desktop — icon left, text right, no card background
     ========================================================================== */

  .icon-step-list-item {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
    min-height: 100px;
  }

  /* ==========================================================================
     Icon circle — 100x100, white background, rounded
     ========================================================================== */

  .icon-step-list-item__icon-wrap {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid transparent;
    /*background: linear-gradient(white, white) padding-box,*/
    /*            linear-gradient(180deg, #fa7821 0%, #4f08b0 100%) border-box;*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-step-list-item__icon {
    width: 80%;
    height: 80%;
    object-fit: contain;
  }

  /* ==========================================================================
     Text
     ========================================================================== */

  .icon-step-list-item__text,
  .icon-step-list-item__text p {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #4f08b0;
    margin: 0;
  }

  /* ==========================================================================
     Mobile — white card with icon floating on the left edge.
     The icon (100px, centered) extends 50px outside the card to the left.
     The items container provides 50px padding-left to accommodate this.
     ========================================================================== */

  @media (max-width: 767px) {

    .icon-step-list-item:not(.icon-step-list-item--numbered-list-item) {
      position: relative;
      background: white;
      border-radius: 16px;
      /* left padding: 50px (icon half inside card) + 16px gap */
      padding: 16px 16px 16px 66px;
      gap: 0;
      min-height: 100px;
      align-items: center;

      p, span {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
      }
    }

    .icon-step-list-item__icon-wrap {
      position: absolute;
      left: -52px;
      top: 50%;
      transform: translateY(-50%);
    }

  }

  /* ==========================================================================
     Numbered list item
     ========================================================================== */

  .icon-step-list-item--numbered-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 29px;
    position: relative;
    z-index: 1;
    min-height: 0;
  }

  @media (min-width: 1025px) {
    .icon-step-list-item--numbered-list-item {
      margin-bottom: 24px;
    }
  }

  .icon-step-list-item--numbered-list-item:last-child {
    margin-bottom: 0;
  }

  .icon-step-list-item__numbered-icon {
    width: 102px;
    height: 102px;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50px, -50%);
  }

  @media (min-width: 1025px) {
    .icon-step-list-item__numbered-icon {
      width: 120px;
      height: 120px;
      transform: translateX(-60px);
      top: 0;
    }
  }

  .icon-step-list-item__numbered-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .icon-step-list-item__card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12.88px;
    padding: 31px 25px 31px 67px;
    text-align: left;
    width: 100%;
  }

  @media (min-width: 1025px) {
    .icon-step-list-item__card {
      min-height: 130px;
      padding: 16px 99px 16px 113px;
      border-radius: 16px;
    }
  }

  .icon-step-list-item__card:has(.step-2-list) {
    padding-right: 46px;
  }

  .icon-step-list-item__step-label {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.072px;
    color: var(--text-black, #1e1e1e);
    margin: 0 0 6px;
  }

  @media (min-width: 1025px) {
    .icon-step-list-item__step-label {
      font-size: 20px;
      line-height: 26px;
      letter-spacing: 0.1px;
      margin-bottom: 6px;
    }
  }

  .icon-step-list-item__step-num {
    color: #4f08b0;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.1px;
  }

  @media (min-width: 1025px) {
    .icon-step-list-item__step-num {
      font-size: 20px;
      line-height: 26px;
    }
  }

  .icon-step-list-item__step-text {
    color: var(--text-black, #1e1e1e);
  }

  .icon-step-list-item__body ul,
  .icon-step-list-item__card>ul {
    margin: 0;
    padding-left: 24px;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-black, #1e1e1e);
    list-style: disc;
    letter-spacing: 0.1px;
  }

  @media (max-width: 1024px) {

    .icon-step-list-item__body ul,
    .icon-step-list-item__card>ul {
      padding-left: 21px;
    }

    .icon-step-list-item__body ul.step-3-list,
    .icon-step-list-item__card>ul.step-3-list {
      padding-right: 14px;
    }

    .icon-step-list-item__body ul.step-4-list,
    .icon-step-list-item__card>ul.step-4-list {
      padding-right: 11px;
    }
  }

  .icon-step-list-item__body ul li,
  .icon-step-list-item__card>ul li {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--text-black, #1e1e1e);
  }


  .icon-step-list-item__body ul li:last-child,
  .icon-step-list-item__card>ul li:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 1024px) {

    .icon-step-list-item__body ul li,
    .icon-step-list-item__card>ul li {
      font-size: 12px;
      line-height: 16px;
    }

  }

  .icon-step-list-item__body ul a,
  .icon-step-list-item__card>ul a {
    color: #4f08b0;
    font-weight: 700;
    text-decoration: underline;

    @media (max-width: 1024px) {
      font-weight: 600;
    }
  }

  /* ==========================================================================
     Modal variant (TRYN-946) — compact row, no circle, dark text.
     Applies when the item itself is modal (--modal) OR when it sits inside a
     modal Icon Step List (.icon-step-list--modal), so dropped children inherit
     the style without per-item configuration.
     ========================================================================== */

  .icon-step-list-item--modal,
  .icon-step-list--modal .icon-step-list-item {
    gap: 16px;
    min-height: auto;
    padding-left: 48px;
  }

  .icon-step-list-item--modal .icon-step-list-item__icon-wrap,
  .icon-step-list--modal .icon-step-list-item__icon-wrap {
    /* Figma list icons vary 52–59px; uniform 56px box (confirm in pixel review). */
    width: 56px;
    height: 56px;
    border: none;
    background: none;
  }

  .icon-step-list-item--modal .icon-step-list-item__icon,
  .icon-step-list--modal .icon-step-list-item__icon {
    width: 75%;
    height: 75%;
  }

  .icon-step-list-item--modal .icon-step-list-item__text,
  .icon-step-list-item--modal .icon-step-list-item__text p,
  .icon-step-list--modal .icon-step-list-item__text,
  .icon-step-list--modal .icon-step-list-item__text p {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.1px;
    color: #1E1E1E;
  }

  @media (max-width: 767px) {

    /* Modal rows are plain icon-left rows, NOT the default white card. */
    .icon-step-list-item--modal,
    .icon-step-list--modal .icon-step-list-item {
      background: none;
      border-radius: 0;
      padding: 0;
      gap: 6px;
    }

    .icon-step-list-item--modal .icon-step-list-item__icon-wrap,
    .icon-step-list--modal .icon-step-list-item__icon-wrap {
      position: static;
      left: auto;
      top: auto;
      transform: none;
      width: 46px;
      height: 46px;
    }

    .icon-step-list-item--modal .icon-step-list-item__text,
    .icon-step-list-item--modal .icon-step-list-item__text p,
    .icon-step-list--modal .icon-step-list-item__text,
    .icon-step-list--modal .icon-step-list-item__text p {
      font-size: 12px;
      line-height: 16px;
    }

  }

}