/**
 * Odstąpienie od umowy — style formularza.
 *
 * SPECYFIKACJA SELEKTORÓW — czytaj, zanim zaczniesz upraszczać.
 * Motywy sklepowe rutynowo stylują `label` i `input` globalnie wewnątrz
 * treści wpisu, np. `.page-template-default .entry-content input[type="text"]`
 * (specyficzność 0,3,1), i ładują się PO wtyczkach. Dlatego każda reguła
 * układu jest tu poprzedzona zdublowaną klasą `.oou-root.oou-root` (0,2,0).
 * Daje to przewagę bez sięgania po `!important`, które odebrałoby sklepowi
 * możliwość nadpisania czegokolwiek.
 *
 * Kolory idą przez zmienne — sklep nadpisuje je u siebie, nie edytując tego
 * pliku. Krój pisma dziedziczymy z motywu.
 *
 * Dostępność nie jest tu ozdobą: cele dotykowe >= 44x44, widoczny focus,
 * błędy sygnalizowane nie samym kolorem (WCAG 1.4.1).
 */

.oou-root {
    --oou-fg: #1a1a1a;
    --oou-muted: #5a5a5a;
    --oou-border: #b9b9b9;
    --oou-border-strong: #1a1a1a;
    --oou-bg: #ffffff;
    --oou-accent: #1a1a1a;
    --oou-accent-fg: #ffffff;
    --oou-error: #96171b;
    --oou-error-bg: #fdf2f2;
    --oou-ok-bg: #f2f7f3;
    --oou-radius: 4px;
    --oou-gap: 20px;
}

/* Korzeń: własny kontekst układu, odcięty od pływaków motywu. */
.oou-root.oou-root {
    display: flow-root;
    clear: both;
    box-sizing: border-box;
    width: auto;
    max-width: 44rem;
    /* auto po bokach: gdy motyw da nam pelna szerokosc, formularz
       wysrodkuje sie sam zamiast przykleic do lewej krawedzi */
    margin: 0 auto var(--oou-gap);
    float: none;
    color: var(--oou-fg);
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
}

.oou-root.oou-root * { box-sizing: border-box; }

/* ---------- Pola ---------- */

.oou-root.oou-root .oou-field {
    display: block;
    clear: both;
    width: auto;
    max-width: none;
    margin: 0 0 var(--oou-gap);
    padding: 0;
    float: none;
    font-size: inherit;
    color: inherit;
}

.oou-root.oou-root .oou-field > label {
    display: block;
    clear: none;
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
}

.oou-root.oou-root .oou-hint {
    display: block;
    clear: both;
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 8px;
    padding: 0;
    color: var(--oou-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.oou-root.oou-root .oou-field > input[type="text"],
.oou-root.oou-root .oou-field > input[type="email"],
.oou-root.oou-root .oou-field > input[type="number"],
.oou-root.oou-root .oou-field > textarea {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
    background: var(--oou-bg);
    color: var(--oou-fg);
    font: inherit;
    line-height: 1.4;
}

.oou-root.oou-root .oou-field > textarea {
    min-height: 88px;
    resize: vertical;
}

.oou-root.oou-root .oou-field > input:hover,
.oou-root.oou-root .oou-field > textarea:hover { border-color: var(--oou-border-strong); }

/* Widoczny focus jest wymogiem dostępności — nie usuwać. */
.oou-root.oou-root :focus-visible {
    outline: 3px solid var(--oou-accent);
    outline-offset: 2px;
}

/* ---------- Lista pozycji ---------- */

.oou-root.oou-root .oou-items {
    display: block;
    clear: both;
    width: auto;
    max-width: none;
    margin: 0 0 var(--oou-gap);
    padding: 0;
    border: 0;
    float: none;
}

.oou-root.oou-root .oou-items > legend {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 10px;
    padding: 0;
    float: none;
    text-align: left;
    font-weight: 600;
    font-size: 1.0625rem;
}

.oou-root.oou-root .oou-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    clear: both;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
    float: none;
    text-align: left;
    font-weight: 400;
}

.oou-root.oou-root .oou-item + .oou-item { margin-top: 8px; }

.oou-root.oou-root .oou-item > input[type="number"] {
    flex: 0 0 auto;
    display: block;
    width: 5rem;
    max-width: 5rem;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
    background: var(--oou-bg);
    color: var(--oou-fg);
    float: none;
    font: inherit;
    text-align: center;
}

.oou-root.oou-root .oou-item-name { flex: 1 1 12rem; font-weight: 600; }

.oou-root.oou-root .oou-item-max {
    flex: 0 0 auto;
    color: var(--oou-muted);
    font-size: 0.875rem;
}

.oou-root.oou-root .oou-excluded {
    flex: 1 1 100%;
    color: var(--oou-muted);
    font-size: 0.875rem;
}

/* ---------- Komunikaty ---------- */

/* Pasek i pogrubienie, żeby błąd nie zależał wyłącznie od koloru. */
.oou-root.oou-root .oou-errors:not(:empty) {
    clear: both;
    margin: 0 0 var(--oou-gap);
    padding: 12px 14px;
    border-left: 4px solid var(--oou-error);
    border-radius: var(--oou-radius);
    background: var(--oou-error-bg);
}

.oou-root.oou-root .oou-error {
    margin: 0;
    color: var(--oou-error);
    font-size: inherit;
    font-weight: 600;
}

.oou-root.oou-root .oou-error + .oou-error { margin-top: 6px; }

.oou-root.oou-root .oou-notice,
.oou-notice.oou-root {
    clear: both;
    margin: 0 0 var(--oou-gap);
    padding: 12px 14px;
    border-left: 4px solid var(--oou-accent);
    border-radius: var(--oou-radius);
    background: var(--oou-ok-bg);
    color: var(--oou-fg);
    font-size: inherit;
}

.oou-pouczenie.oou-root {
    padding: 14px 16px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
    font-size: 0.9375rem;
}

/* ---------- Przyciski ---------- */

.oou-root.oou-root .oou-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    clear: both;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

.oou-root.oou-root .oou-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 11px 22px;
    border: 2px solid var(--oou-accent);
    border-radius: var(--oou-radius);
    background: var(--oou-accent);
    color: var(--oou-accent-fg);
    float: none;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}

