/*
 * SpaceArte enhanced contact form
 * Scoped entirely under .sa-contact-card / .sa-contact-form so it can't be
 * fought over by the vendor theme's own .form-control rules elsewhere on
 * the site — same pattern as spacearte-modal.css.
 */
.sa-contact-card {
    background: var(--tl-color-common-white);
    border-radius: 22px;
    padding: 42px;
    box-shadow: 0 24px 60px rgba(20, 16, 8, 0.08);
    border: 1px solid rgba(202, 160, 92, 0.16);
}
.sa-contact-card .sa-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--tl-color-theme-primary);
    margin-bottom: 8px;
}
.sa-contact-card .sa-contact-heading {
    font-family: var(--tl-ff-heading);
    font-size: 26px;
    color: var(--tl-color-heading-primary);
    margin-bottom: 6px;
}
.sa-contact-card .sa-contact-note {
    font-size: 13.5px;
    color: var(--tl-color-grey-1);
    margin-bottom: 28px;
}

.sa-contact-form .form-group.row { margin-left: -10px; margin-right: -10px; }
.sa-contact-form .form-group.row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }

.sa-contact-form .form-item { margin-bottom: 20px; }
.sa-contact-form .form-title {
    color: var(--tl-color-heading-primary) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
.sa-contact-form .form-title .sa-req { color: var(--tl-color-theme-primary); }

.sa-field-icon { position: relative; }

/*
 * "Service Required" is rendered by the nice-select plugin, which swaps the
 * real <select> for a `.nice-select` div and opens its options in an
 * absolutely-positioned `.list` — but neither that div nor its vendor CSS
 * carries a z-index. With every field wrapped in its own position:relative
 * .sa-field-icon, the *next* field's wrapper (Project Details) is a later
 * sibling and, with both stuck at the implicit stacking order z-index:auto,
 * paints over the open dropdown instead of the dropdown floating above it.
 * An explicit z-index while open beats that regardless of DOM order.
 */
.sa-contact-form .nice-select.open { z-index: 40; }
.sa-field-icon > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tl-color-grey-2);
    font-size: 14px;
    pointer-events: none;
    transition: color .15s ease;
}
.sa-field-icon > textarea ~ i { top: 22px; transform: none; }

.sa-contact-form .form-control {
    background-color: #faf8f3 !important;
    border: 1.5px solid #ece6d8 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: var(--tl-color-heading-primary) !important;
    padding: 14px 18px 14px 44px !important;
    font-size: 14.5px !important;
    width: 100%;
    transition: border-color .15s ease, background-color .15s ease;
}
.sa-contact-form textarea.form-control { padding-top: 14px; }
.sa-contact-form .form-control::placeholder { color: var(--tl-color-grey-2) !important; opacity: 1; }
.sa-contact-form .form-control:focus {
    border-color: var(--tl-color-theme-primary) !important;
    background-color: #fff !important;
    outline: none;
}
.sa-contact-form .form-control:focus ~ i,
.sa-field-icon:focus-within > i { color: var(--tl-color-theme-primary); }
.sa-contact-form .form-control:invalid:not(:placeholder-shown) { border-color: #e4b8b8 !important; }

.sa-contact-form .sa-math-check {
    background: #faf8f3;
    border: 1.5px dashed #ece6d8;
    border-radius: 14px;
    padding: 14px 18px;
}
.sa-contact-form .sa-math-check .form-title { margin-bottom: 10px !important; }
.sa-contact-form .sa-math-check.sa-math-invalid { border-color: #e4b8b8; background: #fdf4f4; }
.sa-contact-form .sa-math-check input.form-control { padding-left: 18px !important; max-width: 160px; }

.sa-contact-form #form-messages:empty { display: none; }
.sa-contact-form #form-messages.alert-success {
    background: #eaf7ee; color: #196534; border: 1px solid #bfe6cb;
    border-radius: 12px; padding: 12px 16px; font-size: 13.5px;
}
.sa-contact-form #form-messages.alert-danger {
    background: #fdecec; color: #a11d1d; border: 1px solid #f3c6c6;
    border-radius: 12px; padding: 12px 16px; font-size: 13.5px;
}

.sa-contact-form .submit-btn { margin-top: 6px; }
.sa-contact-form .submit-btn .tl-primary-btn {
    background-color: var(--tl-color-theme-primary) !important;
    color: #201a0d !important;
    border-color: var(--tl-color-theme-primary) !important;
    padding: 13px 20px 13px 30px;
    font-weight: 600;
}
.sa-contact-form .submit-btn .tl-primary-btn:hover { filter: brightness(1.05); }
.sa-contact-form .submit-btn .tl-primary-btn:disabled { opacity: .75; cursor: default; }

@media (max-width: 767px) {
    .sa-contact-card { padding: 26px 20px; }
}