/*
 * Core website components: contact form, slide to send, privacy banner.
 * A site restyles them by setting these variables in its own stylesheet (site/assets/css/…):
 *   --cf-accent      buttons, the slider, selected topic       (default green)
 *   --cf-accent-soft light tint of the accent
 *   --cf-ink         text
 *   --cf-muted       hints and notes
 *   --cf-line        field borders
 *   --cf-radius      field corners
 *   --cf-font        font (inherits the page's by default)
 */
:root {
  --cf-accent: #16833F; --cf-accent-soft: #DDF2E3; --cf-ink: #10201A; --cf-muted: #5A6962; --cf-line: #C9D5CE;
  --cf-err: #A3261B; --cf-err-soft: #F6E3E0; --cf-radius: 10px; --cf-font: inherit;
}
.cf { display: grid; gap: 16px; font-family: var(--cf-font); color: var(--cf-ink); }
.cf *, .cf-consent * { box-sizing: border-box; }
.cf-title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.cf-intro { margin: -8px 0 4px; color: var(--cf-muted); font-size: .98rem; }
.cf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .cf-row2 { grid-template-columns: 1fr; } }
.cf .field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .98rem; }
.cf .field .hint { font-weight: 400; color: var(--cf-muted); }
.cf input:not([type=radio]):not([type=checkbox]), .cf select, .cf textarea {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--cf-ink); background: #fff;
  border: 1.5px solid var(--cf-line); border-radius: var(--cf-radius); padding: 11px 13px; margin: 0; }
