/*
 * SerwisApp — wspólna tożsamość wizualna (ładowana zaraz po Tablerze we wszystkich układach: strona produktu,
 * logowanie, aplikacja, kreator, portal klienta, strona zdjęć na telefonie, panel platformy).
 * Jeden kolor główny dla całego produktu: Tabler wylicza z --tblr-primary wszystkie odcienie (przyciski, linki,
 * tła -lt), więc wystarczy go nadpisać. Gradient marki — ten sam w panelu logowania, hero strony i zachętach.
 */
:root, [data-bs-theme] {
    --brand-blue: #2563eb;
    --brand-blue-dark: #1d4ed8;
    --brand-navy: #1e3a8a;
    --brand-indigo: #4f46e5;
    --brand-violet: #7c3aed;
    --brand-sky: #0ea5e9;
    --brand-gradient: radial-gradient(900px 500px at 110% 110%, rgba(124, 58, 237, .55), transparent 60%),
        radial-gradient(700px 400px at -10% -10%, rgba(14, 165, 233, .45), transparent 60%),
        linear-gradient(135deg, var(--brand-navy), var(--brand-blue-dark) 55%, #4338ca);
    --brand-dots: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);

    --tblr-primary: #2563eb;
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-primary-lt-rgb: 233, 240, 253;
}

/* Powierzchnia w gradiencie marki (panel logowania, hero strony, zachęty) z delikatnym wzorem kropek. */
.brand-surface { position: relative; overflow: hidden; color: #fff; background: var(--brand-gradient); }
.brand-surface::after { content: ""; position: absolute; inset: 0; background-image: var(--brand-dots); background-size: 22px 22px; pointer-events: none; }
.brand-surface > * { position: relative; z-index: 1; }

/* Znak marki na ciemnym tle: logo w białym kafelku (jak w panelu logowania). */
.brand-mark { display: inline-block; padding: .3rem; border-radius: .6rem; background: rgba(255, 255, 255, .95); }

/* Pismo od prawej (arabski): strzałki i szewrony kierunkowe wskazują w lustrzaną stronę. */
[dir="rtl"] .ti-arrow-right, [dir="rtl"] .ti-arrow-left, [dir="rtl"] .ti-arrow-narrow-right, [dir="rtl"] .ti-arrow-narrow-left,
[dir="rtl"] .ti-chevron-right, [dir="rtl"] .ti-chevron-left, [dir="rtl"] .ti-chevrons-right, [dir="rtl"] .ti-chevrons-left,
[dir="rtl"] .ti-arrow-back-up, [dir="rtl"] .ti-external-link { display: inline-block; transform: scaleX(-1); }

/* Belka ogłoszeń nad nagłówkiem strony publicznej (/admin → Belka na stronie) i jej podgląd w panelu. */
.site-topbar { --topbar-bg: var(--brand-blue-dark, #113685); position: relative; z-index: 1031; display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.5rem; padding: .45rem 2.75rem; background: var(--topbar-bg); color: #fff; font-size: .875rem; font-weight: 500; line-height: 1.35; text-align: center; }
.site-topbar--dark { --topbar-bg: #0b1220; }
.site-topbar--green { --topbar-bg: #047857; }
.site-topbar--amber { --topbar-bg: #b45309; }
.site-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.site-topbar a:hover { color: #fff; text-decoration-thickness: 2px; }
.site-topbar .ti { flex-shrink: 0; font-size: 1.05rem; }
.site-topbar__close { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border: 0; border-radius: .5rem; background: transparent; color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
.site-topbar__close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.site-topbar.is-hidden { display: none; }
.site-topbar--preview { border-radius: .6rem; padding-inline: 1rem; }
@media (max-width: 575.98px) { .site-topbar { font-size: .8rem; justify-content: flex-start; text-align: start; padding-inline: .9rem 2.75rem; } }

/* Wybór koloru belki w panelu. */
.site-bar-swatch { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .4rem .4rem .75rem; border-radius: .6rem; border: 1px solid var(--tblr-border-color); cursor: pointer; }
.site-bar-swatch input { margin: 0; }
.site-bar-swatch span::before { content: ""; display: inline-block; width: 1rem; height: 1rem; border-radius: .3rem; margin-inline-end: .4rem; vertical-align: -.15rem; background: var(--brand-blue-dark, #113685); }
.site-bar-swatch--dark span::before { background: #0b1220; }
.site-bar-swatch--green span::before { background: #047857; }
.site-bar-swatch--amber span::before { background: #b45309; }
.site-bar-swatch:has(input:checked) { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary); }
.border-dashed { border-style: dashed !important; }