/*
Theme Name: MohidWebSrv Premium
Theme URI: https://mohid.net/
Author: MohidWebSrv
Author URI: https://mohid.net/
Description: Premium dark/light web development agency theme for MohidWebSrv. Converted from a custom HTML design. Includes Home, About, Widgets, Plugins, Demos, Contact and Landing page templates with theme toggle, testimonial slider and scroll animations.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mohidwebsrv
*/

/* ============ BASE (from original design) ============ */

    html { scroll-behavior: smooth; }

    /* ============ DESIGN TOKENS (spacing / type / radius / shadow) ============ */
    :root {
      /* 4px spacing scale */
      --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
      --sp-6: 24px; --sp-7: 32px;  --sp-8: 40px; --sp-9: 48px; --sp-10: 56px;
      --sp-11: 64px; --sp-12: 80px; --sp-13: 96px; --sp-14: 120px;

      /* Page rhythm */
      --gutter:     clamp(20px, 5vw, 56px);
      --sec-y:      clamp(64px, 8vw, 104px);
      --sec-y-lg:   clamp(80px, 10vw, 128px);
      --hero-top:   clamp(116px, 14vw, 168px);
      --hero-bot:   clamp(64px, 8vw, 104px);

      /* Containers */
      --container:    1280px;
      --container-sm: 1080px;
      --measure:      640px;

      /* Radius scale */
      --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

      /* Type scale */
      --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
      --fs-md: 15px;    --fs-lg: 16px; --fs-xl: 17px; --fs-2xl: 18px;
      --lh-display: 1.06; --lh-heading: 1.2; --lh-tight: 1.3; --lh-snug: 1.5; --lh-body: 1.7;

      /* Brand */
      --brand: #C12127;
      --brand-ink: #FFFFFF;
      --brand-text: #B31A20; /* AA-safe red for text on light surfaces */
      --input-bg: rgba(255,255,255,0.72);
      --vig-glow: rgba(193,33,39,0.10);

      /* Elevation */
      --sh-1: 0 1px 2px rgba(16,32,48,0.05), 0 2px 8px rgba(16,32,48,0.05);
      --sh-2: 0 4px 12px rgba(16,32,48,0.06), 0 14px 34px rgba(16,32,48,0.07);
      --sh-3: 0 10px 26px rgba(16,32,48,0.08), 0 30px 68px rgba(16,32,48,0.10);
      --sh-brand: 0 8px 24px rgba(193,33,39,0.28);
      --sh-brand-hover: 0 14px 38px rgba(193,33,39,0.40);
      --sh-drawer: -10px 0 44px rgba(16,32,48,0.22);
    }
    body:not([data-theme="light"]) {
      --brand-text: #E4636A; /* AA-safe red for text on dark surfaces */
      --sh-drawer: -10px 0 44px rgba(0,0,0,0.45);
      --input-bg: rgba(255,255,255,0.05);
      --vig-glow: rgba(193,33,39,0.18);
      --sh-1: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.28);
      --sh-2: 0 4px 12px rgba(0,0,0,0.32), 0 14px 34px rgba(0,0,0,0.34);
      --sh-3: 0 10px 26px rgba(0,0,0,0.36), 0 30px 68px rgba(0,0,0,0.40);
    }
    body { --bg: #0A111A; --bg-soft: #0D1724; --text: #EEF2F6; --heading: #FFFFFF; --muted: #9AAABB; --soft: #D8DFE6; --soft2: #B9C4CF; --faint: #71818F; --accent-2: #E4636A; --glass: rgba(44,61,80,0.28); --glass-strong: rgba(44,61,80,0.3); --panel: rgba(10,17,26,0.5); --border: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.22); --header-glass: rgba(10,17,26,0.78); --vig0: rgba(10,17,26,0); --vig1: rgba(10,17,26,0.55); --vig2: rgba(10,17,26,0.92); margin: 0; background: var(--bg); color: var(--text); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; }
    body[data-theme="light"] { --bg: #F3F5F8; --bg-soft: #E8EDF3; --text: #22303D; --heading: #101B26; --muted: #566573; --soft: #3D4E5F; --soft2: #44566A; --faint: #596876; --accent-2: #B01B21; --glass: rgba(44,61,80,0.07); --glass-strong: rgba(255,255,255,0.65); --panel: rgba(255,255,255,0.6); --border: rgba(16,32,48,0.12); --border-input: rgba(16,32,48,0.18); --border-strong: rgba(16,32,48,0.28); --header-glass: rgba(243,245,248,0.82); --vig0: rgba(243,245,248,0); --vig1: rgba(243,245,248,0.55); --vig2: rgba(243,245,248,0.92); }
    a { color: var(--text); text-decoration: none; }
    a:hover { color: var(--heading); }
    ::selection { background: rgba(193,33,39,0.5); }
    @keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    @keyframes scrollPulse { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(12px); opacity: 0; } }
    @keyframes syncPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(193,33,39,0.5); } 50% { box-shadow: 0 0 0 7px rgba(193,33,39,0); } }
    @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
    @keyframes underlineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  
