/**
 * F-Tech Support: warstwa frontowa.
 *
 * Kontrakt designu Adlee: Archivo plus Public Sans, akcent #197BCA,
 * promien 8 px, przycisk 52 px, bez cieni, bez gradientow, hover zmienia
 * kolor i nic sie nie przesuwa. Skala odstepow oparta na 8 px.
 */

.ftsup {
    --fs-blue: #197BCA;
    --fs-blue-hover: #1568AE;
    --fs-blue-active: #125D9B;
    --fs-blue-soft: #EEF5FC;
    --fs-ink: #14181F;
    --fs-body: #4A5260;
    --fs-muted: #6B7480;
    --fs-line: #DDE3EA;
    --fs-line-strong: #C6CEDA;
    --fs-alt: #F5F7F9;
    --fs-white: #FFFFFF;
    --fs-danger: #B91C1C;
    --fs-danger-soft: #FEF6F6;
    --fs-blue-line: #CDE0F2;

    --fs-radius: 8px;
    --fs-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --fs-1: 0.25rem;
    --fs-2: 0.5rem;
    --fs-3: 0.75rem;
    --fs-4: 1rem;
    --fs-5: 1.5rem;
    --fs-6: 2rem;
    --fs-7: 3rem;
    --fs-8: 4rem;

    --fs-max: 1180px;
    --fs-gutter: clamp(1.25rem, 4vw, 2rem);
    --fs-font-head: 'Archivo', system-ui, sans-serif;
    --fs-font-body: 'Public Sans', system-ui, sans-serif;
    --fs-bottom-gap: 5.5rem;

    font-family: var(--fs-font-body);
    font-size: 1rem;
    color: var(--fs-ink);
    background: var(--fs-white);
    -webkit-font-smoothing: antialiased;
}

.ftsup *,
.ftsup *::before,
.ftsup *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ftsup [hidden],
.ftsup[hidden] { display: none !important; }

.ftsup p { font-size: 1rem; line-height: 1.7; color: var(--fs-body); }
.ftsup a { color: inherit; text-decoration: none; }
.ftsup h1, .ftsup h2, .ftsup h3 { font-family: var(--fs-font-head); color: var(--fs-ink); font-weight: 700; }
.ftsup ul, .ftsup ol, .ftsup li { list-style: none; }
.ftsup img { max-width: 100%; }
.ftsup svg { display: block; flex: 0 0 auto; }

.ftsup__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ftsup__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */

.ftsup__hero {
    padding: var(--fs-6) var(--fs-gutter);
    background: var(--fs-alt);
    border-bottom: 1px solid var(--fs-line);
}

/*
 * Wariant pelnej szerokosci. Tlo wychodzi poza kontener Elementora, ale
 * szerokosc elementu zostaje bez zmian, wiec nie pojawia sie poziomy pasek
 * przewijania i nic nie jest przycinane. Tresc dalej trzyma siatke 1180 px.
 */
.ftsup--bleed .ftsup__hero {
    border-bottom: 0;
    box-shadow: 0 0 0 100vmax var(--fs-alt);
    clip-path: inset(0 -100vmax);
}

.ftsup__hero-inner { max-width: var(--fs-max); margin: 0 auto; }

.ftsup__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fs-2);
    margin-bottom: var(--fs-3);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fs-muted);
}

.ftsup__crumbs a { color: var(--fs-muted); transition: color 0.15s var(--fs-ease); }
.ftsup__crumbs a:hover { color: var(--fs-blue); }
.ftsup__crumbs a:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; border-radius: 3px; }
.ftsup__crumbs span { color: var(--fs-ink); font-weight: 600; }
.ftsup__crumbs svg { color: var(--fs-line-strong); }

.ftsup__title {
    font-size: clamp(1.875rem, 3.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-wrap: balance;
}

.ftsup__lede {
    margin-top: var(--fs-3);
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--fs-body);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Uklad                                                              */
/* ------------------------------------------------------------------ */

.ftsup__body { padding: var(--fs-6) var(--fs-gutter) calc(var(--fs-bottom-gap) + env(safe-area-inset-bottom, 0px)); }

.ftsup__inner { max-width: var(--fs-max); margin: 0 auto; }

.ftsup--form-only .ftsup__inner,
.ftsup--list-only .ftsup__inner,
.ftsup--single-only .ftsup__inner { padding: var(--fs-5) var(--fs-gutter); }

.ftsup__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fs-5); }

/* Bez panelu bocznego formularz nie rozciaga sie na cala szerokosc strony. */
.ftsup__layout--single .ftsup__main { max-width: 46rem; }

.ftsup__main { min-width: 0; }

/* ------------------------------------------------------------------ */
/* Zakladki                                                           */
/* ------------------------------------------------------------------ */

