/* ============================================================
   STREFA WYKONAWCY
     /strefa-wykonawcy/           - rozdroze (szablony 223 + 231)
     /strefa-wykonawcy-logowanie/ - formularz logowania (szablon 470)
   Ladowane po adresie - patrz bm-newlayout.php.

   UWAGA NA NAGLOWEK: '#headline-188-231' NIE ma wlasnego koloru w 231.css -
   dziedziczy globalne 'h1..h6 { color:#ffffff }' Oxygena. Na czarnym tle bylo
   to poprawne; po rozjasnieniu tla bialy naglowek zniknalby, dlatego
   ustawiamy mu granat WPROST. Ten sam mechanizm zjadl juz raz naglowki
   przy stronach tresciowych - patrz komentarz w strony.css.

   Selektory zrodlowe to same ID (1,0,0) -> 'body.page' daje (1,1,1).
   Autor: claude, 2026-08-20.
   ============================================================ */

body.page {
    --navy-wyk: #0B2240;
    --red-wyk:  #DB0632;
    --sans-wyk: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif-wyk: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- 1. Rozdroze - WSPOLNY KOMPONENT ---------------
   PRZEPISANE 2026-09-16. Zgloszenia klientki ze spotkania:
     "strefa architekta jest zupelnie niezmieniona, nic sie nie zmienilo"
     "strefa wykonawcy juz jest zmieniona, ale rozjechana"

   DLACZEGO ARCHITEKT BYL NIETKNIETY:
   caly ten arkusz wymienial elementy po identyfikatorach z KONCOWKA
   '-231', czyli ze strony "Strefa wykonawcy". Strefa architekta to
   osobna strona i ma wlasny komplet: '-229'. Ten sam uklad, ten sam
   szablon, inne numery - i zaden selektor sie nie zapinal. Strona
   zostala w fabrycznym wygladzie Oxygena: czarna rama, czarny naglowek
   i dwa szare prostokaty zamiast przyciskow.

   To ten sam blad co przy liscie salonow (patrz 'salony.css'):
   identyfikatory Oxygena sa WLASNOSCIA STRONY, a nie szablonu.

   JAK JEST TERAZ: jeden komplet regul dla calego komponentu, zaczepiony
   o '#section-179-223' - identyfikator sekcji z SZABLONU, wiec wspolny
   dla wszystkich stron, ktore go uzywaja. Sprawdzone, ze sa to:
     /dla-profesjonalistow/strefa-architekta/        (elementy -229)
     /dla-profesjonalistow/strefa-wykonawcy/         (elementy -231)
     /kolor-inspiracje/aplikacja-benjamin-moore/     (elementy -223)
   Trzecia strona nie byla w zgloszeniu, ale ma dokladnie te sama czarna
   rame i te same szare przyciski - czyli jest odpowiedzia na prosbe
   "sprawdzic, gdzie jeszcze brakuje".

   Wnetrze opisujemy UKLADEM, a nie numerami:
     .ct-new-columns                     - czarna rama do rozjasnienia
       > .ct-div-block                   - kolumna (1 albo 2 na stronie)
           > .ct-div-block:first-child   - biala karta z trescia
           > .ct-div-block:last-child    - pas ze zdjeciem
   Dzieki temu kolejna strona na tym szablonie bedzie wygladac poprawnie
   bez dopisywania czegokolwiek. */

/* Rama sekcji i rama kolumn - obie w zrodle czarne. */
body.page #section-179-223,
body.page #section-179-223 .ct-new-columns {
    background-color: #FCFAF6;
}

/* Kolumna staje sie jedna karta: biala tresc i zdjecie pod nia w jednym
   zaokragleniu. W zrodle byly to dwa osobne prostokaty na czarnym tle. */
body.page #section-179-223 .ct-new-columns > .ct-div-block {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-m);
}

/* Biala czesc karty. */
body.page #section-179-223 .ct-new-columns > .ct-div-block > .ct-div-block:first-child {
    background-color: #fff;
    text-align: center;
}

