/* ===================================================================
   getxmatch.com — Main Stylesheet
   Design system: refined rose→violet brand, calm neutral surfaces,
   soft layered shadows, purposeful motion (hover-only).
   =================================================================== */

/* -- CSS Custom Properties (design tokens) -------------------------- */
:root {
  /* Brand */
  --cq-primary:       #e91e8c;
  --cq-primary-dark:  #c2185b;
  --cq-primary-light: #fdf2f8;
  --cq-accent:        #a855f7;
  --cq-accent2:       #7c3aed;

  /* Gradients */
  --cq-grad:          linear-gradient(135deg, #e91e8c 0%, #c026a8 55%, #8b5cf6 100%);
  --cq-grad-ink:      linear-gradient(135deg, #17122a 0%, #221636 55%, #2a1a45 100%);
  --cq-grad-soft:     linear-gradient(135deg, #fdf2f8 0%, #f7f4ff 60%, #ffffff 100%);
  --cq-grad-dark:     linear-gradient(135deg, #c2185b 0%, #a21caf 50%, #7c3aed 100%);

  /* Neutrals */
  --cq-text:          #221e33;
  --cq-muted:         #6d7286;
  --cq-border:        #ebe8f2;
  --cq-bg:            #faf9fc;

  /* Shape & elevation */
  --cq-radius:        16px;
  --cq-radius-sm:     10px;
  --cq-shadow:        0 1px 2px rgba(23, 18, 42, .04), 0 8px 24px rgba(120, 60, 160, .07);
  --cq-shadow-lg:     0 2px 6px rgba(23, 18, 42, .05), 0 18px 44px rgba(120, 60, 160, .13);

  /* Typography */
  --cq-font-display: 'Poppins', sans-serif;
  --cq-font-body:    'Inter',   sans-serif;
}

/* -- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--cq-font-body);
  font-size:   15.5px;
  line-height: 1.6;
  background:
    radial-gradient(1000px 480px at 88% -8%,  rgba(233, 30, 140, .055), transparent 60%),
    radial-gradient(820px  420px at -8%  22%, rgba(124, 58, 237, .05),  transparent 55%),
    var(--cq-bg);
  background-attachment: fixed;
  color:       var(--cq-text);
  margin:      0;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--cq-font-display);
  font-weight:    700;
  letter-spacing: -.015em;
  color:          var(--cq-text);
}

a { color: var(--cq-primary-dark); }
a:hover { color: var(--cq-primary); }

::selection { background: rgba(233, 30, 140, .16); }

/* Quiet, consistent scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d9d4e6;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #c2bad8; }

.text-pink { color: var(--cq-primary) !important; }

/* Consistent rounding on every Bootstrap button */
.btn { border-radius: var(--cq-radius-sm); font-weight: 500; }

/* -- Navigation Bar --------------------------------------------------- */
/* The header carries a brand, six primary links, a search field and (when
   signed in) four account controls. Dropping the per-link icons keeps that
   inside a standard container — so the bar stays flush with page content —
   and it collapses at xl rather than lg, using the hamburger below 1200px
   instead of squeezing the row. */
.cq-navbar {
  background: var(--cq-grad-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 6px 24px rgba(20, 12, 40, .35);
  padding-top:    .4rem;
  padding-bottom: .4rem;
}
.cq-navbar .navbar-nav { gap: .15rem; }

.cq-navbar .nav-link {
  color:         rgba(255, 255, 255, .82);
  font-weight:   500;
  font-size:     .9rem;
  white-space:   nowrap;
  border-radius: 8px;
  padding:       .45rem .7rem !important;
  transition:    background .15s ease, color .15s ease;
}
.cq-navbar .nav-link:hover,
.cq-navbar .nav-link:focus-visible {
  background: rgba(255, 255, 255, .09);
  color:      #fff;
}
.cq-navbar .nav-link.active {
  background:  rgba(255, 255, 255, .14);
  color:       #fff;
  font-weight: 600;
}
.cq-navbar .nav-link:focus-visible {
  outline:        2px solid rgba(255, 255, 255, .7);
  outline-offset: 2px;
}

/* Icon-only account controls (messages, friend requests, notifications) */
.cq-navbar .cq-nav-icon {
  position:  relative;
  font-size: 1.05rem;
  padding:   .45rem .6rem !important;
}
/* Kept hidden by an inline style in the markup: the notify scripts reveal a
   badge with `style.display = ''`, which only works if the visible state is
   the stylesheet default. */
.cq-nav-badge {
  display:       inline-block;
  position:      absolute;
  top:           1px;
  left:          58%;
  padding:       .15em .38em;
  font-size:     .62rem;
  font-weight:   600;
  line-height:   1;
  color:         #fff;
  background:    #dc3545;
  border-radius: 99px;
}
.cq-navbar .cq-nav-user { display: flex; align-items: center; gap: .4rem; }
.cq-nav-username {
  max-width:     10ch;              /* long usernames must not stretch the bar */
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Register call-to-action */
.cq-btn-register {
  background:    #fff;
  color:         var(--cq-primary);
  font-weight:   600;
  padding:       .4rem .95rem;
  border:        0;
  white-space:   nowrap;
  transition:    transform .15s ease, box-shadow .15s ease;
}
.cq-btn-register:hover {
  background: #fff;
  color:      var(--cq-primary-dark);
  transform:  translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.cq-toggler { color: #fff; font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; }
.cq-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* Search field */
.cq-search { width: 100%; }
.cq-search-group {
  background:    rgba(255, 255, 255, .12);
  border:        1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  overflow:      hidden;
  transition:    background .15s ease, border-color .15s ease;
}
.cq-search-group:focus-within {
  background:   rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .38);
}
.cq-search-group .input-group-text {
  background: transparent;
  border:     0;
  color:      rgba(255, 255, 255, .65);
  padding:    .35rem .3rem .35rem .8rem;
}
.cq-search-group .form-control {
  background:  transparent;
  border:      0;
  color:       #fff;
  font-size:   .875rem;
  padding:     .35rem .8rem .35rem .45rem;
  box-shadow:  none !important;
}
.cq-search-group .form-control::placeholder { color: rgba(255, 255, 255, .6); }
.cq-search-group .form-control:focus { background: transparent; color: #fff; }
/* Hide the WebKit clear button — it renders as a dark blob on the dark field */
.cq-search-group .form-control::-webkit-search-cancel-button { display: none; }

.cq-search-results {
  display:       none;              /* JS flips this to block when there are hits */
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  right:         0;
  z-index:       1055;
  background:    #fff;
  color:         #212529;
  border:        1px solid var(--cq-border);
  border-radius: 12px;
  box-shadow:    var(--cq-shadow-lg);
  max-height:    70vh;
  overflow-y:    auto;
  padding:       .25rem;
}

@media (min-width: 1200px) {
  /* Narrower between 1200–1399px, where the container is only 1140px wide and
     a signed-in header also carries four account controls. It is allowed to
     shrink (never grow), so an unusually wide nav squeezes the search box
     instead of pushing the row into an overflow. */
  .cq-search { flex: 0 1 190px; min-width: 130px; }
  /* Thin divider between the primary links and the account controls */
  .cq-navbar .cq-nav-sep {
    margin-left:      .5rem;
    padding-left:     .6rem;
    border-left:      1px solid rgba(255, 255, 255, .16);
  }
  .cq-navbar .cq-nav-cta { margin-left: .35rem; }
}
@media (min-width: 1400px) {
  .cq-search { flex-basis: 260px; }
}
@media (max-width: 1199.98px) {
  /* Collapsed menu: give the stacked links room to breathe */
  .cq-navbar .navbar-nav { gap: .1rem; padding-bottom: .5rem; }
  .cq-navbar .nav-link { padding: .55rem .75rem !important; }
  .cq-nav-username { max-width: none; }
  .cq-navbar .cq-nav-cta { margin-top: .5rem; }
  .cq-btn-register { display: inline-block; }
}

.cq-brand {
  font-family:     var(--cq-font-display);
  font-weight:     800;
  font-size:       1.4rem;
  text-decoration: none;
  display:         inline-flex;
  align-items:     baseline;
  background:      linear-gradient(90deg, #ff6aa9, #ff2d55, #ff8a5c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:  -.01em;
  filter:          drop-shadow(0 1px 6px rgba(255, 45, 85, .28));
  transition:      filter .2s;
}
.cq-brand:hover { filter: drop-shadow(0 1px 10px rgba(255, 45, 85, .5)); }
/* The "x" is the brand mark: white and a touch heavier, but on the same
   baseline and size as the wordmark so the lockup stays level. */
.cq-brand-x {
  -webkit-text-fill-color: #fff;
  color:       #fff;
  font-weight: 900;
}

/* Brand text used on white/light backgrounds */
.cq-brand-dark {
  font-family:     var(--cq-font-display);
  font-weight:     800;
  font-size:       1.6rem;
  background:      linear-gradient(90deg, #e8003d, #ff2d55, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:  -.01em;
}

/* Refined dropdown menus (navbar + everywhere) */
.dropdown-menu {
  border:        1px solid var(--cq-border);
  border-radius: 14px;
  box-shadow:    var(--cq-shadow-lg);
  padding:       .4rem;
}
.dropdown-item {
  border-radius: 8px;
  padding:       .5rem .75rem;
  font-size:     .925rem;
  transition:    background .12s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--cq-primary-light);
  color:      var(--cq-primary-dark);
}
.dropdown-item.text-danger:hover { background: #fef2f2; color: #dc2626; }

/* -- Hero Banner ------------------------------------------------------ */
.cq-hero {
  background:
    radial-gradient(720px 320px at 78% 0%, rgba(233, 30, 140, .07), transparent 65%),
    var(--cq-grad-soft);
  border-bottom: 1px solid var(--cq-border);
}
.cq-hero-emoji { font-size: 3.25rem; margin-bottom: .5rem; }
.cq-hero-title {
  font-size:      clamp(1.9rem, 4vw, 3.1rem);
  font-weight:    800;
  letter-spacing: -.03em;
  background:     linear-gradient(100deg, var(--cq-text) 30%, var(--cq-primary-dark) 75%, var(--cq-accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cq-hero-subtitle { font-size: 1.08rem; color: var(--cq-muted); max-width: 520px; margin: .5rem auto 0; }

/* -- Section Titles ---------------------------------------------------- */
.cq-section-title {
  font-family:    var(--cq-font-display);
  font-size:      1.25rem;
  font-weight:    700;
  letter-spacing: -.015em;
  color:          var(--cq-text);
}

/* -- Cards -------------------------------------------------------------- */
.cq-card {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
}

/* -- Quiz Cards (home page grid) ---------------------------------------- */
.cq-quiz-card {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  transition:    transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}
.cq-quiz-card:hover {
  transform:    translateY(-4px);
  border-color: #f3d3e6;
  box-shadow:   var(--cq-shadow-lg);
}

.cq-card-cover {
  height:     180px;
  overflow:   hidden;
  background: var(--cq-grad-soft);
}
.cq-card-cover img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.cq-quiz-card:hover .cq-card-cover img { transform: scale(1.045); }

.cq-card-cover-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  background:      var(--cq-grad-soft);
}

.cq-card-body  { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.cq-card-title { font-family: var(--cq-font-display); font-weight: 700; font-size: 1.08rem; margin-bottom: .3rem; letter-spacing: -.01em; }
.cq-card-desc  { font-size: .875rem; color: var(--cq-muted); flex: 1; }

/* -- Leaderboard --------------------------------------------------------- */
.cq-leaderboard-card {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  overflow:      hidden;
}
.cq-lb-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 16px;
  border-bottom: 1px solid var(--cq-border);
  transition:    background .15s;
}
.cq-lb-row:last-child { border-bottom: none; }
.cq-lb-row:hover      { background: var(--cq-primary-light); }
.cq-lb-rank  { width: 32px; text-align: center; font-size: 1.2rem; }
.cq-rank-num { font-weight: 700; color: var(--cq-muted); font-size: .85rem; }
.cq-lb-names { font-weight: 600; font-size: .9rem; }
.cq-lb-quiz  { font-size: .75rem; }
.cq-lb-score { font-family: var(--cq-font-display); font-weight: 700; font-size: 1.05rem; text-align: right; }
.cq-lb-emoji { font-size: .9rem; }

/* -- Buttons -------------------------------------------------------------- */
.cq-btn-primary {
  background:     var(--cq-grad);
  border:         none;
  color:          #fff;
  border-radius:  12px;
  font-weight:    600;
  letter-spacing: .01em;
  padding:        .6rem 1.4rem;
  transition:     filter .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow:     0 2px 10px rgba(233, 30, 140, .28);
}
.cq-btn-primary:hover {
  filter:     brightness(1.06);
  color:      #fff;
  transform:  translateY(-1px);
  box-shadow: 0 6px 20px rgba(233, 30, 140, .35);
}
.cq-btn-primary:active { transform: translateY(0) scale(.99); }
.cq-btn-primary:focus-visible {
  outline: 3px solid rgba(233, 30, 140, .35);
  outline-offset: 2px;
}

.cq-btn-outline {
  background:    transparent;
  border:        2px solid var(--cq-primary);
  color:         var(--cq-primary);
  border-radius: 12px;
  font-weight:   600;
  padding:       .55rem 1.4rem;
  transition:    all .18s ease;
}
.cq-btn-outline:hover {
  background:   var(--cq-grad);
  border-color: transparent;
  color:        #fff;
}

.cq-btn-whatsapp { background: #25d366; color: #fff; border-radius: 12px; font-weight: 600; }
.cq-btn-whatsapp:hover { background: #1eb958; color: #fff; }
.cq-btn-telegram { background: #229ed9; color: #fff; border-radius: 12px; font-weight: 600; }
.cq-btn-telegram:hover { background: #1e8dc2; color: #fff; }

/* -- Form inputs ------------------------------------------------------------ */
.cq-input {
  border:        1.5px solid var(--cq-border);
  border-radius: var(--cq-radius-sm);
  padding:       .6rem .9rem;
  font-family:   var(--cq-font-body);
  background:    #fff;
  transition:    border-color .18s ease, box-shadow .18s ease;
}
.cq-input:focus {
  border-color: var(--cq-primary);
  box-shadow:   0 0 0 4px rgba(233, 30, 140, .10);
  outline:      none;
}
.form-label { font-size: .9rem; }
.form-text  { color: var(--cq-muted); }

/* -- Modal -------------------------------------------------------------------- */
.cq-modal .modal-content,
.modal-content {
  border-radius: 20px;
  border:        1px solid var(--cq-border);
  box-shadow:    var(--cq-shadow-lg);
}

/* -- Progress Bar ---------------------------------------------------------------- */
.cq-progress { height: 8px; border-radius: 99px; background: #f0edf6; overflow: hidden; }
.cq-progress-bar {
  background:    var(--cq-grad);
  border-radius: 99px;
  transition:    width .4s ease;
}

.cq-badge-respondent {
  background:    var(--cq-grad);
  color:         #fff;
  font-weight:   600;
  font-size:     .8rem;
  padding:       .35rem .75rem;
  border-radius: 99px;
}

/* -- Question Card ------------------------------------------------------------------ */
.cq-question-card {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
  padding:       2rem;
}

.cq-quiz-tag {
  display:       inline-flex;
  align-items:   center;
  background:    var(--cq-grad);
  color:         #fff;
  font-size:     .8rem;
  font-weight:   600;
  padding:       .25rem .75rem;
  border-radius: 99px;
}

.cq-question-text { font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }

/* -- Answer Options --------------------------------------------------------------------- */
.cq-options-grid { display: flex; flex-direction: column; gap: 12px; }
.cq-option {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      #ffffff;
  border:          2px solid var(--cq-border);
  border-radius:   var(--cq-radius);
  padding:         .9rem 1.2rem;
  cursor:          pointer;
  transition:      border-color .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
  user-select:     none;
}
.cq-option:hover {
  border-color: #f3b8d8;
  background:   var(--cq-primary-light);
  transform:    translateX(4px);
}
.cq-option.selected {
  border-color: var(--cq-primary);
  background:   var(--cq-primary-light);
  box-shadow:   0 0 0 4px rgba(233, 30, 140, .08);
}
.cq-option-text  { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.cq-option-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--cq-radius-sm); }
.cq-option-check { color: var(--cq-primary); opacity: 0; transition: opacity .2s; font-size: 1.1rem; }
.cq-option.selected .cq-option-check { opacity: 1; }

.cq-btn-ready { animation: pulse .4s ease; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* -- Media Preview Panel -------------------------------------------------------------------- */
.cq-preview-panel {
  background:      var(--cq-grad-soft);
  border:          2px dashed #e6ddf2;
  border-radius:   var(--cq-radius);
  min-height:      300px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  position:        sticky;
  top:             80px;
}
.cq-preview-placeholder { text-align: center; padding: 2rem; }

/* -- Share Page ---------------------------------------------------------------------------------- */
.cq-waiting-anim { font-size: 3.5rem; animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cq-share-box .form-control { background: var(--cq-bg); border-radius: 10px 0 0 10px; }
.cq-waiting-msg {
  font-size:     .9rem;
  color:         var(--cq-muted);
  padding:       1rem;
  background:    var(--cq-grad-soft);
  border-radius: var(--cq-radius-sm);
  border:        1px solid var(--cq-border);
}

/* -- Results Page ----------------------------------------------------------------------------------- */
.cq-result-hero {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  box-shadow:    var(--cq-shadow);
}
.cq-result-names { font-size: clamp(1.2rem, 3vw, 1.8rem); }
.cq-name-a, .cq-name-b { color: var(--cq-primary); }
.cq-heart-sep { margin: 0 .5rem; color: var(--cq-primary); animation: heartbeat 1.5s ease infinite; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

.cq-score-ring-wrap {
  position: relative;
  display:  inline-block;
  width:    140px;
  height:   140px;
}
.cq-score-ring   { width: 140px; height: 140px; }
.cq-score-number {
  position:    absolute;
  top: 50%; left: 50%;
  transform:   translate(-50%, -50%);
  font-family: var(--cq-font-display);
  font-size:   1.8rem;
  font-weight: 800;
  color:       var(--cq-text);
}
.cq-compat-label {
  font-family: var(--cq-font-display);
  font-size:   1.4rem;
  font-weight: 700;
}
.cq-compat-emoji { font-size: 1.6rem; margin-right: .3rem; }

.cq-breakdown-wrap  { border-radius: var(--cq-radius); overflow: hidden; border: 1px solid var(--cq-border); }
.cq-breakdown-table { margin-bottom: 0; }
.cq-breakdown-table th { background: var(--cq-grad-ink); color: #fff; font-weight: 600; font-size: .875rem; }
.cq-row-match   { background: rgba(22, 163, 74, .05); }
.cq-consent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* -- Footer ---------------------------------------------------------------------------------------------- */
.cq-footer {
  background: #ffffff;
  border-top: 1px solid var(--cq-border);
  color:      var(--cq-muted);
}

/* -- Flash Messages ------------------------------------------------------------------------------------------ */
.cq-flash {
  border-radius: 12px;
  border:        1px solid var(--cq-border);
  box-shadow:    var(--cq-shadow);
}

/* -- Empty State ------------------------------------------------------------------------------------------------ */
.cq-empty-state {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--cq-muted);
}
.cq-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* -- Error Page ------------------------------------------------------------------------------------------------- */
.cq-error-page { padding: 3rem 1rem; }

/* -- Ad Slots --------------------------------------------------------------------------------------------------- */
.cq-ad-slot {
  background:    var(--cq-grad-soft);
  border:        1px dashed #e9c7dd;
  border-radius: var(--cq-radius);
  padding:       1rem;
}
.cq-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cq-muted); margin-bottom: .5rem; }

/* -- Login Background --------------------------------------------------------------------------------------------- */
.cq-login-bg {
  background:
    radial-gradient(800px 400px at 80% -5%, rgba(233, 30, 140, .07), transparent 60%),
    linear-gradient(160deg, #fdf2f8 0%, #f3f0fb 55%, #ffffff 100%);
  background-attachment: fixed;
}
.cq-login-card {
  background:    #ffffff;
  border:        1px solid var(--cq-border);
  border-radius: 20px;
  box-shadow:    var(--cq-shadow-lg);
  width:         100%;
  max-width:     420px;
}
.cq-input-icon { background: var(--cq-grad-soft); border-color: var(--cq-border); color: var(--cq-primary); }

/* -- User Profile / Avatar ------------------------------------------------------------------------------------------ */
.cq-avatar-wrap { flex-shrink: 0; }
.cq-avatar {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid #d6d2e0;   /* neutral by default — pink ring marks female (.cq-av-f) */
  display:       block;
}
.cq-avatar-placeholder {
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      var(--cq-grad);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  border:          3px solid var(--cq-border);
}
/* Pink ring on any avatar (img or placeholder) of a female member */
.cq-av-f {
  border: 3px solid #e91e8c !important;
  box-shadow: 0 0 0 2px rgba(233, 30, 140, .18);
}

/* -- Chat text formatting bar (bold / color / font face) --------------------------------------------------------------- */
.cq-format-bar {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
  padding:     6px 14px;
  background:  #fff;
  border-top:  1px solid var(--cq-border);
}
.cq-fmt-btn {
  border:        1px solid var(--cq-border);
  background:    #fff;
  border-radius: 8px;
  width:         32px;
  height:        30px;
  line-height:   1;
  font-size:     .9rem;
  color:         #565b6e;
  cursor:        pointer;
  transition:    border-color .15s ease, background .15s ease;
}
.cq-fmt-btn:hover  { border-color: #f3b8d8; background: var(--cq-primary-light); }
.cq-fmt-btn.active {
  background:   var(--cq-primary);
  color:        #fff;
  border-color: var(--cq-primary);
}
.cq-fmt-color-wrap {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  margin:        0;
  height:        30px;
  padding:       2px 6px;
  border:        1px solid var(--cq-border);
  border-radius: 8px;
  background:    #fff;
  color:         #565b6e;
  cursor:        pointer;
  transition:    border-color .15s ease;
}
.cq-fmt-color-wrap:hover { border-color: #f3b8d8; }
.cq-fmt-color-wrap input[type=color] {
  width:      24px;
  height:     22px;
  border:     none;
  padding:    0;
  background: none;
  cursor:     pointer;
}
.cq-fmt-font {
  height:        30px;
  font-size:     .8rem;
  max-width:     180px;
  padding:       2px 8px;
  border:        1px solid var(--cq-border);
  border-radius: 8px;
  background:    #fff;
  color:         #565b6e;
}

/* -- Blog Post Content ---------------------------------------------------------------------------------------------------- */
.cq-blog-content {
  font-size:   1.05rem;
  line-height: 1.8;
  color:       var(--cq-text);
}
.cq-blog-content h1,
.cq-blog-content h2,
.cq-blog-content h3 { margin-top: 1.5rem; font-family: var(--cq-font-display); }
.cq-blog-content img { max-width: 100%; border-radius: var(--cq-radius); }
.cq-blog-content blockquote {
  border-left:   4px solid var(--cq-primary);
  padding:       .5rem 1rem;
  color:         var(--cq-muted);
  margin:        1rem 0;
  background:    var(--cq-grad-soft);
  border-radius: 0 var(--cq-radius) var(--cq-radius) 0;
}

/* -- Profile Comments -------------------------------------------------------------------------------------------------------- */
.cq-comment-row {
  display:       flex;
  gap:           .75rem;
  padding:       .85rem 0;
  border-bottom: 1px solid var(--cq-border);
}
.cq-comment-row:last-child { border-bottom: none; }
.cq-comment-avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--cq-grad);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1rem;
  flex-shrink:     0;
}

/* Replies sit under their parent, one level deep only, so a long back-and-forth
   never walks off the right edge of the card. */
.cq-comment-reply { padding: .55rem 0; border-bottom: none; }
.cq-comment-avatar-sm { width: 28px; height: 28px; font-size: .8rem; }
.cq-comment-replies:not(:empty) {
  margin-top:  .5rem;
  padding-left:.8rem;
  border-left: 2px solid var(--cq-border);
}

/* Like / dislike / reply strip under a comment */
.cq-comment-actions {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  flex-wrap:   wrap;
}
.cq-react-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  background:    none;
  border:        1px solid transparent;
  border-radius: 999px;
  padding:       .1rem .5rem;
  font-size:     .75rem;
  line-height:   1.6;
  color:         var(--cq-muted);
  cursor:        pointer;
  transition:    background .15s ease, color .15s ease;
}
.cq-react-btn:hover      { background: var(--cq-primary-light); color: var(--cq-primary); }
.cq-react-btn.is-like    { color: #16a34a; background: rgba(22, 163, 74, .10); }
.cq-react-btn.is-dislike { color: #dc2626; background: rgba(220, 38, 38, .10); }

.cq-reply-form { margin: .5rem 0 .25rem; }

/* -- Pagination --------------------------------------------------------------------------------------------------------------------
   Scoped to .cq-pagination rather than Bootstrap's .pagination so the admin
   tables keep their own plain styling. Bootstrap's default pill is blue, which
   is the one thing on the page that would not look like this site. */
.cq-pagination { gap: .25rem; }
.cq-pagination .page-link {
  color:         var(--cq-primary);
  background:    #fff;
  border:        1px solid var(--cq-border);
  border-radius: var(--cq-radius-sm);
  padding:       .4rem .8rem;
  font-size:     .88rem;
  font-weight:   600;
  transition:    background .15s ease, color .15s ease, border-color .15s ease;
}
.cq-pagination .page-link:hover {
  background:   var(--cq-primary-light);
  border-color: var(--cq-primary);
  color:        var(--cq-primary-dark);
}
.cq-pagination .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(233, 30, 140, .25);
  outline:    none;
}
.cq-pagination .page-item.active .page-link {
  background:   var(--cq-grad);
  border-color: transparent;
  color:        #fff;
}
.cq-pagination .page-item.disabled .page-link {
  color:      var(--cq-muted);
  background: transparent;
  border-color: var(--cq-border);
  opacity:    .55;
}

/* -- GIF Gallery ------------------------------------------------------------------------------------------------------------------ */
.cq-gif-card {
  border-radius: var(--cq-radius);
  overflow:      hidden;
  transition:    transform .18s ease, box-shadow .18s ease;
}
.cq-gif-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--cq-shadow-lg);
}
.cq-gif-thumb {
  position:        relative;
  overflow:        hidden;
  border-radius:   var(--cq-radius);
  background:      var(--cq-grad-soft);
  aspect-ratio:    1 / 1;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.cq-gif-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.cq-gif-overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(135deg, rgba(233, 30, 140, .5), rgba(124, 58, 237, .5));
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity .18s;
}
.cq-gif-card:hover .cq-gif-overlay { opacity: 1; }
.cq-gif-tags { min-height: 1.5rem; overflow: hidden; }

/* -- Brand badge --------------------------------------------------------------------------------------------------------------------- */
.bg-pink { background: var(--cq-grad) !important; color: #fff !important; }
.badge   { font-weight: 600; letter-spacing: .01em; }

/* -- Results actions card responsive divider ------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #actionsCard .col-md-6 { border-right: none !important; }
  #actionsCard .order-1  { border-bottom: 1px solid var(--cq-border); }
}

/* -- Responsive tweaks ------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .cq-question-card { padding: 1.25rem; }
  .cq-result-hero   { padding: 1.5rem !important; }
  .cq-hero-emoji    { font-size: 2.5rem; }
}

/* -- Icons: calm by default, purposeful motion only ---------------------------------------------------------------------------------------
   Icons no longer animate ambiently. Motion is reserved for loading
   indicators and gentle feedback on interactive elements. */
[class*="bi-"] { display: inline-block; }

/* Loading indicators keep spinning — that motion carries meaning */
@keyframes cq-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
i.bi-arrow-repeat, i.bi-hourglass-split, i.bi-hourglass {
  animation: cq-spin 1.5s linear infinite;
}

/* Subtle icon feedback inside buttons and links on hover */
.btn i, a i { transition: transform .18s ease; }
.btn:hover > i, a:hover > i { transform: scale(1.12); }

/* Accessibility: honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:  none !important;
    transition: none !important;
  }
}