/**
 * Elementor Forms → dooble/tarbutmovement visual parity layer.
 *
 * Two source styles coexist on tarbutmovement.org:
 *   A) CF7-origin (dooble theme custom): transparent bg, 2px solid black box,
 *      21px Fedra, color #430047, floating-label pattern (placeholder only),
 *      2-column RTL grid, purple pill submit "שלחו אותי".
 *   B) WPForms-origin (plugin default + Fedra): white bg, 1px rgba(0,0,0,.25)
 *      border, 16px Fedra, color rgba(0,0,0,.7), radius 3px, visible labels,
 *      1-column layout, blue submit "שליחה".
 *
 * Detection: CF7-origin templates mark floating-label fields with a
 * `hideInputsLabel` CSS class on the input. We branch styling with :has().
 *
 * Verified against prod computed styles on 2026-04-20.
 */

/* ---------- Base (all Elementor forms) ---------- */

.elementor-form,
.elementor-form *,
.elementor-form input,
.elementor-form textarea,
.elementor-form select,
.elementor-form button,
.elementor-form label,
.elementor-form .elementor-button,
.elementor-form .elementor-button-text,
.elementor-form .elementor-button-content-wrapper,
.elementor-form .elementor-field-label,
.elementor-form .elementor-field-option,
.elementor-form .elementor-message {
    font-family: 'Fedra Sans H', arial !important;
}

.elementor-form {
    direction: rtl;
}

.elementor-form .elementor-field {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.elementor-form .elementor-field-group {
    visibility: visible !important;
    opacity: 1 !important;
}

.elementor-form .elementor-field::placeholder {
    opacity: 1 !important;
    font-family: 'Fedra Sans H', arial !important;
}

.elementor-form .elementor-field:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   A) CF7-origin style (floating-label, 2-column, purple pill)
   Triggered when any field in the form has the `hideInputsLabel` marker.
   ========================================================================== */

/* 2-column RTL grid for CF7-origin forms */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-form-fields-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 22px 25px;
    direction: rtl;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    grid-column: span 1;
}

/* Full-width groups within CF7-origin 2-col grid */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-textarea,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-upload,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-acceptance,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-submit,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-html,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group:has(.elementor-field[name*="notes"]),
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .e-form__buttons {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-form-fields-wrapper {
        grid-template-columns: 1fr;
    }
}

/* CF7-style fields: 2px black solid box, transparent, 21px */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field.elementor-field-textual,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="text"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="email"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="tel"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="url"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="number"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) input.elementor-field[type="date"],
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) select.elementor-field,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) textarea.elementor-field {
    background: transparent !important;
    background-color: transparent !important;
    width: 100% !important;
    height: 45px !important;
    line-height: 35px !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    font-size: 21px !important;
    color: #430047 !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) textarea.elementor-field {
    height: 90px !important;
    line-height: 25px !important;
    resize: none !important;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field.elementor-field-textual:focus {
    border-color: #430047 !important;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field::placeholder {
    color: rgba(67, 0, 71, 0.5) !important;
}

/* CF7-origin: hide labels on fields tagged hideInputsLabel (floating-label pattern) */
.elementor-form .elementor-field-group:has(input.hideInputsLabel) > label.elementor-field-label,
.elementor-form .elementor-field-group:has(textarea.hideInputsLabel) > label.elementor-field-label,
.elementor-form .elementor-field-group:has(select.hideInputsLabel) > label.elementor-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* CF7-origin: surface notes/textarea/message labels (prod shows these) */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-textarea > label.elementor-field-label,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group[class*="field-group-textarea"] > label.elementor-field-label,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group[class*="field-group-notes"] > label.elementor-field-label,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group[class*="field-group-message"] > label.elementor-field-label,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group:has(input:not(.hideInputsLabel)[name*="notes"]) > label.elementor-field-label,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-group:has(textarea:not(.hideInputsLabel)) > label.elementor-field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    display: block !important;
    color: #430047 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}

/* CF7-origin submit: purple pill, min-width 225, 21px/500 */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .elementor-field-type-submit,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) .e-form__buttons {
    text-align: center !important;
    padding-top: 16px !important;
    justify-content: center !important;
    display: flex !important;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) button[type="submit"].elementor-button {
    background-color: #430047 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 100px !important;
    min-width: 225px !important;
    width: auto !important;
    min-height: 47px !important;
    height: 47px !important;
    padding: 5px 20px !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer;
    box-shadow: none !important;
    text-align: center !important;
}

