/* Contact form component.
 *
 * Built against the canonical palette.css tokens rather than local hex values — frontend.css states
 * the preference for `--cil-<color>-*` directly in new code, and the `--cil-l-*` aliases are scoped
 * to .cil-landing-page so they are not available here.
 *
 * Geometry follows the landing-page frontend language: 10px card radius, 999px pill actions,
 * generous padding that scales with the viewport, and a 1200px measure.
 *
 * Logical properties throughout, so one file serves RTL and LTR.
 */

.cf-form {
    --cf-field-height: 56px;
    --cf-radius: 10px;
    --cf-gap: 28px;
    --cf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Matches the FAQ accordion icon: same easing, same duration. */
    --cf-chevron-duration: 0.32s;

    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    padding: clamp(24px, 3vw, 44px);
    /* The heading and note sit right above the card; full padding up top doubles their spacing. */
    padding-top: clamp(18px, 2vw, 26px);
    background: var(--cil-white);
    border: 1px solid var(--cil-black-light-6);
    border-radius: var(--cf-radius);
}
.cf-form * { box-sizing: border-box; }

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cf-gap);
    width: 100%;
    flex: 1 1 100%;
}
.cf-field--full { grid-column: 1 / -1; }

/* Control comes first in the DOM so a sibling selector can react to its state. Visual order is
   restored with `order` rather than column-reverse: reversing also flipped the error message to the
   top of the field, far from the control it describes. */
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-label { order: 1; }
.cf-field > .cf-input,
.cf-field > .cf-select,
.cf-field > .cf-textarea,
.cf-field > .cil-select { order: 2; }
.cf-error { order: 3; }

/* Labels are visible and stay visible. Each field previously carried an empty <label> and was
   identified only by its placeholder, which disappears as soon as the field has content. */
.cf-label {
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: var(--cil-black);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s var(--cf-ease), transform 0.18s var(--cf-ease);
}
/* Revealed while the field is focused, and kept while it holds a value. */
.cf-input:focus + .cf-label,
.cf-textarea:focus + .cf-label,

.cf-input:not(:placeholder-shown) + .cf-label,
.cf-textarea:not(:placeholder-shown) + .cf-label,
.cf-field--select:focus-within .cf-label,
.cf-field--filled .cf-label {
    opacity: 1;
    transform: translateY(0);
}
/* The placeholder has done its job once the label is showing. */
.cf-input:focus::placeholder,
.cf-textarea:focus::placeholder { opacity: 0; }

.cf-input,
.cf-select,
.cf-textarea {
    width: 100%;
    min-height: var(--cf-field-height);
    padding: 16px 20px;
    background: var(--cil-white);
    border: 1px solid var(--cil-black-regular-3);
    border-radius: var(--cf-radius);
    color: var(--cil-black);
    font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
    font-size: 17px;
    line-height: 24px;
    transition: border-color 0.18s var(--cf-ease), box-shadow 0.18s var(--cf-ease);
}
.cf-textarea { min-height: 180px; resize: vertical; }

/* Browsers force LTR on type="tel" regardless of the inherited direction, which stranded the
   Hebrew placeholder's asterisk on the wrong side. Empty: inherit the page direction so the
   placeholder reads like every other field. With content: back to LTR so digits and dashes keep
   their order, still aligned to the reading edge. */
.cf-input[type="tel"] { direction: inherit; text-align: start; }
.cf-input[type="tel"]:not(:placeholder-shown) { direction: ltr; text-align: left; }
.lang-to-css-rtl .cf-input[type="tel"]:not(:placeholder-shown) { text-align: right; }

.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--cil-black-regular-8); }

.cf-input:hover,
.cf-select:hover,
.cf-textarea:hover { border-color: var(--cil-black-regular-6); }

/* A 1px outline was the only focus signal. This reads at a glance without shifting layout. */
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
    outline: none;
    border-color: var(--cil-green);
    box-shadow: 0 0 0 3px var(--cil-green-light-3);
}
.cf-input:focus-visible,
.cf-select:focus-visible,
.cf-textarea:focus-visible { outline: 2px solid var(--cil-green); outline-offset: 2px; }

