/* VectorIT video player (Nov 2026). Self-contained colours so it works on the website and inside the ERP demos. */
.vp { margin: 0; position: relative; }
.vp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vp-title { margin: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: inherit; }
.vp-ctrl { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vp-ctrl button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(15, 27, 51, .18); background: #fff; color: #0F1B33; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.vp-ctrl button:hover { border-color: #2E5BDB; }
.vp-ctrl button[aria-pressed="true"] { background: #2E5BDB; border-color: #2E5BDB; color: #fff; }
.vp-ctrl button[data-lang="ur"] { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size: 1rem; line-height: 1; padding-top: 4px; }
.vp-ctrl .vp-cc[aria-pressed="true"] { background: #0F1B33; border-color: #0F1B33; }
.vp-pick { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: rgba(15, 27, 51, .06); }
.vp-pick button { min-height: 34px; padding: 5px 16px; border: 0; border-radius: 999px; background: transparent; color: #0F1B33; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.vp-pick button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(15, 27, 51, .18); color: #2E5BDB; }
html[data-theme="dark"] .vp-pick { background: rgba(226, 234, 248, .08); }
html[data-theme="dark"] .vp-pick button { color: #EDF2FB; }
html[data-theme="dark"] .vp-pick button[aria-pressed="true"] { background: #121A2A; color: #7DA2FF; }
.vp-frame { position: relative; overflow: hidden; border-radius: 18px; background: #0B1220; box-shadow: 0 2px 6px rgba(15, 27, 51, .08), 0 24px 60px -24px rgba(15, 27, 51, .45); aspect-ratio: 16 / 9; }
.vp-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B1220; }
.vp video::cue { background: rgba(8, 14, 26, .78); color: #fff; font-size: 1.05em; line-height: 1.35; }
.vp.vp-ur video::cue { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size: 1.15em; line-height: 1.9; }
.vp-note { margin: 10px 0 0; font-size: .82rem; opacity: .75; }
html[data-theme="dark"] .vp-ctrl button { background: #121A2A; color: #EDF2FB; border-color: rgba(226, 234, 248, .2); }
html[data-theme="dark"] .vp-ctrl button[aria-pressed="true"] { background: #7DA2FF; border-color: #7DA2FF; color: #0A101C; }
@media (max-width: 560px) { .vp-ctrl button { min-height: 34px; padding: 5px 11px; font-size: .82rem; } }