/* ==========================================================================
BusNaTrase.pl — skórka „Atrament + bursztyn" (szablon 2a) dla kalkulatora
Ładowana PO calculator.css i bnt-tokens.css — nadpisuje wyłącznie WYGLĄD
istniejących selektorów .brc-*. Zero zmian w treści i logice (JS nietknięty).
Tryb ciemny: (bnt-theme-toggle.js).
========================================================================== */
/* ── Baza ────────────────────────────────────────────────────────────────── */
.brc-calculator {
font-family: var(--bnt-font);
color: var(--bnt-text);
background: var(--bnt-panel-bg);
color-scheme: light;
/* Fixed zamiast height:100dvh (v1.70.7) — eliminuje pasek przewijania strony
i biały pasek na dole. Powód: WP dodaje `html{margin-top:32px}` na belkę
admina, a `html` nie zawijało się do treści (computed height > body) →
~19px nadmiaru. Fixed wyjmuje kalkulator z flow: strona nie ma czego
przewijać. Dzieci (#brc-panel/#brc-map/#brc-type-selector) są absolute →
fixed ustanawia dla nich blok zawierający, więc pozycjonują się jak dotąd. */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
}
/* Belka admina WP (fixed, 32/46 px u góry) — kalkulator startuje pod nią. */
body.admin-bar .brc-calculator { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .brc-calculator { top: 46px; }
}
[data-theme="dark"] .brc-calculator { color-scheme: dark; }
/* Ukryj paski przewijania w całym layoutcie kalkulatora — przewijanie pozostaje
funkcjonalne (kółko/touch/klawiatura), znika tylko widoczny pasek (v1.70.5). */
#brc-calculator,
#brc-calculator * {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* stare Edge/IE */
}
#brc-calculator::-webkit-scrollbar,
#brc-calculator *::-webkit-scrollbar { /* Chrome/Safari/Edge */
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* ── Kursor „Pinezka trasy" (v1.70.6) — zastępuje kursor-autokar ─────────────
Hotspot w ostrzu pinezki (16 30). Data URI wg kursor/specyfikacja/kursor.css. */
.brc-calculator {
--bnt-cursor-pin: url('data:image/svg+xml,') 16 30;
}
/* Powierzchnia kalkulatora + modal wyboru — pinezka (zamiast autokaru) */
.brc-calculator,
#brc-type-selector {
cursor: var(--bnt-cursor-pin), auto !important;
}
/* Mapa — pinezka z fallbackiem crosshair (wskazywanie adresów/przystanków) */
#brc-map,
#brc-map .leaflet-container {
cursor: var(--bnt-cursor-pin), crosshair !important;
}
/* Elementy interaktywne — czytelna klikalność (spec §8c) */
#brc-calculator button,
#brc-calculator a,
#brc-calculator label,
#brc-calculator select,
#brc-calculator .brc-type-card,
#brc-calculator input[type="checkbox"],
#brc-calculator input[type="radio"],
#brc-calculator .leaflet-control-zoom a {
cursor: pointer !important;
}
/* Pola tekstowe — kursor tekstu (poprawna edycja) */
#brc-calculator input[type="text"],
#brc-calculator input[type="email"],
#brc-calculator input[type="tel"],
#brc-calculator input[type="number"],
#brc-calculator input[type="date"],
#brc-calculator input[type="time"],
#brc-calculator .brc-address-input,
#brc-calculator textarea {
cursor: text !important;
}
/* Przeciąganie modalu wyboru zachowuje grabbing */
#brc-type-selector.brc-dragging { cursor: grabbing !important; }
.brc-calculator h3,
.brc-calculator h4,
.brc-calculator label,
.brc-calculator input,
.brc-calculator button,
.brc-calculator small,
.brc-calculator p {
font-family: var(--bnt-font);
}
/* ── Panel formularza (lewy) ─────────────────────────────────────────────── */
#brc-panel {
width: var(--bnt-panel-w);
min-width: 420px;
height: 100%;
max-height: 100%;
background: var(--bnt-panel-bg);
box-shadow: 6px 0 32px rgba(30, 34, 48, 0.14);
border-radius: 0;
padding: var(--bnt-pad-card);
scrollbar-color: var(--bnt-rail) transparent;
}
#brc-panel.brc-panel-expanded { border-radius: 0; }
@media (min-width: 1601px) {
#brc-panel { width: 520px; }
}
@media (max-width: 1200px) and (min-width: 641px) {
#brc-panel { width: 40%; min-width: 0; }
}
/* ── Nagłówek panelu (pasek wybranego typu) — atrament, sticky ───────────── */
/* Pasek wybranego typu — lekki nagłówek zintegrowany z panelem (v1.70.9;
wcześniej ciężki ciemny blok). Jasne tło, subtelna linia, niższy. */
#brc-type-bar {
top: calc(-1 * var(--bnt-pad-card));
margin: calc(-1 * var(--bnt-pad-card)) calc(-1 * var(--bnt-pad-card)) var(--bnt-gap-card);
padding: 12px var(--bnt-pad-card);
background: var(--bnt-panel-bg);
color: var(--bnt-text);
border-bottom: 1.5px solid var(--bnt-input-divider);
}
#brc-type-bar-label {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.2px;
color: var(--bnt-text);
}
/* Przycisk „Wstecz" — dyskretna ghost-pigułka (czytelna w obu trybach) */
.brc-back-btn {
background: transparent;
border: 1.5px solid var(--bnt-input-border);
color: var(--bnt-text);
border-radius: var(--bnt-r-pill);
padding: 9px 15px;
font-size: var(--bnt-fs-btn-sm);
font-weight: 600;
box-shadow: none;
}
.brc-back-btn:hover {
background: var(--bnt-card-auto-bg);
border-color: var(--bnt-accent);
color: var(--bnt-text);
box-shadow: none;
}
/* ── Karty sekcji ────────────────────────────────────────────────────────── */
.brc-section {
background: var(--bnt-card-bg);
border: none;
border-radius: var(--bnt-r-card);
padding: var(--bnt-pad-card);
margin-bottom: var(--bnt-gap-card);
}
.brc-section h3 {
font-size: var(--bnt-fs-section);
font-weight: 700;
color: var(--bnt-text);
margin: 0 0 6px;
}
.brc-section-desc {
font-size: 14px;
line-height: 1.5;
color: var(--bnt-text-helper);
margin: 0 0 22px;
}
/* Sekcja kontaktowa i nagłówek weselny — ujednolicone do karty */
.brc-section-contact,
.brc-section-wedding-header {
background: var(--bnt-card-bg);
border: none;
}
.brc-section-contact h3,
.brc-section-wedding-header h3 { color: var(--bnt-text); }
/* ── Pola ────────────────────────────────────────────────────────────────── */
.brc-field { margin-bottom: var(--bnt-gap-field); }
.brc-field label {
font-size: var(--bnt-fs-label);
font-weight: 600;
color: var(--bnt-text);
margin-bottom: 8px;
}
.brc-required { color: var(--bnt-accent-text); }
.brc-field input[type="text"],
.brc-field input[type="number"],
.brc-field input[type="time"],
.brc-field input[type="date"],
.brc-field input[type="tel"],
.brc-field input[type="email"],
.brc-address-input {
padding: 14px 16px;
border: 1.5px solid var(--bnt-input-border);
border-radius: var(--bnt-r-input);
font-size: var(--bnt-fs-input);
color: var(--bnt-text);
background: var(--bnt-input-bg);
}
.brc-field input::placeholder,
.brc-address-input::placeholder { color: var(--bnt-text-placeholder); }
.brc-field input:focus,
.brc-address-input:focus {
border-color: var(--bnt-accent);
box-shadow: var(--bnt-focus-ring);
}
/* Pola auto-uzupełniane (wesele: kościół/sala z poprzedniego segmentu) */
.brc-field input[readonly],
.brc-address-input[readonly] {
background: var(--bnt-card-auto-bg);
color: var(--bnt-text-secondary);
}
.brc-hint,
.brc-hint-inline {
font-size: var(--bnt-fs-helper);
line-height: 1.5;
color: var(--bnt-text-helper);
}
.brc-field-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--bnt-accent);
}
.brc-gdpr-field label {
font-size: 14px;
color: var(--bnt-text-secondary);
}
/* ── Autocomplete ────────────────────────────────────────────────────────── */
.brc-ac-list {
background: var(--bnt-input-bg);
border: 1.5px solid var(--bnt-input-border);
border-top: none;
border-radius: 0 0 var(--bnt-r-input) var(--bnt-r-input);
box-shadow: 0 10px 24px rgba(30, 34, 48, 0.14);
}
.brc-ac-item,
.brc-ac-empty {
font-size: 15px;
color: var(--bnt-text);
border-bottom: 1px solid var(--bnt-input-divider);
}
.brc-ac-item:hover,
.brc-ac-item:focus {
background: var(--bnt-card-auto-bg);
color: var(--bnt-text);
}
.brc-ac-empty { color: var(--bnt-text-placeholder); }
/* ── Przyciski ───────────────────────────────────────────────────────────── */
/* Główny — bursztyn */
.brc-btn-primary,
#brc-submit-btn {
background: var(--bnt-accent);
color: var(--bnt-on-accent);
font-size: var(--bnt-fs-btn);
font-weight: 700;
border-radius: var(--bnt-r-btn);
padding: 18px 22px;
transition: background 0.15s, transform 0.15s;
}
.brc-btn-primary:hover,
#brc-submit-btn:hover {
background: var(--bnt-accent-hover);
transform: translateY(-1px);
}
.brc-btn-primary:disabled {
background: var(--bnt-accent);
opacity: 0.55;
transform: none;
}
.brc-btn-primary.brc-loading::after {
border: 2px solid rgba(30, 34, 48, 0.3);
border-top-color: var(--bnt-on-accent);
}
/* Drugorzędne („+ Dodaj przystanek", „+ Dodaj miejsce rozwożenia") — przerywana ramka */
.brc-btn-secondary {
background: transparent;
color: var(--bnt-text-secondary);
border: 1.5px dashed var(--bnt-dash-border);
border-radius: var(--bnt-r-input);
font-size: var(--bnt-fs-btn-sm);
font-weight: 600;
}
.brc-btn-secondary:hover {
background: transparent;
border-color: var(--bnt-accent);
color: var(--bnt-text);
}
.brc-add-wp {
font-size: var(--bnt-fs-btn-sm);
padding: 14px 16px;
}
/* „Optymalizuj kolejność" — outline z bursztynową ikoną */
#brc-optimize-route,
.brc-optimize-day {
background: transparent;
border: 1.5px solid var(--bnt-dash-border);
border-style: solid;
border-radius: 10px;
color: var(--bnt-text);
font-size: 14px;
font-weight: 600;
padding: 9px 14px;
}
#brc-optimize-route:hover,
.brc-optimize-day:hover {
background: var(--bnt-card-auto-bg);
border-color: var(--bnt-dash-border);
color: var(--bnt-text);
}
/* Usuwanie wiersza (✕) — neutralny kwadrat, obszar dotyku ≥44 px */
.brc-btn-icon {
background: transparent;
color: var(--bnt-text-secondary);
border: 1.5px solid var(--bnt-input-border);
border-radius: 10px;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.brc-btn-icon:hover {
background: transparent;
border-color: var(--bnt-error);
color: var(--bnt-error);
}
.brc-calculator button:focus-visible {
outline: none;
box-shadow: var(--bnt-focus-ring);
}
/* ── Ekran główny — modal wyboru rodzaju wynajmu ─────────────────────────── */
#brc-type-selector {
max-width: 880px;
background: var(--bnt-panel-bg);
border-radius: var(--bnt-r-modal);
box-shadow: var(--bnt-shadow-modal);
animation: bnt-modal-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bnt-modal-in {
from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.98); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Panel formularza — łagodne pojawianie SIĘ i ZNIKANIE (v1.70.8).
Wcześniej panel „wyskakiwał"/znikał natychmiast (display:none), a selektor po
Wstecz ładnie się pojawiał. Teraz panel przechodzi symetrycznie w obu kierunkach
(fade + delikatny rise + scale, 360 ms, to samo easing co modal wyboru), spójnie
z językiem ruchu wtyczki.
Mechanizm: nadpisujemy `.brc-hidden` (display:none) TYLKO dla panelu na
opacity/visibility/transform z transition — dzięki temu ukrywanie też się animuje,
bez zmian w JS. Panel jest position:absolute → niewidoczny nie zajmuje miejsca;
pointer-events:none → nie przechwytuje kliknięć. Selektora NIE ruszamy (ma
centrowanie transformem + przeciąganie). */
#brc-panel {
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s 0s;
}
#brc-panel:not(.brc-hidden) {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
}
#brc-panel.brc-hidden {
display: block !important; /* nadpisuje display:none, by dało się animować */
opacity: 0 !important;
transform: translateY(12px) scale(0.985);
visibility: hidden !important;
pointer-events: none !important;
transition-delay: 0s, 0s, 360ms; /* visibility→hidden dopiero po fade */
}
/* UWAGA: brak guardu prefers-reduced-motion — modal wyboru (#brc-type-selector,
keyframe brc-float-in/bnt-modal-in) też go nie ma, więc panel MUSI zachować się
spójnie. Gdy system ma wyłączone animacje, guard zerował `transition` panelu, a
selektor animował się dalej (v1.70.9). Ruch jest delikatny (fade+lekki rise). */
/* Logo: kafel + logotyp tekstowy */
.brc-type-logo { gap: 14px; }
.bnt-logo-tile {
width: 54px;
height: 54px;
display: block;
flex-shrink: 0;
}
.bnt-logo-word {
font-size: 27px;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--bnt-text);
line-height: 1;
}
.bnt-logo-word-accent { color: var(--bnt-accent-text); }
.bnt-logo-word-tld {
font-size: 19px;
font-weight: 400;
color: var(--bnt-text-secondary);
}
/* Kafle → wiersze wyboru (ikona | tytuł/opis | strzałka) */
.brc-type-grid { flex-direction: column; gap: 14px; }
.brc-type-card {
display: grid;
grid-template-columns: 60px 1fr 46px;
grid-template-areas:
"icon title arrow"
"icon desc arrow";
column-gap: 24px;
row-gap: 2px;
align-items: center;
text-align: left;
padding: 24px 28px;
border: none;
border-radius: var(--bnt-r-card);
background: var(--bnt-card-bg);
transition: background 0.15s, transform 0.15s;
}
.brc-type-card:hover {
border: none;
background: var(--bnt-card-auto-bg);
transform: translateX(3px);
}
/* Ikona: emoji schowane, liniowy SVG przez maskę (kolorowalny w dark) */
.brc-type-icon {
grid-area: icon;
font-size: 0;
line-height: 0;
width: 60px;
height: 60px;
border-radius: 16px;
background: var(--bnt-accent-tile);
position: relative;
}
.brc-type-icon::before {
content: "";
position: absolute;
inset: 13px;
background: var(--bnt-ink);
-webkit-mask: var(--bnt-icon) center / contain no-repeat;
mask: var(--bnt-icon) center / contain no-repeat;
}
[data-theme="dark"] .brc-type-icon::before { background: var(--bnt-accent); }
.brc-type-card[data-type="single"] .brc-type-icon { --bnt-icon: url("../images/bnt-ikona-autokar.svg"); }
.brc-type-card[data-type="multiday"] .brc-type-icon { --bnt-icon: url("../images/bnt-ikona-kalendarz.svg"); }
.brc-type-card[data-type="wedding"] .brc-type-icon { --bnt-icon: url("../images/bnt-ikona-pierscionek.svg"); }
.brc-type-card strong {
grid-area: title;
align-self: end;
font-size: 21px;
font-weight: 600;
color: var(--bnt-text);
}
.brc-type-card small {
grid-area: desc;
align-self: start;
font-size: 15px;
line-height: 1.45;
color: var(--bnt-text-secondary);
}
.brc-type-card::after {
content: "\2192";
grid-area: arrow;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--bnt-ink);
color: var(--bnt-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
[data-theme="dark"] .brc-type-card::after {
background: var(--bnt-accent);
color: var(--bnt-on-accent);
}
/* ── Wycieczka kilkudniowa — karty dni ───────────────────────────────────── */
.brc-day-card {
background: var(--bnt-panel-bg);
border: 1.5px solid var(--bnt-input-border);
border-radius: var(--bnt-r-input);
}
.brc-day-card:last-child { border-color: var(--bnt-accent); }
.brc-day-header,
.brc-day-card:last-child .brc-day-header {
background: var(--bnt-card-auto-bg);
border-bottom: 1px solid var(--bnt-input-divider);
border-radius: 10px 10px 0 0;
}
.brc-day-num {
width: 28px;
height: 28px;
background: var(--bnt-accent);
color: var(--bnt-on-accent);
}
.brc-day-title { color: var(--bnt-text); font-size: 15px; }
.brc-day-badge-return {
background: var(--bnt-accent);
color: var(--bnt-on-accent);
}
.brc-day-start {
background: var(--bnt-card-bg);
border: 1px solid var(--bnt-input-divider);
border-radius: 10px;
font-size: 14px;
}
.brc-day-start-label { color: var(--bnt-text-helper); }
.brc-day-start-text { color: var(--bnt-text-secondary); }
.brc-day-start-text.brc-ds-filled { color: var(--bnt-text); }
.brc-multiday-result-note {
background: var(--bnt-card-auto-bg);
border: none;
border-radius: var(--bnt-r-input);
color: var(--bnt-text-secondary);
}
/* ── Wynajem weselny — segmenty ──────────────────────────────────────────── */
.brc-wedding-segment { border-left: 4px solid var(--bnt-accent); }
.brc-seg-num {
width: 34px;
height: 34px;
background: var(--bnt-accent);
color: var(--bnt-on-accent);
font-size: 17px;
}
.brc-seg-header h4,
.brc-wedding-segment .brc-seg-header h4 {
font-size: var(--bnt-fs-segment);
font-weight: 700;
color: var(--bnt-text);
}
.brc-wedding-segment .brc-field label { font-size: var(--bnt-fs-label); }
.brc-wedding-segment .brc-field input { font-size: var(--bnt-fs-input); }
/* ── Błąd ────────────────────────────────────────────────────────────────── */
.brc-error {
background: rgba(201, 79, 61, 0.1);
border: 1.5px solid var(--bnt-error);
border-radius: var(--bnt-r-input);
color: var(--bnt-error);
font-size: 14px;
}
/* ── Wyniki / potwierdzenie ──────────────────────────────────────────────── */
#brc-results {
background: var(--bnt-card-bg);
border: none;
border-radius: var(--bnt-r-card);
padding: var(--bnt-pad-card);
}
.brc-success-icon {
background: var(--bnt-green);
box-shadow: 0 4px 14px rgba(47, 158, 111, 0.35);
}
.brc-results-title { color: var(--bnt-text); }
.brc-results-subtitle { color: var(--bnt-text-secondary); }
.brc-stat {
background: var(--bnt-input-bg);
border: 1.5px solid var(--bnt-input-border);
border-radius: var(--bnt-r-input);
}
.brc-stat-label { color: var(--bnt-text-helper); font-size: 12px; }
.brc-stat-value { color: var(--bnt-text); font-size: 17px; }
.brc-fuel-note {
background: var(--bnt-accent-tile);
border: none;
border-radius: var(--bnt-r-input);
color: var(--bnt-accent-text);
font-size: 14px;
}
.brc-contact-note {
background: transparent;
border: 1.5px solid var(--bnt-green);
border-radius: var(--bnt-r-input);
color: var(--bnt-green);
}
/* Wyniki weselne */
.brc-wedding-seg-card {
background: var(--bnt-card-auto-bg);
border: none;
border-radius: var(--bnt-r-input);
}
.brc-wedding-seg-label { color: var(--bnt-accent-text); }
.brc-wedding-seg-detail { color: var(--bnt-text-secondary); }
.brc-wedding-seg-cost { color: var(--bnt-text); }
.brc-wedding-total-box {
background: var(--bnt-input-bg);
border: 1.5px solid var(--bnt-input-border);
border-radius: var(--bnt-r-input);
}
.brc-wedding-total-row { color: var(--bnt-text-secondary); }
.brc-wedding-total-main {
border-top: 2px solid var(--bnt-green-ring);
color: var(--bnt-green);
}
/* ── Pasek zalogowanego użytkownika ──────────────────────────────────────── */
.brc-user-badge {
background: var(--bnt-map-tile-bg);
border: 1px solid var(--bnt-input-border);
box-shadow: var(--bnt-shadow-tile);
}
.brc-user-badge__name { color: var(--bnt-text-secondary); }
.brc-user-badge__logout {
background: var(--bnt-ink);
color: var(--bnt-accent) !important;
}
.brc-user-badge__logout:hover { background: #2a2f42 !important; }
[data-theme="dark"] .brc-user-badge__logout {
background: var(--bnt-accent);
color: var(--bnt-on-accent) !important;
}
/* ── Mapa: kontrolki + tryb ciemny ───────────────────────────────────────── */
.brc-calculator .leaflet-control-zoom { border: none; box-shadow: none; }
.brc-calculator .leaflet-control-zoom a {
width: 38px;
height: 38px;
line-height: 38px;
background: var(--bnt-map-tile-bg);
color: var(--bnt-map-tile-text);
border: none;
box-shadow: var(--bnt-shadow-tile);
font-family: var(--bnt-font);
font-size: 21px;
}
.brc-calculator .leaflet-control-zoom a:first-child { border-radius: 10px 10px 0 0; }
.brc-calculator .leaflet-control-zoom a:last-child { border-radius: 0 0 10px 10px; margin-top: 2px; }
.brc-calculator .leaflet-control-attribution {
background: rgba(253, 252, 250, 0.82);
color: var(--bnt-text-secondary);
font-family: var(--bnt-font);
}
/* Ciemne kafle mapy — fallback filtrem (spec §5) */
[data-theme="dark"] #brc-map .leaflet-layer {
filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}
[data-theme="dark"] .brc-calculator .leaflet-control-attribution {
background: rgba(38, 42, 56, 0.82);
}
.brc-map-marker { font-family: var(--bnt-font); }
/* ── Przełącznik dzień/noc (przycisk tworzy bnt-theme-toggle.js) ─────────── */
.bnt-theme-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 1000;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
cursor: pointer;
background: var(--bnt-map-tile-bg);
color: var(--bnt-map-tile-text);
box-shadow: var(--bnt-shadow-tile);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: transform 0.15s;
}
.bnt-theme-toggle:hover { transform: scale(1.08); }
/* ══ TWARDE ODCIĘCIE OD MOTYWU (v1.70.1) ═════════════════════════════════
Motywy WP potrafią wygrać specyficznością na font-family, marginesach
i line-height przycisków/tekstów — poniższe reguły izolują kalkulator. */
#brc-calculator,
#brc-calculator *,
#brc-calculator *::before,
#brc-calculator *::after {
font-family: var(--bnt-font) !important;
}
/* Siatka bezpieczeństwa: neutralizuje puste i zbędne
wstrzyknięte przez
wpautop (właściwa naprawa: wyłączenie wpautop w PHP, v1.70.3 — to jest fallback,
gdyby motyw formatował inną ścieżką). Child-combinator `>` NIE rusza intencjonalnych
wewnątrz (opisy kafli). */
#brc-calculator .brc-type-grid > br,
#brc-calculator .brc-type-card > br,
#brc-calculator #brc-type-selector > p:empty,
#brc-calculator .brc-type-grid > p:empty,
#brc-calculator .brc-section > p:empty,
#brc-calculator form > p:empty {
display: none !important;
margin: 0 !important;
}
/* Ekran główny: zwarte karty, bez rozciągania i bez paska przewijania.
Oryginalne `flex: 1 1 0% !important` w kolumnie rozciąga karty na równe
wysokości (puste przestrzenie) — przywracamy wysokość z treści. */
#brc-type-selector .brc-type-grid {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
#brc-type-selector .brc-type-card {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 24px 28px !important;
line-height: 1.45 !important;
box-sizing: border-box !important;
align-content: center !important; /* pas bezpieczeństwa: nawet rozciągnięta karta centruje treść w pionie */
}
#brc-type-selector .brc-type-icon,
#brc-type-selector .brc-type-card::after {
margin: 0 !important;
}
#brc-type-selector .brc-type-card strong {
margin: 0 !important;
padding: 0 !important;
font-size: 21px !important;
line-height: 1.25 !important;
}
#brc-type-selector .brc-type-card small {
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
#brc-type-selector .brc-type-logo {
margin: 0 0 24px !important;
padding: 0 !important;
}
#brc-type-selector {
scrollbar-width: thin;
scrollbar-color: var(--bnt-rail) transparent;
}
/* ── Responsywność wysokości — modal ma się mieścić bez przewijania ──────── */
@media (max-height: 840px) {
#brc-type-selector { padding: 24px 26px 22px !important; }
#brc-type-selector .brc-type-logo { margin-bottom: 16px !important; }
#brc-type-selector .brc-type-grid { gap: 10px !important; }
#brc-type-selector .brc-type-card { padding: 16px 22px !important; }
.brc-type-icon { width: 52px; height: 52px; }
.brc-type-icon::before { inset: 11px; }
.brc-type-card::after { width: 40px; height: 40px; font-size: 18px; }
#brc-type-selector .brc-type-card strong { font-size: 19px !important; }
#brc-type-selector .brc-type-card small { font-size: 14px !important; }
.bnt-logo-tile { width: 46px; height: 46px; }
.bnt-logo-word { font-size: 23px; }
}
@media (max-height: 660px) {
#brc-type-selector .brc-type-card small { display: none !important; }
#brc-type-selector .brc-type-card {
grid-template-areas: "icon title arrow" !important;
grid-template-columns: 52px 1fr 40px !important;
}
#brc-type-selector .brc-type-card strong { align-self: center !important; }
}
/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
#brc-panel { padding: 16px; }
#brc-type-bar {
top: -16px;
margin: -16px -16px 16px;
padding: 14px 16px;
}
.brc-section { padding: 18px; }
#brc-type-selector .brc-type-card {
grid-template-columns: 48px 1fr 38px !important;
column-gap: 14px !important;
padding: 18px 16px !important;
}
.brc-type-icon { width: 48px; height: 48px; border-radius: 13px; }
.brc-type-icon::before { inset: 10px; }
#brc-type-selector .brc-type-card strong { font-size: 18px !important; }
#brc-type-selector .brc-type-card small { font-size: 13px !important; }
.brc-type-card::after { width: 38px; height: 38px; font-size: 17px; }
.bnt-logo-word { font-size: 22px; }
.bnt-logo-word-tld { font-size: 15px; }
.bnt-logo-tile { width: 44px; height: 44px; }
}