/* ==========================================================================
   MingleExtra - shared components
   --------------------------------------------------------------------------
   Component styles built entirely on the variables in sme-tokens.css.
   No literal colours, no !important, no per-page one-offs.

   Scope note: these rules target MingleExtra's own `sme-` classes, so
   they sit alongside the legacy Materialize styles rather than fighting them.
   As legacy screens are migrated they adopt these classes and the matching
   blocks in theme-override.css can be deleted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
.sme-scope,
body {
    font-family: var(--sme-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.sme-display {
    font-family: var(--sme-font-display);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    line-height: var(--sme-leading-tight);
}

.sme-eyebrow {
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    letter-spacing: var(--sme-tracking-wide);
    text-transform: uppercase;
    color: var(--sme-text-muted);
}

/* --------------------------------------------------------------------------
   Focus: one visible, consistent ring everywhere.
   :focus-visible so pointer users do not see rings on click, but keyboard
   users always do.
   -------------------------------------------------------------------------- */
.sme-btn:focus-visible,
.sme-field input:focus-visible,
.sme-field select:focus-visible,
.sme-field textarea:focus-visible,
.sme-nav-link:focus-visible,
.sme-icon-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--sme-ring);
    border-color: var(--sme-brand);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.sme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sme-space-2);
    min-height: var(--sme-tap-target);
    padding: 0 var(--sme-space-5);
    border: 1px solid transparent;
    border-radius: var(--sme-radius-full);
    font-family: var(--sme-font-sans);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                box-shadow var(--sme-duration) var(--sme-ease),
                transform var(--sme-duration-fast) var(--sme-ease);
}
.sme-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.sme-btn--primary {
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    box-shadow: var(--sme-shadow-brand);
}
.sme-btn--primary:hover { background: var(--sme-brand-hover); }
.sme-btn--primary:active { background: var(--sme-brand-active); transform: translateY(1px); }

.sme-btn--secondary {
    background: var(--sme-surface);
    color: var(--sme-text);
    border-color: var(--sme-border-strong);
    box-shadow: var(--sme-shadow-xs);
}
.sme-btn--secondary:hover { background: var(--sme-surface-hover); border-color: var(--sme-brand); color: var(--sme-brand); }
.sme-btn--secondary:active { transform: translateY(1px); }

.sme-btn--ghost { background: transparent; color: var(--sme-text-muted); }
.sme-btn--ghost:hover { background: var(--sme-surface-hover); color: var(--sme-text); }

.sme-btn--danger { background: var(--sme-danger); color: #fff; }
.sme-btn--danger:hover { filter: brightness(0.94); }

.sme-btn--block { width: 100%; }
.sme-btn--lg { min-height: 52px; padding: 0 var(--sme-space-8); font-size: var(--sme-text-base); }
.sme-btn--sm { min-height: 36px; padding: 0 var(--sme-space-4); font-size: var(--sme-text-xs); }

.sme-btn[disabled],
.sme-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Loading state: the label stays for width stability, a spinner replaces it
   visually. Prevents the layout jump that made buttons feel broken. */
.sme-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.sme-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: var(--sme-on-brand);
    border-right-color: var(--sme-on-brand);
    animation: sme-spin 640ms linear infinite;
}
@keyframes sme-spin { to { transform: rotate(360deg); } }

/* Icon-only control. Sized to the minimum comfortable touch target. */
.sme-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sme-tap-target);
    height: var(--sme-tap-target);
    border: none;
    border-radius: var(--sme-radius-full);
    background: transparent;
    color: var(--sme-text-muted);
    cursor: pointer;
    transition: background-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.sme-icon-btn:hover { background: var(--sme-surface-hover); color: var(--sme-brand); }
.sme-icon-btn svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.sme-card {
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    box-shadow: var(--sme-shadow-sm);
    padding: var(--sme-space-6);
    transition: box-shadow var(--sme-duration) var(--sme-ease),
                transform var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease);
}
.sme-card--interactive { cursor: pointer; }
.sme-card--interactive:hover { box-shadow: var(--sme-shadow-md); transform: translateY(-2px); border-color: var(--sme-border-strong); }
.sme-card__title { font-size: var(--sme-text-lg); font-weight: var(--sme-weight-semibold); color: var(--sme-text); margin: 0 0 var(--sme-space-2); }
.sme-card__body  { font-size: var(--sme-text-sm); line-height: var(--sme-leading-normal); color: var(--sme-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Step indicator

   This replaces the block that rendered "AvatarInfoVerification" as one run
   together string. The original relied on absolutely positioned children
   inside a container that lost its width at narrow viewports, so the labels
   collapsed onto each other. A grid with equal columns cannot collapse that
   way at any width.
   -------------------------------------------------------------------------- */
.sme-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    gap: var(--sme-space-2);
    width: 100%;
    max-width: 520px;
    margin: 0 auto var(--sme-space-8);
    padding: 0;
    list-style: none;
    counter-reset: sme-step;
}
.sme-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sme-space-2);
    text-align: center;
    min-width: 0;
}
/* Connector line sits behind the markers and stops at the last item. */
.sme-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--sme-border);
    z-index: 0;
}
.sme-steps__item.is-complete:not(:last-child)::after { background: var(--sme-brand); }

.sme-steps__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sme-radius-full);
    background: var(--sme-surface);
    border: 2px solid var(--sme-border-strong);
    color: var(--sme-text-muted);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    transition: background-color var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.sme-steps__marker svg { width: 16px; height: 16px; }

.sme-steps__item.is-active .sme-steps__marker {
    background: var(--sme-brand);
    border-color: var(--sme-brand);
    color: var(--sme-on-brand);
    box-shadow: var(--sme-ring);
}
.sme-steps__item.is-complete .sme-steps__marker {
    background: var(--sme-brand);
    border-color: var(--sme-brand);
    color: var(--sme-on-brand);
}

.sme-steps__label {
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-medium);
    color: var(--sme-text-muted);
    line-height: var(--sme-leading-snug);
    /* Long translations wrap instead of overflowing into the next column. */
    overflow-wrap: break-word;
}
.sme-steps__item.is-active .sme-steps__label { color: var(--sme-text); font-weight: var(--sme-weight-semibold); }

/* --------------------------------------------------------------------------
   Modal / dialog
   -------------------------------------------------------------------------- */
.sme-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sme-space-4);
    background: var(--sme-overlay);
    backdrop-filter: blur(6px);
    z-index: var(--sme-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sme-duration) var(--sme-ease),
                visibility var(--sme-duration) var(--sme-ease);
}
.sme-modal-overlay.is-open { opacity: 1; visibility: visible; }

.sme-modal {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - var(--sme-space-8));
    overflow-y: auto;
    background: var(--sme-surface);
    border-radius: var(--sme-radius-xl);
    box-shadow: var(--sme-shadow-xl);
    padding: var(--sme-space-8) var(--sme-space-6) var(--sme-space-6);
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform var(--sme-duration-slow) var(--sme-ease-out);
}
.sme-modal-overlay.is-open .sme-modal { transform: translateY(0) scale(1); }

.sme-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin-bottom: var(--sme-space-4);
    border-radius: var(--sme-radius-full);
    background: var(--sme-brand-soft);
    color: var(--sme-brand);
}
.sme-modal__icon svg { width: 30px; height: 30px; }
.sme-modal__icon--info    { background: var(--sme-info-soft);    color: var(--sme-info); }
.sme-modal__icon--success { background: var(--sme-success-soft); color: var(--sme-success); }
.sme-modal__icon--warning { background: var(--sme-warning-soft); color: var(--sme-warning); }
.sme-modal__icon--danger  { background: var(--sme-danger-soft);  color: var(--sme-danger); }

.sme-modal__title {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-xl);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text);
    margin: 0 0 var(--sme-space-2);
}
.sme-modal__text {
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-normal);
    color: var(--sme-text-muted);
    margin: 0 0 var(--sme-space-6);
}
.sme-modal__actions { display: flex; flex-direction: column; gap: var(--sme-space-3); }

/* --------------------------------------------------------------------------
   Empty / success / error states
   -------------------------------------------------------------------------- */
.sme-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sme-space-3);
    padding: var(--sme-space-12) var(--sme-space-6);
    color: var(--sme-text-muted);
}
.sme-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    border-radius: var(--sme-radius-full);
    background: var(--sme-surface-muted);
    color: var(--sme-text-subtle);
}
.sme-state__icon svg { width: 32px; height: 32px; }
.sme-state__title { font-size: var(--sme-text-lg); font-weight: var(--sme-weight-semibold); color: var(--sme-text); margin: 0; }
.sme-state__text  { font-size: var(--sme-text-sm); line-height: var(--sme-leading-normal); margin: 0; max-width: 42ch; }
.sme-state--success .sme-state__icon { background: var(--sme-success-soft); color: var(--sme-success); }
.sme-state--error   .sme-state__icon { background: var(--sme-danger-soft);  color: var(--sme-danger); }

/* --------------------------------------------------------------------------
   Inline alerts
   -------------------------------------------------------------------------- */
.sme-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sme-space-3);
    padding: var(--sme-space-3) var(--sme-space-4);
    border-radius: var(--sme-radius-md);
    border: 1px solid transparent;
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-snug);
    text-align: left;
}
.sme-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.sme-alert--info    { background: var(--sme-info-soft);    color: var(--sme-info);    border-color: color-mix(in srgb, var(--sme-info) 25%, transparent); }
.sme-alert--success { background: var(--sme-success-soft); color: var(--sme-success); border-color: color-mix(in srgb, var(--sme-success) 25%, transparent); }
.sme-alert--warning { background: var(--sme-warning-soft); color: var(--sme-warning); border-color: color-mix(in srgb, var(--sme-warning) 25%, transparent); }
.sme-alert--danger  { background: var(--sme-danger-soft);  color: var(--sme-danger);  border-color: color-mix(in srgb, var(--sme-danger) 25%, transparent); }

/* --------------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------------- */
.sme-skeleton {
    background: linear-gradient(90deg,
        var(--sme-surface-muted) 25%,
        var(--sme-surface-hover) 37%,
        var(--sme-surface-muted) 63%);
    background-size: 400% 100%;
    animation: sme-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--sme-radius-sm);
}
@keyframes sme-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.sme-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sme-space-1);
    padding: 2px var(--sme-space-2);
    border-radius: var(--sme-radius-full);
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    line-height: 1.6;
}
.sme-badge svg { width: 12px; height: 12px; }
.sme-badge--verified { background: var(--sme-info-soft);    color: var(--sme-info); }
.sme-badge--premium  { background: var(--sme-warning-soft); color: var(--sme-gold-600); }
.sme-badge--online   { background: var(--sme-success-soft); color: var(--sme-success); }
.sme-badge--brand    { background: var(--sme-brand-soft);   color: var(--sme-brand); }

/* --------------------------------------------------------------------------
   Development notice

   Only rendered when MAIL_TRANSPORT=log on a non-production environment. Uses
   the warning tokens so it reads as a temporary local aid and is visually
   distinct from real product UI, which makes it obvious if it ever appears
   somewhere it should not.
   -------------------------------------------------------------------------- */
.sme-dev-notice {
    display: flex;
    flex-direction: column;
    gap: var(--sme-space-2);
    max-width: 30rem;
    margin: 0 auto var(--sme-space-4);
    padding: var(--sme-space-4);
    border: 1px dashed var(--sme-warning);
    border-radius: var(--sme-radius-md);
    background: var(--sme-warning-soft);
    color: var(--sme-text);
    text-align: center;
    font-size: var(--sme-text-sm);
}
.sme-dev-notice__code {
    display: inline-block;
    padding: var(--sme-space-2) var(--sme-space-4);
    border-radius: var(--sme-radius-sm);
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    font-family: var(--sme-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--sme-text-xl);
    font-weight: var(--sme-weight-bold);
    letter-spacing: 0.25em;
    color: var(--sme-brand);
}
.sme-dev-notice__hint {
    color: var(--sme-text-muted);
    font-size: var(--sme-text-xs);
}

/* --------------------------------------------------------------------------
   Chat: link to the conversation partner's profile

   This element previously carried no class, so it fell through to
   Materialize's global `a { color: #039be5 }` and was the last non-semantic
   blue in the interface. It is a person's name, so it takes the primary text
   colour and reveals the brand on interaction, rather than being permanently
   coloured like a generic hyperlink. The id is left intact because
   assets/js/chat.js sets the href through it.
   -------------------------------------------------------------------------- */
.sme-chat-user-link {
    color: var(--sme-text);
    font-weight: var(--sme-weight-semibold);
    text-decoration: none;
    transition: color var(--sme-duration) var(--sme-ease);
}
.sme-chat-user-link:hover,
.sme-chat-user-link:focus-visible {
    color: var(--sme-brand);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.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;
}
/* Skip link: hidden until focused, then anchored top-left. */
.sme-skip-link {
    position: absolute;
    left: var(--sme-space-4);
    top: -100px;
    z-index: var(--sme-z-toast);
    padding: var(--sme-space-3) var(--sme-space-4);
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    border-radius: var(--sme-radius-sm);
    font-weight: var(--sme-weight-semibold);
    transition: top var(--sme-duration) var(--sme-ease);
}
.sme-skip-link:focus { top: var(--sme-space-4); }

/* --------------------------------------------------------------------------
   Discovery card

   Replaces a layout where Pass floated on the photo and Like sat in the text
   block, with no room for Super Like. All three actions now share one bar so
   the decision reads as a single control group.
   -------------------------------------------------------------------------- */
.sme-discover-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--sme-radius-lg);
    background: var(--sme-surface);
    box-shadow: var(--sme-shadow-sm);
    transition: transform var(--sme-duration) var(--sme-ease),
                box-shadow var(--sme-duration) var(--sme-ease);
}
.sme-discover-card:hover { transform: translateY(-2px); box-shadow: var(--sme-shadow-lg); }

.sme-discover-card__media { position: relative; }
.sme-discover-card__photo-link { display: block; }
.sme-discover-card__photo-link img {
    display: block; width: 100%; aspect-ratio: 3 / 4;
    object-fit: cover; object-position: center top;
}

/* Status chips sit on the photo, clear of the action bar below. */
.sme-discover-card__online,
.sme-discover-card__distance {
    position: absolute; top: var(--sme-space-3);
    display: inline-flex; align-items: center; gap: var(--sme-space-1);
    padding: 4px 10px; border-radius: var(--sme-radius-full);
    font-size: var(--sme-text-xs); font-weight: var(--sme-weight-semibold);
    background: var(--sme-overlay); color: #fff;
    backdrop-filter: blur(6px);
}
.sme-discover-card__online   { left: var(--sme-space-3); }
.sme-discover-card__distance { right: var(--sme-space-3); }
.sme-discover-card__online i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sme-online); display: inline-block;
}

.sme-discover-card__body { padding: var(--sme-space-3); }

.sme-discover-card__name {
    display: flex; align-items: center; gap: var(--sme-space-2);
    margin: 0; font-size: var(--sme-text-base);
    font-weight: var(--sme-weight-semibold); line-height: 1.25;
}
.sme-discover-card__name a {
    color: var(--sme-text); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sme-discover-card__name a:hover { color: var(--sme-brand); }
.sme-discover-card__age { color: var(--sme-text-muted); font-weight: var(--sme-weight-regular); }

/* The badge inherits the verification token instead of a hardcoded blue. */
/* Identity verified badge.
 *
 * The mark carries its own gradient, so this no longer sets a colour: a
 * currentColor rule here would flatten it back to a single tone and lose the
 * thing that distinguishes it from every other tick on the internet.
 *
 * The size comes from the width/height the renderer writes on the <svg>, so a
 * badge asked for at 14px in a chat list and 28px on a profile header both
 * render correctly. The rule below only stops it being squashed by a flex
 * parent, which is what used to happen next to long names. */
.sme-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    vertical-align: middle;
    line-height: 1;
}
.sme-verified-badge__mark {
    display: block;
    flex: 0 0 auto;
    /* A soft halo lifts the seal off a photo, which is where it most often
       sits. Small enough not to read as a glow. */
    filter: drop-shadow(0 1px 2px rgba(11, 127, 168, .35));
}
.sme-verified-badge__text {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #0B7FA8;
    white-space: nowrap;
}
body.night_mode .sme-verified-badge__text { color: #5BC8E8; }

/* Labelled form, for places with room for words: the profile header and the
   verification screen. */
.sme-verified-badge--labelled {
    padding: 5px 12px 5px 8px;
    border-radius: 999px;
    background: rgba(14, 165, 165, .10);
    border: 1px solid rgba(14, 165, 165, .28);
}
body.night_mode .sme-verified-badge--labelled {
    background: rgba(14, 165, 165, .16);
    border-color: rgba(14, 165, 165, .38);
}

.sme-discover-card__location {
    display: flex; align-items: center; gap: var(--sme-space-1);
    margin: var(--sme-space-1) 0 0;
    color: var(--sme-text-muted); font-size: var(--sme-text-sm);
}
.sme-discover-card__location span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Action bar: Pass, Super Like, Like. */
.sme-discover-card__actions {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sme-space-3);
    margin-top: var(--sme-space-3);
    padding-top: var(--sme-space-3);
    border-top: 1px solid var(--sme-border);
}
.sme-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;            /* meets the 44px touch target */
    padding: 0; border-radius: 50%;
    background: var(--sme-surface);
    border: 1.5px solid var(--sme-border);
    color: var(--sme-text-muted);
    cursor: pointer;
    transition: transform var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.sme-act:hover  { transform: scale(1.08); }
.sme-act:active { transform: scale(0.96); }
.sme-act:focus-visible {
    outline: 2px solid var(--sme-brand);
    outline-offset: 2px;
}
/* Super Like is deliberately smaller and centred, so the primary
   Pass/Like pair stays dominant. */
.sme-act--super { width: 38px; height: 38px; }

.sme-act--pass:hover  { color: var(--sme-pass);  border-color: var(--sme-pass); }
.sme-act--like:hover  { color: var(--sme-brand); border-color: var(--sme-brand); background: var(--sme-brand-soft); }
.sme-act--super:hover { color: var(--sme-super); border-color: var(--sme-super); }

@media (prefers-reduced-motion: reduce) {
    .sme-discover-card, .sme-act { transition: none; }
    .sme-discover-card:hover, .sme-act:hover, .sme-act:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Alert placeholders

   The login and signup forms ship empty .alert containers that JavaScript
   fills in when there is something to say. With a background colour applied
   unconditionally they rendered as bare green and red bars above the first
   field on every page load - two coloured stripes announcing nothing, which
   read as a broken form before the member had typed anything.

   An alert with no content is not an alert. Collapsing on :empty keeps the
   markup and the JS untouched: as soon as a message is inserted the element
   has content, stops matching, and appears normally.
   -------------------------------------------------------------------------- */
/* !important is needed here, reluctantly. theme-override.css sets
   ".alert { display: flex !important }", which beat both this rule and the
   inline style="display:none" the markup already carries, so the two empty
   stripes showed on every login and register page regardless. An !important
   can only be overridden by another !important, so matching it is the only
   way short of editing that file, and this rule is narrow enough (:empty
   only) that it cannot hide an alert that has something to say. */
.alert:empty,
.steps_alerts:empty,
.sme-alert:empty {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Location permission dialog

   Replaces ~1.5KB of inline style that declared its own dark background and a
   purple gradient (#c649b8 -> #8b42c8) used nowhere else in the product, so it
   matched neither the brand nor the active theme. Everything here comes from
   tokens and follows light/dark automatically.
   -------------------------------------------------------------------------- */
.sme-geo-overlay {
    display: none;                 /* JS switches to flex */
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: var(--sme-space-4);
    background: var(--sme-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sme-geo-dialog {
    width: 100%;
    max-width: 25rem;
    padding: var(--sme-space-8) var(--sme-space-6) var(--sme-space-6);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-xl);
    background: var(--sme-surface-raised);
    box-shadow: var(--sme-shadow-xl);
    text-align: center;
    animation: sme-geo-in var(--sme-duration-slow) var(--sme-ease-spring);
}
@keyframes sme-geo-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.sme-geo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--sme-space-5);
    border-radius: var(--sme-radius-full);
    background: var(--sme-brand-soft);
    color: var(--sme-brand);
}
.sme-geo-title {
    margin: 0 0 var(--sme-space-2);
    font-size: var(--sme-text-xl);
    font-weight: var(--sme-weight-bold);
    color: var(--sme-text);
}
.sme-geo-text {
    margin: 0 0 var(--sme-space-6);
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-normal);
    color: var(--sme-text-muted);
}
.sme-geo-btn {
    display: block;
    width: 100%;
    min-height: var(--sme-tap-target);
    margin-bottom: var(--sme-space-2);
    padding: 0 var(--sme-space-5);
    border: 1px solid transparent;
    border-radius: var(--sme-radius-md);
    font-family: var(--sme-font-sans);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    cursor: pointer;
    transition: background-color var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.sme-geo-btn--primary { background: var(--sme-brand); color: var(--sme-on-brand); }
.sme-geo-btn--primary:hover:not([disabled]) { background: var(--sme-brand-hover); }
.sme-geo-btn--primary[disabled] { opacity: 0.6; cursor: progress; }
.sme-geo-btn--ghost {
    background: transparent;
    color: var(--sme-text);
    border-color: var(--sme-border-strong);
}
.sme-geo-btn--ghost:hover { background: var(--sme-surface-hover); }
.sme-geo-btn:focus-visible,
.sme-geo-link:focus-visible { outline: 2px solid var(--sme-brand); outline-offset: 2px; }

/* Permanent decline is deliberately the quietest control of the three: it is
   the most consequential, so it should be chosen intentionally, not by reflex. */
.sme-geo-link {
    display: block;
    width: 100%;
    margin-top: var(--sme-space-3);
    padding: var(--sme-space-1);
    background: none;
    border: 0;
    color: var(--sme-text-subtle);
    font-size: var(--sme-text-xs);
    text-decoration: underline;
    cursor: pointer;
}
.sme-geo-link:hover { color: var(--sme-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .sme-geo-dialog { animation: none; }
}

/* --------------------------------------------------------------------------
   Cookie consent (cookieconsent library markup)

   The library ships its own palette; these rules put it on brand tokens so it
   follows the theme instead of carrying a stray purple.
   -------------------------------------------------------------------------- */
.cc-window {
    font-family: var(--sme-font-sans);
    background: var(--sme-surface-raised);
    color: var(--sme-text);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    box-shadow: var(--sme-shadow-lg);
}
.cc-message { font-size: var(--sme-text-sm); line-height: var(--sme-leading-normal); }
.cc-link { color: var(--sme-brand); }
.cc-btn {
    border-radius: var(--sme-radius-md);
    font-weight: var(--sme-weight-semibold);
    font-size: var(--sme-text-sm);
    min-height: 40px;
}
.cc-btn.cc-allow,
.cc-btn.cc-dismiss { background: var(--sme-brand); color: var(--sme-on-brand); border-color: var(--sme-brand); }
.cc-btn.cc-allow:hover,
.cc-btn.cc-dismiss:hover { background: var(--sme-brand-hover); }
.cc-btn.cc-deny {
    background: transparent;
    color: var(--sme-text-muted);
    border: 1px solid var(--sme-border-strong);
}
.cc-btn.cc-deny:hover { background: var(--sme-surface-hover); color: var(--sme-text); }

/* --------------------------------------------------------------------------
   Discovery rail

   Section switcher above the match grid. The icons are solid 24px shapes so
   they hold their weight at small sizes; the previous hairline outlines
   dissolved against the background and read as generic UI chrome.
   -------------------------------------------------------------------------- */
.sme-rail-icon,
.sme-section-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: -4px;
}
.sme-discovery-rail a .sme-rail-icon { margin-right: var(--sme-space-2); }
.sme-discovery-rail a {
    display: inline-flex;
    align-items: center;
    font-family: var(--sme-font-sans);
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text-muted);
    transition: color var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease);
}
.sme-discovery-rail a:hover,
.sme-discovery-rail a.is-active { color: var(--sme-brand); }
.sme-discovery-rail a:focus-visible { outline: 2px solid var(--sme-brand); outline-offset: 2px; }

/* Section headings use the display face, which gives the logged-in area a
   distinct editorial voice rather than reading like a settings screen. */
.sme-section-icon { color: var(--sme-brand); margin-right: var(--sme-space-2); }

