/* ===================================================================
   FABRIXA — Contact Form 7 overrides
   Drop into: brighthub-fabrixa/assets/css/contact-cf7.css
   Auto-enqueued via fabrixa_auto_enqueue_assets_css().
   Aligns CF7's auto-generated wrapper markup with our existing
   .fbx-cn-form-row / .fbx-cn-form-field / .fbx-cn-form-checkbox styling.
   =================================================================== */

/* Wrap CF7 form in our existing form chrome */
.fbx-page-contact .wpcf7 form {
    background: #18202D;
    border: 1px solid rgba(240, 240, 240, 0.08);
    border-radius: 4px;
    padding: 48px 40px;
}

@media (max-width: 720px) {
    .fbx-page-contact .wpcf7 form {
        padding: 32px 24px;
    }
}

/* CF7 wraps every input in <span class="wpcf7-form-control-wrap">.
   Make sure those spans don't break our flex column layout. */
.fbx-page-contact .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* CF7 by default wraps inputs in <p>. Reset margins. */
.fbx-page-contact .wpcf7 p {
    margin: 0;
}

/* Match input styling to the static-form spec */
.fbx-page-contact .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 14px 18px;
    background: #0E141D;
    color: #F0F0F0;
    border: 1px solid rgba(240, 240, 240, 0.08);
    border-radius: 2px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .15s ease, background .15s ease;
    box-sizing: border-box;
}

.fbx-page-contact .wpcf7-form-control:focus {
    outline: none;
    border-color: #E95121;
    background: #18202D;
}

.fbx-page-contact .wpcf7-form-control::placeholder {
    color: #4F5663;
}

/* Textarea specifics */
.fbx-page-contact .wpcf7-textarea {
    resize: vertical;
    min-height: 140px;
}

/* Select dropdown arrow (CF7 strips our select chevron, restore it) */
.fbx-page-contact select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #9AA4B2 50%),
        linear-gradient(135deg, #9AA4B2 50%, transparent 50%);
    background-position:
        calc(100% - 22px) 22px,
        calc(100% - 16px) 22px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* Checkbox (CF7 wraps differently than our static markup) */
.fbx-page-contact .wpcf7-list-item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
}

.fbx-page-contact .wpcf7-list-item-label {
    color: #9AA4B2;
    font-size: 0.9375rem;
    line-height: 1.5;
    flex: 1;
}

.fbx-page-contact .wpcf7-list-item input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #E95121;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Submit button — CF7 calls it pxl-button via class:pxl-button in form template */
.fbx-page-contact input.pxl-button[type="submit"],
.fbx-page-contact .wpcf7-submit {
    background: #E95121 !important;
    color: #18202D !important;
    border: 0 !important;
    padding: 16px 36px !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: 2px !important;
    cursor: pointer;
    transition: background .15s ease;
}

.fbx-page-contact input.pxl-button[type="submit"]:hover,
.fbx-page-contact .wpcf7-submit:hover {
    background: #F0F0F0 !important;
    color: #18202D !important;
}

/* CF7 status messages */
.fbx-page-contact .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 16px 20px !important;
    border-radius: 2px !important;
    border: 1px solid rgba(240, 240, 240, 0.12) !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #F0F0F0;
}

.fbx-page-contact .wpcf7 form.sent .wpcf7-response-output {
    border-color: #28C940 !important;
    background: rgba(40, 201, 64, 0.08);
    color: #A7F3D0;
}

.fbx-page-contact .wpcf7 form.invalid .wpcf7-response-output,
.fbx-page-contact .wpcf7 form.failed .wpcf7-response-output {
    border-color: #E95121 !important;
    background: rgba(233, 81, 33, 0.08);
    color: #FFC4A8;
}

/* Per-field validation messages */
.fbx-page-contact .wpcf7-not-valid-tip {
    color: #FFC4A8 !important;
    font-size: 0.8125rem !important;
    margin-top: 6px !important;
    display: block;
}

.fbx-page-contact .wpcf7-form-control.wpcf7-not-valid {
    border-color: #E95121 !important;
}

/* Loader spinner */
.fbx-page-contact .wpcf7-spinner {
    background-color: #E95121 !important;
}

/* ===================================================================
   CF7 v2 — fix the two stragglers (selects + checkbox wrappers)
   =================================================================== */

/* SELECTS — beat browser defaults with !important + appearance overrides.
   Both Chrome and Safari fall back to OS-native styling unless we
   force appearance:none AND specify all visual properties. */
.fbx-page-contact .wpcf7 select,
.fbx-page-contact select.wpcf7-form-control,
.fbx-page-contact form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #0E141D !important;
    color: #F0F0F0 !important;
    border: 1px solid rgba(240, 240, 240, 0.08) !important;
    border-radius: 2px !important;
    padding: 14px 40px 14px 18px !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    width: 100% !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #9AA4B2 50%),
        linear-gradient(135deg, #9AA4B2 50%, transparent 50%) !important;
    background-position:
        calc(100% - 22px) 22px,
        calc(100% - 16px) 22px !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
}

