/* ============================================================
   ZARAN.TV – GŁÓWNY MOTYW
   Dark Tibia style + layout + komponenty
   Uwaga: kolejność ma znaczenie przy nadpisywaniu styli!
   ============================================================ */


/* ------------------------------------------------------------
   GLOBALNE TŁO / SCENA
------------------------------------------------------------ */

/* Ciemne tło strony z tibijskim złotem w tle */
.tibia-bg {
    background: radial-gradient(circle at top, #111827 0, #020617 55%, #02040a 100%);
    color: #e5e7eb;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Parallaxowa kula świetlna w prawym górnym rogu (dekor) */
.parallax-orb {
    position: fixed;
    top: -320px;          /* bardziej do góry */
    right: -320px;        /* bardziej w prawo, poza kartą */
    width: 650px;
    height: 650px;
    background: radial-gradient(
        circle at 60% 30%,
        rgba(245, 210, 108, 0.7) 0%,
        rgba(34, 197, 94, 0.35) 28%,
        rgba(15, 23, 42, 0) 52%    /* szybciej znika w przezroczystość */
    );
    opacity: 0.25;        /* słabszy glow */
    pointer-events: none;
    z-index: 0;
    transform: translateY(var(--orb-offset, 0px));
    will-change: transform;
}

/* Wszystkie główne layoutowe elementy muszą być nad tłem orb */
.layout-wrapper,
.tibia-header,
.tibia-sidebar,
.main-content {
    position: relative;
    z-index: 1;
}


/* ------------------------------------------------------------
   NAGŁÓWEK / TOPBAR
------------------------------------------------------------ */

.tibia-header {
    border-bottom: 1px solid rgba(245, 210, 108, 0.18);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 0.98));
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Logo Zaran w nagłówku */
.zaran-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid rgba(245, 210, 108, 0.7);
    box-shadow: 0 0 15px rgba(245, 210, 108, 0.35);
}

