/* ══════════════════════════════════════════════════════════════════════
   MingleExtra — legacy override layer
   ══════════════════════════════════════════════════════════════════════

   This file used to declare its own palette, headed "Design System v3.0 —
   BLUE & WHITE", built around a blue accent (hex 2962FF, written here without
   the leading hash so migration passes do not rewrite this historical note).
   The rest of the product is pink: the logo, the hero, the active nav item and 57
   occurrences of #E64980 across style.css and the templates all use the brand
   pink. Two palettes were competing, and which one won on any given element
   depended on stylesheet order and on how many !important flags a rule
   carried. That is the single biggest reason the interface looked
   inconsistent from screen to screen.

   The variable NAMES below are kept, because ~333 rules further down this file
   reference them. Their VALUES now resolve to the canonical tokens in
   sme-tokens.css, so one aliasing block corrects every downstream rule at once
   without touching them individually.

   IMPORTANT: only names that DIFFER from the canonical tokens are listed here.
   Names that already exist in sme-tokens.css (--sme-bg, --sme-text,
   --sme-border, --sme-radius-*, --sme-shadow-*, --sme-ease, --sme-duration,
   and the status colours) are deliberately NOT redeclared. Writing
   "--sme-text: var(--sme-text)" would be a self reference, which CSS treats as
   a cycle and discards, leaving the variable invalid and every rule using it
   broken. Inheriting them untouched from sme-tokens.css is both correct and
   less code.

   This file is transitional. As screens migrate onto the .sme- component
   classes, the matching blocks below should be deleted rather than edited.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. ALIASES ONTO THE CANONICAL TOKENS ───────────────────────────── */
:root {
  /* Brand. Was blue; now resolves to the pink brand ramp. */
  --sme-primary:        var(--sme-brand-700);
  --sme-primary-light:  var(--sme-brand-600);
  --sme-primary-dark:   var(--sme-brand-800);
  /* A "soft" token has to be an actual tint. This pointed at brand-500, a fully
     saturated pink, so anything using it as a subtle background got a loud fill
     and then had to fight it back with a colour override. */
  --sme-primary-soft:   var(--sme-brand-50);
  --sme-accent:         var(--sme-brand);
  --sme-accent-light:   var(--sme-brand-400);
  --sme-accent-soft:    var(--sme-brand-soft);
  --sme-accent-glow:    rgba(163, 38, 84, 0.25);

  --sme-gold:           var(--sme-gold-500);
  --sme-gold-light:     var(--sme-gold-400);

  /* Discovery actions. */
  --sme-like-green:     var(--sme-like);
  --sme-pass-red:       var(--sme-pass);
  --sme-superlike-blue: var(--sme-super);

  /* Gradients rebuilt on the brand ramp. */
  --sme-grad-primary:    linear-gradient(135deg, var(--sme-brand-700) 0%, var(--sme-brand-600) 100%);
  --sme-grad-accent:     linear-gradient(135deg, var(--sme-brand-700) 0%, var(--sme-brand-600) 100%);
  --sme-grad-blue-white: linear-gradient(135deg, var(--sme-brand-500) 0%, var(--sme-brand-200) 50%, var(--sme-brand-50) 100%);
  --sme-grad-hero:       linear-gradient(135deg, var(--sme-brand-800) 0%, var(--sme-brand-600) 45%, var(--sme-brand-600) 100%);
  --sme-grad-card:       linear-gradient(180deg, var(--sme-surface) 0%, var(--sme-bg) 100%);
  --sme-grad-sidebar:    linear-gradient(180deg, var(--sme-surface) 0%, var(--sme-bg) 100%);
  --sme-grad-btn:        linear-gradient(135deg, var(--sme-brand-700) 0%, var(--sme-brand-600) 100%);
  --sme-grad-premium:    linear-gradient(135deg, var(--sme-gold-600) 0%, var(--sme-gold-400) 100%);

  /* Surfaces. These follow dark mode automatically, because the tokens they
     point at are redeclared under [data-sme-theme="dark"]. */
  --sme-bg-card:       var(--sme-surface);
  --sme-bg-input:      var(--sme-surface-muted);
  --sme-bg-hover:      var(--sme-surface-hover);
  --sme-bg-overlay:    var(--sme-overlay);

  /* Text: --sme-text-secondary is deliberately NOT aliased here.
     It was previously mapped to --sme-text-muted, which collapsed two distinct
     rungs of the text hierarchy into one and made secondary text
     indistinguishable from muted text in dark mode. sme-tokens.css defines it
     properly for both themes, so this file must leave it alone. */

  /* Borders */
  --sme-border-light:  var(--sme-border);
  --sme-border-focus:  var(--sme-brand);

  /* Brand tinted shadows. */
  --sme-shadow-blue:    var(--sme-shadow-brand);
  --sme-shadow-blue-lg: var(--sme-shadow-brand);

  /* Radius name that has no canonical equivalent. */
  --sme-radius-2xl:  var(--sme-radius-xl);

  /* Spacing aliases used by the legacy rules below. */
  --sme-sp-1: var(--sme-space-1); --sme-sp-2: var(--sme-space-2); --sme-sp-3: var(--sme-space-3);
  --sme-sp-4: var(--sme-space-4); --sme-sp-5: var(--sme-space-5); --sme-sp-6: var(--sme-space-6);
  --sme-sp-8: var(--sme-space-8); --sme-sp-10: var(--sme-space-10); --sme-sp-12: var(--sme-space-12);

  /* Typography */
  --sme-font: var(--sme-font-sans);
}

