/* ========================================= 1. MAIN FORM CONTAINER (Clean & Sharp) ========================================= */ #userForm { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 35px; max-width: 800px; margin: 40px auto; font-family: Arial, Helvetica, sans-serif; color: #333; border: 1px solid #f0f0f0; } /* ========================================= 2. HEADING (Brand Color #CE623C) ========================================= */ .program-heading { color: #CE623C !important; text-align: center !important; font-size: 26px !important; font-weight: 700 !important; margin-bottom: 30px !important; padding-bottom: 0 !important; border-bottom: none !important; } /* ========================================= 3. STRICT HORIZONTAL LAYOUT (Left-Right Fix) ========================================= */ @media screen and (min-width: 768px) { /* Keep top fields aligned left-to-right */ #userForm .rsform-block { display: flex !important; align-items: flex-start !important; /* Top-aligned for a cleaner look */ margin-bottom: 20px !important; } #userForm .rsform-block .formControlLabel { width: 30% !important; text-align: left !important; padding-right: 20px !important; padding-top: 12px !important; /* Align text vertically with the input box */ margin-bottom: 0 !important; font-weight: 600 !important; font-size: 14px !important; color: #444 !important; } #userForm .rsform-block .formControls { width: 70% !important; } } /* Focus State: Orange border, white background, and ORANGE GLOW when typing */ .rsform-block input[type="text"]:focus, .rsform-block input[type="email"]:focus, .rsform-block select:focus { border-color: #CE623C !important; background-color: #ffffff !important; outline: none !important; /* Default blue ring ko hatane ke liye */ box-shadow: 0 0 0 3px rgba(206, 98, 60, 0.25) !important; /* Premium Orange Glow */ } /* Hover State: Orange border when mouse is over the input */ .rsform-block input[type="text"]:hover, .rsform-block input[type="email"]:hover, .rsform-block select:hover { border-color: #CE623C !important; } /* Focus State: Orange border and white background when typing */ .rsform-block input[type="text"]:focus, .rsform-block input[type="email"]:focus, .rsform-block select:focus { border-color: #CE623C !important; background-color: #ffffff !important; outline: none !important; } /* ========================================= 5. UNIFIED SECURE PAYMENT ZONE (Red Box) ========================================= */ /* Break out of the flex layout to make these full width */ #userForm .rsform-block.rsform-block-payment-plan, #userForm .rsform-block.rsform-block-promo-code, #userForm .rsform-block.rsform-block-total-amount, #userForm .rsform-block.rsform-block-choose-payment, #userForm .rsform-block.rsform-block-submit-payment { display: block !important; /* Forces full width, ignoring the 30/70 split */ background-color: #fffaf8 !important; border-left: 1px solid #f5dacc !important; border-right: 1px solid #f5dacc !important; padding-left: 25px !important; padding-right: 25px !important; border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Top Block: Payment Plan */ #userForm .rsform-block.rsform-block-payment-plan { border-top: 1px solid #f5dacc !important; border-radius: 12px 12px 0 0 !important; padding-top: 30px !important; padding-bottom: 10px !important; margin-top: 40px !important; } /* Promo Code */ #userForm .rsform-block.rsform-block-promo-code { padding-top: 10px !important; padding-bottom: 15px !important; } /* Total Amount Display */ #userForm .rsform-block.rsform-block-total-amount { border-top: 1px dashed #f5dacc !important; padding-top: 25px !important; padding-bottom: 15px !important; } #userForm .rsform-block.rsform-block-total-amount .formControlLabel { width: 100% !important; text-transform: uppercase !important; font-size: 13px !important; color: #666 !important; margin-bottom: 8px !important; } #userForm .rsform-block.rsform-block-total-amount .formControls { width: 100% !important; font-size: 26px !important; font-weight: 800 !important; color: #CE623C !important; } /* Choose Payment */ #userForm .rsform-block.rsform-block-choose-payment { padding-top: 10px !important; padding-bottom: 20px !important; } #userForm .rsform-block.rsform-block-choose-payment .formControlLabel { width: 100% !important; text-transform: uppercase !important; font-size: 13px !important; color: #666 !important; margin-bottom: 8px !important; } /* Submit Button Block */ #userForm .rsform-block.rsform-block-submit-payment { border-bottom: 1px solid #f5dacc !important; border-radius: 0 0 12px 12px !important; padding-top: 10px !important; padding-bottom: 30px !important; } /* ========================================= 6. PAY BUTTON (#CE623C) ========================================= */ .rsform-submit-button { width: 100% !important; background-color: #CE623C !important; color: #ffffff !important; border: none !important; padding: 14px !important; font-size: 16px !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 1px !important; border-radius: 6px !important; cursor: pointer !important; transition: background-color 0.3s ease !important; } .rsform-submit-button:hover { background-color: #b35230 !important; }