@charset "utf-8";
@import url("https://use.typekit.net/jtc8est.css");

/* === RDO FORM: 100% WIDTH & TYPOGRAPHY OVERRIDE (form189) === */


/* --- 1. Aggressive 100% Width Reset & GLOBAL TYPOGRAPHY --- */
html.embed body#public,
html.embed body#public * {
    font-family: proxima-nova, sans-serif, Arial, Helvetica !important;
}

html.embed body#public {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.embed body#public #container,
html.embed body#public .wufoo,
html.embed body#public #form189 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* THE FIX: Overriding the 64% width restriction found in the console */
html.embed body#public .wufoo li {
    width: 100% !important;
    /* Forces all standard rows to 100% */
    margin: 0 !important;
    padding: 5px 20px !important;
    /* Adds professional gutters back inside the 100% width */
    box-sizing: border-box !important;
}

/* --- 2. Side-by-Side Layout (Restoring Columns within the 100% view) --- */
html.embed body#public #form189 li#fo189li2,
html.embed body#public #form189 li.leftHalf {
    width: 50% !important;
    /* Adjusted to 50% now that the parent is 100% */
    float: left !important;
    clear: left !important;
}

html.embed body#public #form189 li#fo189li5,
html.embed body#public #form189 li.rightHalf {
    width: 50% !important;
    float: right !important;
    clear: none !important;
}

/* Ensure subsequent fields start on a new line */
html.embed body#public #form189 li#fo189li6,
html.embed body#public #form189 li.section,
html.embed body#public #form189 li:not(.leftHalf):not(.rightHalf) {
    clear: both !important;
}

/* --- Side-by-Side: Email (li43) + Phone Number (li44) --- */
html.embed body#public #form189 li#fo189li43 {
    width: 50% !important;
    float: left !important;
    clear: both !important;
}

html.embed body#public #form189 li#fo189li44 {
    width: 50% !important;
    float: right !important;
    clear: none !important;
}

/* Expand phone sub-inputs to fill the wider column */
html.embed body#public #form189 li#fo189li44 span {
    display: inline-block !important;
}

html.embed body#public #form189 li#fo189li44 input.text {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- FIX: Keep Required Star In-Line for Name Field --- */

/* Force the label container to use flexbox to prevent wrapping */
html.embed body#public #form189 li#fo189li2 label.desc {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    /* Space between text and star */
    white-space: nowrap !important;
}

/* Ensure the red star itself doesn't have extra margins pushing it down */
html.embed body#public #form189 li#fo189li2 label span.req {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* --- INTERNAL NAME FIELD FIX (First/Last Expansion) --- */

html.embed body#public #form189 li#fo189li2 span {
    /* display: inline-block !important; -- Removed, redundant with float */
    float: left !important;
    /* Forces side-by-side inside the 50% column */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 2. Set the First Name span to 40% width with a small gap */
html.embed body#public #form189 li#fo189li2 span:first-of-type {
    width: 42% !important;
    margin-right: 4% !important;
}

/* 3. Set the Last Name span to 54% width to fill the remainder */
html.embed body#public #form189 li#fo189li2 span:last-of-type {
    width: 54% !important;
}

/* 4. Force the internal input boxes to 100% of these new flexible spans */
html.embed body#public #form189 li#fo189li2 input.text {
    width: 100% !important;
    min-width: 100% !important;
    /* Overrides Wufoo's default inline 'size' attribute */
    box-sizing: border-box !important;
}

/* --- SIDE-BY-SIDE PROJECT DATES --- */
/* --- SIDE-BY-SIDE PROJECT DATES (Styled as Cards) --- */
/* Target Project Anticipated Start Date */
html.embed body#public #form189 li#fo189li16 {
    width: 48% !important;
    float: left !important;
    clear: left !important;
    background: #f8f9fa !important;
    padding: 20px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    margin-top: 30px !important;
    /* Added spacing */
}

/* Target Project Anticipated End Date */
html.embed body#public #form189 li#fo189li17 {
    width: 48% !important;
    float: right !important;
    clear: none !important;
    background: #f8f9fa !important;
    padding: 20px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    margin-top: 30px !important;
    /* Added spacing */
}

