/* ============================================================================ TSC Register Mobile - v1.0 - October 2026 Makes the legacy registration / login / shipping / payment steps fit a phone. ---------------------------------------------------------------------------- LOAD ORDER: after style.css / affiliate.css, after tsc-chrome.css. Desktop (over 900px) is untouched. Everything here sits inside media queries and only re-flows the existing legacy ids/classes, so no markup changes. What was overflowing (legacy fixed widths, content-box sizing): #right_panel 560-660px #registration_container 500px #left_panel 200px float .contact_field 250px + padding + border .row .form_entry 350px .row #forgot 350px .security_entry 300px .price_row 250px floated labels inside right-aligned rows ========================================================================= */ @media (max-width:900px){ /* ---- page frame ------------------------------------------------------- */ #content_container, #content_container #aff_content, #content_container #content{ width:auto;max-width:100%;min-width:0; margin:0;float:none;overflow:visible;box-sizing:border-box} #content_container{padding:0 16px 32px} /* the affiliate record sets padding-top:60px inline */ #content_container #aff_content{padding-top:24px!important} #content_container #left_panel, #content_container #right_panel, #content_container #wide_panel{ float:none;clear:both;width:auto;max-width:100%; margin:0;padding:0;border:0;box-sizing:border-box} /* ---- left panel: title, then the four steps in one row ----------------- */ #content_container #left_panel{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px; padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #E3E6E9} #content_container #left_panel > *{grid-column:1 / -1} #content_container #left_panel > br{display:none} #content_container #left_panel > .reg_bread, #content_container #left_panel > #reg_bread{grid-column:auto;margin:0;padding:3px; font-size:10px;letter-spacing:0;color:#5A626B;overflow-wrap:normal;word-break:normal} #content_container #left_panel .bread_container, #content_container #left_panel #bread_container{padding:6px 0;white-space:nowrap;overflow:hidden;text-overflow:clip} /* current step: the legacy bar is white text on no background */ #content_container #left_panel > #reg_bread{background:#343E4A;color:#FFFFFF;border-color:#343E4A} #content_container #left_panel h1{font-size:26px;margin:0 0 4px} #content_container #left_panel p{margin:0 0 10px} #content_container #welcome h2{font-size:20px;line-height:1.25} /* ---- form rows: label on top, field full width ------------------------ */ #content_container #registration_container{width:auto;max-width:100%;margin:0} #content_container #registration_container .row, #content_container #registration_container .row_err{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; text-align:left;padding:12px;font-size:15px;box-sizing:border-box} #content_container #registration_container label{ float:none;display:block;flex:0 0 100%;padding:0;font-size:15px;line-height:1.3} #content_container #registration_container .contact_field, #content_container .form_entry .contact_field{ flex:1 1 100%;width:100%;max-width:100%;height:auto;min-height:44px; padding:10px 12px;font-size:16px; /* 16px stops iOS zooming on focus */ box-sizing:border-box;border-radius:6px} /* selects: one per row stretches, three (DOB, citation, due date) share it */ #content_container #registration_container select{ flex:1 1 0;min-width:0;max-width:100%;min-height:44px; padding:8px;font-size:16px;box-sizing:border-box} #content_container #registration_container .row select:only-of-type{flex-basis:100%} /* gender radios: bigger tap targets */ #content_container #registration_container input[type="radio"]{ width:22px;height:22px;margin:0 4px 0 0;flex:none} /* "Other (please specify)" box under How Did You Hear */ #content_container #registration_container #refer{flex:0 0 100%;box-sizing:border-box} #content_container #registration_container #refer input{ width:100%;min-height:44px;font-size:16px;box-sizing:border-box} #content_container #registration_container .price_row{width:auto;max-width:100%;box-sizing:border-box} /* ---- Next / submit: full-width, the yellow button from the header ----- */ #content_container #registration_container input[type="submit"]{ display:block;width:100%;min-height:52px;margin:16px 0 0; background:#FFC629;color:#1F242A;border:0;border-radius:10px; box-shadow:0 3px 0 #C79609; font:800 17px/1 "Overpass","Public Sans",Arial,sans-serif;cursor:pointer; -webkit-appearance:none;appearance:none} #content_container #registration_container input[type="submit"]:active{ transform:translateY(3px);box-shadow:none} /* ---- other steps in the same flow ------------------------------------- */ #content_container .row .form_entry, #content_container .row #forgot, #content_container .security_entry{width:auto;max-width:100%;box-sizing:border-box} #content_container .form_entry input{max-width:100%} #content_container .shipping_option, #content_container .shipping_option_existing{box-sizing:border-box;max-width:100%} #content_container .shipping_option_existing{font-size:16px} #content_container #receipt{width:auto} #content_container #receipt_container{padding:10px 0} #content_container #right_panel h3{padding-top:20px} } @media (max-width:380px){ /* three date selects get tight below 380px: month takes its own line */ #content_container #registration_container select[name$="Month"]{flex-basis:100%} } /* =================== LOGIN + SECURITY QUESTIONS (login.php) =================== login.php prints its own