/* JAVSPY UI V2F
   Consolidated polish for MONO TOPNAV V2.
   - hero removed
   - burger far right
   - compact accordion settings
   - column footer
   - larger pagination
   - monochrome accent purge
   - card info panel support
*/

/* =========================
   HEADER ORDER
   ========================= */
.vp-header-row .vp-logo{order:1!important}
.vp-header-row .vp-search{order:2!important}
.vp-header-row .vp-catalog-count{order:3!important}
.vp-header-row .vp-header-actions{order:4!important}
.vp-header-row .vp-menu-toggle{
  order:99!important;
  margin-left:10px!important;
  margin-right:0!important;
  flex:0 0 40px!important;
  width:40px!important;
  height:40px!important;
  border-radius:0!important;
  border:1px solid #2a2a2a!important;
  background:#070707!important;
  color:#aaa!important;
  box-shadow:none!important
}
.vp-header-row .vp-menu-toggle:hover,
.vp-header-row .vp-menu-toggle.is-open{
  background:#f0f0f0!important;
  border-color:#f0f0f0!important;
  color:#050505!important
}

/* =========================
   SETTINGS — ACCORDION
   ========================= */
.vp-settings{
  width:min(360px,calc(100vw - 24px))!important;
  max-height:min(640px,calc(100vh - 72px))!important;
  padding:0!important;
  border:1px solid #252525!important;
  border-radius:0!important;
  background:#070707!important;
  box-shadow:0 28px 72px rgba(0,0,0,.72)!important;
  overflow:auto!important
}
.vp-settings-head{
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:9px 11px!important;
  border-bottom:1px solid #1d1d1d!important;
  background:#050505!important
}
.vp-settings-head>div{min-width:0!important}
.vp-settings-eyebrow{
  display:block!important;
  margin:0 0 3px!important;
  color:#4d4d4d!important;
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important
}
.vp-settings-head strong{
  display:block!important;
  color:#ececec!important;
  font-size:14px!important;
  line-height:1.1!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important
}
.vp-settings-head [data-settings-close]{
  width:30px!important;height:30px!important;
  flex:0 0 30px!important;
  padding:0!important;
  display:grid!important;place-items:center!important;
  border:1px solid #252525!important;
  border-radius:0!important;
  background:#080808!important;
  color:#777!important;
  box-shadow:none!important
}
.vp-settings-head [data-settings-close]:hover{
  background:#eee!important;
  border-color:#eee!important;
  color:#050505!important
}
.javspy-settings-accordion{display:block!important}
.javspy-settings-group{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid #1b1b1b!important;
  border-radius:0!important;
  background:transparent!important
}
.javspy-settings-summary{
  position:relative!important;
  min-height:45px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  list-style:none!important;
  padding:8px 35px 8px 11px!important;
  cursor:pointer!important;
  background:#080808!important;
  color:#9a9a9a!important;
  user-select:none!important
}
.javspy-settings-summary::-webkit-details-marker{display:none!important}
.javspy-settings-summary:after{
  content:"+";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#575757;
  font:500 18px/1 ui-monospace,monospace
}
.javspy-settings-group[open]>.javspy-settings-summary{
  background:#0d0d0d!important;
  color:#f0f0f0!important
}
.javspy-settings-group[open]>.javspy-settings-summary:after{
  content:"−";
  color:#aaa
}
.javspy-settings-summary:hover{
  background:#101010!important;
  color:#fff!important
}
.javspy-settings-summary>.javspy-settings-icon{
  flex:0 0 27px!important;
  width:27px!important;height:27px!important;
  display:grid!important;place-items:center!important;
  border:1px solid #242424!important;
  background:#090909!important;
  color:#666!important
}
.javspy-settings-summary>.javspy-settings-icon i{font-size:11px!important}
.javspy-settings-summary>div{min-width:0!important}
.javspy-settings-summary strong{
  display:block!important;
  color:inherit!important;
  font-size:12.5px!important;
  line-height:1.1!important;
  font-weight:700!important
}
.javspy-settings-summary small{
  display:block!important;
  margin-top:3px!important;
  color:#505050!important;
  font-size:10.5px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important
}
.javspy-settings-body{
  padding:9px 10px 10px!important;
  background:#050505!important
}