/* ============ HOVER RULES ============ */
[data-mwsh="mwsh-0"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-1"]:hover { color: var(--heading); }
[data-mwsh="mwsh-2"]:hover { color: var(--heading); }
[data-mwsh="mwsh-3"]:hover { color: var(--heading); }
[data-mwsh="mwsh-4"]:hover { color: var(--heading); }
[data-mwsh="mwsh-5"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-6"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-7"]:hover { transform: translateY(-3px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-8"]:hover { border-color: var(--faint); background: var(--glass); color: var(--heading); }
[data-mwsh="mwsh-9"]:hover { animation-play-state: paused; }
[data-mwsh="mwsh-10"]:hover { border-color: rgba(193,33,39,0.55); transform: translateX(-2px); }
[data-mwsh="mwsh-11"]:hover { border-color: rgba(193,33,39,0.55); transform: translateX(2px); }
[data-mwsh="mwsh-12"]:hover { animation-play-state: paused; }
[data-mwsh="mwsh-13"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-14"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-15"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-16"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-17"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-18"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-19"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-20"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-21"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-22"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-23"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-24"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-25"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-26"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-27"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-28"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-29"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-30"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-31"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-32"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-33"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-34"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-35"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-36"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-37"]:hover { animation-play-state: paused; }
[data-mwsh="mwsh-38"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-39"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-40"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-41"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-42"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-43"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-44"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-45"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-46"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-47"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-48"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-49"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-50"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-51"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-52"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-53"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-54"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-55"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-56"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-57"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-58"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-59"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-60"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-61"]:hover { filter: none; opacity: 1; transform: translateY(-4px); }
[data-mwsh="mwsh-62"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-63"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-64"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-65"]:hover { transform: translateY(-3px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-66"]:hover { color: var(--heading); }
[data-mwsh="mwsh-67"]:hover { color: var(--heading); }
[data-mwsh="mwsh-68"]:hover { color: var(--heading); }
[data-mwsh="mwsh-69"]:hover { color: var(--heading); }
[data-mwsh="mwsh-70"]:hover { color: var(--heading); }
[data-mwsh="mwsh-71"]:hover { color: var(--heading); }
[data-mwsh="mwsh-72"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-73"]:hover { color: var(--heading); }
[data-mwsh="mwsh-74"]:hover { color: var(--heading); }
[data-mwsh="mwsh-75"]:hover { color: var(--heading); }
[data-mwsh="mwsh-76"]:hover { color: var(--heading); }
[data-mwsh="mwsh-77"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-78"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-79"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-80"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-81"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-82"]:hover { transform: translateY(-3px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-83"]:hover { color: var(--heading); }
[data-mwsh="mwsh-84"]:hover { color: var(--heading); }
[data-mwsh="mwsh-85"]:hover { color: var(--heading); }
[data-mwsh="mwsh-86"]:hover { color: var(--heading); }
[data-mwsh="mwsh-87"]:hover { color: var(--heading); }
[data-mwsh="mwsh-88"]:hover { color: var(--heading); }
[data-mwsh="mwsh-89"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-90"]:hover { color: var(--heading); }
[data-mwsh="mwsh-91"]:hover { color: var(--heading); }
[data-mwsh="mwsh-92"]:hover { color: var(--heading); }
[data-mwsh="mwsh-93"]:hover { color: var(--heading); }
[data-mwsh="mwsh-94"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-95"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-96"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-97"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-98"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-99"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-100"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-101"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-102"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-103"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-104"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-105"]:hover { color: var(--heading); }
[data-mwsh="mwsh-106"]:hover { color: var(--heading); }
[data-mwsh="mwsh-107"]:hover { color: var(--heading); }
[data-mwsh="mwsh-108"]:hover { color: var(--heading); }
[data-mwsh="mwsh-109"]:hover { color: var(--heading); }
[data-mwsh="mwsh-110"]:hover { color: var(--heading); }
[data-mwsh="mwsh-111"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-112"]:hover { color: var(--heading); }
[data-mwsh="mwsh-113"]:hover { color: var(--heading); }
[data-mwsh="mwsh-114"]:hover { color: var(--heading); }
[data-mwsh="mwsh-115"]:hover { color: var(--heading); }
[data-mwsh="mwsh-116"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-117"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-118"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-119"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-120"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-121"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-122"]:hover { color: var(--heading); }
[data-mwsh="mwsh-123"]:hover { color: var(--heading); }
[data-mwsh="mwsh-124"]:hover { color: var(--heading); }
[data-mwsh="mwsh-125"]:hover { color: var(--heading); }
[data-mwsh="mwsh-126"]:hover { color: var(--heading); }
[data-mwsh="mwsh-127"]:hover { color: var(--heading); }
[data-mwsh="mwsh-128"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-129"]:hover { color: var(--heading); }
[data-mwsh="mwsh-130"]:hover { color: var(--heading); }
[data-mwsh="mwsh-131"]:hover { color: var(--heading); }
[data-mwsh="mwsh-132"]:hover { color: var(--heading); }
[data-mwsh="mwsh-133"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-134"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-135"]:hover { transform: scale(1.06); border-color: rgba(193,33,39,0.6); }
[data-mwsh="mwsh-136"]:hover { color: var(--heading); }
[data-mwsh="mwsh-137"]:hover { color: var(--heading); }
[data-mwsh="mwsh-138"]:hover { color: var(--heading); }
[data-mwsh="mwsh-139"]:hover { color: var(--heading); }
[data-mwsh="mwsh-140"]:hover { color: var(--heading); }
[data-mwsh="mwsh-141"]:hover { color: var(--heading); }
[data-mwsh="mwsh-142"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-143"]:hover { color: var(--heading); }
[data-mwsh="mwsh-144"]:hover { color: var(--heading); }
[data-mwsh="mwsh-145"]:hover { color: var(--heading); }
[data-mwsh="mwsh-146"]:hover { color: var(--heading); }
[data-mwsh="mwsh-147"]:hover { color: var(--heading); }
[data-mwsh="mwsh-148"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-149"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-150"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); }
[data-mwsh="mwsh-151"]:hover { color: var(--heading); }
[data-mwsh="mwsh-152"]:hover { color: var(--heading); }
[data-mwsh="mwsh-153"]:hover { color: var(--heading); }
[data-mwsh="mwsh-154"]:hover { color: var(--heading); }
[data-mwsh="mwsh-155"]:hover { color: var(--heading); }
[data-mwsh="mwsh-156"]:hover { color: var(--heading); }
[data-mwsh="mwsh-157"]:hover { letter-spacing: 1.4px; text-shadow: 0 0 22px rgba(193,33,39,0.65); }
[data-mwsh="mwsh-158"]:hover { border-color: rgba(193,33,39,0.55); transform: translateY(-1px); box-shadow: 0 0 18px rgba(193,33,39,0.25); }
[data-mwsh="mwsh-159"]:hover { color: var(--heading); }
[data-mwsh="mwsh-160"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }
[data-mwsh="mwsh-161"]:hover { transform: translateY(-2px); box-shadow: var(--sh-brand-hover); }
[data-mwsh="mwsh-162"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-163"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-164"]:hover { transform: translateY(-8px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3), 0 0 40px rgba(193,33,39,0.12); }
[data-mwsh="mwsh-165"]:hover { transform: translateY(-3px); box-shadow: var(--sh-brand-hover); color: #FFFFFF; }

/* ============ RESPONSIVE / MOBILE NAV ============ */
main { display: block; }

/* Kill horizontal scroll globally (marquees / wide rows) */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

#mws-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-input);
  background: var(--glass);
  color: var(--heading);
  cursor: pointer;
  z-index: 60;
  flex-shrink: 0;
  padding: 0;
}
.mws-burger-bars { display: block; position: relative; width: 20px; height: 14px; }
.mws-burger-bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
.mws-burger-bars span:nth-child(1) { top: 0; }
.mws-burger-bars span:nth-child(2) { top: 6px; }
.mws-burger-bars span:nth-child(3) { top: 12px; }
#mws-hamburger.mws-active .mws-burger-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
#mws-hamburger.mws-active .mws-burger-bars span:nth-child(2) { opacity: 0; }
#mws-hamburger.mws-active .mws-burger-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media screen and (max-width: 860px) {
  /* Header: logo left, hamburger right */
  #site-header {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 14px clamp(16px, 5vw, 32px) !important;
  }

  #mws-hamburger { display: flex !important; order: 3; }

  /* Off-canvas nav panel (inline styles overridden with !important) */
  #mws-main-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: min(80vw, 320px) !important;
    max-width: 320px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    background: var(--header-glass) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 92px 28px 28px !important;
    box-sizing: border-box !important;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 55;
    box-shadow: var(--sh-drawer);
    overflow-y: auto;
  }
  #mws-main-nav.mws-nav-open { transform: translateX(0) !important; }

  #mws-main-nav a {
    width: 100% !important;
    padding: 12px 0 !important;
    font-size: 17px !important;
    border-bottom: 1px solid var(--border);
  }
  /* CTA button inside the drawer */
  #mws-main-nav > a[style*="border-radius: var(--r-pill)"] {
    border-bottom: none !important;
    justify-content: center !important;
    margin-top: 16px !important;
    padding: 12px 24px !important;
    box-sizing: border-box;
  }
  #mws-main-nav button[data-mws="toggle-theme"] { align-self: flex-start !important; margin: 8px 0 !important; }

  body.mws-menu-open { overflow: hidden; }
}

@media screen and (max-width: 600px) {
  /* Footer stacks; contact / links wrap instead of overflowing */
  footer[data-screen-label="Footer"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 28px var(--gutter) !important;
  }
  #mws-footer-nav {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 12px !important;
    column-gap: 20px !important;
    width: 100% !important;
  }
  footer[data-screen-label="Footer"] > span { width: 100%; word-break: break-word; }
}

/* ============ WordPress admin bar spacing ============ */
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px){ body.admin-bar #site-header { top: 46px; } }

/* MWS Widgets Page hovers */
[data-mwsh="mwsh-201"]:hover { transform: translateY(-4px); border-color: rgba(193,33,39,0.45); box-shadow: 0 18px 50px rgba(193,33,39,0.18); }
[data-mwsh="mwsh-202"]:hover { transform: translateY(-3px); border-color: rgba(193,33,39,0.4); box-shadow: var(--sh-3); }

/* ============ HEADER DROPDOWN (nav submenu) ============ */
.mws-navitem { position: relative; display: flex; align-items: center; }
.mws-navitem::after { content: ""; position: absolute; top: 100%; left: -16px; right: -16px; height: 24px; }
.mws-navitem > a { display: inline-flex; align-items: center; gap: 8px; }
.mws-caret {
  display: inline-block; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.5;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease, border-color 0.3s ease;
}
.mws-navitem:hover .mws-caret, .mws-navitem:focus-within .mws-caret {
  transform: rotate(-135deg) translateY(-3px); opacity: 1; border-color: #C12127;
}
.mws-dd {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  min-width: 272px; margin-top: 24px; padding: 8px;
  background: var(--header-glass);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 12px) scale(0.97); transform-origin: top center;
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22,1,0.36,1), visibility 0.26s;
}
body[data-theme="light"] .mws-dd { box-shadow: 0 24px 58px rgba(16,32,48,0.16); }
.mws-dd::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--header-glass); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.mws-navitem:hover .mws-dd, .mws-navitem:focus-within .mws-dd { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.mws-dd a {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; color: var(--soft); white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease;
}
.mws-dd a::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 0;
  border-radius: 2px; background: #C12127; transform: translateY(-50%); transition: height 0.26s ease;
}
.mws-dd a:hover { background: var(--glass); color: var(--heading); }
.mws-dd a:hover::before, .mws-dd a.is-active::before { height: 22px; }
.mws-dd a.is-active { color: var(--heading); background: rgba(193,33,39,0.1); }
.mws-dd small { font-size: 11.5px; font-weight: 500; color: var(--faint); }

