/* =====================================================================
   Formularz umowy TT Biuro (app.taxomatic.pl/newoffice?id=187750) w wyglądzie ttbiuro.pl
   Drugi krok po oknie "Wybierz pakiet" na ttbiuro.pl: te same kolory, font i przyciski co okno.

   Wgranie: dokleić na końcu /files/css/overrides.css i podbić ?v=.
   Zakres: wszystkie reguły zaczynają się od body:has(img[src*="ttbiuro.pl"]), czyli działają tylko
   na formularzu, którego logo pochodzi z ttbiuro.pl. Inne biura na tym samym formularzu i reszta
   programu zostają bez zmian. Jeśli formularz dostanie kiedyś własną klasę biura na <body>
   (np. data-biuro="187750"), wystarczy podmienić ten jeden prefiks.

   Same style. Pola, kolejność, walidacja i wysyłka bez zmian.
   ===================================================================== */

@font-face { font-family: "Hedvig Letters Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/hedvigletterssans/v5/CHy_V_PfGVjobSBkihHWDT98RVp37w8jcJRH3B4jm11gRA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hedvig Letters Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.gstatic.com/s/hedvigletterssans/v5/CHy_V_PfGVjobSBkihHWDT98RVp37w8jcJpH3B4jm10.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Wartości z okna "Wybierz pakiet" na ttbiuro.pl */
html:has(img[src*="ttbiuro.pl"]) { background: #f7f5f1 !important; }
body:has(img[src*="ttbiuro.pl"]) {
  --tt-tlo: #f7f5f1;
  --tt-karta: #ffffff;
  --tt-tekst: #1d1a17;
  --tt-tekst-2: #6b625a;   /* 5,9:1 na #fff, 5,4:1 na #f7f5f1 */
  --tt-linia: #e2ddd6;
  --tt-ramka-pola: #cfc8bf;
  --tt-zolty: #f4e75a;
  --tt-wymagane: #a8321e;  /* 6,6:1 na #fff */
  --tt-font: "Hedvig Letters Sans", "Helvetica Neue", Arial, sans-serif;

  background: var(--tt-tlo) !important;
  color: var(--tt-tekst) !important;
  font-family: var(--tt-font) !important;
  font-size: 16px !important;
  text-wrap: pretty;
}
body:has(img[src*="ttbiuro.pl"]) :where(input, select, textarea) { font-family: var(--tt-font) !important; }
body:has(img[src*="ttbiuro.pl"]) :where(h3, .generator-label, .przycisk, label) { text-wrap: balance; }

/* ---------- układ: wąska kolumna na środku zamiast tabeli na całą szerokość ---------- */
body:has(img[src*="ttbiuro.pl"]) #c_root > div > div > div > .mx-2 {
  width: 100%; max-width: 720px; margin: 0 auto !important; padding: 32px 16px 48px; box-sizing: border-box;
}
body:has(img[src*="ttbiuro.pl"]) .mx-2 > div:first-child .container-fluid { padding: 0; max-width: 100%; }
body:has(img[src*="ttbiuro.pl"]) .mx-2 > div:first-child .row { margin: 0; }
body:has(img[src*="ttbiuro.pl"]) .mx-2 > div:first-child [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin: 0 0 20px !important; }
body:has(img[src*="ttbiuro.pl"]) img.img-fluid[src*="ttbiuro.pl"] { max-width: 180px !important; }
/* logo ze strony ttbiuro.pl (ttbiuro-logo-B-white.svg, jeden kolor #F9F8F7) na jasnym tle: przyciemniamy filtrem.
   Wymaga podmiany adresu logo w ustawieniach biura na https://ttbiuro.pl/wp-content/uploads/2026/09/ttbiuro-logo-B-white.svg */
body:has(img[src*="ttbiuro.pl"]) img.img-fluid[src*="ttbiuro-logo"] { filter: brightness(0); width: 160px; height: auto; }
body:has(img[src*="ttbiuro.pl"]) .mx-2 hr { display: none; }

/* karta z całym formularzem (pola + zgody + przycisk) */
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) {
  background: var(--tt-karta); border: 1px solid var(--tt-linia); border-radius: 12px;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) clamp(20px, 3vw, 32px); box-sizing: border-box;
}
body:has(img[src*="ttbiuro.pl"]) table:has(div > div > .grid-generator-edycja),
body:has(img[src*="ttbiuro.pl"]) table:has(div > div > .grid-generator-edycja) > tbody > tr > td { display: block; width: 100% !important; padding: 0 !important; }

