@import 'ZyntraLabs.ScarletCompanion.Application.Client.na24qb3lzx.bundle.scp.css';

/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Filters/FilterAccordion.razor.rz.scp.css */
/* ===== FILTER ACCORDION — Liquid Glass ===== */

.filter-accordion[b-3fh8kxt21h] {
    margin-top: var(--sc-space-3);
}

/* Accordion item — Glass card */
.filter-accordion .accordion-item[b-3fh8kxt21h] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    overflow: hidden;
    position: relative;
    contain: layout style paint;
}

/* Prismatic border on the accordion item */
.filter-accordion .accordion-item[b-3fh8kxt21h]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Accordion Button */
.filter-accordion .accordion-button[b-3fh8kxt21h] {
    width: 100%;
    background: transparent;
    padding: var(--sc-space-3) var(--sc-space-4);
    font-family: var(--sc-font-accent);
    font-weight: var(--sc-fw-semibold);
    font-size: var(--sc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sc-text-primary);
    display: flex;
    align-items: center;
    gap: var(--sc-space-3);
    transition: color var(--sc-duration-normal) var(--sc-ease);
    position: relative;
    z-index: 2;
    box-shadow: none;
    border: none;
    border-radius: var(--lg-radius);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.filter-accordion .accordion-button:hover[b-3fh8kxt21h] {
    color: var(--sc-accent);
}

.filter-accordion .accordion-button:focus-visible[b-3fh8kxt21h] {
    outline: 2px solid var(--sc-accent);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

/* Active filters indicator — subtle accent glow */
.filter-accordion .accordion-button.has-active-filters[b-3fh8kxt21h] {
    /*border-left: 3px solid var(--sc-accent);*/
}

.filter-accordion .accordion-button.has-active-filters i[b-3fh8kxt21h] {
    color: var(--sc-accent);
}

/* Funnel icon */
.filter-accordion .accordion-button i[b-3fh8kxt21h] {
    font-size: 1rem;
    color: var(--sc-text-muted);
    transition: color var(--sc-duration-normal) var(--sc-ease);
}

.filter-accordion .accordion-button:hover i[b-3fh8kxt21h] {
    color: var(--sc-accent);
}

/* Filter label text */
.filter-accordion .filter-label-text[b-3fh8kxt21h] {
    flex: 0 0 auto;
}

/* Active count badge */
.active-count-badge[b-3fh8kxt21h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-accent);
    font-size: var(--sc-fs-xs);
    font-weight: var(--sc-fw-bold);
}

/* Accordion body — content above pseudo-elements */
.filter-accordion .accordion-body[b-3fh8kxt21h] {
    padding: 0 var(--sc-space-4) var(--sc-space-4);
    position: relative;
    z-index: 2;
}

/* ===== CLEAR ALL FILTERS — Glass pill button ===== */

.btn-clear-all-filters[b-3fh8kxt21h] {
    display: block;
    width: 100%;
    padding: var(--sc-space-2) var(--sc-space-4);
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: calc(var(--lg-radius) / 2);
    color: var(--sc-text-primary);
    font-family: var(--sc-font-accent);
    font-weight: var(--sc-fw-semibold);
    font-size: var(--sc-fs-xs);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--sc-duration-normal) var(--sc-ease);
    margin-bottom: var(--sc-space-3);
    box-shadow: var(--lg-shadow-card);
}

.btn-clear-all-filters:hover:not(.disabled)[b-3fh8kxt21h] {
    color: var(--sc-accent);
    box-shadow: var(--lg-shadow-card), var(--sc-shadow-glow-accent);
}

.btn-clear-all-filters:focus-visible[b-3fh8kxt21h] {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

/* Disabled state */
.btn-clear-all-filters.disabled[b-3fh8kxt21h] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== FILTER GROUPS CONTAINER ===== */

.filter-groups-container[b-3fh8kxt21h] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-4);
}

/* ===== SECTION DIVIDER — Prismatic line ===== */

.filter-section-divider[b-3fh8kxt21h] {
    height: 1px;
    background: var(--lg-prism);
    opacity: 0.5;
    margin: var(--sc-space-1) 0;
}

/* ===== FILTER SECTION — Grouped filters ===== */

.filter-section[b-3fh8kxt21h] {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-3);
}

/* Section heading */
.filter-section-heading[b-3fh8kxt21h] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-family: var(--sc-font-accent);
    font-size: 0.6875rem;
    font-weight: var(--sc-fw-semibold);
    color: var(--sc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0;
}

.filter-section-heading i[b-3fh8kxt21h] {
    font-size: 0.6875rem;
    color: var(--sc-accent);
    opacity: 0.8;
}

/* ===== Accessibility ===== */

@media (prefers-reduced-motion: reduce) {
    .filter-accordion .accordion-button[b-3fh8kxt21h],
    .btn-clear-all-filters[b-3fh8kxt21h] {
        transition: none !important;
    }

    .filter-accordion .accordion-collapse[b-3fh8kxt21h] {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .filter-accordion .accordion-item[b-3fh8kxt21h] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .filter-accordion .accordion-item[b-3fh8kxt21h]::before {
        display: none;
    }

    .filter-accordion .accordion-button[b-3fh8kxt21h] {
        text-shadow: none;
    }

    .btn-clear-all-filters[b-3fh8kxt21h] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .filter-section-divider[b-3fh8kxt21h] {
        background: var(--sc-border-color);
        opacity: 1;
    }
}

/* ===== REDUCED TRANSPARENCY ===== */
@media (prefers-reduced-transparency: reduce) {
    .filter-accordion .accordion-item[b-3fh8kxt21h] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--sc-bg-surface);
    }

    .btn-clear-all-filters[b-3fh8kxt21h] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--sc-bg-surface);
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Layout/NavMenu.razor.rz.scp.css */
/* All styles moved to SidebarWrapper.razor.css and MobileNavigation.razor.css */
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Layout/PublicLayout.razor.rz.scp.css */
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/AnonymousHomepage.razor.rz.scp.css */
/* ===== HERO SECTION ===== */
.hero[b-17y1yepkof] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg[b-17y1yepkof] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 70% 50%, rgba(255, 215, 0, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 15% 80%, rgba(220, 20, 60, 0.07) 0%, transparent 60%),
        linear-gradient(160deg, var(--sc-bg-body) 0%, var(--sc-bg-elevated) 50%, var(--sc-bg-body) 100%);
    z-index: 0;
}

.hero-accent-glow[b-17y1yepkof] {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.04) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.hero-content[b-17y1yepkof] {
    position: relative;
    z-index: 1;
}

.hero-eyebrow[b-17y1yepkof] {
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sc-accent);
    font-weight: 500;
    margin-bottom: 1.4rem;
}

.hero-title[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 1.4rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-subtitle[b-17y1yepkof] {
    font-size: 1rem;
    color: var(--sc-text-secondary);
    font-weight: 300;
    line-height: 1.8;
    max-width: 500px;
    margin-bottom: 2.5rem;
}

/* ===== HERO BUTTONS ===== */
.btn-primary-aurum[b-17y1yepkof] {
    background: var(--sc-accent);
    color: var(--sc-text-on-accent);
    border: none;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.9rem 2.2rem;
    border-radius: calc(var(--lg-radius) / 2);
    transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
    display: inline-block;
    text-decoration: none;
}

.btn-primary-aurum:hover[b-17y1yepkof] {
    opacity: 0.9;
    box-shadow: var(--sc-shadow-glow-accent);
    color: var(--sc-text-on-accent);
    transform: translateY(-1px);
}

.btn-primary-aurum:focus-visible[b-17y1yepkof] {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px var(--sc-accent);
}

.btn-ghost-aurum[b-17y1yepkof] {
    background: transparent;
    color: var(--sc-text-secondary);
    border: 1px solid var(--sc-border-color);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.9rem 2rem;
    border-radius: calc(var(--lg-radius) / 2);
    transition: border-color 0.25s, color 0.25s;
    display: inline-block;
    text-decoration: none;
}

.btn-ghost-aurum:hover[b-17y1yepkof] {
    border-color: var(--sc-border-accent);
    color: var(--sc-accent);
}

.btn-ghost-aurum:focus-visible[b-17y1yepkof] {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 4px var(--sc-accent);
}

/* ===== HERO STATS ===== */
.hero-stats[b-17y1yepkof] {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sc-border-subtle);
}

.stat-value[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--sc-accent);
    line-height: 1;
}

.stat-label[b-17y1yepkof] {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
    margin-top: 0.25rem;
}

/* ===== SECTIONS ===== */
.section-pad[b-17y1yepkof] {
    padding: 6rem 0;
}

.section-eyebrow[b-17y1yepkof] {
    font-size: 0.67rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sc-accent);
    font-weight: 500;
}

.section-title[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    line-height: 1.15;
}

.section-subtitle[b-17y1yepkof] {
    font-size: 0.93rem;
    color: var(--sc-text-secondary);
    font-weight: 300;
    line-height: 1.8;
}

/* ===== ORNAMENT ===== */
.ornament[b-17y1yepkof] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 0.8rem 0;
    color: var(--sc-accent);
    opacity: 0.65;
}

.ornament[b-17y1yepkof]::before,
.ornament[b-17y1yepkof]::after {
    content: '';
    flex: 1;
    max-width: 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sc-accent), transparent);
}

.ornament-icon[b-17y1yepkof] {
    font-size: 0.62rem;
    letter-spacing: 0.3em;
}

/* Left-aligned ornament on desktop, centered on mobile */
.ornament--left-lg[b-17y1yepkof] {
    justify-content: center;
}

@media (min-width: 992px) {
    .ornament--left-lg[b-17y1yepkof] {
        justify-content: flex-start;
    }

    .ornament--left-lg[b-17y1yepkof]::before {
        display: none;
    }

    .ornament--left-lg[b-17y1yepkof]::after {
        max-width: 60px;
    }
}

/* ===== PILLARS SECTION (Glass background) ===== */
.pillars-section[b-17y1yepkof] {
    background: var(--lg-bg);
    border-top: 1px solid var(--sc-border-subtle);
    border-bottom: 1px solid var(--sc-border-subtle);
}

/* ===== PILLAR CARDS (Liquid Glass) ===== */
.pillar-card[b-17y1yepkof] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    border: none;
    padding: 2.2rem 1.8rem;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.pillar-card[b-17y1yepkof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.pillar-card[b-17y1yepkof]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

.pillar-card > *[b-17y1yepkof] {
    position: relative;
    z-index: 2;
}

.pillar-card:hover[b-17y1yepkof] {
    transform: translateY(-5px);
}

.pillar-icon[b-17y1yepkof] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.3rem;
    color: var(--sc-accent);
    font-size: 1.2rem;
}