@media screen and (max-width: 860px) {
  #mws-main-nav .mws-navitem { width: 100% !important; flex-direction: column; align-items: flex-start; }
  #mws-main-nav .mws-navitem > a { width: 100% !important; justify-content: space-between; }
  #mws-main-nav .mws-navitem::after { display: none; }
  #mws-main-nav .mws-caret { transform: rotate(45deg) translateY(-3px) !important; opacity: 0.6 !important; border-color: currentColor !important; }
  #mws-main-nav .mws-dd {
    position: static !important; width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 2px 0 8px 16px !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    background: transparent !important; border: none !important; border-left: 1px solid var(--border) !important;
    border-radius: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #mws-main-nav .mws-dd::before { display: none; }
  #mws-main-nav .mws-dd a {
    width: 100% !important; padding: 12px 0 12px 16px !important; font-size: 14.5px !important;
    border-bottom: none !important; color: var(--muted);
  }
  #mws-main-nav .mws-dd a::before { left: 0; }
  #mws-main-nav .mws-dd small { display: none; }
}

/* ============ WIDGET STYLES PAGE ============ */

/* --- Ambient hero --- */
.mws-ws-hero { position: relative; overflow: hidden; }
.mws-ws-hero::before {
  content: ""; position: absolute; top: -220px; left: 50%; width: 900px; height: 620px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(193,33,39,0.16), transparent 72%);
}
.mws-ws-hero > * { position: relative; z-index: 1; }