/* --------------------------------------------------------------------------
   Icon weight

   Lucide draws at a 2px stroke on a 24px grid. Rendered at the 18-20px sizes
   this product actually uses, that becomes a hairline: the icons read as thin
   and weightless beside the brand's rounded, filled shapes, which is what made
   them feel like generic admin chrome rather than part of a dating product.

   stroke-width is a presentation attribute, so CSS wins over the value the
   library writes onto each SVG. Doing it here rather than through
   createIcons() options means it applies identically to icons injected later
   over AJAX, and does not depend on the library version's option names.
   -------------------------------------------------------------------------- */
svg.lucide {
    stroke-width: 2.25px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Navigation and primary actions carry slightly more weight again, so the
   things members reach for most read as the most solid. */
.to_sidebar svg.lucide,
nav svg.lucide,
.sme-discovery-rail svg.lucide {
    stroke-width: 2.4px;
}

/* --------------------------------------------------------------------------
   Phosphor icons

   Rendered by assets/js/sme-icons.js, which converts [data-lucide] placeholders
   to Phosphor glyphs via a verified name map and leaves anything unmapped to
   Lucide. Both systems therefore coexist during the migration, so these rules
   match the sizing and colour behaviour of the SVG icons they replace.

   Phosphor is a font, so size comes from font-size and colour is inherited -
   no fill/stroke to manage, and no per-icon overrides.
   -------------------------------------------------------------------------- */
i.sme-ph,
.sme-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sme-icon-md);
    line-height: 1;
    color: inherit;
    vertical-align: -0.15em;
    flex: 0 0 auto;
}
.to_sidebar .sme-ph,
nav .sme-ph,
.sme-discovery-rail .sme-ph { font-size: var(--sme-icon-lg); }
.sme-btn .sme-ph,
.btn .sme-ph { font-size: var(--sme-icon-sm); }

/* --------------------------------------------------------------------------
   Discovery card: layout corrections over the legacy theme

   The card body used to sit inside .card-image and carry .card-content, which
   style.css positions absolutely over the photo. That produced white text on a
   photo, a name collapsed to zero width, the location overlapping the name
   instead of stacking under it, and the action buttons floating on the image
   rather than sitting beneath the card.

   The markup no longer uses those legacy classes, so the body is now a normal
   sibling below the photo. These rules pin the details down so nothing in
   style.css can pull them back into an overlay.
   -------------------------------------------------------------------------- */
.sme-discover-card .sme-discover-card__body {
    position: static;
    display: block;
    width: auto;
    height: auto;
    padding: var(--sme-space-3);
    background: var(--sme-surface);
}
.sme-discover-card .sme-discover-card__info { display: block; width: auto; }

/* Name sits on a dark-on-light card now, so it takes the normal text colour
   rather than the white the overlay needed. */
.sme-discover-card .sme-discover-card__name,
.sme-discover-card .sme-discover-card__name a {
    color: var(--sme-text);
    width: auto;
}
.sme-discover-card .sme-discover-card__name a:hover { color: var(--sme-brand); }
.sme-discover-card .sme-discover-card__age { color: var(--sme-text-muted); }

/* Location on its own line beneath the name and age, not inline with them. */
.sme-discover-card .sme-discover-card__location {
    display: flex;
    width: 100%;
    margin: var(--sme-space-1) 0 0;
    color: var(--sme-text-muted);
}

/* Actions below the details, full width, evenly spaced. */
.sme-discover-card .sme-discover-card__actions {
    position: static;
    display: flex;
    width: 100%;
}

/* Card surface follows the theme rather than a fixed white, so discovery reads
   correctly in dark mode instead of punching light rectangles into the page. */
.sme-discover-card,
.sme-discover-card .sme-discover-card__body { background: var(--sme-surface); }
.sme-discover-card { border: 1px solid var(--sme-border); }
.sme-discover-card .sme-act { background: var(--sme-surface); border-color: var(--sme-border); }

/* Super Like stays smaller than the Pass/Like pair it sits between; the legacy
   62px !important rule that overrode this has been removed from
   theme-override.css. */
.sme-discover-card .sme-act--super { width: 38px; height: 38px; }

/* --------------------------------------------------------------------------
   Discovery card actions: resting colour

   These carried colour only on :hover, so at rest all three sat in the same
   muted grey and the card read as inert. On a swipe surface the three choices
   need to be distinguishable before you touch them - that is the whole
   interaction. Each now owns its colour at rest, with a tinted well behind it,
   and hover deepens rather than introduces it.

   Pass stays neutral on purpose: it is the low-stakes action and should not
   compete with Like for attention.
   -------------------------------------------------------------------------- */
.sme-discover-card .sme-act--pass {
    color: var(--sme-text-muted);
    background: var(--sme-surface-muted);
    border-color: var(--sme-border);
}
.sme-discover-card .sme-act--pass:hover {
    color: var(--sme-text);
    background: var(--sme-surface-active);
    border-color: var(--sme-border-strong);
}

.sme-discover-card .sme-act--super {
    color: var(--sme-super);
    background: rgba(124, 92, 255, 0.10);
    border-color: rgba(124, 92, 255, 0.28);
}
.sme-discover-card .sme-act--super:hover {
    color: var(--sme-text-inverse);
    background: var(--sme-super);
    border-color: var(--sme-super);
}

.sme-discover-card .sme-act--like {
    color: var(--sme-brand);
    background: var(--sme-brand-soft);
    border-color: rgba(var(--sme-brand-rgb), 0.30);
}
.sme-discover-card .sme-act--like:hover {
    color: var(--sme-on-brand);
    background: var(--sme-brand);
    border-color: var(--sme-brand);
    box-shadow: var(--sme-shadow-brand);
}

/* Icons inherit the button colour instead of sitting at a fixed grey. */
.sme-discover-card .sme-act svg { color: inherit; fill: currentColor; }

/* --------------------------------------------------------------------------
   Card identity line

   Name, age and location formed an undifferentiated grey block. The name now
   carries the weight, age recedes, and the location pin takes the brand colour
   so the eye finds "where" without the text shouting.
   -------------------------------------------------------------------------- */
.sme-discover-card .sme-discover-card__name {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-base);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    gap: var(--sme-space-1);
}
.sme-discover-card .sme-discover-card__age {
    font-weight: var(--sme-weight-regular);
    font-size: var(--sme-text-sm);
}
.sme-discover-card .sme-discover-card__location {
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-medium);
    gap: 4px;
    align-items: center;
}
.sme-discover-card .sme-discover-card__location svg {
    color: var(--sme-brand);
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Discovery rail: per-section icon colour

   The rail rendered every icon in one muted grey, so the six sections were
   distinguishable only by reading their labels. Each now carries the colour
   that already means that thing elsewhere in the product, so the row is
   scannable at a glance and the colours stay truthful rather than decorative:

     Recommended      brand      - our pick for you
     Nearby           brand      - distance is a brand-led feature
     Online now       online     - the same green as the presence dot on cards
     New members      info       - informational, not a status
     Verified         verified   - the exact colour of the badge on profiles
     Other countries  super      - the distinct hue used for reaching further

   Labels stay muted until active, so colour lives in the icon and does not
   turn the row into a rainbow of text.
   -------------------------------------------------------------------------- */
.sme-discovery-rail a .sme-rail-icon { color: var(--sme-brand); }
.sme-discovery-rail a[data-tone="online"]   .sme-rail-icon { color: var(--sme-online); }
.sme-discovery-rail a[data-tone="new"]      .sme-rail-icon { color: var(--sme-info); }
.sme-discovery-rail a[data-tone="verified"] .sme-rail-icon { color: var(--sme-verified); }
.sme-discovery-rail a[data-tone="explore"]  .sme-rail-icon { color: var(--sme-super); }

/* The active section keeps its icon colour and gains a brand label + underline,
   so "which section am I in" is never signalled by colour alone. */
.sme-discovery-rail a.is-active { color: var(--sme-brand); }

/* Section header marks reuse the rail's tone, so a section and its rail entry
   read as the same thing rather than two unrelated icons. */
.sme-section-mark { display: inline-flex; color: var(--sme-brand); margin-right: var(--sme-space-2); }
.sme-section-mark[data-tone="online"]   { color: var(--sme-online); }
.sme-section-mark[data-tone="new"]      { color: var(--sme-info); }
.sme-section-mark[data-tone="verified"] { color: var(--sme-verified); }
.sme-section-mark[data-tone="explore"]  { color: var(--sme-super); }
.sme-section-mark .sme-section-icon { width: 22px; height: 22px; color: inherit; margin: 0; }

/* --------------------------------------------------------------------------
   Presence

   One visual language for activity wherever a member appears: discovery cards,
   profiles, chat and lists. Colour carries the state, but a label always
   accompanies it, so presence is never communicated by colour alone.

   Only a genuinely live session pulses. Everything else is a static dot, so
   "online now" stays meaningful instead of being one of five animated states.
   -------------------------------------------------------------------------- */
.sme-presence,
.sme-discover-card__presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}
.sme-presence__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--sme-radius-full);
    background: currentColor;
    flex: 0 0 auto;
}

.sme-presence--online  { color: var(--sme-online); }
.sme-presence--recent  { color: var(--sme-success); }
.sme-presence--today   { color: var(--sme-text-muted); }
.sme-presence--away    { color: var(--sme-text-subtle); }
.sme-presence--offline { color: var(--sme-text-subtle); }

/* Live sessions only. */
.sme-presence--online .sme-presence__dot {
    box-shadow: 0 0 0 0 currentColor;
    animation: sme-pulse 2s ease-out infinite;
}
@keyframes sme-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sme-presence--online .sme-presence__dot { animation: none; }
}

/* Dot-only variant, for avatars and tight rows. */
.sme-presence--dot .sme-presence__label { display: none; }

/* On a photo, presence needs its own plate to stay legible over any image. */
.sme-discover-card__presence {
    position: absolute;
    top: var(--sme-space-3);
    left: var(--sme-space-3);
    padding: 4px 10px;
    border-radius: var(--sme-radius-full);
    background: var(--sme-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
}
.sme-discover-card__presence.sme-presence--online .sme-presence__dot { background: var(--sme-online); }
.sme-discover-card__presence.sme-presence--recent .sme-presence__dot { background: var(--sme-success); }
.sme-discover-card__presence.sme-presence--today  .sme-presence__dot,
.sme-discover-card__presence.sme-presence--away   .sme-presence__dot { background: var(--sme-text-subtle); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Profile page

   The avatar was cropped by a fixed aspect box, so portraits lost their top or
   bottom. A square frame with object-fit: cover keeps the whole face in view at
   any source ratio, and object-position favours the upper half where faces sit.
   -------------------------------------------------------------------------- */
.to_user_media .avatar { aspect-ratio: 1 / 1; border-radius: var(--sme-radius-lg); }
/* superseded: the profile photo is shown whole, see the uncrop block below */

/* Action row: one control group, not six unrelated colours. */
.dt_user_pro_info { display: flex; flex-wrap: wrap; gap: var(--sme-space-2); align-items: center; }
.dt_user_pro_info .btn-flat {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--sme-tap-target); height: var(--sme-tap-target);
    padding: 0; border-radius: var(--sme-radius-full);
    background: var(--sme-surface); border: 1px solid var(--sme-border);
    color: var(--sme-text-muted);
    transition: color var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease);
}
.dt_user_pro_info .btn-flat:hover { color: var(--sme-brand); border-color: var(--sme-brand); background: var(--sme-brand-soft); }
.dt_user_pro_info .btn-flat svg { width: var(--sme-icon-md); height: var(--sme-icon-md); }
.dt_user_pro_info #like_btn:hover { color: var(--sme-brand); }
.dt_user_pro_info #dislike_btn:hover { color: var(--sme-pass); border-color: var(--sme-pass); background: var(--sme-surface-hover); }

/* Gallery thumbnails: square, uncropped-looking, consistent. */
.dt_cp_photos_list { display: flex; flex-wrap: wrap; gap: var(--sme-space-2); margin-top: var(--sme-space-3); }
.dt_cp_photos_list .dt_cp_l_photos { width: 88px; height: 88px; }
.dt_cp_photos_list .dt_cp_l_photos img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--sme-radius-md); display: block;
}

/* Profile action icons were collapsing to 0 width.
   The buttons are display:inline-flex, so the SVG becomes a flex item; without
   an explicit flex-basis it shrank to nothing while keeping its height. The
   icons were present, correctly coloured, and 0px wide - invisible.
   min-width makes the shrink impossible regardless of what the button does. */
.dt_user_pro_info .btn-flat svg {
    flex: 0 0 auto;
    width: var(--sme-icon-md);
    min-width: var(--sme-icon-md);
    height: var(--sme-icon-md);
}

/* --------------------------------------------------------------------------
   Profile photo: show the whole image

   The frame previously forced a 1:1 box with object-fit: cover, which crops
   whatever does not fit. On a dating profile that means cutting the top of
   someone's head or the bottom of a full-length shot: the member chose that
   photo and it should be seen as they framed it.

   The image now keeps its own aspect ratio, capped by height so a very tall
   portrait cannot push the rest of the profile off screen. The soft surface
   behind it fills any letterboxing rather than leaving a gap.
   -------------------------------------------------------------------------- */
.to_user_media .avatar {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sme-surface-muted);
    border-radius: var(--sme-radius-lg);
    overflow: hidden;
}
/* max-height capped the frame away from the photo's own ratio, and object-fit:
   contain filled the leftover with bars. Letting the box follow the image means
   the whole photo shows with nothing padding it out. */
.to_user_media .avatar img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;      /* whole photo, never cropped */
    object-position: center;
    border-radius: var(--sme-radius-lg);
    display: block;
}

/* --------------------------------------------------------------------------
   Profile actions: colour at rest

   Each action carries the colour that already means that thing elsewhere, so
   the row is readable before you hover. Grey-on-grey made five different
   decisions look like one repeated button.
   -------------------------------------------------------------------------- */
.dt_user_pro_info #btn_add_friend svg              { color: var(--sme-info); }
.dt_user_pro_info a[title="Send a gift"] svg       { color: var(--sme-gold-500); }
.dt_user_pro_info #like_btn svg                    { color: var(--sme-brand); }
.dt_user_pro_info #dislike_btn svg                 { color: var(--sme-pass); }
.dt_user_pro_info #btn_open_private_conversation svg { color: var(--sme-super); }

/* The well tints to match on hover, so the colour reads as deliberate. */
.dt_user_pro_info #btn_add_friend:hover              { border-color: var(--sme-info);  background: var(--sme-info-soft); }
.dt_user_pro_info a[title="Send a gift"]:hover       { border-color: var(--sme-gold-500); background: var(--sme-warning-soft); }
.dt_user_pro_info #like_btn:hover                    { border-color: var(--sme-brand); background: var(--sme-brand-soft); }
.dt_user_pro_info #dislike_btn:hover                 { border-color: var(--sme-pass);  background: var(--sme-surface-hover); }
.dt_user_pro_info #btn_open_private_conversation:hover { border-color: var(--sme-super); background: rgba(124, 92, 255, 0.10); }

/* Correction: the profile photo is wrapped in a lightbox <a>, so making the
   frame a flex container turned that anchor into the flex item and it
   collapsed, shrinking the image to a few pixels. The anchor must fill the
   frame as a block; only then does the image size against it.
   Also resets the circular border-radius the legacy theme applied, which is
   what produced the cropped circle rather than the full photo. */
.to_user_media .avatar { display: block; }
.to_user_media .avatar > a,
.to_user_media .avatar > a.inline {
    display: block;
    width: 100%;
    line-height: 0;
}
.to_user_media .avatar,
.to_user_media .avatar > a,
.to_user_media .avatar img {
    border-radius: var(--sme-radius-lg);
}
.to_user_media .avatar img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
}

/* --------------------------------------------------------------------------
   Checkout modal

   The panel read as a stack of unstyled text: the accepted-card list wrapped as
   a bare sentence, the step numbers floated loose from their headings, and the
   three payment options looked like paragraphs rather than things you choose
   between. On a payment screen that matters more than elsewhere - people decide
   whether to trust a checkout in the first second of looking at it.
   -------------------------------------------------------------------------- */
.sme-paystack-modal .modal-content { padding: var(--sme-space-6); }
.sme-paystack-modal h4 {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-xl);
    font-weight: var(--sme-weight-bold);
    margin: 0 0 var(--sme-space-1);
}

/* Trust row: who is paying, and the encryption note. */
.sme-pay-user {
    display: flex; align-items: center; gap: var(--sme-space-3);
    padding: var(--sme-space-3) var(--sme-space-4);
    margin-bottom: var(--sme-space-5);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface-muted);
}
.sme-pay-user img { width: 40px; height: 40px; border-radius: var(--sme-radius-full); object-fit: cover; }

/* Accepted networks: a tidy row of plates, not a wrapped sentence. */
.sme-card-network-strip {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sme-space-2);
    margin: 0 0 var(--sme-space-5);
    padding: 0; list-style: none;
}
.sme-card-logo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 30px; padding: 0 var(--sme-space-2);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-sm);
    background: var(--sme-surface);
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    color: var(--sme-text-muted);
    line-height: 1;
}

/* Numbered steps: the digit belongs to its heading, not beside it. */
.sme-paystack-modal .sme-pay-step, .sme-pay-step {
    display: flex; align-items: center; gap: var(--sme-space-3);
    margin: 0 0 var(--sme-space-3);
    font-size: var(--sme-text-base);
    font-weight: var(--sme-weight-semibold);
    color: var(--sme-text);
}
/* The digit already exists in the markup; style it rather than adding a
   CSS counter, which would have rendered a second number beside it. */
.sme-pay-step > span:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: var(--sme-radius-full);
    background: var(--sme-brand); color: var(--sme-on-brand);
    font-size: var(--sme-text-xs); font-weight: var(--sme-weight-bold);
    line-height: 1;
}
.sme-pay-step strong { font-weight: var(--sme-weight-semibold); }

/* Client details: two columns on desktop, one on mobile. */
.sme-pay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sme-space-4);
    margin-bottom: var(--sme-space-6);
}
.sme-pay-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Payment options: selectable cards, not paragraphs. */
.sme-pay-methods { display: grid; gap: var(--sme-space-3); margin-bottom: var(--sme-space-6); }
.sme-pay-method {
    display: flex; align-items: flex-start; gap: var(--sme-space-3);
    padding: var(--sme-space-4);
    border: 1.5px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    cursor: pointer;
    transition: border-color var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease);
}
.sme-pay-method:hover { border-color: var(--sme-brand); background: var(--sme-brand-soft); }
.sme-pay-method input[type="radio"]:checked ~ *,
.sme-pay-method.is-selected { color: var(--sme-text); }
.sme-pay-method:has(input:checked) { border-color: var(--sme-brand); background: var(--sme-brand-soft); }
/* Scoped to the body wrapper.
 * These were written for flat markup where strong and span were direct
 * children. The option now wraps its text in .sme-pay-method__body beside
 * an icon span, so a bare `span` selector matched the wrapper AND the icon
 * - shrinking the whole option to 12px muted text and collapsing the icon.
 * The __body/__icon rules further down own this now. */
.sme-pay-method__body > strong {
    display: block;
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    margin-bottom: 2px;
}
.sme-pay-method__body > small {
    font-size: var(--sme-text-xs);
    color: var(--sme-text-muted);
    line-height: var(--sme-leading-normal);
}

/* Alert only occupies space when it has something to say. */
.sme-pay-alert:empty { display: none; }
.sme-pay-alert {
    padding: var(--sme-space-3) var(--sme-space-4);
    margin-bottom: var(--sme-space-4);
    border-radius: var(--sme-radius-md);
    background: var(--sme-danger-soft);
    color: var(--sme-danger);
    font-size: var(--sme-text-sm);
}

@media (max-width: 600px) {
    .sme-pay-grid { grid-template-columns: 1fr; }
    .sme-paystack-modal .modal-content { padding: var(--sme-space-4); }
}

/* --------------------------------------------------------------------------
   Profile action bar

   These controls used to be pulled up onto the bottom of the photo by a
   negative margin, so they sat over the subject's face on portrait crops and
   the row had no ground of its own. They now sit below the photo as their own
   panel: one surface, evenly divided, with the colour each action already
   carries elsewhere in the product.
   -------------------------------------------------------------------------- */
.dt_user_pro_info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sme-space-3);
    margin-top: var(--sme-space-4);
    padding: var(--sme-space-3) var(--sme-space-4);
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    box-shadow: var(--sme-shadow-sm);
}

/* Circular wells, sized to a comfortable tap target rather than the legacy
   60px which crowded the row on narrow screens. */
.dt_user_pro_info .btn,
.dt_user_pro_info .btn-flat {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    border-radius: var(--sme-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sme-surface-muted);
    border: 1px solid var(--sme-border);
    box-shadow: none;
    transition: transform var(--sme-duration) var(--sme-ease),
                border-color var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease);
}
.dt_user_pro_info .btn svg,
.dt_user_pro_info .btn-flat svg { width: 22px; height: 22px; }

.dt_user_pro_info .btn:hover,
.dt_user_pro_info .btn-flat:hover { transform: translateY(-2px); }

.dt_user_pro_info .btn:focus-visible,
.dt_user_pro_info .btn-flat:focus-visible {
    outline: 2px solid var(--sme-brand);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .dt_user_pro_info { gap: var(--sme-space-2); padding: var(--sme-space-3); }
    .dt_user_pro_info .btn,
    .dt_user_pro_info .btn-flat { width: 46px; height: 46px; min-width: 46px; }
}

/* The shared legacy button rule in theme-override.css carries !important on
   padding and border-radius. It was written for text buttons; these are
   icon-only circles, and 24px of side padding is what stretched them to 50x46
   ovals. Overriding two properties for one row is contained - rewriting the
   shared rule would touch every button on the site, so the exception lives
   here instead. sme-components.css loads after theme-override.css, so equal
   specificity plus !important resolves in favour of this block. */
.dt_user_pro_info .btn,
.dt_user_pro_info .btn-flat {
    padding: 0 !important;
    border-radius: var(--sme-radius-full) !important;
}

/* --------------------------------------------------------------------------
   Profile detail listing

   The profile read as one long undifferentiated column: every section was a
   bare text heading, and the 31 attribute rows were a two-column table with
   label and value in identical type, so nothing told you where one section
   ended and the next began.

   Sections are now cards with a coloured glyph in the heading, and the
   attribute rows became a responsive grid of tiles where the label is quiet
   and the value carries the weight - which is the pairing people actually
   scan for.
   -------------------------------------------------------------------------- */
.to_usr_info_block {
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    padding: var(--sme-space-5);
    margin-bottom: var(--sme-space-4);
}

.sme-sect-head,
.to_usr_info_block > h5 {
    display: flex;
    align-items: center;
    gap: var(--sme-space-3);
    margin: 0 0 var(--sme-space-4);
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-base);
    font-weight: var(--sme-weight-semibold);
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text);
}

/* Tinted well behind each glyph, so the colour reads as deliberate rather
   than as a stray coloured shape. */
.sme-sect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    flex: 0 0 auto;
    border-radius: var(--sme-radius-md);
}
/* Section icons share one treatment.
   These were six different hues: pink, blue, purple, gold, green and grey,
   all visible at once on a single profile. Six accent colours competing on
   one page is what makes a layout look assembled from a template rather than
   designed, and none of the colours meant anything, the glyph already says
   which section it is.

   One muted brand tint instead, so the icons read as a set and the only
   strong colour on the page is the one the member is meant to act on. The
   modifier classes are kept so no template needs touching and any of them
   can be given its own colour again later. */
.sme-sect-icon--brand,
.sme-sect-icon--info,
.sme-sect-icon--super,
.sme-sect-icon--gold,
.sme-sect-icon--success,
.sme-sect-icon--pass {
    color: var(--sme-brand);
    background: rgba(var(--sme-brand-rgb, 163, 38, 84), .09);
}

/* Attribute rows -> tiles. The legacy markup is a Materialize .row with two
   .col children; overriding the column widths turns each pair into a stacked
   label/value block without touching 31 separate markup sites. */
/* Attribute rows -> chips.
   These were tiles in an auto-fill grid with a 74px floor. Every group then
   ended in a half-width orphan, tall values forced their whole row taller,
   and a page of identical bordered boxes reads as a form rather than a
   person. Sized to their content and allowed to wrap instead: no orphans, no
   forced heights, and the eye follows the content rather than a grid.
   The legacy markup is untouched; this is the same .row/.col pair. */
.dt_profile_info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--sme-space-4);
}
/* Each tile is a flex column so the label sits at the top and the value takes
   the remaining space. Grid already stretches tiles to a common height per row;
   without this the value floated to the top of a tall tile and the row read as
   ragged whenever one value wrapped to two lines and its neighbours did not. */