.pillar-title[b-17y1yepkof] {
    font-family: var(--sc-font-body);
    font-size: 1.12rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pillar-text[b-17y1yepkof] {
    font-size: 0.87rem;
    color: var(--sc-text-secondary);
    line-height: 1.75;
}

/* ===== STEP CARDS (Liquid Glass) ===== */
.step-card[b-17y1yepkof] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    border: none;
    padding: 2rem 1.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.step-card[b-17y1yepkof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.step-card[b-17y1yepkof]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

.step-card > *[b-17y1yepkof] {
    position: relative;
    z-index: 2;
}

.step-number[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--sc-accent);
    opacity: 0.3;
    line-height: 1;
}

.step-title[b-17y1yepkof] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.5rem 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.step-text[b-17y1yepkof] {
    font-size: 0.87rem;
    color: var(--sc-text-secondary);
    line-height: 1.75;
}

/* ===== PROVIDER CTA SECTION (Glass background) ===== */
.provider-cta-section[b-17y1yepkof] {
    background: var(--lg-bg);
    border-top: 1px solid var(--sc-border-subtle);
    border-bottom: 1px solid var(--sc-border-subtle);
}

/* ===== BENEFIT CARDS (Liquid Glass) ===== */
.benefit-card[b-17y1yepkof] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    border: none;
    padding: 2.2rem 1.8rem;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.benefit-card[b-17y1yepkof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.benefit-card[b-17y1yepkof]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

.benefit-card > *[b-17y1yepkof] {
    position: relative;
    z-index: 2;
}

.benefit-icon[b-17y1yepkof] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    color: var(--sc-accent);
    font-size: 1.4rem;
}

.benefit-title[b-17y1yepkof] {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.benefit-text[b-17y1yepkof] {
    font-size: 0.87rem;
    color: var(--sc-text-secondary);
    line-height: 1.75;
}

/* ===== CTA SECTION ===== */
.cta-section[b-17y1yepkof] {
    position: relative;
    overflow: hidden;
    padding: 7rem 0;
}

.cta-bg[b-17y1yepkof] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 215, 0, 0.07) 0%, transparent 70%),
        var(--sc-bg-body);
    z-index: 0;
}

.cta-section > *[b-17y1yepkof] {
    position: relative;
    z-index: 1;
}

.cta-title[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 300;
    line-height: 1.15;
}

.cta-legal[b-17y1yepkof] {
    font-size: 0.7rem;
    color: var(--sc-text-muted);
    margin-top: 0.9rem;
    letter-spacing: 0.04em;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .hero[b-17y1yepkof] {
        min-height: auto;
        padding: 5rem 0 4rem;
    }

    .hero-stats[b-17y1yepkof] {
        gap: 1.5rem;
    }
}

@media (max-width: 575px) {
    .hero-stats[b-17y1yepkof] {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-contrast: high) {
    .pillar-card[b-17y1yepkof],
    .step-card[b-17y1yepkof],
    .benefit-card[b-17y1yepkof] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 4px;
        box-shadow: none;
    }

    .pillar-card[b-17y1yepkof]::before,
    .pillar-card[b-17y1yepkof]::after,
    .step-card[b-17y1yepkof]::before,
    .step-card[b-17y1yepkof]::after,
    .benefit-card[b-17y1yepkof]::before,
    .benefit-card[b-17y1yepkof]::after {
        display: none;
    }

    .pillars-section[b-17y1yepkof],
    .provider-cta-section[b-17y1yepkof] {
        background: var(--sc-bg-body);
        backdrop-filter: none;
    }

    .btn-primary-aurum[b-17y1yepkof],
    .btn-ghost-aurum[b-17y1yepkof] {
        border-radius: 4px;
    }
}

@media (prefers-reduced-transparency) {
    .pillar-card[b-17y1yepkof],
    .step-card[b-17y1yepkof],
    .benefit-card[b-17y1yepkof] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .pillar-card[b-17y1yepkof]::before,
    .pillar-card[b-17y1yepkof]::after,
    .step-card[b-17y1yepkof]::before,
    .step-card[b-17y1yepkof]::after,
    .benefit-card[b-17y1yepkof]::before,
    .pillars-section[b-17y1yepkof],
    .provider-cta-section[b-17y1yepkof] {
        background: var(--sc-bg-body);
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-card[b-17y1yepkof] {
        transition: none;
    }

    .pillar-card:hover[b-17y1yepkof] {
        transform: none;
    }
}

/* ===== INVITATION BADGE ===== */
.invitation-badge[b-17y1yepkof] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.06);
    color: var(--sc-accent);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.invitation-badge i[b-17y1yepkof] {
    font-size: 0.8rem;
}

/* ===== HERO VISUAL — 3-card stacked layout ===== */
.hero-visual[b-17y1yepkof] {
    position: relative;
    height: 580px;
}

/* ── Card positioning slots ── */
.hero-card-slot[b-17y1yepkof] {
    position: absolute;
}

/* Back — Isabelle (left, behind) */
.hero-card-slot--back[b-17y1yepkof] {
    width: 180px;
    height: 260px;
    left: 0;
    top: 50%;
    transform: translateY(-55%) rotate(-4deg);
    z-index: 1;
    --pill-scale: 0.78;
}

/* Middle — Alexandra (center, dominant) */
.hero-card-slot--mid[b-17y1yepkof] {
    width: 240px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(1deg);
    z-index: 2;
    --pill-scale: 1;
}

/* Front — Ambassador (right, overlapping) */
.hero-card-slot--front[b-17y1yepkof] {
    width: 190px;
    height: 270px;
    right: 0;
    top: 50%;
    transform: translateY(-42%) rotate(3deg);
    z-index: 3;
    --pill-scale: 0.82;
}

/* ===== ABOUT SECTION ===== */
.about-section[b-17y1yepkof] {
    border-bottom: 1px solid var(--sc-border-subtle);
}

.about-text p[b-17y1yepkof] {
    font-size: 0.93rem;
    color: var(--sc-text-secondary);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.about-features[b-17y1yepkof] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-feature-item[b-17y1yepkof] {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.about-feature-item[b-17y1yepkof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.about-feature-item > *[b-17y1yepkof] {
    position: relative;
    z-index: 2;
}

.about-feature-icon[b-17y1yepkof] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--sc-accent);
}

.about-feature-text[b-17y1yepkof] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

.ornament--left[b-17y1yepkof] {
    justify-content: flex-start;
}

.ornament--left[b-17y1yepkof]::before {
    display: none;
}

.ornament--left[b-17y1yepkof]::after {
    max-width: 60px;
}

/* ===== INVITATION SECTION ===== */
.invitation-section[b-17y1yepkof] {
    position: relative;
    overflow: hidden;
}

.invitation-bg[b-17y1yepkof] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(220, 20, 60, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 30% 30% at 80% 20%, rgba(255, 215, 0, 0.05) 0%, transparent 60%),
        var(--sc-bg-body);
    z-index: 0;
}

.invitation-section > .container[b-17y1yepkof] {
    z-index: 1;
}

.invitation-card[b-17y1yepkof] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    border: none;
    padding: 2.2rem 1.8rem;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

.invitation-card[b-17y1yepkof]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.invitation-card[b-17y1yepkof]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

.invitation-card > *[b-17y1yepkof] {
    position: relative;
    z-index: 2;
}

.invitation-card-number[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--sc-accent);
    opacity: 0.35;
    line-height: 1;
    margin-bottom: 0.8rem;
    letter-spacing: 0.1em;
}

/* ===== SCARLET STANDARD SECTION ===== */
.standard-section[b-17y1yepkof] {
    background: var(--lg-bg);
    border-top: 1px solid var(--sc-border-subtle);
    border-bottom: 1px solid var(--sc-border-subtle);
}

.standard-item[b-17y1yepkof] {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: calc(var(--lg-radius) / 1.5);
    transition: background 0.25s;
}

.standard-item:hover[b-17y1yepkof] {
    background: rgba(255, 255, 255, 0.02);
}

.standard-icon[b-17y1yepkof] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-accent);
    font-size: 1.1rem;
}

.standard-item-title[b-17y1yepkof] {
    font-family: var(--sc-font-body);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.standard-item-text[b-17y1yepkof] {
    font-size: 0.85rem;
    color: var(--sc-text-secondary);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ===== SEO CONTENT BLOCK ===== */
.seo-content-section[b-17y1yepkof] {
    border-top: 1px solid var(--sc-border-subtle);
}

.seo-content-block[b-17y1yepkof] {
    max-width: 800px;
    margin: 0 auto;
}

.seo-content-heading[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.seo-content-subheading[b-17y1yepkof] {
    font-family: var(--sc-font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: var(--sc-text-primary);
}

.seo-content-block p[b-17y1yepkof] {
    font-size: 0.9rem;
    color: var(--sc-text-secondary);
    line-height: 1.85;
    font-weight: 300;
}

/* ===== RESPONSIVE — NEW SECTIONS ===== */
@media (max-width: 991px) {
    .hero-visual[b-17y1yepkof] {
        display: none;
    }

    .about-features[b-17y1yepkof] {
        margin-top: 2rem;
    }

    .standard-item[b-17y1yepkof] {
        padding: 1rem;
    }
}

@media (max-width: 575px) {
    .invitation-badge[b-17y1yepkof] {
        font-size: 0.65rem;
        padding: 0.45rem 0.9rem;
    }
}

/* ===== ACCESSIBILITY — NEW SECTIONS ===== */
@media (prefers-contrast: high) {
    .about-feature-item[b-17y1yepkof],
    .invitation-card[b-17y1yepkof] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 4px;
        box-shadow: none;
    }

    .about-feature-item[b-17y1yepkof]::before,
    .invitation-card[b-17y1yepkof]::before,
    .invitation-card[b-17y1yepkof]::after {
        display: none;
    }

    .invitation-section[b-17y1yepkof],
    .standard-section[b-17y1yepkof] {
        background: var(--sc-bg-body);
        backdrop-filter: none;
    }

    .invitation-badge[b-17y1yepkof] {
        border-color: var(--sc-accent);
    }
}

@media (prefers-reduced-transparency) {
    .about-feature-item[b-17y1yepkof],
    .invitation-card[b-17y1yepkof] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .about-feature-item[b-17y1yepkof]::before,
    .invitation-card[b-17y1yepkof]::before,
    .invitation-card[b-17y1yepkof]::after {
        display: none;
    }

    .invitation-section[b-17y1yepkof],
    .standard-section[b-17y1yepkof] {
        background: var(--sc-bg-body);
        backdrop-filter: none;
    }
}

/* ===== ACCESSIBILITY — HERO CARDS ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-card-slot[b-17y1yepkof] {
        transform: none !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* Forgot Password - Theme-aware styling */

.forgot-wrapper[b-in5v1zsha6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-5);
}

.forgot-card-container[b-in5v1zsha6] {
    width: 100%;
    max-width: 480px;
}

.forgot-logo[b-in5v1zsha6] {
    max-width: 260px;
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: all var(--duration-normal) var(--ease);
}

/* Card (Liquid Glass) */
.forgot-wrapper .card[b-in5v1zsha6] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.forgot-wrapper .card[b-in5v1zsha6]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.forgot-wrapper .card[b-in5v1zsha6]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

/* Content above pseudo-elements */
.forgot-wrapper .card-body[b-in5v1zsha6] {
    position: relative;
    z-index: 2;
    padding: 24px;
}

/* High contrast fallback */
@media (prefers-contrast: high) {
    .forgot-wrapper .card[b-in5v1zsha6] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .forgot-wrapper .card[b-in5v1zsha6]::before,
    .forgot-wrapper .card[b-in5v1zsha6]::after {
        display: none;
    }
}

/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce) {
    .forgot-wrapper .card[b-in5v1zsha6] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .forgot-wrapper .card[b-in5v1zsha6]::before,
    .forgot-wrapper .card[b-in5v1zsha6]::after {
        display: none;
    }
}

/* Typography */
.forgot-wrapper h1.h2[b-in5v1zsha6] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--sc-text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.forgot-wrapper .text-secondary[b-in5v1zsha6] {
    font-size: var(--fs-sm);
}

/* Form label */
.forgot-wrapper .form-label[b-in5v1zsha6] {
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2);
    color: var(--sc-text-primary);
}