/* Appearance */
.javspy-settings-body .vp-theme-switch{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0!important
}
.javspy-settings-body .vp-theme-switch button{
  min-height:34px!important;
  padding:6px 5px!important;
  border:1px solid #242424!important;
  border-radius:0!important;
  background:#090909!important;
  color:#777!important;
  box-shadow:none!important;
  font-size:11px!important
}
.javspy-settings-body .vp-theme-switch button:hover{
  border-color:#666!important;
  background:#111!important;
  color:#eee!important
}
.javspy-settings-body .vp-theme-switch button.is-active,
.javspy-settings-body .vp-theme-switch button[aria-pressed="true"]{
  border-color:#eee!important;
  background:#eee!important;
  color:#050505!important
}

/* Language */
.javspy-settings-body .vp-language-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  max-height:210px!important;
  overflow:auto!important;
  border-top:1px solid #1d1d1d!important;
  border-left:1px solid #1d1d1d!important
}
.javspy-settings-body .vp-language-list a{
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 7px!important;
  border:0!important;
  border-right:1px solid #1d1d1d!important;
  border-bottom:1px solid #1d1d1d!important;
  border-radius:0!important;
  background:#080808!important;
  color:#777!important;
  box-shadow:none!important
}
.javspy-settings-body .vp-language-list a:hover{
  background:#111!important;
  color:#eee!important
}
.javspy-settings-body .vp-language-list a.is-active,
.javspy-settings-body .vp-language-list a[aria-current="true"]{
  background:#eaeaea!important;
  color:#050505!important
}
.javspy-settings-body .vp-lang-code{
  color:#555!important;
  font:700 9px/1 ui-monospace,monospace!important
}
.javspy-settings-body .vp-lang-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important
}

/* Access */
.javspy-settings-body .vp-tier-filter-settings{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important
}
.javspy-settings-body .vp-tier-filter-settings button{
  min-height:34px!important;
  padding:6px!important;
  border:1px solid #242424!important;
  border-radius:0!important;
  background:#090909!important;
  color:#777!important;
  box-shadow:none!important
}
.javspy-settings-body .vp-tier-filter-settings button:hover{
  border-color:#666!important;
  color:#eee!important;
  background:#111!important
}
.javspy-settings-body .vp-tier-filter-settings button.is-active,
.javspy-settings-body .vp-tier-filter-settings button[aria-pressed="true"]{
  background:#eee!important;
  color:#050505!important;
  border-color:#eee!important
}

