/* =========================================
   PROFILE IMAGE
========================================= */

.edit-profile-image-area {
  display:
    grid;

  grid-template-columns:
    130px minmax(0, 1fr);

  align-items:
    center;

  gap:
    22px;
}


/* =========================================
   IMAGE PREVIEW
========================================= */

.edit-profile-image-preview {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    130px;

  height:
    130px;

  overflow:
    hidden;

  background-color:
    var(--surface-soft);

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

  border-radius:
    14px;

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


.edit-profile-image-preview img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================
   IMAGE PLACEHOLDER
========================================= */

.edit-profile-image-placeholder {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  color:
    var(--muted);

  background:
    linear-gradient(
      135deg,
      #f1f5f9,
      #e2e8f0
    );

  font-size:
    0.78rem;

  font-weight:
    750;
}


/* =========================================
   IMAGE CONTROLS
========================================= */

.edit-profile-image-controls {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    9px;

  min-width:
    0;
}


.edit-profile-image-copy {
  margin-bottom:
    2px;
}


.edit-profile-image-label {
  margin:
    0 0 3px;

  color:
    var(--navy);

  font-size:
    0.82rem;

  font-weight:
    800;
}


.edit-profile-image-help {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.74rem;

  line-height:
    1.4;
}


/* =========================================
   CUSTOM FILE BUTTON
========================================= */

.edit-profile-upload-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    38px;

  padding:
    0 16px;

  color:
    var(--navy);

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border-dark);

  border-radius:
    8px;

  cursor:
    pointer;

  font-size:
    0.78rem;

  font-weight:
    800;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}


.edit-profile-upload-button:hover {
  background-color:
    var(--surface-soft);

  border-color:
    #94a3b8;

  transform:
    translateY(-1px);
}


/* =========================================
   HIDDEN FILE INPUT
========================================= */

.edit-profile-file-input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(
      0,
      0,
      0,
      0
    );

  white-space:
    nowrap;

  border:
    0;
}


/* =========================================
   SELECTED FILE NAME
========================================= */

.edit-profile-file-name {
  display:
    block;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--muted);

  font-size:
    0.72rem;

  line-height:
    1.35;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


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

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

  .edit-profile-image-area {
    grid-template-columns:
      1fr;

    align-items:
      start;

    gap:
      16px;
  }


  .edit-profile-image-preview {
    width:
      110px;

    height:
      110px;
  }


  .edit-profile-image-controls {
    width:
      100%;
  }


  .edit-profile-upload-button {
    width:
      100%;
  }


  .edit-profile-file-name {
    width:
      100%;
  }

}