/* --- Section head --- */
.mws-ws-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border);
}
.mws-ws-kicker { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-text); margin-bottom: 16px; }
.mws-ws-h2 { margin: 0 0 12px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(27px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.015em; color: var(--heading); }
.mws-ws-lead { margin: 0; max-width: 620px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.mws-ws-count { flex-shrink: 0; padding: 8px 20px; border-radius: var(--r-pill); background: rgba(193,33,39,0.1); border: 1px solid rgba(193,33,39,0.32); font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--soft); }

/* --- Grid --- */
.mws-ws-grid { display: grid; grid-template-columns: 1fr; grid-auto-flow: row dense; gap: 20px; }
@media screen and (min-width: 780px)  { .mws-ws-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .mws-ws-card.is-wide { grid-column: span 2; } .mws-ws-grid.is-single { grid-template-columns: 1fr; max-width: 600px; } }
@media screen and (min-width: 1180px) { .mws-ws-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
/* --- Paired dark / light grid: one widget per row, dark left, light right --- */
@media screen and (min-width: 780px) { .mws-ws-grid.is-pairs { grid-template-columns: repeat(2, 1fr); } .mws-ws-grid.is-pairs .mws-ws-card.is-wide { grid-column: span 1; } }
.mws-ws-theme { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-input); background: var(--panel); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--soft2); }
.mws-ws-theme::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-strong); background: #0A111A; }
.mws-ws-theme.is-light::before { background: #F3F5F8; }
.mws-ws-card.is-house:hover { transform: translateY(-6px); border-color: rgba(193,33,39,0.34); box-shadow: var(--sh-3); }
body[data-theme="light"] .mws-ws-card.is-house:hover { box-shadow: 0 24px 56px rgba(16,32,48,0.14); }
.mws-ws-card.is-house:hover .mws-ws-shot img { transform: scale(1.02) translateY(-2px); }

/* --- Card --- */
.mws-ws-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%), var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease, box-shadow 0.45s ease;
}
body[data-theme="light"] .mws-ws-card {
  background: linear-gradient(180deg, #FFFFFF, rgba(255,255,255,0.7));
  box-shadow: 0 2px 12px rgba(16,32,48,0.06);
}
.mws-ws-card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); pointer-events: none;
  background: radial-gradient(85% 55% at 50% -8%, rgba(193,33,39,0.2), transparent 72%);
  opacity: 0; transition: opacity 0.4s ease;
}
a.mws-ws-card:hover { transform: translateY(-10px); border-color: rgba(193,33,39,0.42); box-shadow: var(--sh-3), 0 0 50px rgba(193,33,39,0.13); }
body[data-theme="light"] a.mws-ws-card:hover { box-shadow: 0 28px 64px rgba(16,32,48,0.16), 0 0 40px rgba(193,33,39,0.1); }
a.mws-ws-card:hover::after { opacity: 1; }
a.mws-ws-card:focus-visible { outline: 2px solid #C12127; outline-offset: 3px; }

/* --- Faux browser chrome above every screenshot --- */
.mws-ws-chrome {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.mws-ws-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.mws-ws-chrome i:first-child { background: rgba(193,33,39,0.6); }
.mws-ws-chrome span {
  margin: 0 auto; padding: 4px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--glass);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.mws-ws-chrome::after { content: ""; width: 36px; flex-shrink: 0; }

/* --- Screenshot stage --- */
.mws-ws-shot {
  position: relative; flex: 1 1 auto; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden;
  background: radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,0.06), transparent 62%), var(--bg-soft);
}
body[data-theme="light"] .mws-ws-shot { background: radial-gradient(140% 120% at 50% 0%, rgba(16,32,48,0.05), transparent 62%), var(--bg-soft); }
.mws-ws-card.is-wide .mws-ws-shot { min-height: 250px; }
.mws-ws-shot img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md); box-shadow: var(--sh-2);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
body[data-theme="light"] .mws-ws-shot img { box-shadow: 0 16px 40px rgba(16,32,48,0.16); }
a.mws-ws-card:hover .mws-ws-shot img { transform: scale(1.035) translateY(-2px); }

