/* =========================================
   OWN PROFILE HEADER
========================================= */

.profile-header-card {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    32px;

  width:
    100%;

  padding:
    24px 28px;

  margin-bottom:
    22px;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 78%,
      #fff8ed 100%
    );

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

  border-radius:
    var(--radius-large);

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


/* orange accent */

.profile-header-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    5px;

  background:
    linear-gradient(
      180deg,
      var(--orange),
      var(--orange-dark)
    );
}


/* =========================================
   OWN PROFILE USER AREA
========================================= */

.profile-user-info {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  min-width:
    0;

  flex:
    1;
}


.profile-user-details {
  min-width:
    0;

  flex:
    1;
}


/* =========================================
   OWN PROFILE AVATAR
========================================= */

.profile-avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  width:
    116px;

  height:
    116px;

  overflow:
    hidden;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  border:
    4px solid
    #ffffff;

  border-radius:
    50%;

  font-size:
    1.55rem;

  font-weight:
    850;

  box-shadow:
    0 0 0 2px
    rgba(
      245,
      158,
      11,
      0.35
    ),
    0 8px 24px
    rgba(
      24,
      36,
      51,
      0.14
    );
}


.profile-avatar-image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


/* =========================================
   OWN PROFILE USERNAME
========================================= */

.profile-username {
  margin:
    0 0 5px;

  color:
    var(--orange-dark);

  font-size:
    0.86rem;

  font-weight:
    850;
}


/* =========================================
   OWN PROFILE NAME
========================================= */

.profile-name-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    7px;
}


.profile-name {
  margin:
    0 !important;

  color:
    var(--navy);

  font-size:
    2rem !important;

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.03em;
}


/* =========================================
   OWN PROFILE LOCATION
========================================= */

.profile-location {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.92rem;

  font-weight:
    500;
}


/* =========================================
   OWN PROFILE MEMBER SINCE
========================================= */

.profile-member-since {
  margin:
    7px 0 0;

  color:
    var(--light-muted);

  font-size:
    0.78rem;

  font-weight:
    600;
}


/* =========================================
   OWN PROFILE RATING
========================================= */

.profile-rating-summary {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-top:
    9px;

  color:
    var(--text);

  font-size:
    0.86rem;
}


.profile-rating-star {
  color:
    var(--orange);

  font-size:
    1rem;
}


.profile-rating-count {
  color:
    var(--muted);

  text-decoration:
    none;
}


.profile-rating-count:hover {
  color:
    var(--orange-dark);

  text-decoration:
    underline;
}


.profile-rating-empty {
  color:
    var(--muted);
}


/* =========================================
   OWN PROFILE BUSINESS BADGES
========================================= */

.profile-business-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    4px 9px;

  color:
    var(--orange-dark);

  background-color:
    #fff7e6;

  border:
    1px solid
    #f4c477;

  border-radius:
    999px;

  font-size:
    0.68rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}


.profile-verified-badge {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    4px 9px;

  color:
    #166534;

  background-color:
    #dcfce7;

  border:
    1px solid
    #86efac;

  border-radius:
    999px;

  font-size:
    0.7rem;

  font-weight:
    800;
}


/* =========================================
   OWN PROFILE BUSINESS INFORMATION
========================================= */

.profile-business-type {
  margin:
    4px 0;

  color:
    var(--navy);

  font-size:
    0.86rem;

  font-weight:
    750;
}


.profile-business-detail {
  margin:
    3px 0 0;

  color:
    var(--muted);

  font-size:
    0.82rem;
}


.profile-business-detail
strong {
  color:
    var(--navy);
}


.profile-business-contact {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px 18px;

  margin-top:
    7px;
}


.profile-business-description {
  max-width:
    650px;

  margin-top:
    9px;

  color:
    var(--muted);

  font-size:
    0.84rem;

  line-height:
    1.5;
}


/* =========================================
   OWN PROFILE ACTION BUTTONS
========================================= */

.profile-header-buttons {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    9px;

  flex-shrink:
    0;
}


.profile-header-buttons
.button {
  min-height:
    42px;

  padding-left:
    18px;

  padding-right:
    18px;

  border-radius:
    9px;

  font-size:
    0.82rem;

  font-weight:
    800;
}


.profile-edit-button {
  color:
    var(--navy);

  background-color:
    #ffffff;

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


.profile-edit-button:hover {
  color:
    var(--navy);

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

  border-color:
    #94a3b8;
}


/* =========================================
   PUBLIC PROFILE HEADER
========================================= */

.public-profile-header {
  position:
    relative;

  padding:
    28px 34px;

  margin-bottom:
    22px;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 78%,
      #fff8ed 100%
    );

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

  border-radius:
    var(--radius-large);

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


/* orange accent */

.public-profile-header::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    5px;

  height:
    100%;

  background:
    linear-gradient(
      180deg,
      var(--orange),
      var(--orange-dark)
    );
}


/* =========================================
   PUBLIC PROFILE LAYOUT
========================================= */

