/* BlackSpace – Customer Migration page (non-seller -> seller) */

/* Scope all rules to the migration form wrapper */
form.update-customer-to-vendor.register {
  position: relative;
}

/* Base link styling inside the migration form (T&C, MBE, etc.) */
form.update-customer-to-vendor.register a {
  color: #b0743e;
  text-decoration: underline;
}

form.update-customer-to-vendor.register a:hover,
form.update-customer-to-vendor.register a:focus {
  color: #000000;
}


/* Customer Migration – Force black borders on inputs and dropdowns (mirrors Become a Seller) */
form.update-customer-to-vendor.register input[type="text"],
form.update-customer-to-vendor.register input[type="email"],
form.update-customer-to-vendor.register input[type="tel"],
form.update-customer-to-vendor.register input[type="password"],
form.update-customer-to-vendor.register input[type="url"],
form.update-customer-to-vendor.register input[type="number"],
form.update-customer-to-vendor.register input[type="search"],
form.update-customer-to-vendor.register select,
form.update-customer-to-vendor.register textarea {
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* Keep borders black on focus/hover (override theme highlights) */
form.update-customer-to-vendor.register input[type="text"]:focus,
form.update-customer-to-vendor.register input[type="email"]:focus,
form.update-customer-to-vendor.register input[type="tel"]:focus,
form.update-customer-to-vendor.register input[type="password"]:focus,
form.update-customer-to-vendor.register input[type="url"]:focus,
form.update-customer-to-vendor.register input[type="number"]:focus,
form.update-customer-to-vendor.register input[type="search"]:focus,
form.update-customer-to-vendor.register select:focus,
form.update-customer-to-vendor.register textarea:focus,
form.update-customer-to-vendor.register input[type="text"]:hover,
form.update-customer-to-vendor.register input[type="email"]:hover,
form.update-customer-to-vendor.register input[type="tel"]:hover,
form.update-customer-to-vendor.register input[type="password"]:hover,
form.update-customer-to-vendor.register input[type="url"]:hover,
form.update-customer-to-vendor.register input[type="number"]:hover,
form.update-customer-to-vendor.register input[type="search"]:hover,
form.update-customer-to-vendor.register select:hover,
form.update-customer-to-vendor.register textarea:hover {
  outline: 0;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Address wrapper safeguard */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-form-control {
  border: 1px solid #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Select2: ensure black borders on the visible replacement element */
form.update-customer-to-vendor.register .select2-container .select2-selection--single,
form.update-customer-to-vendor.register .select2-container .select2-selection--multiple {
  border: 1px solid #000 !important;
  box-shadow: none !important;
  border-radius: 4px;
}

form.update-customer-to-vendor.register .select2-container--focus .select2-selection--single,
form.update-customer-to-vendor.register .select2-container--open  .select2-selection--single,
form.update-customer-to-vendor.register .select2-container--focus .select2-selection--multiple,
form.update-customer-to-vendor.register .select2-container--open  .select2-selection--multiple,
form.update-customer-to-vendor.register .select2-container .select2-selection--single:hover,
form.update-customer-to-vendor.register .select2-container .select2-selection--multiple:hover {
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Extra-specific safeguard against theme/Elementor overrides */
form.update-customer-to-vendor.register input.input-text,
form.update-customer-to-vendor.register input.form-control,
form.update-customer-to-vendor.register select.dokan-form-control,
form.update-customer-to-vendor.register textarea.form-control {
  border: 1px solid #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

/* Inline validation error message styling (mirrors Become a Seller) */
form.update-customer-to-vendor.register .bs-error {
  color: #c00000;
  font-size: 12px;
  margin-top: 4px;
}

/* MBE gate layout and spacing */
form.update-customer-to-vendor.register .bs-mbe-gate {
  margin-top: 16px;
  margin-bottom: 16px;
}

form.update-customer-to-vendor.register .bs-mbe-gate label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
}

/* Dokan ships .control-label with float/width rules; override for the MBE gate */
form.update-customer-to-vendor.register .bs-mbe-gate label.control-label {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

form.update-customer-to-vendor.register .bs-mbe-gate input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

form.update-customer-to-vendor.register .bs-mbe-gate span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

form.update-customer-to-vendor.register .bs-mbe-gate__note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #444444;
}

form.update-customer-to-vendor.register .bs-mbe-gate__error {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #b00020;
  display: none;
}

/* Error state highlight */
form.update-customer-to-vendor.register .bs-mbe-gate.bs-mbe-gate--error .bs-mbe-gate__error {
  display: block;
}

/* Customer Migration – Shop URL availability colors (mirrors Become a Seller) */
form.update-customer-to-vendor.register #url-alart-mgs.text-danger,
form.update-customer-to-vendor.register #url-alart.text-danger {
  color: #FF0000 !important;
}

form.update-customer-to-vendor.register #url-alart-mgs.text-success,
form.update-customer-to-vendor.register #url-alart.text-success {
  color: #00FF00 !important;
}

/* Customer Migration – Address fields full-width parity (mirrors Become a Seller) */
/* Layout: force address fields to full width and defeat floats/flex/grid */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper.dokan-address-fields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-form-group,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-from-group,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-w5,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-w6,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-right-margin-30,
form.update-customer-to-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 */
}

form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-form-control,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper select.dokan-form-control,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[type="text"],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[type="email"],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[type="tel"],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[type="password"],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[type="search"],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper select,
form.update-customer-to-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 */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper label {
  display: block;
  width: 100%;
}

/* Avoid odd gaps from clearfix */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .dokan-clearfix {
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

/* Explicit field targets to ensure 100% width */
form.update-customer-to-vendor.register [name="dokan_address[street_1]"],
form.update-customer-to-vendor.register [name="dokan_address[street_2]"],
form.update-customer-to-vendor.register [name="dokan_address[city]"],
form.update-customer-to-vendor.register [name="dokan_address[zip]"],
form.update-customer-to-vendor.register #dokan_address_state,
form.update-customer-to-vendor.register #dokan_address_country,
form.update-customer-to-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 */
form.update-customer-to-vendor.register .select2-container,
form.update-customer-to-vendor.register .select2-container .select2-selection--single,
form.update-customer-to-vendor.register .select2-container .select2-selection--multiple {
  width: 100% !important;
  display: block !important;
  transition: none !important;
}

/* Remove side padding that can cause clipping */
form.update-customer-to-vendor.register .dokan-form-group,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Customer Migration – Address disabled field consistency (mirrors Become a Seller) */
form.update-customer-to-vendor.register #dokan_address_state,
form.update-customer-to-vendor.register #dokan_address_country,
form.update-customer-to-vendor.register #dokan-states-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* Customer Migration – Disabled address field appearance (mirrors Become a Seller) */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper input[disabled],
form.update-customer-to-vendor.register #dokan-address-fields-wrapper select[disabled] {
  background-color: #f5f5f5;
  color: #777777;
  cursor: not-allowed;
  padding: 8px 12px;
  line-height: 1.6rem;
}

/* Customer Migration – Disabled Select2 appearance (country/state) */
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .select2-container--disabled .select2-selection--single,
form.update-customer-to-vendor.register #dokan-address-fields-wrapper .select2-container--disabled .select2-selection--multiple {
  background-color: #f5f5f5 !important;
  color: #777777 !important;
  cursor: not-allowed !important;
  border-color: #dddddd !important;
  box-shadow: none !important;
}


