/* ==========================================================================
   KinkLink Design System — Clean Minimal (white bg, red accent)
   ==========================================================================
   Started as "Warm Minimal" (cream background), which Eric rejected once
   it was live on production. Background tokens moved to neutral white/grey;
   the red --kl-accent now carries all the "brand warmth" on its own.
   ==========================================================================
   Shared design tokens + reusable component classes for the 2026 redesign.
   Everything here is namespaced with a "kl-" prefix (KinkLink) so it can be
   loaded alongside the existing Bootstrap 3 / AdminLTE / legacy app CSS
   with zero risk of clashing with (or accidentally overriding) any existing
   page. Nothing on the live site uses these classes yet - this file is the
   toolkit. Pages get migrated onto it one at a time from here.

   Loaded on every page (front + admin) after the legacy app CSS, so new
   kl- classes always win the cascade wherever they're used, but before any
   per-page extra CSS a controller injects, so page-specific tweaks still
   have final say.
   ========================================================================== */

:root {
  /* Backgrounds */
  /* Settled via a side-by-side swatch comparison (fffaf7/f7ebe0/blush pink
     all rejected at various points) - Eric picked plain white. The
     cache-busting fix in front_header.php/admin_header.php means this
     will actually load fresh now instead of risking a stale cached copy
     of an earlier attempt. */
  --kl-bg: #ffffff;
  --kl-surface: #ffffff;
  --kl-surface-2: #f5f5f6;
  --kl-border: #e7e7e9;

  /* Text */
  --kl-text: #24212a;
  --kl-muted: #767480;

  /* Brand */
  --kl-accent: #c81e4b;
  --kl-accent-dark: #9c1739;
  --kl-accent-text: #ffffff;
  --kl-accent-2: #e8a33d;
  --kl-accent-tint: #fdf0f3;

  /* Shape + elevation */
  --kl-radius: 16px;
  --kl-radius-sm: 10px;
  --kl-radius-pill: 999px;
  --kl-shadow: 0 10px 30px rgba(20, 20, 30, 0.10);
  --kl-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.12);

  /* Type - Poppins for headlines (rounded, friendly, geometric personality -
     a proven pairing for modern dating/social apps), Nunito Sans for body
     copy (rounded terminals for warmth, still highly readable at small
     sizes for chat/forms). Deliberately not Inter - too neutral/corporate
     for a warm dating context. */
  --kl-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --kl-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

.kl-bg { background: var(--kl-bg); }

/* Old hero background rotator (front_common/style.css's rotw-0/1/2 classes,
   swapped by a JS interval on the homepage) painted its own bg color/image
   on the inner <section>, covering whatever the outer .banner-section.kl-bg
   wrapper set. Force it flat here - the rotation is retired now that the
   hero uses real copy + a form card instead of a full-bleed photo bg. */
.banner-section section {
  background-color: var(--kl-bg) !important;
  background-image: none !important;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.kl-logo-badge {
  background: #ffffff;
  padding: 6px 12px;
  border-radius: var(--kl-radius-sm);
  display: inline-flex;
  align-items: center;
  box-shadow: var(--kl-shadow-sm);
}
.kl-logo-badge img { height: 30px; display: block; }

/* ==========================================================================
   Typography helpers
   ========================================================================== */

/* !important on font-family/color below is deliberate, not sloppy: legacy
   per-page wrapper classes still on this markup (.bannerCnt, .lsForm,
   .aboutInner, .secTitle, etc, all from the S3-hosted style.css that isn't
   even in this repo) declare "<wrapper> h1/h2/h3/p" rules with higher CSS
   specificity than a bare single .kl-h2 class. Without !important those
   legacy rules win and silently reintroduce the old Philosopher serif
   heading font / white text color under any kl- element that happens to
   sit inside one of those wrapper divs. Found live on the redesigned login
   page (h2 rendering in Philosopher instead of Poppins) - this is the fix. */
/* 42px -> 36px -> 28px: Eric's read each time was "still too big, taking
   over everything." Landed here deliberately just above kl-h3 (18px) -
   matching it exactly would flatten the hierarchy and the headline
   would stop reading as the page's visual anchor, but it doesn't need
   to dominate the way a 36-42px display headline does either. */
.kl-h1 {
  font-family: var(--kl-font-display) !important;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kl-text) !important;
  margin: 14px 0 16px;
}
.kl-h2 {
  font-family: var(--kl-font-display) !important;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kl-text) !important;
  margin: 0 0 12px;
}
.kl-h3 {
  font-family: var(--kl-font-display) !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--kl-text) !important;
  margin: 0 0 8px;
}
.kl-body {
  font-family: var(--kl-font-body) !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kl-text) !important;
}
.kl-muted {
  color: var(--kl-muted) !important;
}
/* Bigger/bolder than a typical small "kicker" label on purpose - this
   badge carries Verified/Vetted/Safe, a core trust claim, not a
   decorative aside, so it needs to read as a real badge rather than
   fine print above the headline. */
