/* BlackSpace – Become a Seller page only */ /* Layout: force address fields to full width and defeat floats/flex/grid */ #dokan-vendor-register #dokan-address-fields-wrapper, #dokan-vendor-register #dokan-address-fields-wrapper.dokan-address-fields { display: block !important; width: 100% !important; max-width: 100% !important; } #dokan-vendor-register #dokan-address-fields-wrapper .dokan-form-group, #dokan-vendor-register #dokan-address-fields-wrapper .dokan-from-group, #dokan-vendor-register #dokan-address-fields-wrapper .dokan-w5, #dokan-vendor-register #dokan-address-fields-wrapper .dokan-w6, #dokan-vendor-register #dokan-address-fields-wrapper .dokan-right-margin-30, #dokan-vendor-register #dokan-address-fields-wrapper .dokan-left { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; grid-column: 1 / -1 !important; box-sizing: border-box; transition: none !important; /* avoid visual width transitions */ } #dokan-vendor-register #dokan-address-fields-wrapper .dokan-form-control, #dokan-vendor-register #dokan-address-fields-wrapper select.dokan-form-control, #dokan-vendor-register #dokan-address-fields-wrapper input[type="text"], #dokan-vendor-register #dokan-address-fields-wrapper input[type="email"], #dokan-vendor-register #dokan-address-fields-wrapper input[type="tel"], #dokan-vendor-register #dokan-address-fields-wrapper input[type="password"], #dokan-vendor-register #dokan-address-fields-wrapper input[type="search"], #dokan-vendor-register #dokan-address-fields-wrapper select, #dokan-vendor-register #dokan-address-fields-wrapper textarea { display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; transition: none !important; } /* Labels as full-width rows */ #dokan-vendor-register #dokan-address-fields-wrapper label { display: block; width: 100%; } /* Avoid odd gaps from clearfix */ #dokan-vendor-register #dokan-address-fields-wrapper .dokan-clearfix { clear: both; height: 0; line-height: 0; overflow: hidden; } /* Explicit field targets to ensure 100% width */ #dokan-vendor-register [name="dokan_address[street_1]"], #dokan-vendor-register [name="dokan_address[street_2]"], #dokan-vendor-register [name="dokan_address[city]"], #dokan-vendor-register [name="dokan_address[zip]"], #dokan-vendor-register #dokan_address_state, #dokan-vendor-register #dokan_address_country, #dokan-vendor-register #dokan-states-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Select2 containers and visible selections should fill the width */ #dokan-vendor-register .select2-container, #dokan-vendor-register .select2-container .select2-selection--single, #dokan-vendor-register .select2-container .select2-selection--multiple { width: 100% !important; display: block !important; transition: none !important; } /* Remove side padding that can cause clipping */ #dokan-vendor-register .dokan-form-group, #dokan-vendor-register #dokan-address-fields-wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* Register button styles (color + radius) */ form[action*="become-a-seller"] input[type="submit"].dokan-btn.dokan-btn-theme[name="register"] { display: inline-block !important; width: auto !important; float: none !important; border-radius: 50px !important; border: 2px solid #000 !important; background: #000 !important; color: #fff !important; padding: 12px 24px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: center !important; cursor: pointer !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Register button (robust selector set within Dokan vendor form) */ #dokan-vendor-register input[type="submit"][name="register"], #dokan-vendor-register button[name="register"], #dokan-vendor-register .dokan-btn.dokan-btn-theme[name="register"], #dokan-vendor-register .button[name="register"], #dokan-vendor-register .woocommerce-Button[name="register"] { display: inline-block !important; width: auto !important; float: none !important; border-radius: 50px !important; border: 2px solid #000 !important; background: #000 !important; color: #fff !important; padding: 12px 24px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: center !important; cursor: pointer !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* form#dokan-vendor-register input[type="submit"][name="register"]:hover, form#dokan-vendor-register input[type="submit"][name="register"]:focus, form#dokan-vendor-register button[name="register"]:hover, form#dokan-vendor-register button[name="register"]:focus, form#dokan-vendor-register .dokan-btn.dokan-btn-theme[name="register"]:hover, form#dokan-vendor-register .dokan-btn.dokan-btn-theme[name="register"]:focus, form#dokan-vendor-register .button[name="register"]:hover, form#dokan-vendor-register .button[name="register"]:focus, form#dokan-vendor-register .woocommerce-Button[name="register"]:hover, form#dokan-vendor-register .woocommerce-Button[name="register"]:focus, form[action*="become-a-seller"] input[type="submit"].dokan-btn.dokan-btn-theme[name="register"]:hover, form[action*="become-a-seller"] input[type="submit"].dokan-btn.dokan-btn-theme[name="register"]:focus { background: #fff !important; color: #000 !important; border-color: #000 !important; outline: none !important; box-shadow: none !important; }*/ /* BlackSpace – Seller Registration: force black borders on inputs * (scoped to the Become a Seller form only) */ form#dokan-vendor-register input[type="text"], form#dokan-vendor-register input[type="email"], form#dokan-vendor-register input[type="tel"], form#dokan-vendor-register input[type="password"], form#dokan-vendor-register input[type="url"], form#dokan-vendor-register input[type="number"], form#dokan-vendor-register input[type="search"], form#dokan-vendor-register select, form#dokan-vendor-register textarea { border: 1px solid #000 !important; box-shadow: none !important; } /* Keep borders black on focus/hover (override theme highlights) */ form#dokan-vendor-register input[type="text"]:focus, form#dokan-vendor-register input[type="email"]:focus, form#dokan-vendor-register input[type="tel"]:focus, form#dokan-vendor-register input[type="password"]:focus, form#dokan-vendor-register input[type="url"]:focus, form#dokan-vendor-register input[type="number"]:focus, form#dokan-vendor-register input[type="search"]:focus, form#dokan-vendor-register select:focus, form#dokan-vendor-register textarea:focus { outline: 0; border-color: #000 !important; box-shadow: none !important; } /* Redundant safeguard for Dokan controls inside the address wrapper */ #dokan-vendor-register #dokan-address-fields-wrapper .dokan-form-control { border: 1px solid #000 !important; box-shadow: none !important; } /* Select2: ensure black borders on the visible replacement element */ #dokan-vendor-register .select2-container .select2-selection--single, #dokan-vendor-register .select2-container .select2-selection--multiple { border: 1px solid #000 !important; box-shadow: none !important; border-radius: 4px; } /* Keep Select2 borders black when focused/open/hovered */ #dokan-vendor-register .select2-container--focus .select2-selection--single, #dokan-vendor-register .select2-container--open .select2-selection--single, #dokan-vendor-register .select2-container--focus .select2-selection--multiple, #dokan-vendor-register .select2-container--open .select2-selection--multiple, #dokan-vendor-register .select2-container .select2-selection--single:hover, #dokan-vendor-register .select2-container .select2-selection--multiple:hover { border-color: #000 !important; box-shadow: none !important; } /* Normalize native control appearance so black borders render consistently */ form#dokan-vendor-register input:not([type="checkbox"]):not([type="radio"]), form#dokan-vendor-register select, form#dokan-vendor-register textarea { -webkit-appearance: none; appearance: none; border-radius: 4px; } /* Extra-specific safeguard against late theme/Elementor overrides */ #dokan-vendor-register input.input-text, #dokan-vendor-register input.form-control, #dokan-vendor-register select.dokan-form-control, #dokan-vendor-register textarea.form-control { border: 1px solid #000 !important; border-color: #000 !important; box-shadow: none !important; } /* Register button: enforce zero margins (no top or bottom spacing) */ #dokan-vendor-register input[type="submit"][name="register"], #dokan-vendor-register button[type="submit"][name="register"], form[action*="become-a-seller"] input[type="submit"][name="register"], form[action*="become-a-seller"] button[type="submit"][name="register"] { margin-top: 0 !important; margin-bottom: 0 !important; } /* State field disabled appearance until country is selected */ #dokan-vendor-register #dokan-address-fields-wrapper input[disabled], #dokan-vendor-register #dokan-address-fields-wrapper select[disabled] { background-color: #f5f5f5; color: #777777; cursor: not-allowed; padding: 8px 12px; line-height: 1.6rem; } /* Display Address: stack label and input vertically */ #dokan-vendor-register .dokan-form-group label[for="setting_phone"], #dokan-vendor-register .dokan-form-group label[for="setting_phone"] + .dokan-text-left { float: none !important; width: 100% !important; max-width: 100% !important; display: block !important; } #dokan-vendor-register .dokan-form-group label[for="setting_phone"] { margin-bottom: 4px !important; } #dokan-vendor-register .dokan-form-group label[for="setting_phone"] + .dokan-text-left input { width: 100% !important; } /* MBE self-certification gate block */ #dokan-vendor-register .bs-mbe-gate { margin-top: 16px; margin-bottom: 16px; } #dokan-vendor-register .bs-mbe-gate label { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; } #dokan-vendor-register .bs-mbe-gate input[type="checkbox"] { margin-top: 3px; } #dokan-vendor-register .bs-mbe-gate__note { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #444444; } #dokan-vendor-register .bs-mbe-gate__error { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #b00020; display: none; } #dokan-vendor-register .bs-mbe-gate.bs-mbe-gate--error .bs-mbe-gate__error { display: block; } /* Generic link styling inside Become a Seller form (T&C, etc.) */ #dokan-vendor-register a { color: #b0743e; text-decoration: underline; } #dokan-vendor-register a:hover, #dokan-vendor-register a:focus { color: #000000; } /* MBE link color behavior */ #dokan-vendor-register .bs-mbe-gate a { color: #b0743e; text-decoration: underline; } #dokan-vendor-register .bs-mbe-gate a:hover, #dokan-vendor-register .bs-mbe-gate a:focus { color: #000000; } /* Become a Seller: Register button spacing, centering, and hover state */ #dokan-vendor-register p.form-row input[type="submit"][name="register"], form[action*="become-a-seller"] p.form-row input[type="submit"][name="register"] { display: block !important; margin-top: 16px !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; } #dokan-vendor-register input[type="submit"][name="register"]:hover, #dokan-vendor-register input[type="submit"][name="register"]:focus, #dokan-vendor-register input[type="submit"][name="register"]:active, form[action*="become-a-seller"] input[type="submit"][name="register"]:hover, form[action*="become-a-seller"] input[type="submit"][name="register"]:focus, form[action*="become-a-seller"] input[type="submit"][name="register"]:active { background: #fff !important; color: #000 !important; border-color: #000 !important; outline: none !important; box-shadow: none !important; } /* Subscription pack container spacing and background */ form#dokan-vendor-register .dps-pack-wrappper { border: 0 !important; padding: 0; } .dps-pack { background: #e6e6e6; width: 100%; float: left; margin-top: 20px; margin-bottom: 16px; border-radius: 10px } /* Inline validation error message styling (Become a Seller only) */ form#dokan-vendor-register .bs-error { color: #c00000; font-size: 12px; margin-top: 4px; } /* Become a Seller – Shop URL availability colors (scoped) */ form#dokan-vendor-register #url-alart-mgs.text-danger, form#dokan-vendor-register #url-alart.text-danger { color: #FF0000 !important; } form#dokan-vendor-register #url-alart-mgs.text-success, form#dokan-vendor-register #url-alart.text-success { color: #00FF00 !important; } /* Become a Seller – hide jsSocials share buttons on this form only */ form#dokan-vendor-register .jssocials-shares { display: none !important; } /* ══════════════════════════════════════════════════════════ HERO REDESIGN — contained dark card Added March 2026. Matches the homepage / sell / about / about page hero pattern exactly. CSS class to assign in Elementor → Advanced → CSS Classes: bs-bas-hero (on the top-level hero container, ID 44ba191) ══════════════════════════════════════════════════════════ */ /* * PAGE WRAPPER * WoodMart's default 40px/15px top padding → 24px top + 20px sides, * revealing the #fafafa page background around the contained card. */ body.page-id-10831 .wd-content-layout { padding-top: 24px !important; padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 0 !important; } /* * Pull the form section and email footer section to full page width. * They live inside the padded content layout, so negative margins * compensate and keep them edge-to-edge below the card. */ body.page-id-10831 .elementor-element-3b161c3, body.page-id-10831 .elementor-element-0f0b7b0 { margin-left: -20px !important; margin-right: -20px !important; width: calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; } /* * HERO CARD * NOTE: This container is an e-con-full — it has NO .e-con-inner * child wrapper. Padding targets .bs-bas-hero directly. */ .bs-bas-hero { border-radius: 10px !important; overflow: hidden !important; position: relative !important; background-color: #1e1919 !important; background-image: radial-gradient(ellipse 80% 65% at 50% 42%, rgba(176,116,62,0.20) 0%, transparent 62%), repeating-linear-gradient( -45deg, transparent, transparent 44px, rgba(255,255,255,0.018) 44px, rgba(255,255,255,0.018) 45px ) !important; padding-top: 100px !important; padding-bottom: 88px !important; padding-left: 80px !important; padding-right: 80px !important; align-items: center !important; text-align: center !important; } /* Thin amber gradient line across the bottom edge of the card */ .bs-bas-hero::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, #b0743e, transparent) !important; opacity: 0.45 !important; z-index: 2 !important; pointer-events: none !important; } /* EKit heading widget — reset container padding then style the title */ .bs-bas-hero .ekit-wid-con, .bs-bas-hero .ekit-heading { padding: 0 !important; margin: 0 !important; } .bs-bas-hero .elementor-widget-elementskit-heading { margin-bottom: 16px !important; } .bs-bas-hero .ekit-heading--title { font-family: Verdana, Geneva, sans-serif !important; font-size: 3.5rem !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; color: #ffffff !important; margin: 0 !important; } /* "Journey" span — reinforce bronze-300 for dark bg contrast */ .bs-bas-hero .ekit-heading--title span span { color: #c8925e !important; } /* WoodMart wd_title subtitle */ .bs-bas-hero .woodmart-title-container { font-family: Verdana, Geneva, sans-serif !important; font-size: 0.9375rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: rgba(255,255,255,0.72) !important; margin: 0 !important; } /* wd-underline-colored decoration — hide on dark background */ .bs-bas-hero .wd-underline-colored::after, .bs-bas-hero .wd-underline-colored::before { display: none !important; } /* ══════════════════════════════════════════════════════════ LEGAL NOTICE BLOCK HTML widget — first child of the form section container, above the Dokan shortcode widget. CSS class to assign in Elementor → Advanced → CSS Classes: bs-bas-notice (on the HTML widget) ══════════════════════════════════════════════════════════ */ .bs-bas-notice { background: #f7eee5 !important; border: 1px solid #efd9c0 !important; border-radius: 10px !important; padding: 28px 32px !important; margin: 40px auto 36px !important; max-width: 720px !important; width: 100% !important; box-sizing: border-box !important; } .bs-bas-notice .elementor-widget-container { padding: 0 !important; margin: 0 !important; } .bs-bas-notice p { font-family: Verdana, Geneva, sans-serif !important; font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.85 !important; color: #2e2e2e !important; margin: 0 0 16px !important; padding: 0 !important; } .bs-bas-notice p:last-child { margin-bottom: 0 !important; } .bs-bas-notice a { color: #b0743e !important; text-decoration: underline !important; text-underline-offset: 2px !important; } .bs-bas-notice a:hover { color: #1a1a1a !important; } /* ══════════════════════════════════════════════════════════ FORM SECTION WRAPPER (optional — for future Dokan styling) CSS class: bs-bas-form-wrap Assign to the container holding the notice + shortcode. ══════════════════════════════════════════════════════════ */ .bs-bas-form-wrap { background: #ffffff !important; padding-top: 48px !important; padding-bottom: 64px !important; padding-left: 20px !important; padding-right: 20px !important; } .bs-bas-form-wrap .dokan-reg-wrapper, .bs-bas-form-wrap .dokan-registration-form, .bs-bas-form-wrap form.dokan-form-container { max-width: 720px !important; margin: 0 auto !important; } /* ══════════════════════════════════════════════════════════ RESPONSIVE — 960px ══════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .bs-bas-hero { padding-top: 72px !important; padding-bottom: 64px !important; padding-left: 48px !important; padding-right: 48px !important; } .bs-bas-hero .ekit-heading--title { font-size: 2.75rem !important; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — 768px ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .bs-bas-hero { padding-top: 64px !important; padding-bottom: 56px !important; padding-left: 40px !important; padding-right: 40px !important; } .bs-bas-hero .ekit-heading--title { font-size: 2.25rem !important; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — 640px ══════════════════════════════════════════════════════════ */ @media (max-width: 640px) { body.page-id-10831 .wd-content-layout { padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; } body.page-id-10831 .elementor-element-3b161c3, body.page-id-10831 .elementor-element-0f0b7b0 { margin-left: -12px !important; margin-right: -12px !important; width: calc(100% + 24px) !important; max-width: calc(100% + 24px) !important; } .bs-bas-hero { border-radius: 8px !important; padding-top: 52px !important; padding-bottom: 44px !important; padding-left: 24px !important; padding-right: 24px !important; } .bs-bas-hero .ekit-heading--title { font-size: 2rem !important; } .bs-bas-notice { padding: 22px 20px !important; margin: 28px 0 24px !important; } .bs-bas-form-wrap { padding-left: 12px !important; padding-right: 12px !important; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — 480px ══════════════════════════════════════════════════════════ */ @media (max-width: 480px) { body.page-id-10831 .wd-content-layout { padding-top: 10px !important; padding-left: 10px !important; padding-right: 10px !important; } body.page-id-10831 .elementor-element-3b161c3, body.page-id-10831 .elementor-element-0f0b7b0 { margin-left: -10px !important; margin-right: -10px !important; width: calc(100% + 20px) !important; max-width: calc(100% + 20px) !important; } .bs-bas-hero { border-radius: 6px !important; padding-top: 44px !important; padding-bottom: 36px !important; padding-left: 18px !important; padding-right: 18px !important; } .bs-bas-hero .ekit-heading--title { font-size: 1.75rem !important; } .bs-bas-notice { padding: 18px 16px !important; margin: 20px 0 18px !important; } .bs-bas-form-wrap { padding-left: 10px !important; padding-right: 10px !important; } } /* ══════════════════════════════════════════════════════════ DUES-LEVEL DESCRIPTION — bullets hug centered text ────────────────────────────────────────────────────────── The "Choose Seller Membership Dues Level" dropdown reveals a Dokan subscription pack descriptor (.dps-pack .pack_content). Its