/* ==========================================================================
   University of SEO: shared form controls and popups (public site, lesson player, checkout)
   Loaded after uos-theme.css / uos-classic.css / uos-player.css.
   - uos-select (js/uos-select.js): themed listbox for every <select>
   - native fallbacks (color-scheme, opaque option lists)
   - checkboxes, radios, switches, file, date, range, textarea
   - Bootstrap dropdown / popover / tooltip, Select2, Plyr settings menu
   Every value comes from the theme tokens; fallbacks are the light theme for pages
   that do not load uos-theme.css (lesson player, checkout).
   ========================================================================== */
:root{
    --uss-bg:var(--uos-input,#ffffff);
    --uss-menu-bg:var(--uos-pop,#ffffff);
    --uss-ink:var(--uos-ink,#101828);
    --uss-text:var(--uos-text,#1d2433);
    --uss-muted:var(--uos-muted,#545d6e);
    --uss-subtle:var(--uos-subtle,#5f6878);
    --uss-line:var(--uos-line,rgba(17,18,20,.09));
    --uss-line-2:var(--uos-line-2,rgba(17,18,20,.18));
    --uss-input-line:var(--uos-input-border,#7b8494); /* control boundaries: at least 3:1 (WCAG 1.4.11) */
    --uss-hover-line:rgba(var(--uos-ink-rgb,17,18,20),.34);
    --uss-tint:var(--uos-primary-soft,#e9eeff);
    --uss-sel-text:var(--uos-accent-text,#2458ff);
    --uss-accent:var(--uos-accent,#2458ff);
    --uss-on-accent:var(--uos-on-accent,#ffffff);
    --uss-ring:var(--uos-ring,0 0 0 2px #8cb4ff);
    --uss-radius:var(--uos-radius,16px);           /* menus = card radius */
    --uss-radius-ctl:var(--uos-radius-sm,12px);     /* controls */
    --uss-radius-opt:10px;
    --uss-shadow:var(--uos-shadow-lg,0 1px 2px rgba(16,24,40,.04),0 6px 16px -6px rgba(16,24,40,.10));
    --uss-danger:var(--uos-danger,#b91c1c);
    --uss-font:var(--uos-font,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
    --uos-z-menu:1085;                              /* open menus sit above the sticky header (1020), modals (1055) and the cookie notice (1080) */
    --uss-dur:120ms;
}
/* native widgets that remain (date pickers, scrollbars, option popups) follow the theme */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
select,select option,select optgroup{background-color:var(--uss-menu-bg);color:var(--uss-ink)}

/* ---------------------------------------------------------------- uos-select: hidden original */
select.uss-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;min-width:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important;white-space:nowrap!important}
select.uss-native+.nice-select{display:none!important}

/* ---------------------------------------------------------------- uos-select: trigger */
.uss-trigger{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;max-width:100%;min-width:120px;min-height:var(--uss-h,46px);padding:6px 40px 6px 14px;margin:0;vertical-align:middle;
    background:var(--uss-bg);border:1px solid var(--uss-input-line);border-radius:var(--uss-r,var(--uss-radius-ctl));color:var(--uss-ink);
    font:500 var(--uss-fs,15px)/1.35 var(--uss-font);text-align:start;cursor:pointer;user-select:none;-webkit-user-select:none;
    box-shadow:inset 0 1px 0 var(--uos-hi-line,transparent);transition:border-color var(--uss-dur),box-shadow var(--uss-dur),background-color var(--uss-dur)}
.uss-trigger.uss-block{display:flex;width:100%}
.uss-trigger[hidden]{display:none!important}
.uss-trigger.uss-sm{--uss-h:36px;padding-top:4px;padding-bottom:4px;--uss-fs:14px}
.uss-trigger:hover{border-color:var(--uss-hover-line)}
.uss-trigger:focus{outline:0}
.uss-trigger.uss-open{border-color:var(--uss-accent);box-shadow:var(--uss-ring);outline:0}
.uss-trigger:focus-visible{border-color:var(--uss-accent);outline:2px solid var(--uss-accent);outline-offset:2px;box-shadow:none}
.uss-trigger.uss-disabled{opacity:.55;cursor:not-allowed}
.uss-trigger.uss-disabled:hover{border-color:var(--uss-input-line)}
.uss-trigger.uss-is-invalid{border-color:var(--uss-danger)}
.uss-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.uss-placeholder .uss-value{color:var(--uss-subtle)}
.uss-caret{position:absolute;top:50%;right:14px;width:16px;height:16px;margin-top:-8px;color:var(--uss-muted);pointer-events:none;transition:transform var(--uss-dur)}
.uss-caret svg,.uss-check svg{display:block;width:100%;height:100%}
.uss-open .uss-caret{transform:rotate(180deg)}
[dir="rtl"] .uss-trigger{padding:6px 14px 6px 40px}
[dir="rtl"] .uss-caret{right:auto;left:14px}
.uss-error{margin-top:6px;font-size:13px;line-height:1.4;color:var(--uss-danger);font-weight:500}
.uss-error[hidden]{display:none}

/* ---------------------------------------------------------------- uos-select: popup */
.uss-menu{position:fixed;z-index:var(--uos-z-menu);display:flex;flex-direction:column;box-sizing:border-box;min-width:180px;max-width:calc(100vw - 16px);padding:6px;
    background:var(--uss-menu-bg);border:1px solid var(--uss-line-2);border-radius:var(--uss-radius);box-shadow:var(--uss-shadow);
    color:var(--uss-text);font:500 15px/1.35 var(--uss-font);text-align:start;overflow:hidden;animation:uss-in var(--uss-dur) ease-out}
.uss-menu *{box-sizing:border-box}
@keyframes uss-in{from{opacity:0}to{opacity:1}}
.uss-search{flex:none;padding:0 0 6px;margin:0 0 4px;border-bottom:1px solid var(--uss-line)}
.uss-search-input{display:block;width:100%;height:38px;padding:0 12px;border:1px solid var(--uss-line-2);border-radius:var(--uss-radius-opt);background:var(--uss-bg);color:var(--uss-ink);font:500 14px/1 var(--uss-font);outline:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.uss-search-input::placeholder{color:var(--uss-subtle);opacity:1}
.uss-search-input:focus{border-color:var(--uss-accent);box-shadow:var(--uss-ring)}
.uss-search-input::-webkit-search-cancel-button{cursor:pointer}
.uss-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;outline:0;scrollbar-width:thin;scrollbar-color:var(--uss-line-2) transparent}
.uss-list::-webkit-scrollbar{width:8px}
.uss-list::-webkit-scrollbar-thumb{background:var(--uss-line-2);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.uss-opt{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px 8px 10px;margin:0 0 2px;border-radius:var(--uss-radius-opt);color:var(--uss-text);cursor:pointer;word-break:break-word}
.uss-opt:last-child{margin-bottom:0}
.uss-check{flex:none;width:16px;height:16px;color:var(--uss-sel-text);visibility:hidden}
.uss-opt-text{flex:1 1 auto;min-width:0}
.uss-dot{flex:none;width:8px;height:8px;border-radius:999px;background:var(--uss-muted)}
.uss-opt.uss-active{background:var(--uss-tint);color:var(--uss-ink)}
.uss-opt[aria-selected="true"]{color:var(--uss-sel-text);font-weight:600}
.uss-opt[aria-selected="true"] .uss-check{visibility:visible}
.uss-opt.uss-opt-ph{color:var(--uss-subtle)}
.uss-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed;background:transparent}
.uss-group+.uss-group,.uss-opt+.uss-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--uss-line)}
.uss-group-label{padding:6px 12px 4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--uss-subtle)}
.uss-empty{padding:10px 12px;color:var(--uss-muted);font-size:14px}
@media (pointer:coarse){
    .uss-opt{min-height:44px}
    .uss-search-input{height:44px;font-size:16px}  /* 16px stops iOS zooming on focus */
}
@media (prefers-reduced-motion:reduce){
    .uss-menu{animation:none}
    .uss-trigger,.uss-caret{transition:none}
}

/* contexts that used a compact select */
.uf-bottom .uss-trigger{--uss-h:36px;--uss-r:999px;min-width:140px;padding-top:2px;padding-bottom:2px;font-size:14px}
.courses-sorting .uss-trigger,.sorting .uss-trigger{min-width:190px}

/* ---------------------------------------------------------------- checkboxes, radios, switches, range */
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--uss-accent)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--uss-accent);outline-offset:2px}
.form-check-input{width:1.125em;height:1.125em;border:1px solid var(--uss-input-line);background-color:var(--uss-bg);cursor:pointer}
.form-check-input[type=checkbox]{border-radius:5px}
.form-check-input:hover{border-color:var(--uss-hover-line)}
.form-check-input:focus{border-color:var(--uss-accent);box-shadow:var(--uss-ring);outline:0}
.form-check-input:checked{background-color:var(--uss-accent);border-color:var(--uss-accent)}
/* the tick / dot is white on the Primary Blue fill */
.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e")}
.form-check-input:disabled{opacity:.5;cursor:not-allowed}
/* switches: the theme's checkbox tick must not replace the switch thumb */
.form-switch .form-check-input{width:2.25em;height:1.25em;border-radius:999px;background-color:var(--uss-line-2);border-color:transparent;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")!important}
.form-switch .form-check-input:checked{background-color:var(--uss-accent);border-color:var(--uss-accent);
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")!important}
input[type=range]{cursor:pointer}

/* ---------------------------------------------------------------- file, date, time, color, textarea */
input[type=file]{color:var(--uss-text);font-family:var(--uss-font)}
input[type=file]::file-selector-button{margin-inline-end:12px;padding:6px 14px;border:1px solid var(--uss-line-2);border-radius:999px;background:var(--uos-surface-strong,#ffffff);color:var(--uss-ink);font:600 14px/1.3 var(--uss-font);cursor:pointer;transition:border-color var(--uss-dur),background-color var(--uss-dur)}
input[type=file]::file-selector-button:hover{border-color:var(--uss-hover-line);background:var(--uss-tint)}
input[type=file]:focus-visible{outline:2px solid var(--uss-accent);outline-offset:2px}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{font-family:var(--uss-font);min-height:var(--uss-h,46px)}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75;border-radius:6px;padding:2px}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--uss-tint)}
input[type=color]{cursor:pointer;border-radius:var(--uss-radius-ctl)}
textarea{resize:vertical}

/* ---------------------------------------------------------------- Bootstrap dropdowns, popovers, tooltips */
.dropdown-menu{--bs-dropdown-bg:var(--uss-menu-bg);--bs-dropdown-border-color:var(--uss-line-2);--bs-dropdown-link-color:var(--uss-text);--bs-dropdown-link-hover-bg:var(--uss-tint);--bs-dropdown-link-hover-color:var(--uss-ink);--bs-dropdown-link-active-bg:var(--uss-tint);--bs-dropdown-link-active-color:var(--uss-sel-text);
    background:var(--uss-menu-bg);border:1px solid var(--uss-line-2);border-radius:var(--uss-radius);box-shadow:var(--uss-shadow);padding:6px;color:var(--uss-text);z-index:var(--uos-z-menu)}
.dropdown-menu .dropdown-item{border-radius:var(--uss-radius-opt);color:var(--uss-text);padding:8px 12px}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{background:var(--uss-tint);color:var(--uss-ink)}
.dropdown-menu .dropdown-item.active,.dropdown-menu .dropdown-item:active{background:var(--uss-tint);color:var(--uss-sel-text);font-weight:600}
.dropdown-menu .dropdown-divider{border-color:var(--uss-line)}
.dropdown-menu .dropdown-header{color:var(--uss-subtle);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dropdown-menu.show{animation:uss-in var(--uss-dur) ease-out}
/* a glass card is its own stacking layer: while its menu is open, lift the card above the sticky header and the cookie notice */
.uos-card:has(.dropdown-menu.show),.community-card:has(.dropdown-menu.show),.card:has(.dropdown-menu.show){position:relative;z-index:var(--uos-z-menu)}
.community-layout:has(.dropdown-menu.show){z-index:var(--uos-z-menu)}
.popover{--bs-popover-bg:var(--uss-menu-bg);--bs-popover-border-color:var(--uss-line-2);--bs-popover-header-bg:transparent;--bs-popover-header-color:var(--uss-ink);--bs-popover-body-color:var(--uss-text);--bs-popover-border-radius:12px;--bs-popover-inner-border-radius:11px;box-shadow:var(--uss-shadow);font-family:var(--uss-font)}
.popover-header{border-bottom:1px solid var(--uss-line)}
.tooltip{--bs-tooltip-bg:var(--uss-ink);--bs-tooltip-color:var(--uos-canvas,#ffffff);--bs-tooltip-border-radius:8px;--bs-tooltip-max-width:240px;font-family:var(--uss-font)}
.tooltip-inner{padding:6px 10px;font-size:13px;font-weight:500}
@media (prefers-reduced-motion:reduce){.dropdown-menu.show{animation:none}}

/* ---------------------------------------------------------------- Select2 (course compare page). select2.min.css loads in the page body, after this file, hence the html body prefix */
html body .select2-container--default .select2-selection--single,html body .select2-container--default .select2-selection--multiple{min-height:46px;background:var(--uss-bg);border:1px solid var(--uss-input-line);border-radius:var(--uss-radius-ctl);color:var(--uss-ink)}
html body .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:14px;padding-right:36px;color:var(--uss-ink)}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--uss-subtle)}
html body .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:10px}
html body .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--uss-muted) transparent transparent transparent}
html body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent var(--uss-muted) transparent}
html body .select2-container--default.select2-container--focus .select2-selection,html body .select2-container--default.select2-container--open .select2-selection{border-color:var(--uss-accent);box-shadow:var(--uss-ring)}
html body .select2-container--open{z-index:var(--uos-z-menu)}
html body .select2-dropdown{background:var(--uss-menu-bg);border:1px solid var(--uss-line-2)!important;border-radius:var(--uss-radius)!important;box-shadow:var(--uss-shadow);padding:6px;color:var(--uss-text);font-family:var(--uss-font);overflow:hidden}
html body .select2-container--open .select2-dropdown--below{margin-top:6px}
html body .select2-container--open .select2-dropdown--above{margin-top:-6px}
html body .select2-search--dropdown{padding:0 0 6px}
html body .select2-container--default .select2-search--dropdown .select2-search__field{height:38px;padding:0 12px;border:1px solid var(--uss-line-2);border-radius:var(--uss-radius-opt);background:var(--uss-bg);color:var(--uss-ink);outline:0}
html body .select2-container--default .select2-search--dropdown .select2-search__field:focus{border-color:var(--uss-accent);box-shadow:var(--uss-ring)}
html body .select2-container--default .select2-results>.select2-results__options{max-height:300px}
html body .select2-results__option{padding:8px 12px;border-radius:var(--uss-radius-opt);margin-bottom:2px}
html body .select2-container--default .select2-results__option--highlighted[aria-selected],html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--uss-tint);color:var(--uss-ink)}
html body .select2-container--default .select2-results__option[aria-selected=true],html body .select2-container--default .select2-results__option--selected{background:transparent;color:var(--uss-sel-text);font-weight:600}
html body .select2-container--default .select2-results__option[aria-disabled=true]{color:var(--uss-subtle)}
html body .select2-results__message{color:var(--uss-muted)}

/* ---------------------------------------------------------------- Plyr (lesson player, preview modal) */
html .plyr--video .plyr__control.plyr__tab-focus,html .plyr--video .plyr__control:hover,html .plyr--video .plyr__control[aria-expanded=true],
html .plyr--audio .plyr__control.plyr__tab-focus,html .plyr--audio .plyr__control:hover,html .plyr--audio .plyr__control[aria-expanded=true]{background:var(--uss-accent);color:var(--uss-on-accent)}
html .plyr__control--overlaid,html .plyr__control--overlaid:focus,html .plyr__control--overlaid:hover{background:var(--uss-accent);color:var(--uss-on-accent)}
html .plyr--full-ui input[type=range]{color:var(--uss-accent)}
html .plyr__menu__container{background:var(--uss-menu-bg);color:var(--uss-text);border:1px solid var(--uss-line-2);border-radius:14px;box-shadow:var(--uss-shadow);animation:uss-in var(--uss-dur) ease-out;font-family:var(--uss-font)}
html .plyr__menu__container::after{border-top-color:var(--uss-menu-bg)}
html .plyr__menu__container>div{transition:none}
html .plyr__menu__container [role=menu]{padding:6px}
html .plyr__menu__container .plyr__control{color:var(--uss-text);border-radius:var(--uss-radius-opt);padding:7px 12px}
html .plyr__menu__container .plyr__control:hover,html .plyr__menu__container .plyr__control.plyr__tab-focus{background:var(--uss-tint);color:var(--uss-ink)}
html .plyr__menu__container .plyr__control--back::before{background:var(--uss-line);box-shadow:none}
html .plyr__menu__container .plyr__control--forward::after{border-left-color:var(--uss-muted)}
html .plyr__menu__container .plyr__control--back::after{border-right-color:var(--uss-muted)}
html .plyr__menu__container .plyr__control[role=menuitemradio]::before{background:var(--uss-line-2);transition:none}
html .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before{background:var(--uss-accent)}
html .plyr__menu__container .plyr__control[role=menuitemradio]::after{background:var(--uss-on-accent);transition:opacity var(--uss-dur)}
html .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before{background:var(--uss-hover-line)}
html .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:hover::before{background:var(--uss-accent)}
html .plyr__menu__container .plyr__menu__value{color:var(--uss-muted)}
html .plyr__tooltip{background:var(--uss-menu-bg);color:var(--uss-ink);border-radius:8px;font-family:var(--uss-font);box-shadow:0 1px 3px rgba(16,24,40,.12)}
html .plyr__tooltip::before{border-top-color:var(--uss-menu-bg)}
@media (prefers-reduced-motion:reduce){html .plyr__menu__container{animation:none}}

/* ---------------------------------------------------------------- header menus (uos-theme header) */
/* open/close is a short fade only (no slide), and tall menus scroll inside the viewport */
.uh-drop,.uh-panel{transform:none;transition:opacity var(--uss-dur),visibility var(--uss-dur)}
.uh-drop{max-height:calc(100dvh - var(--uos-header-h,72px) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--uss-line-2) transparent}
/* the hover bridge lives on the nav item, so the scrolling menu does not clip it */
.uh-nav>li.uh-has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.uh-panel{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--uss-line-2) transparent}
/* while a header menu is open the header sits above the cookie notice (1080), like every other open menu */
.uh:has(.uh-pop.open),.uh:has(.uh-nav>li.open){z-index:var(--uos-z-menu)}
@media (prefers-reduced-motion:reduce){.uh-drop,.uh-panel{transition:none}}