/* The location gate.
 *
 * Uses the platform's own tokens rather than fixed colours, so it follows the
 * dark pink brand and both themes without a second definition to keep in sync.
 * Every value falls back, because this screen has to render correctly on the
 * one page where something has already gone wrong.
 */

.sme-locgate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px 16px;
}

.sme-locgate__card {
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 40px 28px 32px;
    border-radius: 20px;
    background: var(--sme-surface, var(--c-ds-background-primary, #fff));
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.18));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* ---- the mark ---------------------------------------------------------- */

.sme-locgate__mark {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sme-brand, #c2185b);
}

.sme-locgate__mark > svg {
    position: relative;
    z-index: 2;
}

/* Rings expand outward on a stagger, so the mark reads as a signal being sent
 * rather than an error being displayed. */
.sme-locgate__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 2px solid var(--sme-brand, #c2185b);
    opacity: 0;
    animation: sme-locgate-ping 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.sme-locgate__ring--2 { animation-delay: 0.55s; }
.sme-locgate__ring--3 { animation-delay: 1.1s; }

@keyframes sme-locgate-ping {
    0%   { transform: scale(0.5); opacity: 0.55; }
    70%  { opacity: 0.06; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* A refusal is a settled state, not a search in progress, so the rings stop
 * and the mark goes quiet. Animating here would suggest something is still
 * being attempted when nothing is. */
.sme-locgate[data-state="denied"] .sme-locgate__ring {
    animation: none;
    opacity: 0.12;
}

.sme-locgate[data-state="denied"] .sme-locgate__mark {
    color: var(--sme-text-muted, #7c828e);
}

/* ---- copy -------------------------------------------------------------- */

.sme-locgate__title {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--sme-text, var(--c-ds-text-primary, #12141a));
}

.sme-locgate__body {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sme-text-muted, #6b7280);
}

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

.sme-locgate__btn {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--sme-brand, #c2185b);
    transition: transform 0.16s ease, filter 0.16s ease;
}

.sme-locgate__btn:hover { filter: brightness(1.07); }
.sme-locgate__btn:active { transform: scale(0.98); }

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

.sme-locgate__btn[disabled] { cursor: default; filter: none; opacity: 0.85; }

.sme-locgate__btn--ghost {
    margin-top: 6px;
    color: var(--sme-brand, #c2185b);
    background: transparent;
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.28));
}

.sme-locgate__btn--ghost:hover { background: rgba(194, 24, 91, 0.06); }

/* The busy state swaps the label for a spinner in place, so the button does not
 * change size and the layout does not jump while the browser prompt is open. */
.sme-locgate__btn-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    opacity: 0;
    animation: sme-locgate-spin 0.7s linear infinite;
}

.sme-locgate__btn.is-busy .sme-locgate__btn-label { opacity: 0; }
.sme-locgate__btn.is-busy .sme-locgate__btn-spin  { opacity: 1; }

@keyframes sme-locgate-spin { to { transform: rotate(360deg); } }

/* ---- refused: the manual route ----------------------------------------- */

.sme-locgate__steps {
    margin: 0 0 16px;
    padding: 16px 18px;
    text-align: start;
    border-radius: 14px;
    background: var(--sme-surface-alt, rgba(128, 128, 140, 0.07));
}

.sme-locgate__steps-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sme-text-muted, #6b7280);
}

.sme-locgate__steps ol {
    margin: 0;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sme-text, #12141a);
}

/* ---- reassurance and errors -------------------------------------------- */

.sme-locgate__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 20px 0 0;
    text-align: start;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sme-text-muted, #6b7280);
}

.sme-locgate__note > svg { flex: none; margin-top: 2px; opacity: 0.75; }

.sme-locgate__error {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sme-danger, #b3261e);
    background: rgba(179, 38, 30, 0.08);
}

.sme-locgate__error[hidden] { display: none; }

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sme-locgate__ring,
    .sme-locgate__btn-spin {
        animation: none;
    }
    .sme-locgate__ring { opacity: 0.14; }
    .sme-locgate__btn-spin { opacity: 1; border-top-color: rgba(255, 255, 255, 0.9); }
    .sme-locgate__btn { transition: none; }
}

@media (max-width: 480px) {
    .sme-locgate { min-height: 52vh; padding: 16px 12px; }
    .sme-locgate__card { padding: 32px 20px 26px; }
    .sme-locgate__title { font-size: 20px; }
}

/* ========================================================================
 * Swipe card additions
 * ====================================================================== */

/* Presence.
 *
 * A dot and two words, and only when the member is actually online. There is
 * deliberately no offline variant of this block: an absent member shows
 * nothing at all rather than a grey dot or a "last seen" line.
 */
.sme-card-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.sme-card-presence__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #21c17a;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px rgba(33, 193, 122, 0.9);
    animation: sme-presence-breathe 2.4s ease-in-out infinite;
}