/* ── 2. GLOBAL RESET ────────────────────────────────────────────────── */
body {
  font-family: var(--sme-font) !important;
  background: var(--sme-bg) !important;
  color: var(--sme-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. BUTTONS ─────────────────────────────────────────────────────── */
/* The swipe action buttons are circular icon controls, so the global
 * button padding and min-height do not apply to them. Both carry
 * !important here, which was squeezing the icon inside the circle. */
.btn:not(.sme-action-btn), .btn-flat, .btn_primary, .btn-large, button[type="submit"]:not(.sme-action-btn) {
  min-height: 46px !important;
  padding: 10px 24px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  font-family: var(--sme-font) !important;
  border-radius: var(--sme-radius-md) !important;
  letter-spacing: 0.01em !important;
  transition: all var(--sme-duration) var(--sme-ease) !important;
  text-transform: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* Primary button — Blue gradient */
.btn_primary,
.btn:not(.btn-flat):not(.paypal):not(.stripe):not(.bank):not(.paystack):not(.sme-btn-outline):not(.dislike):not(.like):not(.superlike):not(.dislike_user):not(.like_user):not(.superlike_user):not(.hot):not(.sme-action-btn):not(.to_small_not):not(.to_small_yes) {
  background: var(--sme-grad-btn) !important;
  color: var(--sme-text-inverse) !important;
  border: none !important;
}
.btn_primary:hover,
.btn:not(.btn-flat):not(.sme-btn-outline):not(.dislike):not(.like):not(.superlike):not(.dislike_user):not(.like_user):not(.superlike_user):not(.hot):not(.sme-action-btn):not(.to_small_not):not(.to_small_yes):hover {
  background: var(--sme-accent-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sme-shadow-blue) !important;
}
.btn_primary:active,
.btn:not(.btn-flat):not(.sme-btn-outline):active {
  transform: translateY(0) !important;
}

/* Flat / outline */
.btn-flat {
  background: transparent !important;
  color: var(--sme-text-secondary) !important;
  border: 1px solid var(--sme-border) !important;
}
.btn-flat:hover {
  background: var(--sme-bg-hover) !important;
  border-color: var(--sme-accent) !important;
  color: var(--sme-accent) !important;
}

.sme-btn-outline {
  background: transparent;
  color: var(--sme-accent);
  border: 1.5px solid var(--sme-accent);
}
.sme-btn-outline:hover {
  background: var(--sme-accent-soft);
}

/* CTA */
.sme-btn-cta {
  min-height: 52px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--sme-radius-full);
  background: var(--sme-grad-btn);
  color: #fff;
  border: none;
  box-shadow: var(--sme-shadow-blue);
}
.sme-btn-cta:hover {
  box-shadow: var(--sme-shadow-blue-lg);
  transform: translateY(-2px);
}

/* ── 4. INPUTS ──────────────────────────────────────────────────────── */
/* .browser-default is scoped to real form controls.
 *
 * It is a Materialize utility meaning "leave this alone", and it is put on
 * selects and inputs, but also on plain markup: the settings sidebar is a
 * <ul class="browser-default">. As a bare selector in this list it forced any
 * element carrying it to height 46px with a border and an input background, so
 * the settings nav collapsed to a 46px box while its twelve list items, still
 * 54px blocks, spilled out over the page and rendered on top of the content
 * beneath. Every settings page was affected.
 *
 * Naming the three element types keeps the intent, which is to style controls
 * that opted out of Materialize, without capturing everything else. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], textarea, select, .to_mat_input,
input.browser-default, select.browser-default, textarea.browser-default {
  height: 46px !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  font-family: var(--sme-font) !important;
  background: var(--sme-bg-input) !important;
  border: 1.5px solid var(--sme-border) !important;
  border-radius: var(--sme-radius-md) !important;
  color: var(--sme-text) !important;
  outline: none !important;
  transition: border-color var(--sme-duration) var(--sme-ease), box-shadow var(--sme-duration) var(--sme-ease) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
input:focus, textarea:focus, select:focus, .to_mat_input:focus {
  border-color: var(--sme-accent) !important;
  box-shadow: 0 0 0 3px var(--sme-accent-soft) !important;
  background: #fff !important;
}
input::placeholder, textarea::placeholder { color: var(--sme-text-muted) !important; }
textarea { height: auto !important; min-height: 100px !important; }
select { appearance: auto !important; }

.sme-country-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 46px;
  z-index: 2;
}
.sme-country-select-shell.is-open { z-index: 10020; }
.sme-country-native {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border: 0;
}
.sme-country-control {
  width: 100%;
  height: 46px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font: 500 0.9rem var(--sme-font);
  color: var(--sme-text);
  background: var(--sme-bg-input);
  border: 1.5px solid var(--sme-border);
  border-radius: var(--sme-radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--sme-duration) var(--sme-ease), box-shadow var(--sme-duration) var(--sme-ease), background var(--sme-duration) var(--sme-ease);
}
.sme-country-control:focus,
.sme-country-select-shell.is-open .sme-country-control {
  border-color: var(--sme-accent);
  box-shadow: 0 0 0 3px var(--sme-accent-soft);
  background: #fff;
}
.sme-country-control:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.sme-country-current {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sme-country-current-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sme-country-caret {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--sme-text-muted);
}
.sme-country-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(320px, 52vh);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sme-border);
  border-radius: var(--sme-radius-md);
  box-shadow: var(--sme-shadow-lg);
  z-index: 10021;
}
.sme-country-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--sme-border-light);
  background: #fff;
}
.sme-country-search {
  height: 38px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--sme-bg-input);
}
.sme-country-options {
  max-height: calc(min(320px, 52vh) - 55px);
  overflow: auto;
  padding: 6px;
}
.sme-country-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sme-text);
  font: 500 0.9rem var(--sme-font);
  text-align: left;
  cursor: pointer;
}
.sme-country-option:hover,
.sme-country-option.is-selected {
  background: var(--sme-accent-soft);
  color: var(--sme-accent);
}
.sme-country-option[hidden] { display: none; }
.sme-country-flag-img,
.sme-inline-country-flag,
.sme-country-option img {
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  display: inline-block;
  object-fit: cover;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(26,35,56,0.12);
}
.sme-inline-country-flag {
  margin: 0 6px 0 4px;
  vertical-align: -4px;
}
.sme-country-flag-placeholder {
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--sme-bg-input);
  color: var(--sme-text-muted);
  box-shadow: 0 0 0 1px rgba(26,35,56,0.12);
}
.sme-country-flag-placeholder svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 640px) {
  .sme-country-menu {
    max-height: min(360px, 58vh);
  }
  .sme-country-options {
    max-height: calc(min(360px, 58vh) - 55px);
  }
  .sme-country-option {
    min-height: 42px;
  }
}

/* Materialize border overrides */
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]) {
  border-bottom: 1.5px solid var(--sme-accent) !important;
  box-shadow: 0 0 0 3px var(--sme-accent-soft) !important;
}

