/**
 * Tarbut Forms — base styles + CF7-origin visual parity layer.
 *
 * Adapted from wp-content/themes/dooble/styles/elementor-forms-compat.css
 * (which targets .elementor-form). Selectors have been swapped so the plugin
 * stands on its own and survives Elementor removal.
 *
 * Per-form wrappers (e.g. .hpBtmNsltrForm) layered in the theme's existing
 * style.css/responsive.css continue to apply on top of these defaults.
 */

/* ---------- Base ---------- */

.tarbut-form,
.tarbut-form * {
    font-family: 'Fedra Sans H', arial;
    box-sizing: border-box;
}

.tarbut-form {
    direction: rtl;
}

/* Honor an explicit dir attribute on inner elements (we set dir="ltr" on
   submit buttons when the rendered language is non-Hebrew so neutral
   punctuation like "Join Us!" lands at the visual end). The .tarbut-form
   rule above is 0,1,0 and would otherwise beat the UA's dir-attribute
   mapping via inheritance. */
.tarbut-form [dir="ltr"] {
    direction: ltr;
}

.tarbut-form [dir="rtl"] {
    direction: rtl;
}

/* Honeypot — visually hidden but reachable to bots that DOM-scrape */
.tarbut-form-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Generic input defaults — apply ONLY to elements that explicitly opt into
   our class. Forms that emit the dooble theme's wrapper structure (inputsWrap,
   wpcf7-text, etc.) intentionally do NOT add .tarbut-form-input to inputs so
   the theme's own CSS wins. */
.tarbut-form-input {
    width: 100%;
    padding: 5px 10px;
    margin: 0;
    box-shadow: none;
    outline: none;
}

.tarbut-form-input::placeholder {
    opacity: 1;
    font-family: inherit;
}

.tarbut-form-input:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Submission state ---------- */

.tarbut-form.is-submitting {
    opacity: 0.6;
    pointer-events: none;
}

.tarbut-form-input.is-invalid,
.tarbut-form-input--error {
    border-color: #c62828 !important;
}

/* Wrapper-level error — used for fields where the input itself isn't the
   right thing to outline (checkbox groups, file uploads). Targets the
   field wrapper and tints its label so the user sees what's missing.
   !important is required to beat wpforms-compat.css's
   `div.wpforms-container-full .wpforms-field-label` which has higher
   specificity than our wrapper-class selectors alone. */
.tarbut-form-field--error,
.tarbut-form-field--error .wpforms-field-label,
.tarbut-form-field--error legend.wpforms-field-label,
.tarbut-form-field--error .wpforms-field-label-inline {
    color: #c62828 !important;
}
.tarbut-form-field--error .wpforms-uploader,
.tarbut-form-field--error .tarbut-form-uploader {
    border-color: #c62828 !important;
}

.tarbut-form-message {
    clear: both;
    margin-top: 15px;
    font-size: 17px;
    line-height: 1.4;
    min-height: 0;
    transition: min-height 0.15s ease;
}

.tarbut-form-message:empty {
    margin: 0;
}

.tarbut-form-message--success {
    background: #e6f4ea;
    color: #1e7f2c;
    padding: 10px 14px;
    border-radius: 4px;
}

.tarbut-form-message--error {
    background: #fde8e8;
    color: #b3261e;
    padding: 10px 14px;
    border-radius: 4px;
}