/* siatka: etykieta nad polem, jedna kolumna (styl inline ustawia dwie, stąd !important) */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; column-gap: 0 !important;
}
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > * {
  grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: stretch !important; min-width: 0;
}

/* ---------- nagłówki sekcji ---------- */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div:has(> h3),
body:has(img[src*="ttbiuro.pl"]) div:has(> h3) { justify-self: stretch !important; text-align: left; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div:has(> h3) {
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--tt-linia);
}
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div:has(> h3):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body:has(img[src*="ttbiuro.pl"]) h3 {
  font-family: var(--tt-font) !important; color: var(--tt-tekst) !important; font-weight: 400 !important;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important; line-height: 1.2 !important; margin: 0 0 4px !important; text-align: left;
  border: 0 !important; padding: 0 !important;
}
body:has(img[src*="ttbiuro.pl"]) h3:empty { display: none; }

/* ---------- etykiety ---------- */
body:has(img[src*="ttbiuro.pl"]) .generator-label {
  display: block !important; height: auto !important; min-height: 0 !important; text-align: left; justify-self: start !important;
  padding: 16px 0 6px !important; font-size: 15px; line-height: 1.35; color: var(--tt-tekst); font-weight: 400;
}
body:has(img[src*="ttbiuro.pl"]) .generator-label.wymagane::after { display: inline !important; color: var(--tt-wymagane) !important; margin: 0 0 0 3px !important; font-size: .95em !important; line-height: 1 !important; }
body:has(img[src*="ttbiuro.pl"]) .generator-label:not(.wymagane)::after { display: none !important; }
body:has(img[src*="ttbiuro.pl"]) span[style*="f75e5e"] { color: var(--tt-wymagane) !important; }