/* ── 5. CARDS ───────────────────────────────────────────────────────── */
.card, .dt_sections, .z-depth-1, .z-depth-2 {
  background: var(--sme-bg-card) !important;
  border-radius: var(--sme-radius-lg) !important;
  border: 1px solid var(--sme-border-light) !important;
  box-shadow: var(--sme-shadow-xs) !important;
  transition: box-shadow var(--sme-duration) var(--sme-ease), transform var(--sme-duration) var(--sme-ease) !important;
}
.card:hover { box-shadow: var(--sme-shadow-sm) !important; }

/* ── 6. NAVIGATION ──────────────────────────────────────────────────── */
nav, .navbar-fixed nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--sme-border) !important;
  box-shadow: var(--sme-shadow-xs) !important;
  height: 60px !important;
  line-height: 60px !important;
}
nav a, nav .brand-logo { color: var(--sme-text) !important; }
nav .brand-logo { font-weight: 700 !important; font-size: 1.2rem !important; }
nav .badge { background: var(--sme-accent) !important; border-radius: var(--sme-radius-full) !important; font-size: 0.7rem !important; }

/* ── 7. SIDEBAR ─────────────────────────────────────────────────────── */
.dt_sidebar, .sidenav, .to_sidebar {
  background: var(--sme-grad-sidebar) !important;
  border-right: 1px solid var(--sme-border-light) !important;
  box-shadow: none !important;
}
.dt_sidebar a, .sidenav li a, .home_usr_link li a {
  color: var(--sme-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  padding: 11px 18px !important;
  border-radius: var(--sme-radius-sm) !important;
  margin: 2px 8px !important;
  transition: all var(--sme-duration) var(--sme-ease) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.dt_sidebar a:hover, .sidenav li a:hover, .home_usr_link li a:hover {
  background: var(--sme-accent-soft) !important;
  color: var(--sme-accent) !important;
}
.dt_sidebar a.active, .sidenav li a.active,
.home_usr_link li.active a {
  background: var(--sme-accent-soft) !important;
  color: var(--sme-accent) !important;
  font-weight: 600 !important;
}
.dt_sidebar a svg, .dt_sidebar a i, .sidenav li a svg, .sidenav li a i,
.home_usr_link li a svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
}

/* Sidebar user section — Blue gradient hero */
.home_usr_sct {
  background: var(--sme-grad-hero) !important;
  border-radius: 0 0 20px 20px !important;
  padding: 24px 18px 20px !important;
  margin-bottom: 6px !important;
  position: relative;
  overflow: hidden;
}
.home_usr_sct::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08), transparent 60%),
              radial-gradient(circle at 85% 15%, rgba(66,165,245,0.15), transparent 50%);
  pointer-events: none;
}
.home_usr_sct h3 a { color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; }
.home_usr_sct .btn {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border-radius: var(--sme-radius-full) !important;
  font-size: 0.8rem !important;
  padding: 7px 16px !important;
  min-height: 34px !important;
}
.home_usr_sct .btn:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: translateY(-1px) !important;
}