/* Button */
.forgot-wrapper .btn-primary[b-in5v1zsha6] {
    font-family: var(--font-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    min-height: 44px;
}

/* Links */
.forgot-wrapper a[b-in5v1zsha6] {
    color: var(--sc-accent);
    font-size: var(--fs-sm);
    transition: opacity var(--duration-fast) var(--ease);
}

.forgot-wrapper a:hover[b-in5v1zsha6] {
    opacity: 0.8;
}

.forgot-wrapper a:focus-visible[b-in5v1zsha6] {
    outline: 2px solid var(--sc-border-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

.forgot-wrapper a:focus:not(:focus-visible)[b-in5v1zsha6] {
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .forgot-wrapper[b-in5v1zsha6] {
        padding: var(--space-4);
    }
    .forgot-logo[b-in5v1zsha6] {
        max-width: 220px;
    }
    .forgot-wrapper .btn-primary[b-in5v1zsha6] {
        padding: var(--space-4) var(--space-5);
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .forgot-wrapper[b-in5v1zsha6] {
        padding: var(--space-3);
    }
    .forgot-logo[b-in5v1zsha6] {
        max-width: 200px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-in5v1zsha6],
    .forgot-logo[b-in5v1zsha6] {
        transition-duration: 0.01ms !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Auth/Login.razor.rz.scp.css */
/* Login Page - Bootstrap-First with Minimal Custom Overrides */
/* Leverages Bootstrap 5 dark theme properly */

/* ===== LAYOUT CONTAINER ===== */
.login-wrapper[b-wrknsby89z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-5);
}

.login-card-container[b-wrknsby89z] {
    width: 100%;
    max-width: 420px; /* Desktop default */
}

/* ===== LOGO - Responsive sizing ===== */
.login-logo[b-wrknsby89z] {
    max-width: 280px; /* Desktop */
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    /* Theme-friendly shadow */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: all var(--duration-normal) var(--ease);
}

/* ===== CARD (Liquid Glass) ===== */
.login-wrapper .card[b-wrknsby89z] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.login-wrapper .card[b-wrknsby89z]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.login-wrapper .card[b-wrknsby89z]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

/* Content above pseudo-elements */
.login-wrapper .card-header[b-wrknsby89z],
.login-wrapper .card-body[b-wrknsby89z],
.login-wrapper .card-footer[b-wrknsby89z] {
    position: relative;
    z-index: 2;
}

.login-wrapper .card-header[b-wrknsby89z] {
    background: transparent;
    border-bottom: 1px solid var(--sc-border-subtle);
}

.login-wrapper .card-body[b-wrknsby89z] {
    padding: 24px; /* 3 * 8px */
}

/* High contrast fallback */
@media (prefers-contrast: high) {
    .login-wrapper .card[b-wrknsby89z] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .login-wrapper .card[b-wrknsby89z]::before,
    .login-wrapper .card[b-wrknsby89z]::after {
        display: none;
    }
}

/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce) {
    .login-wrapper .card[b-wrknsby89z] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .login-wrapper .card[b-wrknsby89z]::before,
    .login-wrapper .card[b-wrknsby89z]::after {
        display: none;
    }
}

/* ===== TYPOGRAPHY OVERRIDES ===== */
h1.h2[b-wrknsby89z] {
    font-size: var(--fs-2xl); /* 24px desktop */
    font-weight: var(--fw-semibold);
    color: var(--sc-text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-secondary[b-wrknsby89z] {
    font-size: var(--fs-sm); /* 14px for subtitle */
}

/* ===== FORM LABEL ===== */
.form-label[b-wrknsby89z] {
    font-size: var(--fs-xs); /* 12px */
    letter-spacing: 0.05em;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2); /* 4px */
    color: var(--sc-text-primary); /* Proper contrast for dark theme (WCAG 2.2 AA) */
}

/* ===== BUTTON ENHANCEMENTS ===== */
.btn-primary[b-wrknsby89z] {
    font-family: var(--font-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--fs-sm); /* 14px */
    min-height: 44px;
}

/* ===== LINKS ===== */
a[b-wrknsby89z] {
    color: var(--sc-accent);
    font-size: var(--fs-sm); /* 14px */
    transition: opacity var(--duration-fast) var(--ease);
}

a:hover[b-wrknsby89z] {
    opacity: 0.8;
}

a:focus-visible[b-wrknsby89z] {
    outline: 2px solid var(--sc-border-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

a:focus:not(:focus-visible)[b-wrknsby89z] {
    outline: none;
}

/* ===== FOOTER TEXT ===== */
p.small[b-wrknsby89z] {
    font-size: var(--fs-sm); /* 14px */
    margin-bottom: var(--space-2);
}

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* ===== LAPTOP (1200px - 1440px) ===== */
@media (max-width: 1440px) and (min-width: 1201px) {
    .login-card-container[b-wrknsby89z] {
        max-width: 400px;
    }

    .login-logo[b-wrknsby89z] {
        max-width: 260px;
    }
}

/* ===== TABLET (769px - 1200px) ===== */
@media (max-width: 1200px) and (min-width: 769px) {
    .login-card-container[b-wrknsby89z] {
        max-width: 380px;
    }

    .login-logo[b-wrknsby89z] {
        max-width: 240px;
    }

    .btn-primary[b-wrknsby89z] {
        font-size: var(--fs-xs); /* 12px on tablet */
    }

    h1.h2[b-wrknsby89z] {
        font-size: var(--fs-xl); /* 20px on tablet */
    }

    .text-secondary[b-wrknsby89z],
    a[b-wrknsby89z],
    p.small[b-wrknsby89z] {
        font-size: var(--fs-xs); /* 12px on tablet */
    }
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    .login-wrapper[b-wrknsby89z] {
        padding: var(--space-4);
    }

    .login-card-container[b-wrknsby89z] {
        max-width: 100%;
    }

    .login-logo[b-wrknsby89z] {
        max-width: 220px;
    }

    .btn-primary[b-wrknsby89z] {
        padding: var(--space-4) var(--space-5); /* 12px 16px */
        min-height: 48px;
    }

    h1.h2[b-wrknsby89z] {
        font-size: var(--fs-lg); /* 18px on mobile */
    }

    .text-secondary[b-wrknsby89z],
    a[b-wrknsby89z],
    p.small[b-wrknsby89z] {
        font-size: var(--fs-xs); /* 12px on mobile */
    }
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .login-wrapper[b-wrknsby89z] {
        padding: var(--space-3);
    }

    .login-logo[b-wrknsby89z] {
        max-width: 200px;
    }
}

/* ===== EXTRA SMALL (≤360px) ===== */
@media (max-width: 360px) {
    .login-logo[b-wrknsby89z] {
        max-width: 180px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-wrknsby89z],
    .login-logo[b-wrknsby89z] {
        transition-duration: 0.01ms !important;
    }
}



/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Auth/Register.razor.rz.scp.css */
/* Register Page - Bootstrap-First with Minimal Custom Overrides */
/* Matches Login page styling for consistency */

/* ===== LAYOUT CONTAINER ===== */
.register-wrapper[b-8tby2yayj8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-5);
}

.register-card-container[b-8tby2yayj8] {
    width: 100%;
    max-width: 600px; /* Slightly wider than login for more fields */
}

/* ===== LOGO - Responsive sizing ===== */
.register-logo[b-8tby2yayj8] {
    max-width: 280px; /* Desktop */
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    /* Theme-friendly shadow */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: all var(--duration-normal) var(--ease);
}

/* ===== CARD (Liquid Glass) ===== */
.register-wrapper .card[b-8tby2yayj8] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.register-wrapper .card[b-8tby2yayj8]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.register-wrapper .card[b-8tby2yayj8]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

/* Content above pseudo-elements */
.register-wrapper .card-header[b-8tby2yayj8],
.register-wrapper .card-body[b-8tby2yayj8],
.register-wrapper .card-footer[b-8tby2yayj8] {
    position: relative;
    z-index: 2;
}

.register-wrapper .card-header[b-8tby2yayj8] {
    background: transparent;
    border-bottom: 1px solid var(--sc-border-subtle);
}

.register-wrapper .card-body[b-8tby2yayj8] {
    padding: 24px; /* 3 * 8px */
}

/* High contrast fallback */
@media (prefers-contrast: high) {
    .register-wrapper .card[b-8tby2yayj8] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .register-wrapper .card[b-8tby2yayj8]::before,
    .register-wrapper .card[b-8tby2yayj8]::after {
        display: none;
    }
}

/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce) {
    .register-wrapper .card[b-8tby2yayj8] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .register-wrapper .card[b-8tby2yayj8]::before,
    .register-wrapper .card[b-8tby2yayj8]::after {
        display: none;
    }
}

/* ===== TYPOGRAPHY OVERRIDES ===== */
h1.h2[b-8tby2yayj8] {
    font-size: var(--fs-2xl); /* 24px desktop */
    font-weight: var(--fw-semibold);
    color: var(--sc-text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-secondary[b-8tby2yayj8] {
    font-size: var(--fs-sm); /* 14px for subtitle */
}

/* ===== FORM LABEL ===== */
.form-label[b-8tby2yayj8] {
    font-size: var(--fs-xs); /* 12px */
    letter-spacing: 0.05em;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2); /* 4px */
    color: var(--sc-text-primary); /* Proper contrast for dark theme (WCAG 2.2 AA) */
}

/* ===== BUTTON ENHANCEMENTS ===== */
.btn-primary[b-8tby2yayj8] {
    font-family: var(--font-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--fs-sm); /* 14px */
    min-height: 44px;
}

/* ===== LINKS ===== */
a[b-8tby2yayj8] {
    color: var(--sc-accent);
    font-size: var(--fs-sm); /* 14px */
    transition: opacity var(--duration-fast) var(--ease);
}

a:hover[b-8tby2yayj8] {
    opacity: 0.8;
}

/* WCAG 2.2: Focus indicator for keyboard navigation */
a:focus[b-8tby2yayj8] {
    color: var(--sc-accent);
    outline: 2px solid var(--sc-border-accent);
    outline-offset: 2px;
}

/* WCAG 2.2: Enhanced focus-visible for keyboard-only navigation */
a:focus-visible[b-8tby2yayj8] {
    outline: 2px solid var(--sc-border-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

/* Remove focus outline for mouse users */
a:focus:not(:focus-visible)[b-8tby2yayj8] {
    outline: none;
}

/* ===== FOOTER TEXT ===== */
p.small[b-8tby2yayj8] {
    font-size: var(--fs-sm); /* 14px */
    margin-bottom: var(--space-2);
}

/* ===== FORM CHECK (TERMS CHECKBOX) ===== */
.form-check-label[b-8tby2yayj8] {
    font-size: var(--fs-sm);
    color: var(--sc-text-secondary);
}

.form-check-input:focus[b-8tby2yayj8] {
    border-color: var(--sc-border-accent);
    box-shadow: 0 0 0 3px var(--sc-focus-ring);
}

/* ===== FORM CONTROLS - WCAG 2.2 Enhanced Focus ===== */
.form-control:focus[b-8tby2yayj8],
.form-select:focus[b-8tby2yayj8] {
    border-color: var(--sc-input-border-accent) !important;
    box-shadow: 0 0 0 3px var(--sc-focus-ring) !important;
    outline: none;
}

/* Enhanced focus-visible for keyboard navigation */
.form-control:focus-visible[b-8tby2yayj8],
.form-select:focus-visible[b-8tby2yayj8] {
    border-color: var(--sc-input-border-accent) !important;
    box-shadow: 0 0 0 3px var(--sc-focus-ring) !important;
}

/* Remove outline for mouse clicks (focus without keyboard) */
.form-control:focus:not(:focus-visible)[b-8tby2yayj8],
.form-select:focus:not(:focus-visible)[b-8tby2yayj8] {
    box-shadow: 0 0 0 2px var(--sc-focus-ring);
}

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* ===== LAPTOP (1200px - 1440px) ===== */
@media (max-width: 1440px) and (min-width: 1201px) {
    .register-card-container[b-8tby2yayj8] {
        max-width: 600px;
    }

    .register-logo[b-8tby2yayj8] {
        max-width: 260px;
    }
}

/* ===== TABLET (769px - 1200px) ===== */
@media (max-width: 1200px) and (min-width: 769px) {
    .register-card-container[b-8tby2yayj8] {
        max-width: 600px;
    }

    .register-logo[b-8tby2yayj8] {
        max-width: 240px;
    }

    .btn-primary[b-8tby2yayj8] {
        font-size: var(--fs-xs); /* 12px on tablet */
    }

    h1.h2[b-8tby2yayj8] {
        font-size: var(--fs-xl); /* 20px on tablet */
    }

    .text-secondary[b-8tby2yayj8],
    a[b-8tby2yayj8],
    p.small[b-8tby2yayj8],
    .form-check-label[b-8tby2yayj8] {
        font-size: var(--fs-xs); /* 12px on tablet */
    }
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {
    .register-wrapper[b-8tby2yayj8] {
        padding: var(--space-4);
    }

    .register-card-container[b-8tby2yayj8] {
        max-width: 100%;
    }

    .register-logo[b-8tby2yayj8] {
        max-width: 220px;
    }

    .btn-primary[b-8tby2yayj8] {
        padding: var(--space-4) var(--space-5); /* 12px 16px */
        min-height: 48px;
    }

    h1.h2[b-8tby2yayj8] {
        font-size: var(--fs-lg); /* 18px on mobile */
    }

    .text-secondary[b-8tby2yayj8],
    a[b-8tby2yayj8],
    p.small[b-8tby2yayj8],
    .form-check-label[b-8tby2yayj8] {
        font-size: var(--fs-xs); /* 12px on mobile */
    }
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .register-wrapper[b-8tby2yayj8] {
        padding: var(--space-3);
    }

    .register-logo[b-8tby2yayj8] {
        max-width: 200px;
    }
}

/* ===== EXTRA SMALL (≤360px) ===== */
@media (max-width: 360px) {
    .register-logo[b-8tby2yayj8] {
        max-width: 180px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-8tby2yayj8],
    .register-logo[b-8tby2yayj8] {
        transition-duration: 0.01ms !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* Reset Password - Theme-aware styling */

.reset-wrapper[b-7pcecllzi2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-5);
}

.reset-card-container[b-7pcecllzi2] {
    width: 100%;
    max-width: 480px;
}

.reset-logo[b-7pcecllzi2] {
    max-width: 260px;
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: all var(--duration-normal) var(--ease);
}

/* Card (Liquid Glass) */
.reset-wrapper .card[b-7pcecllzi2] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.reset-wrapper .card[b-7pcecllzi2]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.reset-wrapper .card[b-7pcecllzi2]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

/* Content above pseudo-elements */
.reset-wrapper .card-body[b-7pcecllzi2] {
    position: relative;
    z-index: 2;
    padding: 24px;
}

/* High contrast fallback */
@media (prefers-contrast: high) {
    .reset-wrapper .card[b-7pcecllzi2] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .reset-wrapper .card[b-7pcecllzi2]::before,
    .reset-wrapper .card[b-7pcecllzi2]::after {
        display: none;
    }
}

/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce) {
    .reset-wrapper .card[b-7pcecllzi2] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .reset-wrapper .card[b-7pcecllzi2]::before,
    .reset-wrapper .card[b-7pcecllzi2]::after {
        display: none;
    }
}

/* Typography */
.reset-wrapper h1.h2[b-7pcecllzi2] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--sc-text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reset-wrapper .text-secondary[b-7pcecllzi2] {
    font-size: var(--fs-sm);
}

/* Form label */
.reset-wrapper .form-label[b-7pcecllzi2] {
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-2);
    color: var(--sc-text-primary);
}

/* Button */
.reset-wrapper .btn-primary[b-7pcecllzi2] {
    font-family: var(--font-accent);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    min-height: 44px;
}

/* Links */
.reset-wrapper a[b-7pcecllzi2] {
    color: var(--sc-accent);
    font-size: var(--fs-sm);
    transition: opacity var(--duration-fast) var(--ease);
}

.reset-wrapper a:hover[b-7pcecllzi2] {
    opacity: 0.8;
}

.reset-wrapper a:focus-visible[b-7pcecllzi2] {
    outline: 2px solid var(--sc-border-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sc-focus-ring);
}

.reset-wrapper a:focus:not(:focus-visible)[b-7pcecllzi2] {
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .reset-wrapper[b-7pcecllzi2] {
        padding: var(--space-4);
    }
    .reset-logo[b-7pcecllzi2] {
        max-width: 220px;
    }
    .reset-wrapper .btn-primary[b-7pcecllzi2] {
        padding: var(--space-4) var(--space-5);
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    .reset-wrapper[b-7pcecllzi2] {
        padding: var(--space-3);
    }
    .reset-logo[b-7pcecllzi2] {
        max-width: 200px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-7pcecllzi2],
    .reset-logo[b-7pcecllzi2] {
        transition-duration: 0.01ms !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Escorts.razor.rz.scp.css */
/* Escorts page - minimal, theme-aware enhancements using sc-* tokens */

.loading-container[b-30u4mpnd3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--sc-text-secondary);
}

.loading-container p[b-30u4mpnd3r] {
    color: var(--sc-text-secondary);
    margin: 0.75rem 0 0;
}

/* Keep spinner color aligned to brand via Bootstrap mapping (text-primary) */
.loading-container .spinner-border[b-30u4mpnd3r] {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* Error state tweaks stay subtle and theme-adaptive */
.alert.alert-danger[b-30u4mpnd3r] {
    background-color: var(--sc-bg-surface);
    color: var(--sc-text-primary);
    border: 1px solid var(--sc-border-color);
    border-left: 3px solid var(--sc-accent-2);
}

.alert.alert-danger .btn.btn-primary[b-30u4mpnd3r] {
    background-color: var(--sc-accent);
    border-color: var(--sc-accent);
}

.alert.alert-danger .btn.btn-primary:hover[b-30u4mpnd3r] {
    background-color: var(--sc-accent-2);
    border-color: var(--sc-accent-2);
}

/* Accessibility */
.alert a:focus-visible[b-30u4mpnd3r],
.alert .btn:focus-visible[b-30u4mpnd3r] {
    outline: 2px solid var(--sc-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .loading-container .spinner-border[b-30u4mpnd3r] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Handle.razor.rz.scp.css */
/* ===== HANDLE PAGE — Liquid Glass + iOS 26 ===== */

/* ===== LOADING & ERROR STATES ===== */
.handle-detail-loading[b-fxxs3jxw36],
.handle-detail-error[b-fxxs3jxw36] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sc-space-5);
}

/* ===== OWNER HINT BAR — Glass Pill ===== */
.owner-hint-bar[b-fxxs3jxw36] {
    max-width: 1600px;
    margin: var(--sc-space-4) auto var(--sc-space-2);
    padding: 0 var(--sc-space-3);
}

.owner-hint-inner[b-fxxs3jxw36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-3);
    padding: var(--sc-space-3) var(--sc-space-5);
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: none;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-card);
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.owner-hint-inner[b-fxxs3jxw36]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.owner-hint-inner[b-fxxs3jxw36]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

.owner-hint-content[b-fxxs3jxw36] {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-sm);
    font-weight: var(--sc-fw-medium);
    color: var(--sc-text-secondary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.owner-hint-content i[b-fxxs3jxw36] {
    font-size: var(--sc-fs-lg);
    color: var(--sc-accent);
}

.owner-hint-action[b-fxxs3jxw36] {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-2);
    padding: var(--sc-space-2) var(--sc-space-4);
    background: var(--sc-accent);
    color: var(--sc-text-on-accent);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-sm);
    font-weight: var(--sc-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: 9999px;
    border: none;
    transition: transform var(--sc-duration-fast) var(--sc-ease),
                box-shadow var(--sc-duration-fast) var(--sc-ease);
    position: relative;
    z-index: 2;
    white-space: nowrap;
    min-height: 44px;
}

.owner-hint-action:hover[b-fxxs3jxw36] {
    transform: translateY(-1px);
    box-shadow: 0 0 20px color-mix(in oklab, var(--sc-accent), transparent 60%);
    color: var(--sc-text-on-accent);
    text-decoration: none;
}

.owner-hint-action:active[b-fxxs3jxw36] {
    transform: translateY(0) scale(0.96);
}

.owner-hint-action:focus-visible[b-fxxs3jxw36] {
    outline: 2px solid var(--sc-focus-ring);
    outline-offset: 3px;
}

.owner-hint-action i[b-fxxs3jxw36] {
    font-size: var(--sc-fs-sm);
}

/* Responsive */
@media (max-width: 767.98px) {
    .owner-hint-bar[b-fxxs3jxw36] {
        padding: 0 var(--sc-space-2);
    }

    .owner-hint-inner[b-fxxs3jxw36] {
        padding: var(--sc-space-3) var(--sc-space-3);
        flex-wrap: wrap;
    }

    .owner-hint-action[b-fxxs3jxw36] {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .owner-hint-action[b-fxxs3jxw36] {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .owner-hint-inner[b-fxxs3jxw36] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 0;
        box-shadow: none;
    }

    .owner-hint-inner[b-fxxs3jxw36]::before,
    .owner-hint-inner[b-fxxs3jxw36]::after {
        display: none;
    }

    .owner-hint-content[b-fxxs3jxw36] {
        text-shadow: none;
    }

    .owner-hint-action[b-fxxs3jxw36] {
        border-radius: 0;
        border: 2px solid var(--sc-accent);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .owner-hint-inner[b-fxxs3jxw36] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--sc-shadow-sm);
    }

    .owner-hint-inner[b-fxxs3jxw36]::before,
    .owner-hint-inner[b-fxxs3jxw36]::after {
        display: none;
    }

    .owner-hint-content[b-fxxs3jxw36] {
        text-shadow: none;
    }
}

/* WCAG 2.2 Focus states */
*:focus-visible[b-fxxs3jxw36] {
    outline: 2px solid var(--sc-focus-ring);
    outline-offset: 2px;
}

/* Reduced motion support (WCAG 2.2) */
@media (prefers-reduced-motion: reduce) {
    *[b-fxxs3jxw36],
    *[b-fxxs3jxw36]::before,
    *[b-fxxs3jxw36]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Pages/Home.razor.rz.scp.css */
/* ===== CONTENT AREA ===== */
.content-area[b-jt073piq0x] {
    min-height: 100vh; /* Use full viewport height */
    width: 100%; /* Full viewport width */
    box-sizing: border-box;
}

.results-header[b-jt073piq0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: var(--lg-radius);
    border: none;
    box-shadow: var(--lg-shadow-card);
    max-width: 100%;
    margin:0 2rem auto auto;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

/* Prismatic border */
.results-header[b-jt073piq0x]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Shimmer */
.results-header[b-jt073piq0x]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lg-shimmer);
    pointer-events: none;
    z-index: 0;
}

/* Content above pseudo-elements */
.results-header > *[b-jt073piq0x] {
    position: relative;
    z-index: 2;
}

@media (prefers-contrast: high) {
    .results-header[b-jt073piq0x] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 4px;
        box-shadow: none;
    }
    .results-header[b-jt073piq0x]::before,
    .results-header[b-jt073piq0x]::after {
        display: none;
    }
}

.results-count[b-jt073piq0x] {
    font-size: 0.9rem;
    color: var(--sc-text-primary);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sort-controls[b-jt073piq0x] {
    display: flex;
    gap: 1.2rem;
    align-items: center;
}

.sort-label[b-jt073piq0x] {
    font-size: 0.8rem;
    color: var(--sc-text-muted);
    font-weight: 500;
}

.sort-select[b-jt073piq0x] {
    min-width: 170px;
    font-size: 0.8rem;
    background: var(--sc-input-bg);
    border: 1px solid var(--sc-border-subtle);
    border-radius: calc(var(--lg-radius) / 1.5);
    color: var(--sc-text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sort-select:focus[b-jt073piq0x] {
    background: var(--sc-bg-elevated);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem var(--sc-focus-ring), 0 4px 8px rgba(0, 0, 0, 0.3);
    outline: none;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Medium screens and below - adjust header layout */
@media (max-width: 991px) and (min-width: 768px) {
    .results-header[b-jt073piq0x] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .sort-controls[b-jt073piq0x] {
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }
    
    .sort-select[b-jt073piq0x] {
        min-width: 140px;
    }
}

/* Mobile devices */
@media (max-width: 575px) and (min-width: 426px) {
    .results-header[b-jt073piq0x] {
        margin: 0 1rem 1rem 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    
    .sort-controls[b-jt073piq0x] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
}

/* Small mobile devices */
@media (max-width: 425px) and (min-width: 376px) {
    .results-header[b-jt073piq0x] {
        margin: 0 1rem 1rem 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    
    .sort-controls[b-jt073piq0x] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
}

/* Very small mobile devices */
@media (max-width: 375px) and (min-width: 321px) {
    .results-header[b-jt073piq0x] {
        margin: 0 0.5rem 1rem 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    
    .sort-controls[b-jt073piq0x] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
}

@media (max-width: 320px) {
    .results-header[b-jt073piq0x] {
        margin: 0 0.5rem 1rem 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    
    .sort-controls[b-jt073piq0x] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .sort-select[b-jt073piq0x] {
        transition: none !important;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Profiles/ProfileCard.razor.rz.scp.css */
/* Profile card wrapper - provides positioning context for icon */
.profile-card-wrapper[b-83raukm5n2] {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: var(--grid-card-max-width, none);
    margin: 0 0 2.5rem 0;
    container-type: inline-size;
    content-visibility: auto;
    contain-intrinsic-size: auto 250px auto 420px;
}

.profile-card[b-83raukm5n2] {
    background: var(--sc-bg-elevated);
    border-radius: var(--lg-radius);
    overflow: hidden;
    border: none;
    /* Theme-aware locals for overlays and shadows */
    --pc-overlay-strong: color-mix(in srgb, var(--sc-bg-primary, #000) 95%, transparent);
    --pc-overlay-medium: color-mix(in srgb, var(--sc-bg-primary, #000) 85%, transparent);
    /* New: softer tail to smooth the fade-out */
    --pc-overlay-soft: color-mix(in srgb, var(--sc-bg-primary, #000) 70%, transparent);
    --pc-shadow-ambient-color: color-mix(in srgb, black 20%, transparent);
    --pc-text-shadow: 0 1px 2px color-mix(in srgb, black 70%, transparent);
    --pc-text-shadow-strong: 0 1px 3px color-mix(in srgb, black 90%, transparent);
    --pc-icon-shadow-color: color-mix(in srgb, black 50%, transparent);
    --pc-gender-shadow-color: color-mix(in srgb, black 80%, transparent);
    /* Unified gradient var so we don't duplicate rules */
    --pc-info-gradient: linear-gradient(
        to top,
        var(--pc-overlay-strong) 0%,
        var(--pc-overlay-medium) 45%,
        var(--pc-overlay-soft) 80%,
        transparent 100%
    );
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    width: 100%;
    outline: none;
    box-shadow: 0 2px 8px var(--pc-shadow-ambient-color);
    margin: 0;
    vertical-align: top;
}

/* Light theme: use a LIGHT overlay to ensure dark text remains readable over photos */
:root[data-theme="light"] .profile-card[b-83raukm5n2] {
    /* Stronger light wash for WCAG contrast in bottom info zone */
    --pc-overlay-strong: color-mix(in srgb, white 96%, transparent);
    --pc-overlay-medium: color-mix(in srgb, white 88%, transparent);
    --pc-overlay-soft: color-mix(in srgb, white 60%, transparent);
    /* Slightly softer shadows for light theme */
    --pc-shadow-ambient-color: color-mix(in srgb, black 12%, transparent);
    --pc-text-shadow: none;
    --pc-text-shadow-strong: none;
    --pc-icon-shadow-color: color-mix(in srgb, black 30%, transparent);
    --pc-gender-shadow-color: color-mix(in srgb, black 40%, transparent);
}

/* Light theme will automatically affect the gradient via overlay vars above */

/* Icon shadows driven by theme variables (see light theme overrides above) */

/* Tame verified badge shadows in light theme */
:root[data-theme="light"] .profile-card .verified-golden-badge[b-83raukm5n2] {
    filter: drop-shadow(0 3px 6px color-mix(in srgb, black 30%, transparent))
            drop-shadow(0 2px 3px color-mix(in srgb, black 20%, transparent))
            drop-shadow(0 6px 12px color-mix(in srgb, black 15%, transparent));
}

/* Remove heavy text-shadows in light theme for crisp text */
:root[data-theme="light"] .profile-card .profile-name[b-83raukm5n2],
:root[data-theme="light"] .profile-card .profile-location[b-83raukm5n2],
:root[data-theme="light"] .profile-card .hover-detail-label[b-83raukm5n2],
:root[data-theme="light"] .profile-card .hover-detail-value[b-83raukm5n2],
:root[data-theme="light"] .profile-card .price-value[b-83raukm5n2],
:root[data-theme="light"] .profile-card .info-description[b-83raukm5n2] {
    text-shadow: none !important;
}

.profile-card-link[b-83raukm5n2] {
    display: block;
}

.profile-card:focus[b-83raukm5n2],
.profile-card:focus-visible[b-83raukm5n2] {
    outline: none !important;
    box-shadow: var(--sc-shadow-glow-accent, 0 0 0 2px var(--sc-focus-ring));
    /*border-color: var(--sc-border-accent);*/
}

.profile-card:hover .profile-info[b-83raukm5n2] { background: var(--pc-info-gradient); }

.profile-image-container[b-83raukm5n2] {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
}

/* Golden Verified Badge - Upper Right Corner with 3D Sticker Effect */
.verified-golden-badge[b-83raukm5n2] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25%;
    max-width: 80px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    /* 3D sticker effect with multiple shadows */
    filter: drop-shadow(0 4px 8px color-mix(in srgb, black 60%, transparent)) 
        drop-shadow(0 2px 4px color-mix(in srgb, black 40%, transparent))
        drop-shadow(0 8px 16px color-mix(in srgb, black 30%, transparent));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Subtle 3D tilt */
    transform: perspective(400px) rotateY(-2deg) rotateX(2deg);
}

@media (hover: hover) {
    .profile-card:hover .verified-golden-badge[b-83raukm5n2] {
        /* Minimalistic hover - subtle scale only */
        transform: perspective(400px) rotateY(-2deg) rotateX(2deg) scale(1.03);
    }
}

.profile-image[b-83raukm5n2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .profile-card:hover .profile-image[b-83raukm5n2] {
        transform: scale(1.04);
    }
}

.profile-info[b-83raukm5n2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.8rem 1rem 0.6rem 1rem;
    background: var(--pc-info-gradient);
    z-index: 3;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}


@media (hover: none) and (pointer: coarse)
{
    /* Disable hover behavior on touch screens */
    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        opacity: 0 !important;
        max-height: 0 !important;
    }

    /* Hide hover info by default on touch screens */
    .profile-hover-info[b-83raukm5n2] {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* JS IntersectionObserver reveals hover info when card is in viewport center */
    .profile-hover-info.mobile-visible[b-83raukm5n2] {
        opacity: 1 !important;
        max-height: 600px !important;
        transform: translateY(0) !important;
        margin-top: 0.5rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.1rem !important;
        overflow: visible !important;
        border-top: 1px solid var(--sc-border-subtle) !important;
        transition: opacity 0.3s ease, max-height 0.4s ease, transform 0.3s ease;
    }
}

/* Show icon on small screens (mobile/tablet) */
@media (max-width: 1023.97px) {
    .hover-detail-item[b-83raukm5n2] {
        margin-bottom: 0.25rem !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
    
    .hover-detail-item:last-child[b-83raukm5n2] {
        margin-bottom: 0;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.15rem !important;
    }
    
    .hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
        text-align: left !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
    }
    
    .hover-detail-label[b-83raukm5n2] {
        opacity: 0.85 !important;
        font-size: 0.75rem !important;
        color: var(--sc-text-secondary) !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
    }
    
    .hover-detail-label i[b-83raukm5n2] {
        font-size: 0.75rem !important;
        margin-right: 0.25rem !important;
        opacity: 0.85 !important;
        filter: none !important;
    }
    
    .hover-detail-value[b-83raukm5n2] {
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        color: var(--sc-text-secondary) !important;
        text-shadow: var(--pc-text-shadow) !important;
        display: block !important;
        text-align: right !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
    }
    
    .price-item[b-83raukm5n2] {
        margin-top: 0.1rem !important;
        padding-top: 0.25rem !important;
        border-top: 1px solid var(--sc-border-subtle) !important;
    }
}


.profile-content[b-83raukm5n2] {
    flex-grow: 1;
    margin-bottom: 2rem;
}

.profile-header[b-83raukm5n2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.profile-text[b-83raukm5n2] {
    flex: 1;
    min-width: 0;
}

.profile-name[b-83raukm5n2] {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--sc-font-heading);
    color: var(--sc-text-primary);
    margin: 0 0 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
    text-shadow: var(--pc-text-shadow);
}

.verified-badge[b-83raukm5n2] {
    font-size: 14px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, black 50%, transparent));
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
}

.verified-badge.verified[b-83raukm5n2] {
    color: var(--bs-success);
}

.verified-badge.unverified[b-83raukm5n2] {
    color: var(--bs-danger);
}

.verified-badge i[b-83raukm5n2] {
    font-size: 14px;
}

/* Profile Location - Positioned closer to name */
.profile-location-wrapper[b-83raukm5n2] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-location[b-83raukm5n2] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sc-text-primary);
    line-height: 1.3;
    text-shadow: var(--pc-text-shadow);
}

.profile-proximity[b-83raukm5n2] {
    font-size: 0.8rem;
    color: var(--sc-text-secondary);
    padding-left: 1.5rem;
    font-weight: 600;
    text-shadow: var(--pc-text-shadow-strong);
}

.location-icon[b-83raukm5n2] {
    width: 1em;
    height: 1em;
    font-size: inherit;
    margin-right: 0.25rem;
    filter: drop-shadow(0 1px 2px var(--pc-icon-shadow-color));
    flex-shrink: 0;
    vertical-align: -0.125em;
}

.location-home[b-83raukm5n2] {
    color: var(--sc-accent);
}

.location-touring[b-83raukm5n2] {
    color: var(--bs-primary);
    animation: tour-pulse-b-83raukm5n2 2.5s ease-in-out infinite;
}

.location-upcoming[b-83raukm5n2] {
    color: var(--bs-info);
}

.location-completed[b-83raukm5n2] {
    color: var(--sc-text-muted);
}

@keyframes tour-pulse-b-83raukm5n2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

.profile-gender-badge[b-83raukm5n2] {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0.6rem;
}

@media (hover: hover) {
    .profile-card:hover .profile-gender-badge[b-83raukm5n2] {
        transform: scale(1.15);
    }

    .profile-card:hover .gender-icon-main[b-83raukm5n2] { filter: drop-shadow(0 0 10px var(--sc-focus-ring)) drop-shadow(0 3px 6px var(--pc-gender-shadow-color)); }
}

.gender-icon-main[b-83raukm5n2] {
    display: block;
    filter: drop-shadow(0 3px 6px var(--pc-gender-shadow-color));
    transition: filter 0.3s ease;
    width: 28px;
    height: 28px;
}

.profile-hover-info[b-83raukm5n2] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    transform: translateY(-8px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
               max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
               margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
               padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
               border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
               transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        opacity: 1;
        max-height: 250px;
        margin-top: 0.3rem;
        padding-top: 0.3rem;
        border-top: 1px solid var(--sc-border-subtle);
        transform: translateY(0);
    }
}

/* Mobile Responsive - Simplified for better performance */
@media (max-width: 768px) {
    /* PERF: Reduce verified badge filter from 3 drop-shadows to 1 on mobile */
    .verified-golden-badge[b-83raukm5n2] {
        filter: drop-shadow(0 3px 6px color-mix(in srgb, black 50%, transparent));
        transform: none;
        transition: none;
    }

    /* PERF: Remove filter from small icons on mobile */
    .location-icon[b-83raukm5n2],
    .gender-icon-main[b-83raukm5n2],
    .verified-badge[b-83raukm5n2] {
        filter: none;
    }

    .profile-info[b-83raukm5n2] {
        padding: 0.8rem 0.5rem 0.6rem 0.5rem;
        z-index: 5;
    }
    
    .profile-content[b-83raukm5n2] {
        margin-bottom: 1.75rem;
    }
    
    /* NOTE: Icon toggle and hover info behavior handled by touch media query below */
    
    .hover-detail-item[b-83raukm5n2] {
        margin-bottom: 0.25rem;
        padding: 0;
        font-size: 0.75rem;
        opacity: 1;
        transform: translateX(0);
    }
    
    .hover-detail-item:last-child[b-83raukm5n2] {
        margin-bottom: 0;
    }
    
    .hover-detail-label i[b-83raukm5n2] {
        font-size: 0.75rem;
        margin-right: 0.25rem;
        opacity: 0.85;
        filter: none;
    }
    
    .hover-detail-label[b-83raukm5n2] {
        opacity: 0.85;
        font-size: 0.75rem;
        color: var(--sc-text-secondary);
        font-weight: 600;
    }
    
    .hover-detail-value[b-83raukm5n2] {
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--sc-text-secondary);
        text-shadow: var(--pc-text-shadow);
    }
    
    .price-item[b-83raukm5n2] {
        margin-top: 0.1rem;
        padding-top: 0.25rem;
        border-top: 1px solid var(--sc-border-subtle);
    }
    
    .price-item .hover-detail-label[b-83raukm5n2] {
        font-size: 0.75rem;
        color: var(--sc-text-secondary);
    }
    
    .price-item .price-value[b-83raukm5n2] {
        color: var(--bs-success);
        font-weight: 600;
        font-size: 0.75rem;
        text-shadow: var(--pc-text-shadow);
    }
    
    .info-item[b-83raukm5n2] {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
        border-top: 1px solid var(--sc-border-subtle);
    }
    
    .info-description[b-83raukm5n2] {
        font-size: 0.75rem;
        line-height: 1.3;
        opacity: 0.85;
        color: var(--sc-text-secondary);
        text-shadow: var(--pc-text-shadow);
        margin-bottom: 0.5rem;
    }
}

.hover-detail-item[b-83raukm5n2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--sc-text-primary);
    margin-bottom: 0.25rem;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 14px;
    line-height: 1.4;
}

.hover-detail-item:last-child[b-83raukm5n2] {
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.hover-detail-label[b-83raukm5n2] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.hover-detail-value[b-83raukm5n2] {
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.bi-person-fill[b-83raukm5n2] {
    color: var(--sc-text-secondary);
    font-size: 0.8rem;
    filter: drop-shadow(0 1px 2px var(--pc-icon-shadow-color));
}

.hover-detail-item.distance-item .bi-rulers[b-83raukm5n2] {
    color: var(--sc-accent-2);
    font-size: 0.8rem;
    filter: drop-shadow(0 1px 2px var(--pc-icon-shadow-color));
}

.bi-star-fill[b-83raukm5n2] {
    color: var(--sc-accent);
    font-size: 0.8rem;
    filter: drop-shadow(0 1px 2px var(--pc-icon-shadow-color));
}

.bi-currency-dollar[b-83raukm5n2] {
    color: var(--bs-success);
    font-size: 0.85rem;
    filter: drop-shadow(0 1px 2px var(--pc-icon-shadow-color));
}

/* Stagger animations only on desktop for smoothness */
@media (min-width: 769px) {
    .hover-detail-item:nth-child(1)[b-83raukm5n2] {
        transition-delay: 0.05s;
    }

    .hover-detail-item:nth-child(2)[b-83raukm5n2] { 
        transition-delay: 0.08s;
    }

    .hover-detail-item:nth-child(3)[b-83raukm5n2] { 
        transition-delay: 0.11s;
    }

    .hover-detail-item:nth-child(4)[b-83raukm5n2] { 
        transition-delay: 0.14s;
    }

    .hover-detail-item:nth-child(5)[b-83raukm5n2] { 
        transition-delay: 0.17s;
    }
}

@media (hover: hover) {
    .profile-card:hover .hover-detail-item[b-83raukm5n2] {
        opacity: 1;
        transform: translateX(0);
    }

    .profile-card:not(:hover) .hover-detail-item[b-83raukm5n2] {
        transition-delay: 0s;
        transition-duration: 0.2s;
    }
}

.price-value[b-83raukm5n2] {
    color: var(--bs-success);
    font-weight: 800;
    font-size: 0.85rem;
    text-shadow: var(--pc-text-shadow-strong);
}

.hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--sc-text-secondary);
    text-align: left;
    font-weight: 500;
}

/* Text shadows for better readability */
.hover-detail-label[b-83raukm5n2],
.hover-detail-value[b-83raukm5n2] {
    text-shadow: var(--pc-text-shadow-strong);
}

/* RESPONSIVE ADJUSTMENTS FOR DIFFERENT CARD SIZES */

@media (max-width: 1399px) and (min-width: 1200px) {
    .profile-info[b-83raukm5n2] {
        padding: 0.7rem 0.9rem 0.5rem 0.9rem;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 1.05rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.8rem;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 24%;
        max-width: 70px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.65rem 0.85rem 0.45rem 0.85rem;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 1rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.75rem;
    }
    
    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.5rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 24px;
        height: 24px;
    }

    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 220px;
    }

    .hover-detail-label[b-83raukm5n2] {
        font-size: 0.8rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.75rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.75rem;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 23%;
        max-width: 60px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.6rem 0.8rem 0.4rem 0.8rem;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 0.95rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.7rem;
    }
    
    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.4rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 22px;
        height: 22px;
    }

    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 200px;
    }

    .hover-detail-label[b-83raukm5n2] {
        font-size: 0.75rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.7rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.7rem;
    }
}

@media (max-width: 767px) and (min-width: 576px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 22%;
        max-width: 50px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.55rem 0.75rem 0.35rem 0.75rem;
    }
    
    .verified-badge[b-83raukm5n2] {
        font-size: 11px;
        margin-right: 0.15rem;
    }
    
    .verified-badge i[b-83raukm5n2] {
        font-size: 11px;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 0.9rem;
        line-height: 1.25;
        gap: 0.2rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.65rem;
    }

    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.3rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 22px;
        height: 22px;
    }

    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 180px;
    }

    .hover-detail-label[b-83raukm5n2] {
        font-size: 0.7rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.65rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.65rem;
    }
}

@media (max-width: 425px) and (min-width: 376px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 22%;
        max-width: 48px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.55rem 0.7rem 0.35rem 0.7rem;
    }
    
    .verified-badge[b-83raukm5n2] {
        font-size: 11px;
        margin-right: 0.15rem;
    }
    
    .verified-badge i[b-83raukm5n2] {
        font-size: 11px;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 0.85rem;
        gap: 0.2rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.75rem;
    }

    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.3rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 22px;
        height: 22px;
    }
    
    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 170px;
        margin-top: 0.25rem;
        padding-top: 0.25rem;
    }
    
    .hover-detail-item[b-83raukm5n2] {
        font-size: 0.7rem;
        min-height: 12px;
        margin-bottom: 0.2rem;
    }
    
    .hover-detail-label[b-83raukm5n2] {
        font-size: 0.7rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.65rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.65rem;
    }
    
    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.35rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 20px;
        height: 20px;
    }

    .hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
        font-size: 0.65rem;
        line-height: 1.3;
    }
}

@media (max-width: 375px) and (min-width: 321px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 21%;
        max-width: 42px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.45rem 0.6rem 0.3rem 0.6rem;
    }
    
    .verified-badge[b-83raukm5n2] {
        font-size: 10px;
        margin-right: 0.1rem;
    }
    
    .verified-badge i[b-83raukm5n2] {
        font-size: 10px;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 0.8rem;
        gap: 0.15rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.7rem;
    }
    
    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.25rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 20px;
        height: 20px;
    }
    
    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 70px;
        margin-top: 0.2rem;
        padding-top: 0.2rem;
    }
    
    .hover-detail-item[b-83raukm5n2] {
        font-size: 0.65rem;
        min-height: 11px;
        margin-bottom: 0.15rem;
    }
    
    .hover-detail_label[b-83raukm5n2] {
        font-size: 0.65rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.6rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.6rem;
    }

    .hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
        font-size: 0.6rem;
        line-height: 1.25;
    }
}

@media (max-width: 320px) {
    .verified-golden-badge[b-83raukm5n2] {
        width: 20%;
        max-width: 38px;
    }
    
    .profile-info[b-83raukm5n2] {
        padding: 0.4rem 0.5rem 0.25rem 0.5rem;
    }
    
    .verified-badge[b-83raukm5n2] {
        font-size: 9px;
        margin-right: 0.1rem;
    }
    
    .verified-badge i[b-83raukm5n2] {
        font-size: 9px;
    }
    
    .profile-name[b-83raukm5n2] {
        font-size: 0.75rem;
        gap: 0.1rem;
    }
    
    .profile-location[b-83raukm5n2] {
        font-size: 0.6rem;
    }
    
    .profile-card:hover .profile-hover-info[b-83raukm5n2] {
        max-height: 60px;
        margin-top: 0.15rem;
        padding-top: 0.15rem;
    }
    
    .hover-detail-item[b-83raukm5n2] {
        font-size: 0.6rem;
        min-height: 10px;
        margin-bottom: 0.1rem;
    }

    .hover-detail-label[b-83raukm5n2] {
        font-size: 0.6rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.55rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.55rem;
    }

    .profile-gender-badge[b-83raukm5n2] {
        margin-left: 0.2rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 18px;
        height: 18px;
    }

    .hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
        font-size: 0.55rem;
        line-height: 1.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-card[b-83raukm5n2],
    .profile-image[b-83raukm5n2],
    .profile-hover-info[b-83raukm5n2],
    .hover-detail-item[b-83raukm5n2],
    .profile-gender-badge[b-83raukm5n2],
    .gender-icon-main[b-83raukm5n2],
    .verified-golden-badge[b-83raukm5n2] {
        transition: none !important;
    }
    
    .profile-card:hover .profile-image[b-83raukm5n2] {
        transform: none !important;
    }
    
    .profile-card:hover .verified-golden-badge[b-83raukm5n2] {
        transform: none !important;
    }
    
    .location-touring[b-83raukm5n2] {
        animation: none !important;
    }
}

/* Theme-aware gender icon colors */
.gender-icon-main.male[b-83raukm5n2] { color: var(--accent-blue); }
.gender-icon-main.female[b-83raukm5n2] { color: var(--sc-accent); }

.profile-card-skeleton[b-83raukm5n2] {
    pointer-events: none;
    cursor: default;
}

.profile-card-skeleton:hover[b-83raukm5n2] {
    transform: none;
    box-shadow: 0 2px 8px var(--pc-shadow-ambient-color);
}

@keyframes skeleton-pulse-b-83raukm5n2 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.skeleton-image[b-83raukm5n2] {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--sc-text-primary) 5%, transparent) 0%,
        color-mix(in srgb, var(--sc-text-primary) 10%, transparent) 50%,
        color-mix(in srgb, var(--sc-text-primary) 5%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-83raukm5n2 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-83raukm5n2 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-name[b-83raukm5n2] {
    width: 70%;
    height: 1.1rem;
    background: color-mix(in srgb, var(--sc-text-primary) 15%, transparent);
    border-radius: calc(var(--lg-radius) / 4);
    margin-bottom: 0.4rem;
    animation: skeleton-pulse-b-83raukm5n2 1.5s ease-in-out infinite;
}

.skeleton-location[b-83raukm5n2] {
    width: 50%;
    height: 0.85rem;
    background: color-mix(in srgb, var(--sc-text-primary) 15%, transparent);
    border-radius: calc(var(--lg-radius) / 4);
    animation: skeleton-pulse-b-83raukm5n2 1.5s ease-in-out 0.2s infinite;
}

.skeleton-gender[b-83raukm5n2] {
    width: 26px;
    height: 26px;
    background: color-mix(in srgb, var(--sc-text-primary) 15%, transparent);
    border-radius: calc(var(--lg-radius) / 4);
    animation: skeleton-pulse-b-83raukm5n2 1.5s ease-in-out 0.4s infinite;
}

.skeleton-badge[b-83raukm5n2] {
    width: 32px;
    height: 24px;
    background: color-mix(in srgb, var(--sc-text-primary) 15%, transparent);
    border-radius: calc(var(--lg-radius) / 4);
    animation: skeleton-pulse-b-83raukm5n2 1.5s ease-in-out 0.6s infinite;
}

.skeleton-badge:not(:last-child)[b-83raukm5n2] {
    margin-right: 0.5rem;
}

/* ===== SINGLE-COLUMN FONT SCALING (container query) ===== */
@container (min-width: 300px) {
    .profile-name[b-83raukm5n2] {
        font-size: 1.35rem;
    }

    .profile-location[b-83raukm5n2] {
        font-size: 1rem;
    }

    .profile-proximity[b-83raukm5n2] {
        font-size: 0.95rem;
    }

    .gender-icon-main[b-83raukm5n2] {
        width: 32px;
        height: 32px;
    }

    .verified-golden-badge[b-83raukm5n2] {
        max-width: 90px;
    }

    .hover-detail-item[b-83raukm5n2] {
        font-size: 0.95rem;
        min-height: 18px;
    }

    .hover-detail-label[b-83raukm5n2] {
        font-size: 1rem;
    }

    .hover-detail-value[b-83raukm5n2] {
        font-size: 0.95rem;
    }

    .hover-detail-item:last-child .hover-detail-value[b-83raukm5n2] {
        font-size: 0.9rem;
    }

    .price-value[b-83raukm5n2] {
        font-size: 0.95rem;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Profiles/ProfileMasonryGrid.razor.rz.scp.css */
/* ===== MASONRY PROFILE GRID ===== */
.profiles-grid[b-8vfo4s3n0i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    width: 100%;
    min-height: 80vh;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

/* ===== COLUMN TOGGLE (mobile only) ===== */
.grid-layout-toggle[b-8vfo4s3n0i] {
    display: none; /* hidden on desktop */
}

@media (max-width: 575px) and (min-width: 321px) {
    .grid-layout-toggle[b-8vfo4s3n0i] {
        display: flex;
        justify-content: flex-end;
        gap: 0.25rem;
        padding: 0.5rem 0.5rem 0;
    }

    .toggle-btn[b-8vfo4s3n0i] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid var(--sc-border-subtle);
        border-radius: calc(var(--lg-radius) / 4);
        background: var(--sc-bg-surface);
        color: var(--sc-text-muted);
        cursor: pointer;
        padding: 0;
        transition: opacity 0.2s ease;
    }

    .toggle-btn.active[b-8vfo4s3n0i] {
        background: var(--sc-accent);
        color: var(--sc-text-on-accent);
        border-color: var(--sc-accent);
    }

    /* Single-column override (toggle-driven) */
    .profiles-grid.single-column[b-8vfo4s3n0i] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Large screens (1400px+) - new 250px cards */
@media (min-width: 1400px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
}

/* Large screens (1200px - 1399px) - 250px cards */
@media (max-width: 1399px) and (min-width: 1200px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
    }
}

/* Medium-large screens (992px - 1199px) - 230px cards */
@media (max-width: 1199px) and (min-width: 992px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1rem;
    }
}

/* Medium screens (768px - 991px) - 210px cards */
@media (max-width: 991px) and (min-width: 768px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 1rem;
    }
}

/* Small tablets (576px - 767px) - 190px cards */
@media (max-width: 767px) and (min-width: 576px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 1rem;
    }
}

