/**
 * Wygląd formularza rezerwacji.
 *
 * Kolory neutralne są własne (motywy WordPressa bywają dowolne), a jedyny
 * kolor marki to --vcb-accent ustawiany inline z ustawień wtyczki. Krój pisma
 * domyślnie dziedziczymy z motywu — formularz ma wyglądać jak część strony,
 * nie jak wklejona ramka.
 */

.vcb {
    --vcb-bg: #fbfbfd;
    --vcb-surface: #ffffff;
    --vcb-surface-2: #f5f5f7;
    --vcb-text: #1d1d1f;
    --vcb-text-2: #6e6e73;
    --vcb-text-3: #86868b;
    --vcb-border: rgba(0, 0, 0, 0.08);
    --vcb-accent: #14301f;
    --vcb-radius: 14px;
    --vcb-ease: cubic-bezier(0.22, 1, 0.36, 1);

    color: var(--vcb-text);
    box-sizing: border-box;
}

.vcb *,
.vcb *::before,
.vcb *::after { box-sizing: inherit; }

.vcb--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.vcb--inter { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.vcb-heading { margin: 0 0 18px; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; }

.vcb-panel {
    background: var(--vcb-surface);
    border: 1px solid var(--vcb-border);
    border-radius: calc(var(--vcb-radius) + 8px);
    padding: 28px;
    box-shadow: 0 12px 40px -24px rgba(20, 48, 31, 0.25);
}

@media (max-width: 540px) {
    .vcb-panel { padding: 20px 16px; }
}

.vcb-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    padding: 12px 16px;
    border: 1px solid var(--vcb-border);
    border-radius: var(--vcb-radius);
    background: var(--vcb-surface-2);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--vcb-text-2);
}

.vcb-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--vcb-accent); }
.vcb-noscript { margin: 0 0 18px; font-size: 0.9375rem; color: var(--vcb-text-2); }

/* ——— kroki ——— */

.vcb-step { padding: 22px 0; border-top: 1px solid var(--vcb-border); }
.vcb-step:first-of-type { padding-top: 0; border-top: 0; }
.vcb-step.is-locked { opacity: 0.45; pointer-events: none; }

.vcb-step-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }

.vcb-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--vcb-accent) 8%, transparent);
    color: var(--vcb-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

.vcb-num.is-done { background: var(--vcb-accent); color: #fff; }
.vcb-num svg { width: 14px; height: 14px; }

.vcb-step-title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.vcb-step-meta { margin-left: auto; font-size: 0.8125rem; color: var(--vcb-text-3); text-align: right; }

/* ——— usługi i lekarze ——— */

.vcb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 620px) { .vcb-options { grid-template-columns: 1fr; } }

.vcb-option,
.vcb-doctor {
    display: flex;
    text-align: left;
    padding: 13px 15px;
    min-height: 66px;
    border: 1px solid var(--vcb-border);
    border-radius: var(--vcb-radius);
    background: var(--vcb-surface);
    color: var(--vcb-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s var(--vcb-ease), background 0.2s var(--vcb-ease);
}

.vcb-option { flex-direction: column; gap: 3px; align-items: flex-start; }
.vcb-doctor { align-items: center; gap: 14px; width: 100%; min-height: 62px; }

.vcb-option:hover,
.vcb-doctor:hover { border-color: rgba(0, 0, 0, 0.2); }

.vcb-option.is-selected,
.vcb-doctor.is-selected {
    border-color: color-mix(in srgb, var(--vcb-accent) 45%, transparent);
    background: color-mix(in srgb, var(--vcb-accent) 6%, transparent);
}

.vcb-option-name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.vcb-option-meta { font-size: 0.8125rem; color: var(--vcb-text-2); }

.vcb-doctors { display: flex; flex-direction: column; gap: 8px; }

.vcb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--vcb-accent) 8%, transparent);
    color: var(--vcb-accent);
    font-size: 0.8125rem;
    font-weight: 600;
}

.vcb-doctor.is-selected .vcb-avatar { background: var(--vcb-accent); color: #fff; }
.vcb-avatar svg { width: 18px; height: 18px; }
.vcb-doctor-name { display: block; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.vcb-doctor-role { display: block; font-size: 0.8125rem; color: var(--vcb-text-2); margin-top: 2px; }

/* ——— termin ——— */

.vcb-week { display: flex; align-items: center; gap: 8px; }

.vcb-week-nav {
    width: 34px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vcb-border);
    border-radius: 10px;
    background: var(--vcb-surface);
    color: var(--vcb-text-2);
    cursor: pointer;
}

.vcb-week-nav:hover:not(:disabled) { border-color: rgba(0, 0, 0, 0.2); color: var(--vcb-text); }
.vcb-week-nav:disabled { opacity: 0.35; cursor: default; }
.vcb-week-nav svg { width: 16px; height: 16px; }

.vcb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; }

.vcb-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 2px 10px;
    min-height: 60px;
    border: 1px solid var(--vcb-border);
    border-radius: 12px;
    background: var(--vcb-surface);
    color: var(--vcb-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s var(--vcb-ease), background 0.2s var(--vcb-ease);
}

.vcb-day:hover:not(:disabled) { border-color: rgba(0, 0, 0, 0.2); }
.vcb-day:disabled { opacity: 0.4; cursor: default; }