/* Sidebar scrollbar */
.dt_sidebar::-webkit-scrollbar, .to_sidebar::-webkit-scrollbar { width: 4px; }
.dt_sidebar::-webkit-scrollbar-thumb, .to_sidebar::-webkit-scrollbar-thumb { background: var(--sme-border); border-radius: 4px; }

/* Sidebar footer */
.to_sidebar_footer { border-top: 1px solid var(--sme-border-light) !important; margin-top: 10px !important; padding: 14px 14px 16px !important; }
.to_sidebar_footer_links a { color: var(--sme-text-muted) !important; font-size: 0.76rem !important; }
.to_sidebar_footer_links a:hover { color: var(--sme-accent) !important; }
.to_sidebar_footer_meta { font-size: 0.7rem !important; color: var(--sme-text-muted) !important; opacity: 0.7; margin-top: 8px !important; }

/* Active sidebar indicator */
.home_usr_link li a { position: relative !important; overflow: hidden !important; }
.home_usr_link li a::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 18px; background: var(--sme-accent); border-radius: 0 3px 3px 0;
  transition: transform 0.2s var(--sme-ease);
}
.home_usr_link li.active a::before { transform: translateY(-50%) scaleY(1); }

/* ── 8. MATCH CARDS ─────────────────────────────────────────────────── */
.dt_home_match_user .mtc_usr_details .item,
.match_item, ._user_card, .dt_card {
  background: var(--sme-bg-card) !important;
  border-radius: var(--sme-radius-xl) !important;
  border: 1px solid var(--sme-border-light) !important;
  box-shadow: var(--sme-shadow-sm) !important;
  overflow: hidden !important;
  transition: all var(--sme-duration-slow) var(--sme-ease) !important;
}
.dt_home_match_user .mtc_usr_details .item:hover,
.match_item:hover, ._user_card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sme-shadow-lg) !important;
  border-color: rgba(var(--sme-brand-rgb), 0.15) !important;
}

/* ── 9. ACTION BUTTONS — Like / Super Like / Pass ───────────────────── */
.like_user, .dislike_user, .superlike_user,
.mtc_usrd_actions .like:not(.sme-action-btn), .mtc_usrd_actions .dislike:not(.sme-action-btn), .mtc_usrd_actions .superlike:not(.sme-action-btn),
.to_small_yes, .to_small_not {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2.5px solid transparent !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: all 0.3s var(--sme-ease-spring) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
  padding: 0 !important;
  min-height: unset !important;
}

