/* SteelExperts Shared Site Header */

.landing-user-trigger {
      min-height: 54px;
      padding: 5px 8px 5px 12px;
      border: 1px solid #d9e3ef;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #102147;
      background: #fff;
      font-family: inherit;
      cursor: pointer;
      transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
    }

    .landing-user-trigger:hover {
      border-color: #b9cce1;
      background: #fbfdff;
      box-shadow: 0 8px 22px rgba(15, 45, 75, .08);
    }

    .landing-user-avatar {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border: 2px solid #e1eaf4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #0f4c81;
      background: #edf4fa;
    }

    .landing-user-avatar svg {
      width: 22px;
      height: 22px;
    }

    .landing-user__info {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.35;
    }

    .landing-user__info strong {
      max-width: 180px;
      overflow: hidden;
      color: #102147;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .landing-user__info small {
      max-width: 180px;
      overflow: hidden;
      direction: ltr;
      color: #6b7892;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .landing-user-chevron {
      margin-right: 2px;
      color: #8290a5;
      font-size: 15px;
      line-height: 1;
    }

    .landing-user-trigger--mobile {
      width: 100%;
      justify-content: flex-start;
    }

    .user-drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 199;
      visibility: hidden;
      border: 0;
      background: rgba(4, 25, 52, .38);
      opacity: 0;
      transition:
        opacity 180ms ease,
        visibility 180ms ease;
    }

    .user-drawer-backdrop.is-open {
      visibility: visible;
      opacity: 1;
    }

    .user-account-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 200;
      width: min(350px, calc(100vw - 24px));
      padding: 22px;
      overflow-y: auto;
      color: #172b45;
      background: #fff;
      box-shadow: -24px 0 60px rgba(7, 35, 69, .18);
      transform: translateX(105%);
      transition: transform 220ms ease;
    }

    .user-account-drawer.is-open {
      transform: translateX(0);
    }

    .user-drawer-header {
      padding-bottom: 18px;
      border-bottom: 1px solid #edf1f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .user-drawer-title {
      color: #082f5b;
      font-size: 15px;
      font-weight: 900;
    }

    .user-drawer-close {
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid #dde7f0;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #53657c;
      background: #f8fafc;
      font-family: inherit;
      font-size: 25px;
      cursor: pointer;
    }

    .user-drawer-profile {
      padding: 24px 0 20px;
      border-bottom: 1px solid #edf1f6;
      text-align: center;
    }

    .user-drawer-avatar {
      width: 82px;
      height: 82px;
      margin: 0 auto 13px;
      border: 4px solid #e7eff7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f4c81;
      background: #edf4fa;
    }

    .user-drawer-avatar svg {
      width: 36px;
      height: 36px;
    }

    .user-drawer-profile strong {
      display: block;
      color: #082f5b;
      font-size: 16px;
      font-weight: 900;
    }

    .user-drawer-profile small {
      display: block;
      margin-top: 4px;
      direction: ltr;
      color: #758399;
      font-size: 11px;
    }

    .user-drawer-nav {
      margin-top: 18px;
      display: grid;
      gap: 5px;
    }

    .user-drawer-nav a {
      min-height: 45px;
      padding: 0 14px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      color: #344a64;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    .user-drawer-nav a:hover {
      color: #0f4c81;
      background: #edf6fd;
    }

    .user-drawer-logout {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid #edf1f6;
    }

    .user-drawer-logout form {
      margin: 0;
    }

    .user-drawer-logout button {
      width: 100%;
      min-height: 44px;
    }

    body.user-drawer-open {
      overflow: hidden;
    }

/* Shared header bottom gradient */
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(91, 103, 112, .16),
        rgba(91, 103, 112, .06) 45%,
        rgba(91, 103, 112, 0)
    );
}


/* SIMPLE MOBILE HEADER START */

@media (max-width: 899px) {

    .header-inner {
        min-height: 72px;
        width: calc(100% - 24px);
        justify-content: space-between;
        gap: 10px;
    }

    .header-actions {
        margin: 0;
        flex: 0 1 auto;
    }

    .brand {
        margin: 0;
        flex: 0 0 auto;
    }

    .landing-user-trigger {
        max-width: 220px;
        min-height: 52px;
        padding: 4px 7px 4px 10px;
        display: flex !important;
    }

    .landing-user-avatar {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .landing-user__info strong,
    .landing-user__info small {
        max-width: 125px;
    }

    .landing-user-chevron {
        display: none;
    }

    .brand img {
        width: 42px !important;
        height: 42px !important;
    }

    .brand-copy b {
        font-size: 15px;
    }

    .brand-copy small {
        display: none;
    }
}

@media (max-width: 430px) {
    .landing-user-trigger {
        max-width: 178px;
    }

    .landing-user__info strong,
    .landing-user__info small {
        max-width: 92px;
    }

    .brand-copy b {
        font-size: 14px;
    }
}

/* SIMPLE MOBILE HEADER END */


/* Drawer admin link */
.user-drawer-divider {
    height: 1px;
    margin: 12px 0;
    background: #e3eaf2;
}

.user-drawer-nav .user-drawer-admin {
    color: #0f4c81;
    background: #edf6fd;
    font-weight: 900;
}

.user-drawer-nav .user-drawer-admin:hover {
    background: #e1f0fb;
}


/* PROFILE IMAGE AVATAR START */

.landing-user-avatar img,
.user-drawer-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-drawer-avatar {
    overflow: hidden;
}

/* PROFILE IMAGE AVATAR END */