/* Napis ZARAN.TV – tytuł */
.tibia-title {
    font-family: "Cinzel", "Trajan Pro", serif;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f5d26c;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

/* Podtytuł pod logo/tytułem */
.tibia-subtitle {
    font-size: 0.8rem;
    color: #c4b38a;
}


/* ------------------------------------------------------------
   SIDEBAR / MENU LEWE
------------------------------------------------------------ */

/* Podstawowy wygląd sidebaru (desktop + mobile – logika niżej w media queries) */
.tibia-sidebar {
    min-height: calc(100vh - 56px);
    background: radial-gradient(circle at top left, #020617 0, #020617 40%, #02040a 100%);
    border-right: 1px solid rgba(15, 23, 42, 0.9);
    width: 260px;
    transition: width 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* Klasa techniczna .collapsed – używana w trybie mobile (przesuwanie) */
.tibia-sidebar.collapsed {
    width: 70px;
}

/* Linki w sidebarze (menu główne) */
.tibia-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.92rem;
    color: #e5e7eb;
    margin-bottom: 0.2rem;
    transition: all 0.18s ease-in-out;
}

/* Ikony w linkach */
.tibia-sidebar .nav-link i {
    font-size: 1.1rem;
    color: #9ca3af;
}

/* Hover na linkach w sidebarze */
.tibia-sidebar .nav-link:hover {
    background: linear-gradient(90deg, rgba(55, 65, 81, 0.55), transparent);
    color: #f5d26c;
    transform: none; /* zamiast translateX(2px) */
}

/* Aktywny link w sidebarze */
.tibia-nav-link.active {
    background: linear-gradient(90deg, rgba(245, 210, 108, 0.16), rgba(30, 64, 175, 0.55));
    color: #f5d26c !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Ikona aktywnego linku */
.tibia-nav-link.active i {
    color: #f5d26c;
}

/* Tekst przy ikonach – chowany przy zwiniętym sidebarze */
.sidebar-text {
    white-space: nowrap;
}

/* Przy .collapsed chowamy tekst (mobile) – dodatkowe sterowanie jest niżej w media queries */
.tibia-sidebar.collapsed .sidebar-text {
    display: none;
}

/* Sekcje w sidebarze (np. SOCIAL, PLATFORMY) */
.sidebar-section {
    color: #9ca3af;
}

/* Etykietki typu "SOCIALE" / "PLATFORMY" */
.sidebar-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

/* Przyciski Kick/Twitch w sidebarze (wersja globalna – nadpisana niżej) */
.tibia-btn-kick {
    background: linear-gradient(90deg, #16a34a, #065f46);
    border: none;
    color: #f9fafb;
}

.tibia-btn-kick:hover {
    filter: brightness(1.1);
    color: #f9fafb;
}

.tibia-btn-twitch {
    background: linear-gradient(90deg, #9333ea, #4c1d95);
    border: none;
    color: #f9fafb;
}

.tibia-btn-twitch:hover {
    filter: brightness(1.1);
    color: #f9fafb;
}

/* Dzieląca linia w sidebarze */
.tibia-divider {
    border-color: rgba(75, 85, 99, 0.7);
}


/* ------------------------------------------------------------
   GŁÓWNA CZĘŚĆ STRONY / CONTENT
------------------------------------------------------------ */

/* Wrapper na główny content */
.main-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------
   KARTY / BOXY
------------------------------------------------------------ */

.tibia-card {
    border-radius: 1rem;
    border: 1px solid rgba(31, 41, 55, 0.9);
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 0.98));
    box-shadow:
        0 18px 30px rgba(0, 0, 0, 0.8),
        0 0 18px rgba(15, 23, 42, 0.9);
}


/* ------------------------------------------------------------
   SEKCJA HERO (strona główna)
------------------------------------------------------------ */

.hero-card {
    position: relative;
    overflow: hidden;
}

/* Delikatne światło w lewym górnym rogu karty hero */
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0, rgba(245, 210, 108, 0.12), transparent 60%);
    pointer-events: none;
}

/* Tytuł hero */
.hero-title {
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5d26c;
}

/* Tekst hero */
.hero-text {
    font-size: 0.95rem;
    color: #e5e7eb;
    opacity: 0.9;
}

/* Złote wyróżnienie */
.tibia-highlight {
    color: #f5d26c;
}


/* ------------------------------------------------------------
   MAGICZNA KULA / ORB (hero + logo)
------------------------------------------------------------ */

/* Orb z licznikiem/napisem */
.hero-orb {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 0, #f5d26c, #0f766e 40%, #020617 80%);
    box-shadow:
        0 0 40px rgba(245, 210, 108, 0.5),
        0 0 80px rgba(15, 118, 110, 0.8);
    color: #020617;
    text-align: center;
}

.hero-orb .orb-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-orb .orb-number {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.hero-orb .orb-sub {
    font-size: 0.9rem;
}

/* Orb z logo */
.hero-logo-orb {
    background: radial-gradient(circle at 30% 0,
    #f5d26c 0%,
    #0f766e 40%,
    #020617 80%);
    position: relative;
    overflow: hidden;
}

/* Logo w środku orba – z parallaxem */
.hero-logo-img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 18px rgba(245, 210, 108, 0.7));
    transform: translateY(var(--orb-offset, 0px)); /* parallax */
}

.hero-logo-orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(245, 210, 108, 0.4) 0%,
                rgba(15, 118, 110, 0.3) 30%,
                rgba(2, 6, 23, 0) 70%);
    z-index: 0;
}

.hero-logo-img {
    position: relative;
    z-index: 2;
}


/* ------------------------------------------------------------
   PRZYCISKI / BUTTONY
------------------------------------------------------------ */

.tibia-btn-primary {
    background: linear-gradient(90deg, #f5d26c, #eab308);
    border: none;
    color: #111827;
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 1.4rem;
}

.tibia-btn-primary:hover {
    filter: brightness(1.08);
    color: #020617;
}

/* Półtransparentny przycisk obrysowany */
.tibia-btn-outline {
    border-radius: 999px;
    border: 1px solid rgba(245, 210, 108, 0.7);
    color: #f5d26c;
    background: rgba(15, 23, 42, 0.8);
}

.tibia-btn-outline:hover {
    background: rgba(245, 210, 108, 0.12);
    color: #f9fafb;
}


/* ------------------------------------------------------------
   STATYSTYKI STREAMÓW / WIDGETY
------------------------------------------------------------ */

.stats-card {
    position: relative;
    overflow: hidden;
}

/* Delikatny highlight w prawym górnym rogu */
.stats-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.25), transparent 60%);
    pointer-events: none;
}

.stats-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

.stats-value {
    font-size: 1.7rem;
    color: #f5d26c;
}

.stats-sub {
    font-size: 0.8rem;
    color: #d1d5db;
}

