/* ================================================================
   TRYONGIRLS — CUSTOM THEME
   templates/t19/css/overwrite.css

   All visual customisations live here.
   !! DO NOT touch widget.inplayer_ad.php — ad overlays are sacred !!
   !! DO NOT modify .stage / .inner-stage / #playerOverlay           !!
   ================================================================ */

/* ── 1. Design tokens ────────────────────────────────────────────
   Change values here to retheme the whole site in one place.
   ──────────────────────────────────────────────────────────────── */
:root {
  --bg:           #06080f;   /* deep midnight — not plain black      */
  --bg-panel:     #0b1120;   /* nav, card bottoms, header panels     */
  --bg-panel-2:   #101828;   /* filters, aside, secondary panels     */
  --bg-hover:     #18263d;   /* hover / selected rows                */
  --border:       #192640;   /* tinted blue-grey borders             */

  --accent:       #e8457a;   /* brand rose-magenta                   */
  --accent-dark:  #c02d5e;   /* hover / pressed accent               */
  --accent-glow:  rgba(232,69,122,.28); /* focus rings, glows         */

  --txt:          #d4d9e8;   /* primary body text                    */
  --txt-muted:    #697a96;   /* metadata, timestamps, counters       */
  --txt-dim:      #38495e;   /* very faint labels                    */

  --radius:       6px;       /* standard card / button corner radius */
  --radius-sm:    4px;
  --trans:        .22s ease;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--txt);
}

a:hover { color: var(--accent); }

::selection {
  background-color: var(--accent-glow);
  color: #fff;
}

/* ── 3. Sticky header with glassmorphism ─────────────────────────── */
.header-sec {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--bg-panel) 0%, rgba(11,17,32,.97) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.top-bar {
  background-color: var(--bg-panel);
}

/* Search */
.search-wrap input[type="text"] {
  background-color: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--txt);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.search-wrap input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}
.search-wrap button[type="submit"] {
  background-color: transparent;
  color: var(--accent);
}
@media (min-width: 1040px) {
  .search-box .search-wrap button[type="submit"] {
    background-color: transparent;
    color: var(--accent);
  }
}
.search-wrap button[type="submit"]:hover { color: var(--accent-dark); }

/* Nav links */
.main-nav .nav-elem > a:not(.show-drop)::after {
  background-color: transparent;
}
.main-nav .nav-elem.active > a:not(.show-drop)::after,
.main-nav .nav-elem:hover > a:not(.show-drop)::after {
  background-color: var(--accent) !important;
  height: 3px !important;
}

/* Dropdown menus */
.nav-drop,
.nav-channels {
  background-color: var(--bg-panel);
}
.nav-drop a {
  border-bottom-color: var(--border);
}
.nav-drop a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--bg-hover);
}
.dropdown-menu {
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0,0,0,.7);
}
.dropdown-menu a { color: var(--txt); }
.dropdown-menu a:hover {
  background-color: var(--bg-hover);
  color: var(--accent);
}

/* ── 4. Thumbnail cards ──────────────────────────────────────────── */

/* Rounded image container */
.item-col .image {
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--bg-panel);
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: none;
}

/* Smooth zoom — preserve translateY(-50%) set by styles.css */
.item-col .image > img {
  transition: transform .34s ease, filter .34s ease;
  will-change: transform;
}
.item-col:hover .image > img {
  transform: translateY(-50%) scale(1.07);
  filter: brightness(1.1);
}
/* Model cards use translateX — keep that axis */
.item-col.-model:hover .image > img {
  transform: translateX(-50%) scale(1.05);
  filter: brightness(1.08);
}

/* Quality badge (HD / 4K) — smaller pill flush top-left */
.item-col .item-quality {
  background-color: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  height: 22px;
  line-height: 22px;
  width: auto;
  min-width: 28px;
  padding: 0 7px;
}

/* Duration badge — frosted glass, flush top-right */
.item-col .item-time {
  background-color: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-sm) 0 0 0;
  height: 22px;
  line-height: 22px;
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}
.item-col .item-time .svg-inline--fa { color: var(--accent); }