/* Pass — soft red */
.dislike_user, .mtc_usrd_actions .dislike:not(.sme-action-btn), .to_small_not {
  border-color: var(--sme-pass-red) !important;
  color: var(--sme-pass-red) !important;
}
.dislike_user:hover, .mtc_usrd_actions .dislike:not(.sme-action-btn):hover, .to_small_not:hover {
  background: var(--sme-pass-red) !important;
  color: #fff !important;
  transform: scale(1.12) rotate(-6deg) !important;
  box-shadow: 0 6px 24px rgba(255,82,82,0.35) !important;
}

/* Like — green */
.like_user, .mtc_usrd_actions .like:not(.sme-action-btn), .to_small_yes {
  border-color: var(--sme-like-green) !important;
  color: var(--sme-like-green) !important;
}
.like_user:hover, .mtc_usrd_actions .like:not(.sme-action-btn):hover, .to_small_yes:hover {
  background: var(--sme-like-green) !important;
  color: #fff !important;
  transform: scale(1.12) rotate(6deg) !important;
  box-shadow: 0 6px 24px rgba(0,230,118,0.35) !important;
}

/* Super Like — blue star */

.superlike_user:hover, .mtc_usrd_actions .superlike:not(.sme-action-btn):hover {
  background: linear-gradient(135deg, var(--sme-super), var(--sme-brand-300));
  color: var(--sme-text-inverse);
  transform: scale(1.15);
  box-shadow: 0 8px 32px rgba(124, 92, 255, 0.4);
}

/* Action container */
.mtc_usrd_actions, .match_actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 14px 0 !important;
}

/* Hot or Not buttons */
.mtc_usrd_actions .dislike:not(.sme-action-btn).hot, .mtc_usrd_actions .like:not(.sme-action-btn).hot {
  width: 54px !important; height: 54px !important;
}

/* ── 10. PRO / PREMIUM BADGE ────────────────────────────────────────── */
.pro_badge, .is_pro, .dt_pro_badge {
  background: var(--sme-grad-premium) !important;
  color: #fff !important;
  padding: 3px 10px !important;
  border-radius: var(--sme-radius-full) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 8px rgba(255,111,0,0.3) !important;
}

/* ── 11. PROFILE ────────────────────────────────────────────────────── */
/* .avatar was matched too broadly.
 *
 * radius-full is 9999px, which is right for a small round thumbnail and wrong
 * for anything rectangular. The main profile photo is an .avatar too, so a
 * 514x769 portrait was being drawn as an ellipse: the top of the head and the
 * bottom of the shot were cut away by the border radius. The image was never
 * actually cropped, object-fit already preserved the full frame, but the
 * rounding hid the parts the member had chosen to show.
 *
 * The pill radius is kept for genuinely round thumbnails and the large media
 * frame is excluded, where sme-components.css gives it a normal card corner. */