.vcb-day.is-selected {
    border-color: color-mix(in srgb, var(--vcb-accent) 45%, transparent);
    background: color-mix(in srgb, var(--vcb-accent) 6%, transparent);
}

.vcb-day-dow { font-size: 0.6875rem; color: var(--vcb-text-3); }
.vcb-day-num { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.vcb-day-note { font-size: 0.625rem; color: var(--vcb-text-3); }

.vcb-slot-status { margin: 16px 0 0; font-size: 0.875rem; color: var(--vcb-text-2); }
.vcb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.vcb-slots:empty { margin-top: 0; }

.vcb-slot {
    min-height: 44px;
    padding: 10px 6px;
    border: 1px solid var(--vcb-border);
    border-radius: 10px;
    background: var(--vcb-surface);
    color: var(--vcb-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s var(--vcb-ease), background 0.2s var(--vcb-ease), color 0.2s var(--vcb-ease);
}

.vcb-slot:hover { border-color: rgba(0, 0, 0, 0.2); }
.vcb-slot.is-selected { background: var(--vcb-accent); border-color: var(--vcb-accent); color: #fff; }

/* ——— formularz ——— */

.vcb-fields { display: flex; flex-direction: column; gap: 16px; }
.vcb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .vcb-row { grid-template-columns: 1fr; } }

.vcb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vcb-field > span { font-size: 0.8125rem; font-weight: 500; color: var(--vcb-text-2); }
.vcb-field > span i { font-style: normal; color: var(--vcb-text-3); font-weight: 400; }

.vcb-field input,
.vcb-field select,
.vcb-field textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--vcb-text);
    background: var(--vcb-bg);
    border: 1px solid var(--vcb-border);
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s var(--vcb-ease), background 0.2s var(--vcb-ease);
}

.vcb-field textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

.vcb-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.vcb-field input:focus,
.vcb-field select:focus,
.vcb-field textarea:focus {
    outline: none;
    border-color: var(--vcb-accent);
    background: var(--vcb-surface);
}

.vcb-field input.has-error,
.vcb-field select.has-error,
.vcb-field textarea.has-error { border-color: #b91c1c; }

.vcb-consent { display: flex; gap: 10px; align-items: flex-start; }
.vcb-consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--vcb-accent); }
.vcb-consent span { font-size: 0.8125rem; line-height: 1.55; color: var(--vcb-text-2); }

/* Pole-pułapka na boty: poza ekranem, ale bez display:none (część botów je pomija) */
.vcb-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.vcb-error {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.5;
}

.vcb-submit {
    width: 100%;
    min-height: 50px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--vcb-radius);
    background: var(--vcb-accent);
    color: #fff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: filter 0.2s var(--vcb-ease);
}

.vcb-submit:hover:not(:disabled) { filter: brightness(1.12); }
.vcb-submit:disabled { opacity: 0.55; cursor: progress; }
.vcb-note { margin: 0; font-size: 0.78125rem; color: var(--vcb-text-3); }

/* ——— potwierdzenie ——— */

.vcb-success { text-align: center; }

.vcb-tick {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vcb-accent);
    color: #fff;
}

.vcb-tick svg { width: 26px; height: 26px; }
.vcb-success h3 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.vcb-success .vcb-lead { margin: 0 0 22px; font-size: 0.9375rem; color: var(--vcb-text-2); }

.vcb-summary {
    text-align: left;
    padding: 18px 20px;
    border: 1px solid var(--vcb-border);
    border-radius: calc(var(--vcb-radius) + 2px);
    background: var(--vcb-bg);
}

.vcb-summary dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; font-size: 0.875rem; }
.vcb-summary dt { margin: 0; color: var(--vcb-text-3); }
.vcb-summary dd { margin: 0; font-weight: 500; }
@media (max-width: 480px) { .vcb-summary dl { grid-template-columns: 1fr; gap: 2px; } .vcb-summary dd { margin-bottom: 8px; } }

.vcb-next {
    text-align: left;
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: calc(var(--vcb-radius) + 2px);
    background: color-mix(in srgb, var(--vcb-accent) 6%, transparent);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--vcb-text-2);
}

.vcb-next strong { display: block; margin-bottom: 4px; color: var(--vcb-text); }

/* ——— stopka i komunikaty ——— */

.vcb-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--vcb-border);
    font-size: 0.75rem;
    color: var(--vcb-text-3);
}

.vcb-powered .vcb-mark { width: 13px; height: 13px; flex: none; color: var(--vcb-accent); }
.vcb-powered b { font-weight: 600; color: var(--vcb-text-2); }

.vcb--notice {
    padding: 20px 22px;
    border: 1px solid var(--vcb-border);
    border-radius: var(--vcb-radius);
    background: var(--vcb-surface-2);
}

.vcb-notice-title { margin: 0; font-weight: 600; }
.vcb-notice-detail { margin: 6px 0 0; font-size: 0.875rem; color: var(--vcb-text-2); }

/* Kolor akcentu bez color-mix (starsze przeglądarki) — pełne krycie zamiast tintu */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
    .vcb-num { background: var(--vcb-surface-2); }
    .vcb-avatar { background: var(--vcb-surface-2); }
    .vcb-option.is-selected,
    .vcb-doctor.is-selected,
    .vcb-day.is-selected { border-color: var(--vcb-accent); background: var(--vcb-surface-2); }
    .vcb-next { background: var(--vcb-surface-2); }
}