.ftsup__tabs {
    display: flex;
    gap: var(--fs-5);
    margin-bottom: var(--fs-5);
    border-bottom: 1px solid var(--fs-line);
}

.ftsup__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-2);
    min-height: 48px;
    padding: 0 0 0.125rem;
    margin-bottom: -1px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fs-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--fs-ease), border-color 0.15s var(--fs-ease);
}

.ftsup__tab:hover { color: var(--fs-ink); }
.ftsup__tab.is-active { color: var(--fs-blue); border-bottom-color: var(--fs-blue); }
.ftsup__tab:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 3px; border-radius: 3px; }

.ftsup__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fs-blue);
    color: var(--fs-white);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Karty                                                              */
/* ------------------------------------------------------------------ */

.ftsup__card {
    padding: var(--fs-5);
    background: var(--fs-white);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius);
}

.ftsup__card + .ftsup__card { margin-top: var(--fs-4); }

.ftsup__card-title {
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: -0.012em;
    margin-bottom: var(--fs-4);
}

.ftsup__card--aside .ftsup__card-title { margin-bottom: var(--fs-2); }
.ftsup__card--aside p { font-size: 0.9375rem; line-height: 1.6; }
.ftsup__card--notice { background: var(--fs-alt); }

.ftsup__help {
    margin-top: var(--fs-2);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--fs-muted);
}

.ftsup__empty {
    padding: var(--fs-7) 0;
    text-align: center;
    color: var(--fs-muted);
}

.ftsup__alert {
    margin-bottom: var(--fs-4);
    padding: var(--fs-3) var(--fs-4);
    border-radius: var(--fs-radius);
    border-left: 3px solid var(--fs-blue);
    background: var(--fs-blue-soft);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fs-ink);
}

.ftsup__alert strong { display: block; margin-bottom: var(--fs-1); font-size: 1rem; }
.ftsup__alert p { margin-bottom: var(--fs-3); }
.ftsup__alert .ftsup__btn { margin-top: var(--fs-1); }

/* ------------------------------------------------------------------ */
/* Formularz                                                          */
/* ------------------------------------------------------------------ */

.ftsup__form { display: grid; gap: var(--fs-4); }

.ftsup__row { display: grid; gap: var(--fs-4); }

.ftsup__field { display: block; min-width: 0; }

.ftsup__field > label {
    display: block;
    margin-bottom: var(--fs-2);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fs-ink);
}

.ftsup__req { color: var(--fs-blue); font-weight: 700; }

.ftsup input[type="text"],
.ftsup input[type="email"],
.ftsup input[type="url"],
.ftsup input[type="tel"],
.ftsup input[type="number"],
.ftsup input[type="date"],
.ftsup input[type="search"],
.ftsup select,
.ftsup textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.8125rem var(--fs-4);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: var(--fs-ink);
    background-color: var(--fs-white);
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-radius);
    transition: border-color 0.15s var(--fs-ease), background-color 0.15s var(--fs-ease);
    appearance: none;
    -webkit-appearance: none;
}

.ftsup textarea {
    min-height: 168px;
    padding-top: var(--fs-3);
    resize: vertical;
    line-height: 1.65;
}

/* Wlasna strzalka listy zamiast kontrolki systemowej. */
.ftsup select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--fs-4) center;
    background-size: 17px 17px;
    cursor: pointer;
}

.ftsup input::placeholder,
.ftsup textarea::placeholder { color: var(--fs-muted); opacity: 1; }

.ftsup input:hover,
.ftsup select:hover,
.ftsup textarea:hover { border-color: var(--fs-muted); }

.ftsup input:focus-visible,
.ftsup select:focus-visible,
.ftsup textarea:focus-visible {
    outline: 2px solid var(--fs-blue);
    outline-offset: 1px;
    border-color: var(--fs-blue);
}

.ftsup input.is-error,
.ftsup textarea.is-error,
.ftsup select.is-error { border-color: var(--fs-danger); background-color: var(--fs-danger-soft); }

/* Pole plikow. Bez JavaScriptu widoczna jest zwykla kontrolka przegladarki. */
.ftsup__file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fs-3);
    padding: var(--fs-3);
    border: 1px dashed var(--fs-line-strong);
    border-radius: var(--fs-radius);
    background: var(--fs-alt);
    transition: border-color 0.15s var(--fs-ease);
}

.ftsup__file:hover { border-color: var(--fs-blue); }

.ftsup__file input[type="file"] { flex: 1 1 auto; font-size: 0.875rem; color: var(--fs-body); }

.ftsup__file-btn,
.ftsup__file-list { display: none; }

