/* Trip Media Player Pro v3.2 - Single Inner Container, 8 Themes, Mobile & Desktop Responsive */

/* Theme: Royal Purple (البنفسجي الملكي) */
.tmp-theme-royal-purple {
  --tmp-main-bg: linear-gradient(180deg, #F6F3FF 0%, #EDE6FF 50%, #E7DFFF 100%);
  --tmp-main-border: 2.5px solid rgba(255, 255, 255, 0.88);
  --tmp-main-shadow: 0 20px 50px rgba(95, 48, 214, 0.18), inset 0 2px 8px rgba(255, 255, 255, 0.95);
  --tmp-inner-bg: linear-gradient(180deg, #FDFBFF 0%, #F4EEFF 62%, #EAE0FF 100%);
  --tmp-inner-border: 2px solid rgba(255, 255, 255, 0.94);
  --tmp-inner-shadow: 0 12px 28px rgba(96, 48, 216, 0.11), inset 0 1px 0 #FFFFFF;
  --tmp-heading: #141B4D;
  --tmp-subtitle: #7442E8;
  --tmp-time: #172054;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #956BFF 0%, #6833E8 58%, #4C1AC0 100%);
  --tmp-badge-border: 2.5px solid rgba(168, 138, 255, 0.72);
  --tmp-badge-shadow: 0 8px 18px rgba(90, 38, 216, 0.36), inset 0 2px 4px rgba(255, 255, 255, 0.45);
  --tmp-film-cutout: #632DE2;
  --tmp-wave-from: #8A5CFF;
  --tmp-wave-to: #5E28DC;
  --tmp-pill-bg: linear-gradient(180deg, #8658FF 0%, #5E28E0 55%, #4615B7 100%);
  --tmp-pill-border: 1.5px solid #4918BA;
  --tmp-pill-shadow: 0 7px 16px rgba(86, 35, 212, 0.36), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #5822D8;
  --tmp-cover-border: 2.5px solid #6E3BEE;
  --tmp-cover-shadow: 0 8px 20px rgba(85, 36, 210, 0.26);
  --tmp-play-bg: linear-gradient(145deg, #8655FF 0%, #612BE4 62%, #4E1BCE 100%);
  --tmp-play-border: 4px solid #F6F2FF;
  --tmp-play-shadow: 0 12px 26px rgba(100, 48, 236, 0.34), 0 0 0 1.5px rgba(138, 96, 255, 0.25);
  --tmp-slider-track: #6C37EE;
  --tmp-slider-thumb: #7A45FF;
  --tmp-slider-shadow: 0 2px 8px rgba(107, 54, 236, 0.65);
  --tmp-swatch-grad: linear-gradient(135deg, #8658FF 0%, #5D27DF 100%);
  --tmp-swatch-accent: #6D38EE;
  --tmp-speaker: #6B37ED;
  --tmp-awave-1: rgba(164, 130, 255, 0.16);
  --tmp-awave-2: rgba(130, 84, 248, 0.22);
  --tmp-awave-3: rgba(104, 50, 235, 0.34);
  --tmp-dwave-1: rgba(160, 124, 255, 0.22);
  --tmp-dwave-2: rgba(112, 60, 238, 0.42);
  --tmp-dwave-3: rgba(90, 38, 224, 0.62);
  --tmp-vframe-border: 2.5px solid #7843FA;
  --tmp-vframe-shadow: 0 8px 22px rgba(85, 36, 210, 0.2);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(114, 62, 238, 0.94) 0%, rgba(76, 28, 194, 0.94) 100%);
  --tmp-vpill-border: 1px solid rgba(176, 144, 255, 0.45);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(146, 98, 255, 0.92), rgba(90, 35, 220, 0.92));
  --tmp-vplay-border: 2.5px solid rgba(255, 255, 255, 0.72);
  --tmp-vplay-shadow: 0 0 32px rgba(120, 68, 255, 0.65);
  --tmp-thumb-active-border: #6D38EE;
  --tmp-thumb-active-shadow: 0 0 0 2.5px rgba(109, 56, 238, 0.4);
  --tmp-loc-bg: linear-gradient(90deg, #EDE4FF 0%, #F7F4FF 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.9);
  --tmp-loc-pin-bg: rgba(109, 56, 238, 0.12);
  --tmp-loc-pin-border: 1px solid rgba(109, 56, 238, 0.3);
  --tmp-loc-text: #141B4D;
}

/* Theme: Rose Pink (الوردي المشرق) */
.tmp-theme-rose-pink {
  --tmp-main-bg: linear-gradient(180deg, #FFF8FB 0%, #FFEDF5 52%, #FFE4F0 100%);
  --tmp-main-border: 2.5px solid rgba(255, 255, 255, 0.92);
  --tmp-main-shadow: 0 20px 50px rgba(228, 42, 132, 0.16), inset 0 2px 8px rgba(255, 255, 255, 0.96);
  --tmp-inner-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF4F9 62%, #FFE8F2 100%);
  --tmp-inner-border: 2px solid rgba(255, 255, 255, 0.96);
  --tmp-inner-shadow: 0 12px 28px rgba(228, 42, 132, 0.10), inset 0 1px 0 #FFFFFF;
  --tmp-heading: #0F234A;
  --tmp-subtitle: #F43F8E;
  --tmp-time: #132752;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #FF7BB8 0%, #F6358E 58%, #D91A72 100%);
  --tmp-badge-border: 2.5px solid rgba(255, 166, 208, 0.82);
  --tmp-badge-shadow: 0 8px 18px rgba(236, 44, 134, 0.34), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  --tmp-film-cutout: #F02C86;
  --tmp-wave-from: #FF70B2;
  --tmp-wave-to: #EC2680;
  --tmp-pill-bg: linear-gradient(180deg, #FF70B0 0%, #F22E88 56%, #D81870 100%);
  --tmp-pill-border: 1.5px solid #DF1D76;
  --tmp-pill-shadow: 0 7px 16px rgba(232, 40, 128, 0.32), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #EA2680;
  --tmp-cover-border: 2.5px solid #F63B92;
  --tmp-cover-shadow: 0 8px 20px rgba(232, 40, 128, 0.24);
  --tmp-play-bg: linear-gradient(145deg, #FF74B4 0%, #F4308A 62%, #DC1A74 100%);
  --tmp-play-border: 4px solid #FFF5FA;
  --tmp-play-shadow: 0 12px 26px rgba(238, 46, 136, 0.32), 0 0 0 1.5px rgba(255, 150, 198, 0.38);
  --tmp-slider-track: #F64896;
  --tmp-slider-thumb: #FF5AA6;
  --tmp-slider-shadow: 0 2px 8px rgba(242, 48, 138, 0.6);
  --tmp-swatch-grad: linear-gradient(135deg, #FF70B0 0%, #F02882 100%);
  --tmp-swatch-accent: #F42E88;
  --tmp-speaker: #F63890;
  --tmp-awave-1: rgba(255, 158, 204, 0.18);
  --tmp-awave-2: rgba(250, 108, 174, 0.24);
  --tmp-awave-3: rgba(242, 56, 144, 0.32);
  --tmp-dwave-1: rgba(255, 158, 204, 0.22);
  --tmp-dwave-2: rgba(250, 98, 168, 0.42);
  --tmp-dwave-3: rgba(242, 48, 138, 0.64);
  --tmp-vframe-border: 2.5px solid #FF5CA8;
  --tmp-vframe-shadow: 0 8px 22px rgba(236, 44, 134, 0.2);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(234, 42, 128, 0.92) 0%, rgba(196, 22, 102, 0.95) 100%);
  --tmp-vpill-border: 1px solid rgba(255, 170, 212, 0.5);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(255, 114, 178, 0.93), rgba(234, 36, 126, 0.94));
  --tmp-vplay-border: 2.5px solid rgba(255, 220, 238, 0.85);
  --tmp-vplay-shadow: 0 0 32px rgba(246, 56, 144, 0.62);
  --tmp-thumb-active-border: #F22E88;
  --tmp-thumb-active-shadow: 0 0 0 2.5px rgba(242, 46, 136, 0.4);
  --tmp-loc-bg: linear-gradient(90deg, #FFE4F1 0%, #FFF7FB 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.92);
  --tmp-loc-pin-bg: rgba(242, 46, 136, 0.12);
  --tmp-loc-pin-border: 1px solid rgba(242, 46, 136, 0.32);
  --tmp-loc-text: #0F234A;
}

/* Theme: Sky Ice Blue (الأزرق السماوي) */
.tmp-theme-sky-blue {
  --tmp-main-bg: linear-gradient(180deg, #F6FBFF 0%, #EBF6FF 52%, #E2F1FF 100%);
  --tmp-main-border: 2.5px solid rgba(255, 255, 255, 0.92);
  --tmp-main-shadow: 0 20px 50px rgba(14, 116, 212, 0.16), inset 0 2px 8px rgba(255, 255, 255, 0.95);
  --tmp-inner-bg: linear-gradient(180deg, #FFFFFF 0%, #F2F9FF 64%, #E4F3FF 100%);
  --tmp-inner-border: 2px solid rgba(255, 255, 255, 0.96);
  --tmp-inner-shadow: 0 12px 28px rgba(14, 118, 214, 0.10), inset 0 1px 0 #FFFFFF;
  --tmp-heading: #0A2547;
  --tmp-subtitle: #1BA2E8;
  --tmp-time: #0E2D56;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #3BC4FF 0%, #0E87E8 58%, #045EB8 100%);
  --tmp-badge-border: 2.5px solid rgba(130, 210, 255, 0.78);
  --tmp-badge-shadow: 0 8px 18px rgba(10, 122, 218, 0.34), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  --tmp-film-cutout: #0B82E4;
  --tmp-wave-from: #33C5FF;
  --tmp-wave-to: #0A85E8;
  --tmp-pill-bg: linear-gradient(180deg, #27A6F5 0%, #0B78D8 55%, #0456A8 100%);
  --tmp-pill-border: 1.5px solid #065CB0;
  --tmp-pill-shadow: 0 7px 16px rgba(10, 112, 204, 0.32), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #0975D6;
  --tmp-cover-border: 2.5px solid #1896F0;
  --tmp-cover-shadow: 0 8px 20px rgba(12, 124, 220, 0.24);
  --tmp-play-bg: linear-gradient(145deg, #2FB5FF 0%, #0B7CE6 62%, #0462C4 100%);
  --tmp-play-border: 4px solid #F2FAFF;
  --tmp-play-shadow: 0 12px 26px rgba(12, 124, 230, 0.32), 0 0 0 1.5px rgba(110, 198, 255, 0.3);
  --tmp-slider-track: #0E8CEB;
  --tmp-slider-thumb: #28BAFF;
  --tmp-slider-shadow: 0 2px 8px rgba(14, 140, 235, 0.6);
  --tmp-swatch-grad: linear-gradient(135deg, #2BB6FF 0%, #0674D8 100%);
  --tmp-swatch-accent: #0B84E8;
  --tmp-speaker: #0D7BE0;
  --tmp-awave-1: rgba(116, 202, 255, 0.18);
  --tmp-awave-2: rgba(54, 172, 248, 0.24);
  --tmp-awave-3: rgba(14, 136, 232, 0.34);
  --tmp-dwave-1: rgba(116, 204, 255, 0.24);
  --tmp-dwave-2: rgba(32, 158, 244, 0.44);
  --tmp-dwave-3: rgba(8, 124, 218, 0.66);
  --tmp-vframe-border: 2.5px solid #35B6FF;
  --tmp-vframe-shadow: 0 8px 22px rgba(14, 126, 224, 0.2);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(16, 76, 136, 0.92) 0%, rgba(8, 48, 96, 0.94) 100%);
  --tmp-vpill-border: 1px solid rgba(110, 198, 255, 0.45);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(46, 188, 255, 0.92), rgba(8, 118, 214, 0.92));
  --tmp-vplay-border: 2.5px solid rgba(168, 230, 255, 0.85);
  --tmp-vplay-shadow: 0 0 32px rgba(24, 164, 255, 0.65);
  --tmp-thumb-active-border: #0B84E8;
  --tmp-thumb-active-shadow: 0 0 0 2.5px rgba(11, 132, 232, 0.4);
  --tmp-loc-bg: linear-gradient(90deg, #E2F3FF 0%, #F5FBFF 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.92);
  --tmp-loc-pin-bg: rgba(14, 140, 235, 0.12);
  --tmp-loc-pin-border: 1px solid rgba(14, 140, 235, 0.32);
  --tmp-loc-text: #0A2547;
}

/* Theme: Dark Cyan Neon (الداكن سيان نيون) */
.tmp-theme-dark-cyan {
  --tmp-main-bg: linear-gradient(180deg, #111820 0%, #0B1117 52%, #080D13 100%);
  --tmp-main-border: 1.8px solid rgba(90, 165, 205, 0.35);
  --tmp-main-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(160, 228, 255, 0.16);
  --tmp-inner-bg: linear-gradient(180deg, #17202A 0%, #101720 62%, #0A1118 100%);
  --tmp-inner-border: 1.5px solid rgba(76, 168, 214, 0.32);
  --tmp-inner-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --tmp-heading: #FFFFFF;
  --tmp-subtitle: #9CA8B8;
  --tmp-time: #FFFFFF;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #1F2D3A 0%, #0E161E 65%, #070C12 100%);
  --tmp-badge-border: 2px solid rgba(0, 208, 255, 0.68);
  --tmp-badge-shadow: 0 0 18px rgba(0, 200, 255, 0.28), inset 0 2px 4px rgba(255, 255, 255, 0.12);
  --tmp-film-cutout: #0E1720;
  --tmp-wave-from: #38E2FF;
  --tmp-wave-to: #00A8E8;
  --tmp-pill-bg: linear-gradient(180deg, #1C2732 0%, #0E151D 60%, #080D13 100%);
  --tmp-pill-border: 1.5px solid rgba(68, 175, 224, 0.48);
  --tmp-pill-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #0D151E;
  --tmp-cover-border: 2px solid #00D2FF;
  --tmp-cover-shadow: 0 0 20px rgba(0, 204, 255, 0.28);
  --tmp-play-bg: radial-gradient(circle at 35% 28%, #2EE2FF 0%, #00A8E8 62%, #0077B6 100%);
  --tmp-play-border: 3.5px solid #0E1822;
  --tmp-play-shadow: 0 0 28px rgba(0, 204, 255, 0.45), 0 0 0 1.5px rgba(0, 212, 255, 0.55);
  --tmp-slider-track: #00BAFA;
  --tmp-slider-thumb: #2CE0FF;
  --tmp-slider-shadow: 0 0 12px rgba(44, 224, 255, 0.85);
  --tmp-swatch-grad: linear-gradient(135deg, #0D1620 0%, #00C8FF 100%);
  --tmp-swatch-accent: #00C8FF;
  --tmp-speaker: #FFFFFF;
  --tmp-awave-1: rgba(0, 168, 232, 0.08);
  --tmp-awave-2: rgba(0, 152, 218, 0.14);
  --tmp-awave-3: rgba(0, 128, 196, 0.22);
  --tmp-dwave-1: rgba(0, 168, 232, 0.10);
  --tmp-dwave-2: rgba(0, 148, 214, 0.18);
  --tmp-dwave-3: rgba(0, 120, 186, 0.28);
  --tmp-vframe-border: 2.5px solid #00D2FF;
  --tmp-vframe-shadow: 0 0 24px rgba(0, 204, 255, 0.28);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(18, 27, 36, 0.92) 0%, rgba(9, 14, 20, 0.95) 100%);
  --tmp-vpill-border: 1px solid rgba(255, 255, 255, 0.16);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(30, 46, 60, 0.88), rgba(10, 18, 26, 0.92));
  --tmp-vplay-border: 2.5px solid rgba(0, 216, 255, 0.85);
  --tmp-vplay-shadow: 0 0 32px rgba(0, 208, 255, 0.55);
  --tmp-thumb-active-border: #00D2FF;
  --tmp-thumb-active-shadow: 0 0 12px rgba(0, 210, 255, 0.65);
  --tmp-loc-bg: linear-gradient(90deg, rgba(0, 132, 194, 0.38) 0%, rgba(15, 23, 32, 0.95) 65%);
  --tmp-loc-border: 1.5px solid rgba(64, 178, 230, 0.35);
  --tmp-loc-pin-bg: rgba(20, 32, 44, 0.95);
  --tmp-loc-pin-border: 1.5px solid rgba(90, 180, 224, 0.38);
  --tmp-loc-text: #E2ECF5;
}

/* Theme: Royal Gold (الذهبي الفاخر) */
.tmp-theme-royal-gold {
  --tmp-main-bg: linear-gradient(180deg, #FFFDF4 0%, #FFF7DC 52%, #FFF1C2 100%);
  --tmp-main-border: 2.5px solid rgba(255, 255, 255, 0.92);
  --tmp-main-shadow: 0 20px 50px rgba(190, 128, 0, 0.16), inset 0 2px 8px rgba(255, 255, 255, 0.96);
  --tmp-inner-bg: linear-gradient(180deg, #FFFFFF 0%, #FFFBEF 62%, #FFF3CC 100%);
  --tmp-inner-border: 2px solid rgba(255, 255, 255, 0.96);
  --tmp-inner-shadow: 0 12px 28px rgba(194, 132, 0, 0.10), inset 0 1px 0 #FFFFFF;
  --tmp-heading: #0E1E40;
  --tmp-subtitle: #C98A04;
  --tmp-time: #122244;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #FFD43B 0%, #E59F00 60%, #BD7B00 100%);
  --tmp-badge-border: 2.5px solid rgba(255, 224, 120, 0.85);
  --tmp-badge-shadow: 0 8px 18px rgba(196, 132, 0, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.55);
  --tmp-film-cutout: #D69100;
  --tmp-wave-from: #FFC928;
  --tmp-wave-to: #D68E00;
  --tmp-pill-bg: linear-gradient(180deg, #FFCF33 0%, #E29B00 58%, #BA7800 100%);
  --tmp-pill-border: 1.5px solid #C27E00;
  --tmp-pill-shadow: 0 7px 16px rgba(190, 126, 0, 0.30), inset 0 2px 3px rgba(255, 255, 255, 0.55);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #C98400;
  --tmp-cover-border: 2.5px solid #E5A100;
  --tmp-cover-shadow: 0 8px 20px rgba(190, 126, 0, 0.24);
  --tmp-play-bg: linear-gradient(145deg, #FFD438 0%, #E59E00 62%, #C48100 100%);
  --tmp-play-border: 4px solid #FFFDF2;
  --tmp-play-shadow: 0 12px 26px rgba(204, 138, 0, 0.30), 0 0 0 1.5px rgba(255, 212, 96, 0.45);
  --tmp-slider-track: #E8A500;
  --tmp-slider-thumb: #FFC41F;
  --tmp-slider-shadow: 0 2px 8px rgba(214, 146, 0, 0.6);
  --tmp-swatch-grad: linear-gradient(135deg, #FFD23F 0%, #D99200 100%);
  --tmp-swatch-accent: #DF9A00;
  --tmp-speaker: #DA9400;
  --tmp-awave-1: rgba(255, 210, 80, 0.20);
  --tmp-awave-2: rgba(242, 182, 24, 0.26);
  --tmp-awave-3: rgba(218, 150, 0, 0.34);
  --tmp-dwave-1: rgba(255, 212, 84, 0.24);
  --tmp-dwave-2: rgba(238, 174, 16, 0.44);
  --tmp-dwave-3: rgba(214, 144, 0, 0.66);
  --tmp-vframe-border: 2.5px solid #F0AF00;
  --tmp-vframe-shadow: 0 8px 22px rgba(194, 130, 0, 0.2);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(132, 92, 10, 0.90) 0%, rgba(92, 62, 4, 0.94) 100%);
  --tmp-vpill-border: 1px solid rgba(255, 216, 104, 0.45);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(255, 210, 48, 0.94), rgba(214, 142, 0, 0.94));
  --tmp-vplay-border: 2.5px solid rgba(255, 242, 190, 0.85);
  --tmp-vplay-shadow: 0 0 32px rgba(240, 172, 0, 0.6);
  --tmp-thumb-active-border: #DF9A00;
  --tmp-thumb-active-shadow: 0 0 0 2.5px rgba(223, 154, 0, 0.42);
  --tmp-loc-bg: linear-gradient(90deg, #FFF1B8 0%, #FFFDF2 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.92);
  --tmp-loc-pin-bg: rgba(218, 150, 0, 0.14);
  --tmp-loc-pin-border: 1px solid rgba(218, 150, 0, 0.34);
  --tmp-loc-text: #0E1E40;
}

/* Theme: Obsidian Matte Black (الأسود الفحمي الفاخر) */
.tmp-theme-obsidian-black {
  --tmp-main-bg: linear-gradient(180deg, #18191B 0%, #111214 52%, #0C0D0E 100%);
  --tmp-main-border: 1.8px solid rgba(255, 255, 255, 0.18);
  --tmp-main-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  --tmp-inner-bg: linear-gradient(180deg, #212225 0%, #161719 62%, #101113 100%);
  --tmp-inner-border: 1.5px solid rgba(255, 255, 255, 0.16);
  --tmp-inner-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --tmp-heading: #FFFFFF;
  --tmp-subtitle: #A8ACB3;
  --tmp-time: #FFFFFF;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #323438 0%, #191A1D 65%, #0D0E10 100%);
  --tmp-badge-border: 2px solid rgba(255, 255, 255, 0.34);
  --tmp-badge-shadow: 0 8px 20px rgba(0, 0, 0, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.14);
  --tmp-film-cutout: #18191C;
  --tmp-wave-from: #E5E7EB;
  --tmp-wave-to: #9CA3AF;
  --tmp-pill-bg: linear-gradient(180deg, #2B2D31 0%, #17181B 58%, #0E0F11 100%);
  --tmp-pill-border: 1.5px solid rgba(255, 255, 255, 0.26);
  --tmp-pill-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.14);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #111214;
  --tmp-cover-border: 2px solid rgba(255, 255, 255, 0.28);
  --tmp-cover-shadow: 0 8px 22px rgba(0, 0, 0, 0.65);
  --tmp-play-bg: radial-gradient(circle at 35% 28%, #34363B 0%, #1B1C1F 62%, #0F1012 100%);
  --tmp-play-border: 3.5px solid #141517;
  --tmp-play-shadow: 0 10px 26px rgba(0, 0, 0, 0.75), 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  --tmp-slider-track: #E5E7EB;
  --tmp-slider-thumb: #FFFFFF;
  --tmp-slider-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  --tmp-swatch-grad: linear-gradient(135deg, #3A3D42 0%, #0D0E10 100%);
  --tmp-swatch-accent: #FFFFFF;
  --tmp-speaker: #FFFFFF;
  --tmp-awave-1: rgba(255, 255, 255, 0.03);
  --tmp-awave-2: rgba(255, 255, 255, 0.05);
  --tmp-awave-3: rgba(255, 255, 255, 0.08);
  --tmp-dwave-1: rgba(255, 255, 255, 0.04);
  --tmp-dwave-2: rgba(255, 255, 255, 0.07);
  --tmp-dwave-3: rgba(255, 255, 255, 0.11);
  --tmp-vframe-border: 2px solid rgba(255, 255, 255, 0.34);
  --tmp-vframe-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(28, 29, 32, 0.92) 0%, rgba(14, 15, 17, 0.95) 100%);
  --tmp-vpill-border: 1px solid rgba(255, 255, 255, 0.22);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(44, 46, 50, 0.90), rgba(16, 17, 19, 0.94));
  --tmp-vplay-border: 2px solid rgba(255, 255, 255, 0.45);
  --tmp-vplay-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  --tmp-thumb-active-border: #FFFFFF;
  --tmp-thumb-active-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  --tmp-loc-bg: linear-gradient(90deg, #232529 0%, #141517 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.18);
  --tmp-loc-pin-bg: rgba(255, 255, 255, 0.08);
  --tmp-loc-pin-border: 1px solid rgba(255, 255, 255, 0.22);
  --tmp-loc-text: #F3F4F6;
}

/* Theme: Deep Ocean Blue (الأزرق المحيطي الداكن) */
.tmp-theme-deep-ocean {
  --tmp-main-bg: linear-gradient(180deg, #072C59 0%, #041E42 52%, #031735 100%);
  --tmp-main-border: 2px solid rgba(46, 178, 255, 0.42);
  --tmp-main-shadow: 0 24px 60px rgba(0, 8, 24, 0.72), inset 0 1px 3px rgba(120, 216, 255, 0.22);
  --tmp-inner-bg: linear-gradient(180deg, #0B3A73 0%, #062854 62%, #041E42 100%);
  --tmp-inner-border: 1.5px solid rgba(48, 184, 255, 0.36);
  --tmp-inner-shadow: 0 14px 32px rgba(0, 10, 28, 0.52), inset 0 1px 0 rgba(140, 224, 255, 0.16);
  --tmp-heading: #FFFFFF;
  --tmp-subtitle: #29C5FF;
  --tmp-time: #FFFFFF;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #28C8FF 0%, #0684E0 60%, #0354A6 100%);
  --tmp-badge-border: 2px solid rgba(110, 220, 255, 0.68);
  --tmp-badge-shadow: 0 0 20px rgba(0, 188, 255, 0.36), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  --tmp-film-cutout: #056EC4;
  --tmp-wave-from: #3DF2FF;
  --tmp-wave-to: #00A8F0;
  --tmp-pill-bg: linear-gradient(180deg, #1BA8F0 0%, #0770C8 58%, #044C96 100%);
  --tmp-pill-border: 1.5px solid rgba(98, 212, 255, 0.55);
  --tmp-pill-shadow: 0 6px 18px rgba(0, 20, 52, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.35);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #055CB0;
  --tmp-cover-border: 2.5px solid #00D8FF;
  --tmp-cover-shadow: 0 0 22px rgba(0, 208, 255, 0.32);
  --tmp-play-bg: radial-gradient(circle at 35% 28%, #35ECFF 0%, #00B4F5 60%, #0082CC 100%);
  --tmp-play-border: 3.5px solid #072F60;
  --tmp-play-shadow: 0 0 30px rgba(0, 212, 255, 0.48), 0 0 0 1.5px rgba(80, 224, 255, 0.55);
  --tmp-slider-track: #18DCFF;
  --tmp-slider-thumb: #3AF2FF;
  --tmp-slider-shadow: 0 0 12px rgba(58, 242, 255, 0.85);
  --tmp-swatch-grad: linear-gradient(135deg, #043268 0%, #00D2FF 100%);
  --tmp-swatch-accent: #00C8FF;
  --tmp-speaker: #FFFFFF;
  --tmp-awave-1: rgba(0, 178, 255, 0.12);
  --tmp-awave-2: rgba(0, 150, 238, 0.20);
  --tmp-awave-3: rgba(0, 118, 214, 0.30);
  --tmp-dwave-1: rgba(0, 180, 255, 0.16);
  --tmp-dwave-2: rgba(0, 148, 238, 0.32);
  --tmp-dwave-3: rgba(0, 116, 212, 0.52);
  --tmp-vframe-border: 2.5px solid #00D4FF;
  --tmp-vframe-shadow: 0 0 24px rgba(0, 200, 255, 0.28);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(12, 52, 108, 0.92) 0%, rgba(6, 30, 72, 0.95) 100%);
  --tmp-vpill-border: 1px solid rgba(90, 204, 255, 0.42);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(28, 190, 255, 0.90), rgba(4, 104, 194, 0.92));
  --tmp-vplay-border: 2.5px solid rgba(130, 230, 255, 0.82);
  --tmp-vplay-shadow: 0 0 32px rgba(0, 200, 255, 0.6);
  --tmp-thumb-active-border: #00D8FF;
  --tmp-thumb-active-shadow: 0 0 12px rgba(0, 216, 255, 0.65);
  --tmp-loc-bg: linear-gradient(90deg, rgba(0, 144, 228, 0.42) 0%, rgba(6, 38, 82, 0.95) 70%);
  --tmp-loc-border: 1.5px solid rgba(64, 192, 255, 0.38);
  --tmp-loc-pin-bg: rgba(8, 48, 98, 0.95);
  --tmp-loc-pin-border: 1.5px solid rgba(90, 204, 255, 0.42);
  --tmp-loc-text: #E6F6FF;
}

/* Theme: Aqua Turquoise Mint (الفيروزي المنعش) */
.tmp-theme-aqua-mint {
  --tmp-main-bg: linear-gradient(180deg, #F4FFFD 0%, #E6FCF8 52%, #DAFAF4 100%);
  --tmp-main-border: 2.5px solid rgba(255, 255, 255, 0.92);
  --tmp-main-shadow: 0 20px 50px rgba(0, 142, 130, 0.16), inset 0 2px 8px rgba(255, 255, 255, 0.96);
  --tmp-inner-bg: linear-gradient(180deg, #FFFFFF 0%, #F0FFFC 64%, #E0FAF5 100%);
  --tmp-inner-border: 2px solid rgba(255, 255, 255, 0.96);
  --tmp-inner-shadow: 0 12px 28px rgba(0, 144, 132, 0.10), inset 0 1px 0 #FFFFFF;
  --tmp-heading: #07363C;
  --tmp-subtitle: #00A89A;
  --tmp-time: #093B42;
  --tmp-badge-bg: radial-gradient(circle at 32% 24%, #26DEC9 0%, #009E90 60%, #00756B 100%);
  --tmp-badge-border: 2.5px solid rgba(124, 240, 226, 0.80);
  --tmp-badge-shadow: 0 8px 18px rgba(0, 146, 134, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  --tmp-film-cutout: #009688;
  --tmp-wave-from: #20DFCA;
  --tmp-wave-to: #009184;
  --tmp-pill-bg: linear-gradient(180deg, #1ED4C0 0%, #00998B 58%, #007368 100%);
  --tmp-pill-border: 1.5px solid #007A6F;
  --tmp-pill-shadow: 0 7px 16px rgba(0, 138, 126, 0.30), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  --tmp-hd-bg: #FFFFFF;
  --tmp-hd-text: #008C80;
  --tmp-cover-border: 2.5px solid #00B8A9;
  --tmp-cover-shadow: 0 8px 20px rgba(0, 148, 136, 0.24);
  --tmp-play-bg: linear-gradient(145deg, #24DFCA 0%, #00A193 62%, #008075 100%);
  --tmp-play-border: 4px solid #F2FFFD;
  --tmp-play-shadow: 0 12px 26px rgba(0, 152, 140, 0.30), 0 0 0 1.5px rgba(100, 236, 220, 0.4);
  --tmp-slider-track: #00BFA9;
  --tmp-slider-thumb: #14DFC8;
  --tmp-slider-shadow: 0 2px 8px rgba(0, 180, 162, 0.6);
  --tmp-swatch-grad: linear-gradient(135deg, #1EE0CC 0%, #009B8E 100%);
  --tmp-swatch-accent: #00A89A;
  --tmp-speaker: #00A396;
  --tmp-awave-1: rgba(92, 236, 218, 0.20);
  --tmp-awave-2: rgba(24, 208, 190, 0.26);
  --tmp-awave-3: rgba(0, 172, 156, 0.36);
  --tmp-dwave-1: rgba(92, 236, 218, 0.24);
  --tmp-dwave-2: rgba(18, 202, 184, 0.44);
  --tmp-dwave-3: rgba(0, 166, 150, 0.66);
  --tmp-vframe-border: 2.5px solid #00CBB8;
  --tmp-vframe-shadow: 0 8px 22px rgba(0, 150, 138, 0.2);
  --tmp-vpill-bg: linear-gradient(180deg, rgba(6, 98, 92, 0.90) 0%, rgba(4, 66, 62, 0.94) 100%);
  --tmp-vpill-border: 1px solid rgba(110, 236, 220, 0.45);
  --tmp-vplay-bg: radial-gradient(circle at 35% 30%, rgba(36, 224, 204, 0.92), rgba(0, 150, 138, 0.92));
  --tmp-vplay-border: 2.5px solid rgba(176, 250, 240, 0.85);
  --tmp-vplay-shadow: 0 0 32px rgba(16, 212, 192, 0.6);
  --tmp-thumb-active-border: #00A89A;
  --tmp-thumb-active-shadow: 0 0 0 2.5px rgba(0, 168, 154, 0.4);
  --tmp-loc-bg: linear-gradient(90deg, #D6FCF6 0%, #F5FFFD 100%);
  --tmp-loc-border: 1.5px solid rgba(255, 255, 255, 0.92);
  --tmp-loc-pin-bg: rgba(0, 168, 154, 0.14);
  --tmp-loc-pin-border: 1px solid rgba(0, 168, 154, 0.34);
  --tmp-loc-text: #07363C;
}

.tmp-main-card,
.tmp-main-card * {
  box-sizing: border-box;
}

.tmp-main-card {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: var(--tmp-main-bg);
  border: var(--tmp-main-border);
  border-radius: 24px;
  padding: 12px 14px;
  box-shadow: var(--tmp-main-shadow);
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 768px) {
  .tmp-main-card {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    padding: 10px 12px;
    gap: 8px;
  }
}

.tmp-top-header,
.tmp-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.tmp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tmp-section-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--tmp-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmp-video-sub-title {
  margin: 1px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tmp-subtitle);
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmp-circle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tmp-badge-bg);
  border: var(--tmp-badge-border);
  box-shadow: var(--tmp-badge-shadow);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.tmp-headphones-top { width: 40px; height: 40px; }
.tmp-video-badge-icon { width: 34px; height: 34px; cursor: default; }
.tmp-doc-icon-badge { width: 52px; height: 52px; flex-shrink: 0; }

.tmp-wave-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 20px;
  flex-shrink: 0;
}

.tmp-wave-bars span {
  display: block;
  width: 2.5px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--tmp-wave-from) 0%, var(--tmp-wave-to) 100%);
}
.tmp-wave-bars span:nth-child(1) { height: 8px; }
.tmp-wave-bars span:nth-child(2) { height: 14px; }
.tmp-wave-bars span:nth-child(3) { height: 20px; }
.tmp-wave-bars span:nth-child(4) { height: 13px; }
.tmp-wave-bars span:nth-child(5) { height: 8px; }

.tmp-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--tmp-pill-bg);
  border: var(--tmp-pill-border);
  box-shadow: var(--tmp-pill-shadow);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.tmp-inner-card {
  position: relative;
  overflow: hidden;
  background: var(--tmp-inner-bg);
  border: var(--tmp-inner-border);
  border-radius: 20px;
  padding: 12px 14px;
  box-shadow: var(--tmp-inner-shadow);
}

.tmp-card-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.tmp-audio-waves { height: 56px; }
.tmp-doc-waves { height: 38px; }
.tmp-wave-layer-1 { fill: var(--tmp-awave-1); }
.tmp-wave-layer-2 { fill: var(--tmp-awave-2); }
.tmp-wave-layer-3 { fill: var(--tmp-awave-3); }
.tmp-doc-wave-1 { fill: var(--tmp-dwave-1); }
.tmp-doc-wave-2 { fill: var(--tmp-dwave-2); }
.tmp-doc-wave-3 { fill: var(--tmp-dwave-3); }

.tmp-audio-top,
.tmp-audio-controls,
.tmp-doc-content {
  position: relative;
  z-index: 2;
}

.tmp-audio-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.tmp-audio-cover-wrap {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  border: var(--tmp-cover-border);
  box-shadow: var(--tmp-cover-shadow);
  flex-shrink: 0;
}

.tmp-audio-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tmp-audio-meta {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.tmp-audio-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--tmp-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmp-audio-guide {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tmp-subtitle);
}

.tmp-audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tmp-audio-play-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tmp-play-bg);
  border: var(--tmp-play-border);
  box-shadow: var(--tmp-play-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.tmp-audio-timeline-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tmp-audio-times {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--tmp-time);
}

.tmp-slider-track {
  position: relative;
  height: 4.5px;
  border-radius: 999px;
  background: var(--tmp-slider-track);
  cursor: pointer;
}

.tmp-slider-thumb {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tmp-slider-thumb);
  box-shadow: var(--tmp-slider-shadow);
}

.tmp-volume-btn {
  background: none;
  border: none;
  padding: 2px;
  color: var(--tmp-speaker);
  cursor: pointer;
  flex-shrink: 0;
}

.tmp-hd-pill-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--tmp-pill-bg);
  border: var(--tmp-pill-border);
  box-shadow: var(--tmp-pill-shadow);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 11.5px;
}

.tmp-hd-box {
  background: var(--tmp-hd-bg);
  color: var(--tmp-hd-text);
  font-weight: 900;
  font-size: 9.5px;
  padding: 1.5px 4.5px;
  border-radius: 4px;
}

.tmp-video-header {
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

.tmp-video-viewport {
  position: relative;
  margin-top: 10px;
  border-radius: 16px;
  border: var(--tmp-vframe-border);
  box-shadow: var(--tmp-vframe-shadow);
  background: #070B14;
  overflow: hidden;
  aspect-ratio: 2.45 / 1;
  cursor: pointer;
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.3s ease;
}

.tmp-video-viewport:fullscreen,
.tmp-video-viewport:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}

.tmp-video-ambient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) brightness(0.42);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tmp-player-video-section.is-expanded-video .tmp-video-ambient-bg {
  opacity: 1;
}

.tmp-video-poster {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tmp-player-video-section.is-reel-mode .tmp-video-poster {
  object-fit: contain;
}

.tmp-video-element {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tmp-youtube-iframe {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tmp-player-video-section.is-youtube-active .tmp-video-bottom-bar {
  display: none;
}

.tmp-video-overlay-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--tmp-vpill-bg);
  border: var(--tmp-vpill-border);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 11px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.tmp-video-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tmp-vplay-bg);
  border: var(--tmp-vplay-border);
  box-shadow: var(--tmp-vplay-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

@keyframes tmp-spin-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.tmp-video-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.74);
  border: var(--tmp-vplay-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.44), var(--tmp-vplay-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.tmp-spinner-svg {
  width: 30px;
  height: 30px;
  animation: tmp-spin-rotate 0.78s linear infinite;
}

.tmp-spinner-track {
  stroke: rgba(255, 255, 255, 0.24);
}

.tmp-spinner-arc {
  stroke: #FFFFFF;
  stroke-linecap: round;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0;
}

.tmp-player-video-section.is-loading .tmp-video-spinner {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Auto-hide Play Button and Video Text/Header while Video is Playing or Loading */
.tmp-player-video-section.is-playing .tmp-video-header {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tmp-player-video-section.is-playing .tmp-video-viewport {
  margin-top: 0;
}

.tmp-player-video-section.is-playing .tmp-video-overlay-pill,
.tmp-player-video-section.is-loading .tmp-video-overlay-pill {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
}

.tmp-player-video-section.is-playing .tmp-video-center-play,
.tmp-player-video-section.is-loading .tmp-video-center-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.88);
}

.tmp-video-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 13px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  color: #FFFFFF;
}

.tmp-video-seek-wrap {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tmp-video-seek-track {
  position: relative;
  width: 100%;
  height: 4.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  transition: height 0.15s ease;
}

.tmp-video-seek-wrap:hover .tmp-video-seek-track,
.tmp-video-seek-wrap.is-scrubbing .tmp-video-seek-track {
  height: 6.5px;
}

.tmp-video-seek-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--tmp-swatch-grad, var(--tmp-pill-bg));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.32);
}

.tmp-video-seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 13.5px;
  height: 13.5px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--tmp-swatch-accent, #F43F8E);
  box-shadow: var(--tmp-slider-shadow, 0 2px 8px rgba(0,0,0,0.4));
  transition: transform 0.15s ease;
}

.tmp-video-seek-wrap:hover .tmp-video-seek-thumb,
.tmp-video-seek-wrap.is-scrubbing .tmp-video-seek-thumb {
  transform: translate(-50%, -50%) scale(1.16);
}

.tmp-video-seek-tooltip {
  position: absolute;
  bottom: 22px;
  left: 0%;
  transform: translateX(-50%);
  background: rgba(8, 12, 22, 0.88);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s ease;
  white-space: nowrap;
}

.tmp-video-seek-wrap.is-hovering .tmp-video-seek-tooltip,
.tmp-video-seek-wrap.is-scrubbing .tmp-video-seek-tooltip {
  opacity: 1;
  visibility: visible;
}

.tmp-video-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tmp-video-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tmp-video-mini-btn {
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.tmp-video-mini-btn:hover {
  transform: scale(1.1);
}

.tmp-video-skip-btn {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.tmp-video-skip-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.tmp-video-skip-btn:active {
  transform: scale(0.95);
}

.tmp-video-timer {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* Video Playlist Thumbnail Strip Below Video */
.tmp-video-playlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .tmp-video-playlist {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  .tmp-playlist-thumb {
    min-width: 112px;
  }
}

.tmp-playlist-thumb {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.78;
  transition: opacity 0.2s, transform 0.2s;
}

.tmp-playlist-thumb:hover,
.tmp-playlist-thumb.is-active {
  opacity: 1;
}

.tmp-thumb-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
}

.tmp-playlist-thumb.is-active .tmp-thumb-img-box {
  border-color: var(--tmp-thumb-active-border);
  box-shadow: var(--tmp-thumb-active-shadow);
}

.tmp-thumb-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tmp-thumb-duration {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  direction: ltr;
}

.tmp-thumb-caption {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tmp-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.tmp-doc-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tmp-doc-text {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.tmp-doc-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.38;
  color: var(--tmp-heading);
}

.tmp-doc-sub {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tmp-subtitle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmp-location-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tmp-loc-bg);
  border: var(--tmp-loc-border);
  direction: ltr;
}

.tmp-location-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tmp-loc-pin-bg);
  border: var(--tmp-loc-pin-border);
  color: var(--tmp-loc-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tmp-location-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--tmp-loc-text);
}