/* ns-profile-logo.css
 * Business-logo upload box and the sidebar avatar image.
 */

/* ---------------- whole upload box is the file picker ----------------
   The box is now a <label for="uploadCompanyLogo">, so a click anywhere
   inside it opens the picker - not just the small Choose File button. The
   cursor and hover state are what tell people that. */
.upload-logo-box.is-dropzone {
    display: block;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.upload-logo-box.is-dropzone:hover {
    border-color: #6CB545;
    background: #f7fbf4;
}

.upload-logo-box.is-dropzone:focus-within,
.upload-logo-box.is-dropzone:active {
    border-color: #6CB545;
    box-shadow: 0 0 0 3px rgba(108, 181, 69, .16);
}

/* the button inside is now a <span>; keep it looking like a button */
.upload-logo-box.is-dropzone .choose-file-btn {
    cursor: pointer;
    pointer-events: none;   /* the label already handles the click */
}

/* ---------------- "Current Logo" badge ----------------
   Distinguished from the green "New Logo" badge so it is obvious whether
   you are looking at what is saved or what you just picked. */
.ns-current-logo-badge {
    background: #eef4ea;
    color: #3f6b2c;
    border: 1px solid #d6e7cb;
    font-weight: 600;
}

/* ---------------- sidebar avatar ---------------- */
.buyer-shelf-avatar .ns-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.buyer-shelf-avatar:has(.ns-avatar-img) {
    padding: 0;
    overflow: hidden;
    background: #fff;
}

/* ===========================================================================
   Signed-in profile menu in the public header
   Replaces the plain "Dashboard" + "Logout" pills. Shaped like the Login /
   Sign up pills it sits beside so the header stays visually consistent.
   =========================================================================== */

.ns-usermenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;                  /* not relying on Bootstrap's gap utility */
    padding: 6px 14px 6px 6px;
    background: #fff;
    border: 1.5px solid #d8e6cf !important;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #1f3326;
    cursor: pointer;
    max-width: 260px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ns-usermenu-trigger:hover {
    border-color: #6CB545 !important;
    background: #f7fbf4;
}

.ns-usermenu-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 181, 69, .22);
}

.ns-usermenu-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2f5d3a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    overflow: hidden;
}

.ns-usermenu-avatar.lg {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

.ns-usermenu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ns-usermenu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.ns-usermenu-caret {
    flex: 0 0 auto;
    font-size: 11px;
    color: #5c7a63;
    transition: transform .2s ease;
}

.ns-usermenu.show .ns-usermenu-caret {
    transform: rotate(180deg);
}

/* ---------------- menu ---------------- */
.ns-usermenu-menu {
    display: none;
    list-style: none;          /* stated here, not inherited from Bootstrap */
    min-width: 252px;
    margin-top: 10px;
    padding: 8px;
    border: 0;                 /* no outline - the shadow defines the edge */
    border-radius: 16px;
    box-shadow: 0 18px 46px rgba(24, 51, 31, .16);
    background: #fff;
}

.ns-usermenu-menu.show {
    display: block;
    animation: ns-usermenu-in .16s ease;
}

@keyframes ns-usermenu-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

.ns-usermenu-head {
    display: flex !important;   /* theme rules were stacking it vertically */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px 12px;
    margin-bottom: 2px;
}

.ns-usermenu-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ns-usermenu-head-text strong {
    font-size: 14.5px;
    color: #1f3326;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-usermenu-head-text small {
    font-size: 12.5px;
    color: #7b8c80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* separators removed from the menu - kept as a no-op so any stray markup
   cannot reintroduce a line */
.ns-usermenu-sep {
    display: none;
}

.ns-usermenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;          /* padding must not push it past the menu */
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: #27402e;
    text-decoration: none;
    white-space: nowrap;
}

/* Font Awesome glyphs differ in width (a gauge is wider than an arrow), so
   each one gets the SAME fixed box and is centred inside it. That is what
   makes every label start at the same x instead of stepping in and out. */
.ns-usermenu-item i {
    flex: 0 0 20px;
    width: 20px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: #5c7a63;
}

.ns-usermenu-item:hover,
.ns-usermenu-item:focus {
    background: #f1f8ed;
    color: #1f3326;
}

/* Bootstrap's .dropdown-item ships its own padding/display; state ours so the
   highlight fills the row edge to edge rather than hugging the label. */
.ns-usermenu-menu .ns-usermenu-item {
    display: flex;
    width: 100%;
    margin: 0;
}

.ns-usermenu-menu li {
    display: block;
    width: 100%;
}

.ns-usermenu-item.is-logout,
.ns-usermenu-item.is-logout i {
    color: #c0392b;
}

.ns-usermenu-item.is-logout:hover {
    background: #fdf0ee;
    color: #a93226;
}

@media (max-width: 1199.98px) {
    .ns-usermenu-name { max-width: 110px; }
}

.ns-usermenu-menu li { list-style: none; }

/* ---------------- mobile menu profile row ----------------
   The collapsed menu keeps its stacked buttons; this just names who is
   signed in above them, so the two layouts agree. */
.ns-usermenu-mobile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 2px 12px;
}