.oou-root.oou-root .oou-btn:hover,
.oou-root.oou-root .oou-btn:focus { color: var(--oou-accent-fg); opacity: 0.88; }

.oou-root.oou-root .oou-btn--secondary {
    background: transparent;
    color: var(--oou-accent);
}

.oou-root.oou-root .oou-btn--secondary:hover,
.oou-root.oou-root .oou-btn--secondary:focus { color: var(--oou-accent); }

/* ---------- Krok 2: podsumowanie ---------- */

.oou-root.oou-root > h2 { margin: 0 0 8px; text-align: left; }
.oou-root.oou-root > p { margin: 0 0 var(--oou-gap); font-size: inherit; color: inherit; }

.oou-root.oou-root .oou-review-summary {
    clear: both;
    margin: 0 0 var(--oou-gap);
    padding: 16px 18px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
}

.oou-root.oou-root .oou-review-summary > dt {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    text-align: left;
    color: var(--oou-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.oou-root.oou-root .oou-review-summary > dd {
    width: auto;
    margin: 4px 0 16px;
    padding: 0;
    float: none;
}

.oou-root.oou-root .oou-review-summary > dd:last-child { margin-bottom: 0; }
.oou-root.oou-root .oou-review-summary ul { margin: 0; padding-left: 1.2em; }

/* Motywy sklepowe lubia wstrzykiwac wlasne punktory przez ::before na li.
   Nasze listy maja byc zwyklymi listami. */
.oou-root.oou-root ul { list-style: disc; }
.oou-root.oou-root ul > li { padding-left: 0; background: none; }
.oou-root.oou-root ul > li::before { content: none; display: none; }

.oou-root.oou-root .oou-review-summary small {
    display: block;
    margin-top: 4px;
    color: var(--oou-muted);
    font-size: 0.875rem;
}

/* ---------- Potwierdzenie ---------- */

.oou-confirmation.oou-root {
    padding: 18px 20px;
    border: 1px solid var(--oou-border);
    border-radius: var(--oou-radius);
}

.oou-root.oou-root > ul { margin: 0 0 10px; padding-left: 1.2em; }
.oou-root.oou-root > p:last-child { margin-bottom: 0; }

.oou-root.oou-root .oou-email-failed {
    padding: 12px 14px;
    border-left: 4px solid var(--oou-error);
    border-radius: var(--oou-radius);
    background: var(--oou-error-bg);
    color: var(--oou-error);
}

/* ---------- Stopka ---------- */

.oou-footer-link.oou-root { padding: 12px 16px; max-width: none; }

.oou-footer-link.oou-root a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---------- Telefon ---------- */

@media (max-width: 480px) {
    .oou-root { --oou-gap: 16px; }
    .oou-root.oou-root .oou-actions { flex-direction: column; align-items: stretch; }
    .oou-root.oou-root .oou-btn { width: 100%; }
    .oou-root.oou-root .oou-item > input[type="number"] { width: 4.5rem; max-width: 4.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .oou-root.oou-root .oou-btn,
    .oou-root.oou-root .oou-field > input,
    .oou-root.oou-root .oou-field > textarea { transition: border-color .12s ease, opacity .12s ease; }
}