/* Mobile devices - 2 columns (426px - 575px) */
@media (max-width: 575px) and (min-width: 426px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.5rem;
    }
}

/* Mobile devices - 2 columns (376px - 425px) */
@media (max-width: 425px) and (min-width: 376px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

/* Mobile devices - 2 columns (321px - 375px) */
@media (max-width: 375px) and (min-width: 321px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.375rem;
        padding: 0.5rem;
    }
}

/* Very small mobile - forced single column (320px and below) */
@media (max-width: 320px) {
    .profiles-grid[b-8vfo4s3n0i] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.5rem;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Profiles/ServiceBadges.razor.rz.scp.css */
/* ServiceBadges component styles */
.status-icons-footer[b-y60q3rtq26] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    z-index: 4;
    /* Theme-aware locals and background for better contrast */
    --sb-overlay-strong: color-mix(in srgb, black 90%, transparent);
    --sb-overlay-medium: color-mix(in srgb, black 60%, transparent);
    /* New: softer tail to avoid a hard band at the fade-out */
    --sb-overlay-soft: color-mix(in srgb, black 40%, transparent);
    --sb-footer-gradient: linear-gradient(
        to top,
        var(--sb-overlay-strong) 0%,
        var(--sb-overlay-medium) 45%,
        var(--sb-overlay-soft) 80%,
        transparent 100%
    );
    background: var(--sb-footer-gradient);
    padding: 0.6rem 0.75rem 0.5rem 0.75rem; /* Reduced from 0.75/0.6 */
    border-top: 1px solid var(--sc-border-subtle);
    border-radius: 0 0 var(--lg-radius) var(--lg-radius);
}

