/*
   _____                                    _
  / ____|                                  | |
 | (___  _ __   __ _  ___ ___  ___ ___   __| | ___
  \___ \| '_ \ / _` |/ __/ _ \/ __/ _ \ / _` |/ _ \
  ____) | |_) | (_| | (__  __/ (__ (_) | (_| |  __/
 |_____/| .__/ \__,_|\___\___|\___\___/ \__,_|\___|
        | |
        |_|

    ------------
    Version 0.1.23 - REAPERCRAFT FINAL (Cleaned)
*/

/* Social */
.social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 50px 10%;
}

.social__card{
    background: #1f1f1f; /* ZMIANA: Ciemny */
    border: 1px solid #333;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.social__card:hover{
    background: #feba01; /* ZMIANA: Złoty hover */
    transition: .3s;
}

.social__card img{
    width: 40px;
    filter: invert(100%);
}

@media only screen and (max-width: 1300px) {

}

/* Info */
.info{
    background: #181818; /* ZMIANA: Ciemny */
    padding: 80px 10%;
}

.info__cards .row>*{
    padding: 0!important;
}

.info__title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}

.info__title h2{
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white; /* ZMIANA: Biały */
}

.info__title .hr{
    background: #feba01; /* ZMIANA: Złoty */
    width: 80px;
    height: 8px;
}

.row .col-lg-4:nth-child(3) .info__card{
    border-width: 0 0px 2px 0;
}

.row .col-lg-4:nth-child(4) .info__card,
.row .col-lg-4:nth-child(5) .info__card{
    border-width: 0 2px 0 0;
}

.row .col-lg-4:nth-child(6) .info__card{
    border-width: 0;
}

.info__card{
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 50px;
    align-items: center;
    flex-direction: column;
    min-height: 300px;
    border-width: 0 2px 2px 0;
    border-color: #333; /* ZMIANA: Ciemny border */
    border-style: solid;
}

.info__card img{
    width: 50px;
    margin-bottom: 30px;
    filter: invert(50%);
}

.info__card h2{
    font-size: 27px;
    font-weight: 700;
    color: white; /* ZMIANA: Biały */
}

.info__card p{
    color: #aaa;
    font-weight: 400;
}

@media only screen and (max-width: 991px) {
    .row .info__card{
        border-width: 0 0 2px 0!important;
    }

    .row .col-lg-4:nth-child(6) .info__card{
        border-width: 0!important;
    }
}

/* Trailer */
.trailer{
    padding: 100px 0;
    /* Później nadpiszemy padding-top dla fixu renderu */
}

.trailer__info{
    padding-left: 50px;
}

.trailer__info h1{
    font-weight: 700;
}

.trailer__info  p{
    max-height: 200px;
    overflow: auto;
    font-weight: 500;
    margin-bottom: 50px;
}

/* ZMIANA: Zaokrąglenie filmu */
.trailer iframe {
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    display: block;
}

@media only screen and (max-width: 1201px) {
    .trailer__info{
        padding-left: 10px;
        margin: 0;
    }

    .trailer{
        padding: 35px 7%;
    }

    .trailer iframe{
        height: 280px;
        margin-bottom: 20px;
    }
}

/* Tops */
.tops{
    padding: 20px 0 80px;
}
.tops h1{
    font-weight: 700;
    margin-bottom: 20px;
}

