.modal-create-address {
  display: flex;
  flex-direction: column;
  gap: var(--c--globals--spacings--base);
  padding: var(--c--globals--spacings--base);
  min-height: 400px;

  .modal-tabs {
    display: flex;
    gap: var(--c--globals--spacings--s);
    margin-bottom: var(--c--globals--spacings--base);

    .modal-tab {
      flex: 1;
      color: currentColor;
      padding: var(--c--globals--spacings--base) var(--c--globals--spacings--s);
      border: 2px solid var(--c--contextuals--border--semantic--neutral--tertiary);
      border-radius: 4px;
      background: transparent;
      font-size: var(--c--globals--font--sizes--sm);
      font-weight: 500;
      text-align: center;
      line-height: 1.2;
      cursor: pointer;
      transition: all var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);
      min-height: 90px;
      display: flex;
      font-weight: 600;
      align-items: center;
      justify-content: center;

      &:disabled {
        cursor: default;
        color: var(--c--contextuals--content--semantic--disabled--primary);
        border-color: var(--c--contextuals--border--semantic--disabled--primary);
        pointer-events: none;
      }

      &:hover {
        border-color: var(--c--contextuals--border--semantic--brand--primary);
        color: var(--c--contextuals--content--semantic--brand--primary);
      }

      &--active {
        pointer-events: none;
        border-color: var(--c--contextuals--border--semantic--brand--primary);
        background: var(--c--contextuals--background--semantic--brand--tertiary);
        color: var(--c--contextuals--content--semantic--brand--primary);
        box-shadow: 0 2px 5px var(--c--contextuals--background--semantic--contextual--primary-hover);
      }
    }
  }

  // The info banner shown above the personal mailbox form is a direct child of
  // the (gap: 0) form, so it needs its own spacing before the first field row.
  // The error banner (banner--error) is already spaced by the submit button's
  // margin-top, so we only target the info banner here.
  .banner--info {
    margin-bottom: var(--c--globals--spacings--s);
  }

  .form-field-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--c--globals--spacings--s);

    &.name-row {
      flex-direction: row;
      gap: var(--c--globals--spacings--s);

      .name-input {
        flex: 1;
      }
    }

    &.address-row {
      position: relative;

      .address-input {
        padding-right: 40%;
      }

      .domain-suffix {
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translateY(-50%);
        color: var(--c--contextuals--content--semantic--neutral--secondary);
        font-weight: 500;
        padding: var(--c--globals--spacings--xs) var(--c--globals--spacings--s);
        pointer-events: none;
        z-index: 2;
      }
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  // Enhance checkbox styling
  .form-field-row:has(input[type="checkbox"]) {
    margin: var(--c--globals--spacings--xs) 0;

    label {
      display: flex;
      align-items: flex-start;
      gap: var(--c--globals--spacings--s);
      font-weight: 400;
      cursor: pointer;
      line-height: 1.3;
    }
  }

  // Improve button styling
  button[type="submit"] {
    margin-top: var(--c--globals--spacings--base);
  }
}

.modal-create-address-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--c--globals--spacings--l) var(--c--globals--spacings--base);
  text-align: center;

  .modal-create-address__description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--c--globals--spacings--base);
    max-width: 500px;
    margin-bottom: var(--c--globals--spacings--l);

    .success-img-container {
      width: 172px;
      height: 172px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--c--globals--spacings--2xs);
    }

    p {
      font-size: var(--c--globals--font--sizes--m);
      line-height: 1.5;
      margin: 0;

      &:first-of-type {
        font-weight: 600;
        font-size: var(--c--globals--font--sizes--h3);
      }
    }
  }

  button {
    min-width: 200px;
    justify-content: center;
  }
}