.public-profile-header-layout {
  width:
    100%;
}


.public-profile-user {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  width:
    100%;

  min-width:
    0;
}


.public-profile-user-details {
  flex:
    1;

  min-width:
    0;
}


/* =========================================
   PUBLIC PROFILE AVATAR
========================================= */

.public-profile-avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    96px;

  height:
    96px;

  min-width:
    96px;

  overflow:
    hidden;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  border:
    3px solid
    #ffffff;

  border-radius:
    50%;

  font-size:
    1.5rem;

  font-weight:
    850;

  box-shadow:
    0 0 0 2px
    rgba(
      245,
      158,
      11,
      0.35
    ),
    0 8px 24px
    rgba(
      24,
      36,
      51,
      0.15
    );
}


.public-profile-avatar-image {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================
   PUBLIC PROFILE NAME
========================================= */

.public-profile-username {
  display:
    inline-block;

  margin-bottom:
    5px;

  color:
    var(--orange-dark);

  font-size:
    0.88rem;

  font-weight:
    800;
}


.public-profile-name-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-bottom:
    5px;
}


.public-profile-name {
  margin-bottom:
    0 !important;

  color:
    var(--navy);

  font-size:
    2rem !important;

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.03em;
}


/* =========================================
   PUBLIC PROFILE LOCATION
========================================= */

.public-profile-location {
  margin-bottom:
    0;

  color:
    var(--muted);

  font-size:
    0.96rem;
}


.public-profile-member-since {
  margin-top:
    7px;

  color:
    var(--light-muted);

  font-size:
    0.8rem;

  font-weight:
    600;
}


/* =========================================
   PUBLIC PROFILE RATING
========================================= */

.public-profile-rating-summary {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-top:
    10px;

  font-size:
    0.9rem;
}


.public-profile-rating-star {
  color:
    var(--orange);

  font-size:
    1rem;
}


.public-profile-review-count,
.public-profile-no-reviews {
  color:
    var(--muted);

  font-size:
    0.86rem;
}


.public-profile-review-count {
  text-decoration:
    none;
}


.public-profile-review-count:hover {
  color:
    var(--orange-dark);

  text-decoration:
    underline;
}


/* =========================================
   PUBLIC PROFILE ACTIONS
========================================= */

.public-profile-user-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex-shrink:
    0;
}




.public-profile-user-actions
form {
  display:
    flex;

  align-items:
    center;

  margin:
    0;

  padding:
    0;
}


.public-profile-user-actions
form .button {
  margin:
    0;

  height:
    100%;
}


.public-profile-user-actions
.button {
  min-height:
    40px;

  padding-left:
    17px;

  padding-right:
    17px;

  font-size:
    0.86rem;

  font-weight:
    750;

  border-radius:
    8px;
}


/* =========================================
   BLOCK BUTTON
========================================= */

.public-profile-block-button {
  color:
    #991b1b;

  background-color:
    #ffffff;

  border:
    1px solid
    #fecaca;
}


.public-profile-block-button:hover {
  color:
    #7f1d1d;

  background-color:
    #fef2f2;

  border-color:
    #fca5a5;
}


/* =========================================
   UNBLOCK BUTTON
========================================= */

.public-profile-unblock-button {
  color:
    #166534;

  background-color:
    #f0fdf4;

  border:
    1px solid
    #bbf7d0;
}


.public-profile-unblock-button:hover {
  color:
    #14532d;

  background-color:
    #dcfce7;
}


/* =========================================
   REPORT BUTTON
========================================= */

