/** DO NOT MODIFY THIS FILE. All code here are generated by MachForm Theme Editor **/

#main_body h1 a
{
background-image: url('https://buildyoursite.com/paymentupdate/machform/data/themes/images/img_50b3ecb2ceba7248232411b30afa1791-logo-5.png');
height: 57px;
}

html
{
background-color: #ffffff;
background-image: none;
}

#main_body h1
{
background-color: #ffffff;
background-image: none;
}

#form_container
{
background-color: #ffffff;
border-width: 0px;
box-shadow: none;
border-style: solid;
border-color: #ffffff;
}

#main_body form li.highlighted,#main_body .matrix tbody tr:hover td,#machform_review_table tr.alt
{
background-color: #FFF7C0;
}

#main_body form .guidelines
{
background-color: #F5F5F5;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}

#main_body form .guidelines small
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 80%;
color: #444444;
}

#main_body input.text,#main_body input.file,#main_body textarea.textarea,#main_body select.select,#main_body input.checkbox,#main_body input.radio
{
background-color: #FBFBFB;
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #666666;
}

#machform_review_table td.mf_review_value
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #444444;
}

#main_body .form_description h2,#main_body .form_success h2
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 160%;
color: #444444;
}

#main_body .form_description p,#main_body form ul.payment_list_items li
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span.ap_tp_text
{
color: #444444;
}

#main_body form li label.description,#main_body form li span.description,#main_body .matrix caption,#main_body .matrix td.first_col,#main_body form li.total_payment span,#machform_review_table td.mf_review_label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span label,#main_body label.choice,#main_body .matrix th,#main_body form li span.symbol,.mf_sigpad_clear,#main_body form li div label,#main_body form li div span.label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
color: #444444;
}

#main_body form .section_break h3,#main_body form .media h3,#machform_review_table td .mf_section_title
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 110%;
color: #444444;
}

#main_body form .section_break p,#main_body form .media p,#machform_review_table td .mf_section_content
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 85%;
color: #444444;
}

#main_body form li.section_break
{
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #CCCCCC;
}



/** Advanced CSS **/

/* Enhanced MachForm Modern Orange Brand Styling - Full Width */

/* Import Font Awesome for icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* CSS Variables for Brand Colors */
:root {
    --primary: #ee782e;
    --primary-dark: #d66820;
    --primary-light: #ff9950;
    --dark: #232323;
    --dark-lighter: #333333;
    --gray: #b7b7b7;
    --gray-light: #e0e0e0;
    --white: #ffffff;
    --danger: #f5222d;
    --success: #52c41a;
    --background: #f8f9fa;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --border-radius: 12px;
}

/* Remove all outer frame constraints and shadows */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    background: var(--white) !important;
    color: var(--dark) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

/* Remove all outer frame styling */
#main_body {
    background: transparent !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    min-height: 100vh !important;
}

/* Main form container - remove shadow, remove centering */
.appnitro {
    background: var(--white) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Header Section */
.form_description {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important;
    border: none !important;
    background: var(--white) !important;
    color: var(--dark) !important;
    border-radius: 0 !important;
}

.form_description h2 {
    color: var(--dark) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

.form_description p {
    color: var(--gray) !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* BuildYourSite Logo */
.form_description:before {
    content: '' !important;
    display: block !important;
    width: 300px !important;
    height: 80px !important;
    margin: 0 0 30px 0 !important;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDQwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yMCA3MFY1MEgyNFY3MEgyMFoiIGZpbGw9IiNlZTc4MmUiLz4KPHN2ZyB4PSI0MCIgeT0iMjAiPgo8dGV4dCB4PSIwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI4IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzIzMjMyMyI+QnVpbGRZb3VyU2l0ZTwvdGV4dD4KPHRleHQgeD0iMCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iI2VlNzgyZSI+UmVhY2ggTmV3IEhlaWdodHM8L3RleHQ+CjwvZz4KPC9zdmc+') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

/* Form Content Area */
#main_body form {
    padding: 0 !important;
    background: var(--white) !important;
}

/* Form List Items (Field Containers) */
#main_body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 24px !important;
}

#main_body li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Section Headers - Add visual separation */
.section_break {
    grid-column: 1 / -1 !important;
    color: var(--dark) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 32px 0 8px 0 !important;
    padding: 16px 24px !important;
    background: #f8f9fa !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 8px !important;
    position: relative !important;
}

.section_break:before {
    content: '\f007' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    color: var(--primary) !important;
}

/* Clean Labels without Icons */
#main_body label {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--dark-lighter) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Required Field Indicator */
.required {
    color: var(--danger) !important;
    margin-left: 4px !important;
}

/* Input Fields - Enhanced Styling */
#main_body input[type="text"],
#main_body input[type="email"],
#main_body input[type="tel"],
#main_body input[type="password"],
#main_body select,
#main_body textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid var(--gray-light) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background-color: var(--white) !important;
    color: var(--dark) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

#main_body input[type="text"]:focus,
#main_body input[type="email"]:focus,
#main_body input[type="tel"]:focus,
#main_body input[type="password"]:focus,
#main_body select:focus,
#main_body textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(238, 120, 46, 0.1) !important;
    transform: translateY(-1px) !important;
}

#main_body input[type="text"]:hover,
#main_body input[type="email"]:hover,
#main_body input[type="tel"]:hover,
#main_body input[type="password"]:hover,
#main_body select:hover,
#main_body textarea:hover {
    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow) !important;
}

/* FORCE ALL fields to single column - more aggressive approach */
#main_body ul {
    display: block !important;
    width: 100% !important;
}