.dt_profile_info > .row {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 7px 13px;
    background: var(--sme-surface-muted);
    border: 1px solid var(--sme-border);
    border-radius: 999px;
}
.dt_profile_info > .row > .col {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 !important;
    left: auto; right: auto;
    white-space: nowrap;
}
/* The value column absorbs the spare height so tiles in a row line up at the
   top and the bottom regardless of how long each value is. */
.dt_profile_info > .row > .col:last-child { flex: 0 1 auto; min-width: 0; }
/* Profile detail labels.
 *
 * These were var(--sme-text-xs), which resolves to 10.5px on a phone because
 * Materialize scales the root font size down to 14px there. Uppercase with wide
 * tracking at 10.5px is past the point of comfortable reading, and these are
 * the labels for the actual profile content: gender, height, city, languages.
 *
 * Set in px rather than rem on purpose. A rem here would keep drifting with the
 * viewport-dependent root, which is the thing that made them too small in the
 * first place; the whole point is that a label has a floor.
 *
 * text-secondary rather than text-muted: muted against the tile surface
 * measured 3.94:1, under AA. */
.dt_profile_info .info_title {
    margin: 0;
    font-size: 11px;
    font-weight: var(--sme-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sme-text-secondary);
}
/* The value is the content people came to read, so it gets a real size and
   the same px floor as the label above it. */
.dt_profile_info > .row > .col:last-child p {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
    font-weight: var(--sme-weight-semibold);
    color: var(--sme-text);
    overflow-wrap: break-word;
}

/* Sub-group headings (Basic, Appearance, Lifestyle) already ship an inline
   SVG; they were inheriting no colour and sat flush against the tiles. */
.dt_profile_info > h5 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sme-space-2);
    margin: var(--sme-space-2) 0 0;
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    letter-spacing: var(--sme-tracking-wide);
    text-transform: uppercase;
    color: var(--sme-text-muted);
}
.dt_profile_info > h5 svg { width: 16px; height: 16px; color: var(--sme-brand); }
.dt_profile_info > h5 svg path { fill: currentColor; }

/* Interests: real pills, not Materialize's grey slabs. */
.to_intrst_chp {
    height: auto;
    padding: var(--sme-space-2) var(--sme-space-4);
    margin: 0 var(--sme-space-2) var(--sme-space-2) 0;
    background: var(--sme-brand-soft);
    border: 1px solid transparent;
    border-radius: var(--sme-radius-full);
    line-height: 1.2;
    transition: border-color var(--sme-duration) var(--sme-ease),
                transform var(--sme-duration) var(--sme-ease);
}
.to_intrst_chp a { color: var(--sme-brand); font-size: var(--sme-text-sm); font-weight: var(--sme-weight-semibold); }
.to_intrst_chp:hover { border-color: var(--sme-brand); transform: translateY(-1px); }

.to_intrst_des {
    margin: 0;
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-normal);
    color: var(--sme-text-muted);
}

.to_location_map {
    margin-top: var(--sme-space-3);
    border-radius: var(--sme-radius-md);
    overflow: hidden;
    border: 1px solid var(--sme-border);
    line-height: 0;
}
.to_location_map img { width: 100%; height: auto; display: block; }

@media (max-width: 600px) {
    .to_usr_info_block { padding: var(--sme-space-4); }
    .dt_profile_info { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   Messenger

   The panel was carrying the original theme's chrome: the conversation filter
   rendered as a single button holding two text spans, which is why it read as
   a bare list rather than a control; toolbar icons sat at mixed sizes with the
   glyph itself as the only tap target; and the composer icons were the same
   grey as the placeholder text.

   The filter keeps its exact markup on purpose. functions.js replaces that
   button's innerHTML wholesale from its data-text-* attributes, so any element
   added inside would be destroyed on the first toggle. The two spans it
   already swaps are styled as segments instead.
   ========================================================================== */

/* Header ------------------------------------------------------------------ */
.dt_msg_box .msg_header {
    justify-content: space-between;
    gap: var(--sme-space-3);
    padding: var(--sme-space-4) var(--sme-space-5);
    border-bottom: 1px solid var(--sme-border);
}
.dt_msg_box .msg_header h2 {
    margin: 0;
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-lg);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text);
}
.dt_msg_box .msg_toolbar { display: flex; align-items: center; gap: var(--sme-space-1); }

/* Icon-only controls across the panel: one size, one hit area, one resting
   colour. These were 24px glyphs with no padding around them. */
.dt_msg_box .msg_toolbar .btn,
.dt_msg_box .chat_toolbar .btn,
.dt_msg_box .chat_navigation .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px; min-width: 40px;
    padding: 0 !important;
    border-radius: var(--sme-radius-full) !important;
    background: transparent;
    color: var(--sme-text-secondary);
    box-shadow: none;
    transition: background-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.dt_msg_box .msg_toolbar .btn:hover,
.dt_msg_box .chat_toolbar .btn:hover,
.dt_msg_box .chat_navigation .btn:hover {
    background: var(--sme-surface-hover);
    color: var(--sme-brand);
}
.dt_msg_box .msg_toolbar .btn svg,
.dt_msg_box .chat_toolbar .btn svg,
.dt_msg_box .chat_navigation .btn svg { width: 20px; height: 20px; }

/* Conversation filter -> segmented control -------------------------------- */
.dt_msg_box .msg_requests {
    display: flex;
    width: calc(100% - var(--sme-space-8));
    height: auto;
    margin: 0 var(--sme-space-4) var(--sme-space-3);
    padding: 4px !important;
    gap: 4px;
    background: var(--sme-surface-muted);
    border-radius: var(--sme-radius-full) !important;
    box-shadow: none;
    line-height: 1;
}
.dt_msg_box .msg_requests > span {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--sme-space-2) var(--sme-space-3);
    border-radius: var(--sme-radius-full);
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--sme-text-secondary);
    transition: background-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.dt_msg_box .msg_requests > span.active {
    background: var(--sme-surface);
    color: var(--sme-brand);
    box-shadow: var(--sme-shadow-xs);
}
/* The count is filled by chat.js and left empty when there are none. */
.dt_msg_box .msg_requests #requests_count:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--sme-radius-full);
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    font-size: 10px;
    font-weight: var(--sme-weight-bold);
}

/* Search ------------------------------------------------------------------ */
.dt_msg_box .m_search { padding: var(--sme-space-3) var(--sme-space-4); }
.dt_msg_box .search_input { position: relative; }
.dt_msg_box .search_input input[type="search"] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 var(--sme-space-4) 0 42px;
    background: var(--sme-surface-muted);
    border: 1px solid transparent;
    border-radius: var(--sme-radius-full);
    font-size: var(--sme-text-sm);
    color: var(--sme-text);
    transition: border-color var(--sme-duration) var(--sme-ease),
                background-color var(--sme-duration) var(--sme-ease);
}
.dt_msg_box .search_input input[type="search"]:focus {
    background: var(--sme-surface);
    border-color: var(--sme-brand);
    box-shadow: var(--sme-ring);
    outline: none;
}
.dt_msg_box .search_input svg {
    position: absolute;
    left: var(--sme-space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--sme-text-muted);
    pointer-events: none;
}

/* Composer ---------------------------------------------------------------- */
.dt_msg_box .chat_foot {
    border-top: 1px solid var(--sme-border);
    padding: var(--sme-space-3) var(--sme-space-4);
}

/* Attachment actions carry the colour of what they insert, so the row reads
   at rest instead of being three identical grey glyphs. */
.dt_msg_box .chat_f_attach { display: flex; align-items: center; gap: var(--sme-space-1); }
.dt_msg_box .chat_f_attach > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--sme-radius-full);
    cursor: pointer;
    transition: background-color var(--sme-duration) var(--sme-ease),
                transform var(--sme-duration) var(--sme-ease);
}
.dt_msg_box .chat_f_attach > span svg { width: 20px; height: 20px; }
.dt_msg_box .chat_f_attach > span:hover { transform: translateY(-1px); }
#chat_message_gify                { color: var(--sme-super); }
#chat_message_gify:hover          { background: rgba(124, 92, 255, 0.12); }
#chat_message_upload_stiker       { color: var(--sme-gold-500); }
#chat_message_upload_stiker:hover { background: var(--sme-warning-soft); }
#chat_message_upload_media        { color: var(--sme-info); }
#chat_message_upload_media:hover  { background: var(--sme-info-soft); }

.dt_msg_box #btn_chat_f_send {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    box-shadow: var(--sme-shadow-brand);
    transition: background-color var(--sme-duration) var(--sme-ease),
                transform var(--sme-duration) var(--sme-ease);
}
.dt_msg_box #btn_chat_f_send:hover  { background: var(--sme-brand-hover); }
.dt_msg_box #btn_chat_f_send:active { transform: scale(0.94); }
.dt_msg_box #btn_chat_f_send svg { width: 20px; height: 20px; }

/* Request accept / decline ------------------------------------------------ */
.dt_msg_box .dt_acc_dec_msg { display: flex; gap: var(--sme-space-2); margin-bottom: var(--sme-space-3); }
.dt_msg_box .acc_msg,
.dt_msg_box .dec_msg {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--sme-radius-full) !important;
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
}
.dt_msg_box .acc_msg     { background: var(--sme-success-soft); color: var(--sme-success); }
.dt_msg_box .dec_msg     { background: var(--sme-surface-hover); color: var(--sme-text-secondary); }
.dt_msg_box .acc_msg svg,
.dt_msg_box .dec_msg svg { width: 18px; height: 18px; }

/* Presence dots in the status menu were hardcoded #CDCDCD and #60d465. */
.dt_msg_box .chat_change_online svg { width: 10px; height: 10px; }
.dt_msg_box #chat_go_online li:first-child svg path { fill: var(--sme-text-subtle); }
.dt_msg_box #chat_go_online li:last-child  svg path { fill: var(--sme-online); }

/* Typing indicator --------------------------------------------------------
   style.css already ships the three blinking dots and the @keyframes for
   them, but nothing ever rendered the markup, so the animation had never run.
   The bubble is given the surface treatment the other incoming messages use;
   the dot colour was a hardcoded #787878.
   ------------------------------------------------------------------------- */
.dt_msg_box .chat_body_content .messages .typing {
    display: inline-flex;
    align-items: center;
    background: var(--sme-surface-muted);
    border-radius: var(--sme-radius-lg);
}
.dt_msg_box .chat_body_content .messages .typing span {
    background-color: var(--sme-text-muted);
    height: 8px;
    width: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .dt_msg_box .chat_body_content .messages .typing span { animation: none; opacity: 0.6; }
}

@media (max-width: 600px) {
    .dt_msg_box .msg_header { padding: var(--sme-space-3) var(--sme-space-4); }
    .dt_msg_box .msg_requests { width: calc(100% - var(--sme-space-6)); margin: 0 var(--sme-space-3) var(--sme-space-3); }
    .dt_msg_box .chat_f_attach > span { width: 32px; height: 32px; }
}

/* The shared legacy rules in theme-override.css set min-height: 46px on every
   button and padding: 10px 16px on every input, both !important. They were
   written for full-width text controls; these are icon buttons and a search
   field with a glyph inside its left padding, so the inherited values leave
   the icons off-centre and the search text sitting on top of its own icon.
   Overriding the specific properties for this one panel is contained;
   rewriting the shared rules would touch every control on the site. */
.dt_msg_box .msg_toolbar .btn,
.dt_msg_box .chat_toolbar .btn,
.dt_msg_box .chat_navigation .btn {
    height: 40px !important;
    min-height: 40px !important;
}
.dt_msg_box .search_input input[type="search"] {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 var(--sme-space-4) 0 42px !important;
}
.dt_msg_box #btn_chat_f_send {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
}
.dt_msg_box .msg_requests {
    display: flex !important;
    min-height: 0 !important;
}

/* Message bubbles ---------------------------------------------------------
   Sent and received were separated only by alignment, both in the same grey.
   Sent now carries the brand fill and received a neutral surface, which is
   the distinction people read before they read any words.
   ------------------------------------------------------------------------- */
.dt_msg_box .chat_body_content .messages { margin-bottom: var(--sme-space-3); }

.dt_msg_box .chat_body_content .messages .message {
    max-width: 76%;
    padding: var(--sme-space-3) var(--sme-space-4);
    border-radius: var(--sme-radius-lg);
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-normal);
    word-break: break-word;
    overflow-wrap: break-word;
}
.dt_msg_box .messages--sent .message {
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    border-bottom-right-radius: var(--sme-radius-sm);
}
.dt_msg_box .messages--sent .message a { color: var(--sme-on-brand); text-decoration: underline; }
.dt_msg_box .messages--received .message {
    background: var(--sme-surface-muted);
    color: var(--sme-text);
    border-bottom-left-radius: var(--sme-radius-sm);
}
.dt_msg_box .msg_r_combo .m_avatar img { border-radius: var(--sme-radius-full); object-fit: cover; }

/* Delivery tick -----------------------------------------------------------
   Two states so a message reads as delivered before it is read. The colour
   was a hardcoded #03A9F4 in core.php; it is a token now, and the tick has
   its own class because chat.js clears .seen on every poll.
   ------------------------------------------------------------------------- */
.dt_msg_box .sme-tick {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2px;
    line-height: 0;
}
.dt_msg_box .sme-tick svg { width: 16px; height: 16px; }
.dt_msg_box .sme-tick--sent { color: var(--sme-text-subtle); }
.dt_msg_box .sme-tick--read { color: var(--sme-info); }

/* Conversation rows -------------------------------------------------------- */
.dt_msg_box .m_conversation li > a,
.dt_msg_box .m_conversation li {
    border-radius: var(--sme-radius-md);
}
.dt_msg_box .m_conversation li > a {
    display: flex;
    align-items: center;
    gap: var(--sme-space-3);
    padding: var(--sme-space-3);
    transition: background-color var(--sme-duration) var(--sme-ease);
}
.dt_msg_box .m_conversation li > a:hover { background: var(--sme-surface-hover); }
.dt_msg_box .m_conversation li.active > a { background: var(--sme-brand-soft); }
.dt_msg_box .m_conversation .avatar img,
.dt_msg_box .m_conversation img.avatar {
    width: 48px; height: 48px;
    border-radius: var(--sme-radius-full);
    object-fit: cover;
}

/* An unread row should be legible as unread without reading it. */
.dt_msg_box .m_conversation li.unread .name,
.dt_msg_box .m_conversation li[data-unread="1"] .name {
    font-weight: var(--sme-weight-bold);
    color: var(--sme-text);
}

/* ==========================================================================
   Icon sizing

   Icons across the product declare their own width/height in the markup, and
   they disagree: 24px dominates (680 of them) but 13, 14, 15, 16, 18, 20, 22
   and 26 all appear too. The size an icon should be is a property of where it
   sits, not of the file, so context sets it here and the attributes stop
   mattering.

   Deliberately scoped to known containers rather than a blanket `svg { }`,
   because logos, flags, illustrations and the map still want their intrinsic
   size. Anything not listed keeps its markup size.
   ========================================================================== */

/* Inline with a line of text - list rows, menu items, meta lines. */
.dt_user_pro_info svg,
.to_usr_info_block .sme-sect-icon svg,
.m_conversation li svg,
.sme-discover-card__location svg,
.sme-discover-card__distance svg,
.to_user_stats svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Standalone controls - toolbar and composer buttons. */
.msg_toolbar .btn svg,
.chat_toolbar .btn svg,
.chat_navigation .btn svg,
.chat_f_attach > span svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Primary actions that need presence. */
.sme-discover-card__actions .sme-act svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}
.sme-discover-card__actions .sme-act--super svg {
    width: 20px;
    height: 20px;
}

/* An icon sitting inside a button next to a label should never outgrow the
   label. This is the case the raw 24px attribute got most wrong. */
.btn svg,
.btn-flat svg {
    vertical-align: middle;
}

/* Icons default to the colour of the text they sit with. 738 SVGs ship no
   fill attribute at all, so without this they fall back to black and vanish
   against the dark surface. */
.sme-scope svg:not([fill]),
.dt_msg_box svg:not([fill]),
.to_usr_info_block svg:not([fill]),
.dt_user_pro_info svg:not([fill]) {
    fill: currentColor;
}

/* Boost --------------------------------------------------------------------
   Boost charged the user and changed nothing they could see. The badge marks a
   boosted card in discovery; the panel tells the buyer their boost is still
   running before they are offered another one.
   ------------------------------------------------------------------------- */
.sme-boost-badge {
    position: absolute;
    top: var(--sme-space-3);
    left: var(--sme-space-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--sme-space-2);
    border-radius: var(--sme-radius-full);
    background: var(--sme-gold-500);
    color: #1a1205;
    font-size: 11px;
    font-weight: var(--sme-weight-bold);
    letter-spacing: 0.02em;
    box-shadow: var(--sme-shadow-sm);
}

.sme-boost-live {
    display: flex;
    align-items: center;
    gap: var(--sme-space-3);
    padding: var(--sme-space-3) var(--sme-space-4);
    margin-bottom: var(--sme-space-4);
    border: 1px solid var(--sme-gold-500);
    border-radius: var(--sme-radius-md);
    background: var(--sme-warning-soft);
}
.sme-boost-live strong { display: block; font-size: var(--sme-text-sm); color: var(--sme-text); }
.sme-boost-live span   { font-size: var(--sme-text-xs); color: var(--sme-text-secondary); }
.sme-boost-live__pulse {
    width: 10px; height: 10px; flex: 0 0 auto;
    border-radius: var(--sme-radius-full);
    background: var(--sme-gold-500);
    animation: sme-boost-pulse 1.6s ease-in-out infinite;
}
@keyframes sme-boost-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
    .sme-boost-live__pulse { animation: none; }
}

/* Boost results: what the money bought. A count with no baseline cannot
   answer whether the boost worked, so each figure carries its delta against
   the equal-length window before the boost started. */
.sme-boost-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sme-space-2);
    margin-bottom: var(--sme-space-4);
}
.sme-boost-stat {
    padding: var(--sme-space-3);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface-muted);
    text-align: center;
}
.sme-boost-stat strong {
    display: block;
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-xl);
    line-height: 1.1;
    color: var(--sme-text);
}
.sme-boost-stat > span {
    display: block;
    margin-top: 2px;
    font-size: var(--sme-text-xs);
    color: var(--sme-text-secondary);
}
.sme-boost-delta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: var(--sme-weight-semibold);
    color: var(--sme-text-muted);
}
.sme-boost-delta.is-up   { color: var(--sme-success); }
.sme-boost-delta.is-down { color: var(--sme-text-muted); }

@media (max-width: 420px) {
    .sme-boost-stats { grid-template-columns: 1fr; }
    .sme-boost-stat  { display: flex; align-items: baseline; gap: var(--sme-space-2); text-align: left; }
    .sme-boost-stat strong { font-size: var(--sme-text-lg); }
}

/* Plan cards -----------------------------------------------------------------
   The per-day figure is what makes a longer plan legible as value rather than
   just a bigger number, so it sits directly under the price.
   -------------------------------------------------------------------------- */
.sme-pro-term {
    margin-top: 2px;
    font-size: var(--sme-text-xs);
    color: var(--sme-text-secondary);
}

/* Lifetime is the anchor plan: lifted, gold-edged, and it keeps that treatment
   whether or not it is the selected radio. */
.sme-pro-plan--featured .sme-pro-plan-inner {
    border-color: var(--sme-gold-500);
    box-shadow: 0 8px 28px -12px rgba(245, 166, 35, 0.55);
}

/* Offer labels carry the tone of what they promise rather than all being the
   same pink chip. */
.sme-pro-badge--fire   { background: var(--sme-danger);    color: #fff; }
.sme-pro-badge--star   { background: var(--sme-brand);     color: var(--sme-on-brand); }
.sme-pro-badge--gem    { background: var(--sme-info);      color: #fff; }
.sme-pro-badge--rocket { background: var(--sme-success);   color: #fff; }
.sme-pro-badge--crown  { background: var(--sme-gold-500);  color: #1a1205; }

/* Subscription panel ---------------------------------------------------------
   A subscriber previously had nowhere to see what they had bought, when it
   ends, or what their boosts were spent on.
   -------------------------------------------------------------------------- */
.sme-sub-panel {
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    padding: var(--sme-space-5);
    margin-bottom: var(--sme-space-5);
}
.sme-sub-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sme-space-3);
    margin-bottom: var(--sme-space-4);
}
.sme-sub-plan {
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-lg);
    font-weight: var(--sme-weight-bold);
    color: var(--sme-text);
}
.sme-sub-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px var(--sme-space-3);
    border-radius: var(--sme-radius-full);
    font-size: var(--sme-text-xs);
    font-weight: var(--sme-weight-semibold);
}
.sme-sub-status--active  { background: var(--sme-success-soft); color: var(--sme-success); }
.sme-sub-status--ending  { background: var(--sme-warning-soft);  color: var(--sme-gold-500); }
.sme-sub-status--expired { background: var(--sme-surface-hover); color: var(--sme-text-secondary); }

.sme-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sme-space-3);
}
.sme-sub-stat {
    padding: var(--sme-space-3);
    background: var(--sme-surface-muted);
    border-radius: var(--sme-radius-md);
}
.sme-sub-stat strong {
    display: block;
    font-family: var(--sme-font-display);
    font-size: var(--sme-text-lg);
    color: var(--sme-text);
}
.sme-sub-stat span {
    font-size: var(--sme-text-xs);
    color: var(--sme-text-secondary);
}

/* Ledger and invoice rows share one row treatment. */
.sme-ledger-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sme-space-3);
    padding: var(--sme-space-3) 0;
    border-bottom: 1px solid var(--sme-border);
    font-size: var(--sme-text-sm);
}
.sme-ledger-row:last-child { border-bottom: 0; }
.sme-ledger-row time { color: var(--sme-text-muted); font-size: var(--sme-text-xs); }
.sme-ledger-delta { font-weight: var(--sme-weight-semibold); }
.sme-ledger-delta.is-credit { color: var(--sme-success); }
.sme-ledger-delta.is-debit  { color: var(--sme-text-secondary); }

/* Invoice ------------------------------------------------------------------
   Print styling instead of PDF generation: the user gets the same artefact
   without adding a PDF dependency to the stack.
   -------------------------------------------------------------------------- */
.sme-invoice {
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-lg);
    padding: var(--sme-space-6);
    max-width: 680px;
}
.sme-invoice__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sme-space-4);
    padding-bottom: var(--sme-space-4);
    border-bottom: 1px solid var(--sme-border);
}
.sme-invoice__head strong { display: block; font-family: var(--sme-font-display); font-size: var(--sme-text-lg); }
.sme-invoice__head span,
.sme-invoice__head time { font-size: var(--sme-text-sm); color: var(--sme-text-secondary); }

.sme-invoice__table { width: 100%; border-collapse: collapse; margin: var(--sme-space-4) 0; }
.sme-invoice__table th {
    text-align: left; padding: var(--sme-space-2) 0;
    font-size: var(--sme-text-xs); text-transform: uppercase;
    letter-spacing: var(--sme-tracking-wide); color: var(--sme-text-secondary);
    border-bottom: 1px solid var(--sme-border);
}
.sme-invoice__table td { padding: var(--sme-space-3) 0; font-size: var(--sme-text-sm); vertical-align: top; }
.sme-invoice__table small { display: block; color: var(--sme-text-muted); font-size: var(--sme-text-xs); }
.sme-invoice__amt { text-align: right; white-space: nowrap; }
.sme-invoice__total td { border-top: 1px solid var(--sme-border); font-weight: var(--sme-weight-bold); }
.sme-invoice__ref { font-size: var(--sme-text-xs); color: var(--sme-text-muted); }
.sme-invoice__ref code { background: var(--sme-surface-muted); padding: 2px 6px; border-radius: var(--sme-radius-sm); }

/* Only the invoice should reach the paper. */
@media print {
    body * { visibility: hidden; }
    .sme-invoice, .sme-invoice * { visibility: visible; }
    .sme-invoice { position: absolute; left: 0; top: 0; border: 0; max-width: 100%; }
    .sme-invoice__print { display: none; }
}

/* Voice notes ---------------------------------------------------------------
   A recording sits in the same bubble stream as text, so it gets the bubble
   treatment rather than a bare browser player on the page background.
   -------------------------------------------------------------------------- */
.sme-voice-note {
    display: flex;
    align-items: center;
    gap: var(--sme-space-2);
    padding: var(--sme-space-2) var(--sme-space-3);
}
.sme-voice-note audio {
    height: 36px;
    max-width: 220px;
}
.sme-voice-note__len {
    font-size: var(--sme-text-xs);
    color: var(--sme-text-secondary);
    font-variant-numeric: tabular-nums;
}
.messages--sent .sme-voice-note__len { color: var(--sme-on-brand); opacity: 0.85; }