.public-profile-report-button {
  color:
    var(--muted);

  background-color:
    #ffffff;

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


.public-profile-report-button:hover {
  color:
    var(--red-dark);

  background-color:
    #fef2f2;

  border-color:
    #fecaca;
}


/* =========================================
   PUBLIC VERIFIED BADGE
========================================= */

.public-profile-verified-badge {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    0.35rem 0.7rem;

  color:
    #207a3c;

  background:
    #e8f7ed;

  border-radius:
    999px;

  font-size:
    0.8rem;

  font-weight:
    700;
}


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

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

  .profile-header-card {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      18px;

    padding:
      24px;
  }


  .profile-header-buttons {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .public-profile-header {
    padding:
      26px 28px;
  }


  .public-profile-user {
    flex-wrap:
      wrap;
  }


  .public-profile-user-actions {
    width:
      100%;

    padding-left:
      120px;
  }

}


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

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

  .profile-header-card {
    padding:
      20px 16px;

    gap:
      16px;
  }


  .profile-user-info {
    flex-direction:
      column;

    align-items:
      center;

    gap:
      12px;

    width:
      100%;

    text-align:
      center;
  }


  .profile-avatar {
    width:
      82px;

    height:
      82px;
  }


  .profile-user-details {
    width:
      100%;
  }


  .profile-name-row {
    justify-content:
      center;
  }


  .profile-name {
    font-size:
      1.55rem !important;
  }


  .profile-rating-summary {
    justify-content:
      center;
  }


  .profile-header-buttons {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      8px;

    width:
      100%;
  }


  .profile-header-buttons
  .button {
    width:
      100%;

    min-width:
      0;
  }


  .profile-header-buttons
  .button:first-child {
    grid-column:
      span 2;
  }


  .profile-business-contact {
    justify-content:
      center;
  }


  .public-profile-header {
    padding:
      20px 16px;
  }


  .public-profile-user {
    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      12px;

    text-align:
      center;
  }


  .public-profile-avatar {
    width:
      72px;

    height:
      72px;

    min-width:
      72px;
  }


  .public-profile-user-details {
    width:
      100%;
  }


  .public-profile-name-row {
    justify-content:
      center;
  }


  .public-profile-rating-summary {
    justify-content:
      center;
  }


  .public-profile-name {
    font-size:
      1.5rem !important;
  }


  .public-profile-user-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      8px;

    width:
      100%;

    padding-left:
      0;
  }


  .public-profile-user-actions
  .button {
    width:
      100%;

    min-width:
      0;
  }

}


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

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

  .profile-header-card {
    padding:
      18px 14px;
  }


  .profile-avatar {
    width:
      76px;

    height:
      76px;
  }


  .profile-name {
    font-size:
      1.4rem !important;
  }


  .profile-header-buttons {
    grid-template-columns:
      1fr;
  }


  .profile-header-buttons
  .button:first-child {
    grid-column:
      auto;
  }


  .profile-header-buttons
  .button {
    min-height:
      40px;

    font-size:
      0.78rem;
  }


  .public-profile-header {
    padding:
      18px 14px;
  }


  .public-profile-avatar {
    width:
      68px;

    height:
      68px;

    min-width:
      68px;
  }


  .public-profile-name {
    font-size:
      1.4rem !important;
  }


  .public-profile-user-actions {
    grid-template-columns:
      1fr;
  }


  .public-profile-user-actions
  .button {
    min-height:
      40px;

    font-size:
      0.76rem;
  }

}
/* =========================================
   OWN PROFILE HEADER STATS
========================================= */

.profile-header-stats {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    12px;

  color:
    var(--muted);

  font-size:
    0.78rem;
}


.profile-header-stat {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;
}


.profile-header-stat
strong {
  color:
    var(--navy);

  font-size:
    0.82rem;

  font-weight:
    850;
}


.profile-header-stat
span {
  color:
    var(--muted);

  font-weight:
    650;
}


.profile-header-stat-divider {
  color:
    var(--border-dark);

  font-size:
    0.7rem;
}


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

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

  .profile-header-stats {
    justify-content:
      center;

    gap:
      7px;

    margin-top:
      11px;
  }

}


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

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

  .profile-header-stats {
    gap:
      6px;

    font-size:
      0.74rem;
  }


  .profile-header-stat
  strong {
    font-size:
      0.78rem;
  }


  .profile-header-stat-divider {
    display:
      none;
  }

}


/* =========================================
   DESKTOP OWN PROFILE POLISH
========================================= */

@media screen and (min-width: 1060px) {

  .public-profile-header {
    padding:
      20px 24px;

    margin-bottom:
      14px;
  }


  .public-profile-user {
    display:
      grid;

    grid-template-columns:
      84px
      minmax(0, 620px)
      auto;

    align-items:
      center;

    justify-content:
      start;

    column-gap:
      20px;

    width:
      100%;
  }


  .public-profile-avatar {
    width:
      84px;

    height:
      84px;

    min-width:
      84px;
  }


  .public-profile-user-details {
    max-width:
      620px;
  }


  .public-profile-username {
    margin-bottom:
      3px;

    font-size:
      0.8rem;
  }


  .public-profile-name-row {
    gap:
      7px;

    margin-bottom:
      3px;
  }


  .public-profile-name {
    font-size:
      1.7rem !important;
  }


  .public-profile-location {
    font-size:
      0.88rem;
  }


  .public-profile-member-since {
    margin-top:
      4px;

    font-size:
      0.74rem;
  }


  .public-profile-rating-summary {
    margin-top:
      6px;

    font-size:
      0.82rem;
  }


  .public-profile-review-count,
  .public-profile-no-reviews {
    font-size:
      0.78rem;
  }


  .profile-header-stats {
    gap:
      6px;

    margin-top:
      8px;
  }


  .profile-header-stat {
    padding:
      4px 8px;

    background-color:
      #f8fafc;

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

    border-radius:
      999px;
  }


  .profile-header-stat-divider {
    display:
      none;
  }


  .profile-header-stat
  strong {
    font-size:
      0.76rem;
  }


  .profile-header-stat
  span {
    font-size:
      0.72rem;
  }


  .public-profile-user-actions {
    align-self:
      center;

    justify-content:
      flex-start;

    gap:
      7px;

    max-width:
      430px;
  }


  .public-profile-user-actions
  .button {
    min-height:
      36px;

    padding-left:
      14px;

    padding-right:
      14px;

    font-size:
      0.78rem;
  }

}