/*
 * Czyzewski Project Inquiry 1.0
 */

.cdi-wrap {
    --cdi-text: #191919;
    --cdi-muted: #5e6063;
    --cdi-line: rgba(25,25,25,.18);
    --cdi-line-strong: rgba(25,25,25,.38);
    --cdi-surface: rgba(255,255,255,.38);
    --cdi-quality-color: #b42318;

    width: 100%;
    color: var(--cdi-text);
    font-family: "Jura", Arial, sans-serif;
}

.cdi-wrap *,
.cdi-wrap *::before,
.cdi-wrap *::after {
    box-sizing: border-box;
}

.cdi-alert {
    margin: 0 0 28px;
    padding: 16px 18px;
    border: 1px solid var(--cdi-line);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.cdi-alert--success {
    padding: 24px 26px;
    border: 1px solid rgba(24, 110, 78, .48);
    border-radius: 12px;
    background: #e5f4ed;
    color: #174b38;
}

.cdi-alert__title {
    display: block;
    margin: 0 0 8px;
    font-family: "Tomorrow", Arial, sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.15;
}

.cdi-alert__text {
    display: block;
    max-width: 760px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}

.cdi-alert__reference {
    display: block;
    width: fit-content;
    margin-top: 14px;
    padding: 8px 11px;
    border: 1px solid rgba(24, 110, 78, .28);
    border-radius: 7px;
    background: rgba(255, 255, 255, .52);
    font-size: 14px;
    line-height: 1.3;
}

.cdi-alert--error {
    border-color: rgba(132, 45, 45, .4);
}

.cdi-quality {
    margin: 0 0 38px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--cdi-quality-color) 28%, var(--cdi-line));
    border-radius: 14px;
    background: var(--cdi-surface);
    transition: border-color .24s ease;
}

.cdi-quality__top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 14px;
}

.cdi-quality__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--cdi-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.cdi-quality__value {
    display: block;
    color: var(--cdi-quality-color);
    font-family: "Tomorrow", Arial, sans-serif;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
    transition: color .24s ease;
}

.cdi-quality__label {
    max-width: 260px;
    text-align: right;
    color: var(--cdi-quality-color);
    font-size: 14px;
    font-weight: 600;
    transition: color .24s ease;
}

.cdi-quality__track {
    position: relative;
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: rgba(25,25,25,.08);
}

.cdi-quality__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--cdi-quality-color);
    transition: width .28s ease, background-color .24s ease;
}

.cdi-quality__message {
    max-width: 920px;
    margin: 14px 0 0;
    color: var(--cdi-muted);
    font-size: 14px;
    line-height: 1.55;
}



