/*
-----------------
1 - Cinesist Framework v1.0 CSS Variables(root)
-----------------
*/

:root {
  /* 1. Force your fluid variables into the WordPress Preset variables */
  --wp--preset--spacing--xxs: var(--space-xxs);
  --wp--preset--spacing--xs: var(--space-xs);
  --wp--preset--spacing--sm: var(--space-sm);
  --wp--preset--spacing--md: var(--space-md);
  --wp--preset--spacing--lg: var(--space-lg);
  --wp--preset--spacing--xl: var(--space-xl);
  --wp--preset--spacing--xxl: var(--space-xxl);

  /* 2. Overpower Blocksy's internal spacing variables */
  --theme-content-spacing: var(--space-xxs) !important;
  --theme-block-gap: var(--space-xs) !important;

  /* ====================
     Fonts Declarations
    ==================== */
  --font-primary: 'Work Sans', sans-serif;
  --font-emoji: 'Noto Color Emoji', sans-serif;

  /* ====================
     Layouts & Widths
==================== */
  --layout-page-max-width: 137.142857rem;
  --layout-content-max-width: 116.071428rem;

  /* ====================
     Typography (Fluid)
     Base: 16px (html { font-size: 1rem; })
     Adjusted for Smaller Sizes
==================== */

  /* --- Headings --- */
  --font-h1: clamp(1.54rem, 4.5vw, 2.59rem);
  /* ~24.6px - 41.4px */
  --font-h2: clamp(1.22rem, 3.5vw, 2.03rem);
  /* ~19.6px - 32.5px */
  --font-h3: clamp(1.05rem, 3vw, 1.61rem);
  /* ~16.8px - 25.8px */
  --font-h4: clamp(0.81rem, 2.7vw, 1.33rem);
  /* ~12.9px - 21.3px */
  --font-h5: clamp(0.7rem, 2vw, 1.05rem);
  /* ~11.2px - 16.8px */
  --font-h6: clamp(0.63rem, 1.8vw, 0.77rem);
  /* ~10.1px - 12.3px */

  /* --- Body Text Scale --- */
  --font-body: clamp(1rem, 0.25vi + 0.95rem, 1.125rem);
  /* ~16px (Mobile) to 18px (Desktop) */

  --font-body-sm: clamp(0.875rem, 0.15vi + 0.85rem, 1rem);
  /* ~14px to 16px - Ideal for secondary content */

  --font-micro: 0.75rem;
  /* 12px - For legal fine print only */

  --font-caption: clamp(0.75rem, 0.1vi + 0.725rem, 0.875rem);
  /* ~12px to 14px - Minimum readable size for small details */

  --font-cta: clamp(1rem, 2vw + 0.5rem, 1.5rem);
  /* ~16px to 24px - Responsive button and action text */

  /* ====================
     Line Heights
==================== */
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-h4: 1.5;
  --line-height-h5: 1.6;
  --line-height-h6: 1.7;
  --line-height-body: 1.5;
  --line-height-caption: 1.4;
  --line-height-cta: 1.5;

  /* ====================
     Fluid Spacing
==================== */
  --space-xxs: clamp(0.25rem, 0.5vw, 0.5rem);
  /* ~4px-8px */
  --space-xs: clamp(0.5rem, 0.8vw, 1rem);
  /* ~8px-16px */
  --space-sm: clamp(1rem, 1.2vw, 1.5rem);
  /* ~16px-24px */
  --space-md: clamp(1.5rem, 2vw, 2.5rem);
  /* ~24px-40px */
  --space-lg: clamp(2.5rem, 3.5vw, 4rem);
  /* ~40px-64px */
  --space-xl: clamp(4rem, 5vw, 6rem);
  /* ~64px-96px */
  --space-xxl: clamp(6rem, 8vw, 8rem);
  /* ~96px-128px */

  /* Over ride Blocksy */
  --theme-content-spacing: var(--space-xs) !important;

  /* ====================
  Foxiz Root Overrides
==================== */
  --em-mini: 1em;
  --rem-mini: 0.8rem;

  /* ====================
     Color Pallette
==================== */
  /* --- Brand Colors --- */
  --cinefox-black-spy: #1a1b1f;
  --cinefox-white-spy: #e5e5e5;
  --cinesist-dark-grey: #1a1a1a;
  --cinesist-middle-grey: #2a2a2a;
  --cinesist-light-grey: #cccccc;
  --cinesist-title-color: #ffffff;
  /* Makes Titles Gleam White */
  --cinesist-text-color: #f0f0f0;
  /* Off-white for general text */
  --cinesist-gold: #e2b304;
  /* Cinesist Gold for accents */
  --cinesist-red: #e50914;
  /* Cinesist Red for accents */
  --cinesist-border-color: rgba(255, 255, 255, 0.2);
  /* Subtle white border */
  --snarkive-purple: #d102d1;
  /* New: Devil Purple for specific elements */
  --snarkive-purple-accent: #792c85;
  /* New: Devil Purple accents */
  --snarkive-purple-alpha: rgba(121, 44, 133, 0.1);
  /* Subtle background for active states */
  --cinefox-orange: #dd7b45;
  /* CineFox Primary Fur Color */
  --cinefox-orange-accent: #d45f35;
  /* CineFox Auxillary Fur Color */
  --cinesist-gaming: #107c10;
  /* Used for all things Gaming Related */
  --cinesist-industry: #708090;
  /* Used for all things Industry Related */
  --cinesist-tv: #0078ae;
  /* Used for all things TV Related */
  --cinesist-info: #00ddff;
  /* Electric Blue */
  --cinesist-sucess: #7dce94;
  /* Lime Green */
  --cinesist-warning: #fff685;
  /*Biohazard Yellow */
  --cinesist-danger: #f0217d;
  /* Comicbook Pink */
  --cinebar-red: #ff0d0d;
  /* Red Rating Bar */
  --cinebar-orange: #ff5612;
  /*orange Rating Bar */
  --cinebar-yellow: #ffde21;
  /* Yellow Rating Bar */
  --cinebar-midgreen: #c7e811;
  /* Mid Green Rating Bar */
  --cinebar-green: #50a735;
  /* Green Rating Bar */
  --brand-facebook: #1877f2;
  --brand-x-twitter: #000000;
  --brand-youtube: #ff0000;

  /* ========================================= */
  /* == Spy Vs Spy Theme (Light/Dark Mode) == */
  /* ========================================= */

  /* Light Mode: White Spy Icon */
  --cinesist-card-logo: url('https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-Black-and-Purple-Icon-Logomark.png');

  /* ====================
     White Spy Colors For Light Mode
==================== */

  /* --- Cinesist Light Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --body-fcolor: #1a1b1f;
  /* Body Black Spy Flex Color */
  --gc-spy: #e5e5e5;
  /* White Spy Color */
  --gc-gold: #e2b304;
  /* Cinesist Gold Color */
  --gc-red: #e50914;
  /* Cinesist Red Color */
  --gc-snarkive-purple: #d102d1;
  /* Snarkive Purple Color */
  --gc-snarkive-accent: #792c85;
  /* Snarkive Purple Accent Color */
  --bbp-white: #e5e5e5;
  /* Custom variable for bbPress white background */
  --padding-c40: 10px 40px;
  --flex-desc: #000;
  /* Custom variable for form description text color */
  --cs-spy: #e5e5e5;
  /* Custom variable for Cinesist White Spy color */
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Flexible Colors --- */
  --flex-overlay-1: rgba(255, 2551, 255, 0.4);
  --flex-icon-1: rgba(18, 43, 70, 0.5);
  --contrast-1: #ffffff;
  --contrast-2: #eaeaea;
  --flex-bg-color: #fafbfc;
  /* Black BG */
  /* Black Spy Color for Day Time Adapt*/
  --flex-bg-color-2: #e5e5e5;
  /* White Spy Color for Light Mode */
  --flex-header-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);
  --flex-footer-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);

  /* FLex Gray Color Changes */
  --flex-gray-1: #bab6b6;
  --flex-gray-2: #ededed;
  --flex-gray-3: #aaaaaa;
  --flex-gray-4: #eaeaea;
  --flex-gray-7: rgba(255, 255, 255, 0.35) !important;
  --flex-gray-15: #88888826;

  /* Flex Snarkive Brand Colors */
  --flex-snarkive: #d102d1;
  /* Snarkive Purple */
  --flex-snarkive-90: #d102d1e6;
  /* Snarkive Purple 90% Opacity */
  --flex-snarkive-50: #d102d180;
  /* Snarkive Purple 50% Opacity */
  --flex-snarkive-rev: #d45f35;
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-90: #d45f35e6;
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-50: #d45f3580;
  /* Snarkive Orange Reverse */

  /* Flex Text Colors */
  --flex-text-title: #1a1a1a;
  /* Makes Titles Dark */
  --flex-text-primary: #2a2a2a;
  /* Dark grey for general text */
  --flex-text-secondary: #555555;
  /* --Cinesist-middle-grey */
  --flex-decor-border: rgba(0, 0, 0, 0.2);
  /* Subtle dark border */

  /* Flex Effects */
  --news-letter-bg: #e5e5e5;
  --flex-hover-brightness: 0.8;
  /* 80% brightness (20% darker) */
  --shadow-1: 5px 10px 20px 0px #00000051;
  --shadow-7: #00000051;
  --round-10: 10px;
  /* Standard Border Radius */
  --page-bg-color: #ffffff;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: #f1f1f1;
  --ticket-text-color: #555555;
  --ticket-text-hover: #d45f35;
  /* Kept your orange! */
  --ticket-text-current: #111111;

  /* --- Cinescore Review Section Colors --- */
  --review-color: #d45f35;
}