/* Customer Migration – Phone field layout (mirrors Become a Seller) */
form.update-customer-to-vendor.register .dokan-form-group label[for="setting_phone"],
form.update-customer-to-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;
}

form.update-customer-to-vendor.register .dokan-form-group label[for="setting_phone"] {
  margin-bottom: 4px !important;
}

form.update-customer-to-vendor.register .dokan-form-group label[for="setting_phone"] + .dokan-text-left input {
  width: 100% !important;
}


/* Customer Migration – Subscription pack box (Choose Subscription Pack) */
form.update-customer-to-vendor.register .dps-pack-wrappper {
  border: 0 !important;
  padding: 0;
}

form.update-customer-to-vendor.register .dps-pack {
  background: #e6e6e6;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  float: none;
  box-sizing: border-box;
}



/* Customer Migration – Ensure State field has 5px border radius (parity with other fields) */
form.update-customer-to-vendor.register #dokan_address_state,
form.update-customer-to-vendor.register select[name="dokan_address[state]"],
form.update-customer-to-vendor.register input[name="dokan_address[state]"] {
  border-radius: 5px !important;
}

/* Select2 visible state field */
form.update-customer-to-vendor.register .select2-container .select2-selection--single,
form.update-customer-to-vendor.register .select2-container .select2-selection--multiple {
  border-radius: 5px !important;
}



/* ══════════════════════════════════════════════════════════
   HERO REDESIGN — contained dark card
   Added March 2026.
   Matches the homepage / sell / about / become-a-seller
   hero pattern exactly.

   DOM confirmed by live inspection on page-id-17566:
     Hero container:  .elementor-element-2bd9745  (e-con-full)
     Form section:    .elementor-element-3c66066b  (e-con-boxed)
     Hero widget:     single EKit heading (ID 5dbfd53f)
                      subtitle lives in .ekit-heading__description p

   CSS class to assign in Elementor → Advanced → CSS Classes:
   bs-cm-hero      → top-level hero container (2bd9745)
   bs-cm-notice    → new HTML widget, first child of form section
   bs-cm-form-wrap → form section container (3c66066b, optional)
   ══════════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ───────────────────────────────────────────
   Replaces WoodMart default 40px/15px padding with 24px top
   + 20px sides so the #fafafa page background is visible
   around the contained hero card.
   ─────────────────────────────────────────────────────────── */
body.page-id-17566 .wd-content-layout {
  padding-top:    24px !important;
  padding-left:   20px !important;
  padding-right:  20px !important;
  padding-bottom: 0    !important;
}