/* Ensure following fields clear the float */
html.embed body#public #form189 li#fo189li16::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Centered Footer Elements --- */
html.embed body#public .recaptcha-text {
    text-align: center !important;
    margin: 20px auto 0 !important;
    display: block !important;
    color: #95a5a6 !important;
    font-size: 0.85rem !important;
    width: 100% !important;
}

html.embed body#public .recaptcha-text a {
    display: inline !important;
    color: #95a5a6 !important;
    text-decoration: underline !important;
    margin: 0 !important;
}

/* --- 3. Typography: Title (Bold), Subtitle, and Labels --- */

/* Specific Font Overrides for User Requested Elements */
html.embed body#public #form189 li.section h3,
/* Applicant Information Title */
html.embed body#public #form189 li div,
/* Descriptions */
html.embed body#public #form189 li .instruct,
/* Helper Text */
html.embed body#public #form189 label.desc,
/* Field Labels */
html.embed body#public #form189 input,
/* Input Text */
html.embed body#public #form189 textarea,
html.embed body#public #form189 select,
html.embed body#public .recaptcha-text,
/* reCAPTCHA Text */
html.embed body#public .recaptcha-text a,
html.embed body#public #container .info h2,
html.embed body#public #container .info div {
    font-family: proxima-nova, sans-serif !important;
}

html.embed body#public #container .info h2 {
    font-weight: 700 !important;
    /* Bold */
    font-size: 2.2rem !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

html.embed body#public #container .info div {
    font-size: 1.1rem !important;
    color: #646f7c !important;
    /* BCCSA Brand Grey */
}


html.embed body#public #form189 label.desc {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* --- 3. Web Awesome Field Styling (Blue) --- */
html.embed body#public #form189 li input[type="text"],
html.embed body#public #form189 li input[type="email"],
html.embed body#public #form189 li input[type="tel"],
html.embed body#public #form189 li textarea.textarea,
html.embed body#public #form189 li select.select {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    --wa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-shadow: var(--wa-shadow) !important;
    transition: all 0.2s ease-in-out !important;
}

/* --- 6. Branded Headers & Progress Bar --- */
html.embed body#public #form189 li.section h3 {
    color: #2c3e50 !important;
    /* Dark Slate for Professional Look */
    border-bottom: 2px solid #d43f4d !important;
    /* BCCSA Brand Red Underline */
    padding-bottom: 10px !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* Enhanced Label Styling */
html.embed body#public #form189 label.desc {
    font-family: proxima-nova, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #34495e !important;
    /* Slightly darker for contrast */
    margin-bottom: 8px !important;
    display: block !important;
}

/* --- 4. Enhanced Instruction/Helper Text Visibility --- */
/* Force instructions to show below the field (default Wufoo hides them in 'embed' mode) */
html.embed body#public #form189 li .instruct {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    /* Remove any absolute positioning */
    width: 100% !important;
    clear: both !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    background: #f1f5f9 !important;
    /* Subtle light grey/blue background */
    border-left: 3px solid #0078d4 !important;
    /* Brand Blue accent */
    border-radius: 4px !important;
    font-size: 0.9rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    font-style: normal !important;
    box-sizing: border-box !important;
}

/* Specific targeting for span and p tags used by Wufoo */
html.embed body#public #form189 li span.instruct,
html.embed body#public #form189 li p.instruct {
    display: block !important;
}

/* --- 5. Enhanced Input Focus State (Glow Effect) & Field Highlight --- */
/* Remove default yellow background on focus/hover */
html.embed body#public #form189 li.focused,
html.embed body#public #form189 li:hover {
    background-color: rgba(0, 120, 212, 0.03) !important;
    /* Subtle Brand Blue Tint */
    transition: background-color 0.3s ease !important;
}

html.embed body#public #form189 li input:focus,
html.embed body#public #form189 li textarea:focus,
html.embed body#public #form189 li select:focus {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    /* Subtle lift on focus */
    background-color: #fff !important;
    /* Ensure input remains white */
}

/* Date Field Styling - Grouped Look */
html.embed body#public #form189 li.date>span {
    display: inline-block !important;
    margin-right: 5px !important;
    position: relative !important;
}