/* Native arrow hidden so the control matches the text fields in both directions. */
/* select.css is written against the semantic tokens defined in popup-admin/assets/base.css —
   --cil-surface-1, --cil-border, --cil-blue-soft and friends. Only palette.css is loaded on the
   frontend, so those resolved to nothing and rules that depend on them silently did nothing: the
   option hover background was missing entirely. Declaring them on this component supplies exactly
   what the listbox needs, without pulling admin chrome onto the site. Values mirror base.css. */
.cf-field--select {
    --cil-surface-1: #F6F6F6;
    --cil-border:    #D0D1D1;
    --cil-text:      #323333;
    --cil-text-muted:#858787;
    --cil-blue-soft: #D8EFF2;
    /* base.css uses #205B62 here, which is 6.42:1 on the hover fill — legible by measurement but
       thin at 16px, blue on blue. blue-dark-3 keeps the accent relationship at 9.19:1. This token
       colours both the hovered and the selected option, so they stay consistent. */
    --cil-blue-dark: #174248;
    --cil-radius-sm: 8px;
    --cil-radius-md: 12px;
}

/* The subject uses the shared design-system listbox (inc/design-system/select.css), so only the
   sizing needs aligning with the text fields — its open menu, keyboard behaviour and check marks
   all come from the component. */
.cf-field--select .cil-select { width: 100%; }
.cf-field--select .cil-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--cf-field-height);
    padding: 16px 20px;
    padding-inline-end: 46px;
    background: var(--cil-white);
    border: 1px solid var(--cil-black-regular-3);
    border-radius: var(--cf-radius);
    color: var(--cil-black);
    font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
    font-size: 17px;
    line-height: 24px;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.18s var(--cf-ease), box-shadow 0.18s var(--cf-ease);
}
.cf-field--select .cil-select__button:hover { border-color: var(--cil-black-regular-6); }
.cf-field--select .cil-select__button:focus-visible {
    outline: none;
    border-color: var(--cil-green);
    box-shadow: 0 0 0 3px var(--cil-green-light-3);
}
/* The component positions and rotates its own chevron; only the motion is retimed here to match
   the FAQ accordion. Its own colour shifts stay, so hover and open still read as one component. */
.cf-field--select .cil-toolbar__chevron {
    /* --cil-text-muted at rest measured 3.52:1 — technically above the 3:1 floor for a graphic,
       but thin at 12px. The open state used --cil-blue (#70C6D1), lighter still, so the active
       state read weaker than the resting one. Both are darkened here. */
    color: var(--cil-black-regular-8);
    transition: transform var(--cf-chevron-duration) var(--cf-ease), color 0.18s ease;
}
/* Canonical palette token rather than the scoped --cil-blue-dark alias: this element sits inside
   the shared component, and depending on a locally-declared alias here proved unreliable. */
.cf-field--select .cil-select:hover .cil-toolbar__chevron,
.cf-field--select .cil-select.is-open .cil-toolbar__chevron,
.cf-field--select .cil-select__button:focus-visible .cil-toolbar__chevron {
    color: var(--cil-blue-dark-3);
}
.cf-field--select .cil-select__menu { font-size: 16px; }

/* Error state. jQuery Validate adds .error to the control and appends its message element. */
.cf-input.error,
.cf-select.error,
.cf-textarea.error {
    border-color: var(--cil-red);
    background: var(--cil-red-light-1);
}
.cf-input.error:focus,
.cf-select.error:focus,
.cf-textarea.error:focus { box-shadow: 0 0 0 3px var(--cil-red-light-1); }

.cf-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--cil-red-regular-6);
    font-size: 15px;
    line-height: 20px;
}
.cf-error::before { content: "⚠"; flex: 0 0 auto; line-height: 20px; }
.cf-error:empty { display: none; }

.cf-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--cf-gap);
    margin-top: 4px;
}