/* Recording state: the button pulses so it is obvious the mic is live. */
#sme_voice_btn { color: var(--sme-danger); }
#sme_voice_btn.is-recording {
    background: var(--sme-danger-soft);
    animation: sme-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes sme-rec-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    #sme_voice_btn.is-recording { animation: none; }
}

/* Payment methods -----------------------------------------------------------
   Each option is a row with its own icon well, description and - for cards -
   the brands it accepts. The card number itself is never typed here: checkout
   redirects to Paystack, which is what keeps this application out of PCI
   scope, and their page recognises the card as it is entered.
   -------------------------------------------------------------------------- */
.sme-pay-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex: 0 0 auto;
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface-muted);
    color: var(--sme-text-secondary);
    transition: background-color var(--sme-duration) var(--sme-ease),
                color var(--sme-duration) var(--sme-ease);
}
.sme-pay-method:has(input:checked) .sme-pay-method__icon {
    background: var(--sme-brand);
    color: var(--sme-on-brand);
}
/* Mobile money keeps its own colour so the two providers are distinguishable
   at a glance rather than by reading. */
.sme-pay-method__icon--mpesa  { color: var(--sme-success); }
.sme-pay-method__icon--airtel { color: var(--sme-danger); }
.sme-pay-method:has(input:checked) .sme-pay-method__icon--mpesa,
.sme-pay-method:has(input:checked) .sme-pay-method__icon--airtel { color: var(--sme-on-brand); }

.sme-pay-method__body { display: block; }
.sme-pay-method__body strong { display: block; font-size: var(--sme-text-sm); margin-bottom: 2px; }
.sme-pay-method__body small  { display: block; font-size: var(--sme-text-xs); color: var(--sme-text-secondary); line-height: var(--sme-leading-normal); }

/* Accepted brands, drawn in CSS rather than shipped as images: four more
   network logos would be four more requests for something this small. */
.sme-pay-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sme-space-2); }

/* Card marks are SVG rather than styled text, so they stay crisp at any
 * zoom and read as logos instead of as labels. Each is 48x30 - the aspect
 * every network uses - so they line up without per-brand nudging. */
.sme-brandmark {
    width: 38px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: var(--sme-radius-sm);
    overflow: hidden;
}
/* The plate behind a mark follows the theme, so a dark wordmark is never
 * printed on a dark surface. Amex and the coloured discs carry their own
 * background and are unaffected. */
.sme-brandmark__bg { fill: var(--sme-surface); stroke: var(--sme-border); stroke-width: 1; }
[data-sme-theme="dark"] .sme-brandmark__wm { fill: var(--sme-text); }


/* Membership and credits pages ----------------------------------------------
   These pages ship 20 inline SVGs between them, 9 of which carry no fill
   attribute at all. The earlier currentColor rule was scoped to the messenger
   and profile containers, so on these pages those paths fell back to black and
   disappeared against the dark surface.

   Sizes are normalised here for the same reason they were on the profile:
   the markup declares 18px, 24px and one 512-viewBox icon, and the size an
   icon should be belongs to where it sits, not to the file.
   -------------------------------------------------------------------------- */
.sme-plan-card svg:not([fill]),
.sme-plan-inner svg:not([fill]),
.sme-pro-plan svg:not([fill]),
.sme-pro-feature-item svg:not([fill]),
.dt_plans svg:not([fill]),
.sme-balance-label svg:not([fill]),
.sme-plan-credits svg:not([fill]) {
    fill: currentColor;
}

/* One icon on the credits page uses a 512 viewBox while everything around it
   uses 24. Constraining the rendered box makes them agree without touching
   twenty markup sites. */
.sme-plan-card svg,
.sme-plan-inner svg,
.sme-plan-credits svg,
.sme-pro-feature-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.sme-plan-badge svg { width: 14px; height: 14px; }

/* The credit packages carry the same value language as the plan cards, so the
   per-unit figure sits under the price the same way. */
.sme-plan-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sme-text-xs);
    color: var(--sme-text-secondary);
}

/* Materialize overrides for the payment options ------------------------------
   Two of its rules capture this markup:

     label { font-size: 0.8rem }
       The option IS a label, and the document root is 14px, so every size
       inside resolved from 11.2px - the title rendered at 12.3px instead of
       14px and the description at 10.6px.

     [type="radio"]:not(:checked) + span { ... }
       The icon span sits immediately after the radio input, so Materialize
       styled it as a radio's text label: its padding widened the 42px well to
       49px and its line-height stretched the row.

   Both outrank a single class, so these selectors are deliberately specific
   enough to win rather than reaching for !important.
   -------------------------------------------------------------------------- */
.sme-pay-methods label.sme-pay-method {
    font-size: var(--sme-text-sm);
    line-height: var(--sme-leading-normal);
}

.sme-pay-method input[type="radio"]:not(:checked) + .sme-pay-method__icon,
.sme-pay-method input[type="radio"]:checked + .sme-pay-method__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    margin: 0;
    line-height: 0;
}
/* Materialize draws its own radio dot with ::before/::after on the sibling
   span. Ours is an icon well, not a radio label, so those must not render. */
.sme-pay-method input[type="radio"] + .sme-pay-method__icon::before,
.sme-pay-method input[type="radio"] + .sme-pay-method__icon::after {
    display: none;
}

/* The real radio stays present for semantics and keyboard use, but the whole
   row is the control, so it is not drawn. */
.sme-pay-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* Keyboard focus still has to be visible, since the input itself is not. */
.sme-pay-method:focus-within {
    border-color: var(--sme-brand);
    box-shadow: var(--sme-ring);
}

/* A provider mark that fills its well.
   M-PESA and Airtel carry their own brand background, so unlike the card
   marks they should not sit on a themed plate - the well becomes the mark
   rather than a container for it. */
.sme-brandmark--full {
    width: 100%;
    height: 100%;
    border-radius: var(--sme-radius-md);
}
.sme-pay-method__icon--mpesa,
.sme-pay-method__icon--airtel {
    padding: 0;
    overflow: hidden;
    background: transparent;
}
/* Selection is shown by the option's own border and background; tinting a
   brand mark would misrepresent the provider's colour. */
.sme-pay-method:has(input:checked) .sme-pay-method__icon--mpesa,
.sme-pay-method:has(input:checked) .sme-pay-method__icon--airtel {
    background: transparent;
}

/* ==========================================================================
   Editorial pages

   The custom-page template renders whatever HTML the content produces, with
   no typographic treatment of its own. A 15,000-character safety article
   arriving as undifferentiated text is a page nobody finishes - and on the
   financial-safety page, the part people skip is the part that stops them
   losing money.

   These rules give the content structure without touching the template.
   ========================================================================== */
.dt_terms_content_body {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--sme-text);
}

/* Measure matters more than font size for long-form reading. Anything past
   about 75 characters a line and the eye loses its place on the return. */
.dt_terms_content_body p { margin: 0 0 1.15em; max-width: 68ch; }

.dt_terms_content_body h2,
.dt_terms_content_body h3,
.dt_terms_content_body h4 {
    font-family: var(--sme-font-display);
    font-weight: var(--sme-weight-bold);
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text);
    line-height: 1.25;
}
/* Generous space above, tight below: a heading should belong to the text that
   follows it, not float between two blocks. */
/* The scale sits one step below the tag level. Published pages used to run
   h1 -> h3 because the converter demoted every heading, and the sizes here were
   tuned against that. The converter no longer demotes, so sections are h2 and
   subsections h3; shifting the sizes down one step keeps the rendered result
   identical while the underlying structure becomes correct. */
.dt_terms_content_body h2 { font-size: 1.3rem;  margin: 2.4em 0 0.6em; }
.dt_terms_content_body h3 { font-size: 1.08rem; margin: 2em 0 0.5em; color: var(--sme-text-secondary); }
.dt_terms_content_body h4 { font-size: 1rem;    margin: 1.6em 0 0.4em; color: var(--sme-text-secondary); }

/* A rule between major sections, drawn from the section break in the source
   rather than added decoratively. */
.dt_terms_content_body hr {
    border: 0;
    border-top: 1px solid var(--sme-border);
    margin: 3em 0;
}

.dt_terms_content_body ul { margin: 0 0 1.3em; padding-left: 1.4em; }
.dt_terms_content_body li { margin-bottom: 0.55em; }
.dt_terms_content_body li::marker { color: var(--sme-brand); }

/* Bold inside body copy carries meaning on these pages - it marks the rule,
   the warning, the thing to act on - so it is given real weight. */
.dt_terms_content_body strong { font-weight: var(--sme-weight-bold); color: var(--sme-text); }

.dt_terms_content_body a {
    color: var(--sme-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dt_terms_content_body a:hover { color: var(--sme-brand-hover); }

.dt_terms_content_body code {
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: var(--sme-radius-sm);
    background: var(--sme-surface-muted);
    color: var(--sme-text-secondary);
}

/* Tables: comparison grids and "what to do / what not to do" pairs. */
.dt_terms_content_body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0 2em;
    font-size: 0.95rem;
}
.dt_terms_content_body th {
    text-align: left;
    padding: 0.7em 0.9em;
    background: var(--sme-surface-muted);
    border-bottom: 2px solid var(--sme-border);
    font-size: var(--sme-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--sme-tracking-wide);
    color: var(--sme-text-secondary);
}
.dt_terms_content_body td {
    padding: 0.7em 0.9em;
    border-bottom: 1px solid var(--sme-border);
    vertical-align: top;
}
.dt_terms_content_body tr:last-child td { border-bottom: 0; }

/* Wide tables scroll inside themselves rather than pushing the page sideways. */
/* Wide tables scroll on narrow screens rather than being crushed to fit.
 *
 * "display: block; overflow-x: auto" was already here, but on its own it does
 * nothing: with width 100% and no minimum, the table simply shrinks and the
 * cells wrap instead of overflowing, so there is never anything to scroll.
 * Measured on the plans table at 375px: the whole thing squeezed into 258px
 * and every row stood 89 to 113px tall, because "Weekly Premium" was wrapping
 * inside a 59px column.
 *
 * Giving the row group a minimum width makes the content genuinely wider than
 * the block, which is what turns overflow-x into a scroll. The page body still
 * never scrolls sideways; only the table does. */
.dt_terms_content_body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dt_terms_content_body table thead,
.dt_terms_content_body table tbody {
    display: table;
    width: 100%;
    min-width: 30rem;
}
@media (min-width: 700px) {
    .dt_terms_content_body table { display: table; }
    .dt_terms_content_body table thead,
    .dt_terms_content_body table tbody { display: table-header-group; min-width: 0; }
    .dt_terms_content_body table tbody { display: table-row-group; }
}

/* The lead paragraph of an article, set larger so the page has an entry
   point rather than starting at full density. */
.dt_terms_content_body > p:first-of-type {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--sme-text-secondary);
    margin-bottom: 1.6em;
}

@media (max-width: 700px) {
    .dt_terms_content_body { font-size: 1rem; }
    .dt_terms_content_body h2 { font-size: 1.18rem; }
    .dt_terms_content_body h3 { font-size: 1.08rem; }
}

/* Article header.
   The page title needs to sit apart from the body text, not merge into it,
   so a reader landing from search knows immediately what they opened. */
.sme-article { max-width: 46rem; margin: 0 auto; padding: var(--sme-space-6) 0; }
.sme-article__head {
    padding-bottom: var(--sme-space-5);
    margin-bottom: var(--sme-space-6);
    border-bottom: 1px solid var(--sme-border);
}
.sme-article__head h1 {
    font-family: var(--sme-font-display);
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: var(--sme-weight-bold);
    line-height: 1.15;
    letter-spacing: var(--sme-tracking-tight);
    color: var(--sme-text);
    margin: 0;
}
/* The body already constrains its own measure, so it must not add a second
   max-width inside the article wrapper. */
.sme-article .dt_terms_content_body { max-width: none; margin: 0; }

/* Section headings with icons.
   A long safety article is a wall of text without visual anchors. The icon
   gives the eye somewhere to land when scanning for the section that applies,
   which is how these pages are actually read: not start to finish, but hunting
   for the part that matches the situation someone is in. */
.dt_terms_content_body .sme-sec {
    display: flex;
    align-items: center;
    gap: var(--sme-space-3);
    margin: 2.8em 0 0.7em;
    padding-top: 1.4em;
    border-top: 1px solid var(--sme-border);
}
.dt_terms_content_body .sme-sec:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.sme-sec__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--sme-radius-md);
    background: var(--sme-brand-soft);
    color: var(--sme-brand);
}
.sme-sec__icon svg { width: 24px; height: 24px; }
.sme-sec__text { flex: 1 1 auto; min-width: 0; }

/* Sections that carry a consequence are toned to match it, so a reader
   scanning the page can tell a warning from an explanation before reading a
   word of it. */
.dt_terms_content_body h2.sme-sec + p strong:first-child { color: var(--sme-text); }

@media (max-width: 600px) {
    .sme-sec__icon { width: 38px; height: 38px; }
    .sme-sec__icon svg { width: 20px; height: 20px; }
    .dt_terms_content_body .sme-sec { gap: var(--sme-space-2); margin-top: 2.2em; }
}

/* ==========================================================================
   Age gate
   ==========================================================================
   Self contained: the dialog previously had no styles of its own and borrowed
   whatever the generic .modal rules happened to give it, which is why it
   rendered as a cramped box with a 120px illustration crowding the text.

   Centred with flexbox rather than absolute positioning, so it stays centred
   at any viewport and cannot be pushed off screen on a short one. The panel
   scrolls internally if the viewport is shorter than the content.
   ========================================================================== */
.sme-agegate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sme-space-4, 16px);
    background: rgba(10, 12, 18, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}
.sme-agegate.is-open { display: flex; }

.sme-agegate__panel {
    width: 100%;
    max-width: 25rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    background: var(--sme-bg-card, #fff);
    color: var(--sme-text, #161b25);
    border-radius: var(--sme-radius-2xl, 20px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    animation: sme-agegate-in 0.22s ease-out both;
}
@keyframes sme-agegate-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sme-agegate__panel { animation: none; }
}

.sme-agegate__mark { line-height: 0; margin-bottom: 1rem; }
.sme-agegate__mark svg { width: 72px; height: 72px; }

.sme-agegate__title {
    margin: 0 0 0.6rem;
    font-family: var(--sme-font-display, inherit);
    font-size: 1.35rem;
    font-weight: var(--sme-weight-bold, 700);
    line-height: 1.3;
    color: var(--sme-text, #161b25);
}
.sme-agegate__text {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sme-text-secondary, #505a6b);
}

/* Stacked by default so the labels never truncate, side by side once there is
   room. The affirmative sits first in the DOM for tab order and is visually
   first in both layouts. */
.sme-agegate__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
@media (min-width: 26rem) {
    .sme-agegate__actions { flex-direction: row-reverse; justify-content: center; }
    .sme-agegate__btn { flex: 1 1 0; }
}

.sme-agegate__btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;            /* comfortable touch target */
    padding: 0.7rem 1.4rem;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--sme-radius-full, 999px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.sme-agegate__btn:active { transform: translateY(1px); }
.sme-agegate__btn:focus-visible {
    outline: 3px solid var(--sme-border-focus, #7aa7ff);
    outline-offset: 2px;
}
.sme-agegate__btn[disabled] { opacity: 0.6; cursor: default; }

.sme-agegate__btn--yes {
    background: var(--sme-brand, #f55fa1);
    color: #fff;
}
.sme-agegate__btn--yes:hover:not([disabled]) { background: var(--sme-brand-hover, #e14b8d); }

.sme-agegate__btn--no {
    background: transparent;
    color: var(--sme-text-secondary, #505a6b);
    border-color: var(--sme-border, #d9dee7);
}
.sme-agegate__btn--no:hover:not([disabled]) { background: var(--sme-bg-hover, #f2f4f8); }

/* Stop the page behind the dialog scrolling while it is open. */
body.sme-agegate-open { overflow: hidden; }

/* ==========================================================================
   Cookie banner: equal weight for Accept and Decline
   ==========================================================================
   The cookieconsent library adds .cc-highlight to the button row, which
   renders the deny control as an inline <a> with no padding. Measured at
   375px: Accept was 78x40 and Decline was 46x17, so min-height on .cc-btn
   silently did nothing to it because an inline box has no height.

   That is a dark pattern and it is also the specific thing regulators look
   for: refusing has to be as easy as accepting. The two controls are now the
   same shape and the same size, distinguished by fill rather than by how hard
   they are to hit, and both clear the 44px touch target.
   ========================================================================== */
.cc-window .cc-compliance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: stretch;
}
.cc-window .cc-compliance .cc-btn,
.cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 8rem;
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    margin: 0;
    font-size: var(--sme-text-sm);
    font-weight: var(--sme-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: var(--sme-radius-md);
    box-sizing: border-box;
}
/* The library gives the de-emphasised control a smaller font and an underline.
   Both are undone above; this keeps the colour distinction only. */
.cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny {
    background: transparent;
    color: var(--sme-text);
    border: 1px solid var(--sme-border-strong);
}
.cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny:hover {
    background: var(--sme-surface-hover, var(--sme-bg-hover));
}
.cc-window .cc-btn:focus-visible {
    outline: 3px solid var(--sme-border-focus);
    outline-offset: 2px;
}

/* The library sizes the button column to its content, which with two equal
   width buttons leaves 169px and forces them to stack even on a 1280px
   screen. Letting the row grow puts them side by side where there is room,
   and the wrap rule still stacks them on a narrow phone. */
@media (min-width: 40rem) {
    .cc-window.cc-floating .cc-compliance,
    .cc-window .cc-compliance { flex: 0 1 22rem; }
}

/* The banner did not go away when you answered it.
 *
 * Only the cookieconsent JS is loaded here, not the library's own stylesheet,
 * so .cc-window is styled entirely from this file. The one rule that never
 * got carried across was the one that matters most: the library signals
 * dismissal by adding .cc-invisible and expects CSS to do the hiding. With no
 * such rule, clicking Accept or Decline recorded the choice and left the
 * banner sitting on the page for the rest of the visit. It only disappeared
 * on the next navigation, because by then the cookie suppressed it.
 */
.cc-window.cc-invisible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
    .cc-window.cc-invisible { transition: none; }
}

/* ==========================================================================
   Cookie banner surface
   ==========================================================================
   style.css sets "body .cc-window" to a dark purple gradient with near white
   message text. That selector carries a body prefix, so it outranked the
   plain .cc-window rule further up this file and won.

   The result was a banner that was dark in a light themed site, and a Decline
   button that could not be seen at all: it was drawn with the standard dark
   body text colour on top of that dark gradient.
   
   Everything below is scoped with the same "body" prefix so it actually takes
   effect, rather than losing the specificity contest the way the earlier rule
   did. Dark mode keeps a dark surface, with light text, so the fix does not
   simply move the invisibility problem to the other theme.
   ========================================================================== */
body .cc-window {
    background: #fff;
    color: var(--sme-text);
    border: 1px solid var(--sme-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
body .cc-message {
    color: var(--sme-text-secondary);
}
body .cc-window .cc-link {
    color: var(--sme-brand);
    text-decoration: underline;
    opacity: 1;
}
body .cc-window .cc-link:hover { color: var(--sme-brand-hover); }

/* Accept keeps the brand fill. Decline is an outlined button of the same size,
   now with text and a border that both read against white. */
body .cc-window .cc-btn.cc-allow,
body .cc-window .cc-btn.cc-dismiss {
    background: var(--sme-brand);
    color: #fff;
    border: 1px solid var(--sme-brand);
}
body .cc-window .cc-btn.cc-allow:hover,
body .cc-window .cc-btn.cc-dismiss:hover {
    background: var(--sme-brand-hover);
    border-color: var(--sme-brand-hover);
}
body .cc-window .cc-compliance .cc-btn.cc-deny,
body .cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny {
    background: #fff;
    color: var(--sme-text);
    border: 1px solid var(--sme-border-strong);
}
body .cc-window .cc-compliance .cc-btn.cc-deny:hover,
body .cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny:hover {
    background: var(--sme-bg-hover);
    color: var(--sme-text);
}

/* Dark theme: a white panel would be a glare block, so keep a dark surface
   and flip the text instead. */
:root[data-sme-theme="dark"] body .cc-window {
    background: var(--sme-bg-elevated);
    color: var(--sme-text);
    border-color: var(--sme-border);
}
:root[data-sme-theme="dark"] body .cc-window .cc-compliance .cc-btn.cc-deny,
:root[data-sme-theme="dark"] body .cc-window .cc-compliance.cc-highlight .cc-btn.cc-deny {
    background: transparent;
    color: var(--sme-text);
    border-color: var(--sme-border-strong);
}

/* Contrast corrections on the white banner.
 *
 * Measured against #fff: --sme-brand is 3.73:1, which fails WCAG AA (4.5:1)
 * for text at this size. That affected two things, the Privacy Policy link
 * and the white label on the Accept button, so the primary action was
 * technically unreadable to the same standard the Decline button had just
 * been fixed to meet.
 *
 * --sme-brand-600 gives 4.98:1 for the button fill and --sme-brand-700 gives
 * 7.09:1 for the link. Both stay recognisably brand pink.
 */
body .cc-window .cc-link { color: var(--sme-brand-700); }
body .cc-window .cc-link:hover { color: var(--sme-brand-800); }
body .cc-window .cc-btn.cc-allow,
body .cc-window .cc-btn.cc-dismiss {
    background: var(--sme-brand-600);
    border-color: var(--sme-brand-600);
}
body .cc-window .cc-btn.cc-allow:hover,
body .cc-window .cc-btn.cc-dismiss:hover {
    background: var(--sme-brand-700);
    border-color: var(--sme-brand-700);
}

/* ==========================================================================
   Email verification step
   ==========================================================================
   Verification is required and stays required, so the screen should read as a
   normal part of joining rather than an obstacle: state what to do, say once
   why it exists, give a way out if the address was wrong, stop talking.

   No warning colours, no shield iconography, no claims about safety that a
   four digit code cannot actually deliver. The rest of this site is careful
   not to oversell verification and this screen should match.
   ========================================================================== */
.sme-verify { max-width: 26rem; margin: 0 auto; text-align: center; }
.sme-verify__title {
    margin: 0 0 6px;
    font-family: var(--sme-font-display, inherit);
    font-size: 1.25rem; font-weight: var(--sme-weight-bold, 700);
    color: var(--sme-text);
}
.sme-verify__lead {
    margin: 0 0 18px;
    font-size: .95rem; line-height: 1.6;
    color: var(--sme-text-secondary);
}
/* The address can be long; wrap it rather than letting it push the layout. */
.sme-verify__addr {
    display: inline-block; max-width: 100%;
    color: var(--sme-text); font-weight: 700;
    overflow-wrap: anywhere;
}
.sme-verify__why {
    margin: 20px auto 0; max-width: 24rem;
    font-size: .82rem; line-height: 1.6;
    color: var(--sme-text-muted, var(--sme-text-secondary));
}
.sme-verify__help {
    margin: 12px auto 0; max-width: 24rem;
    font-size: .84rem; line-height: 1.7;
    color: var(--sme-text-secondary);
}
.sme-verify__help a { color: var(--sme-brand-700, var(--sme-brand)); font-weight: 600; text-decoration: underline; }
.sme-verify__help a:hover { color: var(--sme-brand-800, var(--sme-brand-hover)); }

/* The code field itself: big, spaced, numeric. Small boxes with cramped
   digits are the usual reason a code gets mistyped on a phone. */
.sme-verify #otp_check_email,
.enter_otp_email #otp_check_email {
    width: 100%; max-width: 15rem;
    min-height: 60px;
    font-size: 1.8rem; font-weight: 700;
    letter-spacing: .6em; text-indent: .6em;   /* indent balances the trailing gap */
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--sme-border); border-radius: 14px;
    background: #fff; color: var(--sme-text);
}
.sme-verify #otp_check_email:focus,
.enter_otp_email #otp_check_email:focus {
    outline: none;
    border-color: var(--sme-brand);
    box-shadow: 0 0 0 3px rgba(var(--sme-brand-rgb, 230 73 128) / .18);
}
@media (max-width: 420px) {
    .sme-verify #otp_check_email,
    .enter_otp_email #otp_check_email { font-size: 1.5rem; letter-spacing: .45em; text-indent: .45em; }
}

/* ==========================================================================
   Arrival screen, shown once when signup completes
   ==========================================================================
   Replaces "Congratulations!" over a tick with something that tells the member
   they are actually in and what is worth doing first. Warm and brief. It makes
   no promise about matches, because nothing on this screen can keep one.
   ========================================================================== */
.sme-welcome { max-width: 30rem; margin: 0 auto; padding: 8px 16px 4px; }
.sme-welcome h2 {
    margin: 14px 0 8px;
    font-family: var(--sme-font-display, inherit);
    font-size: 1.6rem; font-weight: var(--sme-weight-bold, 700);
    color: var(--sme-text); line-height: 1.25;
}
.sme-welcome__lead {
    margin: 0 auto; max-width: 24rem;
    font-size: .95rem; line-height: 1.65;
    color: var(--sme-text-secondary);
}
.sme-welcome__go {
    margin: 20px 0 0;
    font-size: .85rem; color: var(--sme-text-muted, var(--sme-text-secondary));
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.sme-welcome__dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.sme-welcome__dots i {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; opacity: .35;
    animation: sme-welcome-dot 1.1s ease-in-out infinite;
}
.sme-welcome__dots i:nth-child(2) { animation-delay: .16s; }
.sme-welcome__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes sme-welcome-dot { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
    .sme-welcome__dots i { animation: none; opacity: .5; }
}
@media (max-width: 480px) {
    .sme-welcome h2 { font-size: 1.35rem; }
}

/* ==========================================================================
   Auth pages: the shared shell for login and register
   ==========================================================================
   Both pages used to carry their own ~180 line <style> block, and the two
   copies had already drifted: the card was 440px on one page and 520px on the
   other, the corner radius 20px against 8px, the column split 55/45 against
   58/42. Landing on login and then clicking through to register looked like
   two different products.

   Everything structural now lives here once. The page files hold markup only,
   so a change to the shell lands on both pages or on neither.

   The measurements below are the whole scale. Nothing in this section should
   invent a new radius, gap, or field height: use the variables.
   ========================================================================== */
.sme-modern-auth {
    /* Root font-size on this theme is 15px, not the usual 16px, so rem values
       here are ~6% smaller than they read. Sizes below are chosen against the
       15px root; changing the root changes this whole section.

       Radii come from the theme tokens rather than new numbers. theme-override
       pins every input to --sme-radius-md with !important, so matching it is
       the only way the fields, buttons and card agree without adding yet
       another escalation. Outer stays larger than inner, which is what makes
       nested corners look intentional. */
    --auth-card-w:    30rem;     /* 450px; register widens it below       */
    --auth-card-pad:  2.9rem;    /* 43px                                  */
    --auth-radius:    var(--sme-radius-lg);   /* 20px, the card           */
    --auth-radius-sm: var(--sme-radius-md);   /* 14px, everything inside  */
    --auth-field-h:   52px;
    --auth-gap:       0.95rem;   /* the vertical rhythm between fields    */
    --auth-canvas:    #F7F5FA;
    --auth-panel-ink: #17111F;
}

/* style.css reserves 55px at the top of <body> for the fixed site header. The
   auth screens do not render that header at all, so on login and register that
   was 55px of empty space above a min-height:100vh layout: the split started
   below the fold and every visit began with a scrollbar on a page that
   otherwise fits exactly. The body class comes from header.php, which emits
   "<page name>-page". */
body.login-page,
body.register-page { padding-top: 0; }

/* The auth screens are a full-bleed two column layout, so the page chrome the
   legacy theme wraps them in has to be neutralised. Each of these overrides a
   Materialize rule that is itself !important. */
.to_auth_page.sme-modern-auth {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin-top: 0 !important;
    background: var(--sme-surface) !important;
    background-image: none !important;
}
.to_auth_page.sme-modern-auth::before,
.to_auth_page.sme-modern-auth::after,
.to_auth_page.sme-modern-auth .login_page::before,
.to_auth_page.sme-modern-auth .login_page::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
.to_auth_page.sme-modern-auth > .login_page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    background: var(--sme-surface) !important;
}

.sme-auth-split { display: flex; min-height: 100vh; }

/* --- Left column: the form ------------------------------------------------ */
.sme-auth-left {
    flex: 1 1 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 1.5rem;
    background: var(--auth-canvas);
    position: relative;
}
/* Two very faint brand washes, one warm and one cool, so the canvas is not a
   flat grey. Kept under 5% so it never competes with the card. */
.sme-auth-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 88%, rgba(var(--sme-brand-rgb), .045), transparent 46%),
        radial-gradient(circle at 88% 6%,  rgba(27, 19, 64, .035), transparent 42%);
    pointer-events: none;
}

.sme-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--auth-card-w);
    padding: var(--auth-card-pad);
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: var(--auth-radius);
    /* Two shadows rather than one: a tight contact shadow keeps the card edge
       crisp, a wide soft one lifts it off the canvas. A single large blur
       reads as a smudge at this size. */
    box-shadow: 0 1px 2px rgba(27, 19, 64, .05),
                0 16px 40px -12px rgba(27, 19, 64, .13);
    word-break: normal;
    overflow-wrap: normal;
}
.sme-modern-auth.register .sme-auth-card { --auth-card-w: 35rem; }   /* 525px */

/* The theme absolutely positions .header_logo for the logged out header. Inside
   the card it has to be an ordinary block again. */
.login_page .sme-auth-card .header_logo,
.sme-auth-card .header_logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 0 1.75rem !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
}
.login_page .sme-auth-card .header_logo .brand-logo,
.login_page .sme-auth-card #logo-container,
.sme-auth-card .header_logo .brand-logo,
.sme-auth-card #logo-container {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    line-height: 1;
}
.sme-auth-card .header_logo img {
    width: auto !important;
    height: 40px !important;
    max-width: min(220px, 78vw) !important;
    object-fit: contain;
    display: block;
}

/* --- Card headings -------------------------------------------------------- */
.sme-auth-title,
.sme-auth-card > h4 {
    display: block;
    margin: 0 0 .375rem !important;
    font-family: var(--sme-font-display);
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -.021em;
    color: var(--sme-text);
    text-align: center;
    /* Long single words in a translated heading must not be hyphen-split into
       nonsense, and the card is narrow enough that the browser will try. */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
.sme-auth-lead {
    margin: 0 0 1.5rem;
    color: var(--sme-text-secondary);
    font-size: .9375rem;
    line-height: 1.55;
    text-align: center;
}

/* --- Google button and the divider under it -------------------------------- */
.sme-auth-card .sme-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    min-height: var(--auth-field-h);
    padding: 0 1rem;
    border: 1px solid var(--sme-border-strong);
    border-radius: var(--auth-radius-sm);
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sme-auth-card .sme-google-btn:hover {
    background: var(--sme-surface-hover);
    border-color: var(--sme-text-subtle);
    box-shadow: 0 2px 8px rgba(27, 19, 64, .07);
}
.sme-auth-card .sme-google-btn:focus-visible {
    outline: none;
    border-color: var(--sme-brand);
    box-shadow: var(--sme-ring);
}
.sme-auth-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
}
.sme-auth-or::before,
.sme-auth-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sme-border);
}
.sme-auth-or span {
    color: var(--sme-text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Trust row ------------------------------------------------------------
   Three statements, each checkable against the system rather than marketing.
   Verification, blocking and reporting are all true on the free tier in
   SME_EntitlementMatrix(), and the country guide count is the number of
   country pages in the publish whitelist. If any of those change, this row
   changes with them. */
.sme-auth-trust {
    display: grid;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sme-border);
}
.sme-auth-trust li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    color: var(--sme-text-secondary);
    font-size: .9rem;
    line-height: 1.5;
    list-style: none;
}
.sme-auth-trust i {
    /* Phosphor is an icon font, so width/height do nothing here and font-size
       is what actually sizes the glyph. */
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: var(--sme-icon-sm);
    color: var(--sme-success);
}