html.embed body#public #form189 li.date input.text {
    text-align: center !important;
    padding: 10px 5px !important;
}

/* Hide default slash separators if possible or style them */
html.embed body#public #form189 li.date .symbol {
    display: none !important;
    /* Hide the / separator for cleaner look */
}

/* Add custom separator using pseudo-element on spans (optional, or just use spacing) */
/*
html.embed body#public #form189 li.date > span:not(:last-child)::after {
    content: "/" !important;
    position: absolute !important;
    right: -10px !important;
    top: 12px !important;
    color: #ccc !important;
    font-weight: 300 !important;
} 
*/


/* Break the table layout completely to allow natural wrapping */
/* Break the table layout completely to allow natural wrapping */
html.embed body#public .pgStyle1,
html.embed body#public .pgStyle1 tbody,
html.embed body#public .pgStyle1 tr {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    /* Significantly reduced spacing */
    padding-bottom: 0 !important;
}

/* --- 7. Pill Buttons (Enhanced) --- */
/* --- CENTER-ALIGNED PLATFORM BUTTONS --- */
html.embed body#public #form189 .buttons {
    text-align: center !important;
    padding-top: 30px !important;
    margin-bottom: 20px !important;
}

html.embed body#public #form189 .buttons div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    /* Reduced space */
}

/* Swap Next and Previous Buttons if possible */
html.embed body#public #form189 .buttons input {
    order: 2 !important;
}

/* Next Button on Right */
html.embed body#public #form189 .buttons a {
    order: 1 !important;
    margin-right: 0 !important;
}

/* Previous Link on Left */


html.embed body#public #form189 .buttons .btTxt {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    /* Rounded Rectangle (Premium, Non-pill) */
    padding: 16px 48px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 120, 212, 0.4) !important;
    float: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    letter-spacing: 1px !important;
}

html.embed body#public #form189 .buttons .btTxt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 120, 212, 0.6) !important;
    background: linear-gradient(135deg, #0086f0 0%, #006cc1 100%) !important;
}

html.embed body#public #form189 .buttons .btTxt:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.4) !important;
}

/* --- 8. Progress Bar Refinement --- */
/* Hide the default table borders and background */
html.embed body#public .pgStyle1 {
    background: transparent !important;
    border: none !important;
    margin: 10px auto !important;
    /* Balanced margins to center vertically */
}

html.embed body#public .pgStyle1 td {
    border: none !important;
    vertical-align: middle !important;
}

/* Style the circle numbers */
html.embed body#public .pgStyle1 td var {
    background: #e0e0e0 !important;
    /* Inactive Grey */
    color: #fff !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    font-size: 14px !important;
    box-shadow: none !important;
    border: none !important;
}

/* Active Step Circle */
html.embed body#public .pgStyle1 td.selected var {
    background: #d43f4d !important;
    /* BCCSA Red */
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(212, 63, 77, 0.4) !important;
}

/* Step Labels */
html.embed body#public .pgStyle1 td b {
    font-family: proxima-nova, sans-serif !important;
    font-size: 0.9rem !important;
    color: #95a5a6 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

html.embed body#public .pgStyle1 td.selected b {
    color: #2c3e50 !important;
    /* Dark Text for Active */
    font-weight: 800 !important;
}

/* --- 9. Address Field Layout Fixes --- */
/* Ensure City/State/Zip flow correctly */
html.embed body#public #form189 li.complex div span.full {
    width: 100% !important;
    margin-bottom: 10px !important;
}

html.embed body#public #form189 li.complex div span.left,
html.embed body#public #form189 li.complex div span.right {
    width: 48% !important;
    /* Close to 50% but safe */
    margin-bottom: 10px !important;
    display: inline-block !important;
}

html.embed body#public #form189 li.complex div span.left {
    float: left !important;
    margin-right: 2% !important;
}

html.embed body#public #form189 li.complex div span.right {
    float: right !important;
}


/* --- 11. Custom File Upload Button --- */
html.embed body#public input[type="file"]::file-selector-button {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: proxima-nova, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-right: 15px !important;
    transition: all 0.2s ease !important;
}