.dt_profile_photo img,
.avatar:not(.sme-photo-full):not(.to_user_media .avatar) img {
  border-radius: var(--sme-radius-full) !important;
  border: 3px solid #fff !important;
  box-shadow: var(--sme-shadow-sm) !important;
}
/* The large profile photo: a card corner, never a pill. */
.to_user_media .avatar img {
  border-radius: var(--sme-radius-lg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── 12. CHAT ───────────────────────────────────────────────────────── */
.message_sent .message_text {
  background: var(--sme-grad-btn) !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
}
.message_received .message_text {
  background: var(--sme-bg-input) !important;
  color: var(--sme-text) !important;
  border-radius: 18px 18px 18px 4px !important;
}

/* ── 13. MODALS ─────────────────────────────────────────────────────── */
.modal {
  border-radius: var(--sme-radius-xl) !important;
  box-shadow: var(--sme-shadow-xl) !important;
  max-height: 85vh !important;
}
.modal .modal-content { padding: 24px !important; }
.modal .modal-footer { padding: 14px 24px !important; border-top: 1px solid var(--sme-border-light) !important; }
.modal-overlay { background: var(--sme-bg-overlay) !important; }

/* ── 14. ALERTS ─────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--sme-radius-md) !important;
  padding: 12px 16px !important;
  font-size: 0.86rem !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.alert-success { background: rgba(0,200,83,0.08) !important; color: #1B5E20 !important; border-left: 3px solid var(--sme-success) !important; }
.alert-danger { background: rgba(255,23,68,0.08) !important; color: #B71C1C !important; border-left: 3px solid var(--sme-danger) !important; }
.alert-warning { background: rgba(255,145,0,0.08) !important; color: #E65100 !important; border-left: 3px solid var(--sme-warning) !important; }
.alert-info { background: rgba(0,176,255,0.08) !important; color: #01579B !important; border-left: 3px solid var(--sme-info) !important; }

/* ── 15. DROPDOWNS ──────────────────────────────────────────────────── */
.dropdown-content { border-radius: var(--sme-radius-md) !important; box-shadow: var(--sme-shadow-lg) !important; border: 1px solid var(--sme-border-light) !important; }
.dropdown-content li a { padding: 10px 18px !important; font-size: 0.86rem !important; color: var(--sme-text-secondary) !important; }
.dropdown-content li a:hover { background: var(--sme-accent-soft) !important; color: var(--sme-accent) !important; }

/* ── 16. TABS ───────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--sme-border) !important; background: transparent !important; }
.tabs .tab a { color: var(--sme-text-muted) !important; font-weight: 500 !important; font-size: 0.88rem !important; }
.tabs .tab a.active { color: var(--sme-accent) !important; font-weight: 600 !important; }
.tabs .indicator { background: var(--sme-accent) !important; height: 2.5px !important; border-radius: 2px !important; }

/* ── 17. BADGES ─────────────────────────────────────────────────────── */
.badge, .new.badge { background: var(--sme-accent) !important; border-radius: var(--sme-radius-full) !important; font-size: 0.7rem !important; font-weight: 700 !important; min-width: 20px !important; height: 20px !important; line-height: 20px !important; padding: 0 6px !important; }

/* ── 18. TOOLTIPS ───────────────────────────────────────────────────── */
.material-tooltip { background: var(--sme-primary) !important; border-radius: var(--sme-radius-sm) !important; font-size: 0.76rem !important; padding: 5px 10px !important; }

/* ── 19. LOAD MORE ──────────────────────────────────────────────────── */
.load_more, #loadMore, .dt_load_more {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  padding: 10px 24px !important; margin: 14px auto !important;
  color: var(--sme-accent) !important; font-weight: 600 !important; font-size: 0.88rem !important;
  border: 1.5px solid var(--sme-accent) !important; border-radius: var(--sme-radius-full) !important;
  background: transparent !important; cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.load_more:hover, #loadMore:hover { background: var(--sme-accent-soft) !important; }

/* ── 20. SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sme-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--sme-text-muted); }

/* ── 21. ANIMATIONS ─────────────────────────────────────────────────── */
@keyframes sme-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sme-scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sme-slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.sme-fade-in { animation: sme-fadeIn 0.5s var(--sme-ease) forwards; }
.sme-scale-in { animation: sme-scaleIn 0.4s var(--sme-ease-spring) forwards; }
.sme-slide-up { animation: sme-slideUp 0.6s var(--sme-ease) forwards; }

/* Content page transitions */
.dt_content_page, .to_content, #dt_dashboard { animation: sme-fadeIn 0.35s ease forwards; }

/* ── 22. RANDOM USER CARDS (Sidebar) ────────────────────────────────── */
.to_small_usr { border-radius: 16px !important; overflow: hidden !important; }
.to_small_usr .card-image img { border-radius: 14px 14px 0 0 !important; }
.to_small_usr .card-content { padding: 10px 12px !important; }
.to_small_usr .card-content h3 { font-size: 0.85rem !important; font-weight: 600 !important; }
.to_small_usr .card-content h3 a { color: var(--sme-text) !important; }
.to_small_usr .card-content div { font-size: 0.76rem !important; color: var(--sme-text-muted) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.to_small_usr .card-content div svg { width: 14px !important; height: 14px !important; }

/* Online indicator */
.useronline { width: 8px !important; height: 8px !important; background: var(--sme-success) !important; border-radius: 50% !important; display: inline-block !important; box-shadow: 0 0 0 2px #fff !important; }

/* ── 23. PLAN CARDS ─────────────────────────────────────────────────── */
.sme-plans-grid { display: grid; gap: 14px; max-width: 960px; margin: 0 auto; padding: 0 16px; }
.sme-plans-3 { grid-template-columns: repeat(3, 1fr); }
.sme-plans-4 { grid-template-columns: repeat(4, 1fr); }

.sme-plan-card {
  background: var(--sme-bg-card); border: 2px solid var(--sme-border); border-radius: var(--sme-radius-xl);
  padding: 22px 18px; text-align: center; cursor: pointer;
  transition: all var(--sme-duration-slow) var(--sme-ease-spring);
}
.sme-plan-card.selected, .sme-plan-card:has(input:checked) {
  border-color: var(--sme-accent); box-shadow: var(--sme-shadow-blue); transform: translateY(-4px);
}
.sme-plan-card:hover { border-color: rgba(var(--sme-brand-rgb), 0.3); transform: translateY(-2px); }

.sme-plan-badge { display: inline-block; padding: 3px 12px; border-radius: var(--sme-radius-full); background: var(--sme-grad-btn); color: #fff; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.sme-plan-price { font-size: 1.5rem; font-weight: 800; color: var(--sme-accent); margin-bottom: 10px; }
.sme-plan-features { list-style: none; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--sme-border-light); }
.sme-plan-features li { font-size: 0.8rem; color: var(--sme-text-secondary); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.sme-plan-features li i { color: var(--sme-success); width: 16px; height: 16px; }

/* ── 24. HERO SECTIONS ──────────────────────────────────────────────── */
.sme-hero {
  background: var(--sme-grad-hero); border-radius: 0 0 var(--sme-radius-2xl) var(--sme-radius-2xl);
  padding: var(--sme-sp-10) var(--sme-sp-6); text-align: center; position: relative; overflow: hidden;
}
.sme-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08), transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(66,165,245,0.12), transparent 50%);
}
.sme-hero h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0 0 8px; position: relative; z-index: 1; }
.sme-hero p { color: rgba(255,255,255,0.8); font-size: 0.92rem; position: relative; z-index: 1; }

/* ── 25. GOOGLE LOGIN BUTTON ────────────────────────────────────────── */
.sme-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 20px; background: #fff; border: 1.5px solid var(--sme-border);
  border-radius: var(--sme-radius-md); font-size: 0.92rem; font-weight: 600;
  color: var(--sme-text); cursor: pointer; transition: all 0.25s ease; text-decoration: none;
}
.sme-google-btn:hover { background: var(--sme-bg-hover); border-color: #4285F4; box-shadow: var(--sme-shadow-sm); }
.sme-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── 26. PAYSTACK INLINE CHECKOUT ───────────────────────────────────── */
.sme-checkout-form {
  max-width: 480px; margin: 20px auto; padding: 24px;
  background: var(--sme-bg-card); border: 1px solid var(--sme-border);
  border-radius: var(--sme-radius-xl); box-shadow: var(--sme-shadow-md);
}
.sme-checkout-form h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.sme-checkout-form .sme-input-row { display: flex; gap: 10px; }
.sme-checkout-form .sme-input-group { margin-bottom: 12px; flex: 1; }
.sme-checkout-form .sme-input-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sme-text-secondary); margin-bottom: 5px; }
.sme-supported-cards { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sme-border-light); justify-content: center; }
.sme-supported-cards img { height: 22px; opacity: 0.7; }
.sme-supported-cards span { font-size: 0.73rem; color: var(--sme-text-muted); }
.sme-secure-badge { display: flex; align-items: center; gap: 4px; font-size: 0.73rem; color: var(--sme-success); margin-top: 10px; justify-content: center; }