/* Ikony platform (Twitch / Kick / YouTube) */
.stats-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.stats-icon.twitch {
    background: radial-gradient(circle at 30% 0, #f5d26c, #9333ea);
    color: #020617;
}

.stats-icon.kick {
    background: radial-gradient(circle at 30% 0, #f5d26c, #16a34a);
    color: #020617;
}

.stats-icon.youtube {
    background: radial-gradient(circle at 30% 0, #ff0000, #8b0000);
    color: #ffffff;
}


/* ------------------------------------------------------------
   LINKI OGÓLNE
------------------------------------------------------------ */

.tibia-link {
    color: #f5d26c;
    text-decoration: none;
}

.tibia-link:hover {
    text-decoration: underline;
}


/* ------------------------------------------------------------
   TABELA STREAMÓW (ZARAN.TV – Ostatnie streamy)
   Transparentny wygląd + DataTables
------------------------------------------------------------ */

/* Karta z tabelą w sekcji #stream-stats – bez tła, tylko ramka */
#stream-stats > .tibia-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 1rem;
    border: 1px solid rgba(55, 65, 81, 0.9);
}

/* Sama tabela – zero tła, żeby przebijał gradient strony */
#stream-stats .tibia-card .table-responsive,
#stream-stats .tibia-card table {
    background: transparent !important;
}

/* Nagłówki tabeli */
.tibia-table thead {
    background: transparent !important;
}

.tibia-table thead th {
    background: rgba(245, 210, 108, 0.05);
    color: #f5d26c;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(245, 210, 108, 0.25) !important;
}

/* Strzałki sortowania DataTables */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before {
    border-bottom-color: #f5d26c;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after {
    border-top-color: #f5d26c;
}

/* Wiersze – lekko przyciemnione, półprzezroczyste */
.tibia-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.15) !important;
}

.tibia-table tbody tr:hover {
    background: rgba(245, 210, 108, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 210, 108, 0.15);
}

/* Większy komfort czytania – padding */
.tibia-table tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* Link "Zobacz" w tabeli */
.tibia-table a.tibia-link {
    color: #f5d26c !important;
    font-weight: 500;
}

/* Input i select DataTables (filtrowanie, ilość rekordów) */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.6);
    border-radius: 999px;
    color: #e5e7eb;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
}

/* Etykiety i info DataTables */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: #e5e7eb !important;
    font-size: 0.8rem;
}


/* ------------------------------------------------------------
   RESPONSYWNOŚĆ – PODSTAWOWE DROBNE POPRAWKI
------------------------------------------------------------ */

@media (max-width: 768px) {
    .main-content {
        padding-top: 1.5rem;
    }

    .hero-orb {
        width: 180px;
        height: 180px;
    }
}


/* ------------------------------------------------------------
   STICKY FOOTER – LAYOUT STRONY
------------------------------------------------------------ */

/* Sticky footer layout + animacja contentu */
html, body {
    height: 100%;
}

/* Pierwsza definicja layout-wrapper (ciało strony) – ogólne ustawienia */
.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.layout-wrapper > .container-fluid {
    flex: 1 0 auto;
}

/* Animacja wejścia contentu */
.page-content {
    flex: 1 0 auto;
    animation: fadeInUp 0.5s ease-out both;
}

/* Fade-in dla contentu */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ------------------------------------------------------------
   HARD RESET – Bootstrap table backgrounds
------------------------------------------------------------ */

.table > :not(caption) > * > * {
    background-color: transparent !important;
}

table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
}

table.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
}

table.dataTable.table tbody tr > td,
table.dataTable.table thead tr > th,
table.dataTable.table tfoot tr > td {
    background-color: transparent !important;
}


/* ------------------------------------------------------------
   PAGINACJA DATATABLES – pełne kapsułki
------------------------------------------------------------ */

/* Hard override zmiennych Bootstrap dla paginacji */
div.dataTables_wrapper ul.pagination {
    --bs-pagination-bg: transparent !important;
    --bs-pagination-hover-bg: transparent !important;
    --bs-pagination-active-bg: #f5d26c !important;
    --bs-pagination-color: #e5e7eb !important;
    --bs-pagination-hover-color: #f5d26c !important;
    --bs-pagination-active-color: #111827 !important;

    --bs-pagination-border-color: rgba(148,163,184,0.25) !important;
    --bs-pagination-hover-border-color: rgba(245,210,108,0.55) !important;
    --bs-pagination-active-border-color: transparent !important;

    --bs-pagination-border-radius: 999px !important;
}