.sme-auth-alt {
    margin-top: 1.25rem;
    color: var(--sme-text-secondary);
    font-size: .9rem;
    text-align: center;
}
/* This is the main route to the other auth page, and as a bare inline link it
   was a 50x15px target. The padding grows the hit area and the matching
   negative margin keeps the sentence sitting where it did. */
.sme-auth-alt a {
    display: inline-block;
    padding: .5rem .35rem;
    margin: -.5rem -.1rem;
    color: var(--sme-brand);
    font-weight: 700;
    text-decoration: none;
}
.sme-auth-alt a:hover { text-decoration: underline; }

/* --- Right column: the branded panel -------------------------------------- */
.sme-auth-right {
    flex: 0 0 44%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--auth-panel-ink);
}
.sme-auth-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
}
/* Angled rather than straight down, and darkest at the bottom where the copy
   sits, so white text stays above 4.5:1 whatever the photo behind it does. */
.sme-auth-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(168deg,
        rgba(20, 13, 28, .28) 0%,
        rgba(20, 13, 28, .58) 46%,
        rgba(20, 13, 28, .90) 100%);
}
.sme-auth-right-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem;
    text-align: center;
}
.sme-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.sme-auth-pill i { font-size: var(--sme-icon-sm); }
.sme-auth-headline {
    margin: 1.125rem 0 .75rem;
    font-family: var(--sme-font-display);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.024em;
    color: #fff;
}
.sme-auth-sub {
    margin: 0 auto 1.75rem;
    max-width: 23rem;
    color: rgba(255, 255, 255, .82);
    font-size: .9375rem;
    line-height: 1.65;
}
.sme-auth-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: 0 1.75rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.sme-auth-ghost:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .45);
}
.sme-auth-ghost:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.sme-auth-ghost i { font-size: var(--sme-icon-sm); }

/* The phone is an illustration of the product, not a claim about it: no
   counts, no names, nothing a visitor could read as data. */
.sme-auth-phone {
    width: min(15rem, 100%);
    margin: 0 auto 1.5rem;
    padding: .875rem;
    border: 8px solid #100B16;
    border-radius: 28px;
    background: #fff;
    text-align: left;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
}
.sme-auth-phone-top {
    display: flex;
    justify-content: space-between;
    gap: .625rem;
    color: var(--sme-neutral-900);
    font-size: .75rem;
    font-weight: 700;
}
.sme-auth-phone-top strong { color: var(--sme-brand); }
.sme-auth-chat {
    margin-top: .75rem;
    max-width: 86%;
    padding: .625rem .75rem;
    border-radius: 14px;
    background: var(--sme-neutral-100);
    color: var(--sme-neutral-900);
    font-size: .8125rem;
    font-weight: 600;
}
.sme-auth-chat.me {
    margin-left: auto;
    background: var(--sme-brand-50);
    color: var(--sme-brand-800);
}
.sme-auth-chip-row { display: flex; gap: .5rem; margin-top: .75rem; }
.sme-auth-chip-row span {
    flex: 1;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--sme-neutral-100);
    color: var(--sme-neutral-900);
    font-size: .78rem;
    font-weight: 700;
}
.sme-auth-phone-btn {
    margin-top: .75rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sme-gold-500), var(--sme-brand));
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
}

/* --- Mobile teaser --------------------------------------------------------
   The branded panel is the first thing that goes on a narrow screen, so this
   carries a trace of it above the form instead. */
.sme-mobile-auth-teaser {
    display: none;
    align-items: center;
    gap: .75rem;
    padding: .625rem;
    margin: -.25rem 0 1.25rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--auth-radius-sm);
    background: rgba(var(--sme-brand-rgb), .045);
}
.sme-mobile-auth-teaser img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
}
.sme-mobile-auth-teaser strong,
.sme-mobile-auth-teaser span { display: block; }
.sme-mobile-auth-teaser strong {
    font-size: .9375rem;
    color: var(--sme-text);
    word-break: keep-all;
    overflow-wrap: normal;
}
.sme-mobile-auth-teaser span {
    color: var(--sme-text-secondary);
    font-size: .8rem;
    line-height: 1.4;
}

/* Overlapping avatars above the register form. Decorative, hidden from
   assistive tech, and deliberately not captioned with a member count. */
.sme-auth-avatar-row { display: flex; align-items: center; min-height: 44px; margin: -.25rem 0 1.25rem; }
.sme-auth-avatar-row img,
.sme-auth-avatar-row span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--sme-surface);
    box-shadow: 0 4px 12px rgba(27, 19, 64, .12);
    background: var(--sme-neutral-100);
}
.sme-auth-avatar-row img { object-fit: cover; margin-left: -10px; }
.sme-auth-avatar-row img:first-child { margin-left: 0; }
.sme-auth-avatar-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    color: var(--sme-success);
    background: var(--sme-success-soft);
}
.sme-auth-avatar-row i { font-size: var(--sme-icon-md); }

/* --------------------------------------------------------------------------
   Register wizard
   --------------------------------------------------------------------------
   The step indicator was five equal pills. Five labels across a 460px column
   left roughly 68px each, so "Preferences" and "Account" were both ellipsised
   to the point of meaninglessness, and at 375px they were three characters
   wide. A named current step plus a progress track says the same thing, reads
   at any width, and is what someone filling this in on a phone actually wants
   to know: where am I, and how much is left.
   -------------------------------------------------------------------------- */
.sme-auth-stepper { margin: 1.25rem 0 1.5rem; }
.sme-stepper-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.sme-stepper-now {
    color: var(--sme-text);
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: -.008em;
    /* The language table returns "account" lower case while the other four
       step names come back capitalised, so without this the indicator reads
       "Age, account, Basics". Every step name is a single word, so capitalize
       cannot mangle a phrase here. */
    text-transform: capitalize;
}
.sme-stepper-of {
    flex: 0 0 auto;
    color: var(--sme-text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.sme-stepper-of b { color: var(--sme-brand); font-weight: 800; }
.sme-stepper-track {
    height: 4px;
    border-radius: 999px;
    background: var(--sme-neutral-200);
    overflow: hidden;
}
.sme-stepper-track i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sme-brand-400), var(--sme-brand));
    transition: width .28s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .sme-stepper-track i { transition: none; }
}

.sme-register-step { display: none; }
.sme-register-step.is-active { display: block; }

.sme-step-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem;
    margin-bottom: 1.125rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--auth-radius-sm);
    background: var(--sme-neutral-25);
}
.sme-step-head i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: var(--sme-icon-lg);
    color: var(--sme-brand);
}
.sme-step-head h5 {
    margin: 0 0 .125rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--sme-text);
}
.sme-step-head p {
    margin: 0;
    color: var(--sme-text-secondary);
    font-size: .8125rem;
    line-height: 1.45;
}

.sme-field {
    display: block;
    margin-bottom: var(--auth-gap);
    color: var(--sme-text-secondary);
    font-size: .8125rem;
    font-weight: 700;
    /* The language table is inconsistent about case: it returns "First Name"
       and "About You" but "phone number" and "city", so the column of labels
       read as half title case and half not. Normalising here fixes every label
       at once instead of guessing at the table, and these are short field names
       where capitalising each word is the intended style anyway. */
    text-transform: capitalize;
}
.sme-field-title { display: block; margin-bottom: .5rem; }
.sme-field input,
.sme-field select,
.sme-field textarea { margin-top: .375rem; font-weight: 500; }
.sme-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.sme-field-optional {
    margin-left: .375rem;
    color: var(--sme-text-subtle);
    font-size: .75rem;
    font-weight: 500;
    /* Stays lower case against the capitalize on .sme-field, so it reads as an
       aside rather than as part of the field name. */
    text-transform: lowercase;
}

.sme-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sme-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: .5rem .75rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--auth-radius-sm);
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sme-choice:hover { border-color: var(--sme-brand-300); background: var(--sme-brand-50); }
.sme-choice:focus-within { border-color: var(--sme-brand); box-shadow: var(--sme-ring); }
.sme-choice input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--sme-brand); }

/* Distance slider.
   ------------------------------------------------------------------------
   Materialize does two things to a range input that both had to be undone
   here. It paints the thumb teal (#26a69a) directly on the ::-webkit-slider-
   thumb pseudo-element, which beats accent-color, so the slider was the one
   teal control on a pink site. And its JS injects a 32x32 <span class="thumb">
   value bubble that is absolutely positioned against a .range-field ancestor;
   this field is not one, so the bubble anchored to the page instead and drew a
   teal circle floating in the top left corner of the screen, outside the card.

   The bubble is redundant anyway: the current value is already printed in the
   pill next to the slider. */
.sme-range-field { position: relative; }
.sme-range-field .thumb { display: none !important; }
.sme-range-field input[type="range"] {
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--sme-brand);
    -webkit-appearance: none;
    appearance: none;
}
.sme-range-field input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--sme-neutral-200);
}
.sme-range-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border: 2px solid var(--sme-surface);
    border-radius: 50%;
    background: var(--sme-brand);
    box-shadow: 0 2px 6px rgba(27, 19, 64, .22);
    cursor: pointer;
}
.sme-range-field input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--sme-neutral-200);
}
.sme-range-field input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sme-surface);
    border-radius: 50%;
    background: var(--sme-brand);
    cursor: pointer;
}
.sme-range-field input[type="range"]:focus-visible { outline: none; }
.sme-range-field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--sme-ring); }
.sme-range-field span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: .25rem;
    padding: 0 .625rem;
    border-radius: 999px;
    background: var(--sme-brand-50);
    color: var(--sme-brand-700);
    font-size: .78rem;
    font-weight: 700;
}

.sme-photo-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10.5rem;
    margin-bottom: .75rem;
    padding: 1.25rem;
    border: 1.5px dashed rgba(var(--sme-brand-rgb), .34);
    border-radius: var(--auth-radius-sm);
    background: var(--sme-neutral-25);
    color: var(--sme-text);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.sme-photo-drop:hover,
.sme-photo-drop:focus-within { border-color: var(--sme-brand); background: var(--sme-brand-50); }
.sme-photo-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.sme-photo-avatar-target {
    position: relative;
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}
.sme-photo-avatar-main {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sme-neutral-100), var(--sme-surface));
    border: 1px solid rgba(var(--sme-brand-rgb), .18);
    color: var(--sme-brand);
    box-shadow: 0 10px 24px rgba(27, 19, 64, .08);
}
.sme-photo-avatar-main i { font-size: var(--sme-icon-xl); }
.sme-photo-avatar-add {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sme-surface);
    background: var(--sme-success);
    color: #fff;
}
.sme-photo-avatar-add i { font-size: var(--sme-icon-sm); }
.sme-photo-drop strong { font-size: .9375rem; font-weight: 800; }
.sme-photo-drop small,
.sme-photo-note { color: var(--sme-text-secondary); font-size: .8125rem; line-height: 1.45; }
.sme-photo-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .625rem; }
.sme-photo-preview:empty { display: none; }
.sme-photo-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--auth-radius-sm);
    border: 1px solid var(--sme-border);
    background: var(--sme-neutral-100);
}
.sme-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sme-photo-tile span {
    position: absolute;
    left: 6px;
    bottom: 6px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(27, 19, 64, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.sme-photo-note { margin: -.125rem 0 .75rem; }

.sme-checkline {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1rem;
    color: var(--sme-text-secondary);
    font-size: .8125rem;
    line-height: 1.5;
    cursor: pointer;
}
.sme-checkline input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--sme-brand); }
.sme-checkline a { color: var(--sme-brand); font-weight: 700; text-decoration: none; }
.sme-checkline a:hover { text-decoration: underline; }
.sme-password-hint { margin: -.375rem 0 var(--auth-gap); color: var(--sme-text-muted); font-size: .78rem; line-height: 1.45; }

.sme-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    margin-top: 1.25rem;
}
.sme-step-actions .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--auth-radius-sm);
}
/* Height is deliberately not set here. theme-override.css pins every .btn to
   min-height 46px with !important, which is above the 44px touch minimum and
   is what every other button on the site uses. Overriding it for two buttons
   would need a fourth !important and would make the auth screens the odd ones
   out. Fields are 52px, buttons 46px, and that is the site's scale. */
.sme-step-actions .btn i { flex: 0 0 auto; font-size: var(--sme-icon-sm); }
#sign_submit { flex: 1; min-width: 0; }

/* --- Login specifics ------------------------------------------------------ */
.sme-pw-wrap { position: relative; }
.sme-pw-wrap input.browser-default { padding-right: 48px; }
.sme-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--sme-text-secondary);
    cursor: pointer;
}
.sme-pw-toggle:hover { color: var(--sme-text); background: var(--sme-surface-hover); }
.sme-pw-toggle:focus-visible { outline: 2px solid var(--sme-brand); outline-offset: 1px; }

.sme-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.125rem;
}
.sme-remember {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* 44px so the whole row is a comfortable target: the visible box is only
       19px and on a phone that alone is a fiddly thing to hit. */
    min-height: 44px;
    color: var(--sme-text-secondary);
    font-size: .875rem;
    cursor: pointer;
}
.sme-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--sme-brand); cursor: pointer; }
.sme-forgot {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--sme-brand);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.sme-forgot:hover { text-decoration: underline; }

/* The submit button carries its own progress, so a slow network does not look
   like a dead button and invite a second click. Height comes from the site-wide
   .btn rule; see the note above .sme-step-actions .btn. */
.sme-auth-card .sme-btn-cta { font-size: 1rem; border-radius: var(--auth-radius-sm); }
.sme-auth-card .sme-btn-cta[disabled] { opacity: .72; cursor: default; }
.sme-btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: .5rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: sme-spin .6s linear infinite;
}
.is-busy .sme-btn-spinner { display: inline-block; }
@keyframes sme-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sme-btn-spinner { animation: none; } }

/* Colour and padding are deliberately not set here. theme-override.css styles
   .alert-success and .alert-danger site wide with !important, and those are
   the colours members see on every other screen, so the auth pages should not
   be the one place errors look different. Only the corner radius, which is not
   pinned there, is aligned to the card. */
.sme-auth-card .alert {
    margin-bottom: .875rem;
    border-radius: var(--auth-radius-sm);
    line-height: 1.5;
}
/* An empty .alert still painted a coloured bar with a border, so both pages
   opened showing a red block and a green block above the first field with no
   text in them. */
.sme-auth-card .alert:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* --- Breakpoints ---------------------------------------------------------- */
/* The split only earns its keep when the form column can hold a full width
   card with real margin beside it. The register card is 525px, so below about
   1100px the panel was stealing space and squeezing the card to within 24px of
   it. Single column below that is cleaner than a cramped two column, and the
   mobile teaser carries the branding instead. */