.tops__heads img{
    margin: 10px 10px 10px 0;
    /* ZMIANA: Styl główek */
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.tops__heads img:hover {
    transform: scale(1.1);
    z-index: 2; position: relative;
}

.tops__buyers--card{
    background: #e9e9e959;
    padding: 40px 30px 0;
}

.tops__buyers--card img{
    width: 160px;
}

.tops__buyers--card h2{
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 20px;
}

.tops__buyers--card h5{
    font-size: 16px;
}

.tops__buyers--card h3{
    font-weight: bold;
    color: #4045CC;
    margin-bottom: 20px;
}

@media only screen and (max-width: 1201px) {
    .tops{
        padding: 0px 7% 80px;
    }

    .tops h1{
        margin-top: 50px;
    }

    .tops__heads img{
        width: 55px;
    }

    .tops__buyers--card h3{
        margin-bottom: 40px;
    }

}

/* Shop */
.shop{
    padding: 0px 0 100px;
}

.shop__title{
    display: flex;
    align-items: center;
    gap: 30px;
}

.shop__title .hr{
    background: #feba01; /* ZMIANA: Złoty */
    min-width: 60px;
    height: 8px;
}

.shop__title h1{
    font-weight: 800;
}

.nav-pills{
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    padding: 0;
    color: #000;
    background: #feba01; /* ZMIANA: Złoty */
    transition: .5s;
    min-width: 100px;
    max-width: 120px;
    font-weight: 600;
    border-radius: 5px;
}

.nav-pills .nav-link {
    font-weight: 500;
    color: #bbbbbb;
    transition: all 0.3s ease; /* To odpowiada za płynność animacji */
    min-width: 100px;
    max-width: 120px;
}

.nav-pills .nav-link:nth-child(1){
    margin-left: -15px;
}

.shop__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* --- POPRAWIONY PRZYCISK VOUCHERA (Styl z Headera .btn__gray) --- */
.btn__voucher {
    /* Kopiujemy styl 1:1 z .btn__gray */
    background: #505050 !important;
    border: 1px solid #777 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 12px !important; /* Zaokrąglenie jak u góry */
    padding: 17px 40px !important;  /* Rozmiar jak u góry */
    font-weight: 700 !important;
    text-transform: uppercase;      /* Wielkie litery */
    display: inline-flex; 
    align-items: center; 
    gap: 10px;
    transition: 0.3s;
    cursor: pointer;
}

.btn__voucher:hover {
    background: #666 !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
}

/* --- POPRAWKA IKON W PRZYCISKACH --- */

/* Przycisk Pobierz (Żółty) - Ikona czarna */
.btn__blue i {
    color: #ffffff !important; /* Biała ikona */
    font-size: 22px;
    margin-right: 10px !important; /* Usuwamy margines, bo 'gap' w general.css robi robotę */
    margin-top: -2px; /* Mikro-korekta optyczna w górę */
}
/* Przycisk Vouchera (Szary) - Ikona biała */
.btn__voucher i, 
.btn__gray i {
    color: #fff !important; /* Biała ikona na szarym tle */
    margin-right: 8px;
    filter: none !important; /* Usuwamy stare filtry */
}

/* Usuwamy stare style dla img, jeśli gdzieś zostały */
.btn__voucher img, .btn__blue img {
    display: none !important;
}

.shop__products{
    margin-top: 30px;
}

.card__img{

    border-radius: 10px;
    justify-content: center;
    display: flex;
    align-items: center;
    min-height: 200px;
}

.shop__card{
    margin-bottom: 50px;
}

.card__img img{
    width: 100%;
    height: 100%;
}

.shop__card h2{
    margin-top: 25px;
    font-weight: 700;
    font-size: 25px;
    color: #fff; /* ZMIANA: Biały */
}

.shop__card p{
    color: #999;
    font-weight: 500;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1201px) {
    .shop{
        padding: 50px 7% 20px;
    }
    
    .btn__voucher{
        margin-top: 20px;
    }
}


/* --- CUSTOM ADDITIONS (Nasze dodatki) --- */

/* 1. Karta Top 1 Kupującego */
.top-one-card {
    background: #141414; border: 1px solid #333; border-radius: 12px;
    padding: 25px; display: flex; align-items: center; gap: 20px;
    position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); overflow: hidden;
}
.crown-icon {
    position: absolute; top: -10px; right: 10px; font-size: 80px;
    color: rgba(255, 212, 12, 0.05); transform: rotate(15deg); pointer-events: none;
}
.top-avatar {
    width: 80px; height: 80px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.top-info {
    display: flex; flex-direction: column; align-items: flex-start;
}
.top-info h2 {
    color: #fff; font-weight: 800; font-size: 24px; margin: 0; line-height: 1.2;
}
.top-info span {
    color: #888; font-size: 14px; margin-bottom: 10px; font-weight: 500;
}
.top-amount {
    background: #feba01; color: #000; font-weight: 700; font-size: 18px;
    padding: 5px 20px; border-radius: 8px; box-shadow: 0 0 15px rgba(255, 212, 12, 0.3);
}

/* 2. HEADER CONTENT (Treść) */
.header__content {
    padding: 100px 0 110px 0 !important; /* Odstęp tekstu */
}

/* 3. RELACJA HEADER - BODY (Warstwy) - TO CHOWA NOGI */
header + .container {
    position: relative !important;
    z-index: 10 !important; /* Wyżej niż header */
    background-color: #111111 !important; /* Twarde tło (nieprzezroczyste) */
    
    /* Opcjonalny cień dla szerokich monitorów */
    box-shadow: 0 0 0 100vmax #111111;
    clip-path: inset(0 -100vmax);
}

/* 4. RENDER POSTACI (Steve) */
.header__img {
    /* Ustawienia wielkości - Drastyczne powiększenie */
    width: 140% !important; max-width: unset !important;
    
    /* Pozycjonowanie */
    margin-left: -10% !important;
    margin-top: 60px !important;
    margin-bottom: -145px !important; /* Wystaje w dół, wchodzi pod body */
    
    /* Transformacje */
    transform: scale(1.1); transform-origin: center bottom;
    
    /* Efekty */
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.6));
    animation: float 6s ease-in-out infinite;
    
    /* Warstwy - chowa się pod kontenerem poniżej */
    position: relative !important;
    z-index: -1 !important; 
}
@keyframes float {
    0% { transform: translateY(0px) scale(1.1); }
    50% { transform: translateY(-15px) scale(1.1); }
    100% { transform: translateY(0px) scale(1.1); }
}