html.embed body#public input[type="file"]::file-selector-button:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* For WebKit browsers to ensure compatibility */
html.embed body#public input[type="file"]::-webkit-file-upload-button {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: proxima-nova, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-right: 15px !important;
    transition: all 0.2s ease !important;
}

html.embed body#public input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* --- 10. Mobile Responsiveness --- */
@media only screen and (max-width: 640px) {

    /* Stack Columns */
    html.embed body#public #form189 li#fo189li2,
    html.embed body#public #form189 li.leftHalf,
    html.embed body#public #form189 li#fo189li5,
    html.embed body#public #form189 li.rightHalf,
    html.embed body#public #form189 li#fo189li16,
    html.embed body#public #form189 li#fo189li17,
    html.embed body#public #form189 li#fo189li43,
    html.embed body#public #form189 li#fo189li44 {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Stack Address Fields */
    html.embed body#public #form189 li.complex div span.left,
    html.embed body#public #form189 li.complex div span.right {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* Stack Name Fields (optional, but safer for small screens) */
    html.embed body#public #form189 li#fo189li2 span:first-of-type,
    html.embed body#public #form189 li#fo189li2 span:last-of-type {
        width: 100% !important;
        margin-right: 0 !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* Adjust padding for small screens */
    html.embed body#public .wufoo li {
        padding: 5px 10px !important;
    }

    /* Ensure container doesn't overflow */
    html.embed body#public #container,
    html.embed body#public #form189 {
        width: 100% !important;
        min-width: 0 !important;
        /* Allow shrinking */
    }

    /* Fix Title Size on Mobile */
    html.embed body#public #container .info h2 {
        font-size: 1.8rem !important;
    }

    /* Buttons Full Width */
    html.embed body#public #form189 .buttons {
        margin-top: 30px !important;
        padding-top: 40px !important;
    }

    html.embed body#public #form189 .buttons .btTxt {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        border-radius: 4px !important;
        /* Sharp Rounded Rectangle (Professional) */
        background: linear-gradient(to bottom, #0078d4, #005a9e) !important;
        /* Subtle depth */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    }

    /* General Body Padding to prevent cutoff */
    html.embed body#public {
        padding-bottom: 50px !important;
        /* Extra bottom space for scrolling */
    }

    /* --- Progress Bar Wrapping Fixed --- */
    /* Break the table layout completely to allow natural wrapping */
    html.embed body#public .pgStyle1,
    html.embed body#public .pgStyle1 tbody,
    html.embed body#public .pgStyle1 tr {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    html.embed body#public .pgStyle1 td {
        display: inline-flex !important;
        /* Flex keeps number and text together */
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 5px 8px 10px 8px !important;
        /* Balanced spacing */
        white-space: nowrap !important;
        /* Prevent text split */
        vertical-align: middle !important;
    }

    /* Hide empty cells on mobile if causing issues */
    html.embed body#public .pgStyle1 td:empty {
        display: none !important;
    }
}


/* --- New Supporting Organization Dropdown Styling --- */
/* Ensure the new field clears the floats above it and takes full width */
html.embed body#public #form189 li[data-field-type="select"] {
    clear: both !important;
    width: 100% !important;
    padding: 10px 20px !important;
}

/* Force the dropdown to match the Web Awesome input style */
html.embed body#public #form189 li select.select {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-family: proxima-nova, sans-serif !important;
}

/* ============================================
   CONFIRMATION PAGE FALLBACK STYLES
   ============================================ */

@keyframes rdo-confirmFade {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wufoo wraps confirmation text in .confirm */
html.embed body#public .confirm {
    text-align: center !important;
    padding: 60px 30px 40px !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    animation: rdo-confirmFade .6s ease-out both !important;
    font-family: proxima-nova, sans-serif !important;
    line-height: 1.7 !important;
    color: #4a5568 !important;
    font-size: 1.05rem !important;
}

/* Checkmark pseudo-element */
html.embed body#public .confirm::before {
    content: "\2713" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: #fff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 auto 28px !important;
    box-shadow: 0 6px 20px rgba(39, 174, 96, .25) !important;
}