@media (max-width: 1099px) {
    .sme-auth-right { display: none; }
    .sme-auth-left {
        flex: 1 1 100%;
        min-height: 100vh;
        padding: 1.5rem 1rem;
        justify-content: flex-start;
    }
    .sme-mobile-auth-teaser { display: flex; }
    .sme-modern-auth { --auth-card-w: 32rem; --auth-card-pad: 2rem 1.6rem; }
    .sme-modern-auth.register .sme-auth-card { --auth-card-w: 35rem; }
    .sme-field-row { grid-template-columns: 1fr; gap: 0; }
    .sme-choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .sme-modern-auth { --auth-card-pad: 1.6rem 1.2rem; }
    .sme-auth-title,
    .sme-auth-card > h4 { font-size: 1.55rem !important; }
    .sme-auth-card .header_logo { margin-bottom: 1.25rem !important; }
    .sme-photo-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Back and Continue stack rather than shrink below a 44px target. */
    .sme-step-actions { flex-wrap: wrap; }
    .sme-step-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Auth form fields, shared by login and register
   ==========================================================================
   16px is the important one: any smaller and iOS zooms the page the moment a
   field is focused, which on a signup form means the member is fighting the
   viewport while typing. 52px gives a comfortable touch target, and a visible
   focus ring matters on a form people fill in on a phone.
   ========================================================================== */
.sme-auth-card input[type="text"],
.sme-auth-card input[type="email"],
.sme-auth-card input[type="password"],
.sme-auth-card input[type="tel"],
.sme-auth-card input[type="date"],
.sme-auth-card input[type="number"],
/* type=search is the country filter box that the country picker injects. It
   was missing here and sat at 12.6px, so focusing it on iOS zoomed the page
   right at the point where someone is hunting for their country. */
.sme-auth-card input[type="search"],
.sme-auth-card select,
.sme-auth-card textarea {
    /* !important matches theme-override.css, which sets font-size .9rem
       !important on every input. Below 16px iOS zooms the page on focus,
       so on a signup form the member ends up fighting the viewport while
       typing. Nothing else here needs the escalation. */
    font-size: 16px !important;
    width: 100%;
    min-width: 0;
    min-height: var(--auth-field-h, 52px);
    padding: 0 .875rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--auth-radius-sm, 14px);
    color: var(--sme-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    /* No background here on purpose. theme-override.css sets --sme-bg-input on
       every field with !important, so all fields are the same filled grey site
       wide. Declaring white here would be dead code that reads like a bug. */
}
.sme-auth-card textarea {
    min-height: 5.5rem;
    padding: .75rem .875rem;
    resize: vertical;
    line-height: 1.5;
}
.sme-auth-card ::placeholder { color: var(--sme-text-subtle); opacity: 1; }
.sme-auth-card input:focus,
.sme-auth-card select:focus,
.sme-auth-card textarea:focus {
    outline: none;
    border-color: var(--sme-brand);
    box-shadow: var(--sme-ring);
}
/* Selects deliberately keep the operating system's own dropdown arrow.
   theme-override.css pins `select { appearance: auto !important }` site wide,
   so a custom arrow drawn here could never appear; an earlier attempt at one
   was silently dead. The native control is also the better answer on mobile,
   where the platform picker is what people expect. Note that the
   `select.browser-default` rule in theme-override.css is dead for the same
   reason and is worth removing when that file is next touched. */
/* Checkboxes and radios are controls, not text, so the 52px rule must not
   stretch them into blocks.

   Materialize hides the real checkbox (position: absolute, opacity: 0) and
   paints a replacement with span::before and span::after. On these screens
   that had three consequences:

     - accent-color could never reach the visible box, so the age gate and the
       "show me" choices rendered as flat grey squares that did not look
       clickable or branded;
     - the terms checkbox uses the .filled-in variant, whose unchecked box is
       drawn by ::after, and it computed to 0x0. The one control that enables
       the Create Account button was invisible;
     - focus landed on an element with opacity 0, so keyboard users got no
       visible focus at all.

   Restoring the native input is less code than re-skinning two pseudo-elements
   across four states, and it brings back accent-color, the focus ring and
   correct behaviour for free. The !important flags here are matching
   Materialize's own, not escalating past them. */
.sme-auth-card input[type="checkbox"],
.sme-auth-card input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 19px;
    height: 19px;
    min-height: 0;
    margin: 0;
    accent-color: var(--sme-brand);
    cursor: pointer;
}
.sme-auth-card .sme-checkline > span::before,
.sme-auth-card .sme-checkline > span::after,
.sme-auth-card .sme-choice > span::before,
.sme-auth-card .sme-choice > span::after,
.sme-auth-card .sme-remember > span::before,
.sme-auth-card .sme-remember > span::after {
    content: none !important;
}
.sme-auth-card .sme-checkline > span,
.sme-auth-card .sme-choice > span,
.sme-auth-card .sme-remember > span {
    padding-left: 0 !important;
    line-height: inherit !important;
    font-size: inherit !important;
}

/* ==========================================================================
   Onboarding
   ==========================================================================
   One question per screen. The old setup put avatar, personal details and
   verification on three crowded sliders and asked for everything at once; a
   member on a phone met a wall of fields before they had seen anything the
   product does. Splitting it means each screen has a single obvious answer and
   the progress bar can tell the truth about how much is left.

   Steps are plain sections toggled by .is-active. There is no route per step,
   which is deliberate: the server decides which step you are on by reading the
   profile, so a refresh, a back button or a new device all land in the same
   place with no history to keep in sync.
   ========================================================================== */
.sme-onb {
    --onb-max: 30rem;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.25rem 3rem;
    background:
        radial-gradient(circle at 12% 4%, rgba(var(--sme-brand-rgb), .07), transparent 42%),
        radial-gradient(circle at 88% 96%, rgba(27, 19, 64, .05), transparent 46%),
        var(--sme-surface);
}
/* The theme reserves 55px at the top of body for the fixed header, which this
   screen does not render. Same reasoning as the auth pages above. */
body.steps-page { padding-top: 0; }

/* Site navigation is hidden for the whole of setup.
 *
 * Until the profile is finished every one of those links is a dead end: the
 * gate in index.php sends the member straight back here, so Discover, Matches
 * and Chat all look like they do something and then do not. Setup is a single
 * task with one way forward, and the screen should say so. The same applies to
 * the verification steps that follow, which is why this is scoped to the page
 * rather than to onboarding alone. */
body.steps-page .to_sidebar,
body.steps-page .to_sidebar_mini,
body.steps-page .to_sidebar_footer,
body.steps-page .to_header,
body.steps-page .sme-bottom-nav,
body.steps-page .bottom_nav,
body.steps-page #nav-logged-in { display: none !important; }
body.steps-page .slider_container { display: block !important; }

/* Materialize sets `button:focus { background-color: #2ab7a9 }`, a teal that
   belongs to no palette here. It is more specific than a plain class, so the
   moment the flow moved focus to the first control of a step, that control
   turned teal: the camera button, the gender cards, the location button. Each
   one is restored to its own background for the focused state. */
.sme-onb button:focus { background-color: inherit; }
.sme-onb-avatar-btn:focus { background-color: var(--sme-brand); }
.sme-onb-avatar-btn:hover:focus { background-color: var(--sme-brand-hover); }
.sme-onb-choice:focus { background-color: var(--sme-surface); }
.sme-onb-choice.is-on:focus,
.sme-onb-choice:hover:focus { background-color: var(--sme-brand-50); }
.sme-onb-geo-btn:focus { background-color: var(--sme-surface); }
.sme-onb-geo-btn:hover:focus { background-color: var(--sme-brand); }
.sme-onb-search-clear:focus { background-color: var(--sme-surface-hover); }

.sme-onb-shell { width: 100%; max-width: var(--onb-max); }

/* --- Header: logo, progress, counter -------------------------------------- */
.sme-onb-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .875rem;
    margin-bottom: 2rem;
}
.sme-onb-logo { height: 30px; width: auto; object-fit: contain; }
.sme-onb-track {
    height: 5px;
    border-radius: 999px;
    background: var(--sme-neutral-200);
    overflow: hidden;
}
.sme-onb-track i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sme-brand-400), var(--sme-brand));
    transition: width .34s cubic-bezier(.4, 0, .2, 1);
}
.sme-onb-count { color: var(--sme-text-muted); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.sme-onb-count b { color: var(--sme-brand); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .sme-onb-track i { transition: none; } }

/* --- Steps ---------------------------------------------------------------- */
.sme-onb-step { display: none; }
.sme-onb-step.is-active { display: block; animation: sme-onb-in .32s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes sme-onb-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sme-onb-step.is-active { animation: none; }
}

.sme-onb-q {
    margin: 0 0 .5rem;
    font-family: var(--sme-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--sme-text);
}
.sme-onb-sub {
    margin: 0 0 1.75rem;
    color: var(--sme-text-secondary);
    font-size: .95rem;
    line-height: 1.55;
}

/* --- Fields --------------------------------------------------------------- */
.sme-onb-field { display: block; margin-bottom: 1rem; }
.sme-onb-field > span {
    display: block;
    margin-bottom: .4rem;
    color: var(--sme-text-secondary);
    font-size: .8rem;
    font-weight: 700;
}
.sme-onb-opt {
    margin-left: .35rem;
    color: var(--sme-text-subtle);
    font-size: .75rem;
    font-weight: 500;
    font-style: normal;
}
.sme-onb input[type="text"],
.sme-onb input[type="email"] {
    /* 16px: below it iOS zooms the viewport the instant the field is focused,
       and on a one-field-per-screen flow that reframes the whole page. The
       escalations match theme-override.css, which pins these same properties
       on every input site wide. */
    width: 100%;
    min-height: 54px;
    padding: 0 1rem;
    font-size: 16px !important;
    border: 1px solid var(--sme-border) !important;
    border-radius: var(--sme-radius-md) !important;
    background: var(--sme-surface) !important;
    color: var(--sme-text);
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sme-onb input[type="text"]:focus,
.sme-onb input[type="email"]:focus {
    outline: none;
    border-color: var(--sme-brand) !important;
    box-shadow: var(--sme-ring) !important;
}
.sme-onb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* Live feedback under a field. Green only when something is genuinely right;
   an always-on compliment is noise. */
.sme-onb-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    margin: -.25rem 0 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}
.sme-onb-hint.is-good { display: flex; color: var(--sme-success); }
.sme-onb-hint.is-bad  { display: flex; color: var(--sme-danger); }
.sme-onb-hint i { font-size: var(--sme-icon-sm); flex: 0 0 auto; }

.sme-onb-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: .75rem .875rem;
    border-radius: var(--sme-radius-md);
    background: var(--sme-neutral-50);
    color: var(--sme-text-secondary);
    font-size: .82rem;
    line-height: 1.5;
}
.sme-onb-note i { flex: 0 0 auto; margin-top: 1px; font-size: var(--sme-icon-sm); color: var(--sme-text-muted); }

/* --- Date of birth --------------------------------------------------------
   Three boxes rather than input[type=date]. The native control renders in the
   host locale, so the same field reads mm/dd/yyyy in one country and
   dd/mm/yyyy in another. On the one input that decides whether somebody is
   eighteen, that ambiguity is not acceptable. */
.sme-onb-dob { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .625rem; }
.sme-onb-dob label { display: block; }
.sme-onb-dob span {
    display: block;
    margin-bottom: .4rem;
    color: var(--sme-text-secondary);
    font-size: .8rem;
    font-weight: 700;
    /* The language table returns "day" and "month" lower case but "Year"
       capitalised, so without this the three labels do not match each other. */
    text-transform: capitalize;
}
.sme-onb-dob input {
    text-align: center;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

/* --- Country search ------------------------------------------------------- */
.sme-onb-search { position: relative; margin-bottom: .75rem; }
.sme-onb-search > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--sme-icon-md);
    color: var(--sme-text-muted);
    pointer-events: none;
    z-index: 1;
}
.sme-onb-search input { padding-left: 2.85rem !important; padding-right: 2.85rem !important; }
.sme-onb-search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sme-surface-hover);
    color: var(--sme-text-secondary);
    cursor: pointer;
}
.sme-onb-search-clear:hover { color: var(--sme-text); background: var(--sme-surface-active); }
.sme-onb-search-clear i { font-size: var(--sme-icon-sm); }

.sme-onb-country-list {
    max-height: 15rem;
    margin: 0 0 1rem;
    padding: .25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    -webkit-overflow-scrolling: touch;
}
.sme-onb-country-list li {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 46px;
    padding: .5rem .625rem;
    border-radius: var(--sme-radius-sm);
    color: var(--sme-text);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
}
.sme-onb-country-list li:hover { background: var(--sme-surface-hover); }
.sme-onb-country-list li.is-picked { background: var(--sme-brand-50); color: var(--sme-brand-800); font-weight: 700; }
.sme-onb-country-list li[hidden] { display: none; }
.sme-onb-country-list img { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
.sme-onb-country-list span { flex: 1; min-width: 0; }
.sme-onb-tick { font-size: var(--sme-icon-sm); color: var(--sme-brand); opacity: 0; flex: 0 0 auto; }
.sme-onb-country-list li.is-picked .sme-onb-tick { opacity: 1; }
.sme-onb-detected {
    margin-left: .5rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--sme-info-soft);
    color: #1B62B8;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sme-onb-empty { margin: -.5rem 0 1rem; color: var(--sme-text-muted); font-size: .875rem; }
.sme-onb-city { margin-bottom: 1.25rem; }

/* --- Geolocation ---------------------------------------------------------- */
.sme-onb-geo {
    padding: 1rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-neutral-25);
}
.sme-onb-geo-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: 0 1.1rem;
    margin-bottom: .75rem;
    border: 1px solid var(--sme-brand);
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-brand);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sme-onb-geo-btn:hover { background: var(--sme-brand); color: var(--sme-on-brand); }
.sme-onb-geo-btn[disabled] { opacity: .6; cursor: default; }
.sme-onb-geo-btn i { font-size: var(--sme-icon-sm); }
.sme-onb-geo-copy { margin: 0; color: var(--sme-text-secondary); font-size: .82rem; line-height: 1.55; }
.sme-onb-geo-copy strong { display: block; color: var(--sme-text); font-size: .88rem; margin-bottom: .15rem; }
.sme-onb-geo-state {
    display: none;
    align-items: flex-start;
    gap: .4rem;
    margin: .75rem 0 0;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.45;
}
.sme-onb-geo-state.is-on  { display: flex; color: var(--sme-success); }
.sme-onb-geo-state.is-off { display: flex; color: var(--sme-text-secondary); }
.sme-onb-geo-state i { flex: 0 0 auto; margin-top: 1px; font-size: var(--sme-icon-sm); }

/* --- Choice cards (gender, and reused by "why I am here") ----------------- */
.sme-onb-choices { display: grid; gap: .625rem; margin-bottom: 1.25rem; }
.sme-onb-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 62px;
    padding: .75rem 1rem;
    border: 1.5px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sme-onb-choice:hover { border-color: var(--sme-brand-300); background: var(--sme-brand-50); }
.sme-onb-choice:focus-visible { outline: none; border-color: var(--sme-brand); box-shadow: var(--sme-ring); }
.sme-onb-choice.is-on { border-color: var(--sme-brand); background: var(--sme-brand-50); }
.sme-onb-choice > i:first-child { font-size: var(--sme-icon-lg); color: var(--sme-text-muted); flex: 0 0 auto; }
.sme-onb-choice.is-on > i:first-child { color: var(--sme-brand); }
.sme-onb-choice span { flex: 1; min-width: 0; }
.sme-onb-choice small { display: block; color: var(--sme-text-secondary); font-size: .8rem; font-weight: 500; margin-top: .1rem; }
.sme-onb-choice .sme-onb-tick { font-size: var(--sme-icon-md); }
.sme-onb-choice.is-on .sme-onb-tick { opacity: 1; }

/* --- Toggle --------------------------------------------------------------- */
.sme-onb-toggle {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    cursor: pointer;
}
.sme-onb-toggle[hidden] { display: none; }
.sme-onb-toggle-text { flex: 1; min-width: 0; }
.sme-onb-toggle-text strong { display: block; font-size: .92rem; font-weight: 700; color: var(--sme-text); }
.sme-onb-toggle-text small { display: block; margin-top: .15rem; color: var(--sme-text-secondary); font-size: .8rem; line-height: 1.45; }
/* The native checkbox stays in the DOM so keyboard and screen reader behaviour
   is the real thing; only the visual switch is drawn, driven off :checked. */
.sme-onb-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sme-onb-switch {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--sme-neutral-300);
    transition: background-color .18s ease;
}
.sme-onb-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
}
.sme-onb-toggle input:checked ~ .sme-onb-switch { background: var(--sme-brand); }
.sme-onb-toggle input:checked ~ .sme-onb-switch::after { transform: translateX(20px); }
.sme-onb-toggle input:focus-visible ~ .sme-onb-switch { box-shadow: var(--sme-ring); }
@media (prefers-reduced-motion: reduce) {
    .sme-onb-switch, .sme-onb-switch::after { transition: none; }
}

.sme-onb-consent {
    margin: 0 0 1.25rem;
    color: var(--sme-text-muted);
    font-size: .78rem;
    line-height: 1.6;
}

/* --- Avatar --------------------------------------------------------------- */
.sme-onb-avatar-stage { position: relative; width: 156px; margin: 0 auto 1.25rem; }
.sme-onb-avatar {
    width: 156px;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    /* Hue comes from the member id, so the placeholder is stable between loads
       rather than the same flat grey for everybody. */
    background: hsl(var(--onb-hue, 210) 62% 92%);
    color: hsl(var(--onb-hue, 210) 58% 34%);
    box-shadow: 0 12px 32px rgba(27, 19, 64, .14);
}
.sme-onb-avatar-letter {
    font-family: var(--sme-font-display);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}
.sme-onb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sme-onb-avatar-btn {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid var(--sme-surface);
    border-radius: 50%;
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--sme-brand-rgb), .4);
}
.sme-onb-avatar-btn:hover { background: var(--sme-brand-hover); }
.sme-onb-avatar-btn:focus-visible { outline: none; box-shadow: var(--sme-ring); }
.sme-onb-avatar-btn i { font-size: var(--sme-icon-md); }
.sme-onb-avatar.is-busy { opacity: .55; }

/* --- Arrival -------------------------------------------------------------- */
.sme-onb-welcome { text-align: center; }
.sme-onb-globe { position: relative; width: 220px; height: 220px; margin: 0 auto 1.5rem; }
.sme-onb-globe svg { width: 100%; height: 100%; overflow: visible; }
.sme-onb-land {
    /* Earth's own palette. A pink planet reads as a logo, not a world, and the
       copy under it is about a global community. */
    fill: #3E8F5C;
    stroke: #2C6B44;
    stroke-width: .5;
    stroke-linejoin: round;
}
.sme-onb-globe-edge { fill: none; stroke: rgba(180, 225, 255, .32); stroke-width: 1; }
.sme-onb-graticule { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: .7; }
.sme-onb-cloud { fill: rgba(255, 255, 255, .28); }

/* Both layers are drawn twice, one tile apart, so sliding either by exactly one
   tile width lands on an identical frame and neither loop shows a seam.
   The clouds run faster than the surface on purpose: two layers at different
   rates read as parallax, and parallax is what sells the sphere as solid. */
.sme-onb-globe-spin   { animation: sme-onb-spin 30s linear infinite; }
.sme-onb-globe-clouds { animation: sme-onb-spin 21s linear infinite; }
@keyframes sme-onb-spin {
    from { transform: translateX(0); }
    to   { transform: translateX(-144px); }
}

/* Faces of real members, orbiting. Positions are fixed rather than animated
   around a path: a slow drift is decoration, a legible face is the point. */
.sme-onb-face {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--sme-surface);
    background: var(--sme-neutral-100);
    box-shadow: 0 6px 18px rgba(27, 19, 64, .22);
    animation: sme-onb-float 5s ease-in-out infinite;
}
.sme-onb-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sme-onb-face--a { top: 2px;    left: 14px;   animation-delay: 0s; }
.sme-onb-face--b { top: 34px;   right: -8px;  animation-delay: .7s; }
.sme-onb-face--c { bottom: 26px; left: -10px; animation-delay: 1.4s; }
.sme-onb-face--d { bottom: 0;   right: 22px;  animation-delay: 2.1s; }
.sme-onb-face--e { top: 104px;  left: 6px;    animation-delay: 2.8s; }
@keyframes sme-onb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .sme-onb-globe-spin, .sme-onb-globe-clouds, .sme-onb-face { animation: none; }
}

.sme-onb-saved {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1.5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--sme-success-soft);
    color: #0A6B4F;
    font-size: .85rem;
    font-weight: 700;
}
.sme-onb-saved i { font-size: var(--sme-icon-sm); }
.sme-onb-legal { margin: 1.5rem 0 0; color: var(--sme-text-muted); font-size: .78rem; line-height: 1.6; }
.sme-onb-legal a { color: var(--sme-brand); font-weight: 600; text-decoration: underline; }

/* --- Actions -------------------------------------------------------------- */
.sme-onb-actions { display: flex; gap: .625rem; margin-top: 1.5rem; }
.sme-onb-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 1;
    min-height: 54px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--sme-radius-md);
    background: linear-gradient(135deg, var(--sme-brand-400), var(--sme-brand));
    color: var(--sme-on-brand);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;
}
/* The language table returns "continue" lower case while the rest of the flow
   is sentence case, so the primary button read "continue" next to "Continue"
   elsewhere on the site. */
.sme-onb-next span { text-transform: capitalize; }
.sme-onb-next:hover { filter: brightness(1.06); color: var(--sme-on-brand); }
.sme-onb-next:focus-visible { outline: none; box-shadow: var(--sme-ring); }
.sme-onb-next[disabled] { opacity: .45; cursor: default; filter: none; }
.sme-onb-next i { font-size: var(--sme-icon-sm); }
.sme-onb-next.is-busy { pointer-events: none; opacity: .7; }

.sme-onb-alert {
    display: none;
    margin-bottom: 1rem;
    padding: .75rem .875rem;
    border-radius: var(--sme-radius-md);
    background: var(--sme-danger-soft);
    border: 1px solid rgba(229, 72, 77, .3);
    color: #9F1239;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
}
.sme-onb-alert.is-on { display: block; }

@media (min-width: 30rem) {
    .sme-onb { padding-top: 3rem; }
    .sme-onb-q { font-size: 2.1rem; }
}
@media (max-width: 22.5rem) {
    .sme-onb-field-row { grid-template-columns: 1fr; gap: 0; }
    .sme-onb-q { font-size: 1.65rem; }
}


/* --------------------------------------------------------------------------
   Match reasons on a discovery card
   --------------------------------------------------------------------------
   Two or three checkable facts about this specific pair, produced by the
   recommendation engine. Never a compatibility percentage: the model does not
   have that precision, and printing a number invites members to optimise for
   it instead of reading it.
   -------------------------------------------------------------------------- */
.sme-discover-card__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}
.sme-discover-card__reasons li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: var(--sme-brand-50);
    color: var(--sme-brand-800);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
}
.sme-discover-card__reasons i { flex: 0 0 auto; font-size: 13px; color: var(--sme-brand); }
.sme-discover-card__reasons span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The card sits over a photo on some layouts, where a pale brand tint would
   disappear. */
.sme-discover-card__body--over-photo .sme-discover-card__reasons li {
    background: rgba(255, 255, 255, .92);
    color: var(--sme-neutral-900);
}
@media (max-width: 22.5rem) {
    .sme-discover-card__reasons li:nth-child(n+3) { display: none; }
}


/* ==========================================================================
   Discovery preferences
   ==========================================================================
   Standing requirements, not a search. Every control here is a hard gate in the
   recommendation engine, so the page is deliberately plain: each row is one
   decision, each decision says out loud what it will do to the results, and
   nothing is hidden behind an accordion. People turn these on to feel safer,
   and a safety control you cannot find or understand is not one.
   ========================================================================== */
.sme-disc-prefs { max-width: 46rem; }

.sme-disc-head { margin-bottom: 1.25rem; }
.sme-disc-head h1 {
    margin: 0 0 .35rem;
    font-family: var(--sme-font-display);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--sme-text);
}
.sme-disc-head p { margin: 0; color: var(--sme-text-secondary); font-size: .92rem; line-height: 1.55; }

/* Save feedback. Reserved height so the layout does not jump each time it
   appears and clears. */
.sme-disc-status {
    min-height: 1.5rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.5;
}
.sme-disc-status.is-busy { color: var(--sme-text-muted); }
.sme-disc-status.is-ok   { color: var(--sme-success); }
.sme-disc-status.is-bad  { color: var(--sme-danger); }

.sme-disc-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
}
.sme-disc-card h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sme-text);
}
.sme-disc-card h2 i { font-size: var(--sme-icon-md); color: var(--sme-brand); }

.sme-disc-field { margin-bottom: 1.25rem; }
.sme-disc-field:last-child { margin-bottom: 0; }
.sme-disc-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    color: var(--sme-text);
    font-size: .88rem;
    font-weight: 700;
}
.sme-disc-label b { color: var(--sme-brand); font-weight: 800; font-size: .85rem; white-space: nowrap; }
.sme-disc-opt { margin-left: .35rem; color: var(--sme-text-subtle); font-size: .75rem; font-weight: 500; font-style: normal; }
.sme-disc-field > small {
    display: block;
    margin-top: .45rem;
    color: var(--sme-text-muted);
    font-size: .78rem;
    line-height: 1.5;
}
.sme-disc-warn { display: flex; align-items: flex-start; gap: .35rem; color: var(--sme-warning) !important; }
.sme-disc-warn i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }

/* --- Chips ---------------------------------------------------------------- */
.sme-disc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sme-disc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem .875rem;
    border: 1.5px solid var(--sme-border);
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sme-disc-chip i { font-size: var(--sme-icon-sm); }
.sme-disc-chip:hover { border-color: var(--sme-brand-300); background: var(--sme-brand-50); }
.sme-disc-chip.is-on {
    border-color: var(--sme-brand);
    background: var(--sme-brand);
    color: var(--sme-on-brand);
}
/* Materialize paints button:focus a teal that belongs to no palette here, and
   it is more specific than a plain class. */
.sme-disc-chip:focus { background-color: var(--sme-surface); }
.sme-disc-chip.is-on:focus { background-color: var(--sme-brand); }
.sme-disc-chip:focus-visible { outline: none; box-shadow: var(--sme-ring); }