/* ====================
     Black Spy Colors For Dark Mode
==================== */
[data-color-mode*='dark'] {
  /* --- Cinesist Branded Icons --- */
  /* Dark Mode: Black & Purple Icon */
  --cinesist-card-logo: url('https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-White-Spy-Icon-Logomark-1.png');

  /* --- Cinesist Dark Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --body-fcolor: #e5e5e5;
  /* Body White Spy Flex Color */
  --gc-spy: #1a1b1f;
  /* Black Spy Color */
  --gc-snarkive-accent: #d45f35;
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Flexible Colors --- */
  /* Custom variable for form description text color */
  --cs-spy: #1a1b1f;

  --flex-overlay-1: rgba(0, 0, 0, 0.4);
  --flex-icon-1: rgb(229, 232, 235, 0.5);
  --contrast-1: #000000;
  --contrast-2: #131313;
  --flex-bg-color: #0a0a0a;
  /* White BG */
  /* White Spy Color for Night Time Adapt */
  --flex-bg-color-2: #1a1b1f;
  /* Black Spy Color for Dark Mode */

  /* Flex Color For Header Footer */
  --flex-header-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);
  --flex-footer-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);

  /* FLex Gray Color Changes */
  --flex-gray-1: rgb(20 20 20);
  --flex-gray-2: #2d2e32;
  --flex-gray-3: #414245;
  --flex-gray-4: #222222;
  --flex-gray-7: rgba(0, 0, 0, 0.35) !important;
  --flex-gray-15: #88888840;
  --flex-snarkive: #dd7b45;
  /* Snarkive Orange */
  --flex-snarkive-90: #dd7b45e6;
  /* Snarkive Orange 90% Opacity */
  --flex-snarkive-50: #dd7b4580;
  /* Snarkive Orange 50% Opacity */
  --flex-snarkive-rev: #d102d1;
  /* Snarkive Purple Reverse */
  --flex-snarkive-rev-90: #d102d1e6;
  /* Snarkive Purple Reverse 90% Opacity */
  --flex-snarkive-rev-50: #d102d180;
  /* Snarkive Purple Reverse 50% Opacity */
  --flex-text-title: #ffffff;
  /* Makes Titles Gleam White */
  --flex-text-primary: #f0f0f0;
  /* Off-white for general text */
  --flex-text-secondary: #cccccc;
  /* --Cinesist-light-grey */
  --flex-decor-border: rgba(255, 255, 255, 0.2);
  /* Subtle white border */

  --news-letter-bg: #1a1b1f;
  --flex-hover-brightness: 1.2;
  /* 120% brightness (20% brighter) */
  --shadow-1: 5px 10px 20px 0px #0000004d;
  --page-bg-color: #111111;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: #5e5e5e;
  --ticket-text-color: #aaaaaa;
  --ticket-text-hover: #d45f35;
  /* Kept your orange! */
  --ticket-text-current: #ffffff;
}

