.elementor-22912 .elementor-element.elementor-element-d7f6589{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-22912 .elementor-element.elementor-element-f4c10c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-22912 .elementor-element.elementor-element-2406498 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;line-height:56px;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-22912 .elementor-element.elementor-element-f14442d{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;color:#000000;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-icon i{color:#00000000;transition:color 0.3s;}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-icon svg{fill:#00000000;transition:fill 0.3s;}.elementor-22912 .elementor-element.elementor-element-51826d3{--e-icon-list-icon-size:100px;--icon-vertical-offset:0px;}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;line-height:24px;}.elementor-22912 .elementor-element.elementor-element-51826d3 .elementor-icon-list-text{color:#4F4F4F;transition:color 0.3s;}.elementor-22912 .elementor-element.elementor-element-c89be0d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-22912 .elementor-element.elementor-element-540ba52{text-align:center;}.elementor-22912 .elementor-element.elementor-element-540ba52 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:600;color:#000000;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-22912 .elementor-element.elementor-element-9432def .elementor-button{background-color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;fill:#4F4F4F;color:#4F4F4F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#898989;border-radius:10px 10px 10px 10px;padding:10px 170px 10px 170px;}.elementor-22912 .elementor-element.elementor-element-9432def .elementor-button-content-wrapper{flex-direction:row;}@media(min-width:768px){.elementor-22912 .elementor-element.elementor-element-f4c10c3{--width:50%;}.elementor-22912 .elementor-element.elementor-element-c89be0d{--width:50%;}}/* Start custom CSS for shortcode, class: .elementor-element-16dd6c2 *//* Catch-all: hide any BuddyPress field chrome your explicit list missed */ #signup_form .vibebp_registration_field_wrap > * { flex: 0 0 auto !important; } #signup_form .bp-profile-field > *:not(legend):not(input):not(select):not(.checkbox-options), #signup_form [class*="visibility"], #signup_form [class*="field-buttons"], #signup_form .editfield, #signup_form .bp-profile-field .description, #signup_form .bp-profile-field .warn-unsaved-change { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== VibeBP Registration Form — restyle to match "Create Your Master Profile" Scoped to #signup_form (the
element's own ID) for anything that controls layout/spacing, since an ID .elementor-22912 .elementor-element.elementor-element-16dd6c2 always outranks the theme's own class-based rules regardless of load order. The outer wrapper (.vibebp_registration_form, no ID) only carries cosmetic rules that don't need to win a specificity fight. ========================================================================== */ .vibebp_registration_form { max-width: 420px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #signup_form, #signup_form * { box-sizing: border-box; } /* ---- Layout: form fields stack with consistent rhythm ------------------ */ #signup_form.standard-form { display: flex !important; flex-direction: column !important; gap: 18px !important; } /* Hard reset: nothing inside the form should carry its own margin/padding unless explicitly re-declared below. #signup_form (ID) beats any class-based theme rule (e.g. per-field-type spacing like .vibebp_field_type_textbox { margin-bottom: ... }) no matter which stylesheet loads last. */ #signup_form, #signup_form * { margin: 0 !important; padding: 0 !important; } /* BuddyPress xprofile fields (Full Name, Phone Number, Institution, Gender, CNIC) render extra markup that plain fields (Username/Email/Password) don't have: a field-visibility toggle, description/error placeholders, and sometimes a clearfix div. Force them fully out of the layout in case the theme uses visibility:hidden (which still reserves space) instead of display:none. */ #signup_form .field-visibility-settings, #signup_form .field-visibility-settings-toggle, #signup_form .visibility-toggle-link, #signup_form .bp-profile-field .description, #signup_form .bp-profile-field .clear, #signup_form .bp-profile-field br { display: none !important; height: 0 !important; visibility: hidden !important; } /* The source HTML for each bp-profile-field has a lot of literal blank lines/tabs between the legend, input, and closing tags. Normally HTML collapses that whitespace — but if any inherited CSS sets white-space:pre/pre-wrap on these elements, that raw whitespace renders as visible vertical gap. Force normal collapsing behavior regardless of what's inherited. */ #signup_form .bp-profile-field, #signup_form .bp-profile-field * { white-space: normal !important; } /* ---- Field wrapper / labels --------------------------------------------- Covers both plain fields (.vibebp_registration_field > label + input) and BuddyPress profile fields (.bp-profile-field > legend + input), and every per-field-type wrapper class (vibebp_field_type_textbox, _telephone, _selectbox, _checkbox, _number) so a theme rule keyed to any of those specific classes can't sneak in extra margin. */ #signup_form .vibebp_registration_field, #signup_form .vibebp_field_type_textbox, #signup_form .vibebp_field_type_telephone, #signup_form .vibebp_field_type_selectbox, #signup_form .vibebp_field_type_checkbox, #signup_form .vibebp_field_type_number, #signup_form .bp-profile-field { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; text-align: left !important; display: block !important; } /* outside an actual
falls back to the browser's UA default sizing (shrink-to-content + auto margins), which is what was centering Full Name / Phone Number / Gender / CNIC. Force it to behave like a normal block label. */ #signup_form label, #signup_form legend { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 6px 0 !important; padding: 0 !important; border: none !important; text-align: left !important; } #signup_form .bp-required-field-label { font-weight: 400; font-size: 12px; color: #9ca3af; margin-left: 4px !important; } /* ---- Inputs / selects ---------------------------------------------------- */ #signup_form input[type="text"], #signup_form input[type="email"], #signup_form input[type="password"], #signup_form input[type="tel"], #signup_form input[type="number"], #signup_form select { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 12px 14px !important; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; color: #111827; background-color: #ffffff; outline: none; appearance: none; -webkit-appearance: none; } #signup_form select option { color: #111827; font-weight: 400; } #signup_form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px !important; } #signup_form input::placeholder { color: #9ca3af; } #signup_form input:focus, #signup_form select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* ---- Password fields side-by-side on wider screens ---------------------- */ #signup_form .vibebp_registration_field_wrap { display: flex !important; flex-direction: column !important; gap: 18px !important; width: 100% !important; } #signup_form .password_fields { display: flex !important; flex-direction: column !important; gap: 18px !important; width: 100% !important; } @media (min-width: 480px) { #signup_form .password_fields { flex-direction: row !important; } #signup_form .password_fields .vibebp_registration_field { flex: 1 1 0 !important; width: auto !important; } } /* ---- Password requirements checklist ------------------------------------ */ #signup_form .password_terms_wrapper { margin-top: 4px !important; width: 100% !important; } #signup_form .password_terms_wrapper > label { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: none; margin-bottom: 8px !important; } #signup_form .password_terms { display: flex !important; flex-direction: column !important; gap: 6px !important; } #signup_form .password_terms p { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 13px; color: #6b7280; } #signup_form .password_terms .vicon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } /* default (unmet) state — red X */ #signup_form .password_terms .vicon-close { background: #fee2e2; color: #dc2626; } #signup_form .password_terms .vicon-close::before { content: "✕"; font-size: 10px; line-height: 1; } /* met state — theme JS should toggle this class in on the icon span */ #signup_form .password_terms .vicon-check { background: #dcfce7; color: #16a34a; } #signup_form .password_terms .vicon-check::before { content: "✓"; font-size: 10px; line-height: 1; } /* ---- Checkbox fields (e.g. "I am a holder of a valid CNIC") ------------- */ #signup_form .checkbox-options { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 2px !important; padding: 0 !important; background: none !important; border: none !important; } #signup_form .checkbox-options .option-label { display: flex !important; align-items: flex-start; gap: 10px; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; font-size: 13px; font-weight: 400 !important; color: #374151; cursor: pointer; } #signup_form .checkbox-options input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 1px 0 0 0 !important; padding: 0 !important; accent-color: #2563eb; flex-shrink: 0; appearance: auto !important; -webkit-appearance: checkbox !important; } /* ---- Submit button -------------------------------------------------------- */ #signup_form .vibebp_registration_action { flex: 1 0 100% !important; min-width: 100% !important; margin-top: 4px !important; } #signup_form .vibebp_submit_registration_form.button { display: block !important; width: 100% !important; padding: 13px !important; background: #2563eb; color: #ffffff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } #signup_form .vibebp_submit_registration_form.button:hover { background: #1d4ed8; color: #ffffff; } #signup_form select{ height: 50px; }/* End custom CSS */