/* ================================
   Registration page layout
================================ */
body.cs-register-page {
    background: linear-gradient(180deg, #f3f6fb 0%, #fbfcfd 320px, #fbfcfd 100%);
}

body.cs-register-page #content.site-content {
    border-top: 1px solid #e6e6e6 !important;
}

body.cs-register-page .um-register {
    max-width: 500px;
    padding: 0;
    margin: 0 auto;
}

/* ================================
   Section cards / wizard steps
================================ */

body.cs-register-page .cs-um-profile-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 28px;
    margin-bottom: 20px;
    display: none;
}

body.cs-register-page .cs-um-profile-card.is-active {
    display: block;
}

body.cs-register-page .cs-um-profile-card .um-field {
    padding: 0 0 12px;
    margin: 0;
}

body.cs-register-page .cs-um-profile-card .um-field:last-child {
    padding-bottom: 0;
}

body.cs-register-page .cs-card-title {
    display: none !important;
}

/* Hiding .cs-card-title above only hides the <h2> text - its wrapping
   .um-field-block still renders as an empty box (with the generic
   .um-field padding/margin below), leaving a gap at the top of the card.
   Hide the whole wrapper instead. Scoped to blocks that actually contain
   a .cs-card-title so it doesn't touch other .um-field-block content
   injected inside a step (those should display normally). */
body.cs-register-page .cs-um-profile-card .um-field-block:has(.cs-card-title) {
    display: none !important;
}

/* ================================
   Form inputs
================================ */

body.cs-register-page .um-form input[type="text"],
body.cs-register-page .um-form input[type="tel"],
body.cs-register-page .um-form input[type="email"],
body.cs-register-page .um-form input[type="password"],
body.cs-register-page .um-form select,
body.cs-register-page .um-form textarea {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 12px !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all .2s ease;
}

body.cs-register-page .um-form input:focus,
body.cs-register-page .um-form select:focus,
body.cs-register-page .um-form textarea:focus {
    border-color: #2d7ff9 !important;
    box-shadow: 0 0 0 3px rgba(45,127,249,.12) !important;
}

