/* =========================================================
   X-Small devices (portrait phones)
   < 576px
========================================================= */
@media (max-width: 575.98px) {

  /* Form card spacing */
  .form-card {
    padding: 24px 20px;
    margin-top: -80px;
  }

  /* Stepper stacked */
  .stepper-wrapper {
    flex-direction: column;
    gap: 16px;
  }

  .stepper-connector {
    display: none;
  }

  .step-name {
    font-size: 13px;
    text-align: center;
  }

  /* Buttons full width */
  .btn-primary,
  .btn-outline-primary {
    width: 100%;
  }

  .d-flex.gap-3 {
    flex-direction: column;
  }

  /* Avatar smaller */
  .avatar {
    width: 130px;
    height: 130px;
  }

  .edit-btn {
    width: 42px;
    height: 42px;
  }
}


/* =========================================================
   Small devices (landscape phones, small tablets)
   576px – 768px
========================================================= */
@media (min-width: 576px) and (max-width: 767.98px) {

  .form-card {
    padding: 28px 24px;
    margin-top: -100px;
  }

  .stepper-wrapper {
    gap: 10px;
  }

  .stepper-connector {
    margin: 0 -20px;
  }

  .avatar {
    width: 150px;
    height: 150px;
  }
}


/* =========================================================
   Medium devices (tablets, small laptops)
   768px – 992px
========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {

  .form-card {
    padding: 36px 32px;
    margin-top: -140px;
  }

  .stepper-item {
    min-width: 140px;
  }

  .step-name {
    font-size: 14px;
  }
}


/* =========================================================
   Large devices (laptops, desktops)
   992px – 1200px
========================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {

  .form-card {
    max-width: 960px;
  }

  .stepper-item {
    min-width: 160px;
  }
}


/* =========================================================
   X-Large devices (large desktops)
   1200px – 1400px
========================================================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {

  .form-card {
    max-width: 1100px;
  }
}


/* =========================================================
   XX-Large devices (very large screens)
   ≥ 1400px
========================================================= */
@media (min-width: 1400px) {

  .form-card {
    max-width: 1200px;
  }

  .stepper-item {
    min-width: 180px;
  }
}