.ftsup--js .ftsup__file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.ftsup--js .ftsup__file-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-2);
    min-height: 44px;
    padding: 0 var(--fs-4);
    background: var(--fs-white);
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fs-ink);
    cursor: pointer;
    transition: border-color 0.15s var(--fs-ease), color 0.15s var(--fs-ease);
}

.ftsup--js .ftsup__file-btn:hover { border-color: var(--fs-blue); color: var(--fs-blue); }

.ftsup--js .ftsup__file input[type="file"]:focus-visible ~ .ftsup__file-btn {
    outline: 2px solid var(--fs-blue);
    outline-offset: 2px;
}

.ftsup--js .ftsup__file-list {
    display: block;
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fs-muted);
    word-break: break-word;
}

.ftsup--js .ftsup__file-list.is-filled { color: var(--fs-ink); }

/* Zgoda i pola wyboru */
.ftsup__field--check {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-3);
    padding: var(--fs-3) 0;
}

.ftsup__field--check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--fs-blue);
}

.ftsup__field--check label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--fs-body);
}

.ftsup__field--check a { color: var(--fs-blue); text-decoration: underline; text-underline-offset: 2px; }

.ftsup__radios { display: grid; gap: var(--fs-1); }

.ftsup__radio { display: flex; align-items: center; gap: var(--fs-2); min-height: 44px; }
.ftsup__radio input { width: 20px; height: 20px; accent-color: var(--fs-blue); }
.ftsup__radio label { margin: 0; font-weight: 400; font-size: 0.9375rem; }

.ftsup__as-user {
    padding: var(--fs-3) var(--fs-4);
    background: var(--fs-alt);
    border-radius: var(--fs-radius);
    font-size: 0.875rem;
    color: var(--fs-body);
}

.ftsup__as-user strong { color: var(--fs-ink); font-weight: 600; }

.ftsup__actions { display: flex; flex-wrap: wrap; gap: var(--fs-3); padding-top: var(--fs-1); }

.ftsup__form-msg { font-size: 0.9375rem; line-height: 1.6; color: var(--fs-body); }
.ftsup__form-msg:empty { display: none; }
.ftsup__form-msg.is-error { color: var(--fs-danger); }

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

.ftsup__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-2);
    min-height: 52px;
    padding: 0 var(--fs-6);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--fs-radius);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s var(--fs-ease), border-color 0.15s var(--fs-ease), color 0.15s var(--fs-ease);
}

.ftsup__btn--primary { background: var(--fs-blue); color: var(--fs-white); }
.ftsup__btn--primary:hover { background: var(--fs-blue-hover); color: var(--fs-white); }
.ftsup__btn--primary:active { background: var(--fs-blue-active); }

.ftsup__btn--secondary { background: var(--fs-white); color: var(--fs-ink); border-color: var(--fs-line-strong); }
.ftsup__btn--secondary:hover { border-color: var(--fs-blue); color: var(--fs-blue); }

.ftsup__btn--ghost {
    min-height: 44px;
    padding: 0 var(--fs-4);
    background: var(--fs-white);
    color: var(--fs-body);
    border-color: var(--fs-line-strong);
    font-size: 0.9375rem;
}

.ftsup__btn--ghost:hover { border-color: var(--fs-blue); color: var(--fs-blue); }

.ftsup__btn:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: 2px; }
.ftsup__btn[disabled] { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Filtry i lista                                                     */
/* ------------------------------------------------------------------ */

.ftsup__filters {
    display: grid;
    gap: var(--fs-3);
    padding-bottom: var(--fs-4);
    margin-bottom: var(--fs-4);
    border-bottom: 1px solid var(--fs-line);
}

.ftsup__tickets { display: grid; gap: var(--fs-2); }

.ftsup__ticket {
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius);
    overflow: hidden;
}

.ftsup__ticket.is-unread { border-left: 3px solid var(--fs-blue); }

.ftsup__ticket-link {
    display: block;
    padding: var(--fs-4);
    transition: background-color 0.15s var(--fs-ease);
}

.ftsup__ticket-link:hover { background: var(--fs-alt); }
.ftsup__ticket-link:focus-visible { outline: 2px solid var(--fs-blue); outline-offset: -2px; }

.ftsup__ticket-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fs-2);
    margin-bottom: var(--fs-1);
}

.ftsup__ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--fs-muted);
}

.ftsup__badge {
    --fs-badge: var(--fs-blue);
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--fs-badge);
    color: var(--fs-white);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.ftsup__ticket-subject {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--fs-ink);
}

.ftsup__ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-1);
    margin-top: var(--fs-1);
    font-size: 0.8125rem;
    color: var(--fs-muted);
}

.ftsup__new { color: var(--fs-blue); font-weight: 600; }

.ftsup__pagination { display: flex; flex-wrap: wrap; gap: var(--fs-1); margin-top: var(--fs-4); }