/* --- Card footer --- */
.mws-ws-body { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px; }
.mws-ws-name { margin: 0; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: var(--heading); }
.mws-ws-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.mws-ws-go {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-input); background: var(--panel); color: var(--soft2); font-size: 15px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
a.mws-ws-card:hover .mws-ws-go { background: #C12127; border-color: #C12127; color: #FFFFFF; transform: translate(3px, -3px); box-shadow: 0 8px 22px rgba(193,33,39,0.45); }
.mws-ws-soon { flex-shrink: 0; padding: 8px 12px; border-radius: var(--r-pill); border: 1px dashed var(--border-input); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }

/* --- Filter chips --- */
.mws-ws-chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid var(--border-input); background: var(--glass); font-size: 13.5px; font-weight: 600; color: var(--soft2); transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.mws-ws-chip:hover { border-color: rgba(193,33,39,0.55); color: var(--heading); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(193,33,39,0.16); }
.mws-ws-chip b { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--brand-text); }

/* --- Stat tiles --- */
.mws-ws-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.mws-ws-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 20px 32px; min-width: 142px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--r-lg); }
.mws-ws-stat b { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 27px; line-height: 1; color: var(--heading); }
.mws-ws-stat span { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

/* --- Mobile rhythm --- */
@media screen and (max-width: 780px) {
  .mws-ws-shot { min-height: 240px; padding: 16px; }
  .mws-ws-card.is-wide .mws-ws-shot { min-height: 210px; }
  .mws-ws-card { border-radius: var(--r-lg); }
  .mws-ws-card::after { border-radius: var(--r-lg); }
  .mws-ws-body { padding: 16px 16px; }
  .mws-ws-chrome { height: 36px; padding: 0 12px; }
  .mws-ws-head { margin-bottom: 28px; padding-bottom: 20px; gap: 16px; }
  .mws-ws-kicker { margin-bottom: 12px; }
  .mws-ws-lead { font-size: 15px; }
  .mws-ws-stat { padding: 16px 24px; min-width: 0; flex: 1 1 40%; }
  .mws-ws-stats { gap: 12px; }
  .mws-ws-chip { padding: 8px 16px; font-size: 12.5px; }
  .mws-ws-hero::before { width: 560px; height: 420px; top: -160px; }
}

/* ============ WIDGET STYLES: DARK / LIGHT COMPARE ============ */
.mws-cmp-split { display: grid; grid-template-columns: 1fr; gap: clamp(38px, 6vw, 60px); align-items: center; }
@media screen and (min-width: 1060px) { .mws-cmp-split { grid-template-columns: minmax(300px, 390px) 1fr; gap: clamp(44px, 5vw, 76px); } }
.mws-cmp-split > * { min-width: 0; max-width: 100%; }
.mws-cmp-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: var(--brand-text); }
.mws-cmp-kicker span { width: 6px; height: 6px; background: #C12127; transform: rotate(45deg); }
.mws-cmp-h2 { margin: 0 0 16px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(31px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -0.02em; color: var(--heading); text-wrap: balance; }
.mws-cmp-lead { margin: 0 0 28px; max-width: 46ch; font-size: 16.5px; line-height: 1.72; color: var(--muted); }
.mws-cmp-list { margin: 0 0 32px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mws-cmp-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--soft2); }
.mws-cmp-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: #C12127; transform: rotate(45deg); }
.mws-cmp-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--heading); border-bottom: 1px solid rgba(193,33,39,0.5); padding-bottom: 4px; transition: gap 0.25s ease, border-color 0.25s ease; }
.mws-cmp-cta:hover { gap: 16px; border-bottom-color: var(--brand-text); }
.mws-cmp-cta span { color: var(--brand-text); }
.mws-cmp-frame { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 34px 78px rgba(4,9,16,0.5); }
body[data-theme="light"] .mws-cmp-frame { box-shadow: 0 30px 66px rgba(16,32,48,0.15); }
.mws-cmp-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4; background: linear-gradient(90deg, transparent, var(--border-strong) 20%, #C12127 50%, var(--border-strong) 80%, transparent); opacity: 0.85; }
.mws-cmp-chrome { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--panel); }
.mws-cmp-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.mws-cmp-chrome i:first-child { background: rgba(193,33,39,0.6); }
.mws-cmp-chrome span { margin: 0 auto; padding: 4px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass); font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: opacity 0.22s ease; }
.mws-cmp-side.is-swapping .mws-cmp-chrome span { opacity: 0; }
.mws-cmp-stage { display: flex; align-items: center; justify-content: center; height: clamp(280px, 44vh, 500px); padding: clamp(16px, 2vw, 28px); background: radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,0.05), transparent 62%), var(--bg-soft); transition: height 0.4s cubic-bezier(0.22,1,0.36,1); }
body[data-theme="light"] .mws-cmp-stage { background: radial-gradient(140% 120% at 50% 0%, rgba(16,32,48,0.05), transparent 62%), var(--bg-soft); }
.mws-cmp-shot { position: relative; overflow: hidden; border-radius: var(--r-sm); box-shadow: var(--sh-2); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: width 0.4s cubic-bezier(0.22,1,0.36,1), height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease; }
body[data-theme="light"] .mws-cmp-shot { box-shadow: 0 16px 40px rgba(16,32,48,0.16); }
.mws-cmp-side.is-swapping .mws-cmp-shot { opacity: 0; }
.mws-cmp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.mws-cmp-dark { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mws-cmp-shot.is-hinting .mws-cmp-dark { transition: clip-path 0.9s cubic-bezier(0.65,0,0.35,1); }
.mws-cmp-tag { position: absolute; bottom: 12px; z-index: 3; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.18); background: rgba(10,17,26,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.86); pointer-events: none; }
.mws-cmp-tag-dark { left: 12px; }
.mws-cmp-tag-light { right: 12px; border-color: rgba(16,32,48,0.16); background: rgba(255,255,255,0.75); color: #101B26; }
.mws-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(193,33,39,0.15), #C12127 18%, #C12127 82%, rgba(193,33,39,0.15)); cursor: ew-resize; }
.mws-cmp-handle:focus-visible { outline: none; }
.mws-cmp-handle:focus-visible .mws-cmp-knob { border-color: #C12127; box-shadow: 0 0 0 4px rgba(193,33,39,0.28), var(--sh-2); }
.mws-cmp-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 3px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: rgba(10,17,26,0.62); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255,255,255,0.06); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, border-color 0.25s ease; }
.mws-cmp-knob i { font-style: normal; font-size: 15px; line-height: 1; color: #FFFFFF; opacity: 0.9; }
.mws-cmp-shot:hover .mws-cmp-knob, .mws-cmp-shot.is-dragging .mws-cmp-knob { transform: translate(-50%, -50%) scale(1.08); border-color: rgba(193,33,39,0.7); box-shadow: var(--sh-2), 0 0 34px rgba(193,33,39,0.35); }
.mws-cmp-shot.is-dragging { cursor: grabbing; }
@media (max-width: 560px) { .mws-cmp-knob { width: 40px; height: 40px; } }
.mws-cmp-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.mws-cmp-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-input); background: var(--glass); color: var(--text); font-size: 17px; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
.mws-cmp-arrow:hover { border-color: #C12127; background: #C12127; color: #FFFFFF; }
.mws-cmp-rail { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.mws-cmp-rail::-webkit-scrollbar { display: none; }
.mws-cmp-pill { flex: 0 0 auto; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--muted); cursor: pointer; transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.mws-cmp-pill:hover { color: var(--heading); background: var(--glass-strong); }
.mws-cmp-pill.is-active { background: #C12127; color: #FFFFFF; box-shadow: 0 6px 18px rgba(193,33,39,0.38); }
@media (max-width: 560px) { .mws-cmp-pill { padding: 8px 12px; font-size: 12px; } .mws-cmp-arrow { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .mws-cmp-shot.is-hinting .mws-cmp-dark { transition: none; }
  .mws-cmp-knob, .mws-cmp-shot, .mws-cmp-stage { transition: none; }
}