/* ---------- pola ---------- */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja :where(input[type="text"], input:not([type]), select, textarea) {
  box-sizing: border-box; min-height: 46px; padding: 10px 14px !important; font-size: 16px !important; line-height: 1.3;
  color: var(--tt-tekst) !important; background: #fff !important;
  border: 1px solid var(--tt-ramka-pola) !important; border-radius: 8px !important; box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja textarea { min-height: 88px; resize: vertical; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px !important; min-width: 96px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231d1a17' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja :where(input, select, textarea):hover { border-color: #a79e93 !important; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja :where(input, select, textarea):focus {
  outline: none !important; border-color: var(--tt-tekst) !important; box-shadow: 0 0 0 3px rgba(29, 26, 23, .14) !important;
}
/* data: pole i dwie ikony kalendarza w jednym rzędzie */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .d-flex { gap: 8px; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .d-flex svg { color: var(--tt-tekst); }

/* ---------- przełączniki "taki sam jak..." (ikony stanu rysuje serwer, zostają) ---------- */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div[checkbox] {
  justify-self: start !important; box-sizing: border-box; max-width: 100%; margin: 12px 0 0 !important; padding: 10px 14px;
  border: 1px solid var(--tt-linia); border-radius: 8px; font-size: 15px; background: var(--tt-tlo);
}
body:has(img[src*="ttbiuro.pl"]) [checkbox] td { vertical-align: middle !important; }
/* pole wyboru rysuje overrides.css jako [checkbox]::before/::after (zaznaczone) na górnym lewym rogu, nad obrazkiem stanu z serwera.
   Obrazek zostaje jako miejsce (visibility), a pole i ptaszek idą w jego miejsce, większe i w kolorach strony. */
body:has(img[src*="ttbiuro.pl"]) [checkbox] img[id$="_stateicon"] { display: block; visibility: hidden; width: 18px; height: 18px; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div[checkbox]::before,
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div[checkbox]::after {
  top: 50% !important; left: 14px !important; width: 18px !important; height: 18px !important; transform: translateY(-50%);
  box-sizing: border-box; border-radius: 4px; display: grid !important; place-items: center; line-height: 18px !important; font-size: 14px !important; text-align: center;
}
body:has(img[src*="ttbiuro.pl"]) [checkbox]::before { border: 1.5px solid var(--tt-tekst) !important; background: #fff; }
body:has(img[src*="ttbiuro.pl"]) [checkbox][selected="true"]::after { background: var(--tt-tekst) !important; color: #fff !important; }
body:has(img[src*="ttbiuro.pl"]) [checkbox][selected="false"]::after { display: none !important; }
/* zgody: pole wyboru w swojej komórce tabeli */
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td > [checkbox]::before,
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td > [checkbox]::after {
  top: 2px !important; left: 0 !important; width: 18px !important; height: 18px !important; border-radius: 4px;
  box-sizing: border-box; display: grid !important; place-items: center; line-height: 18px !important; font-size: 14px !important;
}
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td:has(> [checkbox]) { padding-right: 12px !important; width: 18px; }
/* zgody: w polu wyboru zostaje tylko miejsce na kwadrat 18 px (puste komórki odstępu i etykiety Taxomatic zabierały ok. 35 px szerokości tekstu na telefonie) */
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td > [checkbox] { width: 18px; height: 18px; position: relative; display: block; }
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td > [checkbox] > table { display: none !important; }
body:has(img[src*="ttbiuro.pl"]) table:has([checkbox]) td[id*="_spacing_"] { width: 0 !important; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja > div[checkbox]:focus-visible { outline: 2px solid var(--tt-tekst); outline-offset: 2px; }

/* ---------- przycisk GUS: drugorzędny, obramowany ---------- */
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie {
  justify-self: start !important; margin-top: 10px; height: auto !important; padding: 10px 16px !important;
  background: #fff !important; color: var(--tt-tekst) !important; border: 1px solid var(--tt-tekst) !important;
  border-radius: 8px !important; box-shadow: none !important; font-weight: 400 !important; font-size: 15px !important;
}
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie:hover { background: var(--tt-tlo) !important; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie table { height: auto !important; width: auto !important; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie td { color: inherit !important; vertical-align: middle !important; width: auto !important; line-height: 1.2; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie td:first-child { padding-right: 8px !important; }
body:has(img[src*="ttbiuro.pl"]) .grid-generator-edycja .przycisk-ostrzezenie svg { display: block; width: 18px !important; height: 18px !important; }

/* ---------- zgody ---------- */
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) > div:has(> h3) { margin-top: 32px; padding: 28px 0 0 !important; border-top: 1px solid var(--tt-linia); }
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) > div:has(> h3:empty) { display: none; }
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) table:has([checkbox]) a { color: var(--tt-tekst) !important; text-decoration: underline; text-underline-offset: 2px; }
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) > div > img[width="100"],
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) > div:has(> img:only-child) { display: none; }
body:has(img[src*="ttbiuro.pl"]) div:has(> div > div > div > table [checkbox]) table td { vertical-align: top; padding-top: 2px !important; }
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) table:has([checkbox]) {
  font-size: 14px; line-height: 1.5; color: var(--tt-tekst-2); margin-top: 14px;
}
body:has(img[src*="ttbiuro.pl"]) div:has(> div > .grid-generator-edycja) table:has([checkbox]) b { color: var(--tt-tekst); font-weight: 600; }

/* ---------- wysyłka: czarny przycisk jak w oknie na ttbiuro.pl ---------- */
body:has(img[src*="ttbiuro.pl"]) .przycisk.przycisk-aktywny:not(.przycisk-ikona):not([class*="kalendarz"]) {
  width: 100% !important; max-width: 100% !important; height: 54px !important; line-height: 1.2 !important;
  margin: 28px 0 0 !important; border-radius: 16px !important;
  background: var(--tt-tekst) !important; color: #fff !important; font-weight: 400 !important; font-size: 17px !important;
  box-shadow: none !important; transition: background-color .15s ease;
}
body:has(img[src*="ttbiuro.pl"]) .przycisk.przycisk-aktywny:not(.przycisk-ikona):not([class*="kalendarz"]):hover { background: #2a2622 !important; }
body:has(img[src*="ttbiuro.pl"]) .przycisk.przycisk-aktywny:not(.przycisk-ikona):not([class*="kalendarz"]):focus-visible { outline: 2px solid var(--tt-tekst); outline-offset: 3px; }

/* ---------- stopka ---------- */
body:has(img[src*="ttbiuro.pl"]) footer { background: transparent !important; color: var(--tt-tekst-2) !important; font-size: 13px; padding: 12px 16px; }
body:has(img[src*="ttbiuro.pl"]) footer a { color: var(--tt-tekst-2) !important; text-decoration: underline; text-underline-offset: 2px; margin-right: 12px; }

@media (prefers-reduced-motion: reduce) {
  body:has(img[src*="ttbiuro.pl"]) * { transition: none !important; }
}