body.cs-register-page .um-form .um-field-label label {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* The "Agree to Our Terms" checkbox's label is a full consent paragraph,
   not a short field label like the others above - the generic bold/dark
   label style above reads as too heavy for a paragraph, so it gets its
   own lighter treatment here instead (regular weight, muted gray, a bit
   smaller, with breathing room via line-height) so it reads as normal
   body copy rather than shouting at the same weight as "Business Name"
   or "Password". */
body.cs-register-page .um-form .um-field-agree-terms .um-field-label label {
    font-family: 'Inter', sans-serif !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* The checkbox's own option text ("I confirm", "Yes", etc.) carries the
   actual affirmative weight now that the paragraph above it is lighter -
   bold/dark to match the site's original label weight, since this is the
   one bit of text on the field that should still stand out. */
body.cs-register-page .um-form .um-field-agree-terms .um-field-checkbox-option {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

body.cs-register-page .um-form .um-field {
    margin-bottom: 12px !important;
}

body.cs-register-page .um-form .um-field-label {
    margin-bottom: 8px !important;
}

/* ================================
   Tooltip icons
================================ */

body.cs-register-page .um-tip i {
    color: #9ca3af;
    transition: color .15s ease;
}

body.cs-register-page .um-tip:hover i,
body.cs-register-page .um-tip:focus i {
    color: #2d7ff9;
}

body.cs-register-page .um-tip {
    padding: 4px;
    margin: -4px 0 0 4px;
}

/* ================================
   Submit button
================================ */

body.cs-register-page .um-form .um-col-alt {
    margin-top: 8px !important;
}

body.cs-register-page .um-button {
    width: 100% !important;
    min-width: auto !important;
    height: 50px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

/* ================================
   Select2 (Trade Category)
================================ */

body.cs-register-page .select2-container {
    width: 100% !important;
}

/* Ultimate Member ships its own skin for .um-field selects targeting the
   plain (non-BEM) .select2/.select2-container/.select2-selection classes
   with 4-5 classes' worth of specificity, all !important. Our overrides
   have to include those same base classes alongside the BEM modifier
   classes to out-specify UM's rules, not just add !important. */

body.cs-register-page .select2.select2-container.select2-container--default .select2-selection.select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    padding: 0 40px 0 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 12px !important;
    transition: all .2s ease !important;
}

body.cs-register-page .select2.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.cs-register-page .select2.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
}

body.cs-register-page .select2.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow {
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: auto !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    background: transparent !important;
    border: none !important;
    transform: translateY(-50%) !important;
}

body.cs-register-page .select2.select2-container.select2-container--default.select2-container--open .select2-selection.select2-selection--single,
body.cs-register-page .select2.select2-container.select2-container--default.select2-container--focus .select2-selection.select2-selection--single {
    border-color: #2d7ff9 !important;
    box-shadow: 0 0 0 3px rgba(45,127,249,.12) !important;
}

body.cs-register-page .select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}

body.cs-register-page .select2.select2-container.select2-container--default .select2-dropdown {
    border: 1px solid #dbe4f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

body.cs-register-page .select2-dropdown .select2-results__option {
    font-family: 'Inter', sans-serif !important;
    padding: 10px 16px !important;
}

body.cs-register-page .select2-container.select2-container--default .select2-dropdown .select2-results__option.select2-results__option--highlighted[aria-selected] {
    background-color: #2d7ff9 !important;
    color: #ffffff !important;
}

body.cs-register-page .select2-dropdown .select2-search--dropdown {
    padding: 8px !important;
}

body.cs-register-page .select2-dropdown .select2-search--dropdown .select2-search__field {
    height: 40px !important;
    border: 1px solid #dbe4f0 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    font-size: 18px !important;
    font-family: 'Inter', sans-serif !important;
    outline: none !important;
}

body.cs-register-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2d7ff9;
}

/* ================================
   Wizard progress bar + nav
================================ */

body.cs-register-page .cs-wizard-progress {
    margin-bottom: 24px;
}

body.cs-register-page .cs-wizard-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

body.cs-register-page .cs-wizard-progress-step-name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

body.cs-register-page .cs-wizard-progress-count {
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
}

body.cs-register-page .cs-wizard-progress-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

body.cs-register-page .cs-wizard-progress-fill {
    height: 100%;
    background: #2d7ff9;
    border-radius: 999px;
    transition: width 0.3s ease;
}

body.cs-register-page .cs-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

body.cs-register-page .cs-wizard-nav:has(> :only-child) {
    justify-content: flex-end;
}

body.cs-register-page .cs-btn-primary {
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: #2d7ff9;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

body.cs-register-page .cs-btn-primary:hover {
    background: #1e5bd6;
}

body.cs-register-page .cs-btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 22px;

    border: 1px solid #2d7ff9;
    border-radius: 10px;

    color: #2d7ff9 !important;
    background: #ffffff;

    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
}

body.cs-register-page .cs-btn-secondary-outline:hover {
    background: #eff6ff;
    color: #1e5bd6 !important;
}

body.cs-register-page .cs-wizard-nav .um-button {
    width: auto !important;
}

@media (max-width: 767px) {

    body.cs-register-page .cs-wizard-nav {
        flex-direction: column;
        gap: 12px;
    }

    body.cs-register-page .cs-wizard-nav .cs-btn-primary,
    body.cs-register-page .cs-wizard-nav .cs-btn-secondary-outline,
    body.cs-register-page .cs-wizard-nav .um-button {
        width: 100% !important;
    }

}

/* ================================
   Mobile layout
================================ */

@media (max-width: 767px) {

    body.cs-register-page {
        width: 100%;
        overflow-x: hidden;
    }

    body.cs-register-page .um-register {
        max-width: 100%;
        padding: 10px 16px 0;
    }

    body.cs-register-page .cs-um-profile-card {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px;
        border-radius: 18px;
    }

    /* The Astra/Elementor ancestor chain wrapping the UM shortcode adds its
       own side padding on mobile, from a Kit/theme default rather than a
       per-page setting (so it isn't visible in the Elementor editor's
       Content panel, and Elementor's own container class even varies
       between requests). Force every ancestor to zero padding so
       .um-register's own padding above is the only gutter. */
    body.cs-register-page #content.site-content,
    body.cs-register-page .ast-container,
    body.cs-register-page #primary,
    body.cs-register-page .entry-content,
    body.cs-register-page .elementor,
    body.cs-register-page .e-con,
    body.cs-register-page .e-con-inner,
    body.cs-register-page .elementor-widget-shortcode,
    body.cs-register-page .elementor-shortcode {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

}