.ns-usermenu-mobile .ns-usermenu-head-text strong { font-size: 15px; }

/* ---------------- file-format hint ----------------
   Stating the accepted formats next to the field, so an unsupported file is
   a surprise you can avoid rather than one you discover after submitting. */
.ns-file-hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: #7b8c80;
    line-height: 1.4;
}

/* ---------------- logo preview beside the picker ----------------
 * The current-logo card and the "Choose File" dropzone were stacked, so the
 * block ran tall and left the row lopsided. They sit on one line now, and
 * the picker takes whatever width is left - so with no logo on file it
 * simply fills the row on its own.
 */
.ns-logo-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.ns-logo-row > .ns-s602 {
    flex: 0 0 auto;
    margin-bottom: 0 !important;   /* the card carries mb-3 for the stacked layout */
    align-self: stretch;
}

.ns-logo-pick {
    flex: 1 1 auto;
    min-width: 0;                  /* lets the dropzone shrink instead of overflowing */
}

/* The theme pins the box to `height: 102px !important`, so it came up
   short against the preview card beside it and the two bottom edges did
   not line up. !important is what it takes to let it stretch; min-height
   keeps the original size when there is no preview to match. */
.ns-logo-pick .upload-logo-box {
    height: 100% !important;
    min-height: 102px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767.98px) {
    .ns-logo-row { flex-direction: column; }
    .ns-logo-row > .ns-s602 { align-self: flex-start; }
}

/* ---------------- the "manage my listings" consent ----------------
 * This checkbox used .form-control-custom - the TEXT INPUT class - so it
 * rendered as a full-width bordered field with a tiny box floating inside.
 * It uses the form's own checkbox pattern now.
 *
 * .buyer-checkbox-label is `display: flex`, but `.form-group-custom label`
 * in the theme carries `display: block !important` at specificity (0,1,1),
 * which wins - so the helper text wrapped underneath the box instead of
 * staying beside it. Matching !important is what it takes to restore flex.
 */
.form-group-custom .buyer-checkbox-label {
    display: flex !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #2b3a2f !important;
}

/* Centre the contents now that the box is taller than its own 102px. The
   theme sets `justify-content: space-between !important`, so this needs
   !important or it is simply ignored. */
.ns-logo-pick .upload-logo-box.is-dropzone {
    justify-content: center !important;
    gap: 6px;
}

/* The theme pins this to `text-align: right; align-self: flex-end`, which
   suited the old full-width box. Beside the preview the column is narrower,
   so it read as a stray indent instead of lining up under "Choose File". */
.ns-logo-pick .upload-helper-text {
    margin-top: 0;
    text-align: left !important;
    align-self: flex-start !important;
}

/* The accepted-types hint was tight against the consent below it. */
.ns-file-hint {
    margin-top: 10px;
}

/* Separate the consent from the upload block above it. */
.ns-consent-row {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid #eef3ea;
}

.ns-consent-row .form-group-custom > label:first-child {
    margin-bottom: 10px !important;
}