/* ====================
     End Cinesist Framework Variables
==================== */

/* SNARKIVE "REDACTED" INPUTS */
.acf-field input[type="text"],
.acf-field input[type="number"],
.acf-field textarea {
  background: #000 !important;
  border: 1px solid #333 !important;
  color: #00ff41 !important; /* Hacker Green text */
  font-family: "Courier New", monospace !important;
}

.acf-field input:focus {
  border-color: var(--flex-snarkive) !important;
  box-shadow: 0 0 5px var(--flex-snarkive-50) !important;
}

.review-section .average .h1,
.review-section .meta-description,
.review-quickview .meta-score,
.review-quickview .meta-text,
.review-meta .review-description .meta-bold,
.review-meta .extra-meta {
  opacity: 0;
  transition: opacity 0.15s linear;
}

body.cinesist-scores-ready .review-section .average .h1,
body.cinesist-scores-ready .review-section .meta-description,
body.cinesist-scores-ready .review-quickview .meta-score,
body.cinesist-scores-ready .review-quickview .meta-text,
body.cinesist-scores-ready .review-meta .review-description .meta-bold,
body.cinesist-scores-ready .review-meta .extra-meta {
  opacity: 1;
}

/* --- Cinepress 3.0: Cinesist Review Box Admin Skin --- */

