/* ==========================================================================
   Bfriend — components.css
   Forms · Dialogs · Quiz wizard · Coverage wheel · Carousels · Accordion
   ========================================================================== */

/* ---------- Form fields ---------- */
.field{display:grid;gap:.3rem;align-content:start} /* start: fields side by side line up at the top even when one has hints */
.field__label{font-weight:700;font-size:var(--fs-400)}
.input,.select{width:100%;min-height:3.25rem;padding:.7rem 1rem;border:1px solid #DFCAC0;border-radius:var(--r-sm);background:#fff;color:var(--text);font-size:var(--fs-400);transition:border-color var(--t),box-shadow var(--t)}
.input::placeholder{color:#9B8378}
.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,182,76,.25)}
.select{appearance:none;background:#fff url(../images/icons/select-caret.svg) no-repeat left 1rem center/.8rem;padding-inline-end:2.5rem}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .combo__input{border-color:var(--c-error);box-shadow:0 0 0 3px rgba(200,64,42,.15)}
.field__error{display:none;font-size:var(--fs-300);color:var(--c-error);font-weight:700;line-height:1.35}
.field.is-invalid .field__error,.choice-group.is-invalid .field__error,.consent.is-invalid .field__error{display:block}
.field__hint{font-size:var(--fs-300);opacity:.8}
.form-grid{display:grid;gap:var(--sp-3)}
.form-grid--2{grid-template-columns:1fr 1fr}
@media (max-width:767px){.form-grid--2{grid-template-columns:1fr}}

/* contact form on green */
.contact-form .input{border-color:transparent}
.contact-form .field__error{color:#fff;background:var(--c-error);padding:.15rem .5rem;border-radius:4px;width:fit-content}
.contact-form .form-grid{margin-bottom:var(--sp-4)}
.contact-form .btn--white{min-height:3.25rem}
.form-status{margin-top:var(--sp-3);padding:.5rem .75rem;border-radius:var(--r-sm);font-size:var(--fs-300);font-weight:700;text-align:center}
.form-status--ok{background:#fff;color:var(--c-green-700)}
.form-status--err{background:var(--c-error);color:#fff}

/* consent checkbox (paw tick) */
.consent{display:grid;gap:.25rem;margin-top:var(--sp-3);font-size:var(--fs-300);line-height:1.45}
.consent label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.consent input{appearance:none;flex:none;width:1.35rem;height:1.35rem;margin-top:.1rem;border:2px solid currentColor;border-radius:4px;background:transparent;display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:#fff url(../images/icons/paw-check-sm.svg) no-repeat center/80%;border-color:#fff}
.consent a{text-decoration:underline}

/* ---------- Dialog base ---------- */
dialog{border:0;padding:0;margin:auto;color:var(--text);background:transparent;max-width:100vw;max-height:100dvh}
dialog::backdrop{background:rgba(48,29,20,.72);backdrop-filter:blur(2px)}
dialog[open]{animation:dlg-in .3s var(--ease)}
@keyframes dlg-in{from{opacity:0;translate:0 1.5rem}}
.dialog-close{position:absolute;z-index:5;inset-inline-end:1rem;top:1rem;width:2.75rem;height:2.75rem;background:url(../images/icons/close-brown.svg) no-repeat center/70%;border-radius:50%;transition:rotate var(--t)}
.dialog-close:hover{rotate:90deg}
.dialog-close--light{background-image:url(../images/icons/close-white.svg)}

/* video */
.video-dialog{width:min(1100px,94vw)}
.video-dialog .dialog-close{inset-inline-end:0;top:-3.25rem}
.video-dialog__frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-md);overflow:hidden}
.video-dialog__frame iframe,.video-dialog__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* service charter (אמנת שירות) */
.charter-dialog{width:min(900px,94vw)}
.charter-dialog__panel{position:relative;max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;padding:clamp(2.75rem,4vw,3.5rem) clamp(1rem,2.5vw,2rem) clamp(1rem,2.5vw,2rem);background:#fff;border-radius:var(--r-lg)}
.charter-dialog__panel img{display:block;width:100%;height:auto}
.charter-dialog .dialog-close{top:.5rem;inset-inline-end:.5rem}

/* ---------- Purchase flow v7 (<dialog id="quiz">) → assets/css/bf7.css (built from src/bf7/css) ---------- */

[data-carousel-prev]:disabled,
[data-carousel-next]:disabled {
  display: none !important;
}