/* =========================================
   EDIT PROFILE PAGE
========================================= */

.edit-profile-page {
  max-width: 920px;
  margin: 24px auto 60px;
}


.edit-profile-card {
  padding: 34px 36px;

  background-color: #ffffff;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  box-shadow: var(--shadow-medium);
}


/* =========================================
   PAGE HEADING
========================================= */

.edit-profile-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 22px;

  border-bottom: 1px solid var(--border);
}


.profile-small-heading {
  margin-bottom: 5px;

  color: var(--orange-dark);

  font-size: 0.78rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.edit-profile-heading .title {
  margin-bottom: 6px !important;

  color: var(--navy);
}


.edit-profile-subtitle {
  color: var(--muted);

  font-size: 0.92rem;
}


.edit-profile-account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;

  background-color: var(--orange-light);

  color: var(--orange-dark);

  border: 1px solid #fed7aa;
  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* =========================================
   SECTIONS
========================================= */

.edit-profile-section {
  margin-bottom: 30px;
  padding: 24px;

  background-color: #fbfcfd;

  border: 1px solid var(--border);
  border-radius: var(--radius);
}


.edit-profile-section-heading {
  margin-bottom: 20px;
  padding-bottom: 14px;

  border-bottom: 1px solid #e8edf2;
}


.edit-profile-section-heading .title {
  margin-bottom: 5px !important;

  color: var(--navy);
}


.edit-profile-section-heading p {
  color: var(--muted);

  font-size: 0.88rem;
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {

  .edit-profile-page {
    max-width: 100%;
  }


  .edit-profile-card {
    padding: 28px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .edit-profile-page {
    margin-top: 10px;
  }


  .edit-profile-card {
    padding: 20px;
  }


  .edit-profile-heading {
    flex-direction: column;

    gap: 14px;
  }


  .edit-profile-section {
    padding: 18px;
  }

}