:root {
    --color-fiverr-green: #1dbf73;
    --color-forest-stage: #555555;
    --color-forest-stage-variant: #2c2c2c;
    --color-carbon: #555555;
    /*--color-carbon: #222325;*/
    --color-graphite: #62646a;
    --color-paper: #ffffff;
    --color-mist: #dadbdd;
    --color-fog: #c5c6c9;
    --color-slate: #404145;
    --color-smoke: #74767e;
    --font-macan: 'DM Sans', 'Segoe UI', sans-serif;
    --page-max-width: 1200px;
    --shadow-md: rgba(0, 0, 0, 0.13) 0 3px 10px 0;
}

html, body { font-family: var(--font-macan); color: var(--color-carbon); background: var(--color-paper); }
body { font-size: 16px; line-height: 1.5; }
h1, h2, h3 { font-weight: 600; line-height: 1.05; }
a, .btn-link { color: var(--color-carbon); }
a:hover, .btn-link:hover { color: var(--color-fiverr-green); }
.eyebrow { color: var(--color-fiverr-green); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.56; margin-bottom: .75rem; }
.homepage-hero { position: relative; overflow: hidden; background-color: var(--color-carbon); color: var(--color-paper); padding: 5rem 1.5rem 4rem; margin: -1.1rem -1.5rem 0; }
.homepage-hero__image { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation: heroImageReveal .9s ease-in-out forwards; }
.homepage-hero::before { position: absolute; inset: 0; background: rgba(34, 35, 37, .72); content: ''; z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: var(--page-max-width); margin: auto; }
@keyframes heroImageReveal { 0% { opacity: 0; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
.discovery-header { position: relative; overflow: hidden; background-color: var(--color-carbon); color: var(--color-paper); padding: 3rem 1.5rem; margin: -1.1rem -1.5rem 2rem; }
.discovery-header__image { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; animation: heroImageReveal .9s ease-in-out forwards; }
.discovery-header::before { position: absolute; inset: 0; background: rgba(34, 35, 37, .72); content: ''; z-index: 1; }
.discovery-header__content { position: relative; z-index: 2; max-width: var(--page-max-width); margin: auto; }
.homepage-hero h1 { max-width: 800px; font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 280; letter-spacing: -0.06em; line-height: 1; }
.homepage-hero p:not(.eyebrow) { color: var(--color-mist); font-size: 1.125rem; }
.homepage-search, .search-panel { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: .75rem; margin-top: 2rem; max-width: 900px; }
.homepage-search .form-control, .homepage-search .form-select, .search-panel .form-control { min-height: 3rem; }
.hero-suggestions { color: var(--color-mist); font-size: .875rem; margin-top: 1rem; }
.hero-suggestions span { color: var(--color-fiverr-green); }
.homepage-registration { background: var(--color-forest-stage); color: var(--color-paper); padding: 3.5rem 1.5rem; }
.homepage-registration__content { align-items: center; display: flex; gap: 2rem; justify-content: space-between; margin: auto; max-width: var(--page-max-width); }
.homepage-registration__message { animation: registrationMessageChange .65s ease-in-out; }
.homepage-registration h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 280; letter-spacing: -0.03em; margin: 0; max-width: 650px; }
.homepage-registration p:not(.eyebrow) { color: var(--color-mist); font-size: 1.125rem; margin: 1rem 0 0; max-width: 620px; }
.homepage-registration .eyebrow { color: var(--color-fiverr-green); }
.homepage-registration__actions { align-items: flex-start; display: flex; flex-direction: column; flex-shrink: 0; gap: .75rem; }
.homepage-registration__link { color: var(--color-paper); font-weight: 600; text-align: center; }
.homepage-registration__link:hover { color: var(--color-fiverr-green); }
@keyframes registrationMessageChange { 0% { opacity: 0; transform: translateY(.75rem); } 100% { opacity: 1; transform: translateY(0); } }
.homepage-section { max-width: var(--page-max-width); margin: auto; padding: 3.5rem 0; }
.section-tinted { max-width: none; padding-left: max(1.5rem, calc((100% - var(--page-max-width)) / 2)); padding-right: max(1.5rem, calc((100% - var(--page-max-width)) / 2)); background: var(--color-forest-stage); color: var(--color-paper); }
.section-tinted h2, .section-tinted .eyebrow { color: var(--color-paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading h2 { margin: 0; }
.section-heading a { color: var(--color-fiverr-green); font-weight: 600; }
.category-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.category-item { border: 1.5px solid var(--color-fiverr-green); border-radius: 9999px; color: var(--color-fiverr-green); padding: .5rem 1rem; text-decoration: none; }
.category-item:hover { background: var(--color-fiverr-green); color: var(--color-carbon); }
.freelancer-card { background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 16px; height: 100%; overflow: hidden; }
.freelancer-card__photo { width: 100%; height: 180px; object-fit: cover; display: block; }
.freelancer-card__photo--empty { background: var(--color-forest-stage-variant); color: var(--color-paper); display: grid; place-items: center; font-size: 2rem; font-weight: 700; }
.freelancer-card__body { padding: 1rem; }
.freelancer-card h3 { font-size: 1.125rem; margin: 0; }
.freelancer-card__title { color: var(--color-slate); margin: .35rem 0; }
.freelancer-card__skills { color: var(--color-graphite); font-size: .875rem; }
.homepage-cta { background: var(--color-carbon); color: var(--color-paper); padding: 4rem 1.5rem; text-align: center; }
.homepage-cta h2 { font-size: 3rem; font-weight: 280; letter-spacing: -0.03em; }
.discovery-header { background: var(--color-forest-stage); color: var(--color-paper); padding: 3rem 1.5rem; margin: -1.1rem -1.5rem 2rem; }
.discovery-header h1 { max-width: 720px; font-size: 3rem; font-weight: 280; letter-spacing: -0.03em; }
.discovery-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; max-width: var(--page-max-width); margin: auto; }
.discovery-filters { border-right: 1px solid var(--color-mist); padding-right: 1.5rem; }
.sort-select { max-width: 180px; }
.empty-state { background: var(--color-mist); padding: 3rem; text-align: center; }
/* Layout principal da página pública do freelancer */
.public-profile-shell { max-width: 1200px; margin: 0 auto; }
.public-profile-card { background: var(--color-paper); border: 1px solid #eef0f2; box-shadow: 0 8px 30px rgba(20, 27, 45, .06); border-radius: 18px; padding: 2rem; }

/* Hero do perfil / topo com foto, nome e CTA */
.public-profile-hero { background: linear-gradient(135deg, rgba(20, 27, 45, .04), rgba(20, 27, 45, .01)); }
.public-profile-hero__layout { display: flex; align-items: center; gap: 2rem; }
.public-profile-photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(29, 191, 115, .18); box-shadow: 0 12px 24px rgba(20, 27, 45, .12); }
.public-profile-summary h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.04em; }
.public-profile-title { font-size: 1.25rem; color: var(--color-slate); margin: .5rem 0 0; }
.public-profile-category { margin: .25rem 0 0; color: var(--color-fiverr-green); font-weight: 600; }
.public-profile-rating { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .6rem .9rem; background: rgba(29, 191, 115, .08); border: 1px solid rgba(29, 191, 115, .18); border-radius: 999px; font-size: .92rem; color: var(--color-slate); }
.public-profile-rating__stars { color: #f4b942; letter-spacing: .12em; }
.public-profile-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }
.public-profile-actions__primary { background: var(--color-carbon); border-color: var(--color-carbon); color: var(--color-paper); padding: .85rem 1.4rem; }
.public-profile-actions__primary:hover { background: var(--color-slate); border-color: var(--color-slate); color: var(--color-paper); }
.public-profile-actions__secondary { border-color: #dfe6eb; color: var(--color-carbon); padding: .85rem 1.4rem; }
.public-profile-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-top: 1.75rem; }

/* Feedback / avaliações */
.public-profile-review-list { display: grid; gap: 1rem; }
.public-profile-review { border: 1px solid #edf1f3; border-radius: 14px; padding: 1rem 1.1rem; background: linear-gradient(180deg, #fff, #fafafa); }
.public-profile-review__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.public-profile-review__stars { color: #f4b942; letter-spacing: .12em; }

.public-profile-stat { background: #f8f9fa; border: 1px solid #edf1f3; border-radius: 14px; padding: 1rem; }
.public-profile-stat__label { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-graphite); margin-bottom: .35rem; }
.public-profile-stat strong { font-size: 1rem; line-height: 1.4; }
.public-profile-card h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.public-profile-card p, .public-profile-card li { color: var(--color-slate); }
.public-profile-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(29, 191, 115, .35); background: rgba(29, 191, 115, .08); color: var(--color-carbon); padding: .55rem .9rem; font-weight: 600; }
.public-profile-review-list { display: grid; gap: 1rem; }
.public-profile-review { border: 1px solid #edf1f3; border-radius: 14px; padding: 1rem 1.1rem; background: linear-gradient(180deg, #fff, #fafafa); }
.public-profile-review__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.public-profile-review__stars { color: #f4b942; letter-spacing: .12em; }
.public-profile-entry { padding: 1rem 0; border-top: 1px solid #edf1f3; }
.public-profile-entry:first-of-type { border-top: none; padding-top: 0; }
.public-profile-entry__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.public-profile-portfolio-item { border: 1px solid #edf1f3; border-radius: 14px; overflow: hidden; background: #fff; height: 100%; }
.public-profile-portfolio-item__image { width: 100%; height: 180px; object-fit: cover; display: block; }
.public-profile-portfolio-item__body { padding: 1rem; }
.public-profile-list { list-style: none; padding-left: 0; margin: 0; }
.public-profile-list li { padding: .8rem 0; border-bottom: 1px solid #edf1f3; }
.public-profile-list li:last-child { border-bottom: 0; }
.public-profile-list li span { color: var(--color-graphite); }
@media (max-width: 992px) { .public-profile-hero__layout { flex-direction: column; align-items: flex-start; } .public-profile-card { padding: 1.5rem; } }
@media (max-width: 700px) { .public-profile-rating { width: 100%; justify-content: center; } .public-profile-actions { flex-direction: column; } .public-profile-entry__header { flex-direction: column; } .public-profile-stat { padding: .8rem; } }
.form-control, .form-select { border-color: var(--color-fog); border-radius: 12px; color: var(--color-carbon); padding: .625rem 1rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--color-fiverr-green); box-shadow: 0 0 0 .2rem rgba(29, 191, 115, .2); }
.btn { border-radius: 8px; font-weight: 700; padding: .625rem 1rem; }
.btn-primary { color: var(--color-paper); background: var(--color-carbon); border-color: var(--color-carbon); }
.btn-primary:hover { color: var(--color-paper); background: var(--color-slate); border-color: var(--color-slate); }
.btn-outline-primary { color: var(--color-carbon); border-color: var(--color-carbon); }
.btn-outline-primary:hover { color: var(--color-paper); background: var(--color-carbon); border-color: var(--color-carbon); }
.btn-outline-secondary { color: var(--color-carbon); border-color: var(--color-graphite); }
@media (max-width: 700px) { .homepage-search, .search-panel { grid-template-columns: 1fr; } .homepage-registration__content { align-items: flex-start; flex-direction: column; } .homepage-section { padding: 2.5rem 1rem; } .discovery-layout { display: block; padding: 0 1rem; } .discovery-filters { border: 0; padding: 0 0 2rem; } .section-heading { align-items: start; } .discovery-header h1 { font-size: 2.5rem; } }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* FOOTER BEGIN */

.site-footer {
    color: #222325;
    font-size: 0.95rem;
}

.footer-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #222325;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 0.9rem;
    }

    .footer-links a {
        color: #404145;
        text-decoration: none;
        line-height: 1.45;
        transition: color 0.15s ease;
    }

        .footer-links a:hover {
            color: #000;
            text-decoration: underline;
        }

.footer-bottom {
    color: #74767e;
}

.footer-brand {
    color: #404145;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

    .footer-brand:hover {
        color: #222325;
    }

.footer-copyright {
    color: #74767e;
    font-size: 0.85rem;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #404145;
    font-size: 1.1rem;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .footer-social:hover {
        background-color: #f5f5f5;
        color: #000;
    }

.footer-setting {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #74767e;
    font-size: 0.9rem;
    font-weight: 600;
}

.footer-separator {
    width: 1px;
    height: 20px;
    background-color: #ddd;
}


/* Tablet */
@media (max-width: 991.98px) {

    .footer-bottom {
        text-align: center;
    }
}


/* Mobile */
@media (max-width: 575.98px) {

    .site-footer .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .footer-title {
        margin-bottom: 1rem;
    }

    .footer-links li {
        margin-bottom: 0.7rem;
    }

    .footer-brand {
        font-size: 1.1rem;
    }

    /* FOOTER END */
}