/* ==========================================================================
   CF7-origin parity (2-column RTL grid, 2px black box, purple pill submit)
   Triggered when a field uses the .tarbut-form-input--hide-label modifier.
   Adapted from elementor-forms-compat.css, calibrated against prod 2026-04-20.
   ========================================================================== */

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 25px;
    direction: rtl;
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    grid-column: span 1;
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field--textarea,
.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field--submit,
.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field--html {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-fields {
        grid-template-columns: 1fr;
    }
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-input {
    background: transparent;
    width: 100%;
    height: 45px;
    line-height: 35px;
    border: 2px solid #000;
    border-radius: 0;
    font-size: 21px;
    color: #430047;
    padding: 5px 10px;
    margin: 0;
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-input[type="textarea"],
.tarbut-form:has(.tarbut-form-input--hide-label) textarea.tarbut-form-input {
    height: 90px;
    line-height: 25px;
    resize: none;
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-input:focus {
    border-color: #430047;
}

.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-input::placeholder {
    color: rgba(67, 0, 71, 0.5);
}

/* Hide labels for fields tagged as "label-hidden" (floating-label pattern) */
.tarbut-form .tarbut-form-field:has(.tarbut-form-input--hide-label) > .tarbut-form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* But surface labels on textarea/notes/message fields (prod shows these) */
.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field--textarea > .tarbut-form-label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    color: #430047;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
}

/* CF7-origin submit: purple pill, paper-plane icon, 21px/500 */
.tarbut-form:has(.tarbut-form-input--hide-label) .tarbut-form-field--submit {
    text-align: center;
    padding-top: 16px;
    justify-content: center;
    display: flex;
}

.tarbut-form:has(.tarbut-form-input--hide-label) button.tarbut-form-submit,
.tarbut-form:has(.tarbut-form-input--hide-label) input.tarbut-form-submit {
    background-color: #430047;
    color: #ffffff;
    border: 0;
    border-radius: 100px;
    min-width: 225px;
    width: auto;
    min-height: 47px;
    height: 47px;
    padding: 5px 20px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-align: center;
}

.tarbut-form:has(.tarbut-form-input--hide-label) button.tarbut-form-submit:hover,
.tarbut-form:has(.tarbut-form-input--hide-label) input.tarbut-form-submit:hover {
    background-color: #5a1a5f;
}

.tarbut-form:has(.tarbut-form-input--hide-label) button.tarbut-form-submit::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;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ==========================================================================
   wpforms checkbox/radio visibility — make checked state obvious.
   The dooble theme's `.checkbox` rule only targets wpcf7-style checkboxes;
   wpforms checkboxes were left with browser-default styling that's nearly
   invisible (the user reported this on prod too). Apply a custom-styled
   appearance:none box so the checked state is unambiguous: white box with
   purple border (#430047) when unchecked, purple box with white check when
   checked. Same pattern for radios.
   ========================================================================== */

.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    background: #ffffff;
    border: 2px solid #430047;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}

/* Layout for the wpforms checkbox/radio choice lists. Without this, in RTL
   the checkbox overlaps the label of the adjacent option (the user reported
   "checkboxes over the text"). wpforms-compat.css forces `display:grid` and
   `align-items:flex-start` via `div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li`
   (specificity 0,3,3). Match that specificity with `.wpforms-container .wpforms-field.wpforms-field-checkbox ul li`
   AND load order — but our CSS loads BEFORE wpforms-compat.css, so even at
   equal specificity wpforms wins. Use `!important` only on the layout props
   (`display`, `align-items`, `gap`) that wpforms-compat actively fights us on. */
.wpforms-container .wpforms-field.wpforms-field-checkbox ul,
.wpforms-container .wpforms-field.wpforms-field-radio ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 24px !important;
}

/* Per-field override: when the form's checkbox/radio config sets
   'inline' => false, the field's `wpforms-list-inline` class is omitted by
   form-wpforms.php. Detect that case and stack vertically (matches prod for
   seminar-signing field_13/14 and noar-yotzer-bahanson field_4/etc.). */
.wpforms-container .wpforms-field.wpforms-field-checkbox:not(.wpforms-list-inline) ul,
.wpforms-container .wpforms-field.wpforms-field-radio:not(.wpforms-list-inline) ul {
    flex-direction: column !important;
    gap: 6px !important;
}

.wpforms-container .wpforms-field.wpforms-field-checkbox ul li,
.wpforms-container .wpforms-field.wpforms-field-radio ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0;
    line-height: 1.4 !important;
}

.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline,
.wpforms-container .wpforms-field-radio .wpforms-field-label-inline {
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: #430047;
    line-height: 1.4;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"] {
    border-radius: 3px;
}

.wpforms-container .wpforms-field-radio input[type="radio"] {
    border-radius: 50%;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:checked {
    background: #430047 url(/wp-content/themes/dooble/images/v.svg) center center no-repeat;
    background-size: 12px 12px;
    border-color: #430047;
}

.wpforms-container .wpforms-field-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #430047;
    border-radius: 50%;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:focus,
.wpforms-container .wpforms-field-radio input[type="radio"]:focus {
    outline: 2px solid #82d4ab;
    outline-offset: 2px;
}

/* Suppress wpforms-compat's :before/:after pseudo-elements that paint a blue
   border + checkmark on top of our custom-styled checkbox/radio. With
   appearance:none + our own background+border, those pseudos clash visually
   (the user reported "checked checkbox is still blue"). */
.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:before,
.wpforms-container .wpforms-field-checkbox input[type="checkbox"]:after,
.wpforms-container .wpforms-field-radio input[type="radio"]:before,
.wpforms-container .wpforms-field-radio input[type="radio"]:after {
    display: none !important;
    content: none !important;
}

/* The dooble theme paints a fake 20x20 #430047-bordered box via
   `input[type="checkbox"] + label::before` (and same for radio), assuming the
   real <input> is hidden. We render our OWN visible custom-styled input, so
   the theme's pseudo creates a duplicate ghost-box overlapping the label
   text (the user reported "checkboxes are over the text"). Suppress it. */
.wpforms-container input[type="checkbox"] + label::before,
.wpforms-container input[type="radio"] + label::before,
.wpforms-container input[type="checkbox"] + label::after,
.wpforms-container input[type="radio"] + label::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   Drag-and-drop uploader interaction states.
   Visual layout (cloud icon, dropzone box, "Drag & Drop Files" text) comes
   from wpforms-compat.css; these rules add the dragover highlight,
   selected-filename display, and hide the actual <input type="file">.
   ========================================================================== */

/* wpforms-compat.css has a global reset on `div.wpforms-container-full *`
   (specificity 0,1,1) that zeroes background/border/padding/border-radius on
   ALL descendants. Use a 2-class selector (0,2,0) to win against it. */
.wpforms-container .tarbut-form-uploader {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 28px 20px;
    min-height: 140px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wpforms-container .tarbut-form-uploader:hover {
    border-color: rgba(0, 0, 0, 0.45);
}

.wpforms-container .tarbut-form-uploader .dz-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    color: #430047;
}

.wpforms-container .tarbut-form-uploader .dz-message svg {
    width: 40px;
    height: 40px;
    color: #430047;
}

.wpforms-container .tarbut-form-uploader .modern-title {
    color: #430047;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.wpforms-container .tarbut-form-uploader .modern-title > span {
    text-decoration: underline;
}

/* Visually hide the native file input but keep it in the document flow at
   its natural position. We do NOT use left:-9999px because that triggers a
   horizontal scroll-into-view when the user tabs to the input — pushing the
   whole page off-screen. The clip/clip-path approach is the standard a11y
   "visually hidden" pattern that keeps the input keyboard-reachable without
   moving the viewport. */
.tarbut-form-uploader-input {
    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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.tarbut-form-uploader--dragover {
    background-color: rgba(67, 0, 71, 0.05) !important;
    border-color: #430047 !important;
}

.tarbut-form-uploader-filename {
    display: block;
    margin-top: 8px;
    color: #430047;
    font-weight: 500;
    word-break: break-all;
}

.tarbut-form-uploader--has-file .modern-title {
    opacity: 0.7;
}

/* WPForms-origin styling layer was REMOVED in v0.5.1.

   wpforms-compat.css (loaded only on pages that render a wpforms-template
   form) handles styling for any form using templates/form-wpforms.php.

   Theme-styled forms (newsletter via .hpBtmNsltrForm classes, contact via
   .inputsWrap / .wpcf7-text classes) keep their existing dooble theme
   styling.

   The previous home-grown `:not(:has(.tarbut-form-input--hide-label))` parity
   layer was specificity 0,3,0 and accidentally beat the dooble theme's
   `body input.hpBtmNsltrEmailField` (0,1,2) selector — destroying the
   newsletter's pill layout. Lesson: my plugin's broad `.tarbut-form-*` rules
   must not beat theme selectors that target opt-in classes. Keep parity rules
   scoped to a structural marker that's unique to one template family
   (e.g. `.wpforms-container` for wpforms-style, `.inputsWrap` for dooble-CF7,
   `.hpBtmNsltrForm` for the newsletter). */

/* ==========================================================================
   wpforms-style forms: override wpforms-compat's blue rect submit + dooble's
   full-width submit when the button uses .btnPurple.submitBtn — produces the
   same purple pill + paper-plane icon as the contact form.

   Specificity: `div.wpforms-container-full button.btnPurple.submitBtn` (0,3,2)
   beats wpforms-compat's `div.wpforms-container-full button[type=submit]`
   (0,2,2) and dooble's `.btnPurple.submitBtn { width:100% }` (0,2,0).
   ========================================================================== */

.wpforms-form .wpforms-submit-container {
    text-align: center;
}

/* The :not(:hover):not(:active) modifier matches the specificity wpforms-compat
   uses on its own button rule. Without it, the wpforms blue would still win. */
div.wpforms-container-full button.btnPurple.submitBtn,
div.wpforms-container-full button.btnPurple.submitBtn:not(:hover):not(:active) {
    width: auto;
    min-width: 225px;
    height: 47px;
    background: #430047;
    border: 2px solid #430047;
    color: #ffffff;
    border-radius: 100px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    margin: 0 auto;
}

div.wpforms-container-full button.btnPurple.submitBtn:hover,
div.wpforms-container-full button.btnPurple.submitBtn:active {
    background: #5a1a5f;
    border-color: #5a1a5f;
}

div.wpforms-container-full button.btnPurple.submitBtn .regSubmitIcon {
    margin-right: 0;
    margin-left: 0;
    flex-shrink: 0;
}

/* ==========================================================================
   Dooble-theme checkbox — make checked state visible without CF7's JS.

   Dooble's CSS gives `.wpcf7-list-item-label:before` a 24x24 purple square
   with the check icon hidden at `center -100%`. The check is supposed to slide
   in when the parent <label> gets `.activeLabel` class — which CF7's JS used
   to add. We dropped CF7 so the class never lands; both states looked
   identical.

   Replace with a CSS-only state via `:has(input:checked)`: empty white box
   with purple border when unchecked; filled purple with white check when
   checked.
   ========================================================================== */

body:not(.woocommerce-page) .checkboxItem .wpcf7-list-item-label:before,
body:not(.woocommerce-page) .tarbut-form .checkboxItem .wpcf7-list-item-label:before {
    background: #ffffff !important;
    border: 2px solid #430047;
    box-sizing: border-box;
    margin-left: 8px;
}

body:not(.woocommerce-page) .checkboxItem label:has(input[type="checkbox"]:checked) .wpcf7-list-item-label:before,
body:not(.woocommerce-page) .tarbut-form .checkboxItem label:has(input[type="checkbox"]:checked) .wpcf7-list-item-label:before {
    background: #430047 url(/wp-content/themes/dooble/images/v.svg) center center no-repeat !important;
    border-color: #430047;
}

/* ---------- Checkbox / radio ---------- */

.tarbut-form .tarbut-form-field--checkbox label,
.tarbut-form .tarbut-form-field--radio label {
    display: inline-flex;
    align-items: center;
    font-size: 17px;
    padding: 6px 0;
    color: #430047;
    gap: 8px;
}

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

/* ==========================================================================
   ADDITIVE BLOCK — header registration popup ("logic" form)
   Added 2026-04-25 for the form-logic.php template. Purely scoped under
   `.tarbut-form-logic` so nothing else can be affected.

   The form lives inside the dooble theme's `#reg` yBox popup (header.php).
   Prod presents fields one row at a time stacked vertically, each input being
   a 2px-bordered box with a placeholder. Labels are visually hidden (the
   placeholder text serves as the label).
   ========================================================================== */

/* Hide labels — placeholder text is the visible label, matching prod CF7 form. */
.tarbut-form.tarbut-form-logic .tarbut-form-field > .tarbut-form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Two-column grid (matches prod CF7 popup layout). Pairs of compact fields
   sit side-by-side; full-width fields (selector, address, textareas, submit)
   span both columns. Group wrappers are display:contents so their children
   participate directly in the parent grid. */
.tarbut-form.tarbut-form-logic .tarbut-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    direction: rtl;
}

.tarbut-form.tarbut-form-logic .tarbut-form-logic-group {
    display: contents;
}

.tarbut-form.tarbut-form-logic .tarbut-form-logic-group[hidden] {
    display: none !important;
}

/* Default: every field is one column wide. */
.tarbut-form.tarbut-form-logic .tarbut-form-field {
    display: block;
    margin: 0;
    grid-column: span 1;
}

/* Full-width fields: the selector, address, all textareas, and submit.
   Single-text-input "type" fields (text-583, text-584, menu-100) stay
   half-width to match prod — they sit alone on the LEFT of their row. */
.tarbut-form.tarbut-form-logic .tarbut-form-field[data-name="menu-319"],
.tarbut-form.tarbut-form-logic .tarbut-form-field[data-name="text-54"],
.tarbut-form.tarbut-form-logic .tarbut-form-field--textarea,
.tarbut-form.tarbut-form-logic .tarbut-form-field--submit {
    grid-column: 1 / -1;
}

/* Stack on narrow screens. */
@media (max-width: 600px) {
    .tarbut-form.tarbut-form-logic .tarbut-form-fields {
        grid-template-columns: 1fr;
    }
}

.tarbut-form.tarbut-form-logic .tarbut-form-input {
    width: 100%;
    height: 45px;
    border: 2px solid #000;
    border-radius: 0;
    background: transparent;
    color: #430047;
    font-size: 21px;
    line-height: 35px;
    padding: 5px 10px;
    margin: 0;
    box-sizing: border-box;
}

/* Textareas: collapsed by default (single-line height, looks like a text
   input until user focuses), then expand on focus to give writing room.
   Matches prod's .textareaWrap behaviour. */
.tarbut-form.tarbut-form-logic textarea.tarbut-form-input {
    height: 45px;
    line-height: 33px;
    resize: none;
    overflow: hidden;
    transition: height 0.18s ease;
}

.tarbut-form.tarbut-form-logic textarea.tarbut-form-input:focus,
.tarbut-form.tarbut-form-logic textarea.tarbut-form-input:not(:placeholder-shown) {
    height: 110px;
    line-height: 25px;
    overflow: auto;
}

.tarbut-form.tarbut-form-logic .tarbut-form-input:focus {
    outline: none;
    border-color: #430047;
}

.tarbut-form.tarbut-form-logic .tarbut-form-input::placeholder {
    color: rgba(67, 0, 71, 0.5);
}

/* Submit button — purple pill with paper-plane icon, matches prod's
   .btnPurple.submitBtn. Specificity: `.tarbut-form.tarbut-form-logic
   button.tarbut-form-submit` (0,3,1) is enough to beat the
   `.tarbut-form-input--hide-label` parity layer above. */
.tarbut-form.tarbut-form-logic .tarbut-form-field--submit {
    text-align: center;
    padding-top: 16px;
    margin: 0;
}

.tarbut-form.tarbut-form-logic button.tarbut-form-submit {
    background: #430047;
    border: 2px solid #430047;
    color: #ffffff;
    border-radius: 100px;
    min-width: 225px;
    width: auto;
    height: 47px;
    padding: 5px 30px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.tarbut-form.tarbut-form-logic button.tarbut-form-submit:hover,
.tarbut-form.tarbut-form-logic button.tarbut-form-submit:active {
    background: #5a1a5f;
    border-color: #5a1a5f;
}

.tarbut-form.tarbut-form-logic button.tarbut-form-submit .regSubmitIcon {
    flex-shrink: 0;
}

/* Component #5: popup-form select underline-only styling.
   Prod renders selects with no top/left/right border, only a 2px translucent
   bottom border (`rgba(67,0,71,0.2)`), no padding, custom dropdown chevron.
   Override the broader `.tarbut-form.tarbut-form-logic .tarbut-form-input`
   rule above (which applies `border: 2px solid #000` to all inputs). Higher
   specificity via the `select.tarbut-form-input` element selector. */
.tarbut-form.tarbut-form-logic select.tarbut-form-input {
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-bottom-color: rgba(67, 0, 71, 0.2) !important;
    border-radius: 0;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23430047' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
    background-position: left 8px center;
    padding: 0 0 0 24px;
    height: 40px;
    font-size: 20px;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tarbut-form.tarbut-form-logic select.tarbut-form-input:focus {
    border-bottom-color: rgba(67, 0, 71, 0.6) !important;
    outline: none;
}

/* ==========================================================================
   Global custom dropdown chevron for selects inside our form wrappers.
   Added 2026-04-26 (manual feedback round). Replaces the OS-native dropdown
   arrow with the same SVG chevron we use on the popup form, so all forms
   (wpforms-template, form-contact CF7-style, popup) share visual identity.

   Position: LEFT side of the input (where the visual end-of-line lands in
   RTL). Padding-left clears the chevron so user-typed text doesn't run into
   it.

   Scope: ONLY selects inside .tarbut-form, .wpforms-container, or .inputsWrap
   (the form-contact CF7 wrapper). NOT all selects on the page — must not
   touch dooble theme selects on theme pages.

   The popup-specific rule above (`.tarbut-form.tarbut-form-logic select.tarbut-form-input`)
   already declares its own background-image; this rule won't override it
   because the popup rule has higher specificity (0,2,1) than this one
   (0,1,1).
   ========================================================================== */

.tarbut-form select,
.wpforms-container select,
.inputsWrap select,
div.wpforms-container-full .wpforms-field-select select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%23430047' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    /* No background-color here — defer to each form's own input bg rule so
       selects match the text inputs in the same form (white in wpforms-style
       forms via --wpforms-field-background-color, transparent in the popup
       form via its higher-specificity .tarbut-form-logic select rule). */
    /* Use padding-left, but only override the existing left padding when one
       hasn't been set by a higher-specificity theme rule. We force a min of
       28px on the left so the chevron always has clearance. */
    padding-left: 28px !important;
}

/* IE 10/11 — drop their native combo arrow. */
.tarbut-form select::-ms-expand,
.wpforms-container select::-ms-expand,
.inputsWrap select::-ms-expand {
    display: none;
}

/* ==========================================================================
   Native date input — position the calendar icon on the LEFT in RTL.
   Added 2026-04-26 (manual feedback round, yzmotrabut field_17).

   Chrome's native <input type=date> picker indicator (`::-webkit-calendar-
   picker-indicator`) defaults to the visual END of the input. In an RTL
   form, "end" is the LEFT edge — but only when the input itself has dir=rtl
   or its container is RTL. Force it explicitly.

   The `lang="he-IL"` attribute on the input (set in form-wpforms.php for
   type=date) makes Chrome show dd/mm/yyyy in the placeholder and picker UI.

   Scope: only inside our form wrappers, not theme pages.
   ========================================================================== */

.tarbut-form input[type="date"],
.wpforms-container input[type="date"],
.inputsWrap input[type="date"] {
    direction: ltr;
    text-align: right;
}

.tarbut-form input[type="date"]::-webkit-calendar-picker-indicator,
.wpforms-container input[type="date"]::-webkit-calendar-picker-indicator,
.inputsWrap input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
    margin-right: auto;
    cursor: pointer;
    /* Tint the icon to match the form's purple accent. */
    filter: invert(8%) sepia(85%) saturate(2974%) hue-rotate(283deg) brightness(89%) contrast(98%);
    /* Position on the LEFT visually — the picker indicator is rendered
       inside the input via a UA shadow root; aligning it to the start in
       LTR (which is left) is the default, so dir=ltr above already does it. */
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* ==========================================================================
   form-contact.php — visible-label modifier for textarea fields.
   Added 2026-04-26 (manual feedback round) for afuliz, ensemble-theatre-
   hamama, garin-tmura: the "notes" textarea needs its label rendered above
   the field, and the wrap needs to span 100% width (no 2-col split).

   The dooble theme's .textareaWrap rule already gives 100% width — we just
   add explicit rules so this is robust against any 50% column rule that
   might leak in for the field's odd/even position.
   ========================================================================== */

.inputsWrap.contactFormFullWidthWrap {
    width: 100%;
}

.inputsWrap.contactFormShowLabelWrap .inputsWrapInner {
    padding-top: 0;
}

.inputsWrap.contactFormShowLabelWrap .contactFormVisibleLabel,
.inputsWrap.contactFormShowLabelWrap label.contactFormVisibleLabel {
    /* Override the dooble theme's `.inputsLabel` absolute positioning AND
       its opacity:0 default (the theme expects CF7's JS to add `.activeLabel`
       which would flip opacity to 1; we don't ship that JS, so force it on). */
    position: static !important;
    display: block;
    margin: 0 0 8px 0;
    padding: 0;
    color: #430047;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
    cursor: default;
    width: auto;
    height: auto;
    right: auto !important;
    top: auto !important;
    opacity: 1 !important;
    transition: none;
}

.inputsWrap.contactFormShowLabelWrap .contactFormVisibleLabel > span {
    color: inherit;
    position: static;
}

/* Ensure textarea inside a contactFormShowLabelWrap fills 100% width and
   has prod-matching minimum height. */
.inputsWrap.contactFormShowLabelWrap textarea,
.inputsWrap.contactFormFullWidthWrap textarea,
.tarbut-form .inputsWrap.contactFormFullWidthWrap textarea {
    width: 100% !important;
    min-height: 110px;
    box-sizing: border-box;
}

/* Section heading rendered above a form via the form definition's
   `extra_html_before` key (theatre-club-yifat). Matches prod's H3 styling
   for "טופס השארת פרטים". */
h3.tarbut-form-section-heading {
    color: #430047;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 16px 0;
    text-align: right;
}