/* Light theme: flip to LIGHT overlay for readability */
:root[data-theme="light"] .status-icons-footer[b-y60q3rtq26] {
    --sb-overlay-strong: color-mix(in srgb, white 96%, transparent);
    --sb-overlay-medium: color-mix(in srgb, white 88%, transparent);
    --sb-overlay-soft: color-mix(in srgb, white 60%, transparent);
    --sb-footer-gradient: linear-gradient(
        to top,
        var(--sb-overlay-strong) 0%,
        var(--sb-overlay-medium) 45%,
        var(--sb-overlay-soft) 80%,
        transparent 100%
    );
    border-top: 1px solid color-mix(in srgb, var(--sc-text-primary) 10%, transparent);
}

.status-icon[b-y60q3rtq26] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    cursor: pointer;
    /* Theme-aware text color; specific icon variants override below */
    color: var(--sc-text-primary);
    /* Remove button-like styling - blend seamlessly */
    background: transparent;
    padding: 0;
    border-radius: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.status-icon:hover[b-y60q3rtq26] {
    transform: translateY(-2px) scale(1.1);
    filter: brightness(1.3);
}

    .status-icon .count[b-y60q3rtq26] {
        font-size: 0.8rem; /* Increased from 0.7rem for better readability */
        font-weight: 600; /* Added weight */
        line-height: 1;
        text-shadow: 0 1px 2px color-mix(in srgb, black 70%, transparent);
    }

    .status-icon svg[b-y60q3rtq26] {
        width: 14px; /* Increased from 12px */
        height: 14px; /* Increased from 12px */
        filter: drop-shadow(0 2px 4px color-mix(in srgb, black 60%, transparent));
        flex-shrink: 0;
    }

    /* Icon-specific colors */
    .status-icon.video[b-y60q3rtq26] {
        /* Use Bootstrap info (mapped via sc-*) for a blue accent */
        color: var(--bs-info);
    }

        .status-icon.video svg[b-y60q3rtq26] {
            color: var(--bs-info);
        }

    .status-icon.images[b-y60q3rtq26] {
        color: var(--bs-success);
    }

        .status-icon.images svg[b-y60q3rtq26] {
            color: var(--bs-success);
        }

    .status-icon.elite[b-y60q3rtq26] { color: var(--sc-accent); }

        .status-icon.elite svg[b-y60q3rtq26] {
            color: var(--sc-accent);
        }

    .status-icon.views[b-y60q3rtq26] { color: var(--bs-warning); }

        .status-icon.views svg[b-y60q3rtq26] { color: var(--bs-warning); }