/* Wygląd linków w paginacji */
div.dataTables_wrapper ul.pagination .page-link {
    background: transparent !important;
    border: 1px solid var(--bs-pagination-border-color) !important;
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
    color: var(--bs-pagination-color) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

/* Hover */
div.dataTables_wrapper ul.pagination .page-link:hover {
    border-color: var(--bs-pagination-hover-border-color) !important;
    color: var(--bs-pagination-hover-color) !important;
    background: transparent !important;  /* żadnego wypełnienia */
}

/* Active */
div.dataTables_wrapper ul.pagination .page-item.active .page-link {
    background: var(--bs-pagination-active-bg) !important;
    color: var(--bs-pagination-active-color) !important;
    border-color: transparent !important;
    box-shadow: 0 0 6px rgba(245,210,108,0.35) !important;
}

/* Disabled */
div.dataTables_wrapper ul.pagination .page-item.disabled .page-link {
    border-color: rgba(148,163,184,0.15) !important;
    color: #6b7280 !important;
    opacity: .5 !important;
    background: transparent !important;
}

/* Usuwamy obramowania z LI (paginate_button) */
div.dataTables_wrapper ul.pagination li.paginate_button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* żeby nie robił drugiego kółka */
}

/* Zawsze kapsułki, żadnych kwadratów w paginacji */
div.dataTables_wrapper ul.pagination .page-item .page-link,
div.dataTables_wrapper ul.pagination .page-item:first-child .page-link,
div.dataTables_wrapper ul.pagination .page-item:last-child .page-link,
div.dataTables_wrapper ul.pagination .page-item:not(:first-child) .page-link {
    border-radius: 999px !important;
}

/* Pilnowanie promienia na hoverze */
div.dataTables_wrapper ul.pagination .page-item .page-link:hover {
    border-radius: 999px !important;
}

/* Dystans między przyciskami */
div.dataTables_wrapper ul.pagination .page-item + .page-item .page-link {
    margin-left: 4px !important;
}

/* Zero tła także na li.page-item (żeby nie było prostokąta) */
div.dataTables_wrapper ul.pagination .page-item,
div.dataTables_wrapper ul.pagination .page-item:hover,
div.dataTables_wrapper ul.pagination .page-item:focus {
    background: transparent !important;
    box-shadow: none !important;
}


/* ------------------------------------------------------------
   BESTIARY – SEKCJA OFERTOWA
------------------------------------------------------------ */

.bestiary-intro {
    position: relative;
}

/* Ramka wokół intro */
.bestiary-intro::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(245, 210, 108, 0.15);
    pointer-events: none;
}

/* Tło podsumowania */
.bestiary-summary {
    background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
}

.bestiary-list li {
    margin-bottom: 0.25rem;
}

/* Karty modeli współpracy */
.bestiary-plan {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 2.6rem;   /* miejsce pod wstęgę MODEL I/II/III */
}

/* Wyróżniony plan */
.bestiary-plan-featured {
    box-shadow: 0 0 18px rgba(245, 210, 108, 0.25);
    border-color: rgba(245, 210, 108, 0.45);
}

/* Wstęga MODEL I/II/III w lewym górnym rogu karty */
.bestiary-step-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.3rem 1.3rem 0.45rem;
    border-bottom-right-radius: 999px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background: linear-gradient(90deg, #f5d26c, #eab308);
    color: #111827;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.65);
    z-index: 3;
    white-space: nowrap;
}

/* Cena */
.bestiary-price {
    margin-top: auto;
}

.bestiary-price .price-main {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5d26c;
}