/* Pull the form section and footer section to full page width.
   Negative margins compensate for the 20px content layout
   side padding so both sections remain edge-to-edge. */
body.page-id-17566 .elementor-element-3c66066b,
body.page-id-17566 .elementor-element-0f0b7b0 {
  margin-left:  -20px              !important;
  margin-right: -20px              !important;
  width:         calc(100% + 40px) !important;
  max-width:     calc(100% + 40px) !important;
}

/* ── HERO CARD ──────────────────────────────────────────────
   .elementor-element-2bd9745 is an e-con-full container —
   no .e-con-inner wrapper. Padding targets the container
   directly via the .bs-cm-hero class.
   ─────────────────────────────────────────────────────────── */
.bs-cm-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 */
.bs-cm-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 container reset */
.bs-cm-hero .ekit-wid-con,
.bs-cm-hero .ekit-heading {
  padding: 0 !important;
  margin:  0 !important;
}

/* H2 title — "From shopper to Seller Member" */
.bs-cm-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 0 16px !important;
}

/* "Seller Member" span — reinforce bronze-300 (#c8925e) for dark bg */
.bs-cm-hero .ekit-heading--title span span {
  color: #c8925e !important;
}

/* Subtitle — lives in .ekit-heading__description p on this page
   (different from become-a-seller which uses a separate wd_title widget) */
.bs-cm-hero .ekit-heading__description {
  margin: 0 !important;
  padding: 0 !important;
}
.bs-cm-hero .ekit-heading__description p {
  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;
  padding:     0                      !important;
}


/* ── LEGAL NOTICE BLOCK ─────────────────────────────────────
   HTML widget — assign class bs-cm-notice.
   Must be placed as first child of the form section container
   (.elementor-element-3c66066b), above the migration shortcode.
   ─────────────────────────────────────────────────────────── */
.bs-cm-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-cm-notice .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.bs-cm-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-cm-notice p:last-child {
  margin-bottom: 0 !important;
}
.bs-cm-notice a {
  color:                 #b0743e   !important;
  text-decoration:       underline !important;
  text-underline-offset: 2px       !important;
}
.bs-cm-notice a:hover {
  color: #1a1a1a !important;
}


/* ── FORM SECTION WRAPPER ───────────────────────────────────
   Optional. Assign class bs-cm-form-wrap to 3c66066b.
   ─────────────────────────────────────────────────────────── */
.bs-cm-form-wrap {
  background:     #ffffff !important;
  padding-top:    48px    !important;
  padding-bottom: 64px    !important;
  padding-left:   20px    !important;
  padding-right:  20px    !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 960px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .bs-cm-hero {
    padding-top:    72px !important;
    padding-bottom: 64px !important;
    padding-left:   48px !important;
    padding-right:  48px !important;
  }
  .bs-cm-hero .ekit-heading--title {
    font-size: 2.75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bs-cm-hero {
    padding-top:    64px !important;
    padding-bottom: 56px !important;
    padding-left:   40px !important;
    padding-right:  40px !important;
  }
  .bs-cm-hero .ekit-heading--title {
    font-size: 2.25rem !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.page-id-17566 .wd-content-layout {
    padding-top:   12px !important;
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
  body.page-id-17566 .elementor-element-3c66066b,
  body.page-id-17566 .elementor-element-0f0b7b0 {
    margin-left:  -12px              !important;
    margin-right: -12px              !important;
    width:         calc(100% + 24px) !important;
    max-width:     calc(100% + 24px) !important;
  }
  .bs-cm-hero {
    border-radius:  8px  !important;
    padding-top:    52px !important;
    padding-bottom: 44px !important;
    padding-left:   24px !important;
    padding-right:  24px !important;
  }
  .bs-cm-hero .ekit-heading--title {
    font-size: 2rem !important;
  }
  .bs-cm-notice {
    padding: 22px 20px   !important;
    margin:  28px 0 24px !important;
  }
  .bs-cm-form-wrap {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  body.page-id-17566 .wd-content-layout {
    padding-top:   10px !important;
    padding-left:  10px !important;
    padding-right: 10px !important;
  }
  body.page-id-17566 .elementor-element-3c66066b,
  body.page-id-17566 .elementor-element-0f0b7b0 {
    margin-left:  -10px              !important;
    margin-right: -10px              !important;
    width:         calc(100% + 20px) !important;
    max-width:     calc(100% + 20px) !important;
  }
  .bs-cm-hero {
    border-radius:  6px  !important;
    padding-top:    44px !important;
    padding-bottom: 36px !important;
    padding-left:   18px !important;
    padding-right:  18px !important;
  }
  .bs-cm-hero .ekit-heading--title {
    font-size: 1.75rem !important;
  }
  .bs-cm-notice {
    padding: 18px 16px   !important;
    margin:  20px 0 18px !important;
  }
  .bs-cm-form-wrap {
    padding-left:  10px !important;
    padding-right: 10px !important;
  }
}