/* --- Age range ------------------------------------------------------------ */
.sme-disc-range { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sme-disc-range label { display: block; }
.sme-disc-range small { display: block; margin-bottom: .3rem; color: var(--sme-text-secondary); font-size: .78rem; font-weight: 600; }
.sme-disc-prefs input[type="number"],
.sme-disc-prefs input[type="text"] {
    /* 16px keeps iOS from zooming the page the moment a field is focused. */
    width: 100%;
    min-height: 48px;
    padding: 0 .875rem;
    font-size: 16px !important;
    border: 1px solid var(--sme-border) !important;
    border-radius: var(--sme-radius-md) !important;
    background: var(--sme-surface) !important;
    color: var(--sme-text);
    box-shadow: none !important;
}
.sme-disc-prefs input[type="number"]:focus,
.sme-disc-prefs input[type="text"]:focus {
    outline: none;
    border-color: var(--sme-brand) !important;
    box-shadow: var(--sme-ring) !important;
}

/* --- Distance slider ------------------------------------------------------ */
.sme-disc-prefs input[type="range"] {
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--sme-brand);
    -webkit-appearance: none;
    appearance: none;
}
.sme-disc-prefs input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px; background: var(--sme-neutral-200);
}
.sme-disc-prefs input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; margin-top: -8px;
    border: 2px solid var(--sme-surface); border-radius: 50%;
    background: var(--sme-brand);
    box-shadow: 0 2px 6px rgba(27, 19, 64, .22);
    cursor: pointer;
}
.sme-disc-prefs input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--sme-neutral-200); }
.sme-disc-prefs input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border: 2px solid var(--sme-surface);
    border-radius: 50%; background: var(--sme-brand); cursor: pointer;
}
/* Materialize injects a value bubble for every range input and anchors it to a
   .range-field ancestor. There is none here, so it would float loose on the
   page; the readout beside the label says the same thing in place. */
.sme-disc-field .thumb { display: none !important; }

/* --- Country picker ------------------------------------------------------- */
.sme-disc-search { position: relative; margin-bottom: .5rem; }
.sme-disc-search > i {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    font-size: var(--sme-icon-sm); color: var(--sme-text-muted); pointer-events: none; z-index: 1;
}
.sme-disc-search input { padding-left: 2.6rem !important; }

.sme-disc-selected { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.sme-disc-selected:empty { display: none; }
.sme-disc-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 34px; padding: .25rem .5rem .25rem .75rem;
    border: 0; border-radius: 999px;
    background: var(--sme-brand-50); color: var(--sme-brand-800);
    font-size: .8rem; font-weight: 700; cursor: pointer;
}
.sme-disc-tag:hover { background: var(--sme-brand-100); }
.sme-disc-tag:focus { background-color: var(--sme-brand-50); }
.sme-disc-tag i { font-size: 13px; opacity: .7; }

.sme-disc-list {
    max-height: 13rem; margin: 0; padding: .25rem;
    overflow-y: auto; list-style: none;
    border: 1px solid var(--sme-border); border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    -webkit-overflow-scrolling: touch;
}
.sme-disc-list li {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: 44px; padding: .5rem .625rem;
    border-radius: var(--sme-radius-sm);
    font-size: .9rem; cursor: pointer;
}
.sme-disc-list li:hover { background: var(--sme-surface-hover); }
.sme-disc-list li.is-on { background: var(--sme-brand-50); color: var(--sme-brand-800); font-weight: 700; }
.sme-disc-list li[hidden] { display: none; }
.sme-disc-list li i { font-size: var(--sme-icon-sm); color: var(--sme-brand); opacity: 0; flex: 0 0 auto; }
.sme-disc-list li.is-on i { opacity: 1; }

/* --- Toggles -------------------------------------------------------------- */
.sme-disc-toggle {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--sme-border-light, var(--sme-border));
    cursor: pointer;
}
.sme-disc-toggle:last-of-type { border-bottom: 0; }
.sme-disc-toggle > span { flex: 1; min-width: 0; }
.sme-disc-toggle strong { display: block; font-size: .92rem; font-weight: 700; color: var(--sme-text); }
.sme-disc-toggle small { display: block; margin-top: .15rem; color: var(--sme-text-secondary); font-size: .8rem; line-height: 1.45; }
/* The real checkbox stays in the DOM so keyboard and screen reader behaviour is
   the genuine thing; only the switch is drawn. */
.sme-disc-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sme-disc-switch {
    position: relative; flex: 0 0 auto;
    width: 48px; height: 28px; border-radius: 999px;
    background: var(--sme-neutral-300);
    transition: background-color .18s ease;
}
.sme-disc-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: transform .18s ease;
}
.sme-disc-toggle input:checked ~ .sme-disc-switch { background: var(--sme-brand); }
.sme-disc-toggle input:checked ~ .sme-disc-switch::after { transform: translateX(20px); }
.sme-disc-toggle input:focus-visible ~ .sme-disc-switch { box-shadow: var(--sme-ring); }
@media (prefers-reduced-motion: reduce) {
    .sme-disc-switch, .sme-disc-switch::after { transition: none; }
}

.sme-disc-note {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: 1rem 0 0; padding: .75rem .875rem;
    border-radius: var(--sme-radius-md);
    background: var(--sme-neutral-50);
    color: var(--sme-text-secondary);
    font-size: .8rem; line-height: 1.5;
}
.sme-disc-note i { flex: 0 0 auto; margin-top: 1px; font-size: var(--sme-icon-sm); color: var(--sme-text-muted); }

@media (max-width: 30rem) {
    .sme-disc-card { padding: 1rem; }
    .sme-disc-head h1 { font-size: 1.35rem; }
    .sme-disc-range { grid-template-columns: 1fr; gap: .5rem; }
}


/* ==========================================================================
   Profile completion meter
   ==========================================================================
   The percentage is weighted by how much each field actually changes a
   member's recommendations, so every suggestion carries what it is worth and
   why. A meter that rewards "favourite colour" as much as a photo teaches
   people the number means nothing, and then they stop reading it.
   ========================================================================== */
.sme-pc {
    padding: 1.125rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
}
.sme-pc-top { display: flex; align-items: center; gap: 1rem; }

/* Conic-gradient ring rather than an SVG: one element, no markup, and the
   percentage is a single custom property the script can update. */
.sme-pc-ring {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: conic-gradient(var(--sme-brand) calc(var(--pc, 0) * 1%), var(--sme-neutral-200) 0);
    display: grid;
    place-items: center;
}
.sme-pc-ring::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--sme-surface);
}
.sme-pc-ring span {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sme-text);
    letter-spacing: -.02em;
}
.sme-pc-ring i { font-size: .7rem; font-style: normal; color: var(--sme-text-muted); }

.sme-pc-copy { min-width: 0; }
.sme-pc-copy strong { display: block; font-size: 1rem; font-weight: 800; color: var(--sme-text); }
.sme-pc-copy p { margin: .2rem 0 0; color: var(--sme-text-secondary); font-size: .85rem; line-height: 1.5; }

.sme-pc-todo {
    margin: 1rem 0 0;
    padding: .875rem 0 0;
    border-top: 1px solid var(--sme-border);
    list-style: none;
}
.sme-pc-todo li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .45rem 0;
}
/* The gain is the point of the row, so it leads and is the only coloured
   thing in it. */
.sme-pc-gain {
    flex: 0 0 auto;
    min-width: 3rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--sme-success-soft);
    color: #0A6B4F;
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}
.sme-pc-text { min-width: 0; }
.sme-pc-text strong { display: block; font-size: .875rem; font-weight: 700; color: var(--sme-text); }
.sme-pc-text small { display: block; margin-top: .1rem; color: var(--sme-text-secondary); font-size: .78rem; line-height: 1.45; }
.sme-pc-complete {
    display: flex; align-items: center; gap: .4rem;
    margin: 1rem 0 0; padding-top: .875rem;
    border-top: 1px solid var(--sme-border);
    color: var(--sme-success); font-size: .85rem; font-weight: 600;
}
.sme-pc-complete i { font-size: var(--sme-icon-sm); }

/* --------------------------------------------------------------------------
   Profile fields: goal, prompts
   -------------------------------------------------------------------------- */
.sme-pf-block { margin: 0 0 1.5rem; }
.sme-pf-legend {
    display: block; margin-bottom: .5rem;
    font-size: .9rem; font-weight: 800; color: var(--sme-text);
}
.sme-pf-help { margin: 0 0 .75rem; color: var(--sme-text-secondary); font-size: .82rem; line-height: 1.5; }