/* Fix trailera */
.trailer {
    padding-top: 50px !important;
}

/* RESPONSYWNOŚĆ STRONY GŁÓWNEJ (Telefony) */
@media only screen and (max-width: 1200px) {
    /* Reset wielkiego rendera na telefonach */
    .header__img {
        width: 100% !important; margin-left: 0 !important;
        margin-top: 20px !important; margin-bottom: 0 !important;
        transform: none !important; display: block !important;
    }
    
    /* Naprawa nagłówka na mobile */
    .header__content { padding-bottom: 50px !important; }
}
/* --- EFEKT POWIĘKSZENIA PRZYCISKU KATEGORII --- */
.nav-pills .nav-link:hover {
    transform: scale(1.1);  /* Powiększenie */
    color: #ffffff;         /* Biały tekst */
    z-index: 10;            /* Na wierzch */
    text-shadow: 0 0 10px rgba(254, 186, 1, 0.5);
}

/* <-- WKLEJ TO TUTAJ */


/* =========================================
   SEKCJA "WESPRZYJ NAS" (VOTE)
========================================= */
.support-us {
    padding: 80px 0 100px;
}

/* Nagłówek sekcji */
.support-us__header {
    text-align: center;
    margin-bottom: 50px;
}

.support-us__header h3 {
    color: #e0e0e0; /* Zmienione z czystego białego na jasny szary */
    font-weight: 700; /* Zmniejszona grubość z 800 na 700, żeby pasowało do reszty */
    font-size: 38px;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 3px solid #feba01;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.support-us__header p {
    color: #bbbbbb;
    font-size: 18px;
    font-weight: 500;
}

/* Kafelki */
.support__card {
    background-color: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysta animacja */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    height: 100%;
}

.support__card:hover {
    transform: translateY(-8px);
    border-color: #feba01;
    background-color: #1a1a1a;
    box-shadow: 0 15px 40px rgba(254, 186, 1, 0.2);
}

/* Ikona / Obrazek w kafelku */
.support__img {
    width: 60px;
    height: 60px;
    background-color: #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid #333;
    transition: 0.3s;
}

.support__img i {
    font-size: 24px;
    color: #888;
    transition: 0.3s;
}

/* Zmiana koloru ikony przy najechaniu na kafelek */
.support__card:hover .support__img {
    border-color: #feba01;
}

.support__card:hover .support__img i {
    color: #feba01;
    transform: scale(1.1);
}

/* Tytuł strony do głosowania */
.support__card h4 {
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px;
    transition: 0.3s;
}

.support__card:hover h4 {
    color: #feba01;
}

/* Subtext "Zostaw polubienie" */
.support__card span {
    color: #888;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}