#main_body li {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin-bottom: 24px !important;
    grid-column: unset !important;
}

/* Remove any floating or inline styles */
#main_body li * {
    float: none !important;
}

/* Special handling ONLY for expiration month and year to be side by side */
#main_body li[id*="exp_month"],
#main_body li[id*="expiration_month"],
#main_body li[class*="exp_month"],
#main_body li[class*="expiration_month"] {
    display: inline-block !important;
    width: calc(50% - 16px) !important;
    margin-right: 32px !important;
    margin-bottom: 24px !important;
    vertical-align: top !important;
    clear: none !important;
}

#main_body li[id*="exp_year"],
#main_body li[id*="expiration_year"],
#main_body li[class*="exp_year"],
#main_body li[class*="expiration_year"] {
    display: inline-block !important;
    width: calc(50% - 16px) !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    vertical-align: top !important;
    clear: none !important;
}

/* Override any MachForm default column layouts */
#main_body .left_half,
#main_body .right_half,
#main_body .third,
#main_body .two_third {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-right: 0 !important;
}

/* Force address fields to full width */
#main_body li.address .left_half,
#main_body li.address .right_half {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin-bottom: 16px !important;
}

/* Name fields side by side */
.name_first,
.name_last {
    width: 100% !important;
    display: block !important;
}

/* Phone number fields in a row */
.phone_1, .phone_2, .phone_3 {
    display: inline-block !important;
    width: calc(33.333% - 8px) !important;
    margin-right: 12px !important;
}

.phone_3 {
    margin-right: 0 !important;
}

/* Credit Card Section Enhancement */
.credit_card {
    background: #f8f9fa !important;
    padding: 24px !important;
    border-radius: var(--border-radius) !important;
    border: 2px solid var(--gray-light) !important;
    position: relative !important;
}

.credit_card:before {
    content: '\f09d' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: -12px !important;
    left: 24px !important;
    background: var(--white) !important;
    color: var(--primary) !important;
    padding: 0 12px !important;
    font-size: 18px !important;
}

/* Credit card fields layout */
.credit_card .element {
    margin-bottom: 16px !important;
}

.credit_card input[type="text"] {
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace !important;
    letter-spacing: 2px !important;
}

/* Billing Address Section */
.address {
    background: #f8f9fa !important;
    padding: 24px !important;
    border-radius: var(--border-radius) !important;
    border: 2px solid var(--gray-light) !important;
    position: relative !important;
}

.address:before {
    content: '\f3c5' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: -12px !important;
    left: 24px !important;
    background: var(--white) !important;
    color: var(--primary) !important;
    padding: 0 12px !important;
    font-size: 18px !important;
}

/* Address fields grid */
.address ul,
.address .element {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.address .addr_line1,
.address .addr_line2 {
    grid-column: 1 / -1 !important;
}

/* Select Dropdown Enhancement */
#main_body select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ee782e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 48px !important;
}

/* Textarea Enhancement */
#main_body textarea {
    min-height: 120px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

/* Submit Button - Enhanced */
#main_body input[type="submit"],
#main_body .button_text {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 32px 0 0 0 !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--white) !important;
    padding: 18px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

#main_body input[type="submit"]:hover,
#main_body .button_text:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(238, 120, 46, 0.2) !important;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
}

/* Error States */
.form_error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 4px rgba(245, 34, 45, 0.1) !important;
}

.error {
    color: var(--danger) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
}

/* Success States */
.form_success {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 4px rgba(82, 196, 26, 0.1) !important;
}

/* Guidelines/Help Text */
.guidelines {
    font-size: 12px !important;
    color: var(--gray) !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
    font-style: italic !important;
}

/* Progress Indicator */
.form_progress {
    background: var(--gray-light) !important;
    border-radius: 6px !important;
    height: 6px !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
}

.form_progress .bar {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    height: 100% !important;
    transition: width 0.3s ease !important;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    #main_body {
        padding: 10px !important;
    }
    
    .appnitro {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
    }
    
    .form_description {
        padding: 20px 0 30px 0 !important;
    }
    
    .form_description h2 {
        font-size: 24px !important;
    }
    
    .form_description:before {
        width: 250px !important;
        height: 65px !important;
    }
    
    #main_body form {
        padding: 0 !important;
    }
    
    #main_body ul {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* All fields full width on mobile */
    #main_body li[id*="exp_month"],
    #main_body li[id*="expiration_month"],
    #main_body li[id*="exp_year"],
    #main_body li[id*="expiration_year"] {
        grid-column: 1 / -1 !important;
    }
    
    .phone_1, .phone_2, .phone_3 {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
    
    #main_body li[id*="cvv"] input,
    #main_body li[id*="security"] input,
    #main_body li[id*="cvc"] input {
        width: 100% !important;
    }
    
    #main_body input[type="submit"],
    #main_body .button_text {
        max-width: 100% !important;
        padding: 18px 32px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .form_description {
        padding: 20px 15px !important;
    }
    
    .form_description h2 {
        font-size: 20px !important;
    }
    
    #main_body form {
        padding: 15px !important;
    }
    
    .credit_card,
    .address {
        padding: 16px !important;
    }
}

/* Remove any default MachForm constraints */
#main_body .form_description,
#main_body h2,
#main_body .appnitro {
    background-image: none !important;
}

/* Custom field icons */
input[name*="email"]:before {
    content: '\f0e0' !important;
    font-family: 'Font Awesome 6 Free' !important;
}

/* Accessibility improvements */
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Loading state for submit button */
#main_body input[type="submit"]:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}