/* =========================================================
   Public profile (/user-detail/...) — additions to the dashboard design
   (layout, cards and menu come from the shared dashboard-* classes)
   ========================================================= */

/* ---- Header: social links ---- */

.public-profile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.public-profile-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #f1f1f1;
    border-radius: 9999px;
    background: #fff;
    transition: border-color .15s ease, transform .15s ease;
}

.public-profile-social:hover {
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}

.public-profile-social img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* ---- Header: follow ---- */

.public-profile-follow-btn {
    border: 1px solid transparent;
    cursor: pointer;
}

.public-profile-follow-btn:hover {
    background-color: #f0b400;
}

.public-profile-follow-btn.is-following {
    background: #fff;
    border-color: #dfdfdf;
}

.public-profile-follow-btn.is-following:hover {
    background: #fafafa;
}

.public-profile-follow-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

.public-profile-toast {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff5d9;
    color: #0b0b0b;
    font-size: 14px;
    font-weight: 500;
}

.public-profile-toast.is-error {
    background: #fee2e2;
    color: #991b1b;
}

/* ---- Mobile section menu (the sidebar is hidden below 1024px) ---- */

.public-profile-mobile-nav {
    display: flex;
    gap: 8px;
    margin: 4px -16px 8px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.public-profile-mobile-nav::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .public-profile-mobile-nav {
        display: none;
    }
}

.public-profile-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #f1f1f1;
    border-radius: 9999px;
    background: #fff;
    color: #0b0b0b;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.public-profile-chip.is-active {
    border-color: var(--color-secondary);
    background: var(--color-secondary);
}

.public-profile-chip-count {
    color: #898989;
    font-weight: 600;
}

.public-profile-chip.is-active .public-profile-chip-count {
    color: #0b0b0b;
}

.public-profile-chip:focus-visible {
    outline: 2px solid #0b0b0b;
    outline-offset: 2px;
}

/* ---- Stats ---- */

.public-profile-level-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.public-profile-metric-link {
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.public-profile-metric-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgb(0 0 0 / .06);
}

/* ---- Cards ---- */

.public-profile-card-link {
    color: inherit;
    text-decoration: none;
}

.public-profile-card-link:hover .dashboard-listing-title,
.public-profile-card-link:hover h3 {
    text-decoration: underline;
}

.dashboard-listing-title .public-profile-verified {
    display: inline-block;
    margin-left: 4px;
    vertical-align: -2px;
}

.public-profile-review-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.public-profile-location-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #fff5d9;
    border-color: #fff5d9;
}

/* ---- Compliments ---- */

.public-profile-compliment-card {
    flex-direction: column;
    align-items: stretch;
}

.public-profile-compliment-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.public-profile-compliment-note {
    margin: 0;
    font-size: 13px;
    color: #6d6d6d;
}

.public-profile-compliment-note a {
    color: #0b0b0b;
    font-weight: 600;
    text-decoration: underline;
}

.public-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 9999px;
    background: #fff5d9;
    font-size: 13px;
    font-weight: 600;
    color: #0b0b0b;
    white-space: nowrap;
}

.public-profile-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.public-profile-badge-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #0b0b0b;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* ---- Notices ---- */

.public-profile-private,
.public-profile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
}

.public-profile-private p,
.public-profile-empty p,
.public-profile-empty-text {
    margin: 0;
    max-width: 420px;
    font-size: 14px;
    color: #6d6d6d;
}

.public-profile-empty-text {
    padding: 24px 0;
}

@media (prefers-reduced-motion: reduce) {
    .public-profile-social,
    .public-profile-metric-link {
        transition: none;
    }

    .public-profile-social:hover,
    .public-profile-metric-link:hover {
        transform: none;
    }
}

/* =========================================================
   Phones and tablets (below 1024px): the profile header. The shared dashboard rule keeps the
   header row at the photo's height (58px) and the subtitle on one clipped line, which suits the
   private dashboard's greeting but not a profile: the name pushed into the cover, the place was
   cut short and the social icons slid under the button. Here the row grows with its content,
   the subtitle wraps, and the section menu reads as underlined tabs like the listing page.
   Nothing is hidden; desktop is untouched.
   ========================================================= */
@media (max-width: 1023.98px) {
    .public-profile-page .dashboard-home .dashboard-welcome {
        gap: 16px;
    }

    .public-profile-page .dashboard-home .dashboard-welcome-info {
        height: auto;
        align-items: flex-start;
        gap: 14px;
        padding-top: 4px;
    }

    .public-profile-page .dashboard-home .dashboard-welcome-avatar {
        width: 64px;
        height: 64px;
    }

    .public-profile-page .dashboard-home .dashboard-welcome-copy {
        gap: 4px;
        padding-top: 4px;
    }

    .public-profile-page .dashboard-home .dashboard-welcome-title {
        font-size: 21px;
        line-height: 1.2;
    }

    .public-profile-page .dashboard-home .dashboard-welcome-desc {
        overflow: visible;
        color: #6b6b6b;
        font-size: 13px;
        line-height: 1.45;
        white-space: normal;
    }

    .public-profile-page .public-profile-socials {
        margin-top: 6px;
    }

    .public-profile-page .public-profile-social {
        width: 32px;
        height: 32px;
    }

    .public-profile-page .dashboard-welcome .dashboard-add-btn {
        width: 100%;
        justify-content: center;
    }

    /* Section menu: underlined tabs */
    .public-profile-mobile-nav {
        gap: 20px;
        margin: 4px -16px 12px;
        padding: 0 16px;
        border-bottom: 1px solid #ececec;
    }

    .public-profile-chip {
        min-height: 44px;
        padding: 0;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        color: #6b6b6b;
    }

    .public-profile-chip.is-active {
        border-color: transparent;
        border-bottom-color: #0b0b0b;
        background: transparent;
        color: #0b0b0b;
        font-weight: 700;
    }
}