/* ========================================= 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 (#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) { /* Upar ke fields left-right me rahenge */ #userForm .rsform-block { display: flex !important; align-items: flex-start !important; /* Center ki jagah top se align kiya taaki saaf dikhe */ margin-bottom: 20px !important; } #userForm .rsform-block .formControlLabel { width: 30% !important; text-align: left !important; padding-right: 20px !important; padding-top: 12px !important; /* Text aur input box ek line me aayenge */ margin-bottom: 0 !important; font-weight: 600 !important; font-size: 14px !important; color: #444 !important; } #userForm .rsform-block .formControls { width: 70% !important; } } /* ========================================= 4. SLIM INPUT BOXES (Mota-pan hataya) ========================================= */ .rsform-block input[type="text"], .rsform-block input[type="email"], .rsform-block select { width: 100% !important; padding: 10px 14px !important; /* Padding kam karke patla kiya */ border: 1px solid #d1d5db !important; border-radius: 4px !important; /* Sharp corners */ font-size: 14px !important; background-color: #fcfcfc !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } .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 (Perfect Red Box) ========================================= */ /* In fields ko horizontal layout (Flex) se bahar nikala hai */ #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; /* Ye left-right layout ko tod kar full width banayega */ 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; }