/* =========================================================
   COMPLIANCE INTAKE FORM — MOBILE FIRST
   ========================================================= */
#main-content { padding: 20px 16px; }
.stl-section { max-width: 760px; margin: 20px auto; }
.stl-form { display: flex; flex-direction: column; gap: 18px; width: 100%; padding: 20px 16px; border: 1px solid #ddd; border-radius: var(--border-radius); background-color: #ffffff; box-shadow: var(--box-shadow); box-sizing: border-box; }
/* messages */
.stl-errors,
.stl-success { max-width: 760px; margin: 0 auto 20px; padding: 16px; border-radius: var(--border-radius); box-sizing: border-box; }
.stl-errors { border: 1px solid #c62828; background: #fff5f5; color: #7f1d1d; }
.stl-success { border: 1px solid #2e7d32; background: #f3fbf4; color: #1b5e20; }
.stl-errors ul,
.stl-success p { margin: 0; }
.stl-errors ul { padding-left: 20px; }
/* rows */
.stl-form-row { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; }
/* labels */
.stl-label { font-weight: 700; color: var(--primary-color); font-family: var(--font); font-size: 0.95rem; line-height: 1.4; margin: 0;}
/* inputs */
.stl-input,
.stl-select,
.stl-textarea,
.stl-form input[type="file"] { width: 100%; min-width: 0; padding: 12px; border: 1px solid #ccc; border-radius: var(--cta-border-radius); background: #fff; color: var(--text-color); font-family: var(--font); font-size: 1rem; line-height: 1.4; box-sizing: border-box; }
.stl-textarea { resize: vertical; min-height: 120px; }
.stl-form input[type="file"] { padding: 10px; }
/* help text */
.stl-form small,
#existingRefHelp,
#projectFilesHelp { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--primary-color); }
/* fieldset reset */
.stl-form fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.stl-form legend { padding: 0; margin: 0 0 8px; }
/* site features/access block */
.stl-form-row fieldset,
fieldset.stl-form-row { display: flex; flex-direction: column; gap: 12px; }
fieldset.stl-form-row > div { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--border-radius); background-color: rgba(192, 156, 44, 0.25); }
fieldset.stl-form-row input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 24px; height: 24px; min-width: 24px; }
fieldset.stl-form-row label { margin: 0; line-height: 1.5; color: var(--primary-color); font-family: var(--font); }
/* quote section */
#quote_fields { display: block; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
#quote_fields .stl-form-row + .stl-form-row { margin-top: 16px; }
/* quote ack row */
#quote_fields .stl-form-row:last-child { display: flex; flex-direction: row; align-items: center; gap: 10px; }
#quote_fields .stl-form-row:last-child input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 24px; height: 24px; min-width: 24px; }
#quote_fields .stl-form-row:last-child label { margin: 0; line-height: 1.5; color: var(--primary-color); }
/* legal agreement checkboxes */
.checkbox-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.checkbox-option { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--border-radius); background-color: rgba(192, 156, 44, 0.25); }
.checkbox-option input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 24px; height: 24px; min-width: 24px; }
.checkbox-option-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.checkbox-option-text label { margin: 0; line-height: 1.5; }
.checkbox-option-text a { line-height: 1.4; }
/* if you later add a wrapper around label+link, this still helps */
.checkbox-option-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* captcha text */
.captcha-instructions { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--primary-color); }
.g-recaptcha { overflow-x: auto; }
/* button row */
.stl-form-row .styled-button,
.styled-button { display: block; width: 100%; max-width: 320px; margin: 8px auto 0; padding: 12px 20px; background-color: var(--secondary-color); color: var(--primary-color); border: none; border-radius: var(--cta-border-radius); font-weight: 600; font-size: 1.05rem; line-height: 1.4; text-align: center; text-decoration: none; font-family: var(--font); cursor: pointer; transition: var(--transition); box-sizing: border-box; }
.styled-button:hover,
.styled-button:focus { background-color: #c09c2c; color: var(--light-text); }
/* error summary generated by JS */
.error-summary { margin-bottom: 20px; padding: 16px; border: 1px solid #c62828; border-radius: var(--border-radius); background: #fff5f5; color: #7f1d1d; box-sizing: border-box; }
.error-summary h2 { margin: 0 0 10px; font-size: 1rem; line-height: 1.4; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: inherit; text-decoration: underline; }
.error-message { display: block; font-size: 0.875rem; line-height: 1.4; color: #b00020; margin-top: 4px; }
/* focus */
.stl-input:focus,
.stl-select:focus,
.stl-textarea:focus,
.stl-form input[type="file"]:focus,
.stl-form input[type="checkbox"]:focus,
.stl-form input[type="radio"]:focus,
.styled-button:focus { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
/* enhanced select styling */
.stl-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 46px; border-color: #ccc; background-color: #ffffff; color: #001430; background-image: linear-gradient(45deg, transparent 50%, #8a6f1f 50%), linear-gradient(135deg, #9f7f16 50%, transparent 50%), linear-gradient(to left, #f7f0d8, #f7f0d8); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%, 100% 0; background-size: 6px 6px, 6px 6px, 42px 100%; background-repeat: no-repeat; box-shadow: inset 4px 0 0 #8a6f1f; cursor: pointer; }
.stl-select:hover,
.stl-select:focus { border-color: #6f5818; background-color: #fffaf0; }
.stl-select:focus { box-shadow: inset 4px 0 0 #6f5818, 0 0 0 3px #eadca8; }
.stl-select:invalid { color: #555555; }
.stl-select::-ms-expand { display: none; }
/* keeps first placeholder option softer where required select uses value="" */
.stl-select:invalid { color: #666; }
/* remove ugly IE/Edge legacy arrow */
.stl-select::-ms-expand { display: none; }
/* file input base */
.stl-form input[type="file"] { width: 100%; font-family: var(--font); font-size: 0.95rem; color: var(--primary-color); cursor: pointer; }
/* the actual button */
.stl-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 14px; background-color: var(--primary-color); color: #ffffff; border: none; border-radius: 6px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
/* hover */
.stl-form input[type="file"]::file-selector-button:hover { background-color: #0a2342; }
/* focus (important for accessibility) */
.stl-form input[type="file"]:focus::file-selector-button { outline: 2px solid #c09c2c; outline-offset: 2px; }
/* active (small press effect) */
.stl-form input[type="file"]::file-selector-button:active { transform: translateY(1px); }
/* =========================================================
   TABLET UP
   ========================================================= */
@media (min-width: 768px) {
    #main-content { padding: 0 24px 56px; }
    .stl-section { margin: 60px auto 0; }
    .stl-form { padding: 28px 24px; gap: 20px; }
    .stl-errors,
    .stl-success { padding: 18px 20px; } }
/* =========================================================
   DESKTOP UP
   ========================================================= */
@media (min-width: 992px) {
    .stl-form { padding: 32px; } }