.bestiary-price .price-sub {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Dodatkowe notki */
.bestiary-note {
    color: #e5e7eb;
}

/* Discord CTA */
.discord-card-link {
    text-decoration: none;
    color: inherit;
}

.discord-card {
    transition: 0.3s ease-in-out;
    border: 1px solid rgba(88, 101, 242, 0.25);
}

.discord-card:hover {
    border-color: rgba(88, 101, 242, 0.55);
    box-shadow: 0 0 14px rgba(88, 101, 242, 0.35);
    transform: translateY(-3px);
}

.discord-icon {
    font-size: 2.5rem;
    color: #5865F2;
    text-shadow: 0 0 8px rgba(88,101,242,0.45);
}

/* Oddech na dole stopki – marginesem sterujemy w sekcji layoutu */
.page-footer {
    padding-bottom: 1.5rem;
}

/* Tytuły sekcji (np. nagłówki bloków) */
.section-title {
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1.5rem;          /* możesz podbić do 1.65rem jeśli wolisz większe */
    color: #f5d26c;
    position: relative;
    padding-left: 0.5rem;
}

.section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
    width: 6px;
    height: 70%;
    background: linear-gradient(180deg, #f5d26c, #c59b2a);
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(245, 210, 108, 0.45);
}


/* ------------------------------------------------------------
   SOCIAL MEDIA BUTTONS
------------------------------------------------------------ */

.tibia-btn-facebook {
    background: linear-gradient(90deg, #1877f2, #145dbf);
    color: #fff !important;
    border: none;
}

.tibia-btn-facebook:hover {
    background: linear-gradient(90deg, #1b84ff, #166ad1);
    color: #fff !important;
}

.tibia-btn-instagram {
    background: radial-gradient(circle at 30% 30%, #fccc63, #f56040, #c13584, #833ab4);
    color: #fff !important;
    border: none;
}

.tibia-btn-instagram:hover {
    background: radial-gradient(circle at 30% 30%, #ffda7a, #ff6d4f, #d04192, #9a4cc7);
    color: #fff !important;
}

.tibia-btn-discord {
    background: linear-gradient(90deg, #5865f2, #4752c4);
    color: #fff !important;
    border: none;
}

.tibia-btn-discord:hover {
    background: linear-gradient(90deg, #6b77ff, #5a63da);
    color: #fff !important;
}

.tibia-btn-youtube {
    background: linear-gradient(90deg, #ff0000, #b30000);
    color: #fff !important;
    border: none;
}

.tibia-btn-youtube:hover {
    background: linear-gradient(90deg, #ff2a2a, #cc0000);
    color: #fff !important;
}


/* ------------------------------------------------------------
   TIBIA COINS – sekcja sprzedażowa
------------------------------------------------------------ */

.tc-hero {
    position: relative;
}

.tc-hero::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(245, 210, 108, 0.15);
    pointer-events: none;
}

.tc-list li {
    margin-bottom: 0.15rem;
}

/* Karta kalkulatora */
.tc-calculator {
    background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(3,7,18,0.98));
}

/* Badge z krótką informacją */
.tc-badge {
    border-radius: 999px;
    border: 1px solid rgba(245,210,108,0.4);
    color: #f5d26c;
    background-color: rgba(15,23,42,0.9);
}

/* Slider range */
.tc-range {
    accent-color: #f5d26c;
}

/* Inputy kalkulatora */
.tc-input {
    background-color: #020617;
    border-color: rgba(148,163,184,0.4);
    color: #e5e7eb;
}

.tc-input:focus {
    border-color: #f5d26c;
    box-shadow: 0 0 0 0.15rem rgba(245,210,108,0.25);
}

/* Box z przeliczoną ceną */
.tc-price-box {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: radial-gradient(circle at left top, rgba(245,210,108,0.08), rgba(15,23,42,0.95));
    border: 1px solid rgba(148,163,184,0.3);
}

.tc-price-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tc-price-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #f5d26c;
}

.tc-unit {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-left: 0.15rem;
    color: #e5e7eb;
}

/* Pakiety przykładowe */
.tc-package {
    border-radius: 0.9rem;
    border: 1px solid rgba(148,163,184,0.3);
}

.tc-package-price {
    margin-top: 0.35rem;
    font-weight: 600;
    color: #f5d26c;
}

.tc-package-featured {
    border-color: rgba(245,210,108,0.6);
    box-shadow: 0 0 16px rgba(245,210,108,0.25);
}


/* ------------------------------------------------------------
   SKILLWHEEL – Koło umiejętności + profesje
------------------------------------------------------------ */

.skillwheel-intro {
    position: relative;
}

/* Ramka wokół intro */
.skillwheel-intro::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(245, 210, 108, 0.15);
    pointer-events: none;
}

/* Podpisy (np. "Vocational Wheel") */
.skillwheel-label {
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* PROFESJE – duże kapsułki 2x2 */

.skillwheel-vocation-row {
    margin-top: 0.15rem;
}

/* Pojedyncza profesja (EK/RP/ED/MS/EM) */
.skillwheel-vocation {
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.45);
    background: radial-gradient(circle at top left, rgba(15,23,42,1), rgba(3,7,18,1));
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    transition: 0.18s ease-in-out;
}

/* Skrót profesji (np. EK, RP, ED, MS, EM) */
.skillwheel-voc-short {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #f5d26c, #c59b2a);
    color: #111827;
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: 0 0 8px rgba(245,210,108,0.4);
}

/* Pełna nazwa profesji (tooltip/label) */
.skillwheel-voc-name {
    font-weight: 500;
}

/* Hover / active dla profesji */
.skillwheel-vocation:hover {
    border-color: rgba(245,210,108,0.6);
    box-shadow: 0 0 12px rgba(15,23,42,0.9);
}

.skillwheel-vocation.active {
    background: linear-gradient(90deg, #f5d26c, #eab308);
    color: #111827;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(245,210,108,0.4);
}

.skillwheel-vocation.active .skillwheel-voc-short {
    background: #111827;
    color: #f5d26c;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

/* POZIOMY – mniejsze kapsułki */

.skillwheel-level,
.skillwheel-thumb {
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.4);
    background: transparent;
    color: #e5e7eb;
    font-size: 0.78rem;
    padding: 0.25rem 0.9rem;
    transition: 0.16s ease-in-out;
}

.skillwheel-level:hover,
.skillwheel-thumb:hover {
    border-color: rgba(245,210,108,0.6);
    color: #f5d26c;
}

.skillwheel-level.active,
.skillwheel-thumb.active {
    background: radial-gradient(circle at 30% 30%, #f5d26c, #eab308);
    color: #111827 !important;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(245,210,108,0.35);
}

/* Panel podglądu koła po prawej */
.skillwheel-viewer {
    background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(3,7,18,0.98));
}

.skillwheel-badge {
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.4);
    color: #e5e7eb;
    background: rgba(15,23,42,0.95);
}

/* Ramka na screen koła */
.skillwheel-preview-wrapper {
    background: radial-gradient(circle at center, rgba(15,23,42,1), rgba(2,6,23,1));
    border-radius: 1rem;
    border: 1px solid rgba(15,23,42,1);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
    padding: 1rem;
}

/* Obrazek podglądu koła */
.skillwheel-preview {
    max-height: 430px;
    border-radius: 0.75rem;
    box-shadow:
        0 0 24px rgba(0,0,0,0.8),
        0 0 18px rgba(56,189,248,0.08);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    cursor: zoom-in;
}

/* Hover na linku z obrazkiem */
.skillwheel-preview-link:hover .skillwheel-preview {
    transform: scale(1.01);
    box-shadow:
        0 0 30px rgba(0,0,0,0.9),
        0 0 20px rgba(245,210,108,0.18);
}

.skillwheel-thumbs .skillwheel-thumb {
    padding-inline: 0.9rem;
}

/* Dodatkowe info pod kołem (np. wersja, data, itd.) */
.skillwheel-meta {
    border-top: 1px dashed rgba(148,163,184,0.3);
    padding-top: 0.75rem;
}


/* ------------------------------------------------------------
   SIDEBAR – FIXED / OFF-CANVAS (desktop vs mobile)
------------------------------------------------------------ */

/* Desktop: sidebar przyklejony po lewej, content odsunięty */
@media (min-width: 992px) {

    .tibia-sidebar {
        position: fixed;
        top: 56px;                    /* wysokość headera */
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 1020;
        overflow-y: auto;
        overflow-x: hidden;
        transition: width 0.25s ease-in-out;
    }

    .main-content,
    .page-footer {
        margin-left: 260px;
        transition: margin-left 0.25s ease-in-out;
    }

    /* Po zwinięciu – węższy sidebar + mniejszy margines contentu */
    body.sidebar-collapsed .tibia-sidebar {
        width: 72px;
    }

    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .page-footer {
        margin-left: 72px;
    }
}

/* Mobile: sidebar wysuwa się z lewej, przycisk MENU go chowa/pokazuje */
@media (max-width: 991.98px) {

    .tibia-sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 1020;
        transform: translateX(0);
        transition: transform 0.25s ease-in-out;
    }

    .tibia-sidebar.collapsed {
        transform: translateX(-100%);
    }

    .main-content,
    .page-footer {
        margin-left: 0;   /* na mobile content na pełną szerokość */
    }
}

/* Link w sidebarze w budowie / wyłączony */
.tibia-nav-link.tibia-nav-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;       /* brak klikalności */
}

.tibia-nav-link.tibia-nav-disabled .badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   SIDEBAR – tryb zwinięty (ikonki only) – tylko desktop
------------------------------------------------------------ */

@media (min-width: 992px) {

    /* Ukrycie napisów i labeli przy zwiniętym sidebarze */
    body.sidebar-collapsed #sidebar .sidebar-text,
    body.sidebar-collapsed #sidebar .sidebar-label {
        display: none !important;
    }

    /* Główne linki menu – ikona wycentrowana */
    body.sidebar-collapsed #sidebar .nav-pills .nav-link {
        justify-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Sociale + Platformy – kwadratowe przyciski z samą ikoną */
    body.sidebar-collapsed #sidebar .sidebar-section.small .btn {
        justify-content: center;
        padding: 0.45rem;
        width: 100%;
    }

    body.sidebar-collapsed #sidebar .sidebar-section.small .btn i {
        margin-right: 0;
    }
}


