/* BindingFree custom styles. MudBlazor handles the bulk; this is for tweaks. */

/* ---------------------------------------------------------------------------
   Inter, self-hosted.
   site.css used to ask for 'Inter' while nothing on the page ever loaded it, so
   every visitor silently fell back to Segoe UI. These are the Google-hosted
   variable-font binaries served from our own origin (OFL licensed, redistribution
   permitted) — no request ever leaves for fonts.gstatic.com.
   One file per subset covers 100-900: Google returns a single variable font for
   every requested weight, so shipping per-weight files would be 4 copies of it.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
    /* The hero full-bleeds with a 100vw-based negative margin; 100vw counts the
       vertical scrollbar, which would otherwise add a stray horizontal scroll.
       'clip' rather than 'hidden' so position:sticky keeps working. */
    overflow-x: clip;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    /* Inter ships with these off by default; they are what makes it look "designed". */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted {
    color: var(--mud-palette-text-secondary);
}

.mud-footer {
    border-top: 1px solid var(--mud-palette-divider);
}

/* ---------------------------------------------------------------------------
   Home hero.
   The landing page is the one place that must not look like the admin panel, so
   it opts out of the MudContainer rhythm: full-bleed tinted band, asymmetric
   two-column layout, oversized headline.
   --------------------------------------------------------------------------- */
.bf-hero {
    /* Escape MudMainContent's horizontal padding to run edge to edge. */
    margin: -1rem calc(50% - 50vw) 0;
    padding: clamp(3rem, 8vw, 6rem) calc(50vw - 50% + 1rem) clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(15, 118, 110, 0.10), transparent 60%),
        radial-gradient(45rem 25rem at 95% 10%, rgba(194, 65, 12, 0.07), transparent 55%),
        var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.bf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}

.bf-hero__headline {
    max-width: 18ch;
    text-wrap: balance;
}

.bf-hero__sub {
    max-width: 46ch;
    color: var(--mud-palette-text-secondary);
}

.bf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Category chips sit inside the hero, not in a card grid — they are navigation,
   not content, and cards were most of what made this read as a dashboard. */
.bf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.bf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.bf-chip:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bf-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* How-it-works: numbered rail rather than three floating cards. */
.bf-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.bf-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
    font-size: 0.9375rem;
}

.bf-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    color: var(--mud-palette-text-secondary);
}

.bf-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .bf-chip {
        transition: none;
    }

    .bf-chip:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Listings browse.
   The filters were bare MudBlazor fields stacked directly on the page background
   with no container and no rhythm, which is what made the page read as unfinished.
   They now sit in their own panel that stays with you while the results scroll.
   --------------------------------------------------------------------------- */
.bf-browse__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin-bottom: 2rem;
}

.bf-filters {
    /* Clears the 64px appbar. Falls back to static on mobile, where the panel sits
       above the results rather than beside them and sticking would cover them. */
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 959.98px) {
    .bf-filters {
        position: static;
    }
}

.bf-filters__title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.bf-listing {
    /* Equal-height cards regardless of title length, with the CTA pinned to the
       bottom edge so the buttons line up across a row. */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bf-listing:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 8px 24px rgba(28, 25, 23, 0.08);
}

.bf-listing__cover,
.bf-listing__cover-skeleton {
    /* Fixed ratio so a row of cards lines up regardless of what the seller uploaded. */
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.bf-listing__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.bf-listing:hover .bf-listing__cover img {
    transform: scale(1.03);
}

.bf-listing__cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mud-palette-text-disabled);
}

.bf-listing__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem;
}

.bf-listing__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 24px;
}

.bf-listing__region {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bf-listing__title {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
    /* Two lines then ellipsis, so one long title cannot stretch its row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bf-listing:hover .bf-listing__title {
    color: var(--mud-palette-primary);
}

.bf-listing__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.75rem;
    /* Guarantees a gap above the CTA even when the title runs to two lines and
       margin-top:auto collapses to zero. */
    margin-bottom: 1.25rem;
}

.bf-listing__amount {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--mud-palette-text-primary);
}

.bf-listing__term {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.bf-listing__cta {
    /* margin-top:auto is what pins it to the bottom of the flex column. */
    margin-top: auto;
}

.bf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bf-results__progress {
    /* Reserved whether or not the bar is showing, so results do not jump down by
       its height every time a keystroke triggers a refine. */
    height: 4px;
    margin-bottom: 0.75rem;
}

.bf-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2.5rem;
}

/* ---------------------------------------------------------------------------
   Listing photos — gallery on the detail page, picker on the create forms.
   --------------------------------------------------------------------------- */
.bf-gallery__main {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    cursor: zoom-in;
}

.bf-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bf-gallery__thumb {
    width: 72px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    opacity: 0.7;
}

.bf-gallery__thumb.is-active {
    border-color: var(--mud-palette-primary);
    opacity: 1;
}

.bf-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-lightbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    cursor: zoom-out;
}

.bf-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.bf-back {
    /* Pulled left so the label, not the button's padding, lines up with the title below it. */
    margin-left: -0.5rem;
    margin-bottom: 0.5rem;
}

.bf-photos__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.bf-photos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.bf-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.bf-photo--cover {
    border-color: var(--mud-palette-primary);
}

.bf-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-photo__badge {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.bf-photo__actions {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    display: flex;
    gap: 0.125rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .bf-listing {
        transition: none;
    }

    .bf-listing:hover {
        transform: none;
    }

    .bf-listing:hover .bf-listing__cover img {
        transform: none;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}