html.embed body#public .confirm strong,
html.embed body#public .confirm b {
    display: block !important;
    font-size: 1.2rem !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    margin: 22px 0 8px !important;
}

/* First bold line (Thank you) = larger title */
html.embed body#public .confirm strong:first-of-type,
html.embed body#public .confirm b:first-of-type {
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    letter-spacing: -.2px !important;
}

html.embed body#public .confirm p {
    margin-bottom: 14px !important;
}

/* --- Confirmation Mobile --- */
@media only screen and (max-width: 640px) {
    html.embed body#public .confirm {
        padding: 40px 20px 30px !important;
        font-size: .97rem !important;
    }

    html.embed body#public .confirm::before {
        width: 60px !important;
        height: 60px !important;
        font-size: 30px !important;
        margin-bottom: 22px !important;
    }

    html.embed body#public .confirm strong:first-of-type,
    html.embed body#public .confirm b:first-of-type {
        font-size: 1.25rem !important;
    }
}

/* --- SURGICAL LABEL OVERRIDES: PROVINCE & POSTAL CODE (Final Alignment) --- */

/* 1. Reset the original labels to hide text but keep the container active */
html.embed body#public #form189 li#fo189li6 .state label,
html.embed body#public #form189 li#fo189li6 .zip label {
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    /* Use flex to control vertical position */
    flex-direction: column !important;
    margin-top: 6px !important;
    /* Adjust this to match 'City' label position */
    height: 18px !important;
    /* Forces consistent height */
}

/* 2. Inject "Province / Territory" using relative positioning */
html.embed body#public #form189 li#fo189li6 .state label::before {
    content: "Province / Territory" !important;
    font-size: 11px !important;
    color: #333 !important;
    font-family: proxima-nova, sans-serif !important;
    visibility: visible !important;
    display: block !important;
}

/* 3. Inject "Postal Code" */
html.embed body#public #form189 li#fo189li6 .zip label::before {
    content: "Postal Code" !important;
    font-size: 11px !important;
    color: #333 !important;
    font-family: proxima-nova, sans-serif !important;
    visibility: visible !important;
    display: block !important;
}

/* Hide the Country selection container */
html.embed body#public #form189 li#fo189li6 .country {
    display: none !important;
}

/* --- RESPONSIVE ADDRESS FIELDS (City / Province / Postal) --- */

/* 1. Desktop View: Clean 3-column row */
@media only screen and (min-width: 600px) {

    html.embed body#public #form189 li#fo189li6 .city,
    html.embed body#public #form189 li#fo189li6 .state,
    html.embed body#public #form189 li#fo189li6 .zip {
        width: 32% !important;
        float: left !important;
        margin-right: 1.3% !important;
        clear: none !important;
    }

    /* Remove margin from the last item in the row */
    html.embed body#public #form189 li#fo189li6 .zip {
        margin-right: 0 !important;
    }
}

/* 2. Mobile View: Stacked 100% width fields */
@media only screen and (max-width: 599px) {

    html.embed body#public #form189 li#fo189li6 .city,
    html.embed body#public #form189 li#fo189li6 .state,
    html.embed body#public #form189 li#fo189li6 .zip {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 25px !important;
        /* Increased to separate the sections */
        clear: both !important;
    }

    /* Increase padding/margin for the injected labels on mobile */
    html.embed body#public #form189 li#fo189li6 .state label,
    html.embed body#public #form189 li#fo189li6 .zip label {
        margin-top: 12px !important;
        /* Pushes the label down away from the field above it */
        height: 22px !important;
        /* Provides more vertical "hit area" */
    }
}

/* --- FIX: Collapse Ghost Space from Hidden Instructions --- */

/* 1. Target the instruction container and collapse it by default */
html.embed body#public #form189 li p.instruct {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Only show the container if it's currently focused (standard Wufoo behavior) 
      or if you decide to have instructions visible */
html.embed body#public #form189 li.focused p.instruct {
    display: block !important;
    margin-top: 5px !important;
    font-size: 0.9rem !important;
    color: #646f7c !important;
}

/* 3. Normalize the bottom margin of all list items for a consistent grid */
html.embed body#public #form189 .wufoo li {
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}