/* Browsing toggles */
.javspy-settings-body .vp-setting-toggle{
  min-height:37px!important;
  margin:0!important;
  padding:7px 2px!important;
  border:0!important;
  border-bottom:1px solid #151515!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}
.javspy-settings-body .vp-setting-toggle:last-child{border-bottom:0!important}
.javspy-settings-body .vp-setting-toggle span strong{
  color:#aaa!important;
  font-size:11.5px!important
}
.javspy-settings-body .vp-setting-toggle span small{
  color:#4f4f4f!important;
  font-size:10px!important
}
.javspy-settings-body .vp-setting-toggle>i{
  background:#171717!important;
  border-color:#292929!important
}
.javspy-settings-body .vp-setting-toggle input:checked+i{
  background:#e9e9e9!important;
  border-color:#e9e9e9!important
}
.vp-settings-foot{
  padding:8px 10px!important;
  border:0!important;
  background:#050505!important;
  color:#444!important;
  font-size:9.5px!important
}

/* =========================
   MONOCHROME ACCENT PURGE
   ========================= */
.vp-advanced-filter-toggle,
.vp-settings-button,
.vp-audience-toggle,
.vp-header-favorite-icon,
.vp-mobile-search,
.vp-card-more,
.vp-card-menu button,
.vp-card-actions button,
.vp-card-info-actions button,
[data-card-info-toggle]{
  border-color:#292929!important;
  background:#080808!important;
  color:#858585!important;
  box-shadow:none!important
}
.vp-advanced-filter-toggle:hover,
.vp-settings-button:hover,
.vp-audience-toggle:hover,
.vp-header-favorite-icon:hover,
.vp-mobile-search:hover,
.vp-card-more:hover,
.vp-card-menu button:hover,
.vp-card-actions button:hover,
.vp-card-info-actions button:hover,
[data-card-info-toggle]:hover{
  border-color:#eee!important;
  background:#eee!important;
  color:#050505!important
}
.vp-advanced-filter-toggle[aria-expanded="true"],
.vp-settings-button[aria-expanded="true"],
.vp-audience-toggle[aria-expanded="true"]{
  border-color:#ddd!important;
  background:#ddd!important;
  color:#050505!important
}
.vp-advanced-filter-panel{
  border-color:#252525!important;
  border-radius:0!important;
  background:#080808!important;
  box-shadow:0 24px 64px rgba(0,0,0,.7)!important
}
.vp-advanced-filter-panel input,
.vp-advanced-filter-panel select{
  border-color:#292929!important;
  border-radius:0!important;
  background:#050505!important;
  color:#bbb!important
}
.vp-advanced-filter-panel input:focus,
.vp-advanced-filter-panel select:focus{
  border-color:#888!important;
  box-shadow:none!important
}
.vp-advanced-filter-apply,
.vp-advanced-filter-actions button{
  border:1px solid #e9e9e9!important;
  border-radius:0!important;
  background:#e9e9e9!important;
  color:#050505!important;
  box-shadow:none!important
}
.vp-advanced-filter-apply:hover,
.vp-advanced-filter-actions button:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:#050505!important
}
.vp-advanced-filter-reset{
  color:#777!important;
  background:transparent!important
}
.vp-advanced-filter-reset:hover{color:#fff!important}

/* Tier filter red remnants */
.vp-tier-filter-inline button{
  color:#666!important;
  border-color:transparent!important;
  background:transparent!important
}
.vp-tier-filter-inline button:hover{
  color:#ddd!important;
  background:#0d0d0d!important;
  border-color:#252525!important
}
.vp-tier-filter-inline button.is-active,
.vp-tier-filter-inline button[aria-pressed="true"]{
  color:#fff!important;
  background:#111!important;
  border-color:#555!important
}

/* Rating / feedback: neutralize colored inherited states */
.vp-rating-badge,
.vp-rating-badge.is-good,
.vp-rating-badge.is-warn,
.vp-rating-badge.is-bad,
.vp-rating-badge.is-neutral{
  color:#b0b0b0!important;
  background:rgba(0,0,0,.88)!important;
  border-color:rgba(255,255,255,.10)!important
}
.vp-rating-feedback .vp-feedback-actions button,
.vp-rating-feedback .vp-feedback-report,
.vp-rating-feedback .vp-feedback-close{
  background:#111!important;
  border-color:#292929!important;
  color:#aaa!important;
  box-shadow:none!important
}
.vp-rating-feedback .vp-feedback-actions button:hover,
.vp-rating-feedback .vp-feedback-report:hover,
.vp-rating-feedback .vp-feedback-close:hover{
  background:#eee!important;
  border-color:#eee!important;
  color:#050505!important
}
.vp-rating-feedback .vp-feedback-actions button.is-selected{
  background:#dcdcdc!important;
  border-color:#dcdcdc!important;
  color:#050505!important
}

/* Common legacy red hover / active utility classes */
.vp-favorite-button:hover,
.vp-card-bookmark:hover,
.vp-card-favorite:hover,
.vp-single-actions a:hover,
.vp-single-actions button:hover{
  background:#eee!important;
  border-color:#eee!important;
  color:#050505!important
}

/* =========================
   CARD THREE-DOT INFO
   ========================= */
.vp-card,.vp-card-media,[data-partner-card]{position:relative!important}
[data-card-info]{
  z-index:80!important;
  border:1px solid #292929!important;
  border-radius:0!important;
  background:rgba(7,7,7,.98)!important;
  color:#aaa!important;
  box-shadow:0 20px 50px rgba(0,0,0,.65)!important
}
[data-card-info][hidden]{display:none!important}
[data-card-info]:not([hidden]){display:block!important}
[data-card-info-close]{
  border:1px solid #292929!important;
  border-radius:0!important;
  background:#0b0b0b!important;
  color:#777!important
}
[data-card-info-close]:hover{
  background:#eee!important;
  border-color:#eee!important;
  color:#050505!important
}
.vp-card-info-head{border-bottom-color:#1d1d1d!important}
.vp-card-info-actions a,
.vp-card-info-actions button{
  border-color:#292929!important;
  border-radius:0!important;
  background:#0b0b0b!important;
  color:#888!important
}
.vp-card-info-actions a:hover,
.vp-card-info-actions button:hover{
  background:#eee!important;
  border-color:#eee!important;
  color:#050505!important
}

/* =========================
   PAGINATION — LARGER
   ========================= */
.vp-pagination.vp-pagination-flat{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:14px!important;
  margin-top:38px!important;
  padding:24px 0 4px!important;
  border-top:1px solid #1e1e1e!important
}
.vp-pagination-link{
  min-width:150px!important;
  min-height:52px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:12px 20px!important;
  border:1px solid #303030!important;
  border-radius:0!important;
  background:#090909!important;
  color:#b6b6b6!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.015em!important;
  box-shadow:none!important
}
.vp-pagination-prev{justify-self:start!important}
.vp-pagination-next{justify-self:end!important}
.vp-pagination-link i{font-size:12px!important}
.vp-pagination-link:hover{
  background:#f0f0f0!important;
  border-color:#f0f0f0!important;
  color:#050505!important;
  transform:none!important
}
.vp-pagination-current{
  min-width:112px!important;
  min-height:52px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:10px 16px!important;
  border:1px solid #202020!important;
  border-radius:0!important;
  background:#050505!important;
  color:#777!important;
  font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  box-shadow:none!important
}
.vp-pagination-spacer{min-width:150px!important}

/* =========================
   FOOTER — COLUMNS AGAIN
   ========================= */
.vp-footer{
  margin-top:52px!important;
  border-top:1px solid #1b1b1b!important;
  background:#030303!important
}
.vp-footer-grid{
  display:grid!important;
  grid-template-columns:minmax(240px,1.25fr) repeat(3,minmax(150px,.65fr))!important;
  align-items:start!important;
  gap:34px 48px!important;
  padding-top:34px!important;
  padding-bottom:30px!important
}
.vp-footer-brand{
  min-width:0!important;
  display:block!important
}
.vp-footer-brand p{display:none!important}
.vp-footer-col{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:8px!important;
  transform:none!important;
  margin:0!important
}
.vp-footer-col strong{
  display:block!important;
  width:auto!important;
  margin:0 0 5px!important;
  color:#505050!important;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important
}
.vp-footer-col a{
  display:block!important;
  padding:0!important;
  color:#747474!important;
  font-size:12.5px!important;
  line-height:1.35!important
}
.vp-footer-col a:hover{color:#fff!important}
.vp-footer-bottom{
  border-top:1px solid #121212!important;
  color:#3f3f3f!important;
  font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace!important
}

/* Explicitly kill inherited footer desktop shift */
@media(min-width:901px){
  .vp-footer-grid>.vp-footer-col{transform:none!important}
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1100px){
  .vp-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:30px 40px!important
  }
}
@media(max-width:980px){
  .vp-header-row .vp-menu-toggle{
    order:99!important;
    margin-left:2px!important;
    width:38px!important;height:38px!important;flex-basis:38px!important
  }
  .vp-settings{
    width:min(350px,calc(100vw - 18px))!important;
    max-height:calc(100vh - 66px)!important
  }
  .vp-pagination-link{
    min-width:130px!important;
    min-height:48px!important;
    padding:10px 15px!important
  }
  .vp-pagination-current{min-height:48px!important}
}
@media(max-width:620px){
  .vp-footer-grid{
    grid-template-columns:1fr!important;
    gap:24px!important
  }
  .vp-pagination.vp-pagination-flat{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important
  }
  .vp-pagination-current{
    grid-column:1/-1!important;
    grid-row:1!important;
    width:100%!important
  }
  .vp-pagination-prev{grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0!important}
  .vp-pagination-next{grid-column:2!important;grid-row:2!important;width:100%!important;min-width:0!important}
  .vp-pagination-spacer{min-width:0!important}
  .javspy-settings-body .vp-language-list{grid-template-columns:1fr!important}
}