/* =====================================================================
   GayForIt — gfi_v2.css
   Redesign Oct 2026: single header bar, homepage, video page, comments.
   Loaded after style_resp.css. Design reference: docs/design/redesign-2026-10
   ===================================================================== */

:root {
  --gfi-bg: #0b0b0b;
  --gfi-bar: #141414;
  --gfi-surface: #181818;
  --gfi-surface-2: #1e1e1e;
  --gfi-border: #262626;
  --gfi-border-2: #2e2e2e;
  --gfi-text: #f2f2f2;
  --gfi-text-2: #c8c8c8;
  --gfi-muted: #9a9a9a;
  --gfi-accent: #ff8730;
  --gfi-gold: #e2b04a;
  --gfi-green: #4ade80;
  --gfi-amber: #fbbf24;
  --gfi-blue: #4f8cff;
  --gfi-purple: #b9a6ff;
  --gfi-max: 1400px;
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.gfi-hdr { background: var(--gfi-bar); border-bottom: 1px solid var(--gfi-border); font-family: Inter, system-ui, sans-serif; position: relative; z-index: 50; }
.gfi-hdr * { box-sizing: border-box; }
.gfi-hdr a { text-decoration: none; }
.gfi-hdr-in { max-width: var(--gfi-max); margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 20px; }

.gfi-hdr-logo { display: flex; align-items: center; flex-shrink: 0; height: 60px; }
.gfi-hdr-logo img { height: 26px; width: auto; display: block; }

.gfi-hdr-nav { display: flex; gap: 2px; flex-shrink: 0; }
.gfi-hdr-nav a { display: block; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--gfi-text-2); line-height: 20px; white-space: nowrap; }
.gfi-hdr-nav a:hover { color: var(--gfi-text); background: rgba(255,255,255,0.05); }
.gfi-hdr-nav a#currentTab, .gfi-hdr-nav a.is-current { color: var(--gfi-accent); font-weight: 600; background: #1f1a14; }