/* Naglowek karty. W zrodle: czarny, Verdana, a w strefie wykonawcy
   dodatkowo wyrownany do LEWEJ, podczas gdy przyciski pod nim stoja
   na srodku ('justify-content:center' na ich kontenerze). Stad wrazenie
   rozjechania - napis przy lewej krawedzi, przyciski i podkreslnik
   na srodku. Sprowadzamy wszystko do jednej osi. */
body.page #section-179-223 .ct-new-columns :is(h1, h2, h3) {
    margin: 0 0 6px;
    font-family: var(--serif-wyk);
    font-weight: 500;
    text-align: center;
    color: var(--navy-wyk);
}

/* Pas ze zdjeciem - bez wlasnego zaokraglenia, przycina go karta. */
body.page #section-179-223 .ct-new-columns > .ct-div-block > .ct-div-block:last-child {
    border-radius: 0;
}

/* ---- Przyciski "ZALOGUJ SIE" / "ZAREJESTRUJ SIE" ----
   W zrodle dwa identyczne szare prostokaty (#eeeeee) z czarnym hoverem.
   Pierwszy zostaje glownym dzialaniem (czerwien), drugi jest wtorny
   (obrys), zeby nie konkurowaly ze soba.

   Efekt zamalowania pedzlem dokladany jest przez wspolny 'pedzel.css' -
   tutaj podajemy mu tylko dwa kolory: czym malowac ('--bmx-farba')
   i co jest pod farba w spoczynku ('--bmx-tlo'). Hoverow juz tu nie ma,
   bo to 'pedzel.css' nimi steruje. */
body.page #section-179-223 .ct-link-button {
    border-radius: 999px;
    font-family: var(--sans-wyk);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Glowny: czerwony, zamalowuje sie granatem. */
body.page #link_button-202-231,
body.page #link_button-204-229,
body.page #link_button-184-223 {
    --bmx-farba: var(--navy-wyk);
    --bmx-tlo: var(--red-wyk);
    background-color: var(--red-wyk);
    border: 1px solid var(--red-wyk);
    color: #fff;
}

/* Wtorny: obrys, zamalowuje sie granatem. */
body.page #link_button-203-231,
body.page #link_button-205-229,
body.page #link_button-189-223 {
    --bmx-farba: var(--navy-wyk);
    --bmx-tlo: transparent;
    background-color: transparent;
    border: 1px solid rgba(11, 34, 64, .35);
    color: var(--navy-wyk);
}

/* ---------- 2. Formularz logowania ------------------------
   '#_login_form-214-470' ma w zrodle tylko szerokosc 300px i wysrodkowanie -
   pola i przycisk sa calkiem nieostylowane, czyli w domyslnym wygladzie
   przegladarki. Ubieramy je w komponenty makiety.

   'appearance:none' na przycisku jest konieczne: normalize Oxygena ustawia
   '-webkit-appearance: button' i bez tego przegladarka rysuje wlasne tlo
   zamiast naszego (ten sam problem co przy lupie w naglowku). */
body.page #_login_form-214-470 label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans-wyk);
    font-size: .82rem;
    font-weight: 500;
    color: var(--navy-wyk);
}

body.page #_login_form-214-470 input[type="text"],
body.page #_login_form-214-470 input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(11, 34, 64, .18);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans-wyk);
    font-size: .95rem;
    color: var(--navy-wyk);
}

body.page #_login_form-214-470 input[type="text"]:focus,
body.page #_login_form-214-470 input[type="password"]:focus {
    outline: none;
    border-color: var(--navy-wyk);
}

/* "Zapamietaj mnie" - etykieta przy checkboxie ma byc zwykla, nie wytluszczona
   jak etykiety pol, wiec cofamy jej blokowe ustawienia z reguly wyzej. */
body.page #_login_form-214-470 .forgetmenot label,
body.page #_login_form-214-470 label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    margin-bottom: 0;
}

body.page #_login_form-214-470 input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin-top: 14px;
    padding: 14px 24px;
    background: var(--red-wyk);
    border: 1px solid var(--red-wyk);
    border-radius: 999px;
    font-family: var(--sans-wyk);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background .35s cubic-bezier(.22, 1, .36, 1), border-color .35s cubic-bezier(.22, 1, .36, 1);
}

body.page #_login_form-214-470 input[type="submit"]:hover {
    background: var(--navy-wyk);
    border-color: var(--navy-wyk);
}