/* Animation for better UX */
@keyframes badgeFloat-b-y60q3rtq26 {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-1px);
    }
}

.profile-card:hover .status-icon.elite[b-y60q3rtq26] {
    animation: badgeFloat-b-y60q3rtq26 2s ease-in-out infinite;
}

/* Better spacing for different screen sizes */
@media (max-width: 768px) {
    .status-icons-footer[b-y60q3rtq26] {
        gap: 0.25rem; /* Compact for mobile */
        padding: 0.5rem 0.6rem 0.4rem 0.6rem; /* Reduced padding - was too tall! */
        border-top: 1px solid var(--sc-border-subtle);
    }

    .status-icon[b-y60q3rtq26] {
        min-width: 28px; /* Slightly smaller */
        height: 20px; /* Reduced height */
        padding: 0.15rem 0.25rem; /* Tighter padding */
        font-size: 0.7rem;
    }

        .status-icon svg[b-y60q3rtq26] {
            width: 11px; /* Slightly smaller */
            height: 11px;
            filter: none; /* PERF: remove drop-shadow on mobile */
        }

        .status-icon .count[b-y60q3rtq26] {
            font-size: 0.6rem;
            text-shadow: none; /* PERF: reduce repaints */
        }
}

/* Ensure badges don't interfere with text selection */
.status-icons-footer[b-y60q3rtq26] {
    -webkit-user-select: none;
    user-select: none;
}

