/* ============================================================
13. ON THE STAGE WIDGET - Functional Fixes
============================================================ */
/*Override OnTheStage widget resetting root font-size*/
html.ots-html-font-size {
font-size: 20px !important;
}
@media screen and (max-width: 767px) {
html.ots-html-font-size {
font-size: 16px !important;
}
}
/*Fix OnTheStage widget scroll/viewport lock issue - EXCLUDE modal*/
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *).fixed.inset-0,
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *)[class*="page-wrapper"],
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *)[class*="widget-bg-image"],
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *)[class*="widget-bg-color"] {
position: relative !important;
inset: unset !important;
min-height: auto !important;
height: auto !important;
}
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *)[class*="max-h-screen"],
onthestage-widget :not(onthestage-page-modal):not(onthestage-page-modal *)[class*="overflow-hidden"] {
max-height: none !important;
overflow: visible !important;
}
onthestage-widget .page-wrapper:not(onthestage-page-modal .page-wrapper) {
position: relative !important;
overflow: visible !important;
}
onthestage-widget {
min-height: auto !important;
}
:root {
--onstage-widget-min-height: auto !important;
}
/*Page-level height fix only (no overflow or position)*/
html.ots-html-font-size,
html.ots-html-font-size body,
body:has(onthestage-widget) {
height: auto !important;
}
/*Modal - full-screen overlay with 30px top/bottom gaps*/
onthestage-page-modal {
position: fixed !important;
inset: 0 !important;
z-index: 10000000 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
}
onthestage-page-modal > div {
position: fixed !important;
inset: 30px 0 !important;
min-height: unset !important;
height: auto !important;
}
onthestage-page-modal #page-wrapper {
position: absolute !important;
inset: 0 !important;
min-height: unset !important;
height: 100% !important;
max-height: 100% !important;
}
onthestage-page-modal #main-component {
height: 100% !important;
max-height: 100% !important;
}
onthestage-page-modal #right-component {
height: 100% !important;
max-height: 100% !important;
overflow: auto !important;
}