/* ── 27. LEGAL PAGE STYLES ──────────────────────────────────────────── */
.sme-legal-page { max-width: 800px; margin: 0 auto; padding: var(--sme-sp-8) var(--sme-sp-5); }
.sme-legal-page h1 { font-size: 1.7rem; font-weight: 800; color: var(--sme-primary); margin-bottom: var(--sme-sp-6); }
.sme-legal-page h2 { font-size: 1.15rem; font-weight: 700; color: var(--sme-text); margin: var(--sme-sp-8) 0 var(--sme-sp-3); padding-bottom: var(--sme-sp-2); border-bottom: 1px solid var(--sme-border-light); }
.sme-legal-page p, .sme-legal-page li { font-size: 0.9rem; line-height: 1.7; color: var(--sme-text-secondary); margin-bottom: var(--sme-sp-3); }

/* ── 28. ABOUT PAGE ICON BOX ───────────────────────────────────────── */
.sme-about-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--sme-accent-soft); }

/* ── 29. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 960px) { .sme-plans-3, .sme-plans-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) {
  .sme-plans-3, .sme-plans-4 { grid-template-columns: 1fr !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
  .sme-checkout-form .sme-input-row { flex-direction: column; gap: 0; }
  .sme-hero { padding: var(--sme-sp-8) var(--sme-sp-4); }
  .sme-hero h2 { font-size: 1.25rem; }
  .like_user, .dislike_user, .to_small_yes, .to_small_not, .mtc_usrd_actions .like:not(.sme-action-btn), .mtc_usrd_actions .dislike:not(.sme-action-btn) { width: 48px; height: 48px; }
  .mtc_usrd_actions .superlike:not(.sme-action-btn) { width: 56px; height: 56px; }
}

/* ── 30. SELECT INPUT ──────────────────────────────────────────────── */
select.browser-default {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2390A4AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important;
}