.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) button[type="submit"].elementor-button:hover {
    background-color: #5a1a5f !important;
}

/* CF7-origin paper-plane icon via ::after (single arrow, prevents doubling) */
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) button[type="submit"].elementor-button .elementor-button-content-wrapper::after,
.elementor-form:has(input.hideInputsLabel, textarea.hideInputsLabel) button[type="submit"].elementor-button > span.elementor-button-text::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 15px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='15' viewBox='0 0 18 15'><path d='M17.9924 15L0.000976384 7.5L17.9924 0L18.001 5.83333L5.14383 7.5L18.001 9.16667L17.9924 15Z' fill='%23ffffff'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.elementor-form button[type="submit"].elementor-button .elementor-button-icon,
.elementor-form button[type="submit"].elementor-button svg.e-font-icon-svg {
    display: none !important;
}

/* ==========================================================================
   B) WPForms-origin style (labels visible, 1-col, blue rect button)
   Default for any Elementor form without hideInputsLabel markers.
   ========================================================================== */

/* Fields: white bg, 1px rgba(0,0,0,0.25) border, 16px, radius 3px */
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) .elementor-field.elementor-field-textual,
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) select.elementor-field,
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) textarea.elementor-field {
    background: #ffffff !important;
    background-color: #ffffff !important;
    width: 100% !important;
    height: 43px !important;
    line-height: 1.4 !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 3px !important;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.7) !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) textarea.elementor-field {
    height: 120px !important;
    padding: 10px 14px !important;
    resize: vertical !important;
}

.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) .elementor-field::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
}

.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) .elementor-field.elementor-field-textual:focus,
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) textarea.elementor-field:focus,
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) select.elementor-field:focus {
    border-color: rgba(0, 0, 0, 0.55) !important;
}

/* WPForms-origin: surface all labels */
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) .elementor-field-group > label.elementor-field-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    display: block !important;
    color: rgba(0, 0, 0, 0.85) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}

.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) .elementor-field-group {
    margin-bottom: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 100% !important;
}

/* WPForms-origin submit: blue rect (matches prod wpforms-submit) */
.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) button[type="submit"].elementor-button {
    background-color: rgb(6, 106, 171) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 3px !important;
    min-height: 41px !important;
    padding: 10px 20px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    cursor: pointer;
    box-shadow: none !important;
    text-align: center !important;
}

.elementor-form:not(:has(input.hideInputsLabel, textarea.hideInputsLabel)) button[type="submit"].elementor-button:hover {
    background-color: rgb(5, 90, 145) !important;
}

/* ==========================================================================
   Shared: checkboxes, radios, validation, messages
   ========================================================================== */

.elementor-form .elementor-field-type-checkbox .elementor-field-subgroup label,
.elementor-form .elementor-field-type-radio .elementor-field-subgroup label,
.elementor-form .elementor-field-type-acceptance label {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Fedra Sans H', arial !important;
    font-size: 17px !important;
    padding: 6px 0 !important;
    color: #430047 !important;
    gap: 8px !important;
}

.elementor-form input[type="checkbox"],
.elementor-form input[type="radio"] {
    accent-color: #430047;
    width: 18px;
    height: 18px;
}

.elementor-form .elementor-field.elementor-error {
    border-color: #c62828 !important;
}

.elementor-message {
    font-family: 'Fedra Sans H', arial;
    font-size: 17px;
    clear: both;
    margin-top: 15px;
    padding: 10px 14px;
    border-radius: 4px;
}

.elementor-message.elementor-message-success {
    background: #e6f4ea;
    color: #1e7f2c;
}

.elementor-message.elementor-message-danger {
    background: #fde8e8;
    color: #b3261e;
}

/* File upload */
.elementor-form .elementor-field-type-upload input[type="file"] {
    background: #ffffff !important;
    border: 1px dashed rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
    padding: 10px !important;
    width: 100% !important;
}
