/* Tokens come from the THEME, not from this file. Blocksy publishes the
   button and form-field settings as CSS variables, so the picker inherits
   whatever the site is set to (currently: lime CTA on dark green, 16px
   radius, tinted 55px fields, navy ink, Geologica). The hex fallbacks are
   the values read off the live footer on 2026-08-01, for the case where a
   variable is ever unset. */
.kfb {
    --kfb-ink:      var(--theme-palette-color-1, #021A51);
    --kfb-field-bg: rgba(16, 20, 23, .08);
    --kfb-field-bd: rgba(225, 232, 237, .03);
    --kfb-radius:   var(--theme-button-border-radius, 16px);
    --kfb-cta:      var(--theme-button-background-initial-color, #E8EA81);
    --kfb-cta-ink:  var(--theme-button-text-initial-color, #25453C);
    color: var(--kfb-ink);
    font-size: 16px;
}
.kfb__title { font-weight: 600; margin: 0 0 12px; }

/* Toggle: the two states are "quiet field" and "solid CTA", the same visual
   pair the site already uses for input vs button — no third colour. */
.kfb__toggle {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; width: min(100%, 680px); margin: 0 auto 22px; padding: 6px;
    border: 1px solid rgba(2, 26, 81, .08); border-radius: calc(var(--kfb-radius) + 4px);
    background: rgba(255, 255, 255, .36);
}
.kfb__tab {
    appearance: none; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700;
    line-height: 1.2; padding: 14px 16px; min-width: 0; min-height: 58px;
    border: 0; border-radius: var(--kfb-radius);
    background: transparent; color: var(--kfb-ink);
    overflow-wrap: anywhere;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.kfb__tab.is-on {
    background: var(--kfb-cta); color: var(--kfb-cta-ink);
    box-shadow: 0 3px 10px rgba(2, 26, 81, .1);
}
.kfb__tab:focus-visible { outline: 2px solid var(--kfb-ink); outline-offset: 2px; }

.kfb__row { display: flex; flex-wrap: wrap; gap: 14px; }
.kfb__field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kfb__label { font-size: 15px; font-weight: 600; }
.kfb__select {
    width: 100%; height: 55px; padding: 0 15px;
    border: 1px solid var(--kfb-field-bd); border-radius: var(--kfb-radius);
    background: var(--kfb-field-bg); color: var(--kfb-ink);
    font: inherit; font-size: 16px;
}
.kfb__select:disabled { opacity: .5; }
.kfb__select:focus-visible { outline: 2px solid var(--kfb-ink); outline-offset: 1px; }

.kfb__slots { margin-top: 16px; }
.kfb__hint { margin: 0; font-size: 15px; opacity: .8; }
.kfb__days, .kfb__times { display: flex; flex-wrap: wrap; gap: 8px; }
.kfb__days { margin-bottom: 12px; }
.kfb__day, .kfb__time {
    appearance: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600;
    min-height: 46px; padding: 0 16px;
    border: 1px solid var(--kfb-field-bd); border-radius: var(--kfb-radius);
    background: var(--kfb-field-bg); color: var(--kfb-ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.kfb__day { flex-direction: column; gap: 1px; padding: 7px 14px; line-height: 1.15; }
.kfb__day small { font-size: 12px; font-weight: 400; opacity: .75; }
.kfb__day.is-on, .kfb__time.is-on {
    background: var(--kfb-cta); color: var(--kfb-cta-ink); border-color: transparent;
}
.kfb__day:focus-visible, .kfb__time:focus-visible { outline: 2px solid var(--kfb-ink); outline-offset: 2px; }

.kfb__chosen { margin: 14px 0 0; font-size: 15px; font-weight: 700; }
.kfb__submit {
    appearance: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
    margin-top: 16px; width: 100%; min-height: 50px; padding: 5px 20px;
    border: 0; border-radius: var(--kfb-radius);
    background: var(--kfb-cta); color: var(--kfb-cta-ink);
}
.kfb__submit[disabled] { opacity: .45; cursor: default; }

/* The CF7 form inside the contact panel is the theme's own styling — only
   strip the top margin the theme gives a standalone form. */
.kfb__panel .wpcf7 { margin-top: 0; }

@media (min-width: 720px) {
    .kfb__submit { width: auto; min-width: 200px; }
}
@media (max-width: 359.98px) {
    .kfb__toggle { grid-template-columns: 1fr; }
    .kfb__tab { min-height: 44px; }
}
/* The CF7 honeypot must stay hidden: never blanket-show inputs in here. */
.kfb .kinea-cf7-trap { position: absolute !important; left: -9999px !important; }