@keyframes sme-presence-breathe {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.82); opacity: 0.82; }
}

/* Rewind sits with the other actions but reads as secondary: it undoes a
 * decision rather than making one, so it does not compete with Like. */
.sme-action-rewind {
    color: #f5b301;
}

.sme-action-rewind:hover {
    color: #ffc61a;
}

/* Email not confirmed: the reason, in place of the buttons. */
.sme-swipe-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    margin: 14px auto 0;
    padding: 12px 14px;
    border-radius: 14px;
    text-align: start;
    background: var(--sme-surface-alt, rgba(128, 128, 140, 0.09));
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.2));
    color: var(--sme-text, #12141a);
}

.sme-swipe-locked > svg { flex: none; opacity: 0.7; }

.sme-swipe-locked__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
}

.sme-swipe-locked__text strong { font-size: 13.5px; font-weight: 700; }
.sme-swipe-locked__text span   { color: var(--sme-text-muted, #6b7280); }

.sme-swipe-locked__btn {
    flex: none;
    margin-inline-start: auto;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--sme-brand, #c2185b);
    text-decoration: none;
}

.sme-swipe-locked__btn:hover { filter: brightness(1.08); }

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

@media (max-width: 480px) {
    .sme-swipe-locked { flex-wrap: wrap; }
    .sme-swipe-locked__btn { margin-inline-start: 0; width: 100%; text-align: center; }
}

/* ---- profile: the lead "Looking for" card ------------------------------- */

/* Carries the same per-attribute tone as the row further down the page, via
 * --attr-accent, so the two never disagree about what colour this field is.
 * The tint is derived from that one variable rather than being a second colour
 * to keep in sync. */
.sme-goal-card {
    padding: 18px 20px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: var(--sme-surface, rgba(128, 128, 140, 0.06));
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.16));
    border-inline-start: 3px solid var(--attr-accent, var(--sme-brand, #c2185b));
}

.sme-goal-card__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sme-text-muted, #6b7280);
}

.sme-goal-card__value {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sme-text, #12141a);
}

.sme-goal-card__value .sme-attr-ico {
    font-size: 26px;
    line-height: 1;
    color: var(--attr-accent, var(--sme-brand, #c2185b));
}

@media (max-width: 480px) {
    .sme-goal-card { padding: 14px 16px; }
    .sme-goal-card__value { font-size: 17px; }
}

/* Each goal gets its own accent, so the card is recognisable at a glance
 * before the words are read. Keyed off the stored value rather than a tone
 * lookup, because the goal vocabulary is its own thing. */
.sme-goal-card[data-goal="friends"] { --attr-accent: #3aa6d8; }
.sme-goal-card[data-goal="chat"]    { --attr-accent: #6c7bd8; }
.sme-goal-card[data-goal="casual"]  { --attr-accent: #e08b2f; }
.sme-goal-card[data-goal="dating"]  { --attr-accent: #d4569b; }
.sme-goal-card[data-goal="serious"] { --attr-accent: #c2185b; }
.sme-goal-card[data-goal="open"]    { --attr-accent: #3fa88a; }

.sme-goal-card__hint {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sme-text-muted, #6b7280);
}

/* ---- profile: distance ------------------------------------------------- */

.sme-distance-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sme-text, #12141a);
}

.sme-distance-line .sme-ph {
    font-size: 19px;
    line-height: 1;
    color: var(--sme-brand, #c2185b);
}

/* ---- profile: presence -------------------------------------------------- */

/* Same rule as the card: rendered only when the member is online, so there is
 * no offline variant of this block to define. */
.sme-profile-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 10px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    vertical-align: middle;
    color: #12805a;
    background: rgba(33, 193, 122, 0.13);
}

.sme-profile-presence__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #21c17a;
    animation: sme-presence-breathe 2.4s ease-in-out infinite;
}

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

/* ---- premium: balance tiles --------------------------------------------- */

.sme-balance-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sme-balance-tile {
    position: relative;
    padding: 26px 16px 18px;
    border-radius: 14px;
    text-align: center;
    background: var(--sme-surface, rgba(128, 128, 140, 0.06));
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.16));
}

.sme-balance-tile__icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sme-surface, #fff);
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.16));
    font-size: 21px;
}

.sme-balance-tile[data-kind="boost"] .sme-balance-tile__icon { color: #7b5cff; }
.sme-balance-tile[data-kind="super"] .sme-balance-tile__icon { color: #1f9be0; }

.sme-balance-tile__count {
    margin: 6px 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--sme-text, #12141a);
}

.sme-balance-tile__count span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sme-text-muted, #6b7280);
}

.sme-balance-tile__cta {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--sme-brand, #c2185b);
}

.sme-balance-tile__cta:hover { filter: brightness(1.08); }

.sme-balance-tile__note {
    font-size: 12.5px;
    color: var(--sme-text-muted, #6b7280);
}

/* ---- discovery: locked premium toggles ---------------------------------- */

/* Shown rather than hidden: a member should be able to see what a subscription
 * buys. Dimmed and not operable, with the reason stated underneath, so it reads
 * as "not yours yet" rather than as a control that ignores you. */
.sme-disc-toggle.is-locked {
    opacity: 0.62;
    cursor: default;
}

.sme-disc-toggle.is-locked input { cursor: default; }

.sme-disc-toggle.is-locked .sme-disc-switch {
    filter: grayscale(1);
}

.sme-disc-subhead {
    margin: 22px 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sme-text-muted, #6b7280);
}

/* ========================================================================
 * Country selector
 * ====================================================================== */

.sme-cs { position: relative; }

.sme-cs__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sme-text-muted, #6b7280);
}

/* The native select is only hidden once the script has taken over, so a
 * failed script leaves a working control rather than an empty box. */
.sme-cs.is-enhanced .sme-cs__native { display: none; }

.sme-cs__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    text-align: start;
    color: var(--sme-text, #12141a);
    background: var(--sme-surface, #fff);
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.28));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sme-cs__btn:hover { border-color: var(--sme-brand, #c2185b); }

.sme-cs__btn:focus-visible,
.sme-cs__btn[aria-expanded="true"] {
    outline: none;
    border-color: var(--sme-brand, #c2185b);
    box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.15);
}

/* .sme-cs__flag sizing now lives in the country flags block at the end of
   this file. The emoji font-size rule it replaced did nothing for an <img>. */
.sme-cs__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sme-cs__chev  { flex: none; opacity: 0.5; transition: transform 0.15s ease; }
.sme-cs__btn[aria-expanded="true"] .sme-cs__chev { transform: rotate(180deg); }

/* ---- panel -------------------------------------------------------------- */

.sme-cs__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--sme-surface, #fff);
    border: 1px solid var(--sme-border, rgba(128, 128, 140, 0.22));
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
}

.sme-cs__panel[hidden] { display: none; }

.sme-cs__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sme-border, rgba(128, 128, 140, 0.18));
    color: var(--sme-text-muted, #6b7280);
}

.sme-cs__input {
    flex: 1;
    height: 34px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px;
    color: var(--sme-text, #12141a);
    background: transparent;
}

.sme-cs__input:focus { outline: none; }

.sme-cs__list {
    list-style: none;
    margin: 0;
    padding: 4px;
    /* Tall enough to show a useful number of options, short enough that the
     * page behind is still visible on a phone. */
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sme-cs__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
}

.sme-cs__list li[hidden] { display: none; }
.sme-cs__list li:hover,
.sme-cs__list li:focus { outline: none; background: var(--sme-surface-alt, rgba(128, 128, 140, 0.09)); }

.sme-cs__list li.is-on {
    background: rgba(194, 24, 91, 0.10);
    color: var(--sme-brand, #c2185b);
    font-weight: 600;
}

.sme-cs__name { flex: 1; }

/* The ISO code is kept visible: it is the fallback when a platform has no
 * flag glyph, and it disambiguates the several countries whose names begin
 * identically. */
.sme-cs__code {
    font-size: 11.5px;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.sme-cs__empty {
    margin: 0;
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--sme-text-muted, #6b7280);
}

@media (max-width: 480px) {
    .sme-cs__list { max-height: 52vh; }
    .sme-cs__btn  { min-height: 50px; }
}

/* --------------------------------------------------------------------------
   Country flags
   --------------------------------------------------------------------------
   The selector used flag emoji, which Windows has no glyphs for: every flag
   rendered there as the two letters of the country code. These are SVG files
   from the vendored flag-icons set, so the same flag appears on every
   platform.

   A fixed box with object-fit keeps the column edge straight. The set is 4x3,
   but a handful of national flags are not: Nepal is a pennant, Switzerland and
   the Vatican are square. Letting those set their own width would ragged the
   list, so every flag is given the same box and fitted inside it.
   -------------------------------------------------------------------------- */

.sme-cs__flag {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
}

.sme-cs__flagimg,
.sme-inline-country-flag,
.sme-country-flag-img {
    display: block;
    width: 22px;
    height: 16px;
    object-fit: contain;
    /* A hairline keeps flags that are mostly white, Japan and Poland among
       them, from dissolving into a light background. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
    border-radius: 2px;
    background: transparent;
}

.sme-inline-country-flag {
    display: inline-block;
    vertical-align: -2px;
    margin-inline-end: 6px;
}

.sme-cs__globe {
    color: var(--sme-text-muted, #5d5d6b);
    opacity: .7;
}

body.night_mode .sme-cs__flagimg,
body.night_mode .sme-inline-country-flag,
body.night_mode .sme-country-flag-img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}