/* Accessibility improvements */
.status-icon:focus[b-y60q3rtq26] {
    outline: 2px solid var(--sc-focus-ring);
    outline-offset: 1px;
}

/* Light theme: reduce heavy shadows for crisp text/icons */
:root[data-theme="light"] .status-icon .count[b-y60q3rtq26] {
    text-shadow: none;
}

:root[data-theme="light"] .status-icon svg[b-y60q3rtq26] {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, black 30%, transparent));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .status-icon[b-y60q3rtq26] {
        transition: none !important;
        animation: none !important;
    }

        .status-icon:hover[b-y60q3rtq26] {
            transform: none;
        }

    .profile-card:hover .status-icon.elite[b-y60q3rtq26] {
        animation: none;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Shared/HeroBadgePill.razor.rz.scp.css */
/* ===== HERO BADGE PILL (Liquid Glass) ===== */
.hero-badge-pill[b-r426q4z7cp] {
    background: var(--lg-bg-card);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border-radius: 9999px;
    box-shadow: var(--lg-shadow-card);
    border: none;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    contain: layout style paint;
}

/* Prismatic border */
.hero-badge-pill[b-r426q4z7cp]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--lg-prism);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.hero-badge-pill > *[b-r426q4z7cp] {
    position: relative;
    z-index: 2;
}