.kl-eyebrow {
  display: inline-block;
  font-family: var(--kl-font-body) !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kl-accent) !important;
  background: var(--kl-surface-2);
  padding: 9px 20px;
  border-radius: var(--kl-radius-pill);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.kl-btn {
  font-family: var(--kl-font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: var(--kl-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  float: none;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.05s ease;
}
.kl-btn:active { transform: scale(0.98); }
.kl-btn-primary {
  background: var(--kl-accent);
  color: var(--kl-accent-text);
}
.kl-btn-primary:hover { background: var(--kl-accent-dark); color: var(--kl-accent-text); }
.kl-btn-ghost {
  background: transparent;
  color: var(--kl-text);
  border-color: var(--kl-border);
}
.kl-btn-ghost:hover { background: var(--kl-surface-2); color: var(--kl-text); }
.kl-btn-sm { padding: 9px 18px; font-size: 13px; border-radius: var(--kl-radius-pill); }

/* Brief attention cue after the 2nd quick-start pick is confirmed, pointing
   at the final "Join Free" button - see signup.js #selectFor handler. Scale
   only, no glow/shadow, to stay consistent with the flat aesthetic. */
.kl-pulse { animation: kl-pulse-anim 0.6s ease-in-out 2; }
@keyframes kl-pulse-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.kl-card {
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius);
  box-shadow: var(--kl-shadow);
}

/* Profile / match card */
.kl-profile-card { overflow: hidden; }
.kl-profile-photo {
  height: 200px;
  background: linear-gradient(135deg, var(--kl-accent-2), var(--kl-accent));
  position: relative;
}
.kl-verified-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--kl-radius-pill);
}
.kl-profile-body { padding: 16px; }
.kl-profile-name { font-family: var(--kl-font-display); font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--kl-text); }
.kl-profile-meta { color: var(--kl-muted); font-size: 13px; margin-bottom: 10px; }
.kl-card-actions { display: flex; gap: 10px; }

/* ==========================================================================
   Tags / badges
   ========================================================================== */

.kl-tag {
  display: inline-block;
  background: var(--kl-surface-2);
  color: var(--kl-text);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--kl-radius-pill);
  border: 1px solid var(--kl-border);
}

.kl-icon-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--kl-radius-sm);
  border: 1px solid var(--kl-border);
  background: var(--kl-surface-2);
  color: var(--kl-text);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}
.kl-icon-btn-like { background: var(--kl-accent); color: var(--kl-accent-text); border-color: var(--kl-accent); }

/* ==========================================================================
   Nav
   ========================================================================== */

.kl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--kl-surface);
  border-radius: var(--kl-radius);
  box-shadow: var(--kl-shadow);
  border: 1px solid var(--kl-border);
}
.kl-navlinks { display: flex; gap: 24px; font-size: 14px; color: var(--kl-muted); font-weight: 500; }
.kl-navlinks a { color: var(--kl-muted); text-decoration: none; }
.kl-navlinks a:hover, .kl-navlinks a.active { color: var(--kl-accent); }

/* ==========================================================================
   Chat
   ========================================================================== */

.kl-chat-window {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kl-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.kl-bubble-them { background: var(--kl-surface-2); align-self: flex-start; border: 1px solid var(--kl-border); color: var(--kl-text); }
.kl-bubble-me { background: var(--kl-accent); color: var(--kl-accent-text); align-self: flex-end; }

/* ==========================================================================
   Forms
   ========================================================================== */

/* float:none is deliberate here too (see the kl-h1/h2/h3 comment above):
   legacy per-page CSS (e.g. .bennerForm input { float:left }) has no kl-
   counterpart declaring float at all, so there's nothing for the cascade
   to arbitrate - the legacy float wins by default and collapses the
   parent .kl-field's height, causing stacked fields to visually overlap.
   Found live on the homepage hero form. */
.kl-field { margin-bottom: 14px; clear: both; }
.kl-field label { display: block; font-size: 12px; color: var(--kl-muted); margin-bottom: 6px; font-weight: 600; float: none; }
.kl-field input, .kl-field select, .kl-field textarea {
  width: 100%;
  float: none !important;
  height: auto;
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--kl-text);
  font-size: 14px;
  font-family: var(--kl-font-body);
  box-sizing: border-box;
}
.kl-field input:focus, .kl-field select:focus, .kl-field textarea:focus {
  outline: none;
  border-color: var(--kl-accent);
}

.kl-toggle {
  width: 42px;
  height: 24px;
  background: var(--kl-border);
  border-radius: var(--kl-radius-pill);
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: background 0.15s ease;
}
.kl-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s ease;
}
.kl-toggle.kl-toggle-on { background: var(--kl-accent); }
.kl-toggle.kl-toggle-on::after { left: 21px; }

/* ==========================================================================
   "Who Are You" / "Looking For" picker - replaces the old inactive_man.png /
   active_man_icon.gif clip-art image swaps (which read as dated/cheap - see
   Eric's note) with Tabler line icons and a centered flex grid. Used in both
   index.php (homepage quick-start) and userSelect.php (Facebook social-signup
   modal) - identical markup/behavior in both, input radio/checkbox ids and
   names are unchanged so the existing signup.js handlers keep working with
   zero JS changes, this is a purely visual swap. Centered flex (not a fixed
   grid) so an odd tile count (6 or 7) doesn't leave a lopsided gap on the
   last row - approved via a live mockup before building this. */