/* ------------------------------------------------------------
   STICKY FOOTER – DRUGA CZĘŚĆ (doprecyzowanie)
   Uwaga: ta sekcja nadpisuje część właściwości layout-wrapper
------------------------------------------------------------ */

/* Spraw, by strona miała prawdziwy sticky footer */
.layout-wrapper {
    min-height: 100vh;
    display: flex;
}

.main-content {
    flex: 1; /* NIE height 100% */
    min-height: calc(100vh - 56px); /* 56px = wysokość headera */
    display: flex;
    flex-direction: column;
}

/* Stopka doklejana na dół */
.page-footer {
    margin-top: auto; /* magia sticky footera */
}

/* === ZARAN.TV – zachowanie sidebaru na mobile (off-canvas) – wersja 2
   UWAGA: ta sekcja nadpisuje wcześniejsze zachowanie na mobile tak,
   by domyślnie sidebar był ukryty i pokazywany przez body.sidebar-collapsed
------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .tibia-sidebar {
        position: fixed;
        top: 56px;              /* wysokość headera */
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: 1020;
        transform: translateX(-100%);          /* domyślnie UKRYTY */
        transition: transform 0.25s ease-in-out;
    }

    /* na mobile: pokazuj sidebar, gdy body ma klasę .sidebar-collapsed */
    body.sidebar-collapsed .tibia-sidebar {
        transform: translateX(0);
    }

    .main-content,
    .page-footer {
        margin-left: 0;
    }
}