/* Poziom informacji — kolor zmienia się co 10% */
.cdi-quality--q0  { --cdi-quality-color: #b42318; }
.cdi-quality--q10 { --cdi-quality-color: #d03a1e; }
.cdi-quality--q20 { --cdi-quality-color: #e05f19; }
.cdi-quality--q30 { --cdi-quality-color: #e98712; }
.cdi-quality--q40 { --cdi-quality-color: #d7a900; }
.cdi-quality--q50 { --cdi-quality-color: #a9b80e; }
.cdi-quality--q60 { --cdi-quality-color: #79ad24; }
.cdi-quality--q70 { --cdi-quality-color: #469d4a; }
.cdi-quality--q80 { --cdi-quality-color: #258b61; }
.cdi-quality--q90 { --cdi-quality-color: #167a5b; }
.cdi-quality--q100 { --cdi-quality-color: #0f6b4f; }

.cdi-form {
    width: 100%;
}

.cdi-step {
    animation: cdiFade .2s ease;
}

@keyframes cdiFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cdi-step__head {
    margin-bottom: 30px;
}

.cdi-step__number {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--cdi-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .075em;
}

.cdi-step__head h2 {
    margin: 0 0 10px;
    font-family: "Tomorrow", Arial, sans-serif;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
}

.cdi-step__head p {
    max-width: 760px;
    margin: 0;
    color: var(--cdi-muted);
    font-size: 15px;
    line-height: 1.6;
}

.cdi-grid {
    display: grid;
    gap: 20px;
}

.cdi-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cdi-field,
.cdi-fieldset {
    display: block;
    margin: 0 0 24px;
}

.cdi-field > span,
.cdi-fieldset legend {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.cdi-field em,
.cdi-consent em {
    font-style: normal;
}

.cdi-field input,
.cdi-field textarea,
.cdi-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--cdi-line);
    border-radius: 8px;
    background: rgba(255,255,255,.48);
    color: var(--cdi-text);
    font: inherit;
    outline: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.cdi-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.cdi-field input:focus,
.cdi-field textarea:focus,
.cdi-field select:focus {
    border-color: var(--cdi-line-strong);
    background: rgba(255,255,255,.7);
}

.cdi-field.is-invalid input,
.cdi-field.is-invalid textarea,
.cdi-field.is-invalid select {
    border-color: rgba(132,45,45,.72);
}

.cdi-consent.is-invalid {
    border: 3px solid #b42318;
    background: #fdeceb;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .10);
}

.cdi-consent.is-invalid span {
    color: #702119;
}

.cdi-consent.is-invalid a {
    color: #702119;
    font-weight: 700;
}

.cdi-consent-error {
    display: none;
    margin: 10px 0 16px;
    padding: 11px 13px;
    border-left: 4px solid #b42318;
    border-radius: 5px;
    background: #fdeceb;
    color: #7b2118;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.cdi-consent.is-invalid + .cdi-consent-error {
    display: block;
}

.cdi-fieldset {
    padding: 0;
    border: 0;
}

.cdi-options {
    display: grid;
    gap: 10px;
}

.cdi-options--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cdi-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--cdi-line);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.cdi-check:hover {
    border-color: var(--cdi-line-strong);
}

.cdi-check:has(input:checked) {
    background: rgba(25,25,25,.06);
    border-color: var(--cdi-line-strong);
}

.cdi-check input,
.cdi-consent input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: #191919;
    flex: 0 0 auto;
}

.cdi-check span {
    font-size: 14px;
    line-height: 1.4;
}

.cdi-note {
    margin: 0 0 26px;
    padding: 18px;
    border: 1px solid var(--cdi-line);
    border-radius: 10px;
    background: rgba(25,25,25,.035);
}

.cdi-note strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Tomorrow", Arial, sans-serif;
    font-size: 16px;
}

.cdi-note p {
    margin: 0;
    color: var(--cdi-muted);
    font-size: 14px;
    line-height: 1.55;
}

.cdi-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 8px 0 12px;
    padding: 16px;
    border: 1px solid var(--cdi-line);
    border-radius: 9px;
    background: transparent;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.cdi-consent span {
    font-size: 14px;
    line-height: 1.55;
}

.cdi-consent a {
    color: inherit;
    text-underline-offset: 3px;
}

.cdi-privacy-note {
    margin: 0;
    color: var(--cdi-muted);
    font-size: 12px;
    line-height: 1.55;
}

.cdi-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--cdi-line);
}

.cdi-form__footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.cdi-step-status {
    color: var(--cdi-muted);
    font-size: 13px;
}

.cdi-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--cdi-text);
    border-radius: 7px;
    background: var(--cdi-text);
    color: #f4f4f2;
    font-family: "Jura", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.cdi-btn:hover {
    transform: translateY(-1px);
}

.cdi-btn--ghost {
    background: transparent;
    color: var(--cdi-text);
    border-color: var(--cdi-line-strong);
}

.cdi-btn[hidden],
.cdi-step[hidden] {
    display: none !important;
}

.cdi-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


@supports not (color: color-mix(in srgb, red 50%, white)) {
    .cdi-quality {
        border-color: var(--cdi-line);
    }
}

@media (max-width: 760px) {
    .cdi-grid--2,
    .cdi-options--2 {
        grid-template-columns: 1fr;
    }

    .cdi-quality__top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cdi-quality__label {
        text-align: left;
    }

    .cdi-form__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cdi-form__footer-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .cdi-btn {
        min-width: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdi-step,
    .cdi-quality__bar,
    .cdi-btn {
        animation: none !important;
        transition: none !important;
    }
}


/* CLOUDFLARE TURNSTILE */

.cdi-turnstile {
    margin: 18px 0 16px;
    padding: 16px;
    border: 1px solid var(--cdi-line);
    border-radius: 9px;
    background: rgba(255,255,255,.30);
}

.cdi-turnstile__label {
    margin: 0 0 10px;
    color: var(--cdi-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cdi-turnstile--warning {
    border: 2px solid #c97a16;
    background: #fff3df;
    color: #75430d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}