.kl-picker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.kl-picker-tile {
  flex: 0 0 30%;
}
.kl-picker-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.kl-picker-label {
  display: block;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-radius-sm);
  padding: 14px 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kl-picker-icon {
  font-size: 24px;
  color: var(--kl-muted);
}
.kl-picker-label span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--kl-text) !important;
  margin-top: 6px;
}
.kl-picker-input:checked + .kl-picker-label {
  border: 2px solid var(--kl-accent);
  background: var(--kl-accent-tint);
}
.kl-picker-input:checked + .kl-picker-label .kl-picker-icon {
  color: var(--kl-accent-dark);
}
/* Couple tile: two same-size hearts nearly touching (not one compound icon,
   whose internal proportions aren't controllable) - confirmed spacing with
   Eric via mockup iteration. */
.kl-picker-hearts {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.kl-picker-hearts i:first-child {
  margin-right: -2px;
}

/* Homepage quick-start "Who are you?"/"Into who?" fields - Eric's read: the
   plain .kl-field label (12px, muted, top-left) was too quiet and the
   inputs looked like inert form fields rather than something tappable.
   This modifier (added alongside kl-field, not replacing it, so login.php's
   email/password fields are untouched) makes the label a real headline and
   tints+chevrons the input to look like a picker, not a text box. Chevron
   is a CSS background-image (not a Tabler <i> tag) so no markup/JS change
   was needed on the <input> itself. */
.kl-field-picker label {
  font-size: 17px;
  font-weight: 700;
  color: var(--kl-text);
  margin-bottom: 8px;
}
.kl-field-picker input {
  background-color: var(--kl-accent-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  border: 1.5px solid var(--kl-border);
  padding: 13px 36px 13px 14px;
  font-size: 15px;
  cursor: pointer;
}

/* Ghost/outline variant in the accent color, for actions that are real but
   secondary to the page's main CTA - e.g. the picker modal's "Lock it in"
   button, which used to be styled identically to "Join Free" (same red
   pill via the legacy .themeBtn class) and so competed with it visually. */
.kl-btn-ghost-accent {
  background: transparent;
  color: var(--kl-accent-dark);
  border: 1.5px solid var(--kl-accent-dark);
}
.kl-btn-ghost-accent:hover { background: var(--kl-accent-tint); }

/* Picker modal headers ("Who Are You"/"Looking For") were small, left-
   aligned Bootstrap-default h4s that read quiet next to the picker grid
   below them - Eric's read: "my focus goes to select all that apply"
   instead of the actual instruction title. Centers + enlarges the title,
   and demotes "Select all that apply" from a competing h3 (bigger than
   the title itself) to a small caption underneath it - see
   .kl-modal-subtitle, used in index.php/userSelect.php in place of the
   old bare <h3>. */
.csModal .modal-header { text-align: center; }
.csModal .modal-title {
  float: none;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
/* The external style.css this repo doesn't contain has some ".loocking_check
   p" (or similar) rule with higher selector specificity than a single class,
   absolutely-positioning <p> tags inside this modal - it landed the subtitle
   on top of the 2nd picker row instead of above the grid. A single-class
   selector loaded later still loses a specificity fight, so this needs
   !important on every layout-relevant property to force normal block flow -
   same root cause as the .bennerForm float bug documented in index.php,
   just position-based instead of float-based. */
.kl-modal-subtitle {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--kl-muted);
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px !important;
}

/* Toastr's own CSS (loaded straight from the CDN,
   cdnjs.cloudflare.com/toastr.js/2.1.4/toastr.css) ships stock
   library colors - a saturated lime green for success, a generic red for
   error - that never got restyled when the rest of the site moved onto
   this design system. Next to Poppins headlines and the cream/crimson
   palette everywhere else, that default green read as "cheap and weird"
   (a jarring, off-brand flash on every single successful action
   sitewide - signup, login, every profile save). Overriding just the
   color/shape here, not the plugin's positioning or timing logic, so
   every existing toastr.success()/error()/warning()/info() call anywhere
   in the codebase gets the new look for free with zero JS changes. */
#toast-container > div {
  border-radius: var(--kl-radius-sm) !important;
  box-shadow: var(--kl-shadow) !important;
  font-family: var(--kl-font-body) !important;
  opacity: 1 !important;
}
#toast-container > .toast-success {
  background-color: #2f7d5c !important;
  background-image: none !important;
}
#toast-container > .toast-error {
  background-color: var(--kl-accent-dark) !important;
  background-image: none !important;
}
#toast-container > .toast-warning {
  background-color: var(--kl-accent-2) !important;
  background-image: none !important;
  color: var(--kl-text) !important;
}
#toast-container > .toast-info {
  background-color: var(--kl-text) !important;
  background-image: none !important;
}