.ftsup__page {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius);
    font-size: 0.9375rem;
    color: var(--fs-body);
    transition: border-color 0.15s var(--fs-ease), color 0.15s var(--fs-ease);
}

.ftsup__page:hover { border-color: var(--fs-blue); color: var(--fs-blue); }
.ftsup__page.is-current { background: var(--fs-blue); border-color: var(--fs-blue); color: var(--fs-white); }

/* ------------------------------------------------------------------ */
/* Watek                                                              */
/* ------------------------------------------------------------------ */

.ftsup__thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fs-3);
    flex-wrap: wrap;
    margin-bottom: var(--fs-5);
    padding-bottom: var(--fs-4);
    border-bottom: 1px solid var(--fs-line);
}

.ftsup__thread-head .ftsup__card-title { margin-bottom: 0; margin-top: var(--fs-1); }

.ftsup__thread { display: grid; gap: var(--fs-3); }

.ftsup__msg {
    padding: var(--fs-4);
    background: var(--fs-white);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-radius);
}

.ftsup__msg--agent { background: var(--fs-blue-soft); border-color: var(--fs-blue-line); }

.ftsup__msg--event { padding: var(--fs-1) 0; background: transparent; border: 0; text-align: center; }

.ftsup__event { font-size: 0.8125rem; color: var(--fs-muted); }

.ftsup__msg-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fs-2);
    margin-bottom: var(--fs-2);
    font-size: 0.8125rem;
    color: var(--fs-muted);
}

.ftsup__msg-author { font-weight: 700; color: var(--fs-ink); }

.ftsup__msg-body p { margin-bottom: var(--fs-3); }
.ftsup__msg-body p:last-child { margin-bottom: 0; }
.ftsup__msg-body a { color: var(--fs-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

.ftsup__files { display: grid; gap: var(--fs-1); margin-top: var(--fs-3); }

.ftsup__files a {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-2);
    min-height: 44px;
    font-size: 0.875rem;
    color: var(--fs-body);
    word-break: break-word;
    transition: color 0.15s var(--fs-ease);
}

.ftsup__files a:hover { color: var(--fs-blue); }
.ftsup__files span { color: var(--fs-muted); font-size: 0.75rem; }

.ftsup__form--reply { margin-top: var(--fs-5); padding-top: var(--fs-5); border-top: 1px solid var(--fs-line); }

.ftsup__rating { margin-top: var(--fs-5); padding-top: var(--fs-5); border-top: 1px solid var(--fs-line); }
.ftsup__rating-buttons { display: flex; gap: var(--fs-2); margin-top: var(--fs-3); }

.ftsup__details { margin-bottom: var(--fs-4); }
.ftsup__details dt { font-size: 0.75rem; color: var(--fs-muted); margin-top: var(--fs-3); }
.ftsup__details dt:first-child { margin-top: 0; }
.ftsup__details dd { font-size: 0.9375rem; color: var(--fs-ink); word-break: break-word; }

.ftsup__side .ftsup__btn { margin-top: var(--fs-4); width: 100%; }

/* ------------------------------------------------------------------ */
/* Nadpisania srodowiska: Elementor i Voxel                           */
/* ------------------------------------------------------------------ */

.elementor-widget-shortcode .ftsup,
.entry-content .ftsup { margin: 0; }

.elementor-widget-container > .ftsup > .ftsup__hero:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Tablet i desktop                                                   */
/* ------------------------------------------------------------------ */

@media (min-width: 620px) {
    .ftsup__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftsup__filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
    .ftsup__card { padding: var(--fs-6); }
}

@media (min-width: 900px) {
    .ftsup__hero { padding-block: var(--fs-7) var(--fs-6); }
    .ftsup__body { padding-block: var(--fs-7) var(--fs-8); }

    .ftsup__layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--fs-6);
        align-items: start;
    }

    .ftsup__layout--single { grid-template-columns: minmax(0, 1fr); }
    .ftsup__side { position: sticky; top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ftsup *,
    .ftsup *::before,
    .ftsup *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------------ */
/* Kontekst: zgloszenie dotyczy konkretnego ogloszenia                */
/* ------------------------------------------------------------------ */

.ftsup__context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fs-2);
    padding: var(--fs-3) var(--fs-4);
    background: var(--fs-blue-soft);
    border: 1px solid var(--fs-blue-line);
    border-radius: var(--fs-radius);
    font-size: 0.875rem;
}

.ftsup__context-label { color: var(--fs-body); }

.ftsup__context-link {
    font-weight: 600;
    color: var(--fs-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ftsup__context-link:hover { color: var(--fs-blue-hover); }

.ftsup__context-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fs-muted);
}