.cf textarea { min-height: 140px; resize: vertical; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--cf-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 25%, transparent); }
.cf [aria-invalid="true"] { border-color: var(--cf-err) !important; }
.cf-err { color: var(--cf-err); font-size: .92rem; font-weight: 600; margin: 6px 0 0; }
.cf-alert { margin: 0; padding: 12px 14px; border-radius: var(--cf-radius); background: var(--cf-err-soft); color: var(--cf-err); font-weight: 600; }
.cf-alert[hidden] { display: none; }
.cf-note { margin: 0; font-size: .9rem; color: var(--cf-muted); }
.cf-note a { color: inherit; }
.cf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.cf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* topics as buttons (full form) */
.cf .chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cf .chips legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.cf .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf .chips label { display: inline-block; padding: 8px 15px; border: 1.5px solid var(--cf-line); border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; background: #fff; }
.cf .chips input:checked + label { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
.cf .chips input:focus-visible + label { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cf-accent); }

/* compact form: icons inside the fields */
.cf-compact { gap: 12px; }
.cf-in { position: relative; }
.cf-in .cf-ic { position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; fill: none; stroke: var(--cf-muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cf-in input, .cf-in select { padding-left: 42px !important; }
.cf-in select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6962' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.cf-area textarea { min-height: 96px; }

/* slide to send */
.sldr { --p: 0; --max: 200px; position: relative; height: 56px; border-radius: 999px; background: #F1F5F2; border: 1.5px solid var(--cf-line); user-select: none; touch-action: pan-y; overflow: hidden; }
.sldr:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cf-accent); }
.sldr::before { content: ""; position: absolute; inset: 0; width: calc(var(--p) * var(--max) + 52px); background: var(--cf-accent-soft); border-radius: 999px; }
.sldr-hint, .sldr-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; color: var(--cf-ink); pointer-events: none; }
.sldr-hint { opacity: calc(1 - var(--p) * 1.6); padding-left: 40px; }
.sldr-done { opacity: 0; color: var(--cf-accent); }
.sldr.is-sending .sldr-done, .sldr.is-sent .sldr-done { opacity: 1; }
.sldr.is-sending .sldr-hint, .sldr.is-sent .sldr-hint { opacity: 0; }
.sldr-knob { position: absolute; top: 3px; left: 3px; width: 48px; height: 48px; border-radius: 50%; background: var(--cf-accent); display: grid; place-items: center; cursor: grab; transform: translateX(calc(var(--p) * var(--max))); box-shadow: 0 2px 6px rgba(16,32,26,.3); }
.sldr-knob:active { cursor: grabbing; }
.sldr-knob svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sldr-chev { display: inline-flex; gap: 1px; margin-left: 6px; }
.sldr-chev svg { width: 9px; height: 14px; fill: none; stroke: var(--cf-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .25; }
@media (prefers-reduced-motion: no-preference) {
  .sldr-chev svg { animation: cf-chev 1.4s ease-in-out infinite; }
  .sldr-chev svg:nth-child(2) { animation-delay: .18s; }
  .sldr-chev svg:nth-child(3) { animation-delay: .36s; }
  @keyframes cf-chev { 0%, 100% { opacity: .2; transform: translateX(0); } 40% { opacity: 1; transform: translateX(2px); } }
}
@media (prefers-reduced-motion: reduce) { .sldr-chev svg { opacity: .7; } }
.sldr-alt { margin-top: 8px; background: none; border: 0; padding: 4px 0; color: var(--cf-ink); font: inherit; font-size: .92rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* privacy banner */
.cf-consent { position: fixed; left: 16px; bottom: 16px; z-index: 900; max-width: 420px; background: #fff; color: var(--cf-ink); border: 1.5px solid var(--cf-ink); border-radius: 12px; padding: 18px 20px; box-shadow: 0 20px 40px -24px rgba(16,32,26,.5); font-family: var(--cf-font); font-size: .98rem; line-height: 1.5; }
.cf-consent[hidden] { display: none; }
.cf-consent p { margin: 0 0 12px; }
.cf-consent a { color: inherit; }
.cf-consent-actions { display: flex; gap: 10px; }
.cf-btn { min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1.5px solid var(--cf-line); background: #fff; color: var(--cf-ink); font: inherit; font-weight: 700; cursor: pointer; }
.cf-btn-main { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
@media (max-width: 520px) { .cf-consent { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* ---------- icons inside fields (full form) ---------- */
.cf-fiw { position: relative; display: block; }
.cf-fiw .cf-ic { position: absolute; left: 13px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; fill: none; stroke: #8A968F; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .15s; }
.cf .cf-fiw input:not([type=radio]):not([type=checkbox]), .cf .cf-fiw textarea { padding-left: 42px; }
.cf-fi-area .cf-fiw .cf-ic { top: 14px; margin-top: 0; }
.cf-fiw:focus-within .cf-ic { stroke: var(--cf-accent); }
/* topic buttons with icons */
.cf .chips label { display: inline-flex; align-items: center; gap: 8px; }
.cf .chips .chip-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.cf .chips input:checked + label .chip-ic { opacity: 1; }
/* ---------- phone: country flag and code ---------- */
.cf-phone { display: flex; align-items: stretch; border: 1.5px solid var(--cf-line); border-radius: var(--cf-radius); background: #fff; transition: border-color .15s, box-shadow .15s; }
.cf-phone:focus-within { border-color: var(--cf-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 25%, transparent); }
.cf .cf-phone input:not([type=radio]):not([type=checkbox]) { border: 0; box-shadow: none; border-radius: 0 var(--cf-radius) var(--cf-radius) 0; min-width: 0; flex: 1; }
.cf .cf-phone input:focus { box-shadow: none; }
.cf-cc { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; border-right: 1.5px solid var(--cf-line); background: #F6F8F7; border-radius: var(--cf-radius) 0 0 var(--cf-radius); flex: none; cursor: pointer; }
.cf-cc:hover { background: #EEF3F0; }
.cf-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,32,26,.12); flex: none; }
.cf-code { font-weight: 700; font-size: .98rem; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-caret { width: 15px; height: 15px; fill: none; stroke: var(--cf-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cf .cf-cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; font-size: 16px; }
.cf-cc:focus-within { background: #E3F4E8; }
.cf-phone [aria-invalid="true"] { box-shadow: none; }
/* compact form: the phone box replaces the icon */
.cf-in-phone .cf-phone { width: 100%; }

/* ---------- live validation states ---------- */
.cf .field.is-invalid input:not([type=radio]):not([type=checkbox]), .cf .field.is-invalid textarea, .cf .field.is-invalid .cf-phone { border-color: var(--cf-err); background-color: #FFFBFA; }
.cf .field.is-invalid .cf-phone input { background: transparent; }
.cf .field.is-invalid .cf-fiw .cf-ic { stroke: var(--cf-err); }
.cf .field.is-valid .cf-fiw input, .cf .field.is-valid .cf-phone { border-color: #8FD0A5; }
.cf .field.is-valid .cf-fiw .cf-ic { stroke: var(--cf-accent); }
.cf-fiw, .cf-phone { position: relative; }
.cf-okic { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--cf-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s; pointer-events: none; }
.cf .field.is-valid .cf-okic { opacity: 1; transform: scale(1); }
.cf .field.is-valid .cf-fiw input:not([type=radio]):not([type=checkbox]), .cf .field.is-valid .cf-phone input { padding-right: 40px; }
.cf-fi-area .cf-okic { top: 14px; margin-top: 0; }
.cf-err { display: flex; gap: 7px; align-items: flex-start; }
.cf-err::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%; background: var(--cf-err); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
.cf-sug { margin: 6px 0 0; font-size: .92rem; color: var(--cf-ink); }
.cf-sug button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cf-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cf-sug button:hover { color: var(--cf-ink); }
@media (prefers-reduced-motion: reduce) { .cf-okic { transition: none; } }