/* VGNW WooStreamers public pages. The markup carries the approved demo's inline styles; the theme's global
   demo rules (demo.css) provide .ico, .crumb, .go, .zoom, .box, .fld, .hbtn, .sr, the .g12 breakpoint and
   the .theme-dark colour mapping. This file adds only what inline styles cannot express. */

.omst [hidden] { display: none !important; }
.omst h1, .omst h2, .omst p { text-wrap: pretty; }
.omst :is(button, label) { -webkit-tap-highlight-color: transparent; }

/* Native radios and checkboxes stay in the form, visually replaced by the demo boxes. */
.omst label:has(> input.sr:focus-visible) { outline: 2px solid #111111; outline-offset: 2px; }
.omst label:has(> input[type="radio"].sr) { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.omst label:has(> input:disabled) { cursor: default; }
.omst input:disabled { cursor: default; }
.omst iframe { display: block; }

/* Embedded player sits above the facade. */
.omst [data-player] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* Requirement cards act as programme pickers. */
.omst [data-req] { transition: background .3s ease, color .3s ease; }
.omst [data-req]:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

/* FAQ accordion: the demo's rotate-on-open plus. */
.omst details > summary { list-style: none; cursor: pointer; }
.omst details > summary::-webkit-details-marker { display: none; }
.omst details[open] > summary > span { transform: rotate(45deg); }

/* Dark mode values the global demo mapping does not cover. */
.theme-dark .omst .lt [style*="1.5px #BDBDBA"],
.theme-dark .omst .lt [style*="rgb(189, 189, 186) 0px 0px 0px 1.5px inset"] { box-shadow: inset 0 0 0 1.5px #4A4A4E !important; }
.theme-dark .omst .lt [style*="background: #E6E6E3"],
.theme-dark .omst .lt [style*="background: rgb(230, 230, 227)"] { background-color: #2A2A2E !important; }
.theme-dark .omst .lt [style*="color: #8A8A8A"],
.theme-dark .omst .lt [style*="color: rgb(138, 138, 138)"] { color: #8E8E93 !important; }
.theme-dark .omst .lt [style*="0 0 0 4px #FFFFFF"],
.theme-dark .omst .lt [style*="rgb(255, 255, 255) 0px 0px 0px 4px"] { box-shadow: 0 0 0 4px #0B0B0C !important; }
.theme-dark .omst .lt [style*="background: #FDECEA"] { background-color: #3A1512 !important; color: #FFB4AB !important; }
.theme-dark .omst label:has(> input.sr:focus-visible),
.theme-dark .omst [data-req]:focus-visible { outline-color: #F2F2F2; }

/* The demo overflows at phone width (12 tracks with 48px gaps, intrinsic auto-fit grids); keep the page 390px
   wide without changing the layout: at the demo's single-column breakpoint the grids get one track. */
.omst [data-apply-form], .omst [data-apply-form] > fieldset { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
    .omst .g12 { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 760px) {
    .omst [data-player] [data-slot="bar"] { left: 14px !important; right: 14px !important; bottom: 12px !important; }
}

/* OAuth channel verification inside the approved application status. */
.omst .omst-connection p { margin: 0 0 10px; }
.omst .omst-connection form { margin: 0; }
.omst .omst-connection button { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border: 0; background: #111111; color: #FFFFFF; font-size: 14px; font-weight: 600; cursor: pointer; }
.theme-dark .omst .omst-connection button { background: #F2F2F2; color: #111111; }

/* Neutralise the theme's legacy element styles: headings inherit the section colour, fields take only the
   demo's inline styles (the plugin stylesheet can print before the theme's, hence "body"). */
body .omst :is(h1, h2, h3, h4) { color: inherit; font-family: inherit; }
body .omst :is(input, textarea, select) { min-height: 0; max-width: none; padding: 0; box-shadow: none; }
body .omst :is(input, textarea):not(.fld):focus { box-shadow: none; }
body .omst label { font-size: inherit; font-weight: inherit; }