/* ── 31. UTILITY CLASSES ────────────────────────────────────────────── */
.sme-text-accent { color: var(--sme-accent); }
.sme-text-gold { color: var(--sme-gold); }
.sme-text-success { color: var(--sme-success); }
.sme-text-muted { color: var(--sme-text-muted); }
.sme-bg-accent-soft { background: var(--sme-accent-soft); }

/* ── 32. LUCIDE ICON DEFAULTS ───────────────────────────────────────── */
[data-lucide], .lucide { width: 22px; height: 22px; stroke-width: 2; vertical-align: middle; }

/* ── 33. PAGE TITLE ─────────────────────────────────────────────────── */
.to_page_title h3 { font-size: 1.15rem !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.to_page_title h3 i, .to_page_title h3 span { color: var(--sme-accent) !important; }

/* ---- Form controls: radios, checkboxes, switches -----------------------
 *
 * Materialize ships these in its default teal (#26a69a) and greys the label to
 * #9e9e9e. Nothing overrode either, so the filter drawer selected a radio in
 * green on a page themed dark pink, and the labels beside them sat at roughly
 * 2.8:1 against white, under the 4.5:1 minimum for body text. Reported as the
 * activity options looking blank, which is what text that faint looks like.
 *
 * Themed here rather than in the drawer stylesheet because the same controls
 * appear across settings, and a switch that is pink in one place and teal in
 * another reads as two different products. */

/* Labels sit at normal text contrast, not Materialize's grey. */
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span,
[type="checkbox"] + span:not(.lever) {
    color: var(--sme-text, #161b25);
}

/* Radio: outer ring and inner dot both take the brand colour when selected. */
[type="radio"]:checked + span:before {
    border-color: var(--sme-brand, #a32654);
}
[type="radio"]:checked + span:after {
    background-color: var(--sme-brand, #a32654);
    border-color: var(--sme-brand, #a32654);
}
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
    border-color: var(--sme-border-strong, #b9bcc7);
}
[type="radio"]:focus-visible + span:before {
    box-shadow: 0 0 0 3px rgba(var(--sme-brand-rgb, 163, 38, 84), .28);
}

/* Checkbox tick. */
[type="checkbox"]:checked + span:not(.lever):before {
    border-right-color: var(--sme-brand, #a32654);
    border-bottom-color: var(--sme-brand, #a32654);
}
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    background-color: var(--sme-brand, #a32654);
    border-color: var(--sme-brand, #a32654);
}

/* Switch: track tints, knob takes the solid brand colour. */
.switch label input[type=checkbox]:checked + .lever {
    background-color: rgba(var(--sme-brand-rgb, 163, 38, 84), .38);
}
.switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--sme-brand, #a32654);
}
.switch label input[type=checkbox]:checked:focus + .lever:after {
    box-shadow: 0 0 0 10px rgba(var(--sme-brand-rgb, 163, 38, 84), .16);
}
.switch label .lever {
    background-color: var(--sme-border-strong, #b9bcc7);
}

/* Range inputs, which Materialize also tints teal. */
input[type=range]::-webkit-slider-thumb { background: var(--sme-brand, #a32654); }
input[type=range]::-moz-range-thumb     { background: var(--sme-brand, #a32654); }
input[type=range]::-ms-thumb            { background: var(--sme-brand, #a32654); }

[data-sme-theme='dark'] [type="radio"]:not(:checked) + span,
[data-sme-theme='dark'] [type="radio"]:checked + span,
[data-sme-theme='dark'] [type="checkbox"] + span:not(.lever) {
    color: var(--sme-text, #f2f2f6);
}

/* ---- Remaining Materialize components ---------------------------------
 *
 * Progress bars render in Materialize's pale teal (#acece6 track, #26a69a bar)
 * and nothing overrode them, so they showed teal next to the brand pink on all
 * four main signed-in pages.
 *
 * Dropdowns are deliberately NOT restyled here: the block further up this file
 * already themes them with !important, and adding a second owner is how the
 * swipe buttons ended up defined in four places. */


.progress {
    background-color: rgba(var(--sme-brand-rgb, 163, 38, 84), .16);
}
.progress .determinate,
.progress .indeterminate {
    background-color: var(--sme-brand, #a32654);
}

/* Collapsible headers pick up the brand for their open state and icon rather
 * than leaving the icon at Materialize's grey. */
.collapsible-header i {
    color: var(--sme-brand, #a32654);
}
.collapsible-header.active {
    color: var(--sme-brand, #a32654);
}