/* Lock / access badge */
.item-col .item-access {
  background-color: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.item-col .item-access .svg-inline--fa { color: var(--accent); }

/* Bottom info bar */
.item-col .item-info {
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.item-col .item-name {
  font-size: 13px;
  color: var(--txt);
  padding-left: 8px;
  transition: color var(--trans);
}
.item-col:hover .item-name { color: #fff; }

/* Rating number badge */
.item-col .item-rate {
  background-color: var(--accent);
  color: #fff;
  min-width: 44px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}

/* Fav / edit icons */
.item-col .add-to-fav  { color: var(--accent); }
.item-col .add-to-fav:hover  { color: var(--accent-dark); opacity: 1; }
.item-col .edit-content { color: var(--accent); }
.item-col .edit-content:hover { color: var(--accent-dark); opacity: 1; }

/* ── 5. Buttons ──────────────────────────────────────────────────── */
.btn.btn-default {
  background-color: var(--accent);
  border-radius: var(--radius-sm);
  transition: background-color var(--trans);
}
.btn.btn-default:hover { background-color: var(--accent-dark); color: #fff; }

.btn.btn-header {
  border-color: var(--accent);
  border-radius: var(--radius-sm);
}
.btn.btn-header .svg-inline--fa { color: var(--accent); }

/* ── 6. Global accent colour substitutions ───────────────────────── */
.highlight { color: var(--accent); }

.title-col h1::before, .title-col h2::before,
.title-col h3::before, .title-col h4::before,
.title-col h5::before, .title-col h6::before {
  background-color: var(--accent);
}

.pagination span { background-color: var(--accent); border-radius: var(--radius-sm); }
.pagination a { border-radius: var(--radius-sm); }
.pagination a:hover { background-color: var(--accent); }

.alphabet-col a.active { background-color: var(--accent); }
.alphabet-col a:hover  { background-color: var(--accent-dark); }

.tabs-nav li a.active::after,
.tabs-nav li a:hover::after  { background-color: var(--accent); }
.tabs-nav li a.active .icon-circle,
.tabs-nav li a:hover  .icon-circle { color: var(--accent); border-color: var(--accent); }

.simple-list li.active a { color: var(--accent); }
.breadcrumb-item:not(:first-child)::before { background-color: var(--accent); }
.breadcrumb-item:last-child a { color: var(--accent); }

a.tag {
  background-color: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background-color var(--trans), border-color var(--trans);
}
a.tag:hover { background-color: var(--accent); border-color: var(--accent); }

/* ── 7. Rating widget ────────────────────────────────────────────── */
.rating-current { color: var(--accent); }
.rate { color: var(--accent); border-color: rgba(232,69,122,.5); border-radius: var(--radius-sm); }
.rate:hover { background-color: var(--accent); color: #fff; border-color: var(--accent); }

/* ── 8. Range slider ─────────────────────────────────────────────── */
.irs-slider { background-color: var(--accent); cursor: pointer; }
.irs-bar { background-color: var(--bg-hover); }
.irs-line { background-color: var(--bg-panel-2); }

/* ── 9. Sidebar / filters ────────────────────────────────────────── */
.filter-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.filter-header {
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.filter-header .sub-label { color: var(--txt-muted); }
.filter-content { background-color: var(--bg-panel-2); }
.filter-item a.active,
.filter-item a:hover   { background-color: var(--accent); }

.header-filter a { color: var(--txt); }
.header-filter a:hover  { background-color: var(--accent-dark); }
.header-filter a.active { background-color: var(--accent); }

/* ── 10. Channels list (sidebar) ─────────────────────────────────── */
.channels-list-header { background-color: var(--bg-panel); }
.channels-list { background-color: var(--bg-panel-2); }
.channels-list a { color: var(--txt); }
.channels-list a .counter { color: var(--txt-muted); }
.channels-list a.active,
.channels-list a:hover  { background-color: var(--accent); }
.channels-list a.active .counter,
.channels-list a:hover  .counter { color: rgba(255,255,255,.7); }
.-scrollbar .track       { background-color: var(--bg-hover); }
.-scrollbar .track .thumb { background-color: var(--accent); }

/* ── 11. Forms / inputs ──────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="color"],
select,
textarea,
button.btn-selectpicker {
  background-color: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--txt);
  transition: border-color var(--trans), box-shadow var(--trans);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}
.filter-content input[type="text"],
.filter-content select,
.add-comment input[type="text"],
.add-comment textarea {
  background-color: var(--bg);
  border-color: var(--border);
}

/* Checkbox / radio ticks */
.checkbox label .sub-label::before,
.radio    label .sub-label::before { border-color: var(--border); }
.checkbox label .sub-label::after,
.radio    label .sub-label::after  { background-color: var(--accent); }

/* ── 12. Comments ────────────────────────────────────────────────── */
.comments-wrapper { background-color: var(--bg-panel); }
.comment-box { background-color: transparent; }
#new-comment .comment-box,
.comment-box:nth-child(2n) { background-color: var(--bg-panel-2); }
.comment-info a  { color: var(--accent); }
.comment-info a:hover { color: var(--accent-dark); }
.comment-text { color: var(--txt-muted); }
.comment-avatar { background-color: var(--bg-panel-2); }

/* ── 13. Content page ────────────────────────────────────────────── */
.content-controls  { border-bottom-color: var(--border); }
.content-links     { border-bottom-color: var(--border); }
.content-embed     { border-bottom-color: var(--border); }
.content-desc      { color: var(--txt-muted); }
.content-submitter a { color: var(--accent); }
.content-submitter a:hover { color: var(--accent-dark); }
.info-elem .svg-inline--fa { color: var(--accent); }
.content-links .label .svg-inline--fa { color: var(--accent); }
.content-links.-models a { color: var(--accent); }
.content-links.-models a:hover { color: var(--accent-dark); }
.content-links.-models a:not(:last-child)::after { color: var(--accent); }

/* Download section */
.download-item:not(:last-child) { border-bottom-color: var(--border); }
.download-item.-label { color: var(--txt-muted); }

/* ── 14. Model / pornstar pages ──────────────────────────────────── */
.model-nav-col  { border-bottom-color: var(--border); }
.user-nav-col   { border-bottom-color: var(--border); }
.model-block    { border-bottom-color: var(--border); }
.user-block     { border-bottom-color: var(--border); }
.model-nav-col .tabs-nav a .svg-inline--fa,
.user-nav-col  .tabs-nav a .svg-inline--fa { color: var(--accent); }
.model-list li  { background-color: transparent; }
.model-list li:nth-child(2n) { background-color: var(--bg-panel); }
.user-list  li  { background-color: transparent; }
.user-list  li:nth-child(2n) { background-color: var(--bg-panel); }
.model-list .desc,
.user-list  .desc { color: var(--txt-muted); }

/* ── 15. Paysite / channel headers ───────────────────────────────── */
.paysite-header-col { border-bottom-color: var(--border); }
.paysite-counter .svg-inline--fa { color: var(--accent); }
.paysite-desc { color: var(--txt-muted); }

/* ── 16. Tables ──────────────────────────────────────────────────── */
table tr { border-bottom-color: var(--border); }
.mail-list tr a { color: var(--accent); }
.mail-list tr a:hover { color: var(--accent-dark); }

/* ── 17. Footer ──────────────────────────────────────────────────── */
.footer-sec {
  background-color: var(--bg-panel);
  border-top: 1px solid var(--border);
}
.footer-list a { color: var(--txt-muted); transition: color var(--trans); }
.footer-list a:hover { color: var(--accent); }
.footer-list li + li { border-left-color: var(--border); }

.social-list a {
  background-color: var(--bg-panel-2);
  border-color: var(--border);
  transition: background-color var(--trans), border-color var(--trans), transform var(--trans);
}
.social-list a:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* ── 18. Notifications ───────────────────────────────────────────── */
.alert a, .messages a, .notification a { color: var(--accent); }
.alert a:hover, .messages a:hover, .notification a:hover { color: var(--accent-dark); }

/* ── 19. Static / info pages ─────────────────────────────────────── */
.static-col h1, .static-col h2, .static-col h3,
.static-col h4, .static-col h5, .static-col h6 { color: var(--txt-muted); }
.static-col ul li::before { background-color: var(--accent); }

/* ── 20. Webkit scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── 21. Bootstrap-select dropdown ──────────────────────────────── */
.bootstrap-select > .dropdown-toggle {
  background-color: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--txt);
}
.bootstrap-select .dropdown-menu {
  background-color: var(--bg-panel);
  border-color: var(--border);
}
.bootstrap-select .dropdown-menu a { color: var(--txt); }
.bootstrap-select .dropdown-menu a:hover {
  background-color: var(--bg-hover);
  color: var(--accent);
}

/* ── 22. ucp / lang dropdowns (top bar) ──────────────────────────── */
.btn.btn-dropdown.btn-ucp .svg-inline--fa { color: var(--accent); }
.btn.btn-dropdown.btn-ucp .avatar { border-color: var(--accent); }
.lang-col .btn-dropdown .svg-inline--fa { color: var(--accent); }
.lang-col .lang-dropdown { background-color: var(--bg-panel); }
.lang-col .lang-dropdown li.active a { background-color: var(--bg-hover); }
.lang-col .lang-dropdown li a:hover { background-color: var(--accent); }

/* ── 23. Upload page niche checkboxes ────────────────────────────── */
.upload-niches .checkbox label { color: var(--txt); }

/* ── 24. Loader dots (gallery) ───────────────────────────────────── */
.loading-img .ball-triangle-path > div { background-color: var(--accent); }

/* ── 25. CSS text logo (Option A) ───────────────────────────────────
   Hides the PNG and rebuilds the wordmark with pseudo-elements.
   "TryOn" — heavy white  |  "GIRLS" — thin rose, spaced
   ─────────────────────────────────────────────────────────────────── */
.logo-col a img {
  display: none;
}
.logo-col a {
  display: flex;
  align-items: center;
  max-width: 280px;
  font-size: 0;          /* suppress img alt text */
}
.logo-col a::before {
  content: "TryOn";
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1;
}
.logo-col a::after {
  content: "Girls";
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 1040px) {
  .logo-col { max-width: 280px; }
}