/* SME Discovery CSS */

/* The swipe deck stage.
 *
 * This was a CSS grid of one, two and three columns, which belongs to a
 * different design entirely. The cards it holds are .mtc_usrd_content, and
 * those are position:absolute with height:100%, stacked by :nth-child(1..3)
 * so one card sits on top and two peek out behind it.
 *
 * The two models cannot both be right. A grid lays out in-flow children in
 * columns; absolutely positioned children are out of flow, so the grid had
 * nothing to size itself from and collapsed to zero height, and every card
 * resolved height:100% against that zero. The deck rendered as nothing.
 *
 * Made a positioned stage with a definite height instead, which is what the
 * cards have always needed. The height tracks the same expression the card
 * image uses, plus the action row beneath it. */
.sme-feed-container {
    position: relative;
    display: block;
    height: calc(min(clamp(200px, 54vh, 600px), 128vw) + 84px);
    margin: 90px auto 24px;   /* 90px of room for the two cards peeking above */
    max-width: 460px;
    padding: 0 20px;
}

/* The empty state and the expansion notice are ordinary in-flow content, so
   the stage stops being a fixed-height stage when it is showing one. */
.sme-feed-container:has(.sme-empty-state) {
    height: auto;
    margin-top: 24px;
}

.sme-open-filters {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.sme-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.sme-empty-state h4 {
    margin: 15px 0 5px;
    font-size: 20px;
}
.sme-empty-state p {
    color: #666;
    margin-bottom: 20px;
}
.sme-empty-state .btn {
    background: linear-gradient(135deg, #c649b8, #8b42c8);
    color: #fff;
    border: none;
}

.sme-expansion-banner {
    background: rgba(198,73,184,0.1);
    border-left: 4px solid #c649b8;
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sme-travel-panel {
    padding: 24px;
    background: var(--bg-color, #fff);
}

.sme-city-search {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 16px;
}

.sme-city-dropdown {
    position: absolute;
    width: calc(100% - 40px);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}
.sme-city-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.sme-city-item:hover {
    background: #f5f5f5;
}

.sme-duration-select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.sme-enable-travel, .sme-travel-disable, .sme-travel-city {
    margin: 10px 0;
}

.sme-skip {
    color: #999;
    cursor: pointer;
    font-size: 14px;
}
.sme-skip:hover {
    text-decoration: underline;
}

.sme-wizard-step {
    padding: 20px;
}
.sme-wizard-progress {
    width: 100%;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    margin: 20px 0;
}
.sme-wizard-bar {
    height: 100%;
    background: linear-gradient(135deg, #c649b8, #8b42c8);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.sme-wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.sme-premium-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: gold;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- "It's a match" celebration ---------------------------------------
 *
 * Replaces a four-rule stub that targeted .avatars and .actions, class names
 * the markup no longer uses, and which was never shown because nothing called
 * the function that rendered it.
 *
 * The two avatars fly in from opposite edges and meet in the middle, the heart
 * between them pops on arrival, and the reasons fade up underneath. Everything
 * is transform and opacity so it stays on the compositor; nothing here animates
 * width, height or top, which is what makes this kind of overlay stutter on a
 * mid-range phone.
 */

body.sme-match-open { overflow: hidden; }

.sme-match-celebration {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 0%,
                rgba(var(--sme-brand-rgb, 163, 38, 84), .92) 0%,
                rgba(12, 8, 16, .95) 70%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    opacity: 0;
    transition: opacity .26s ease;
}
.sme-match-celebration.is-open { opacity: 1; }
.sme-match-celebration:focus { outline: none; }

.sme-match__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    text-align: center;
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: transform .34s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
}
.sme-match-celebration.is-open .sme-match__inner {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.sme-match__kicker {
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .82;
}

.sme-match__title {
    margin: 0;
    font-size: clamp(2rem, 8vw, 2.9rem);
    font-weight: 800;
    line-height: 1.05;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

.sme-match__sub {
    margin: 10px 0 0;
    font-size: 1rem;
    opacity: .9;
}

/* ---- avatars ---------------------------------------------------------- */

.sme-match__avatars {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 28px 0 22px;
}

.sme-match__avatar {
    display: block;
    width: clamp(88px, 26vw, 124px);
    height: clamp(88px, 26vw, 124px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .92);
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6);
    background: rgba(255, 255, 255, .12);
    opacity: 0;
}
.sme-match__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sme-match-celebration.is-open .sme-match__avatar--me {
    animation: sme-match-in-left .52s cubic-bezier(.2, .9, .3, 1.25) .06s forwards;
}
.sme-match-celebration.is-open .sme-match__avatar--them {
    animation: sme-match-in-right .52s cubic-bezier(.2, .9, .3, 1.25) .06s forwards;
}

@keyframes sme-match-in-left {
    from { opacity: 0; transform: translateX(-58px) rotate(-9deg); }
    to   { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes sme-match-in-right {
    from { opacity: 0; transform: translateX(58px) rotate(9deg); }
    to   { opacity: 1; transform: translateX(0) rotate(0); }
}

/* The heart lands after the avatars have met, not with them. */
.sme-match__spark {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: #fff;
    color: var(--sme-brand-500, #E64980);
    font-size: 22px;
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scale(.2);
}
.sme-match-celebration.is-open .sme-match__spark {
    animation: sme-match-pop .42s cubic-bezier(.2, 1.5, .4, 1) .46s forwards;
}
@keyframes sme-match-pop {
    from { opacity: 0; transform: scale(.2); }
    60%  { opacity: 1; transform: scale(1.18); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- why you matched --------------------------------------------------- */

.sme-match__reasons {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.sme-match__reasons li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: .82rem;
    font-weight: 600;
    opacity: 0;
    animation: sme-match-rise .4s ease forwards;
}
.sme-match-celebration.is-open .sme-match__reasons li:nth-child(1) { animation-delay: .58s; }
.sme-match-celebration.is-open .sme-match__reasons li:nth-child(2) { animation-delay: .66s; }
.sme-match-celebration.is-open .sme-match__reasons li:nth-child(3) { animation-delay: .74s; }
.sme-match__reasons i { font-size: 1rem; opacity: .9; }

@keyframes sme-match-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- actions ----------------------------------------------------------- */

.sme-match__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sme-match__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sme-match__btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.sme-match__btn--primary {
    background: #fff;
    color: var(--sme-brand-700, #A32654);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55);
}
.sme-match__btn--primary:hover {
    transform: translateY(-2px);
    color: var(--sme-brand-700, #A32654);
}
.sme-match__btn--ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}
.sme-match__btn--ghost:hover { background: rgba(255, 255, 255, .22); }

/* ---- floating hearts --------------------------------------------------- */

.sme-match__hearts {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.sme-match__hearts i {
    position: absolute;
    bottom: -8%;
    left: calc(var(--i) * 7.1%);
    color: rgba(255, 255, 255, .3);
    font-size: calc(12px + (var(--i) * 1.4px));
    opacity: 0;
}
.sme-match-celebration.is-open .sme-match__hearts i {
    animation: sme-match-float 4.6s linear infinite;
    animation-delay: calc(var(--i) * .28s);
}
@keyframes sme-match-float {
    0%   { opacity: 0;   transform: translateY(0) scale(.7) rotate(0); }
    12%  { opacity: .55; }
    80%  { opacity: .25; }
    100% { opacity: 0;   transform: translateY(-104vh) scale(1.1) rotate(28deg); }
}

/* Motion is decoration here. With it reduced the celebration still appears in
   full, it simply arrives rather than flies, and the hearts stay still. */
@media (prefers-reduced-motion: reduce) {
    .sme-match-celebration,
    .sme-match__inner { transition: opacity .01s linear; }
    .sme-match-celebration.is-open .sme-match__avatar--me,
    .sme-match-celebration.is-open .sme-match__avatar--them,
    .sme-match-celebration.is-open .sme-match__spark,
    .sme-match-celebration.is-open .sme-match__reasons li {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .sme-match-celebration.is-open .sme-match__hearts i { animation: none; opacity: 0; }
    .sme-match__inner { transform: none; }
}

@media (min-width: 480px) {
    .sme-match__actions { flex-direction: row; justify-content: center; }
    .sme-match__btn { min-width: 168px; }
}







.sme-verified-badge {
    color: #2196f3;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
}

/* Dark Mode Support */
[data-sme-theme='dark'] .sme-travel-panel,
[data-sme-theme='dark'] .sme-city-dropdown {
    background: #1c1c2e;
    color: #fff;
}
[data-sme-theme='dark'] .sme-city-item:hover {
    background: #2a2a40;
}


@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==========================================================================
   Filter drawer, overlay, location modal
   ==========================================================================
   These had no styles at all. filter-drawer.php rendered its markup straight
   into the page, so the drawer appeared as an unstyled block in the middle of
   the discovery feed and the Filters button did nothing visible. The
   JavaScript was also toggling .sme-filter-drawer while the template renders
   .sme-drawer, so even the class it set landed on nothing.
   ========================================================================== */

.sme-drawer {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    width: min(420px, 92vw);
    max-width: 92vw;
    background: var(--sme-surface, #fff);
    box-shadow: -20px 0 60px -24px rgba(0,0,0,.45);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    /* Off-canvas until opened. translate rather than display:none so it slides
       and so the contents keep their measured size. */
    transform: translateX(100%);
    transition: transform .28s ease;
    overscroll-behavior: contain;
}
.sme-drawer.open { transform: translateX(0); }
[dir="rtl"] .sme-drawer { transform: translateX(-100%); }
[dir="rtl"] .sme-drawer.open { transform: translateX(0); }

.sme-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sme-border, #e8e6ee);
    flex: 0 0 auto;
}
.sme-drawer-header h5 { margin: 0; font-size: 1.0625rem; font-weight: 700; }

.sme-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 24px;
}

.sme-drawer-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--sme-border, #e8e6ee);
}

.sme-close-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sme-border, #e8e6ee);
    background: var(--sme-surface, #fff);
    color: var(--sme-text, #1d1d24);
    border-radius: 12px;
    cursor: pointer;
    flex: 0 0 auto;
}
.sme-close-btn i { font-size: 1.375rem; }

/* One overlay serves the drawer and the location modal. Both templates render
   their own, which is why two exist in the DOM; hidden until something opens. */
.sme-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,10,18,.55);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.sme-filter-overlay.open { opacity: 1; visibility: visible; }

.sme-filter-section { margin-bottom: 22px; }
.sme-filter-section h6 {
    font-size: .75rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sme-text-muted, #5d5d6b);
    margin: 0 0 10px;
}

.sme-chips-container { display: flex; flex-wrap: wrap; gap: 8px; }
.sme-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 9px 15px;
    border: 1.5px solid var(--sme-border, #e8e6ee);
    border-radius: 999px;
    font-size: .875rem; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sme-chip:hover { border-color: var(--sme-primary, #a32654); }
.sme-chip.active {
    background: var(--sme-primary, #a32654);
    border-color: var(--sme-primary, #a32654);
    color: #fff;
}
.sme-chip.locked { opacity: .55; cursor: not-allowed; }

.sme-range-display { font-weight: 700; margin-bottom: 6px; }
.sme-drawer input[type="range"],
.sme-wizard-step input[type="range"] { width: 100%; }

/* Location modal, same treatment: it had no styles either. */
.sme-location-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 92vw);
    background: var(--sme-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.5);
    z-index: 1002;
    padding: 24px;
}

body.night_mode .sme-drawer,
body.night_mode .sme-location-modal { background: #17121b; }
body.night_mode .sme-close-btn { background: #17121b; color: #f2eef4; }

/* The drawer body scrolls vertically only. It was defaulting to overflow-x
   auto, so a wide child (the premium upsell button) pushed content sideways
   and its label rendered one character per line down the right edge. */
.sme-drawer-body { overflow-x: hidden; }
.sme-drawer-body * { max-width: 100%; }
.sme-drawer-body p,
.sme-drawer-body h6 { overflow-wrap: anywhere; }
/* Scoped to the drawer, because .sme-premium-lock is used for two unrelated
   things in this module: an absolutely positioned gold badge on a card, and
   this upsell panel. The card version is position:absolute and display:flex at
   34px wide, which collapsed the paragraph here to zero width and wrapped the
   sentence one character per line down the edge of the drawer. The card badge
   is left exactly as it was. */
.sme-drawer .sme-premium-lock {
    position: static;
    display: block;
    width: 100%;
    background: var(--sme-bg, #faf8fb);
    color: inherit;
    border-radius: 14px;
    text-align: center;
    padding: 18px 16px;
}
.sme-drawer .sme-premium-lock i { font-size: 1.75rem; color: var(--sme-primary, #a32654); }
.sme-drawer .sme-premium-lock p {
    font-size: .875rem; color: var(--sme-text-muted, #5d5d6b);
    margin: 8px 0 0; width: auto;
}

/* Why this person was suggested. These carry the engine's explanation, which
   is the one place the matching explains itself to a member. */
.sme-match-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sme-match-reason {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--sme-brand-soft, #fff0f6);
    color: var(--sme-primary-dark, #a32654);
    font-size: .75rem; font-weight: 600;
}
.sme-match-reason i { font-size: .875rem; }

/* ==========================================================================
   Discovery: visual pass
   ==========================================================================
   The drawer worked but read as a form dump: unlabelled slider tracks, chips
   with no sense of state, and a footer that looked like two more links. These
   rules give it the same weight as the rest of the product and, more usefully,
   make the current state legible at a glance, which is the whole job of a
   filter panel.
   ========================================================================== */

.sme-drawer { border-start-start-radius: 20px; border-end-start-radius: 20px; }

.sme-drawer-header {
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--sme-primary-dark, #a32654), var(--sme-primary, #a32654));
    color: #fff;
    border-bottom: 0;
}
.sme-drawer-header h5 { color: #fff; letter-spacing: -.01em; }
.sme-drawer-header .sme-close-btn {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}
.sme-drawer-header .sme-close-btn:hover { background: rgba(255,255,255,.28); }

.sme-drawer-body { padding: 20px 22px 28px; }

.sme-filter-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sme-border, #e8e6ee);
}
.sme-filter-section:last-child { border-bottom: 0; margin-bottom: 0; }
.sme-filter-section h6 {
    display: flex; align-items: center; gap: 7px;
    font-size: .6875rem; letter-spacing: .1em; margin-bottom: 12px;
}

/* Chips carry state through weight and a mark, not colour alone, so the
   selection is still readable without colour vision. */
.sme-chip { position: relative; padding: 10px 16px; }
.sme-chip i { font-size: 1rem; opacity: .75; }
.sme-chip.active { font-weight: 700; box-shadow: 0 6px 16px -8px rgba(163,38,84,.9); }
.sme-chip.active i { opacity: 1; }
.sme-chip.active::after {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; margin-inline-start: 2px;
}
.sme-chip.locked { position: relative; }
.sme-chip.locked::before {
    content: '\f33e';
    font-family: 'Phosphor', sans-serif;
    margin-inline-end: 4px; opacity: .7;
}

/* Range rows. A bare track told the member nothing about what the number
   meant; the value now reads as the answer and the track as the control. */
.sme-range-display {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--sme-primary-dark, #a32654);
    margin-bottom: 10px;
}
.sme-range-display span:not(:first-child) { font-size: .875rem; font-weight: 600; color: var(--sme-text-muted, #5d5d6b); }

.sme-drawer input[type="range"] {
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 999px;
    background: var(--sme-border, #e8e6ee);
    outline: none; margin: 8px 0 4px;
}
.sme-drawer input[type="range"]::-webkit-slider-thumb,
.sme-wizard-step input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sme-primary, #a32654);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(163,38,84,.5);
    cursor: pointer;
}
.sme-drawer input[type="range"]::-moz-range-thumb,
.sme-wizard-step input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sme-primary, #a32654);
    border: 3px solid #fff; cursor: pointer;
}

.sme-drawer select.browser-default {
    height: 48px !important; font-size: 16px !important;
    border-radius: 12px !important; padding: 0 14px !important;
    width: 100% !important;
}

/* Footer actions read as a decision, not two more links. */
.sme-drawer-footer {
    padding: 16px 22px 20px;
    background: var(--sme-surface, #fff);
    box-shadow: 0 -8px 24px -18px rgba(0,0,0,.5);
}
.sme-drawer-footer .sme-reset-filters,
.sme-drawer-footer .sme-apply-filters {
    min-height: 48px; border-radius: 999px;
    font-weight: 700; font-size: .9375rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border: 0; flex: 1 1 auto;
}
.sme-drawer-footer .sme-reset-filters {
    background: transparent; color: var(--sme-text-muted, #5d5d6b);
    border: 1.5px solid var(--sme-border, #e8e6ee); flex: 0 0 auto; padding: 0 22px;
}
.sme-drawer-footer .sme-apply-filters {
    background: linear-gradient(135deg, var(--sme-primary-dark, #a32654), var(--sme-primary, #a32654));
    color: #fff; box-shadow: 0 10px 24px -12px rgba(163,38,84,.85);
}

.sme-premium-lock {
    border: 1.5px dashed var(--sme-border, #e8e6ee);
    border-radius: 14px; background: var(--sme-bg, #faf8fb);
}

@media (max-width: 480px) {
    .sme-drawer { width: 100vw; max-width: 100vw; border-radius: 0; }
    .sme-drawer-body { padding: 18px 16px 24px; }
    .sme-drawer-header, .sme-drawer-footer { padding-inline: 16px; }
}

/* ==========================================================================
   Travel mode and first-run setup: closed by default
   ==========================================================================
   Neither container had any CSS, so both rendered as plain blocks in the middle
   of the discovery page: a "Search destination city" box and an "Enable Travel
   Mode" button sat permanently between the filter rail and the feed, and the
   setup wizard did the same. They are things a member opens deliberately, not
   furniture.
   ========================================================================== */

/* Travel mode collapses to nothing until opened from its trigger. The active
   banner is the exception: if travel mode is ON, the member needs to see that
   without opening anything, because it changes who they are shown. */
.sme-travel-container { display: none; }
.sme-travel-container.open { display: block; }
.sme-travel-container .sme-active-travel-banner { display: flex; }
.sme-travel-container:not(.open) .sme-active-travel-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: var(--sme-brand-50, #fff0f6);
    border: 1px solid var(--sme-brand, #a32654);
    font-size: .875rem;
}
/* When travel mode is active the container shows, but only the banner. */
.sme-travel-container:has(.sme-active-travel-banner) { display: block; }
.sme-travel-container:has(.sme-active-travel-banner):not(.open) > *:not(.sme-active-travel-banner) { display: none; }

.sme-travel-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 18px;
    border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--sme-border, #e8e6ee);
    background: var(--sme-surface, #fff);
    color: var(--sme-text, #1d1d24);
    font-size: .9375rem; font-weight: 650;
}
.sme-travel-trigger:hover { border-color: var(--sme-brand, #a32654); color: var(--sme-brand, #a32654); }
.sme-travel-trigger i { font-size: 1.25rem; }

.sme-travel-container.open {
    padding: 18px;
    margin: 14px 0 20px;
    border: 1px solid var(--sme-border, #e8e6ee);
    border-radius: 16px;
    background: var(--sme-surface, #fff);
}

/* First-run setup is a modal. It is shown once, it asks questions that decide
   the whole feed, and it should not be something a member scrolls past. */
.sme-wizard-container {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 94vw);
    max-height: 88vh; overflow-y: auto;
    background: var(--sme-surface, #fff);
    border-radius: 18px;
    box-shadow: 0 30px 90px -30px rgba(0,0,0,.55);
    z-index: 1200;
    padding: 26px 24px;
}
.sme-wizard-container.open { display: block; }
.sme-wizard-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(20,10,18,.6); z-index: 1199;
}
.sme-wizard-backdrop.open { display: block; }

/* An age range is two equal values, not a value and a unit.
   The shared .sme-range-display rule shrinks everything after the first span,
   which is right for "50 km" and wrong for "18 - 99": it rendered the maximum
   at 14px beside a 22px minimum, as though the second number mattered less. */
.sme-wizard-step .sme-range-display { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; white-space: nowrap; }
.sme-wizard-step .sme-range-display span { font-size: 1.375rem; font-weight: 800; color: var(--sme-brand, #a32654); }

/* ==========================================================================
   Dual-handle range: one track, two handles
   ==========================================================================
   Two stacked <input type="range"> rows read as two unrelated controls and took
   twice the height for a single idea. Both inputs now sit on the same rail with
   the selected span painted between them.

   The inputs keep their native behaviour, so keyboard, screen readers and touch
   all work as they already did; only the presentation is stacked.
   ========================================================================== */

.sme-dual-range {
    position: relative;
    height: 34px;
    margin: 6px 0 4px;
    display: block;
}

.sme-dual-range__rail,
.sme-dual-range__fill {
    position: absolute;
    top: 50%;
    height: 6px;
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
}
.sme-dual-range__rail { left: 0; right: 0; background: var(--sme-border, #e8e6ee); }
.sme-dual-range__fill { background: var(--sme-brand, #a32654); left: 0; right: 0; }

/* Both inputs occupy the same box. Pointer events are disabled on the track and
   re-enabled on the thumb, so whichever handle is under the finger receives the
   drag instead of the topmost input swallowing everything. */
.sme-dual-range input[type="range"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 34px;
    margin: 0;
    background: none !important;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.sme-dual-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent; border: 0; height: 34px;
}
.sme-dual-range input[type="range"]::-moz-range-track { background: transparent; border: 0; }

.sme-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    pointer-events: auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sme-brand, #a32654);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(163,38,84,.45);
    cursor: grab;
    margin-top: 6px;
}
.sme-dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sme-brand, #a32654);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(163,38,84,.45);
    cursor: grab;
}
.sme-dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 3px solid var(--sme-brand, #a32654); outline-offset: 2px;
}

/* Value readout. The dash is quieter than the numbers so the pair reads as one
   range rather than three separate things. */
.sme-range-display em {
    font-style: normal;
    font-weight: 600;
    opacity: .5;
    font-size: .875em;
}

/* Step titles were rendering at the page h3 size, which in a 520px modal made
   "Who would you like to meet?" wrap to three lines and pushed the controls
   below the fold. */
.sme-wizard-step h3 {
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.sme-wizard-step p {
    font-size: .9375rem;
    color: var(--sme-text-muted, #5d5d6b);
    margin: 0 0 18px;
    line-height: 1.5;
}
@media (max-width: 480px) {
    .sme-wizard-step h3 { font-size: 1.1875rem; }
}

/* ==========================================================================
   Setup wizard: option cards and the distance step
   ==========================================================================
   .sme-card-selector and .sme-cards-container had no styles at all, so the
   goal options rendered as six plain lines of text with nothing to indicate
   they were selectable, let alone selected. Same for the distance step, whose
   value, unit and scope chip stacked as three unrelated lines.
   ========================================================================== */

.sme-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.sme-card-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 16px;
    border: 1.5px solid var(--sme-border, #e8e6ee);
    border-radius: 14px;
    background: var(--sme-surface, #fff);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sme-card-selector:hover { border-color: var(--sme-brand, #a32654); }

/* Selected state carries a tick as well as colour, so it survives a colour
   vision difference and reads at a glance on a multi-select step. */
.sme-card-selector.selected {
    border-color: var(--sme-brand, #a32654);
    background: var(--sme-brand-50, #fff0f6);
    color: var(--sme-brand, #a32654);
    font-weight: 700;
}
.sme-card-selector.selected::before {
    content: '';
    width: 18px; height: 18px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--sme-brand, #a32654);
    /* white check, drawn rather than iconfont so it cannot fail to load */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.sme-card-selector.selected:hover { background: var(--sme-brand-100, #ffd6e8); }

/* Distance step: value, unit and scope on one line each doing its own job. */
.sme-wizard-step .sme-range-display + .sme-dual-range,
.sme-wizard-step .sme-range-display + input[type="range"] { margin-top: 2px; }

.sme-wizard-step .sme-scope-row {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}

/* The location step's two actions read as a primary and a quieter alternative,
   rather than a button and a stray link. */
.sme-setup-enable-location {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 13px 24px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, var(--sme-brand-800, #7c1a3e), var(--sme-brand, #a32654));
    color: #fff; font-weight: 700; font-size: .9375rem;
    box-shadow: 0 10px 24px -12px rgba(163,38,84,.85);
}
.sme-setup-manual-location {
    display: inline-block; margin-top: 12px;
    color: var(--sme-text-muted, #5d5d6b);
    text-decoration: underline; cursor: pointer; font-size: .9375rem;
}
.sme-setup-manual-location:hover { color: var(--sme-brand, #a32654); }

/* ==========================================================================
   Manual city search
   ========================================================================== */
.sme-city-search-panel {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--sme-surface, #fff);
    padding: 18px 18px 0;
    display: flex; flex-direction: column;
}
.sme-city-search-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex: 0 0 auto;
}
.sme-city-search-head h5 { margin: 0; font-size: 1.125rem; font-weight: 700; }

.sme-city-search {
    width: 100%; height: 52px;
    /* 16px, or iOS zooms the viewport on focus and does not zoom back. */
    font-size: 16px !important;
    padding: 0 16px !important;
    border: 1.5px solid var(--sme-border, #e8e6ee) !important;
    border-radius: 12px !important;
    background: var(--sme-surface, #fff) !important;
    flex: 0 0 auto;
}
.sme-city-search:focus { border-color: var(--sme-brand, #a32654) !important; }
.sme-city-hint { font-size: .8125rem; color: var(--sme-text-muted, #5d5d6b); margin: 8px 2px 10px; flex: 0 0 auto; }

/* Overrides the earlier .sme-city-dropdown rule, which is position:absolute
   with a fixed max-height. That was written for a dropdown hanging under an
   inline input; in the full-screen panel it floated over the search field and
   covered it. Here it is simply the panel's scrolling region. */
.sme-city-search-panel .sme-city-dropdown {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sme-city-item {
    display: flex; align-items: center; gap: 9px;
    min-height: 52px; padding: 13px 14px;
    border-radius: 12px; cursor: pointer;
    font-size: .9375rem;
    border-bottom: 1px solid var(--sme-border, #e8e6ee);
}
.sme-city-item:hover { background: var(--sme-brand-50, #fff0f6); color: var(--sme-brand, #a32654); }
.sme-city-item i { font-size: 1.25rem; color: var(--sme-brand, #a32654); flex: 0 0 auto; }
.sme-city-item em {
    margin-inline-start: auto; font-style: normal; font-size: .6875rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sme-brand, #a32654);
    background: var(--sme-brand-50, #fff0f6);
    padding: 3px 8px; border-radius: 999px;
}
.sme-city-item--suggested { background: var(--sme-brand-50, #fff0f6); }
.sme-city-item.is-saving { opacity: .5; pointer-events: none; }
.sme-city-empty { padding: 16px 14px; color: var(--sme-text-muted, #5d5d6b); font-size: .9375rem; }

/* ==========================================================================
   Wizard steps 6 to 10
   ==========================================================================
   None of these had styles, so interests, lifestyle, deal-breakers, the privacy
   summary and the final screen all rendered as unstyled runs of text.
   ========================================================================== */

.sme-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.sme-quick-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 10px;
}

.sme-privacy-info {
    background: var(--sme-bg, #faf8fb);
    border: 1px solid var(--sme-border, #e8e6ee);
    border-radius: 14px;
    padding: 16px 18px;
    margin: 0;
    list-style: none;
}
.sme-privacy-info li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 7px 0; font-size: .9375rem; line-height: 1.5;
    color: var(--sme-text-muted, #5d5d6b);
}
.sme-privacy-info li::before {
    content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
    background: var(--sme-brand, #a32654);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
}

.sme-summary {
    background: var(--sme-brand-50, #fff0f6);
    border: 1px solid var(--sme-brand, #a32654);
    border-radius: 14px; padding: 18px; margin-bottom: 8px;
    font-size: .9375rem; line-height: 1.6;
}

/* Deal-breakers are switches. Materialize styles .lever, but the rows around
   them had no layout, so label and control ran together. */
.sme-wizard-step .switch { display: block; padding: 11px 0; }
.sme-wizard-step .switch label {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; font-size: .9375rem; font-weight: 600;
    color: var(--sme-text, #1d1d24);
}

/* Empty feed. It has to explain itself and offer the way out, because the most
   common cause is a filter the member set and forgot. */
.sme-empty-state {
    text-align: center;
    padding: 44px 24px;
    grid-column: 1 / -1;
}
.sme-empty-state i { font-size: 3rem; color: var(--sme-brand, #a32654); opacity: .6; }
.sme-empty-state h4 { margin: 14px 0 6px; font-size: 1.125rem; font-weight: 700; }
.sme-empty-state p { color: var(--sme-text-muted, #5d5d6b); margin: 0 0 18px; font-size: .9375rem; }
.sme-empty-state .btn {
    background: linear-gradient(135deg, var(--sme-brand-800, #7c1a3e), var(--sme-brand, #a32654)) !important;
    border-radius: 999px !important; min-height: 46px; padding: 0 26px !important;
}

/* Whole-photo profile link.
 *
 * The discovery card only ever made the name text clickable, so the card read
 * as inert: people click the picture. This covers the image area and sits
 * below .mtc_usrd_top (z-index 9) and .card-content (z-index 10), so the name
 * link and the info activator still receive their own clicks. The like, pass
 * and superlike buttons live in .mtc_usrd_actions, a sibling of .card-image,
 * so they are never covered by this. */
.mtc_usrd_content .mtc_usrd_slider .card-image .sme-card-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    display: block;
    border-radius: 7px 7px 0 0;
    /* No visual of its own. The card already shows what it links to. */
    background: transparent;
    text-decoration: none;
}

.mtc_usrd_content .mtc_usrd_slider .card-image .sme-card-link:focus-visible {
    outline: 3px solid var(--sme-brand, #a32654);
    outline-offset: -3px;
}

/* Keyboard and pointer affordance on the card as a whole. */
.mtc_usrd_content .mtc_usrd_slider .card-image {
    cursor: pointer;
}

/* The name/location gradient is decorative and covers most of the photo, so
 * it was swallowing clicks meant for the card link beneath it. Let pointers
 * pass through the panel itself while its real controls keep receiving them. */
.mtc_usrd_content .mtc_usrd_top {
    pointer-events: none;
}

.mtc_usrd_content .mtc_usrd_top a,
.mtc_usrd_content .mtc_usrd_top button,
.mtc_usrd_content .mtc_usrd_top [onclick] {
    pointer-events: auto;
}

/* ---- Swipe actions -----------------------------------------------------
 *
 * Replaces three flat 48px circles in material green, red and blue. Those
 * predated the dark pink theme and fought it on the one screen a member spends
 * most of their time on, and all three carried identical visual weight so
 * nothing said which action was the main one.
 *
 * Icons are Phosphor Fill rather than the thin inline paths that were here.
 * The font is already loaded for the rest of the interface, so this adds no
 * request, and a filled glyph holds up far better inside a coloured circle than
 * a 1.5px stroke does.
 *
 * Hierarchy is deliberate: like is the largest and is the only one carrying the
 * brand gradient, superlike sits in amber because it has to read as a different
 * kind of action rather than a stronger like, and pass is the quietest thing on
 * the row. Passing is the most common action and should never feel like the
 * loudest one. */

.sme-action-btn {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .22s ease,
                filter .22s ease;
}

.sme-action-btn i {
    font-size: 26px;
    line-height: 1;
    position: relative;
    z-index: 2;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

/* Screen reader name for a control whose entire label is an icon. These
 * buttons had no accessible name at all: to a screen reader the row was three
 * unlabelled buttons, so the primary interaction of the product was unusable
 * without sight. */
.sme-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Tap burst. Scales out from under the icon on press, so the action is
 * acknowledged on the button itself rather than only by the card leaving. */
.sme-action-btn__burst {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transform: scale(.35);
    pointer-events: none;
    background: currentColor;
}

.sme-action-btn:active .sme-action-btn__burst {
    animation: sme-action-burst .42s ease-out;
}

@keyframes sme-action-burst {
    0%   { opacity: .30; transform: scale(.35); }
    70%  { opacity: .08; transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(1.9); }
}

.sme-action-btn:hover  { transform: translateY(-3px); }
.sme-action-btn:active { transform: translateY(-1px) scale(.94); }
.sme-action-btn:hover i { transform: scale(1.08); }

.sme-action-btn:focus-visible {
    outline: 3px solid var(--sme-brand, #a32654);
    outline-offset: 3px;
}

/* ---- Swipe action buttons ---------------------------------------------
 *
 * Tinder's convention, because it is the one people already know: a white
 * circle with a coloured glyph, not a coloured circle. Rewind gold, pass red,
 * super like blue, like green. Somebody arriving from another dating app reads
 * this row without being taught it, and the colours carry the meaning even at a
 * glance in peripheral vision while the thumb is moving.
 *
 * This is the one place the dark pink theme deliberately does not apply. Making
 * every control brand-coloured would remove the only distinction between the
 * three actions, and on the screen where a member makes hundreds of decisions
 * that distinction matters more than brand consistency does.
 *
 * The glyph carries the colour; the circle stays the theme surface so the row
 * still belongs to the page in dark mode.
 */

.sme-action-btn {
    background: var(--sme-surface, #fff);
    box-shadow: 0 4px 14px -4px rgba(16, 16, 24, .30),
                inset 0 0 0 1px rgba(16, 16, 24, .07);
}

/* Rewind. Premium; shown disabled rather than hidden so the feature is
   discoverable, which is the whole point of putting it in the row. */
.sme-action-rewind {
    width: 46px;
    height: 46px;
    color: #FBAD1F;
}
.sme-action-rewind i { font-size: 20px; }
.sme-action-rewind[disabled],
.sme-action-rewind.is-locked {
    opacity: .45;
    cursor: not-allowed;
}

.sme-action-pass {
    width: 54px;
    height: 54px;
    color: #FE3C72;
}
.sme-action-pass i { font-size: 24px; }
.sme-action-pass:hover {
    box-shadow: 0 10px 24px -6px rgba(254, 60, 114, .45),
                inset 0 0 0 1px rgba(254, 60, 114, .30);
}

.sme-action-superlike {
    width: 46px;
    height: 46px;
    color: #21D0F5;
}
.sme-action-superlike i { font-size: 20px; }
.sme-action-superlike:hover {
    box-shadow: 0 10px 24px -6px rgba(33, 208, 245, .45),
                inset 0 0 0 1px rgba(33, 208, 245, .30);
}

.sme-action-like {
    width: 54px;
    height: 54px;
    color: #24E5A0;
}
.sme-action-like i { font-size: 24px; }
.sme-action-like:hover {
    box-shadow: 0 10px 24px -6px rgba(36, 229, 160, .45),
                inset 0 0 0 1px rgba(36, 229, 160, .30);
}

/* Boost. Premium, same treatment as rewind. */
.sme-action-boost {
    width: 46px;
    height: 46px;
    color: #9C4DFF;
}
.sme-action-boost i { font-size: 20px; }

/* Dark mode keeps the glyph colours, which are already bright enough against a
   dark surface, and only the circle changes. */
[data-sme-theme='dark'] .sme-action-btn {
    background: var(--sme-surface, #1A2332);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6),
                inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Row layout. Like sits centre and slightly proud of the other two. */
.sme-swipe-actions,
.mtc_usrd_actions.sme-swipe-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Only the shadow and the muted text need restating in dark mode. The
 * background now comes from --sme-surface, which the token file already
 * switches, so repeating a hardcoded panel colour here would just be a
 * second place to keep in sync. */
[data-sme-theme='dark'] .sme-action-pass {
    color: var(--sme-text-muted, #a6a6b8);
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6),
                inset 0 0 0 1px rgba(255, 255, 255, .07);
}
[data-sme-theme='dark'] .sme-action-pass:hover { color: var(--sme-text, #d6d6e4); }

/* Honour a system preference for less movement. The burst and the lift are
 * decoration; the colour and focus ring still carry every state. */
@media (prefers-reduced-motion: reduce) {
    .sme-action-btn,
    .sme-action-btn i { transition: none; }
    .sme-action-btn:hover,
    .sme-action-btn:active { transform: none; }
    .sme-action-btn:active .sme-action-btn__burst { animation: none; }
}

@media (max-width: 400px) {
    .sme-swipe-actions { gap: 14px; }
    .sme-action-like { width: 58px; height: 58px; }
    .sme-action-like i { font-size: 27px; }
    .sme-action-pass,
    .sme-action-superlike { width: 48px; height: 48px; }
    .sme-action-pass i,
    .sme-action-superlike i { font-size: 21px; }
}

/* Loading placeholder for the feed.
 *
 * Matches the real card's responsive height exactly, so the placeholder and the
 * card that replaces it are the same size and the page does not jump when the
 * feed arrives. Takes its colour from the theme surface rather than a fixed
 * grey, which used to flash pale blocks on a dark page. */
.sme-skeleton-card {
    height: min(clamp(200px, 54vh, 600px), 128vw);
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--sme-surface-input, #eee);
    position: relative;
    overflow: hidden;
}

/* A sheen passing over the block, rather than the whole card pulsing. Pulsing
 * opacity on a large surface is the version of this that people find
 * uncomfortable to look at. */
.sme-skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, .14),
                transparent);
    animation: sme-skeleton-sheen 1.6s infinite;
}

@keyframes sme-skeleton-sheen {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .sme-skeleton-card::after { animation: none; }
}

/* ---- Swipe gestures ----------------------------------------------------
 *
 * The deck previously had buttons and no gesture handling at all. These rules
 * cover the drag itself: the card must not transition while a finger is on it
 * (that fights the pointer and feels like lag), and must transition when the
 * finger lets go so it either flies away or springs back.
 */

.mtc_usrd_content.is-dragging {
    transition: none !important;
    cursor: grabbing;
    z-index: 5;
}

.mtc_usrd_content:first-child {
    cursor: grab;
    /* Vertical panning stays with the browser so the page can still scroll;
       horizontal is ours. Without this the browser claims the gesture and the
       card only moves after a delay, if at all. */
    touch-action: pan-y;
}

/* The stamps. Direction is set by the script as data-swipe, so one element
   serves all three states and there is nothing to keep in sync. */
/* No content here on purpose. This block is shared styling only; each
   direction sets its own text below. Declaring content here as well made
   this rule the more specific of the two (the :not() counts), so it won
   the cascade and every stamp rendered empty. */
.mtc_usrd_content[data-swipe="like"]::before,
.mtc_usrd_content[data-swipe="pass"]::before,
.mtc_usrd_content[data-swipe="super"]::before {
    position: absolute;
    /* Clears the "Liked you" badge, which sits at top-left. At 28px the
       stamp landed straight on top of it. */
    top: 62px;
    z-index: 12;
    padding: 8px 16px;
    border-radius: 10px;
    border: 4px solid currentColor;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: .95;
}

.mtc_usrd_content[data-swipe="like"]::before {
    content: 'LIKE';
    left: 24px;
    color: #12B76A;
    transform: rotate(-14deg);
}
.mtc_usrd_content[data-swipe="pass"]::before {
    content: 'NOPE';
    right: 24px;
    color: #E5484D;
    transform: rotate(14deg);
}
.mtc_usrd_content[data-swipe="super"]::before {
    content: 'SUPER LIKE';
    left: 50%;
    top: auto;
    bottom: 96px;
    color: #F79009;
    transform: translateX(-50%) rotate(-4deg);
}

/* "Liked you" badge.
 *
 * The ranker now lifts people who have already swiped right on this member, so
 * the card has to say why it is at the top. An ordering the member cannot
 * account for reads as the feed being arbitrary. */
.sme-card-likedme {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--sme-brand-rgb, 163, 38, 84), .95);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
}
.sme-card-likedme i { font-size: .9rem; }

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

/* Letter avatar for members with no photo.
 *
 * Almost every account carries the stock silhouette, so a deck of them read as
 * a wall of identical grey people and each image looked like one that had
 * failed to load. The hue comes from the member, so two adjacent cards are
 * never the same colour, and the result is legibly a placeholder rather than a
 * broken photo. */
.carousel-cell.sme-cell-letter {
    display: grid;
    place-items: center;
    background: linear-gradient(150deg,
                hsl(var(--sme-av-hue, 0) 44% 46%),
                hsl(var(--sme-av-hue, 0) 52% 30%));
}

.sme-cell-letter__mark {
    font-size: clamp(3.5rem, 22vw, 7rem);
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 6px 26px rgba(0, 0, 0, .28);
    user-select: none;
}

[data-sme-theme='dark'] .carousel-cell.sme-cell-letter {
    background: linear-gradient(150deg,
                hsl(var(--sme-av-hue, 0) 38% 34%),
                hsl(var(--sme-av-hue, 0) 44% 20%));
}

/* Error state.
 *
 * Shares the empty-state layout but reads as a fault rather than an absence:
 * a failed request is not the member's doing, and it should not look like the
 * same neutral "nothing here" they see when their filters are simply narrow. */
.sme-empty-state--error i {
    color: var(--sme-danger, #E5484D);
}

.sme-empty-state--error .sme-retry-feed {
    margin-top: 14px;
    min-height: 44px;
    padding: 0 24px;
}