.pill-icon[b-r426q4z7cp] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pill-text[b-r426q4z7cp] {
    font-size: 0.68rem;
    color: var(--sc-text-secondary);
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pill-text strong[b-r426q4z7cp] {
    display: block;
    color: var(--sc-text-primary);
    font-size: 0.73rem;
    font-weight: 600;
}

/* ── Variant: Verified ── */
.hero-badge-pill--verified .pill-icon[b-r426q4z7cp] {
    background: rgba(255, 215, 0, 0.12);
    color: var(--sc-accent);
}

/* ── Variant: Ambassador ── */
.hero-badge-pill--ambassador .pill-icon[b-r426q4z7cp] {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

/* ── Variant: Model ── */
.hero-badge-pill--model .pill-icon[b-r426q4z7cp] {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

/* ── Variant: New Member ── */
.hero-badge-pill--new-member .pill-icon[b-r426q4z7cp] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-contrast: high) {
    .hero-badge-pill[b-r426q4z7cp] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 2px solid var(--sc-border-color);
        border-radius: 9999px;
        box-shadow: none;
    }

    .hero-badge-pill[b-r426q4z7cp]::before {
        display: none;
    }
}

@media (prefers-reduced-transparency) {
    .hero-badge-pill[b-r426q4z7cp] {
        background: var(--sc-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hero-badge-pill[b-r426q4z7cp]::before {
        display: none;
    }
}
/* _content/ZyntraLabs.ScarletCompanion.Application/Components/Shared/HeroProfileImage.razor.rz.scp.css */
/* ===== HERO PROFILE IMAGE CARD ===== */
.hero-profile-card[b-6i0ivs35ot] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Pill wrapper — centered at top, 50% above card edge, scales with card ── */
.hero-profile-card__pill-wrap[b-6i0ivs35ot] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--pill-scale, 1));
    transform-origin: center bottom;
    z-index: 4;
}

/* ── Card body — holds image, overlay, badge ── */
.hero-profile-card__body[b-6i0ivs35ot] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--lg-radius);
    overflow: hidden;
    background: var(--sc-bg-elevated);
    box-shadow: var(--lg-shadow-card), 0 0 0 1px rgba(255, 215, 0, 0.12);
}

.hero-profile-card__img[b-6i0ivs35ot] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.9) contrast(1.05);
}

.hero-profile-card__overlay[b-6i0ivs35ot] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        transparent 100%
    );
    padding: 1.2rem 1rem 0.8rem;
    z-index: 2;
}

.hero-profile-card__name[b-6i0ivs35ot] {
    font-family: var(--sc-font-heading);
    font-size: 0.95rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-profile-card__meta[b-6i0ivs35ot] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-profile-card__badge[b-6i0ivs35ot] {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: calc(var(--lg-radius) / 4);
    padding: 0.2rem 0.55rem;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    color: var(--sc-accent);
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    z-index: 3;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-contrast: high) {
    .hero-profile-card__body[b-6i0ivs35ot] {
        border: 2px solid var(--sc-border-color);
        border-radius: 4px;
        box-shadow: none;
    }

    .hero-profile-card__badge[b-6i0ivs35ot] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--sc-bg-elevated);
        border-color: var(--sc-accent);
        border-radius: 2px;
    }
}

@media (prefers-reduced-transparency) {
    .hero-profile-card__body[b-6i0ivs35ot] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .hero-profile-card__badge[b-6i0ivs35ot] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--sc-bg-elevated);
    }
}