.sme-pf-choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sme-pf-choice {
    display: flex; align-items: center; gap: .625rem;
    min-height: 56px; padding: .625rem .875rem;
    border: 1.5px solid var(--sme-border); border-radius: var(--sme-radius-md);
    background: var(--sme-surface); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sme-pf-choice:hover { border-color: var(--sme-brand-300); background: var(--sme-brand-50); }
.sme-pf-choice:has(input:checked) { border-color: var(--sme-brand); background: var(--sme-brand-50); }
.sme-pf-choice.is-on { border-color: var(--sme-brand); background: var(--sme-brand-50); }
/* The radio stays in the DOM for keyboard and screen reader behaviour; the
   card is what is drawn. */
.sme-pf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sme-pf-choice > i { flex: 0 0 auto; font-size: var(--sme-icon-lg); color: var(--sme-text-muted); }
.sme-pf-choice:has(input:checked) > i, .sme-pf-choice.is-on > i { color: var(--sme-brand); }
.sme-pf-choice span { min-width: 0; }
.sme-pf-choice strong { display: block; font-size: .9rem; font-weight: 700; color: var(--sme-text); }
.sme-pf-choice small { display: block; margin-top: .05rem; color: var(--sme-text-secondary); font-size: .78rem; line-height: 1.4; }

.sme-pf-prompts { display: grid; gap: .625rem; }
.sme-pf-prompt {
    display: block; padding: .75rem .875rem;
    border: 1px solid var(--sme-border); border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
    transition: border-color .15s ease, opacity .15s ease;
}
.sme-pf-prompt > span {
    display: block; margin-bottom: .35rem;
    font-size: .85rem; font-weight: 700; color: var(--sme-text);
}
.sme-pf-prompt input {
    width: 100%; min-height: 44px; padding: 0 .75rem;
    /* 16px stops iOS zooming the page the moment the field is focused. */
    font-size: 16px !important;
    border: 1px solid var(--sme-border) !important;
    border-radius: var(--sme-radius-sm) !important;
    background: var(--sme-surface) !important;
    box-shadow: none !important;
}
.sme-pf-prompt input:focus {
    outline: none;
    border-color: var(--sme-brand) !important;
    box-shadow: var(--sme-ring) !important;
}
.sme-pf-prompt.is-filled { border-color: var(--sme-brand); background: var(--sme-brand-50); }
/* Locked once three are answered. Dimmed rather than hidden, so the member can
   see what else is on offer and knows the limit is a limit, not a bug. */
.sme-pf-prompt.is-locked { opacity: .5; }
.sme-pf-prompt.is-locked input { cursor: not-allowed; }
.sme-pf-count { margin: .5rem 0 0; color: var(--sme-text-muted); font-size: .8rem; font-weight: 600; }
.sme-pf-legacy {
    padding: .75rem .875rem; margin-bottom: .75rem;
    border-left: 3px solid var(--sme-warning);
    border-radius: var(--sme-radius-sm);
    background: var(--sme-warning-soft);
}
.sme-pf-legacy small { display: block; margin-bottom: .25rem; color: var(--sme-text-secondary); font-size: .75rem; }
.sme-pf-legacy p { margin: 0; font-size: .85rem; color: var(--sme-text); }

/* --------------------------------------------------------------------------
   Leaving with unsaved changes
   -------------------------------------------------------------------------- */
.sme-leave {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 1rem;
    background: rgba(22, 27, 37, .55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sme-leave[hidden] { display: none; }
.sme-leave-box {
    width: 100%; max-width: 25rem; padding: 1.5rem;
    border-radius: var(--sme-radius-lg);
    background: var(--sme-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    text-align: center;
    animation: sme-leave-in .22s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes sme-leave-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sme-leave-box { animation: none; } }
.sme-leave-box > i { font-size: var(--sme-icon-xl); color: var(--sme-brand); }
.sme-leave-box h3 { margin: .5rem 0 .35rem; font-size: 1.15rem; font-weight: 800; color: var(--sme-text); }
.sme-leave-box p { margin: 0 0 1.25rem; color: var(--sme-text-secondary); font-size: .9rem; line-height: 1.55; }
.sme-leave-actions { display: grid; gap: .5rem; }
.sme-leave-stay, .sme-leave-go {
    min-height: 48px; padding: 0 1.25rem;
    border: 0; border-radius: var(--sme-radius-md);
    font-size: .95rem; font-weight: 700; cursor: pointer;
}
.sme-leave-stay { background: var(--sme-brand); color: var(--sme-on-brand); }
.sme-leave-stay:hover { background: var(--sme-brand-hover); }
.sme-leave-stay:focus { background-color: var(--sme-brand); }
.sme-leave-go { background: transparent; color: var(--sme-text-secondary); }
.sme-leave-go:hover { background: var(--sme-surface-hover); color: var(--sme-text); }
.sme-leave-go:focus { background-color: transparent; }

@media (min-width: 30rem) {
    .sme-leave { align-items: center; }
    .sme-leave-actions { grid-template-columns: 1fr 1fr; direction: rtl; }
    .sme-leave-actions > * { direction: ltr; }
}


/* ==========================================================================
   Root font size: one fixed value
   ==========================================================================
   materialize.min.css sets a responsive root: 14px below 992px, 14.5px to
   1199px, 15px above. Because rem is root-relative, that quietly rescaled the
   entire design system with viewport width, and always downward from the 16px
   the tokens were authored against. Two consequences:

     - text was smallest exactly where it is hardest to read, on a phone, where
       --sme-text-xs landed at 10.5px and body copy at 14px;
     - nothing sized in rem held still. The same component measured three
       different sizes at three widths, so a value that looked right on a
       desktop was wrong on mobile and neither was what was specified.

   Pinned to 16px, the browser default and the value every token assumes. Sizes
   now mean what they say and stop changing underneath the layout.

   This loads after materialize.min.css and matches its specificity, so source
   order is enough and no !important is needed.
   ========================================================================== */
html { font-size: 16px; }


/* --------------------------------------------------------------------------
   Prompt answers on a profile
   --------------------------------------------------------------------------
   The question is set small and quiet, the answer large and plain. It is the
   member's own words and the most human thing on the page, so it gets the
   weight; the prompt is only there to make the answer make sense.
   -------------------------------------------------------------------------- */
.sme-prompt-answers { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.sme-prompt-answer {
    padding: .875rem 1rem;
    border: 1px solid var(--sme-border);
    border-radius: var(--sme-radius-md);
    background: var(--sme-surface);
}
.sme-prompt-q {
    display: block;
    margin-bottom: .3rem;
    color: var(--sme-text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.sme-prompt-answer p {
    margin: 0;
    color: var(--sme-text);
    /* px, not rem: the root font size is now pinned, but these two are the
       thing people actually read on a profile and should not drift again. */
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    overflow-wrap: break-word;
}


/* ==========================================================================
   Profile attribute picker
   ==========================================================================
   Tap-to-choose chips instead of dropdowns and free-text boxes.

   Colour is varied per field on purpose. When every icon on a page is brand
   pink they stop being navigation and become wallpaper: the eye has nothing to
   sort by and reads the labels instead, which is exactly what icons are meant
   to save it from. Each field group gets its own hue, held at the same
   lightness so no one group shouts louder than the rest.
   ========================================================================== */
.sme-attr { margin: 0 0 1.5rem; }

.sme-attr-section { margin-bottom: 1.75rem; }
.sme-attr-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sme-text);
}
.sme-attr-head > i { font-size: var(--sme-icon-md); color: var(--sme-brand); }
.sme-attr-count {
    margin-left: auto;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--sme-surface-muted);
    color: var(--sme-text-secondary);
    font-size: .75rem;
    font-weight: 700;
}
.sme-attr-hint { margin: -.5rem 0 .875rem; color: var(--sme-text-secondary); font-size: .85rem; line-height: 1.5; }

.sme-attr-field { margin-bottom: 1.25rem; }
.sme-attr-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    color: var(--sme-text);
    font-size: .88rem;
    font-weight: 700;
}
.sme-attr-label > i { font-size: 16px; color: var(--sme-text-muted); }
.sme-attr-label b {
    margin-left: auto;
    color: var(--sme-brand);
    font-size: .82rem;
    font-weight: 800;
}

/* --- Chips ---------------------------------------------------------------- */
.sme-attr-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.sme-attr-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* 44px: these are the primary control on a touch screen. */
    min-height: 44px;
    padding: .5rem .8rem;
    border: 1.5px solid var(--sme-border);
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sme-attr-chip > i { font-size: 17px; color: var(--sme-text-muted); flex: 0 0 auto; transition: color .15s ease; }
.sme-attr-chip:hover { border-color: var(--sme-border-strong); background: var(--sme-surface-hover); }
.sme-attr-chip:focus-visible { outline: none; box-shadow: var(--sme-ring); }
/* Materialize paints button:focus a teal that belongs to no palette here and is
   more specific than a class, so the focused chip turned teal on tap. */
.sme-attr-chip:focus { background-color: var(--sme-surface); }
.sme-attr-chip.is-on:focus { background-color: var(--sme-brand-50); }

/* Selected state. The tone comes from the field, set on the parent. */
.sme-attr-chip.is-on {
    border-color: var(--attr-accent, var(--sme-brand));
    background: var(--attr-soft, var(--sme-brand-50));
    color: var(--attr-ink, var(--sme-brand-800));
    font-weight: 700;
}
.sme-attr-chip.is-on > i { color: var(--attr-accent, var(--sme-brand)); }

/* --- Field tones ----------------------------------------------------------
   Five hues, each at a lightness that keeps the label readable on the soft
   background. Set on the field so every chip inside inherits. */
.sme-attr-field[data-tone="rose"]   { --attr-accent: #A32654; --attr-soft: #FFF0F6; --attr-ink: #7C1A3E; }
.sme-attr-field[data-tone="violet"] { --attr-accent: #7C4DFF; --attr-soft: #F1ECFF; --attr-ink: #3B1E8F; }
.sme-attr-field[data-tone="blue"]   { --attr-accent: #2E90FA; --attr-soft: #E8F2FE; --attr-ink: #10437E; }
.sme-attr-field[data-tone="teal"]   { --attr-accent: #0E9384; --attr-soft: #E3F6F3; --attr-ink: #0A5750; }
.sme-attr-field[data-tone="amber"]  { --attr-accent: #D4881A; --attr-soft: #FEF4E6; --attr-ink: #7A4C08; }
.sme-attr-field[data-tone="slate"]  { --attr-accent: #505A6B; --attr-soft: #EFF1F5; --attr-ink: #262D3A; }

/* Interests use the brand, since they are the one group that is about
   personality rather than a category of fact. */
.sme-attr-chip--interest.is-on {
    border-color: var(--sme-brand);
    background: var(--sme-brand-50);
    color: var(--sme-brand-800);
}
.sme-attr-chip--interest.is-on > i { color: var(--sme-brand); }

/* --- Interest groups ------------------------------------------------------ */
.sme-attr-group { margin-bottom: 1rem; }
.sme-attr-group-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    color: var(--sme-text-secondary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sme-attr-group-label > i { font-size: 15px; color: var(--sme-text-subtle); }
.sme-attr-legacy .sme-attr-group-label > i { color: var(--sme-warning); }

/* --- Free-text companion -------------------------------------------------- */
.sme-attr-free { display: block; margin-top: .625rem; }
.sme-attr-free > span {
    display: block;
    margin-bottom: .3rem;
    color: var(--sme-text-secondary);
    font-size: .8rem;
    font-weight: 600;
}
.sme-attr-free input {
    width: 100%;
    min-height: 46px;
    padding: 0 .875rem;
    /* 16px keeps iOS from zooming the page on focus. */
    font-size: 16px !important;
    border: 1px solid var(--sme-border) !important;
    border-radius: var(--sme-radius-md) !important;
    background: var(--sme-surface) !important;
    box-shadow: none !important;
}
.sme-attr-free input:focus {
    outline: none;
    border-color: var(--sme-brand) !important;
    box-shadow: var(--sme-ring) !important;
}

/* --- Height slider -------------------------------------------------------- */
.sme-attr-field input[type="range"] {
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: var(--sme-brand);
    -webkit-appearance: none;
    appearance: none;
}
.sme-attr-field input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px; background: var(--sme-neutral-200);
}
.sme-attr-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin-top: -9px;
    border: 2px solid var(--sme-surface); border-radius: 50%;
    background: var(--sme-neutral-400);
    box-shadow: 0 2px 6px rgba(27, 19, 64, .22);
    cursor: pointer;
    transition: background-color .15s ease;
}
/* Grey until it has actually been set, so an untouched slider does not look
   like an answer. */
.sme-attr-field input[type="range"].is-set::-webkit-slider-thumb { background: var(--sme-brand); }
.sme-attr-field input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--sme-neutral-200); }
.sme-attr-field input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px; border: 2px solid var(--sme-surface);
    border-radius: 50%; background: var(--sme-neutral-400); cursor: pointer;
}
.sme-attr-field input[type="range"].is-set::-moz-range-thumb { background: var(--sme-brand); }
/* Materialize injects a value bubble for every range and anchors it to a
   .range-field ancestor; there is none here, so it would float loose. */
.sme-attr-field .thumb { display: none !important; }

.sme-attr-clear {
    margin-top: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--sme-border);
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-text-secondary);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.sme-attr-clear:hover { color: var(--sme-text); background: var(--sme-surface-hover); }
.sme-attr-clear:focus { background-color: var(--sme-surface); }

@media (max-width: 30rem) {
    .sme-attr-chip { font-size: .84rem; padding: .5rem .7rem; }
    .sme-attr-chip > i { font-size: 16px; }
}

/* ==========================================================================
   Profile display: icons on the attribute tiles
   ========================================================================== */
.dt_profile_info .info_title {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.dt_profile_info .info_title i {
    font-size: 14px;
    color: var(--sme-text-subtle);
    flex: 0 0 auto;
}
/* The value line carries the option's own icon, which is the one that actually
   tells you something: a crossed-out cigarette reads faster than the words. */
.dt_profile_info .info_value {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}
.dt_profile_info .info_value > i {
    font-size: 17px;
    margin-top: 1px;
    flex: 0 0 auto;
    color: var(--attr-accent, var(--sme-brand));
}
.dt_profile_info > .row[data-tone="rose"]   { --attr-accent: #A32654; }
.dt_profile_info > .row[data-tone="violet"] { --attr-accent: #7C4DFF; }
.dt_profile_info > .row[data-tone="blue"]   { --attr-accent: #2E90FA; }
.dt_profile_info > .row[data-tone="teal"]   { --attr-accent: #0E9384; }
.dt_profile_info > .row[data-tone="amber"]  { --attr-accent: #D4881A; }
.dt_profile_info > .row[data-tone="slate"]  { --attr-accent: #505A6B; }

/* Interest chips on a profile. */
.sme-profile-interests { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sme-profile-interests li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--sme-brand-50);
    color: var(--sme-brand-800);
    font-size: .85rem;
    font-weight: 600;
}
.sme-profile-interests i { font-size: 15px; color: var(--sme-brand); }


/* --------------------------------------------------------------------------
   Onboarding: the two optional steps
   -------------------------------------------------------------------------- */
.sme-onb-skip {
    min-height: 54px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--sme-radius-md);
    background: transparent;
    color: var(--sme-text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}
.sme-onb-skip:hover { color: var(--sme-text); background: var(--sme-surface-hover); }
/* Materialize paints button:focus teal and is more specific than a class. */
.sme-onb-skip:focus { background-color: transparent; }

.sme-onb-interests { max-height: 24rem; overflow-y: auto; margin-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.sme-onb-igroup { margin-bottom: 1rem; }
.sme-onb-igroup-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    color: var(--sme-text-secondary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sme-onb-igroup-label > i { font-size: 15px; color: var(--sme-text-subtle); }

.sme-onb-ichips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sme-onb-ichip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .45rem .75rem;
    border: 1.5px solid var(--sme-border);
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-text);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sme-onb-ichip > i { font-size: 16px; color: var(--sme-text-muted); flex: 0 0 auto; }
.sme-onb-ichip:hover { border-color: var(--sme-brand-300); background: var(--sme-brand-50); }
.sme-onb-ichip:focus { background-color: var(--sme-surface); }
.sme-onb-ichip.is-on {
    border-color: var(--sme-brand);
    background: var(--sme-brand);
    color: var(--sme-on-brand);
    font-weight: 700;
}
.sme-onb-ichip.is-on:focus { background-color: var(--sme-brand); }
.sme-onb-ichip.is-on > i { color: var(--sme-on-brand); }


/* --------------------------------------------------------------------------
   Discovery scope note
   --------------------------------------------------------------------------
   Explains a feed that reached past the member's own country. Informational,
   not a warning: the engine is working as intended and the member has simply
   run out of local matches, so it uses the neutral info tone rather than amber.
   The control sits inside it, because a note that explains a setting without
   offering it is only half an answer.
   -------------------------------------------------------------------------- */
.sme-scope-note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border: 1px solid rgba(46, 144, 250, .28);
    border-radius: var(--sme-radius-md);
    background: var(--sme-info-soft);
}
.sme-scope-note > i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: var(--sme-icon-md);
    color: var(--sme-info);
}
.sme-scope-note p {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #10437E;
    font-size: .88rem;
    line-height: 1.5;
}
.sme-scope-note a {
    flex: 0 0 auto;
    align-self: center;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--sme-surface);
    color: var(--sme-info);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.sme-scope-note a:hover { background: #fff; color: #10437E; }

@media (max-width: 30rem) {
    /* The link drops below the text rather than squeezing it to two words. */
    .sme-scope-note { flex-wrap: wrap; }
    .sme-scope-note p { flex: 1 1 100%; order: 2; }
    .sme-scope-note > i { order: 1; }
    .sme-scope-note a { order: 3; margin-top: .5rem; }
}


/* Registration: what happens next.
   Signup is now four fields, which is short enough that people wonder if it
   really is that short. Saying what the next screen asks for sets the
   expectation instead of leaving it as a surprise. */
.sme-register-next {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: .75rem .875rem;
    border-radius: var(--sme-radius-md);
    background: var(--sme-neutral-50);
    color: var(--sme-text-secondary);
    font-size: .82rem;
    line-height: 1.5;
}
.sme-register-next > i { flex: 0 0 auto; margin-top: 1px; font-size: var(--sme-icon-sm); color: var(--sme-text-muted); }

/* ==========================================================================
   Identity verification
   ========================================================================== */

.sme-verify-wrap { padding: clamp(20px, 4vw, 44px) 16px 60px; }
.sme-verify-shell { width: 100%; max-width: 680px; margin-inline: auto; }

.sme-verify-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
.sme-verify-head h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0; font-weight: 700; letter-spacing: -.02em; }
.sme-verify-head p { color: var(--sme-text-muted); max-width: 52ch; margin: 0; line-height: 1.6; }

.sme-verify-step { border: 1px solid var(--sme-border); border-radius: 16px; padding: 22px; margin-bottom: 18px; background: var(--sme-surface); }
.sme-verify-step h2 { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 700; margin: 0 0 14px; }
.sme-verify-step__n {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--sme-primary-dark, #a32654), var(--sme-primary, #a32654));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: .9375rem; font-weight: 800;
}
.sme-verify-hint { color: var(--sme-text-muted); font-size: .9375rem; line-height: 1.6; margin: 0 0 14px; }

.sme-verify-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.sme-verify-field > span { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sme-text-muted); }
.sme-verify-wrap select.browser-default {
    height: 50px !important; font-size: 16px !important; border-radius: 10px !important;
    padding: 0 14px !important; width: 100% !important;
}

/* Document type picker */
.sme-verify-doctypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.sme-verify-doc input { position: absolute; opacity: 0; pointer-events: none; }
.sme-verify-doc__box {
    display: flex; align-items: center; gap: 11px; min-height: 56px;
    padding: 12px 15px; border: 1.5px solid var(--sme-border); border-radius: 12px;
    cursor: pointer; font-weight: 600; font-size: .9375rem; transition: border-color .15s ease, background-color .15s ease;
}
.sme-verify-doc__box i { font-size: 1.5rem; color: var(--sme-primary); flex: 0 0 auto; }
.sme-verify-doc input:checked + .sme-verify-doc__box { border-color: var(--sme-primary); background: var(--sme-brand-soft, #fff0f6); }
.sme-verify-doc input:focus-visible + .sme-verify-doc__box { outline: 3px solid var(--sme-primary); outline-offset: 2px; }

.sme-verify-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sme-verify-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--sme-text-muted); line-height: 1.5; }
.sme-verify-checklist i { color: var(--sme-success, #17994f); font-size: 1.25rem; flex: 0 0 auto; }

/* Upload target */
.sme-verify-drop, .sme-verify-fallback {
    display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
    border: 2px dashed var(--sme-border); border-radius: 14px; padding: 26px 18px;
    cursor: pointer; transition: border-color .15s ease;
}
.sme-verify-drop:hover, .sme-verify-fallback:hover { border-color: var(--sme-primary); }
.sme-verify-drop i, .sme-verify-fallback i { font-size: 2rem; color: var(--sme-primary); }
.sme-verify-drop strong { font-size: 1rem; }
.sme-verify-drop span, .sme-verify-fallback span { color: var(--sme-text-muted); font-size: .875rem; }
.sme-verify-drop img { max-width: 100%; max-height: 240px; border-radius: 10px; margin-top: 10px; }
.sme-verify-fallback { flex-direction: row; padding: 14px 16px; margin-top: 14px; text-align: left; }
.sme-verify-fallback i { font-size: 1.375rem; }

/* Camera */
.sme-verify-camera {
    position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
    background: #17121b; display: flex; align-items: center; justify-content: center;
}
.sme-verify-camera video, .sme-verify-camera img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mirrored so moving left moves the image left, which is what people expect
   of a front camera and makes framing your own face far easier. */
.sme-verify-camera video { transform: scaleX(-1); }
.sme-verify-camera__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.6); }
.sme-verify-camera__empty i { font-size: 2.5rem; }
.sme-verify-camera__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Buttons */
.sme-verify-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 13px 24px; border-radius: 999px; border: 2px solid transparent;
    font-size: 1rem; font-weight: 650; cursor: pointer; text-decoration: none; transition: transform .15s ease;
}
.sme-verify-btn i { font-size: 1.25rem; }
.sme-verify-btn--primary { background: linear-gradient(135deg, var(--sme-primary-dark, #a32654), var(--sme-primary, #a32654)); color: #fff; }
.sme-verify-btn--ghost { background: var(--sme-surface); color: var(--sme-text); border-color: var(--sme-border); }
.sme-verify-btn--block { width: 100%; margin-top: 6px; }
.sme-verify-btn:hover { transform: translateY(-1px); }
.sme-verify-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* Status banners */
.sme-verify-status { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; margin-bottom: 18px; }
.sme-verify-status i { font-size: 1.75rem; flex: 0 0 auto; }
.sme-verify-status strong { display: block; font-size: 1.0625rem; margin-bottom: 3px; }
.sme-verify-status span { color: var(--sme-text-muted); font-size: .9375rem; line-height: 1.55; }
.sme-verify-status--ok   { background: rgba(14,165,165,.10); border: 1px solid rgba(14,165,165,.30); }
.sme-verify-status--ok i { color: #0EA5A5; }
.sme-verify-status--wait { background: rgba(245,166,35,.10); border: 1px solid rgba(245,166,35,.30); }
.sme-verify-status--wait i { color: #C77E0A; }
.sme-verify-status--no   { background: rgba(214,48,49,.08); border: 1px solid rgba(214,48,49,.28); }
.sme-verify-status--no i { color: #C0392B; }

.sme-verify-alert { background: rgba(214,48,49,.08); border: 1px solid rgba(214,48,49,.28); color: #A32020; border-radius: 12px; padding: 13px 16px; font-size: .9375rem; margin-bottom: 14px; }
body.night_mode .sme-verify-alert { color: #FF9C96; }

.sme-verify-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .875rem; color: var(--sme-text-muted); line-height: 1.55; }
.sme-verify-note i { color: var(--sme-primary); font-size: 1.125rem; flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 420px) {
    .sme-verify-camera__actions .sme-verify-btn { width: 100%; }
}

/* Verification prompt on the profile settings screen, and the state tag on the
   settings nav item. Both exist so a member can see where they stand without
   opening the verification page. */
.sme-verify-prompt {
    display: flex; align-items: center; gap: 15px;
    padding: 16px 18px; border-radius: 14px; margin-bottom: 18px;
    border: 1px solid var(--sme-border); background: var(--sme-surface);
}
.sme-verify-prompt__copy { flex: 1 1 auto; min-width: 0; }
.sme-verify-prompt__copy strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.sme-verify-prompt__copy span { color: var(--sme-text-muted); font-size: .875rem; line-height: 1.5; }
.sme-verify-prompt__btn {
    flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
    padding: 11px 22px; border-radius: 999px; font-weight: 650; font-size: .9375rem;
    text-decoration: none; color: #fff;
    background: linear-gradient(135deg, var(--sme-primary-dark, #a32654), var(--sme-primary, #a32654));
}
.sme-verify-prompt__btn:hover { color: #fff; transform: translateY(-1px); }
.sme-verify-prompt--ok   { border-color: rgba(14,165,165,.32); background: rgba(14,165,165,.07); }
.sme-verify-prompt--wait { border-color: rgba(245,166,35,.32); background: rgba(245,166,35,.07); }

@media (max-width: 560px) {
    .sme-verify-prompt { flex-wrap: wrap; }
    .sme-verify-prompt__btn { width: 100%; justify-content: center; }
}

.sme-nav-tag {
    font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-inline-start: 8px;
    vertical-align: middle; white-space: nowrap;
}
.sme-nav-tag--ok   { background: rgba(14,165,165,.16); color: #0B7FA8; }
.sme-nav-tag--wait { background: rgba(245,166,35,.18); color: #A8620A; }
.sme-nav-tag--no   { background: rgba(214,48,49,.14); color: #B23A38; }

/* Shown only when scripts are disabled. Both auth forms are submitted by
   JavaScript and post natively to a route that does not handle them, so
   without this the visitor gets no account and no explanation. */
.sme-noscript-warn {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 16px; margin-bottom: 16px; border-radius: 12px;
    background: rgba(245,166,35,.10); border: 1px solid rgba(245,166,35,.34);
    color: var(--sme-text); font-size: .9375rem; line-height: 1.5;
}
.sme-noscript-warn i { color: #C77E0A; font-size: 1.375rem; flex: 0 0 auto; }

/* ==========================================================================
   Settings navigation
   ==========================================================================
   Replaces the old .sett_navbar list styling for this component. Grouped,
   one icon set, and sized so it is comfortable on a phone: the previous list
   used 24px inline SVGs in rows that came out around 38px tall, which is under
   the 44px minimum and sat in a single undifferentiated run of thirteen links.
   ========================================================================== */

.sme-settings-nav {
    background: var(--sme-surface);
    border: 1px solid var(--sme-border);
    border-radius: 16px;
    padding: 10px 10px 14px;
}

.sme-settings-nav__heading {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sme-text-muted);
    margin: 16px 12px 6px;
}
.sme-settings-nav__heading:first-child { margin-top: 6px; }

.sme-settings-nav__list {
    list-style: none;
    margin: 0 0 2px;
    padding: 0;
}

.sme-settings-nav__item { margin: 0; }

.sme-settings-nav__item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 48px. Above the 44px minimum with room for the focus ring. */
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--sme-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.sme-settings-nav__item > a:hover {
    background: var(--sme-bg, #faf8fb);
    color: var(--sme-primary-dark, #a32654);
}
.sme-settings-nav__item > a:focus-visible {
    outline: 3px solid var(--sme-primary);
    outline-offset: -2px;
}

.sme-settings-nav__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sme-bg, #faf8fb);
    color: var(--sme-primary);
    font-size: 1.25rem;
    transition: background-color .15s ease, color .15s ease;
}
.sme-settings-nav__label { flex: 1 1 auto; min-width: 0; }

/* The chevron is the affordance that says these go somewhere, which a flat
   list of words does not. Hidden from assistive tech: the link text already
   says where it goes. */
.sme-settings-nav__chev {
    flex: 0 0 auto;
    font-size: 0.875rem;
    color: var(--sme-text-muted);
    opacity: .5;
    transition: transform .15s ease, opacity .15s ease;
}
.sme-settings-nav__item > a:hover .sme-settings-nav__chev { opacity: 1; transform: translateX(2px); }
[dir="rtl"] .sme-settings-nav__chev { transform: scaleX(-1); }
[dir="rtl"] .sme-settings-nav__item > a:hover .sme-settings-nav__chev { transform: scaleX(-1) translateX(2px); }

/* Current page. Marked by colour, weight and a rail, not colour alone, so it
   is still distinguishable without colour vision. aria-current carries it for
   screen readers. */
.sme-settings-nav__item.active > a {
    background: var(--sme-brand-soft, #fff0f6);
    color: var(--sme-primary-dark, #a32654);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--sme-primary);
}
.sme-settings-nav__item.active .sme-settings-nav__icon {
    background: var(--sme-primary);
    color: #fff;
}
.sme-settings-nav__item.active .sme-settings-nav__chev { opacity: 1; }

/* Deleting an account is not the same kind of action as changing a password,
   and the list should not present it as though it were. */
.sme-settings-nav__item.is-danger > a { color: #B23A38; }
.sme-settings-nav__item.is-danger .sme-settings-nav__icon { background: rgba(214,48,49,.10); color: #B23A38; }
.sme-settings-nav__item.is-danger > a:hover { background: rgba(214,48,49,.08); color: #92211F; }

body.night_mode .sme-settings-nav__icon { background: rgba(255,255,255,.07); }
body.night_mode .sme-settings-nav__item > a:hover { background: rgba(255,255,255,.05); }
body.night_mode .sme-settings-nav__item.is-danger > a { color: #FF9C96; }

@media (max-width: 992px) {
    .sme-settings-nav { border-radius: 14px; }
    .sme-settings-nav__item > a { min-height: 52px; font-size: 1rem; }
    .sme-settings-nav__icon { width: 38px; height: 38px; font-size: 1.375rem; }
}

/* ==========================================================================
   Main sidebar icons
   ==========================================================================
   The sidebar carried 26 hand-drawn inline SVGs at mixed optical weights while
   every other navigation in the product had moved to Phosphor. Nineteen are now
   the shared set, sized and tinted like the settings nav so the two read as one
   system rather than two eras of the same app.
   ========================================================================== */

.sme-nav-ico {
    font-size: 1.375rem;
    line-height: 1;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--sme-bg, #faf8fb);
    color: var(--sme-brand, #a32654);
    transition: background-color .15s ease, color .15s ease;
}

.sidebar li > a:hover .sme-nav-ico,
.to_side_nav li > a:hover .sme-nav-ico { background: var(--sme-brand-50, #fff0f6); }

/* Current page. Filled tile plus white glyph, which stays legible if the row
   background is also tinted. */
.sidebar li.active > a .sme-nav-ico,
.to_side_nav li.active > a .sme-nav-ico,
li.active > a .sme-nav-ico {
    background: var(--sme-brand, #a32654);
    color: #fff;
}

/* The sidebar rows were built around a 24px inline svg. The icon is now a
   tile, so the row needs a little more height and a gap rather than the old
   fixed margin. */
.sidebar li > a,
.to_side_nav li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
}

body.night_mode .sme-nav-ico { background: rgba(255,255,255,.07); }

/* Profile options trigger (Block / Report).
 *
 * The inline SVG carries width="24" as an attribute but no CSS width, and the
 * button is a flex container, so the icon was flex-shrunk to zero. What
 * remained was an empty bordered box beside the member's name with no way to
 * tell what it did. An attribute width is not a flex basis. */
.dt_usr_opts_mnu .dropdown-trigger svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

/* Sidebar popularity gauge.
 *
 * Sized only under .to_sidebar and .find_matches_cont, so anywhere else it fell
 * back to its raw 90px SVG and rendered as a stray portrait floating between
 * two profile sections, with nothing to say what it was. Given a size wherever
 * it appears rather than only in the two contexts that were anticipated. */
.user_popularity_icn {
    width: 96px;
    max-width: 100%;
}
.user_popularity_icn svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Profile attribute icons ------------------------------------------
 *
 * Four tones, taken from the sections the fields already declare: who someone
 * is, how they look, how they live, and everything else. Every icon in one
 * colour made a profile read as a form printout; a different colour per field
 * reads as decoration applied at random. Grouping by meaning is what lets the
 * eye skim the page.
 *
 * Sets --attr-accent rather than color: the profile already resolves attribute
 * icon colour through that variable, via data-tone on the row. Declaring color
 * here would have been a second owner competing with the first, and it lost the
 * cascade anyway. Feeding the existing variable means one mechanism, and the
 * hues are the four this file already defines. */
.sme-attr-ico {
    font-size: 1rem;
    margin-right: 7px;
    vertical-align: -1px;
    opacity: .95;
}

.sme-attr-ico--identity  { --attr-accent: #A32654; }   /* brand: who they are   */
.sme-attr-ico--looks     { --attr-accent: #2E90FA; }   /* blue: appearance      */
.sme-attr-ico--lifestyle { --attr-accent: #0E9384; }   /* teal: how they live   */
.sme-attr-ico--neutral   { --attr-accent: #7C4DFF; }   /* violet: everything else */

/* Dark mode lifts each hue rather than switching to a different palette, so a
   profile is recognisably the same page in both themes. */
[data-sme-theme='dark'] .sme-attr-ico--identity  { --attr-accent: #FF85BC; }
[data-sme-theme='dark'] .sme-attr-ico--looks     { --attr-accent: #8FB8F6; }
[data-sme-theme='dark'] .sme-attr-ico--lifestyle { --attr-accent: #6FD9C0; }
[data-sme-theme='dark'] .sme-attr-ico--neutral   { --attr-accent: #B9A0F5; }

/* Empty-state call to action.
 *
 * These pages previously ended at a sentence. A member arriving at an empty
 * Matches or Visits page had nothing to do there and no route onward, which on
 * a new account is most of their first session. */
.empty_state .sme-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    min-height: 44px;
    padding: 0 22px;
}

/* Paid Featured placements. The disclosure stays visible above the same
   eligibility-filtered profile card used in organic discovery. */
.sme-featured-section {
    margin: 22px 0 30px;
    padding: 20px;
    border: 1px solid rgba(163, 38, 84, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 247, 250, .96), rgba(255, 255, 255, .92));
}
.sme-featured-section__heading h3 {
    margin: 0;
    color: var(--sme-brand, #a32654);
}
.sme-featured-section__heading h3 i { margin-right: 7px; }
.sme-featured-section__heading p {
    margin: 6px 0 16px;
    color: var(--sme-muted, #667085);
    font-size: .92rem;
}
.sme-featured-shop-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: -6px 0 16px;
    padding: 0 14px;
    border: 1px solid rgba(163, 38, 84, .35);
    border-radius: 999px;
    color: var(--sme-brand, #a32654);
    font-weight: 700;
    text-decoration: none;
}
.sme-featured-shop-cta:hover { background: rgba(163, 38, 84, .08); }
.sme-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
    gap: 16px;
}
.sme-featured-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(163, 38, 84, .2);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(73, 25, 44, .08);
}
.sme-featured-card__disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    color: #6d1737;
    background: #fff0c9;
    font-size: .82rem;
    font-weight: 700;
}
.sme-featured-card__disclosure small {
    color: #694e1a;
    font-size: .72rem;
    font-weight: 600;
}
.sme-featured-card__disclosure i { color: #bd8616; }
.sme-featured-card .random_user_item {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}
.sme-featured-card .sme-discover-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sme-featured-shop {
    margin: 24px auto 30px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(163, 38, 84, .2);
    border-radius: 22px;
    background: linear-gradient(145deg, #fffaf0, #fff);
    box-shadow: 0 12px 30px rgba(73, 25, 44, .07);
}
.sme-featured-shop__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.sme-featured-eyebrow {
    margin: 0 0 4px;
    color: var(--sme-brand, #a32654);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sme-featured-shop__intro h3 {
    margin: 0 0 8px;
    color: #462237;
}
.sme-featured-shop__intro h3 i { color: #c28a1a; }
.sme-featured-shop__intro p:last-child {
    max-width: 720px;
    margin: 0;
    color: #625563;
}
.sme-featured-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(177, 126, 23, .28);
    border-radius: 999px;
    background: #fff4d6;
    color: #67470d;
    font-weight: 700;
}
.sme-featured-balance .sme-gold-coin { width: 22px; height: 22px; }
.sme-featured-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 14px;
}
.sme-featured-product {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(91, 63, 83, .16);
    border-radius: 16px;
    background: #fff;
}
.sme-featured-product--best {
    border: 2px solid #d3a137;
    box-shadow: 0 7px 18px rgba(191, 142, 34, .13);
}
.sme-featured-product__badge {
    align-self: flex-start;
    margin: -4px 0 9px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff1c9;
    color: #77520d;
    font-size: .74rem;
    font-weight: 800;
}
.sme-featured-product h4 { margin: 0 0 5px; color: #462237; }
.sme-featured-product__duration,
.sme-featured-product__placement { margin: 0 0 5px; color: #6b5d69; }
.sme-featured-product__saving { margin: 0 0 8px; color: #267451; font-weight: 700; }
.sme-featured-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-height: 82px;
    margin-top: auto;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #8a1c48;
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.sme-featured-buy > span:first-child { display: flex; align-items: center; gap: 7px; }
.sme-featured-buy .sme-gold-coin,
.sme-featured-history .sme-gold-coin {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.sme-featured-buy__label { font-size: .88rem; font-weight: 700; }
.sme-featured-buy:hover:not(:disabled) { background: #6e1539; }
.sme-featured-buy:focus-visible,
.sme-featured-product__get-coins:focus-visible {
    outline: 3px solid #d3a137;
    outline-offset: 3px;
}
.sme-featured-buy:disabled { cursor: not-allowed; opacity: .55; }
.sme-featured-product__get-coins { margin-top: 8px; color: var(--sme-brand, #a32654); font-weight: 700; }
.sme-featured-notice {
    margin: 14px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f4f0f4;
    color: #4d4350;
}
.sme-featured-notice:empty { display: none; }
.sme-featured-notice--success { background: #e8f7ed; color: #145b32; }
.sme-featured-notice--error { background: #fff0ee; color: #9f2820; }
.sme-featured-history { margin-top: 24px; }
.sme-featured-history h4 { margin: 0 0 10px; color: #462237; }
.sme-featured-history ul { margin: 0; padding: 0; list-style: none; }
.sme-featured-history li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(91, 63, 83, .12);
}
.sme-featured-history__main,
.sme-featured-history__time { display: flex; flex-direction: column; gap: 4px; }
.sme-featured-history__main small,
.sme-featured-history__time small { color: #716775; }
.sme-featured-history__time { align-items: flex-end; text-align: right; }
.sme-featured-status {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 99px;
    background: #eee9ef;
    color: #554b58;
    font-size: .75rem;
    font-weight: 700;
}
.sme-featured-status--active { background: #e7f6ec; color: #176b3b; }
.sme-featured-status--scheduled { background: #eaf1ff; color: #345897; }
.sme-featured-status--expired,
.sme-featured-status--cancelled { background: #f1edf1; color: #716775; }
.sme-featured-status--refunded { background: #fff0ee; color: #9f2820; }

[data-sme-theme='dark'] .sme-featured-section,
[data-sme-theme='dark'] .sme-featured-shop { background: #211b22; border-color: rgba(255,255,255,.13); }
[data-sme-theme='dark'] .sme-featured-card,
[data-sme-theme='dark'] .sme-featured-product { background: #2c252e; border-color: rgba(255,255,255,.15); }
[data-sme-theme='dark'] .sme-featured-shop__intro h3,
[data-sme-theme='dark'] .sme-featured-product h4,
[data-sme-theme='dark'] .sme-featured-history h4 { color: #f6eaf0; }
[data-sme-theme='dark'] .sme-featured-shop__intro p:last-child,
[data-sme-theme='dark'] .sme-featured-product__duration,
[data-sme-theme='dark'] .sme-featured-product__placement,
[data-sme-theme='dark'] .sme-featured-history__main small,
[data-sme-theme='dark'] .sme-featured-history__time small { color: #d1c5d1; }
[data-sme-theme='dark'] .sme-featured-balance { background: #3b3018; color: #f7dfa3; }
[data-sme-theme='dark'] .sme-featured-section__heading p { color: #d1c5d1; }
@media (max-width: 640px) {
    .sme-featured-shop__intro { flex-direction: column; }
    .sme-featured-balance { align-self: flex-start; }
    .sme-featured-history li { flex-direction: column; }
    .sme-featured-history__time { align-items: flex-start; text-align: left; }
    .sme-featured-section { padding: 14px; }
}