/**
 * Beyond 'Biz' Experience - Contact Manager Form Frontend Styling
 * Pulls font/color from Elementor Global Settings where available,
 * with sensible fallbacks if a variable isn't defined.
 *
 * !important is used throughout because Elementor's own global CSS
 * (Site Settings typography/inputs) is aggressive and otherwise wins
 * over plain rules regardless of specificity or load order — same
 * issue already solved elsewhere in this theme.
 */

.bbe-cm-form-card {
    /* card itself has no text directly on it — leaving font-family off
       here so nothing accidentally leaks in before the heading/paragraph
       rules below set it explicitly on each element type */
    position: relative !important; /* so the success overlay below can center within the card, not the whole page */
    max-width: 420px !important;
    padding: 32px 28px !important;
    border-radius: 10px !important;
    background-color: var(--e-global-color-secondary, #2c6e7f) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

/* Everything that ISN'T a side-by-side field (title, image, submit
   button, message) always takes the full row. */
.bbe-cm-form-title,
.bbe-cm-form-image,
.bbe-cm-form-submit,
.bbe-cm-form-message,
.bbe-cm-layout-full {
    flex: 1 1 100% !important;
}

.bbe-cm-form-card .bbe-cm-form-title,
.bbe-cm-field-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
}

.bbe-cm-form-card .bbe-cm-form-title {
    margin: 0 0 24px !important;
    text-align: var(--bbe-cm-heading-align, center) !important;
    color: var(--bbe-cm-heading-color, var(--bbe-cm-form-text, #ffffff)) !important;
    font-size: var(--bbe-cm-heading-size, 22px) !important;
    font-weight: var(--bbe-cm-heading-weight, 700) !important;
}

.bbe-cm-form-image {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 20px !important;
}

/* Content blocks (Title/Custom Text fields you add yourself) and the
   heading above a Checkbox Group had no color rule at all, so they were
   just inheriting the page's default gray text — invisible on a dark
   card background. Title uses the heading color (it shares the heading
   font too); Custom Text/Checkbox Group heading use the body color. */
.bbe-cm-field-title {
    display: block !important;
    color: var(--bbe-cm-heading-color, var(--bbe-cm-form-text, #ffffff)) !important;
    margin-bottom: 10px !important;
}
.bbe-cm-field-custom_text,
.bbe-cm-field-checkbox_group > span {
    display: block !important;
    color: var(--bbe-cm-body-color, var(--bbe-cm-form-text, #ffffff)) !important;
    margin-bottom: 10px !important;
}

/* Custom Text and Checkbox Group's own heading label use the paragraph
   font, not the heading font — Title blocks above use heading font. */
.bbe-cm-field-custom_text,
.bbe-cm-field-checkbox_group > span {
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    font-size: var(--bbe-cm-body-size, 15px) !important;
    font-weight: var(--bbe-cm-body-weight, 400) !important;
}

.bbe-cm-field {
    /* vertical + horizontal spacing now comes from the flex "gap" above,
       not a per-field margin — keeps every field's spacing consistent
       regardless of what type of field comes before or after it */
}

.bbe-cm-field label {
    display: none !important; /* default: placeholder-style labels instead */
}

/* "Labels above field" mode — real visible label, placeholder hidden so
   the same word doesn't show twice (once as label, once as placeholder). */
.bbe-cm-labels-outside .bbe-cm-field label {
    display: block !important;
    margin-bottom: 6px !important;
    color: var(--bbe-cm-body-color, var(--bbe-cm-form-text, #ffffff)) !important;
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.bbe-cm-labels-outside .bbe-cm-field input::placeholder,
.bbe-cm-labels-outside .bbe-cm-field textarea::placeholder {
    color: transparent !important;
}

/* :not() pattern instead of listing each input type by name, so any
   future custom field type automatically inherits this styling too. */
.bbe-cm-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.bbe-cm-field textarea,
.bbe-cm-field select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border: none !important;
    border-radius: var(--bbe-cm-field-radius, 6px) !important;
    background-color: var(--bbe-cm-field-bg, rgba(255, 255, 255, 0.85)) !important;
    color: var(--bbe-cm-field-text-color, #1d2327) !important;
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    font-size: var(--bbe-cm-field-text-size, var(--bbe-cm-body-size, 15px)) !important;
    font-weight: var(--bbe-cm-field-text-weight, var(--bbe-cm-body-weight, 400)) !important;
}

.bbe-cm-field input::placeholder,
.bbe-cm-field textarea::placeholder {
    color: #5a6b70 !important;
}

.bbe-cm-field-checkbox label,
.bbe-cm-field-checkbox_group label {
    display: block !important;
    color: var(--bbe-cm-body-color, var(--bbe-cm-form-text, #ffffff)) !important;
    font-family: var(--e-global-typography-text-font-family, inherit) !important;
    font-size: var(--bbe-cm-body-size, 14px) !important;
    font-weight: var(--bbe-cm-body-weight, 400) !important;
}

/* flex-basis math accounts for the 16px gap already set on the card's
   flex container above, so two of these plus the gap between them sum
   correctly to the full row width — no position-counting involved, so
   it can never break based on what other fields surround it. */
.bbe-cm-layout-half {
    flex: 1 1 calc(50% - 8px) !important;
}

.bbe-cm-form-submit {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 6px !important;
    background-color: var(--e-global-color-primary, #e07856) !important;
    color: #ffffff !important;
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

.bbe-cm-form-submit:hover {
    opacity: 0.9 !important;
}

.bbe-cm-form-submit:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

.bbe-cm-form-message {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: var(--bbe-cm-body-align, center) !important;
    padding: 32px !important;
    background-color: #ffffff !important;
    color: #2e7d32 !important; /* solid green, readable on white */
    border-radius: inherit !important; /* match the card's own corner roundness */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}