/*
-----------------
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 {
  border: 1px solid #333 !important;
  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 {
  border: 2px solid #333 !important;
  color: #e5e5e5 !important;
}

#acf-group_cinesist_review_box_fields .postbox-header {
  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 {
  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 {
  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;
}

/* 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.selected {
  background: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive) !important;
}

.cs-legacy-meta-bridge .meta-el.meta-like.loaded {
    display: none;
}

/* --- Snarkive Admin: Light HUD for ACF --- */

/* 1. Container & Field Spacing */
.acf-field-post-object, 
.acf-field-relationship, 
.acf-field-taxonomy {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 2. Labels & Descriptions */
.acf-label label {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #1a202c !important;
    font-size: 11px !important;
}

.acf-label p.description {
    font-style: italic !important;
    color: #718096 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 3. The Relationship "Dossier" UI */
.acf-relationship {
    border: 1px solid #cbd5e0 !important;
    background: #f8fafc !important;
}

.acf-relationship .filters {
    background: #edf2f7 !important;
    border-bottom: 1px solid #cbd5e0 !important;
}

/* 4. Selection Choices (Left Side) */
.acf-relationship .choices {
    background: #fff !important;
}

.acf-relationship .choices-list .acf-rel-item,
.acf-relationship .values-list .acf-rel-item {
    padding: 8px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-weight: 500 !important;
    color: #4a5568 !important;
}

/* 5. Selected Values (Right Side) - The "Snarkive" Accent */
.acf-relationship .values-list .acf-rel-item {
    background: #fff !important;
    border-left: 3px solid var(--review-accent, #ff5612) !important;
}

/* Thumbnail Styling */
.acf-relationship .thumbnail {
    border-radius: 3px !important;
    border: 1px solid #e2e8f0 !important;
}

/* 6. Relationship Search Bar */
.acf-relationship .filter.-search input {
    border-radius: 20px !important;
    padding: 5px 15px !important;
    border: 1px solid #cbd5e0 !important;
    font-size: 12px !important;
}

.acf-relationship .filter.-search input:focus {
    border-color: var(--review-accent, #ff5612) !important;
    box-shadow: 0 0 0 1px var(--review-accent, #ff5612) !important;
}

/* 7. Multi-Select & Taxonomy Tags */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #cbd5e0 !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fff !important;
    border: 1px solid var(--review-accent, #ff5612) !important;
    color: #1a202c !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
}

/* Add Icon Styling */
.acf-icon.-plus, .acf-icon.-minus {
    background-color: var(--review-accent, #ff5612) !important;
    border: none !important;
}

/* --- Cinesist Floating Edit Link --- */
.cinesist-floating-edit-link {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99999;
	background-color: var(--flex-snarkive, #d102d1);
	color: #fff;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 50px;
	width: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.cinesist-floating-edit-link:hover {
	background-color: var(--flex-snarkive-rev, #dd7b45);
	width: 130px;
	justify-content: flex-start;
	padding-left: 15px;
}

.cinesist-floating-edit-link .dashicons-edit {
	flex-shrink: 0;
	fill: currentColor;
}

.cinesist-floating-edit-link .cinesist-edit-link-text {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	white-space: nowrap;
	margin-left: 10px;
	font-weight: 600;
	font-size: 14px;
}

.cinesist-floating-edit-link:hover .cinesist-edit-link-text {
	visibility: visible;
	opacity: 1;
}