/* ------------------------------------------------------------
   KICK BUTTON – STYL SPECJALNY (nadpisuje wcześniejszy gradient)
------------------------------------------------------------ */

/* Wersja finalna przycisku Kick (jasna zieleń, lekko tibijska) */
.tibia-btn-kick {
    background-color: #53fc18;
    border: 1px solid #2db80e;
    color: #000;
    border-radius: 4px;
}

.tibia-btn-kick:hover {
    background-color: #41d213;
    color: #000;
}

/* Ramka wokół iframe widgetu (np. Kick/Tipply) */
.tibia-widget-frame iframe {
    border-radius: 12px;
    overflow: hidden;
}


/* ------------------------------------------------------------
   TIPPLY GOAL – embed na stronie wsparcia
------------------------------------------------------------ */

.tipply-goal-wrapper {
    width: 100%;
    max-width: 720px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;        /* maska, która wytnie rogi */
    background: transparent;
    position: relative;
}

/* Iframe z celem – przycięty i przesunięty */
.tipply-goal-iframe {
    width: 100%;
    height: 700px;
    border: none;
    margin-top: -180px;
    transform: translateX(-80px);
}

/* Cały blok "Cel Wsparcia" tylko na dużych ekranach */
@media (max-width: 768px) {
    .support-goal-section {
        display: none !important;
    }
}


/* ------------------------------------------------------------
   KARTA POSTACI ZARAN (profil postaci + meta)
------------------------------------------------------------ */

/* Główna karta postaci */
.tibia-character-card {
    position: relative;
    border-radius: 12px;
}

/* Avatar z inicjałem "Z" */
.tibia-character-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f5d26c, #5a421a 65%, #1a1207 100%);
    border: 1px solid rgba(245, 210, 108, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
}