.fbx-page-contact .wpcf7 select:focus {
    border-color: #E95121 !important;
}

/* The dropdown options themselves (rendered by the OS, but we can
   hint dark-mode preference) */
.fbx-page-contact .wpcf7 select option {
    background: #0E141D;
    color: #F0F0F0;
}

/* CHECKBOX — kill CF7's default list-item wrapper artifacts */
.fbx-page-contact .wpcf7 .wpcf7-list-item {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: 100%;
}

.fbx-page-contact .wpcf7 .wpcf7-list-item input[type="checkbox"] {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #E95121;
    flex-shrink: 0;
    cursor: pointer;
}

.fbx-page-contact .wpcf7 .wpcf7-list-item-label {
    color: #9AA4B2 !important;
    font-size: 0.9375rem;
    line-height: 1.5;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* Belt-and-braces — kill any default styling on the wrap */
.fbx-page-contact .wpcf7 .wpcf7-form-control-wrap {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* NUCLEAR — beat any browser default + theme rule for selects */
html body.fbx-page-contact .wpcf7 form select,
html body.fbx-page-contact form select,
html body .fbx-page-contact select.wpcf7-form-control,
html body select.wpcf7-form-control.wpcf7-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #0E141D !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #9AA4B2 50%),
        linear-gradient(135deg, #9AA4B2 50%, transparent 50%) !important;
    background-position:
        right 22px top 22px,
        right 16px top 22px !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
    color: #F0F0F0 !important;
    border: 1px solid rgba(240, 240, 240, 0.08) !important;
    border-radius: 2px !important;
    padding: 14px 40px 14px 18px !important;
    font-family: Poppins, system-ui, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* ===================================================================
   BRIGHTHUB SELECT OVERLAY — beat .pxl-select-higthlight (their typo)
   The parent theme overlays every <select> with a custom div.
   Style that div instead, plus hide its built-in chevron icon since
   we're rendering our own via linear-gradient.
   =================================================================== */

.fbx-page-contact .pxl-select .pxl-select-higthlight,
body .fbx-page-contact .pxl-select .pxl-select-higthlight {
    background-color: #0E141D !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #9AA4B2 50%),
        linear-gradient(135deg, #9AA4B2 50%, transparent 50%) !important;
    background-position:
        right 22px center,
        right 16px center !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(240, 240, 240, 0.08) !important;
    border-radius: 2px !important;
    color: #F0F0F0 !important;
    padding: 14px 40px 14px 18px !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
}

/* The wrapper itself shouldn't add chrome */
.fbx-page-contact .pxl-select {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide BrightHub's built-in chevron icon (we have our own) */
.fbx-page-contact .pxl-select .pxl-select-higthlight i,
.fbx-page-contact .pxl-select .pxl-select-higthlight svg,
.fbx-page-contact .pxl-select .pxl-select-higthlight [class*="caseicon"],
.fbx-page-contact .pxl-select .pxl-select-higthlight [class*="arrow"] {
    display: none !important;
}

/* Hover + focus */
.fbx-page-contact .pxl-select:hover .pxl-select-higthlight,
.fbx-page-contact .pxl-select:focus-within .pxl-select-higthlight {
    border-color: #E95121 !important;
}

/* When BrightHub opens the dropdown it might render a list — make sure that's dark too */
.fbx-page-contact .pxl-select ul,
.fbx-page-contact .pxl-select .pxl-select-list {
    background: #0E141D !important;
    border: 1px solid rgba(240, 240, 240, 0.08) !important;
    border-radius: 2px !important;
}

.fbx-page-contact .pxl-select ul li,
.fbx-page-contact .pxl-select .pxl-select-list li {
    color: #F0F0F0 !important;
    background: transparent !important;
    padding: 10px 18px !important;
}

.fbx-page-contact .pxl-select ul li:hover,
.fbx-page-contact .pxl-select .pxl-select-list li:hover {
    background: rgba(233, 81, 33, 0.08) !important;
    color: #E95121 !important;
}
/* Kill any darker band on the checkbox wrapper */
.fbx-page-contact .wpcf7-acceptance,
.fbx-page-contact span[class*="wpcf7"][class*="checkbox"],
.fbx-page-contact .wpcf7-form-control-wrap[data-name="updates"],
.fbx-page-contact .fbx-cn-form-checkbox {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Match the checkbox row's surrounding padding to the rest of the form */
.fbx-page-contact .wpcf7 form > div:has(.wpcf7-acceptance),
.fbx-page-contact .wpcf7 form .fbx-cn-form-row[style*="margin-top:8px"] {
    background: transparent !important;
    padding: 0 !important;
}