.gfi-hdr-search { flex: 1 1 320px; min-width: 160px; }
.gfi-hdr-search form { margin: 0; }
.gfi-hdr-search .gfi-sbox { display: flex; align-items: center; background: var(--gfi-surface-2); border: 1px solid var(--gfi-border-2); border-radius: 8px; height: 40px; padding: 0 6px 0 12px; }
.gfi-hdr-search .gfi-sbox:focus-within { border-color: #444; }
.gfi-hdr-search svg { flex-shrink: 0; }
.gfi-hdr-search input.s_for { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--gfi-text); font-size: 14px; padding: 0 10px; height: 38px; font-family: inherit; width: auto; margin: 0; box-shadow: none; }
.gfi-hdr-search input.s_for::placeholder { color: #777; }
.gfi-hdr-search input.search_button { background: #2a2a2a; color: var(--gfi-text); border: 0; border-radius: 6px; height: 28px; padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin: 0; width: auto; line-height: 28px; }
.gfi-hdr-search input.search_button:hover { background: #333; }
.gfi-hdr-search .error { display: block; font-size: 12px; color: #ff6b6b; }
.gfi-hdr-search .error:empty { display: none; }

.gfi-hdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.gfi-btn-prem { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--gfi-gold); color: var(--gfi-gold); font-size: 13px; font-weight: 600; white-space: nowrap; }
.gfi-btn-prem:hover { background: rgba(226,176,74,0.1); color: var(--gfi-gold); }
.gfi-btn-upload { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; background: var(--gfi-accent); color: #111; font-size: 13px; font-weight: 700; white-space: nowrap; }
.gfi-btn-upload:hover { background: #ffa05a; color: #111; }
.gfi-hdr-actions .notif-wrapper { display: inline-flex; }
.gfi-hdr-actions .notif-bell { width: 36px; height: 36px; border-radius: 6px; background: transparent; border: 1px solid var(--gfi-border-2); }
.gfi-hdr-actions .notif-bell-icon svg { width: 18px; height: 18px; }
.gfi-hdr-mail { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--gfi-border-2); color: var(--gfi-text-2); }
.gfi-hdr-mail:hover { color: var(--gfi-accent); border-color: rgba(255,135,48,0.4); }
.gfi-hdr-mail .gfi-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gfi-accent); color: #111; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }

.gfi-acct { position: relative; }
.gfi-acct-btn { width: 36px; height: 36px; border-radius: 18px; background: #2a2a2a; border: 1px solid #333; color: var(--gfi-text); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; padding: 0; text-transform: uppercase; }
.gfi-acct-btn:hover { border-color: #555; }
.gfi-acct-btn.is-prem { border-color: var(--gfi-gold); color: var(--gfi-gold); }
.gfi-acct-menu { display: none; position: absolute; right: 0; top: 44px; min-width: 220px; background: var(--gfi-surface); border: 1px solid var(--gfi-border-2); border-radius: 10px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 60; }
.gfi-acct.is-open .gfi-acct-menu { display: block; }
.gfi-acct-menu .gfi-acct-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--gfi-border); margin-bottom: 6px; font-size: 13px; color: var(--gfi-muted); }
.gfi-acct-menu .gfi-acct-who b { display: block; color: var(--gfi-text); font-size: 14px; font-weight: 600; margin-bottom: 2px; word-break: break-all; }
.gfi-acct-menu a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--gfi-text-2); }
.gfi-acct-menu a:hover { background: rgba(255,255,255,0.05); color: var(--gfi-text); }
.gfi-acct-menu .gfi-acct-sep { height: 1px; background: var(--gfi-border); margin: 6px 0; }
.gfi-acct-menu form { margin: 0; padding: 4px 10px 6px; }
.gfi-acct-menu select { width: 100%; background: var(--gfi-surface-2); color: var(--gfi-text-2); border: 1px solid var(--gfi-border-2); border-radius: 6px; height: 32px; font-size: 13px; font-family: inherit; }
.gfi-acct-menu label { display: block; font-size: 11px; color: var(--gfi-muted); margin-bottom: 4px; }

.gfi-hdr-login { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--gfi-border-2); color: var(--gfi-text); font-size: 13px; font-weight: 600; }
.gfi-hdr-login:hover { border-color: #555; color: var(--gfi-text); }

/* Mobile toggle + drawer */
.gfi-hdr-burger { display: none; width: 40px; height: 40px; border-radius: 8px; background: transparent; border: 0; cursor: pointer; align-items: center; justify-content: center; color: var(--gfi-text); padding: 0; }
.gfi-hdr-drawer { display: none; border-top: 1px solid var(--gfi-border); background: var(--gfi-bar); }
.gfi-hdr.is-open .gfi-hdr-drawer { display: block; }
.gfi-hdr-drawer-in { max-width: var(--gfi-max); margin: 0 auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.gfi-hdr-drawer .gfi-hdr-nav { flex-wrap: wrap; }
.gfi-hdr-drawer .gfi-hdr-nav a { padding: 10px 12px; font-size: 15px; }
.gfi-hdr-drawer .gfi-hdr-actions { margin-left: 0; flex-wrap: wrap; }
.gfi-hdr-drawer .gfi-acct-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0; background: transparent; min-width: 0; }
.gfi-hdr-drawer .gfi-acct-menu a { display: inline-block; }

/* Sub bar: video.php filter toggles (Remove duplicates / HD only) */
.gfi-subbar { background: var(--gfi-bg); border-bottom: 1px solid var(--gfi-border); }
.gfi-subbar-in { max-width: var(--gfi-max); margin: 0 auto; padding: 8px 24px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.gfi-subbar .new_sf_buttons { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gfi-text-2); cursor: pointer; }
.gfi-subbar .new_sf_buttons.button_dis { opacity: 0.45; cursor: default; }
.gfi-subbar .new_sf_buttons > span { white-space: nowrap; }

/* Site message (meta_message) */
.gfi-hdr + .main_message, .gfi-subbar + .main_message { max-width: var(--gfi-max); margin: 10px auto 0; padding: 0 24px; }

.gfi-hdr-msearch { display: none; max-width: var(--gfi-max); margin: 0 auto; padding: 0 16px 10px; }
.gfi-hdr-msearch .gfi-hdr-search { flex: none; width: 100%; }
.gfi-hdr-msearch .gfi-sbox { height: 42px; border-radius: 10px; }
@media (max-width: 1023px) {
  .gfi-hdr-msearch { display: block; }
  .gfi-hdr-in > .gfi-hdr-nav, .gfi-hdr-in > .gfi-hdr-search, .gfi-hdr-in > .gfi-hdr-actions { display: none; }
  .gfi-hdr-burger { display: inline-flex; margin-left: auto; }
  .gfi-hdr-in { height: 56px; padding: 0 16px; }
  .gfi-hdr-logo { height: 56px; }
  .gfi-hdr-logo img { height: 22px; }
  .gfi-hdr-top-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .gfi-hdr-top-right .gfi-hdr-burger { margin-left: 0; }
  .gfi-subbar-in { padding: 8px 16px; }
}
@media (min-width: 1024px) {
  .gfi-hdr-top-right { display: none; }
}

/* ---------------------------------------------------------------------
   Containers for the redesigned pages
   --------------------------------------------------------------------- */
body.gfi-home #container, body.view-video-page #container, body.view-video-page #container.vid_page { width: 100%; max-width: 100%; padding: 0; }

/* ---------------------------------------------------------------------
   Shared video card
   --------------------------------------------------------------------- */
.gfi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gfi-card { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gfi-card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; overflow: hidden; line-height: 0; font-size: 0; }
.gfi-card-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; transition: transform 0.3s; }
.gfi-card:hover .gfi-card-thumb img { transform: scale(1.04); }
.gfi-card-thumb .gfi-badge { position: absolute; top: 6px; left: 6px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,0.75); color: #e8e8e8; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; }
.gfi-card-thumb .gfi-badge-4k { background: var(--gfi-gold); color: #111; }
.gfi-card-thumb .gfi-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,0.82); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3; }
.gfi-card-thumb .gfi-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.18); }
.gfi-card-thumb .gfi-progress span { display: block; height: 100%; background: var(--gfi-accent); }
.gfi-card-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gfi-card-title { font-size: 13px; font-weight: 500; color: var(--gfi-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.gfi-card-title:hover { color: #fff; }
.gfi-card-user { font-size: 12px; color: var(--gfi-gold); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfi-card-user:hover { color: #f0c15c; }
.gfi-card-stats { font-size: 12px; color: var(--gfi-muted); display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.gfi-rate { font-weight: 600; }
.gfi-rate-hi { color: var(--gfi-green); }
.gfi-rate-mid { color: var(--gfi-amber); }
.gfi-rate-lo { color: var(--gfi-muted); }

/* Lead card: first card of a 6-col grid spans 2x2 */
.gfi-grid-lead > .gfi-card:first-child { grid-column: span 2; grid-row: span 2; gap: 10px; }
.gfi-grid-lead > .gfi-card:first-child .gfi-card-thumb { border-radius: 8px; }
.gfi-grid-lead > .gfi-card:first-child .gfi-card-title { font-size: 17px; font-weight: 600; white-space: normal; }
.gfi-grid-lead > .gfi-card:first-child .gfi-card-user { font-size: 13px; }
.gfi-grid-lead > .gfi-card:first-child .gfi-card-stats { font-size: 13px; }

/* Section header */
.gfi-sec { display: flex; flex-direction: column; gap: 14px; }
.gfi-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gfi-sec-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--gfi-text); display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.gfi-sec-head h2 svg { flex-shrink: 0; }
.gfi-sec-head .gfi-sp { flex: 1; }
.gfi-sec-head .gfi-all { font-size: 13px; color: var(--gfi-text-2); text-decoration: none; }
.gfi-sec-head .gfi-all:hover { color: var(--gfi-accent); }
.gfi-sec-head label.gfi-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gfi-text-2); cursor: pointer; }
.gfi-sec-head label.gfi-check input { width: 16px; height: 16px; accent-color: var(--gfi-accent); margin: 0; }
.gfi-tag-ai { padding: 2px 8px; border-radius: 4px; background: #1a1630; color: var(--gfi-purple); font-size: 11px; font-weight: 600; }

/* Chips */
.gfi-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gfi-chips::-webkit-scrollbar { display: none; }
.gfi-chip { flex-shrink: 0; display: inline-block; padding: 7px 14px; border-radius: 16px; background: #1c1c1c; border: 1px solid #2a2a2a; color: #e0e0e0; font-size: 13px; font-weight: 500; text-decoration: none; line-height: 1.2; }
.gfi-chip:hover { border-color: #444; color: #fff; }
.gfi-chip.is-active { background: var(--gfi-text); color: #111; border-color: var(--gfi-text); font-weight: 600; }
.gfi-chip-sm { padding: 6px 12px; font-size: 13px; }
.gfi-chip-ghost { background: transparent; color: var(--gfi-text-2); }

/* Premium strip */
.gfi-prem-strip { display: flex; align-items: center; gap: 20px; padding: 18px 24px; background: #161411; border: 1px solid #3a2f1a; border-radius: 10px; flex-wrap: wrap; }
.gfi-prem-strip svg { flex-shrink: 0; }
.gfi-prem-strip .gfi-prem-txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.gfi-prem-strip .gfi-prem-txt b { font-size: 15px; font-weight: 600; color: var(--gfi-text); }
.gfi-prem-strip .gfi-prem-txt span { font-size: 13px; color: var(--gfi-muted); }
.gfi-prem-strip .gfi-prem-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 6px; background: var(--gfi-gold); color: #111; font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.gfi-prem-strip .gfi-prem-cta:hover { background: #f0c15c; color: #111; }

/* ---------------------------------------------------------------------
   Homepage
   --------------------------------------------------------------------- */
#gfi-idx { max-width: var(--gfi-max); margin: 0 auto; padding: 20px 24px 48px; color: var(--gfi-text); font-family: Inter, system-ui, sans-serif; display: flex; flex-direction: column; gap: 36px; }
#gfi-idx * { box-sizing: border-box; }
#gfi-idx .gfi-cats { margin: 0 -24px; padding: 0 24px 14px; border-bottom: 1px solid #1e1e1e; }
#gfi-idx .gfi-cats .gfi-chips { padding: 0; }

@media (max-width: 1200px) { .gfi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .gfi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .gfi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gfi-grid-lead > .gfi-card:first-child { grid-column: span 3; grid-row: auto; } }
@media (max-width: 560px)  {
  .gfi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gfi-grid-lead > .gfi-card:first-child { grid-column: span 2; }
  .gfi-grid-lead > .gfi-card:first-child .gfi-card-title { font-size: 15px; }
  #gfi-idx { padding: 14px 16px 32px; gap: 26px; }
  #gfi-idx .gfi-cats { margin: 0 -16px; padding: 0 16px 12px; }
  .gfi-sec-head h2 { font-size: 16px; }
  .gfi-card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gfi-prem-strip { padding: 14px 16px; gap: 14px; }
  .gfi-prem-strip .gfi-prem-txt b { font-size: 14px; }
}

/* Horizontal row variant (mobile Continue Watching) */
@media (max-width: 560px) {
  .gfi-grid.gfi-row-m { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .gfi-grid.gfi-row-m::-webkit-scrollbar { display: none; }
  .gfi-grid.gfi-row-m > .gfi-card { flex: 0 0 200px; }
}

/* ---------------------------------------------------------------------
   Video page
   --------------------------------------------------------------------- */
#gfi-vv { max-width: var(--gfi-max); margin: 0 auto; padding: 20px 24px 48px; color: var(--gfi-text); font-family: Inter, system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 24px; }
#gfi-vv * { box-sizing: border-box; }
#gfi-vv a { text-decoration: none; }
#gfi-vv-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#gfi-vv-side { flex: 1 1 360px; max-width: 400px; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }
#gfi-vv-foot { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; border-top: 1px solid #242424; }
@media (max-width: 1023px) { #gfi-vv-side { max-width: none; } }

/* Player */
#gfi-vv #glbtPlayer { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #000; max-width: 100%; }
#gfi-vv .video-js, #gfi-vv .video-js .vjs-tech, #gfi-vv #my-video { max-width: 100%; width: 100%; }
#gfi-vv .video-js { height: auto; aspect-ratio: 16/9; }
#gfi-premium-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.88); z-index: 999; align-items: center; justify-content: center; flex-direction: column; }
#gfi-premium-overlay .gfi-prem-close { position: absolute; top: 12px; right: 16px; color: #888; font-size: 28px; cursor: pointer; text-decoration: none; line-height: 1; }
#gfi-premium-overlay .gfi-prem-close:hover { color: #fff; }
#gfi-premium-overlay .gfi-prem-box { text-align: center; color: #fff; padding: 30px; }
#gfi-premium-overlay .gfi-prem-box h3 { font-size: 20px; margin: 0 0 8px 0; color: #ffb400; }
#gfi-premium-overlay .gfi-prem-box p { font-size: 14px; color: #aaa; margin: 0 0 16px 0; }
#gfi-premium-overlay .gfi-prem-btn { display: inline-block; background: #ffb400; color: #000; padding: 10px 28px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; }
#gfi-premium-overlay .gfi-prem-btn:hover { background: #ffc633; }
#gfi-vv #video_advert_top3, #gfi-vv #video_advert_mobile_top, #gfi-vv #video_advert_mobile_bottom { text-align: center; margin: 0; }
#gfi-vv #video_advert_top3:empty, #gfi-vv #video_advert_mobile_top:empty, #gfi-vv #video_advert_mobile_bottom:empty { display: none; }
#gfi-vv #video_img_bottom, #gfi-vv #video_img_bottom_m { margin: 0; text-align: center; }
#gfi-vv #video_img_bottom img, #gfi-vv #video_img_bottom_m img { max-width: 100%; border-radius: 8px; }

/* Title + meta + actions */
#gfi-vv .gfi-vv-title { display: flex; flex-direction: column; gap: 12px; }
#gfi-vv .gfi-vv-title h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--gfi-text); padding: 0; float: none; width: auto; }
#gfi-vv .gfi-vv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#gfi-vv .gfi-vv-meta .gfi-vv-views { font-size: 14px; color: var(--gfi-muted); }
#gfi-vv .gfi-vv-meta .gfi-vv-views span + span::before { content: " · "; }
#gfi-vv .gfi-vv-meta .gfi-sp { flex: 1; }
#gfi-vv .gfi-pill, #gfi-vv button.gfi-pill, #gfi-vv a.gfi-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 20px; background: #1c1c1c; border: 1px solid var(--gfi-border-2); color: var(--gfi-text); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; line-height: 1; text-decoration: none; white-space: nowrap; }
#gfi-vv .gfi-pill:hover { border-color: #444; background: #222; color: var(--gfi-text); }
#gfi-vv .gfi-pill svg { flex-shrink: 0; }
#gfi-vv .gfi-pill.is-active { border-color: var(--gfi-accent); color: var(--gfi-accent); }
#gfi-vv .gfi-pill-icon { width: 36px; padding: 0; justify-content: center; }
#gfi-vv .gfi-pill .gfi-pill-sub { color: var(--gfi-muted); font-weight: 400; }

/* Rating: one system. Thumbs-% pill; stars appear as the vote control. */
#gfi-vv .gfi-rate-wrap { display: inline-flex; align-items: center; border: 1px solid var(--gfi-border-2); border-radius: 20px; overflow: hidden; height: 36px; background: #1c1c1c; }
#gfi-vv .gfi-rate-wrap .gfi-rate-pct { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%; font-size: 13px; font-weight: 600; }
#gfi-vv .gfi-rate-wrap .gfi-rate-votes { font-size: 12px; color: var(--gfi-muted); font-weight: 400; }
#gfi-vv .gfi-rate-wrap #voteProcess { display: inline-flex; align-items: center; gap: 1px; padding: 0 12px 0 10px; height: 100%; border-left: 1px solid var(--gfi-border-2); direction: ltr; }
#gfi-vv .gfi-rate-wrap .gfi-star { font-size: 18px; line-height: 1; cursor: pointer; color: #444; transition: color 0.1s, transform 0.1s; }
#gfi-vv .gfi-rate-wrap #voteProcess:hover .gfi-star { color: #f59e0b; }
#gfi-vv .gfi-rate-wrap .gfi-star:hover ~ .gfi-star { color: #444; }
#gfi-vv .gfi-rate-wrap .gfi-star:hover { transform: scale(1.15); }
#gfi-vv .gfi-rate-wrap #voteProcessthank { padding: 0 12px; font-size: 12px; color: var(--gfi-green); border-left: 1px solid var(--gfi-border-2); height: 100%; display: inline-flex; align-items: center; }
#gfi-vv .gfi-rate-wrap a.gfi-rate-login { padding: 0 12px; font-size: 12px; color: var(--gfi-gold); border-left: 1px solid var(--gfi-border-2); height: 100%; display: inline-flex; align-items: center; }

/* Action panels (embed / flag / favourites) */
#gfi-vv .video_tabs_container { display: flex; flex-direction: column; gap: 10px; }
#gfi-vv .open_tabs { display: none; }
#gfi-vv .ml2_info { background: var(--gfi-surface); border: 1px solid var(--gfi-border); border-radius: 10px; padding: 14px 16px; }
#gfi-vv .ml2_info_tabs { margin: 0 0 10px; }
#gfi-vv .ml2_info_tabs_det { color: var(--gfi-gold); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#gfi-vv .ml2_info_all_center { color: #ccc; font-size: 13px; }
#gfi-vv .ml2_info_all_center form { margin: 0; }
#gfi-vv .ml2_info_all_center textarea { width: 100%; background: #111; border: 1px solid var(--gfi-border-2); border-radius: 6px; color: #ccc; font-size: 12px; padding: 8px; font-family: monospace; }
#gfi-vv .ml2_info_all_center select { background: var(--gfi-surface-2); border: 1px solid var(--gfi-border-2); border-radius: 6px; color: var(--gfi-text); padding: 6px 8px; font-size: 13px; font-family: inherit; margin-right: 8px; }
#gfi-vv .ml2_info_all_center input[type="button"] { background: var(--gfi-accent); color: #111; border: 0; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
#gfi-vv .ml2_info_all_center a { color: var(--gfi-gold); }
#gfi-vv .fav_ul { list-style: none; margin: 0; padding: 0; }
#gfi-vv .fav_ul li a { color: var(--gfi-gold); }

/* Uploader */
#gfi-vv .gfi-uploader { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #161616; border: 1px solid #242424; border-radius: 10px; flex-wrap: wrap; }
#gfi-vv .gfi-uploader .avatar_thumb1 { flex-shrink: 0; line-height: 0; }
#gfi-vv .gfi-uploader .avatar_thumb1 img { width: 44px; height: 44px; border-radius: 22px; object-fit: cover; border: 0; display: block; }
#gfi-vv .gfi-uploader .uploader_title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#gfi-vv .gfi-uploader .uploader_name a { font-size: 15px; font-weight: 600; color: var(--gfi-gold); }
#gfi-vv .gfi-uploader .uploader_name a .title { color: inherit; font-size: inherit; font-weight: inherit; }
#gfi-vv .gfi-uploader .uploader_name a:hover { color: #f0c15c; }
#gfi-vv .gfi-uploader .subscribers_num { font-size: 12px; color: var(--gfi-muted); }
#gfi-vv .gfi-uploader .gfi-sp { flex: 1; }
#gfi-vv .gfi-uploader .uploader_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#gfi-vv .gfi-uploader .uploader_actions > div { margin: 0; padding: 0; }
#gfi-vv .gfi-uploader .uploader_actions form { margin: 0; padding: 0; display: inline; }
#gfi-vv .gfi-uploader .uploader_action_button, #gfi-vv .gfi-uploader input.uploader_action_button { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: transparent; color: var(--gfi-text); border: 1px solid var(--gfi-border-2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; text-decoration: none; line-height: 1; }
#gfi-vv .gfi-uploader .uploader_action_button:hover { border-color: #444; background: #222; color: var(--gfi-text); }
#gfi-vv .gfi-uploader .subscribe_submit { background: var(--gfi-accent); color: #111; border-color: var(--gfi-accent); font-weight: 700; }
#gfi-vv .gfi-uploader .subscribe_submit:hover { background: #ffa05a; border-color: #ffa05a; color: #111; }
#gfi-vv .gfi-uploader .totalSubscriber { display: inline; }

/* Description, categories, tags */
#gfi-vv .gfi-vv-desc { color: #bbb; font-size: 14px; line-height: 1.5; white-space: pre-line; }
#gfi-vv .gfi-vv-desc:empty { display: none; }
#gfi-vv .gfi-vv-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#gfi-vv .gfi-vv-chips .gfi-chips-lbl { font-size: 12px; color: var(--gfi-muted); margin-right: 2px; }
#gfi-vv .gfi-vv-chips .gfi-chips-lbl + .gfi-chips-lbl { margin-left: 10px; }

/* Sidebar list */
#gfi-vv .gfi-side-card { display: flex; gap: 10px; align-items: flex-start; }
#gfi-vv .gfi-side-card .gfi-card-thumb { width: 168px; height: 94px; aspect-ratio: auto; flex-shrink: 0; }
#gfi-vv .gfi-side-card .gfi-card-meta { gap: 3px; }
#gfi-vv .gfi-side-card .gfi-card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.3; }
#gfi-vv #similar-videos-section { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#gfi-vv .similar-header { margin: 0; }
#gfi-vv .similar-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--gfi-text); display: flex; align-items: center; gap: 10px; }
#gfi-vv .similar-header h3 .sim-icon { display: none; }
#gfi-vv .similar-header .sim-ai-tag { padding: 2px 8px; border-radius: 4px; background: #1a1630; color: var(--gfi-purple); font-size: 11px; font-weight: 600; letter-spacing: 0; }
#gfi-vv .similar-loading { text-align: left; padding: 8px 0; color: var(--gfi-muted); font-size: 13px; }
#gfi-vv .similar-grid { display: flex; flex-direction: column; gap: 12px; overflow: visible; padding: 0; }
#gfi-vv .sim-card { display: flex; gap: 10px; align-items: flex-start; width: auto; min-width: 0; flex: none; background: none; border: 0; padding: 0; text-decoration: none; color: inherit; }
#gfi-vv .sim-card:hover { transform: none; background: none; }
#gfi-vv .sim-thumb { position: relative; width: 168px; height: 94px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #000; }
#gfi-vv .sim-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gfi-vv .sim-badge { position: absolute; top: 6px; left: 6px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,0.75); color: #e8e8e8; font-size: 10px; font-weight: 700; }
#gfi-vv .sim-badge-4k { background: var(--gfi-gold); color: #111; }
#gfi-vv .sim-duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,0.82); color: #fff; font-size: 11px; font-weight: 600; }
#gfi-vv .sim-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; }
#gfi-vv .sim-title { font-size: 14px; font-weight: 500; color: var(--gfi-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
#gfi-vv .sim-meta { font-size: 12px; color: var(--gfi-gold); }
#gfi-vv .sim-stats { font-size: 12px; color: var(--gfi-muted); display: flex; gap: 6px; }
#gfi-vv .sim-rating { color: var(--gfi-green); font-weight: 600; }
#gfi-vv .sim-rating-mid { color: var(--gfi-amber); }
#gfi-vv .sim-rating-lo { color: var(--gfi-muted); }

/* Related (More from uploader / related) full width */
#gfi-vv .relatedVideos { margin: 0; padding: 0; width: 100%; }
#gfi-vv .related_more_wrap { grid-column: 1 / -1; text-align: center; margin: 4px 0; }
#gfi-vv .related_more_button { display: inline-block; background: #1c1c1c; border: 1px solid var(--gfi-border-2); color: var(--gfi-text-2); padding: 8px 18px; border-radius: 20px; font-size: 13px; text-decoration: none; }
#gfi-vv .related_more_button:hover { border-color: #444; color: var(--gfi-text); }
#gfi-vv .related_more { display: none; }
#gfi-vv .related_more.active { display: contents; }

/* Comments */
#gfi-vv .gfi-comments { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; border-top: 1px solid #242424; width: 100%; }
#gfi-vv .gfi-comments h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--gfi-text); }
#gfi-vv .gfi-comments h2 span { color: var(--gfi-muted); font-weight: 400; }
#gfi-vv #send_area { display: flex; gap: 12px; align-items: flex-start; color: var(--gfi-text-2); font-size: 13px; }
#gfi-vv #send_area .gfi-c-avatar { width: 36px; height: 36px; border-radius: 18px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--gfi-text); flex-shrink: 0; text-transform: uppercase; }
#gfi-vv #send_area .gfi-c-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#gfi-vv #send_area textarea.comm_area { width: 100%; min-height: 40px; height: 40px; background: transparent; border: 0; border-bottom: 1px solid var(--gfi-border-2); border-radius: 0; color: var(--gfi-text); font-size: 14px; outline: 0; padding: 8px 2px; font-family: inherit; resize: vertical; }
#gfi-vv #send_area textarea.comm_area:focus { border-bottom-color: #666; }
#gfi-vv #send_area .gfi-c-foot { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
#gfi-vv #send_area #char_left { font-size: 12px; color: var(--gfi-muted); }
#gfi-vv #send_area .comm_button, #gfi-vv #send_area .comm_link { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; background: #2a2a2a; color: var(--gfi-text); border: 0; font-size: 13px; font-weight: 600; text-decoration: none; margin: 0; }
#gfi-vv #send_area .comm_button:hover { background: var(--gfi-accent); color: #111; }
#gfi-vv #comm_message { margin: 0; font-size: 13px; }
#gfi-vv #commentarea3 { width: 100%; }
#gfi-vv #commentlist3 .optionlist_title3 { display: none; }
#gfi-vv .comm_even, #gfi-vv .comm_odd { background: transparent; border: 0; border-top: 1px solid #1e1e1e; padding: 12px 0; margin: 0; color: var(--gfi-text-2); font-size: 13px; }
#gfi-vv .comm_even a, #gfi-vv .comm_odd a { color: var(--gfi-gold); }

/* Mobile adjustments */
@media (max-width: 760px) {
  #gfi-vv { padding: 0 0 32px; gap: 16px; }
  #gfi-vv #glbtPlayer { border-radius: 0; }
  #gfi-vv-main { gap: 14px; padding: 0 16px; }
  #gfi-vv-side { padding: 0 16px; min-width: 0; flex-basis: 100%; }
  #gfi-vv-foot { padding: 8px 16px 0; }
  #gfi-vv .gfi-vv-title h1 { font-size: 18px; }
  #gfi-vv .gfi-vv-actions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  #gfi-vv .gfi-vv-actions::-webkit-scrollbar { display: none; }
  #gfi-vv .gfi-vv-actions > * { flex-shrink: 0; }
  #gfi-vv .gfi-vv-meta .gfi-sp { display: none; }
  #gfi-vv .gfi-vv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  #gfi-vv .gfi-vv-chips::-webkit-scrollbar { display: none; }
  #gfi-vv .gfi-vv-chips > * { flex-shrink: 0; }
  #gfi-vv .gfi-side-card .gfi-card-thumb, #gfi-vv .sim-thumb { width: 150px; height: 84px; }
  #gfi-vv .gfi-uploader { padding: 12px; gap: 12px; }
  #gfi-vv .gfi-uploader .uploader_actions { width: 100%; }
}
@media (min-width: 761px) {
  #gfi-vv .gfi-vv-actions { display: contents; }
}

/* ---------------------------------------------------------------------
   Footer (light touch)
   --------------------------------------------------------------------- */
body.gfi-home #footer, body.view-video-page #footer { background: var(--gfi-bg); border-top: 1px solid #242424; }
body.gfi-home .footer.main_title, body.view-video-page .footer.main_title { width: 100%; max-width: var(--gfi-max); min-height: 0; padding: 8px 24px 24px; box-sizing: border-box; }
body.gfi-home #footer_links a, body.view-video-page #footer_links a { font-size: 12px; color: var(--gfi-muted); padding: 0 12px; }
body.gfi-home #footer_links a:hover, body.view-video-page #footer_links a:hover { color: var(--gfi-text); }
body.gfi-home .footer_address, body.view-video-page .footer_address { background: transparent; text-align: center; margin: 0; }
body.gfi-home .footer_address img, body.view-video-page .footer_address img { opacity: 0.7; }

/* Legacy right column on the video page (ad script holder only) */
#gfi-vv #main_right3 { display: none; }

/* style_resp.css sets h1,h2 {position:absolute} globally; neutralise inside the redesigned blocks */
#gfi-idx h1, #gfi-idx h2, #gfi-vv h1, #gfi-vv h2, #gfi-vv h3, .gfi-hdr h1, .gfi-hdr h2, .gfi-sec-head h2 { position: static; margin: 0; padding: 0; float: none; }

#gfi-vv-foot .gfi-sec + .gfi-sec { margin-top: 20px; }

/* ---------------------------------------------------------------------
   Videos listing: sort bar (templates/head_bottom/videolinks_resp.tpl)
   --------------------------------------------------------------------- */
.gfi-listbar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 18px; font-family: Inter, system-ui, sans-serif; }
.gfi-sortbar { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.gfi-sort-chips { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.gfi-chip.is-locked { color: #777; border-style: dashed; }
.gfi-chip.is-locked:hover { color: #999; }
.gfi-listbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.gfi-count { font-size: 13px; color: var(--gfi-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gfi-select { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 16px; background: #1c1c1c; border: 1px solid #2a2a2a; font-size: 13px; color: var(--gfi-text-2); white-space: nowrap; }
.gfi-select-lbl { color: var(--gfi-muted); font-size: 12px; }
.gfi-select select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; border: 0; color: var(--gfi-text); font-size: 13px; font-weight: 500; font-family: inherit; height: 30px; padding: 0 26px 0 2px; cursor: pointer; outline: none; }
.gfi-select select option { background: #1c1c1c; color: var(--gfi-text); }
.gfi-select:focus-within { border-color: #444; }
.gfi-ipp { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.gfi-ipp noscript input { height: 30px; border-radius: 15px; border: 1px solid #2a2a2a; background: #1c1c1c; color: var(--gfi-text); padding: 0 12px; font-family: inherit; }
@media (max-width: 760px) {
  .gfi-listbar { gap: 10px; }
  .gfi-sortbar { flex: 1 1 100%; }
  .gfi-listbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------
   Legacy page chrome: titles, tab rows, sort rows (friends, my videos,
   invite, legal pages). Markup unchanged; this restyles it.
   --------------------------------------------------------------------- */
#container .main_title { background: none; border-radius: 0; height: auto; min-height: 0; margin: 22px 0 14px; padding: 0; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-family: Inter, system-ui, sans-serif; }
#container .main_title h1 { float: none; position: static; font-size: 24px; font-weight: 600; line-height: 1.3; padding: 0; margin: 0; color: var(--gfi-text); letter-spacing: -0.2px; }
#container .main_title #vid_coun_p, #container .main_title #vid_coun { margin-left: auto; position: static; float: none; font-size: 13px; color: var(--gfi-muted); padding: 0; white-space: nowrap; }
#container .main_title #vid_coun:empty, #container .main_title #vid_cen:empty { display: none; }
#container .main_title #vid_cen { flex-basis: 100%; }

#new_navigation.new_buttons { display: flex; flex-wrap: wrap; gap: 8px; height: auto; background: none; border-radius: 0; margin: 0 0 16px; padding: 0; list-style: none; }
#new_navigation.new_buttons li { display: block; padding: 0; line-height: normal; background: none; }
#new_navigation.new_buttons li a { display: inline-block; padding: 7px 14px; border-radius: 16px; background: #1c1c1c; border: 1px solid #2a2a2a; color: #e0e0e0; font-size: 13px; font-weight: 500; text-decoration: none; width: auto !important; line-height: 1.2; }
#new_navigation.new_buttons li a:hover { border-color: #444; color: #fff; }
#new_navigation.new_buttons li a#currentTab, #new_navigation.new_buttons li a.is-active { background: var(--gfi-text); color: #111; border-color: var(--gfi-text); font-weight: 600; }

.mf_sort, #vid_cen.mf_sort { display: flex !important; gap: 8px; height: auto !important; background: none; border-radius: 0; margin: 0 0 16px !important; padding: 0; align-items: center; }
.mf_sort::before { content: "Sort"; font-size: 12px; color: var(--gfi-muted); margin-right: 2px; }
.mf_sort a { display: inline-block; padding: 6px 12px; border-radius: 16px; background: #1c1c1c; border: 1px solid #2a2a2a; color: #e0e0e0; font-size: 13px; line-height: 1.2; text-decoration: none; }
.mf_sort a:hover { border-color: #444; color: #fff; }

/* Friends list */
#ufriends .featured_video_thu, #ufriends .featured_video_desc, #ufriends .featured_video_info { float: none; width: auto; }
#ufriends { display: flex; flex-direction: column; gap: 10px; }
#ufriends > .featured_video_thu { display: none; }
#ufriends .linea, #ufriends .clis, #ufriends br { display: none; }
#ufriends .featured_video_desc { background: var(--gfi-surface); border: 1px solid var(--gfi-border); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--gfi-text-2); }
#ufriends .featured_video_desc a { color: var(--gfi-gold); font-weight: 600; font-size: 15px; text-decoration: none; }
#ufriends .featured_video_desc p { margin: 6px 0 0; font-size: 13px; }
#ufriends .featured_video_info { padding: 0 16px 10px; font-size: 12px; color: var(--gfi-muted); display: flex; gap: 16px; }
#ufriends .featured_video_info p { margin: 0; }
#ufriends .featured_video_info a { color: var(--gfi-text-2); }
#friendsForm > p, #friendsForm select, #friendsForm > a { font-size: 13px; color: var(--gfi-text-2); }
#friendsForm select { background: #1c1c1c; border: 1px solid #2a2a2a; color: var(--gfi-text); border-radius: 6px; padding: 5px 8px; font-family: inherit; }
#friendsForm > a { color: var(--gfi-gold); margin-left: 8px; }

/* Static / legal pages: readable column */
#container .single, #container .single_page { max-width: 820px; margin: 0 auto; padding: 0 0 40px; font-family: Inter, system-ui, sans-serif; color: var(--gfi-text-2); }
#container .single .main_title, #container .single_page .main_title { margin: 28px 0 18px; }
#container .single .main_title h1, #container .single_page .main_title h1, #container .single_page h1 { font-size: 28px; font-weight: 600; margin: 0; padding: 0; text-align: left; float: none; position: static; width: auto; color: var(--gfi-text); }
#container .single p, #container .single_page p, #container .single li, #container .single_page li, #container .single_page .faq_answer { font-size: 15px; line-height: 1.7; font-weight: 400; color: var(--gfi-text-2); }
#container .single p { margin: 0 0 16px; }
#container .single h3, #container .single_page h3, #container .single_page .faq_question { font-size: 16px; font-weight: 600; color: var(--gfi-text); margin: 28px 0 10px; letter-spacing: 0.2px; text-transform: none; }
#container .single p a, #container .single_page a { color: var(--gfi-gold); text-decoration: underline; font-size: inherit; }
#container .single p a:hover, #container .single_page a:hover { color: #f0c15c; }
#container .single b, #container .single strong, #container .single_page b { color: var(--gfi-text); font-weight: 600; }
#container .single p[style*="font-size:20px"], #container .single b p { font-size: 16px !important; font-weight: 600; color: var(--gfi-text); margin-top: 24px; }
#container .single p[style*="font-size:15px"] { font-size: 15px !important; }
.gfi-prose-small { font-size: 12px !important; color: var(--gfi-muted) !important; }

/* Contact cards */
.gfi-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 24px; }
.gfi-contact-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--gfi-surface); border: 1px solid var(--gfi-border); border-radius: 10px; text-decoration: none !important; color: var(--gfi-text-2); font-size: 13px !important; line-height: 1.5; }
.gfi-contact-card:hover { border-color: #444; }
.gfi-contact-card b { color: var(--gfi-text); font-size: 15px; font-weight: 600; }
.gfi-contact-card span:last-child { word-break: break-word; }
.gfi-contact-ico { width: 36px; height: 36px; border-radius: 8px; background: #242424; color: var(--gfi-text-2); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
@media (max-width: 600px) { .gfi-contact-grid { grid-template-columns: 1fr; } #container .single .main_title h1, #container .single_page .main_title h1 { font-size: 22px; } }

/* Favourite toggle on the video page */
#gfi-vv .gfi-fav-btn.is-active { border-color: var(--gfi-accent); color: var(--gfi-accent); background: rgba(255,135,48,0.08); }
#gfi-vv .gfi-fav-btn.is-active:hover { background: rgba(255,135,48,0.14); }