/* ============================================================
   SoulMatch Africa — UI Polish Layer (loaded after style.css)
   A cohesive, professional design system refinement.
   ============================================================ */
:root {
    --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans Variable', var(--font-sans);

    --sm-ink: #1a1728;
    --sm-ink-2: #4b4762;
    --sm-muted: #7c7893;
    --sm-line: #ece9f5;
    --sm-bg: #f6f5fb;
    --sm-surface: #ffffff;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --shadow-xs: 0 1px 2px rgba(24, 20, 45, .05);
    --shadow-sm: 0 2px 8px rgba(24, 20, 45, .06);
    --shadow: 0 6px 20px rgba(24, 20, 45, .07);
    --shadow-md: 0 12px 32px rgba(24, 20, 45, .10);
    --shadow-lg: 0 22px 55px rgba(24, 20, 45, .14);
    --ring: 0 0 0 4px rgba(123, 47, 247, .16);
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-sans);
    color: var(--sm-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-4 { font-family: var(--font-display); letter-spacing: -0.02em; }
.fw-bold { font-weight: 700 !important; }
.app-body, .admin-body { background: var(--sm-bg); }
.text-muted { color: var(--sm-muted) !important; }
a { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; letter-spacing: -0.01em; border-radius: 12px; transition: all .18s ease; }
.btn-lg { border-radius: 14px; }
.btn:focus-visible { box-shadow: var(--ring); }
.btn-primary { background: var(--sm-gradient); border: none; box-shadow: 0 4px 14px rgba(123, 47, 247, .28); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(123, 47, 247, .34); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { border-color: rgba(123, 47, 247, .35); color: var(--sm-primary); }
.btn-outline-primary:hover { background: var(--sm-primary); border-color: var(--sm-primary); transform: translateY(-1px); }
.btn-outline-secondary { border-color: var(--sm-line); color: var(--sm-ink-2); }
.btn-outline-secondary:hover { background: #f2f0fa; color: var(--sm-ink); border-color: var(--sm-line); }
.btn-light { background: #fff; border-color: var(--sm-line); }
.rounded-pill { border-radius: 50rem !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border: 1.5px solid var(--sm-line); border-radius: 12px; padding: .6rem .85rem;
    color: var(--sm-ink); transition: border-color .15s, box-shadow .15s; background-color: #fff;
}
.form-control::placeholder { color: #b3aec5; }
.form-control:focus, .form-select:focus { border-color: var(--sm-primary); box-shadow: var(--ring); }
.form-control-sm, .form-select-sm { border-radius: 10px; }
.form-label { font-weight: 600; font-size: .875rem; color: var(--sm-ink-2); margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--sm-primary); border-color: var(--sm-primary); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--sm-primary); }
.input-group-text { border-radius: 12px; border: 1.5px solid var(--sm-line); background: #faf9ff; }

/* ---------- Cards & surfaces ---------- */
.card, .admin-card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--sm-line); font-weight: 600; }
.list-group-item { border-color: var(--sm-line); }
.dropdown-menu { border: none; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown-item { border-radius: 9px; padding: .5rem .75rem; font-weight: 500; }
.dropdown-item:hover { background: var(--sm-soft); color: var(--sm-primary); }
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--sm-line); }
.modal-footer { border-top: 1px solid var(--sm-line); }
.offcanvas { border: none; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: 0; padding: .38em .6em; border-radius: 8px; }
.bg-primary-soft { background: var(--sm-soft) !important; }

/* ---------- Tables (admin) ---------- */
.table { color: var(--sm-ink); }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead.table-light th, .table-light th {
    background: #faf9fe; color: var(--sm-muted); font-weight: 600; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--sm-line);
}
.table-hover > tbody > tr:hover > * { background: #faf8ff; }
.table td { border-color: #f4f2fb; vertical-align: middle; }

/* ---------- Alerts ---------- */
.alert { border: none; border-radius: var(--radius); font-weight: 500; box-shadow: var(--shadow-xs); }
.alert-success { background: #e7f8ef; color: #0f7a43; }
.alert-danger { background: #fdeaee; color: #b4243a; }
.alert-info { background: #e9f1fe; color: #1b5fb8; }
.alert-warning { background: #fdf3e2; color: #96631a; }

/* ---------- Nav / topbars ---------- */
.app-topbar, .admin-topbar { box-shadow: var(--shadow-sm); }
.navbar-brand { font-weight: 800; }
.app-sidebar, .admin-sidebar { box-shadow: var(--shadow-xs); }
.sidebar-link { border-radius: 0; font-weight: 500; }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: #d7d2e8 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d7d2e8; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c2bcda; background-clip: content-box; }

/* ---------- Page heading ---------- */
.page-head h3 { font-weight: 800; letter-spacing: -0.02em; }

/* ---------- KPI / stat cards ---------- */
.kpi, .admin-stat-card, .stat-tile { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.admin-stat-card { background: #fff; border-radius: var(--radius-lg); padding: 1.15rem 1.35rem; }
.admin-stat-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Member cards ---------- */
.member-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.member-card:hover { box-shadow: var(--shadow-md) !important; }
.member-photo { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ---------- Focus accessibility ---------- */
a:focus-visible, .sidebar-link:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; border-radius: 6px; }

/* ---------- Utility ---------- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.text-gradient { background: var(--sm-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
hr { border-color: var(--sm-line); opacity: 1; }

/* ---------- Onboarding wizard ---------- */
.onb-body { background: linear-gradient(180deg, #f3ecff 0%, var(--sm-bg) 320px); min-height: 100vh; }
.onb-topbar { background: #fff; box-shadow: var(--shadow-xs); padding: .85rem 0; position: sticky; top: 0; z-index: 20; }
.onb-main { padding: 2rem 0 4rem; }
.onb-wrap { max-width: 720px; margin: 0 auto; }
.onb-progress-head { margin-bottom: 1.25rem; }
.onb-pct { font-size: 1.6rem; font-weight: 800; font-family: var(--font-display); background: var(--sm-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.onb-steps { display: flex; gap: .4rem; }
.onb-step { flex: 1; text-align: center; }
.onb-step-dot { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: #eae6f5; color: #a99fce; font-size: 1.05rem; border: 2px solid transparent; transition: .2s; }
.onb-step.active .onb-step-dot { background: var(--sm-gradient); color: #fff; box-shadow: 0 6px 16px rgba(123,47,247,.3); }
.onb-step.done .onb-step-dot { background: #e7f8ef; color: #12a150; }
.onb-step-label { font-size: .72rem; color: var(--sm-muted); margin-top: .35rem; }
.onb-step.active .onb-step-label { color: var(--sm-primary); font-weight: 600; }
.onb-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 2rem; }
@media (max-width: 575px) { .onb-card { padding: 1.25rem; } }

.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-block; padding: .4rem .8rem; border: 1.5px solid var(--sm-line); border-radius: 30px; font-size: .85rem; transition: .15s; }
.chip-check input:checked + span { background: var(--sm-soft); border-color: var(--sm-primary); color: var(--sm-primary); font-weight: 600; }
.hard-toggle { background: #fff7ea !important; border-color: #f2d9a8 !important; color: #96631a; cursor: pointer; }

/* priority ranking */
.priority-pick { display: flex; flex-wrap: wrap; gap: .6rem; }
.prio-chip { position: relative; border: 1.5px solid var(--sm-line); background: #fff; border-radius: 30px; padding: .55rem 1rem .55rem 1rem; font-size: .9rem; font-weight: 500; cursor: pointer; transition: .15s; }
.prio-chip:hover { border-color: var(--sm-primary); }
.prio-chip.selected { background: var(--sm-gradient); color: #fff; border-color: transparent; padding-left: 2.2rem; box-shadow: 0 4px 12px rgba(123,47,247,.25); }
.prio-rank { position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.3); display: none; place-items: center; font-size: .72rem; font-weight: 800; }
.prio-chip.selected .prio-rank { display: grid; }
.badge-high { background: linear-gradient(135deg,#12a150,#0b7a3c); color: #fff; }

/* card goal badges (discover) */
.card-goals { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.goal-badge { background: rgba(255,255,255,.22); backdrop-filter: blur(4px); font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 20px; }
.badge-pro { background: linear-gradient(135deg,#12a150,#0b7a3c); color: #fff; }
.member-badge { font-size: .66rem; font-weight: 600; padding: .15rem .45rem; border-radius: 6px; }
.mb-well { background: #e7f8ef; color: #0f7a43; }
.mb-goal { background: var(--sm-soft); color: var(--sm-primary); }

/* ---------- Tag input (autocomplete multi-select) ---------- */
.tag-input .ti-box {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .35rem .5rem; background: #fff;
    border: 1.5px solid var(--sm-line); border-radius: var(--radius-sm);
    cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tag-input .ti-box:focus-within { border-color: var(--sm-primary); box-shadow: 0 0 0 .2rem rgba(123,47,247,.12); }
.tag-input .ti-tags { display: contents; }
.tag-input .ti-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--sm-soft); color: var(--sm-primary);
    border-radius: 30px; padding: .2rem .3rem .2rem .7rem; font-size: .82rem; font-weight: 600;
}
.tag-input .ti-tag button {
    border: none; background: rgba(123,47,247,.15); color: var(--sm-primary);
    width: 18px; height: 18px; border-radius: 50%; line-height: 1; font-size: .9rem;
    display: grid; place-items: center; cursor: pointer; padding: 0;
}
.tag-input .ti-tag button:hover { background: var(--sm-primary); color: #fff; }
.tag-input .ti-field { flex: 1; min-width: 8ch; border: none; outline: none; padding: .2rem .25rem; font-size: .9rem; background: transparent; }
.tag-input .ti-field:disabled { background: transparent; }
.tag-input .ti-hint { font-size: .78rem; color: var(--sm-muted); margin-top: .25rem; }

/* ---------- Premium-gated filter rows ---------- */
.filter-locked { position: relative; }
.filter-locked .form-select:disabled,
.filter-locked .form-control:disabled,
.filter-locked .form-check-input:disabled { background-color: #f3f1fa; opacity: .75; }
.filter-locked .form-label .lock-badge,
.form-check .lock-badge { font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: linear-gradient(135deg,#f5b301,#e08a00); color: #fff; padding: .05rem .4rem; border-radius: 20px; margin-left: .35rem; vertical-align: middle; }
.premium-filter-cta { background: linear-gradient(135deg, var(--sm-soft), #fff); border: 1px dashed rgba(123,47,247,.4);
    border-radius: var(--radius); padding: .7rem .9rem; font-size: .85rem; }

/* ---------- Premium-locked profile detail tiles ---------- */
.profile-detail.locked { display: flex; align-items: center; gap: .6rem; cursor: pointer; opacity: .95; }
.profile-detail.locked .locked-value {
    display: inline-block; color: var(--sm-primary); background: var(--sm-soft);
    padding: .05rem .5rem; border-radius: 20px; font-size: .82rem; font-weight: 700;
}
.profile-detail.locked:hover .locked-value { background: var(--sm-primary); color: #fff; }

/* ---------- Premium-locked search ---------- */
.search-locked .sl-badge {
    width: 76px; height: 76px; margin: 0 auto; border-radius: 50%;
    background: var(--sm-gradient); color: #fff; display: grid; place-items: center; font-size: 2.1rem;
    box-shadow: 0 8px 22px rgba(123,47,247,.3);
}

/* ---------- Who-liked-you reveal quota ---------- */
.reveal-quota { display: inline-flex; align-items: center; gap: .3rem; background: var(--sm-soft); color: var(--sm-primary);
    font-weight: 700; font-size: .82rem; padding: .3rem .7rem; border-radius: 30px; white-space: nowrap; }
.reveal-quota.out { background: #fdeaea; color: #d92c2c; }

/* ---------- Swipe rate-limit counter + overlay ---------- */
.swipe-counter {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--sm-soft); color: var(--sm-primary);
    font-weight: 700; font-size: .82rem; padding: .3rem .7rem; border-radius: 30px;
    white-space: nowrap; transition: background .2s, color .2s;
}
.swipe-counter.low { background: #fff3e0; color: #e08a00; }
.swipe-counter.out { background: #fdeaea; color: #d92c2c; }
.swipe-actions.disabled { opacity: .45; pointer-events: none; filter: grayscale(.3); }

.swipe-limit-overlay {
    position: fixed; inset: 0; z-index: 2400; display: none;
    background: rgba(26,23,40,.72); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 1.2rem;
}
.swipe-limit-overlay.show { display: flex; animation: fadeIn .25s ease; }
.swipe-limit-inner {
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: 2rem 1.6rem; max-width: 380px; width: 100%;
}
.swipe-limit-inner .sl-icon {
    width: 66px; height: 66px; margin: 0 auto; border-radius: 50%;
    background: var(--sm-gradient); color: #fff; display: grid; place-items: center; font-size: 1.9rem;
}
.swipe-limit-inner .sl-timer {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: .04em;
    color: var(--sm-primary); font-variant-numeric: tabular-nums;
}

/* ---------- Nearby map: prominent "you are here" marker ---------- */
.you-marker { position: relative; width: 30px; height: 30px; }
.you-marker .you-dot {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: #7b2ff7; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); z-index: 2;
}
.you-marker .you-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%; background: rgba(123,47,247,.45);
    animation: youPulse 1.8s ease-out infinite; z-index: 1;
}
@keyframes youPulse {
    0%   { transform: translate(-50%,-50%) scale(.5); opacity: .8; }
    100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

/* ============================================================
   Call room — full-screen WebRTC UI (WhatsApp / Messenger style)
   ============================================================ */
.call-room {
    position: fixed; inset: 0; z-index: 4000; overflow: hidden;
    background: #0b0b12; color: #fff; -webkit-user-select: none; user-select: none;
    font-family: var(--font-sans);
}
.call-room .call-bg {
    position: absolute; inset: -30px; background-size: cover; background-position: center;
    filter: blur(28px) brightness(.5); transform: scale(1.15); transition: opacity .4s;
}
.call-room .call-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 30%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.75)); }
.call-room .remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0b12; opacity: 0; transition: opacity .4s; }
.call-room.is-video.connected .remote-video { opacity: 1; }
.call-room.is-video.connected .call-bg { opacity: 0; }

/* centred caller identity */
.call-room .call-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; z-index: 2; padding: 0 24px;
}
.call-room .call-avatar-wrap { position: relative; width: 132px; height: 132px; margin-bottom: 14px; }
.call-room .call-avatar { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.25); position: relative; z-index: 2; }
.call-room .call-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(123,47,247,.55); animation: callPulse 2s ease-out infinite; }
@keyframes callPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.call-room.connected .call-pulse { display: none; }
.call-room .call-name { font-size: 1.8rem; font-weight: 700; margin: 0; }
.call-room .call-status { font-size: 1rem; color: rgba(255,255,255,.75); letter-spacing: .02em; margin: 0; }

/* top bar (connected) */
.call-room .call-topbar {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
    padding: calc(env(safe-area-inset-top, 12px) + 12px) 18px 12px; z-index: 5;
    background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
    opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s;
}
.call-room .call-topbar.show { opacity: 1; transform: none; }
.call-room .call-top-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.call-room .call-top-meta { flex: 1; }
.call-room .call-top-name { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.call-room .call-timer { font-size: .85rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.call-room .call-type-badge { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }

/* local self-view (PiP) */
.call-room .local-pip {
    position: absolute; top: calc(env(safe-area-inset-top, 12px) + 76px); right: 16px; z-index: 6;
    width: 104px; height: 150px; border-radius: 16px; overflow: hidden; background: #16161f;
    box-shadow: 0 6px 20px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); transition: opacity .3s;
}
.call-room .local-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.call-room.front .local-pip video { transform: scaleX(-1); }

/* controls */
.call-room .call-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 22px 20px calc(env(safe-area-inset-bottom, 20px) + 26px);
    background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); transition: opacity .3s, transform .3s;
}
.call-room .call-ctrl {
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.16); color: #fff; font-size: 1.4rem;
    display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .2s, transform .1s;
}
.call-room .call-ctrl:active { transform: scale(.92); }
.call-room .call-ctrl.off { background: #fff; color: #16161f; }
.call-room .call-hangup { background: #e5333b; width: 66px; height: 66px; font-size: 1.6rem; }
.call-room .call-hangup:hover { background: #cc2830; }

/* auto-hide (video, after inactivity) */
.call-room.is-video.hide-ui .call-controls { opacity: 0; transform: translateY(20px); pointer-events: none; }
.call-room.is-video.hide-ui .call-topbar { opacity: 0; }
.call-room.is-video.hide-ui .local-pip { opacity: .35; }

.call-room .call-tap-start {
    position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 7;
    background: #fff; color: #16161f; border: none; padding: .7rem 1.3rem; border-radius: 30px; font-weight: 700;
}

@media (min-width: 700px) {
    .call-room .local-pip { width: 150px; height: 210px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .you-marker .you-pulse, .call-room .call-pulse { animation: none; }
}