/*
 * Shared "member card" component — used by the search results grid
 * (member/searchresults.blade.php + member/partials/member-card.blade.php)
 * and the "Recommended Matches" grid on the My Profile dashboard-home
 * section (member/user.blade.php). Pulled out of searchresults.blade.php's
 * inline <style> so both pages render the exact same card without
 * duplicating ~250 lines of CSS.
 *
 * Every custom property below carries a literal fallback (var(--x, #hex))
 * so the card renders correctly even on a page that never defines the
 * --ur-* brand tokens (they're only declared on .ur-search-page).
 */
.member-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

@media (max-width: 767px) {
    .member-results {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.member-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ur-border, #E7E2D6);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 46, 36, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}

.member-card:hover {
    box-shadow: 0 14px 30px rgba(15, 46, 36, .12);
    transform: translateY(-3px);
}

.member-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 5;
    background: var(--ur-bg, #F6F4EF);
    overflow: hidden;
}

.member-card__photo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Carousel slides — stacked on top of each other, only .is-active shown.
   Selector needs to out-specificity ".member-card__photo a" above. */
.member-card__photo a.member-card__slide {
    position: absolute;
    inset: 0;
    display: none;
}

.member-card__photo a.member-card__slide.is-active {
    display: block;
}

.member-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 46, 36, 0.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s ease;
}

.member-card__nav:hover {
    background: rgba(15, 46, 36, 0.85);
}

.member-card__nav--prev {
    left: 8px;
}

.member-card__nav--next {
    right: 8px;
}

/* Member photos are only ever generated up to ~210px on their longest
   side, so forcing them to `cover` a much larger box upscales and
   crops them hard (blurry, oddly zoomed faces). We show the photo
   untouched (`contain`, never cropped/upscaled beyond native size)
   and fill the rest of the box with a softly blurred copy of the
   same photo instead of dead space, so every card still reads as a
   uniform, deliberate frame regardless of the source image's size
   or orientation. */
.member-card__photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) saturate(1.1) brightness(.92);
    transform: scale(1.15);
}