/* 1. The Postbox Wrapper */
#acf-group_cinesist_review_box_fields {
  background: #1a1a1a !important;
  border: 2px solid #333 !important;
  color: #e5e5e5 !important;
}

#acf-group_cinesist_review_box_fields .postbox-header {
  background: #222 !important;
  border-bottom: 2px solid var(--flex-snarkive, #f0217d) !important;
}

#acf-group_cinesist_review_box_fields .hndle {
  color: var(--flex-snarkive, #f0217d) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
}

/* 2. Sidebar Tabs (The Data Streams) */
#acf-group_cinesist_review_box_fields .acf-fields.-sidebar:before {
  background: #222 !important;
  border-right: 1px solid #333 !important;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 20%;
  z-index: 1;
}

#acf-group_cinesist_review_box_fields .acf-tab-wrap {
  background: #111 !important;
  border-right: 1px solid #333 !important;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li a {
  background: transparent !important;
  color: #888 !important;
  border: none !important;
  transition: all 0.3s ease;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li.active a {
  color: var(--cinesist-gold, #ffde21) !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 222, 33, 0.4);
  background: rgba(255, 222, 33, 0.05) !important;
}

/* 3. The Fields (Diagnostic Modules) */
.acf-field {
  border-color: #333 !important;
}

.acf-label label {
  color: #aaa !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 1px;
}

/* 4. Score Breakdown Coloring (Dynamic DNA) */
/* We target the specific fields for Plot, Performance, etc. */
.acf-field-plot-score,
.acf-field-performance-score,
.acf-field-execution-score,
.acf-field-visuals-vibes-score,
.acf-field-pacing-score,
.acf-field-rewatch-factor-score {
  background: rgba(255, 255, 255, 0.02) !important;
}

.acf-field input[type="number"],
.acf-field input[type="text"],
.acf-field textarea {
  background: #000 !important;
  border: 1px solid #444 !important;
  color: #00ff41 !important; /* Matrix/Hacker Green text */
  font-family: "Courier New", Courier, monospace !important;
}

/* 5. The "Master Score" Module */
.admin-cinescore {
  background: rgba(240, 33, 125, 0.05) !important;
  border-top: 2px solid var(--flex-snarkive) !important;
}

.admin-cinescore input {
  font-size: 24px !important;
  text-align: center;
  color: var(--cinesist-gold, #ffde21) !important;
}

/* 6. The Switch (The Disruptor Toggle) */
.acf-switch {
  background: #333 !important;
}

.acf-switch .acf-switch-on {
  background: var(--flex-snarkive) !important;
}

/* 7. Radio Buttons (Horizontal) */
.acf-radio-list li label {
  background: #222 !important;
  border: 1px solid #444 !important;
  color: #eee !important;
  padding: 5px 15px !important;
}

.acf-radio-list li label.selected {
  background: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive) !important;
}

/* ========================================= */
/* == Recruitment & Siphon (Foxiz Nuke) == */
/* ========================================= */

.cs-follow-btn,
.cs-bookmark-btn {
  display: inline-flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important; /* Strip padding */
  background: transparent !important; /* Strip background */
  border: none !important; /* Strip border */
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  /* margin-left: 15px !important; */ /* Space from name */
  vertical-align: middle !important;
  text-decoration: none !important;
}

/* Typography for the 'FOLLOW' text */
.cs-follow-btn i:after,
.cs-bookmark-btn i:after {
  content: attr(data-title) !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: inherit !important;
  display: inline-block !important;
}

/* Hover State */
.cs-follow-btn:hover,
.cs-bookmark-btn:hover {
  background: var(--flex-bg-color-3) !important;
  border-color: var(--color-blue-500) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Fix Icons (Neutralizing Foxiz 100% width/height) */
.cs-follow-btn i,
.cs-bookmark-btn i {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  font-size: 2rem !important;
  color: inherit !important;
  transform: none !important;
  vertical-align: middle !important;
}

/* 1. Nuke Foxiz Internal Labels and Icons */
.cs-follow-btn i:after,
.cs-bookmark-btn i:after,
.rb-follow i:after,
.rb-bookmark i:after,
.rb-follow:before,
.rb-follow:after,
.rb-bookmark:before,
.rb-bookmark:after {
    content: none !important;
    display: none !important;
}

/* Fix the Foxiz i tag (It contains the icon) */
.rb-follow i,
.rb-bookmark i {
    font-style: normal !important;
}

/* 2. State-Based Label Visibility (Recursive) */
.cs-follow-btn:not(:has(.followed)):not(.is-followed) .cs-active-label,
.cs-follow-btn:has(.followed) .cs-default-label,
.cs-follow-btn.is-followed .cs-default-label {
    /* display: none !important; */
}

.cs-bookmark-btn-wrapper:not(:has(.bookmarked)):not(.is-bookmarked) .cs-active-label,
.cs-bookmark-btn-wrapper:has(.bookmarked) .cs-default-label,
.cs-bookmark-btn-wrapper.is-bookmarked .cs-default-label {
    display: none !important;
}

/* Label Typography */
.cs-default-label,
.cs-active-label {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    pointer-events: none;
    margin-left: 8px;
    vertical-align: middle;
}

/* 3. Handle the Double Icon (Surgical Visibility) */
/* Hide inactive icons when followed/bookmarked */
.rb-follow.followed .follow-icon,
.rb-bookmark.bookmarked i:not(.bookmarked-icon) {
    display: none !important;
}

/* Hide active icons when NOT followed/bookmarked */
.rb-follow:not(.followed) .followed-icon,
.rb-bookmark:not(.bookmarked) .bookmarked-icon {
    display: none !important;
}

/* Ensure active icons have the correct content/color */
.rb-follow.followed .followed-icon:before {
    content: "\e92b" !important; /* Filled Heart */
    color: var(--cs-brand-400) !important;
}

.rb-bookmark.bookmarked .bookmarked-icon:before {
    content: "\e901" !important; /* Filled Bookmark */
    color: var(--cs-brand-400) !important;
}

/* Loading State (The Spin) */
.cs-follow-btn.loading:after,
.cs-bookmark-btn.loading:after {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: cs_spin 0.6s linear infinite !important;
  margin-left: 8px !important;
  display: inline-block;
  vertical-align: middle;
}

@keyframes cs_spin {
  to { transform: rotate(360deg); }
}

/* Label Styling */
.cs-default-label,
.cs-active-label {
    font-family: var(--font-primary) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    pointer-events: none; /* Let clicks pass to the trigger */
}

/* Recruitment (Follow) Branding - Purple Theme */
.cs-follow-btn {
  display: inline-block;
  align-items: center;
  cursor: pointer;
}

.cs-follow-btn:hover {
  opacity: 1;
  transform: translateX(3px); /* Subtle nudge */
}

/* Recruitment - Active State (Typographic) */
.cs-follow-btn.followed,
.cs-follow-btn.is-followed {
  background: transparent !important;
  border: none !important;
  /* color: var(--cs-brand-400) !important; */
  opacity: 1;
  box-shadow: none !important;
}

/* Siphon (Bookmark) Branding - Orange Theme */
.cs-bookmark-btn {
  color: var(--cs-brand-500) !important;
  opacity: 0.8;
}

.cs-bookmark-btn:hover {
  opacity: 1;
  transform: translateX(3px);
}

/* Siphon - Active State (Typographic) */
.cs-bookmark-btn.bookmarked,
.cs-bookmark-btn.is-bookmarked {
  background: transparent !important;
  border: none !important;
  color: var(--cs-brand-500) !important;
  opacity: 1;
  box-shadow: none !important;
}

/* Hover Interactions */
.cs-follow-btn:hover {
  border-color: var(--cs-brand-400) !important;
  background: var(--cs-brand-10) !important;
  box-shadow: 0 0 15px var(--cs-brand-20) !important;
}

.cs-bookmark-btn:hover {
  border-color: var(--cs-brand-500) !important;
  background: var(--cs-brand-10) !important;
  box-shadow: 0 0 15px var(--cs-brand-20) !important;
  fill: var(--cs-brand);
}

/* Active State Hover feedback */
.cs-follow-btn.followed:hover,
.cs-follow-btn.is-followed:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.cs-bookmark-btn.bookmarked:hover,
.cs-bookmark-btn.is-bookmarked:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Loading State Spinner Color Match */
.cs-follow-btn.loading:after { border-top-color: var(--cs-brand-400) !important; }
.cs-bookmark-btn.loading:after { border-top-color: var(--cs-brand-500) !important; }

/* Disable interactions while loading */
.cs-follow-btn.loading,
.cs-bookmark-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Hover Interactions */
.cs-follow-btn:hover,
.cs-bookmark-btn:hover {
  filter: brightness(var(--flex-hover-brightness, 1.1));
  transform: translateY(-2px);
  border-color: var(--cs-brand);
  fill: var(--cs-brand);
}

/* Hover feedback for active states */
.rb-follow.cs-follow-btn.is-followed:hover {
  background: var(--cs-brand-400, #792c85);
}

.rb-bookmark.cs-bookmark-btn.is-bookmarked:hover {
  background: var(--cs-brand-500, #d45f35);
}

/* Loading state */
.cs-follow-btn.loading,
.cs-bookmark-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.cs-follow-btn.loading::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: var(--cs-brand);
  animation: cs-button-loading 1.5s infinite linear;
}

@keyframes cs-button-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}