/* ============================================================
   Step 18 — test-section updates
   A. "Men kimman?" (Big Five)  -> 3 options
   B. TTJ so'rovnomasi          -> 2 options + optional last note
   C. "Guruh atmosferasi"       -> smoother sliders
   D. "Shaxs yo'nalganligi"     -> X/Y/Z orientation score + result card
   E. Registration: required sex; girls-only violence surveys
   F. "Agressivlik"             -> per-scale interpretation text
   ============================================================ */

/* ---- C. atmos sliders: smoother thumb + a filled progress track ---- */
.v48-slider{
  position:relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) var(--v48p,0%),
                          rgba(255,255,255,0) var(--v48p,0%), rgba(255,255,255,0) 100%),
    linear-gradient(90deg,#22c55e 0%,#eab308 50%,#ef4444 100%) !important;
  transition:background .18s ease !important;
}
.v48-slider::-webkit-slider-thumb{
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease !important;
  will-change:transform;
}
.v48-slider:hover::-webkit-slider-thumb{ transform:scale(1.06); }
.v48-slider:active::-webkit-slider-thumb{ transform:scale(1.18) !important; box-shadow:0 6px 18px -4px rgba(0,0,0,.5) !important; }
.v48-slider::-moz-range-thumb{ transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .18s ease !important; }
.v48-at-row{ transition:border-color .25s ease, box-shadow .25s ease !important; }
.v48-at-row .fav, .v48-at-row .v48-at-ticks span{ transition:color .18s ease; }
.v48-at-balance i{ transition:width .35s cubic-bezier(.4,0,.2,1) !important; }

/* ---- D. orientation result card ---- */
.f18-ori{
  background:linear-gradient(135deg,var(--so-soft,#eef6f7),#fff);
  border:1.5px solid var(--so-l,#22b8cf); border-radius:18px;
  padding:18px 20px; margin:6px 0 16px;
}
.f18-ori h3{ font-size:15px; font-weight:800; color:#0f4c5c; margin:0 0 4px; }
.f18-ori .f18-dom{ font-size:13.5px; font-weight:700; color:#155e75; margin:0 0 12px; }
.f18-ori .f18-dom b{ color:#0e7490; }
.f18-ori .f18-bar{ display:grid; grid-template-columns:150px 1fr 62px; align-items:center; gap:10px; margin:8px 0; font-size:12.5px; }
.f18-ori .f18-bar .nm{ font-weight:700; color:#243b42; }
.f18-ori .f18-bar .tk{ height:12px; border-radius:7px; background:#e7eef0; overflow:hidden; }
.f18-ori .f18-bar .tk i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#0891b2,#0e7490); }
.f18-ori .f18-bar.dom .tk i{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.f18-ori .f18-bar .vl{ text-align:right; font-weight:800; color:#0f4c5c; }
.f18-ori .f18-note{ font-size:12px; line-height:1.55; color:#3f5860; margin-top:10px; }
body.tl-dark .f18-ori{ background:linear-gradient(135deg,#12333b,#0e2229); border-color:#1f5b66; }
body.tl-dark .f18-ori h3{ color:#8fd3d0; }
body.tl-dark .f18-ori .f18-dom, body.tl-dark .f18-ori .f18-bar .nm, body.tl-dark .f18-ori .f18-note{ color:#c3d6da; }
body.tl-dark .f18-ori .f18-bar .tk{ background:#183038; }

/* ---- F. aggression per-scale interpretation ---- */
.f18-agr{ margin-top:12px; }
.f18-agr .f18-adesc{ font-size:11.5px; line-height:1.5; color:#5b6b73; margin:2px 0 10px 2px; }
.f18-agr .f18-asum{
  font-size:12.5px; line-height:1.6; color:#33434a; background:#f4f7f8;
  border-left:4px solid #0f9b8e; border-radius:10px; padding:10px 12px; margin-top:6px;
}
body.tl-dark .f18-agr .f18-adesc{ color:#9db0b7; }
body.tl-dark .f18-agr .f18-asum{ color:#d3dee2; background:#14232a; }

/* ---- E. registration sex field ---- */
#rf_sex .f18-sex-btns{ display:flex; gap:10px; }
#rf_sex .f18-sex-btns button{
  flex:1; border:1.5px solid #d9d2ca; background:#fff; border-radius:12px;
  padding:11px 10px; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
  color:#4a4038; transition:.15s;
}
#rf_sex .f18-sex-btns button.on{ background:linear-gradient(135deg,#0891b2,#0e7490); color:#fff; border-color:transparent; }
#rf_sex.err .f18-sex-btns{ outline:2px solid #ef4444; outline-offset:3px; border-radius:12px; }
body.tl-dark #rf_sex .f18-sex-btns button{ background:#1f1b17; color:#e7ddd2; border-color:#4a4038; }