.member-card__photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.member-card__ribbon {
    position: absolute;
    top: 12px;
    left: -34px;
    transform: rotate(-45deg);
    width: 130px;
    padding: 3px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.member-card__ribbon--new {
    background: var(--ur-gold, #C9974D);
    color: var(--ur-green-dark, #0F2E24);
}

.member-card__ribbon--updated {
    background: var(--ur-green, #123A2E);
}

.member-card__id-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 46, 36, 0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 4px 9px;
    border-radius: 20px;
    pointer-events: none;
}

.member-card__id-copy {
    pointer-events: auto;
    cursor: pointer;
    opacity: .85;
}

.member-card__id-copy:hover {
    opacity: 1;
}

/* Admin-verified badge — bottom-left over the photo so it never
   collides with the diagonal New/Updated ribbon (top-left) or the
   ID badge (top-right). */
.member-card__badge--verified {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1E7A46;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    pointer-events: none;
}

/* Package/plan badge — bottom-right, the one corner left free by the
   New/Updated ribbon (top-left), ID badge (top-right) and Verified
   badge (bottom-left). Color-coded per tier so it reads at a glance. */
.member-card__badge--package {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    pointer-events: none;
}

.member-card__badge--package-platinum {
    background: linear-gradient(135deg, #B8C0CC, #6D7686);
}

.member-card__badge--package-diamond {
    background: linear-gradient(135deg, #4FC3F7, #0277BD);
}

.member-card__badge--package-royal {
    background: linear-gradient(135deg, #9B59B6, #5B2C6F);
}

.member-card__badge--package-imperial {
    background: linear-gradient(135deg, #2B2B2B, #000);
    color: var(--ur-gold, #C9974D);
    border: 1px solid var(--ur-gold, #C9974D);
}

.member-card__body {
    padding: 16px 16px 4px;
    flex: 1;
}

.member-card__name {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
}

.member-card__name a {
    color: var(--ur-text, #1C2321);
    cursor: pointer;
}

.member-card__name a:hover {
    color: var(--ur-green, #123A2E);
}

/* "Online" (logged in within the last month) — next to the name rather
   than on the photo, since all 4 photo corners are already taken by the
   New/Updated ribbon, ID badge, Verified badge and package badge. */
.member-card__online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    background: #2ECC71;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(46, 204, 113, .35);
    vertical-align: middle;
}

/* Compatibility box (client request, Sep 2026 — restyled from a simple
   badge to a fuller breakdown per client-provided reference) — shown on
   every card, not just the single profile page, whenever the logged-in
   viewer has partner preferences saved. Brand colors (green/gold), not the
   reference mockup's maroon — and labeled "Compatibility Score", matching
   what the single profile page already calls it, not "AI Match" (this
   isn't AI/ML-driven, so that label would overclaim). */
.member-card__compat {
    background: var(--ur-bg, #F6F4EF);
    border: 1px solid var(--ur-border, #E7E2D6);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.member-card__compat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.member-card__compat-score {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ur-green, #123A2E);
    line-height: 1;
    flex-shrink: 0;
}
.member-card__compat-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ur-green, #123A2E);
}
.member-card__compat-sub {
    font-size: .68rem;
    color: var(--ur-text-muted, #6B7570);
    margin-top: 1px;
}
.member-card__compat-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.member-card__compat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.member-card__compat-row-label {
    flex: 0 0 78px;
    font-size: .65rem;
    color: var(--ur-text-muted, #6B7570);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-card__compat-row-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--ur-border, #E7E2D6);
    overflow: hidden;
}
.member-card__compat-row-fill {
    display: block;
    height: 100%;
    background: var(--ur-gold, #C9974D);
    border-radius: 3px;
}
.member-card__compat-row-pct {
    flex: 0 0 30px;
    text-align: right;
    font-size: .65rem;
    font-weight: 700;
    color: var(--ur-text, #1C2321);
}

.member-card__compat-explain {
    font-size: .68rem;
    color: var(--ur-text-muted, #6B7570);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ur-border, #E7E2D6);
    line-height: 1.4;
}

.member-card__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: .8rem;
    color: var(--ur-text-muted, #6B7570);
}

.member-card__quick li i {
    color: var(--ur-gold, #C9974D);
    margin-right: 5px;
}

.member-card__flag {
    width: 16px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.member-card__designation {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--ur-text-muted, #6B7570);
    margin: -6px 0 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.member-card__designation i {
    color: var(--ur-gold, #C9974D);
}

.member-card__details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
    list-style: none;
    padding: 12px 0;
    margin: 0;
    border-top: 1px dashed var(--ur-border, #E7E2D6);
    border-bottom: 1px dashed var(--ur-border, #E7E2D6);
}

.member-card__details li {
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    overflow: hidden;
}

.member-card__details li span {
    color: var(--ur-text-muted, #6B7570);
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .3px;
    margin-bottom: 2px;
}

.member-card__details li b {
    color: var(--ur-text, #1C2321);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Below ~480px, 3 equal columns leave too little width per value (e.g.
   "Soni / Muslim", "Never Married") and they get ellipsis-truncated —
   stack each as its own full-width row instead, label left / value right. */
@media (max-width: 480px) {
    .member-card__details {
        grid-template-columns: 1fr;
        gap: 8px 0;
    }
    .member-card__details li {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }
    .member-card__details li span { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }
    .member-card__details li b {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.member-card__footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px 16px;
}

.member-card__footer a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 11px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    border: 1px solid var(--ur-border, #E7E2D6);
    color: var(--ur-green, #123A2E);
    background: #fff;
}

.member-card__footer a:hover {
    background: var(--ur-bg, #F6F4EF);
    border-color: var(--ur-gold, #C9974D);
}

.member-card__footer a.is-interest {
    border-color: var(--ur-gold, #C9974D);
    background: var(--ur-gold, #C9974D);
    color: #fff;
}

/* Homepage "Meet Our Members" teaser ($hideImage) — lock overlay on the
   photo + a matching "paid members only" footer, instead of the normal
   View Full Profile / Express Interest pair. */
.member-card__lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(15,46,36,.35), rgba(15,46,36,.6));
    cursor: pointer;
}
.member-card__lock-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,46,36,.85);
    border: 2px solid var(--ur-gold, #C9974D);
    color: var(--ur-gold, #C9974D);
    font-size: 20px;
    margin-bottom: 2px;
}
.member-card__lock-title {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.member-card__lock-sub {
    color: rgba(255,255,255,.88);
    font-size: 12px;
}

.member-card__locked-footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.member-card__locked-note {
    margin: 0;
    text-align: center;
    font-size: .7rem;
    color: var(--ur-text-muted, #6B7570);
}
.member-card__footer a.member-card__unlock-btn {
    flex: none;
    background: var(--ur-green, #123A2E);
    border-color: var(--ur-green, #123A2E);
    color: #fff;
}
.member-card__footer a.member-card__unlock-btn:hover {
    background: var(--ur-green-dark, #0F2E24);
    border-color: var(--ur-green-dark, #0F2E24);
}

/* Force white text even for the accepted/declined states, whose
   inner <span class="c-green"/"c-red"> otherwise override the
   color with !important. */
.member-card__footer a.is-interest span {
    color: #fff !important;
}

.member-card__footer a.is-interest:hover {
    background: #B07C3D;
    border-color: #B07C3D;
}

@media (max-width: 420px) {
    .member-card__footer {
        flex-direction: column;
    }
}

/* Team Dashboard cards carry up to five actions (View, Edit, Delete, Share, Make private): View gets its own row, the rest share the next one. */
.member-card__footer--team { flex-wrap: wrap; }
.member-card__footer--team a { flex: 1 1 auto; white-space: nowrap; padding: 10px 12px; }
.member-card__footer--team a:first-child { flex: 1 1 100%; }

/* Phones: team cards get a neat two-column grid instead of the generic stacked column above (which made View Full Profile tall and pushed the other buttons off to the side). */
@media (max-width: 575px) {
    .member-card__footer--team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex-direction: row; padding: 12px 14px 14px; }
    .member-card__footer--team a { flex: none; width: 100%; min-height: 36px; padding: 7px 6px; border-radius: 8px; font-size: .66rem; gap: 5px; box-sizing: border-box; white-space: nowrap; }
    .member-card__footer--team a:first-child { grid-column: 1 / -1; }
    .member-card__footer--team a:last-child:nth-child(even) { grid-column: 1 / -1; }
}