.tibia-character-avatar span {
    font-size: 2rem;
    font-weight: 700;
    color: #fff6d5;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Badże level / vocation */
.tibia-badge-level,
.tibia-badge-vocation {
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tibia-badge-level {
    background: linear-gradient(135deg, #3b2510, #7a5a26);
    border: 1px solid rgba(245, 210, 108, 0.8);
    color: #f5d26c;
}

.tibia-badge-vocation {
    background: linear-gradient(135deg, #161925, #343a5a);
    border: 1px solid rgba(173, 181, 255, 0.4);
    color: #dde2ff;
}

/* Kafle z parametrami (serwer, status, itp.) */
.tibia-character-meta {
    margin-top: 0.25rem;
}

.tibia-meta-box {
    background: radial-gradient(circle at 0 0, rgba(245, 210, 108, 0.05), transparent 55%);
    border-radius: 10px;
    border: 1px solid rgba(245, 210, 108, 0.18);
    padding: 0.75rem 0.9rem;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tibia-meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #aaa6a0;
    margin-bottom: 0.15rem;
}

.tibia-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f5f1e6;
}


/* ------------------------------------------------------------
   PANEL WHEEL OF DESTINY – obok karty postaci
------------------------------------------------------------ */

/* Klikalny link wokół obrazka */
.wheel-image-link {
    display: block;
}

/* Obrazek koła – podstawowy styl (nadpisywany jeszcze niżej) */
.tibia-wheel-img {
    width: 100%;
    border-radius: 14px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(245, 210, 108, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tibia-wheel-img:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(245, 210, 108, 0.35);
}

/* Na mniejszych ekranach Wheel niżej, info wyżej – standardowy stacking */
@media (max-width: 991.98px) {
    .wheel-panel {
        margin-top: 0.5rem;
    }

    .wheel-toggle {
        align-self: center;
        margin-bottom: 0.75rem;
    }
}


/* ------------------------------------------------------------
   TIBIJSKI PRZEŁĄCZNIK WHEEL OF DESTINY (Aktualne / Przyszłe)
------------------------------------------------------------ */

.wheel-toggle {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.3rem;
    background: rgba(0,0,0,0.45);
    border-radius: 999px;
    border: 1px solid rgba(245, 210, 108, 0.35);
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
}

/* Pojedynczy przycisk "Aktualne koło" / "Przyszłe koło" */
.wheel-toggle-btn {
    background: linear-gradient(180deg, #3b2a14, #1f150a);
    color: #d3c7a1;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 210, 108, 0.25);
    cursor: pointer;
    transition: all 0.20s ease-in-out;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.15),
        0 3px 6px rgba(0,0,0,0.45);
}

.wheel-toggle-btn:hover {
    color: #fff7d5;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.3),
        0 0 12px rgba(245, 210, 108, 0.35);
}

/* Aktywny przycisk */
.wheel-toggle-btn.is-active {
    background: linear-gradient(180deg, #f5d26c, #b48732);
    color: #1a1206;
    border-color: rgba(255, 236, 175, 0.85);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.45),
        0 0 15px rgba(245, 210, 108, 0.55);
    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   CENTROWANIE I SKALOWANIE OBRAZKÓW WHEEL
------------------------------------------------------------ */

/* Wrapper na obrazki z kołem – wyśrodkowanie */
.wheel-images {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Link trzymający obrazek na pełną szerokość kolumny */
.wheel-image-link {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Finalna wersja stylu obrazka – ważne: max-width 100% */
.tibia-wheel-img {
    max-width: 100%;   /* było 85% */
    height: auto;
    border-radius: 14px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(245, 210, 108, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tibia-wheel-img:hover {
    transform: scale(1.02);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.95),
        0 0 0 1px rgba(245, 210, 108, 0.45);
}

/* Panel z obrazkami koła – wyśrodkowanie przycisków względem obrazka */
.wheel-panel {
    display: flex;
    flex-direction: column;
    align-items: center; /* przyciski + obrazek centralnie */
    width: 100%;
}

/* =========================
   MOBILE SIDEBAR – overlay
   ========================= */
@media (max-width: 768px) {

    /* Header zawsze nad sidebar'em */
    .tibia-header {
        position: relative;
        z-index: 1101; /* większy niż sidebar */
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 240px;              /* dostosuj do swojej szerokości */
        height: 100vh;             /* pełna wysokość ekranu */
        padding-top: 56px;         /* wysokość headera, podbij jak trzeba */
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.3s ease;

        /* KLUCZOWE: scroll wewnątrz menu */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* po kliknięciu hamburgera – całe menu wjeżdża */
    body.sidebar-mobile-open #sidebar {
        transform: translateX(0);
    }

    /* treść strony pod spodem – bez lewego marginesu na mobile */
    body.sidebar-mobile-open .page-content {
        margin-left: 0 !important;
    }
}