/* Pill action, matching .cil-l-btn geometry. Fill stays yellow: that is this page's established
   CTA colour, where the landing pages use green. */
.cf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: var(--cf-field-height);
    padding: 14px 44px;
    /* The button is always yellow; what the יצירת קשר screen controls is the accent of the
       hover ring animation, via --cf-accent printed on the form. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--cil-yellow);
    border: 1px solid var(--cil-yellow);
    border-radius: 999px;
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    cursor: pointer;
    /* Same hover behaviour as the landing-page buttons (.cil-l-btn): a light lift with a soft
       shadow, matched timing and easing. */
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cf-submit:hover:not(:disabled) {
    /* Pinned: the theme's global button:hover paints green otherwise. The pill stays yellow and
       the bubbles flood over it. */
    background: var(--cil-yellow);
    border-color: var(--cil-yellow);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* While sending the button is disabled — :hover still matches a disabled element, and the
   global button:hover would paint it green. Pinned yellow with no lift and no bubbles: the
   busy state should read as inert, not broken. */
.cf-submit:disabled,
.cf-submit:disabled:hover {
    background: var(--cil-yellow);
    border-color: var(--cil-yellow);
    transform: none;
    box-shadow: none;
    cursor: default;
}
/* The hover animation is the landing Bubble Coloring Button (hero.css): four circles rise from
   the bottom and flood the pill in the configured accent while the pointer rests on it. The
   bubbles, not the button, are what the admin colour picker changes. */
.cf-submit > span:not(.cf-submit__label) {
    position: absolute;
    bottom: -50%;
    width: 25%;
    height: 100%;
    background: var(--cf-accent, var(--cil-blue));
    border-radius: 50%;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
    pointer-events: none;
    transform: translateY(150%);
    will-change: transform;
}
/* Outer bubbles first, middle follow — the fill closes inward from the sides (inverted from the
   landing original, per Oren). */
.cf-submit > span:nth-child(2) { left:  0%; transition-delay: 0.05s; }
.cf-submit > span:nth-child(3) { left: 25%; transition-delay: 0.20s; }
.cf-submit > span:nth-child(4) { left: 50%; transition-delay: 0.20s; }
.cf-submit > span:nth-child(5) { left: 75%; transition-delay: 0.05s; }
.cf-submit__label { position: relative; z-index: 1; }

.cf-submit:hover:not(:disabled) > span:not(.cf-submit__label),
.cf-submit:focus-visible > span:not(.cf-submit__label) {
    transform: translateY(-50%) scale(1.6);
}
.cf-submit:active:not(:disabled) { transform: scale(0.98); }
.cf-submit:focus-visible { outline: 2px solid var(--cil-black); outline-offset: 3px; }
.cf-submit:disabled { cursor: default; opacity: 0.75; }

/* In flight: a turning ring, so a slow send reads as working rather than stuck. */
.cf-submit.is-busy { position: relative; padding-inline-end: 56px; }
.cf-submit.is-busy::after {
    content: "";
    position: absolute;
    inset-inline-end: 24px;
    top: 50%;
    width: 16px; height: 16px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cf-spin 0.6s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
    .cf-form { --cf-gap: 20px; }
    .cf-grid { grid-template-columns: 1fr; }
    .cf-actions { flex-direction: column; align-items: stretch; }
    .cf-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-input, .cf-select, .cf-textarea, .cf-submit { transition: none; }
    .cf-submit.is-busy::after { animation: none; }
    .cf-submit > span:not(.cf-submit__label) { transition: none; }
}

/* The required-fields note: a quiet caption under the heading rather than a bare paragraph.
   The star carries the same mark the fields use, so the note visibly explains them. */
.cf-requiredNote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 12px;
    padding: 6px 14px;
    background: var(--cil-surface-1, #F6F6F6);
    border-radius: 999px;
    color: var(--cil-black-regular-6, #6A6C6C);
    font-size: 14px;
    line-height: 18px;
}
.cf-requiredNote__star {
    color: var(--cil-red);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px;
    line-height: 1;
    transform: translateY(2px);
}