/* =========================================================
   Websnoogie WHMCS Child Theme — ws-mods.css
   Responsive and layout overrides for twenty-one-mods
   ========================================================= */

/* Prevent horizontal overflow site-wide — body only, not html */
/* Setting overflow-x:hidden on BOTH html+body makes body a scroll container */
/* which clips vertical content on iOS Safari */
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Marquee — contain to viewport on all screen sizes */
/* Absolutely-positioned span with left:100% animation cannot inflate scrollWidth */
.marquee {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 32px !important;
    box-sizing: border-box !important;
}
.marquee span {
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    animation: ws-scroll 60s linear infinite !important;
}
@media (max-width: 768px) {
    .marquee { height: 30px !important; }
    .marquee span { animation-duration: 40s !important; font-size: 16px !important; }
    #header { margin-top: 0 !important; }
}
@keyframes ws-scroll {
    0%   { left: 100%; }
    100% { left: -200%; }
}

/* Prevent Safari auto-zoom: inputs < 16px cause Safari to zoom the entire page */
@media (max-width: 767px) {
    input, textarea, select {
        font-size: 16px !important;
    }
}