/* ============================================
   FOTOFERIA HOMEPAGE MODERNIZATION
   Design Tokens & Modern Layout
   ============================================ */

/* ========== GLOBAL LAYOUT - FULL WIDTH ========== */
body {
    background: #0f0f0f;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Override #page to be full-width */
#page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: var(--usermenu-height, 40px) !important;
    background-color: var(--bg-page, #0F0F0F) !important;
}

/* Override #bd to be full-width */
#bd {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-page, #0f0f0f) !important;
}

/* ========== CENTRAL CONTENT WRAPPER ========== */
.ff-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}

/* ========== DESIGN TOKENS ========== */
:root {
    --ff-bg-main: #0f0f0f;
    --ff-bg-section: #151515;
    --ff-bg-card: #1c1c1c;
    --ff-border-card: #262626;
    --ff-accent-gold: #ffbf00;
    --ff-accent-red: #c92828;
    --ff-text-primary: #f5f5f5;
    --ff-text-secondary: #b3b3b3;
    --ff-text-muted: #777777;
    --ff-radius-card: 18px;
    --ff-radius-thumb: 12px;
    --ff-spacing-section: 80px;
    --ff-spacing-group: 40px;
}

/* ========== HIDE OLD MENU CONTAINERS ========== */
.menu.ff-topbar,
#userMenu,
.menuBar,
.menuRight,
.menuTop {
    display: none !important;
}

/* Hide old mainmenu if it exists separately */
#mainmenu:not(.ff-hero-menu nav):not(.ff-hero-menu #mainmenu) {
    display: none !important;
}

/* ========== HERO BANNER - FULL WIDTH ========== */
.ff-hero,
.ff-hero-banner {
    width: 100%;
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 30px 50px 35px;
    box-sizing: border-box;
    margin: 0;
}

.ff-hero-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-sizing: border-box;
    width: 100%;
}

.ff-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    --tagline-offset: 120px; /* adjust this value until the left edge of the tagline aligns visually with the 'F' in FOTOFERIA inside the logo image */
}

.ff-logo-wrap {
    position: relative;
    display: inline-block;
}

.ff-hero-left img,
.ff-hero-logo {
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0;
}

.ff-hero-tagline {
    margin-top: 8px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 13px;
    color: #ccc;
    /* shift to the right so it starts under the word FOTOFERIA */
    margin-left: var(--tagline-offset, 120px);
}

/* Menu w banerze - po prawej stronie */
.ff-hero-menu {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

.ff-hero-menu ul {
    display: flex !important;
    list-style: none !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.ff-hero-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ff-hero-menu a {
    color: #ddd !important;
    text-decoration: none !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
    position: relative !important;
    padding: 8px 0 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

.ff-hero-menu a:hover {
    color: #fff !important;
}

.ff-hero-menu a:hover::after,
.ff-hero-menu li.active a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: #ffbf00 !important;
}

/* Przycisk Panel w hero banner */
.ff-hero-actions {
    margin-left: 20px;
    display: flex;
    align-items: center;
}

.ff-panel-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ddd !important;
    text-decoration: none !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.11em !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.ff-panel-toggle:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.ff-panel-toggle i {
    font-size: 16px !important;
}

/* ========== MAIN NAVIGATION - FULL WIDTH ========== */
/* Hide old menu if it exists separately below banner */
#mainmenu:not(.ff-hero-menu nav):not(.ff-hero-menu #mainmenu) {
    display: none !important;
}

.ff-main-nav {
    width: 100%;
    background: transparent;
    border-bottom: none;
    box-sizing: border-box;
}

.ff-main-nav .ff-main {
    padding: 0;
}

.ff-main-nav ul {
    list-style: none;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ff-main-nav li {
    margin: 0;
    padding: 0;
}

.ff-main-nav a {
    display: inline-block;
    padding: 12px 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f5f5f5;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.ff-main-nav a:hover {
    color: #ffffff;
}

.ff-main-nav li.active a::after,
.ff-main-nav a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #ffbf00;
}

/* ========== MAIN CONTAINER - Already defined above ========== */

/* ========== SECTIONS ========== */
.ff-section {
    margin-top: 80px;
}

.ff-section:first-child {
    margin-top: 0;
}

/* Override dla istniejących sekcji */
.home-section.ff-section {
    margin-top: 80px;
}

.home-section.ff-section:first-child {
    margin-top: 0;
}

/* ========== SECTION TITLE ========== */
.section-title,
.ff-section-title,
h2.section-title,
h2.decor {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-left: 10px;
    border-left: 4px solid #c92828;
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-title a,
.ff-section-title a,
h2.section-title a,
h2.decor a {
    color: #f5f5f5;
    text-decoration: none;
}

.section-title a:hover,
.ff-section-title a:hover,
h2.section-title a:hover,
h2.decor a:hover {
    color: #ffbf00;
}

/* Override dla starych h2.decor */
h2.decor {
    border-left: 4px solid #c92828 !important;
    padding-left: 10px !important;
}

/* ========== SEARCH HERO ========== */
.ff-search-hero {
    margin-top: 0px !important;          /* Moved up by ~40px from previous 40px */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* Additional wrapper for search section to move it up */
.ff-section.ff-search-hero {
    margin-top: 0px !important;
}

.ff-search-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.ff-search-hero__title,
.ff-search-hero h1,
.ff-search-hero h2 {
    margin: 0 0 8px;
    font-size: 26px;
    color: #ffffff;
    font-weight: 600;
}

.ff-search-hero__subtitle,
.ff-search-hero p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #b3b3b3;
}

/* Remove the dark card background from search wrapper */
.search-card,
.ff-search-card,
.ff-search-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}

/* Keep styling only on the input bar + submit button */
.ff-search-form {
    margin-top: 8px;
}

/* ========== NEWS CARDS ========== */
.news-card {
    background: #1c1c1c;
    border-radius: 18px;
    border: 1px solid #262626;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.news-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #f5f5f5;
}

.news-card h3 a {
    color: #f5f5f5;
    text-decoration: none;
}

.news-card h3 a:hover {
    color: #ffbf00;
}

.news-card p {
    margin: 0;
    color: #b3b3b3;
    font-size: 14px;
    line-height: 1.5;
}

.news-card .news-date {
    color: #777777;
    font-size: 12px;
    margin-top: 8px;
}

/* ========== SMALL CARDS (Ranking, Users) ========== */
.ff-small-card {
    background: #1c1c1c;
    border-radius: 18px;
    border: 1px solid #262626;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.ff-small-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-color: #333;
}

.ff-small-card img {
    border-radius: 50%;
    max-width: 72px;
    max-height: 72px;
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: block;
}

.ff-small-card .ff-card-name {
    font-size: 14px;
    font-weight: 500;
    color: #f5f5f5;
    text-align: center;
    text-decoration: none;
}

.ff-small-card .ff-card-name.top-3 {
    color: #ffbf00;
}

.ff-small-card .ff-card-value {
    font-size: 12px;
    color: #b3b3b3;
    text-align: center;
}

/* ========== GALLERY ROWS ========== */
.ff-gallery-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #444 #1c1c1c;
}

.ff-gallery-row::-webkit-scrollbar {
    height: 8px;
}

.ff-gallery-row::-webkit-scrollbar-track {
    background: #1c1c1c;
    border-radius: 4px;
}

.ff-gallery-row::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.ff-gallery-row::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========== GALLERY CARD ========== */
.ff-gallery-card {
    background: #1c1c1c;
    border-radius: 12px;
    border: 1px solid #262626;
    overflow: hidden;
    flex-shrink: 0;
    width: 200px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ff-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border-color: #333;
}

.ff-gallery-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.ff-gallery-card .ff-card-info {
    padding: 12px;
}

.ff-gallery-card .ff-card-title {
    font-size: 13px;
    color: #f5f5f5;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-gallery-card .ff-card-author {
    font-size: 11px;
    color: #b3b3b3;
    margin: 0;
}

/* ========== OVERRIDE OLD RED MENU - REMOVE ALL RED STYLES ========== */
#mainmenu.menu,
#mainmenu.ff-main-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#mainmenu.menu ul,
#mainmenu.ff-main-nav ul {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
}

#mainmenu.menu li,
#mainmenu.ff-main-nav li,
#mainmenu.menu .menuitem,
#mainmenu.ff-main-nav .menuitem {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    list-style: none !important;
}

#mainmenu.menu a,
#mainmenu.ff-main-nav a,
#mainmenu.menu .menulink,
#mainmenu.ff-main-nav .menulink {
    background: transparent !important;
    color: #f5f5f5 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

#mainmenu.menu a:hover,
#mainmenu.ff-main-nav a:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* Active menu item */
#mainmenu.menu li.active,
#mainmenu.ff-main-nav li.active {
    background: transparent !important;
}

#mainmenu.menu li.active a,
#mainmenu.ff-main-nav li.active a {
    color: #f5f5f5 !important;
}

/* Remove old red menu styles completely */
.menu {
    background: transparent !important;
}

.menu ul {
    background: transparent !important;
}

.menu li {
    background: transparent !important;
}

.menu a {
    background: transparent !important;
}

/* ========== OVERRIDE OLD BANNER - HIDE LEGACY BANNER ========== */
#banner {
    display: none !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .ff-hero,
    .ff-hero-banner {
        padding: 16px 20px;
    }
    
    .ff-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .ff-hero-left {
        width: 100%;
    }
    
    .ff-hero-logo {
        max-height: 48px;
    }
    
    .ff-hero-tagline {
        font-size: 12px;
    }
    
    .ff-hero-menu {
        width: 100%;
        justify-content: flex-start;
    }
    
    .ff-hero-menu #mainmenu ul,
    .ff-hero-menu .ff-main-nav ul {
        gap: 12px;
        justify-content: flex-start;
    }
    
    .ff-hero-menu #mainmenu a,
    .ff-hero-menu .ff-main-nav a {
        font-size: 10px;
        padding: 8px 0;
    }
    
    .ff-main-nav .ff-main {
        padding: 0 20px;
    }
    
    .ff-main-nav ul {
        gap: 12px;
    }
    
    .ff-main-nav a {
        font-size: 10px;
        padding: 10px 0;
    }
    
    .ff-main {
        padding: 0 20px;
    }
    
    .ff-section {
        margin-top: 40px;
    }
    
    .ff-search-hero {
        padding: 24px 0;
    }
    
    .ff-search-hero .ff-main {
        padding: 0 20px;
    }
    
    .ff-gallery-row {
        gap: 12px;
    }
    
    .ff-gallery-card {
        width: 160px;
    }
    
    .ff-gallery-card img {
        height: 160px;
    }
}

/* ========== 500px-STYLE THUMBNAIL CARDS ========== */
.ff-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Ensure cards maintain consistent size - only image adapts */
.ff-thumb-grid .ff-gallery-card,
.ff-thumb-grid .picture {
    min-height: 0; /* Allow card to shrink if needed */
}

.ff-thumb-card {
    background: #161616;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out;
}

.ff-thumb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    background: #1a1a1a;
}

.ff-thumb-image {
    background: #0f0f0f;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Show the full original frame, no cropping, keep proportions: */
.ff-thumb-image img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;    /* NOT cover – we must not crop */
    border-radius: 12px;
}

/* META */
.ff-thumb-meta {
    padding: 10px 14px 12px;
}

.ff-thumb-title {
    font-size: 13px;
    color: #f5f5f5;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.ff-thumb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: #a8a8a8;
}

.ff-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ff-stat-rating {
    color: #ffbf00;
}

/* Override for cards inside .ff-thumb-grid */
.ff-thumb-grid .ff-gallery-card,
.ff-thumb-grid .picture {
    background: #161616 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    aspect-ratio: auto !important;
}

.ff-thumb-grid .ff-gallery-card:hover,
.ff-thumb-grid .picture:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
    background: #1a1a1a !important;
}

/* MINIATURKI – PEŁNY KADR, BEZ OBCINANIA */
.ff-thumb-grid .ff-card__img-wrapper,
.ff-thumb-grid .ff-gallery-card .ff-card__img-wrapper,
.ff-thumb-grid .picture .ff-card__img-wrapper {
    width: 100% !important;
    height: 230px !important; /* możesz ustawić 220/240 zależnie od layoutu */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111 !important;
    padding: 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important; /* wrapper może być hidden, to OK */
    box-sizing: border-box !important;
    position: relative !important;
    padding-top: 10px !important; /* Override padding-top: 66.67% from ff-gallery-modern.css */
}

/* OBRAZEK – POKAŻ CAŁY KADR */
.ff-thumb-grid .ff-card__img-wrapper img,
.ff-thumb-grid .ff-card__img,
.ff-thumb-grid .ff-gallery-card .ff-card__img-wrapper img,
.ff-thumb-grid .ff-gallery-card .ff-card__img,
.ff-thumb-grid .picture .ff-card__img-wrapper img,
.ff-thumb-grid .picture .ff-card__img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 12px !important;
    display: block !important;
    position: static !important; /* Override position: absolute from ff-gallery-modern.css */
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
}

/* USUŃ stare wymuszenia */
.ff-thumb-grid .ff-card__img,
.ff-thumb-grid .ff-card__img-wrapper img,
.ff-thumb-grid .ff-gallery-card .ff-card__img,
.ff-thumb-grid .picture .ff-card__img {
    aspect-ratio: unset !important;
}

/* Remove any old rules forcing a square or cropping - MOST SPECIFIC SELECTORS */
.ff-thumb-grid .ff-card img,
.ff-thumb-grid .picture img,
.ff-thumb-grid .ff-gallery-card img,
.ff-thumb-grid img {
    width: auto !important;
    height: 100% !important; /* Use 100% height to fill container */
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: unset !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: static !important; /* Override absolute positioning */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Override conflicting styles from home.css and other files */
.ff-thumb-grid .home-gallery .ff-card__img,
.ff-thumb-grid .ff-card .ff-card__img {
    width: auto !important;
    height: 100% !important; /* Fill container height */
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: unset !important;
}

/* Ensure card wrapper doesn't force aspect ratio */
.ff-thumb-grid .home-gallery .ff-card,
.ff-thumb-grid .ff-card,
.ff-thumb-grid .ff-gallery-card,
.ff-thumb-grid .picture {
    aspect-ratio: auto !important;
}

/* Additional overrides to ensure full frame display */
.ff-thumb-grid .ff-card__img-wrapper,
.ff-thumb-grid .ff-gallery-card .ff-card__img-wrapper,
.ff-thumb-grid .picture .ff-card__img-wrapper {
    padding-top: 10px !important; /* Use padding instead of padding-top percentage */
    padding-bottom: 10px !important;
}

.ff-thumb-grid .ff-card__overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    padding: 20px 14px 10px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.ff-thumb-grid .ff-gallery-card:hover .ff-card__overlay,
.ff-thumb-grid .picture:hover .ff-card__overlay {
    opacity: 1 !important;
}

.ff-thumb-grid .ff-card__stats {
    padding: 10px 14px 12px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.ff-thumb-grid .ff-card__stats .ff-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: #a8a8a8 !important;
}

.ff-thumb-grid .ff-card__stats .ff-stat-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ff-thumb-grid .ff-card__stats .ff-thumb-rating,
.ff-thumb-grid .ff-card__stats .ff-stat-item.ff-thumb-rating {
    color: #ffbf00 !important;
}

.ff-thumb-grid .ff-card__title {
    font-size: 13px !important;
    color: #f5f5f5 !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

/* Hide badge in thumb grid (or position it better) */
.ff-thumb-grid .ff-card__badge {
    top: 20px !important;
    right: 20px !important;
    z-index: 20 !important;
}

/* Section headings spacing */
.ff-section-title {
    margin-bottom: 10px;
}

/* ========== SCROLLABLE NEWS SECTION ========== */
/* Override dla sekcji newsów - nie zmieniaj ogólnego .ff-section */
#ff-news.ff-section,
#ff-news.home-section,
.home-section.home-news.ff-section {
    margin-top: 60px;
}

/* Header z tytułem i linkiem "Więcej newsów" */
#ff-news .ff-section-header,
.home-news .ff-section-header,
.ff-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

#ff-news .ff-section-header .section-title,
.home-news .ff-section-header .section-title,
.ff-section-header .section-title {
    margin: 0 !important;
    flex: 1 !important;
}

#ff-news .ff-news-more,
.home-news .ff-news-more,
.ff-news-more {
    font-size: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: .8 !important;
    transition: opacity 0.2s ease !important;
    white-space: nowrap !important;
    margin-left: 16px !important;
}

#ff-news .ff-news-more:hover,
.home-news .ff-news-more:hover,
.ff-news-more:hover {
    opacity: 1 !important;
}

/* Scrollowalny kontener dla newsów - pokazuje 2 newsy, reszta scrolluje */
#ff-news .ff-news-scroll,
.home-news .ff-news-scroll,
.ff-news-scroll {
    /* Wysokość: 2 newsy (~100px każdy) + gap (12px) + padding = ~220px */
    max-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Zapewnij, że .ff-news wewnątrz scrolla ma odpowiednie style */
#ff-news .ff-news-scroll .ff-news,
.home-news .ff-news-scroll .ff-news,
.ff-news-scroll .ff-news {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Upewnij się, że newsy mają stałą wysokość dla lepszego scrollowania */
#ff-news .ff-news-scroll .ff-news__item,
.home-news .ff-news-scroll .ff-news__item,
.ff-news-scroll .ff-news__item {
    flex-shrink: 0 !important;
    min-height: 100px !important;
}

/* Nicer scrollbar */
.ff-news-scroll::-webkit-scrollbar {
    width: 6px;
}

.ff-news-scroll::-webkit-scrollbar-track {
    background: #181818;
    border-radius: 3px;
}

.ff-news-scroll::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

.ff-news-scroll::-webkit-scrollbar-thumb:hover {
    background: #505050;
}

/* ====== FOTOFERIA – premium boczny panel czatu ====== */

.ff-sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: radial-gradient(circle at top left, #181818 0%, #0b0b0b 55%, #050505 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    color: #f5f5f5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    transform: translateX(0);
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    opacity: 1;
}

/* ukryty stan panelu – wystarczy usunąć klasę --open w HTML */
.ff-sidepanel:not(.ff-sidepanel--open) {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* górny pasek z zakładkami */
.ff-sidepanel__header {
    padding: 12px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, rgba(255, 215, 128, 0.06), rgba(0, 0, 0, 0.2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.ff-sidepanel__tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ff-sidepanel__tab {
    position: relative;
    border: none;
    outline: none;
    background: transparent;
    color: #b9b9b9;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ff-sidepanel__tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f5f5f5;
}

.ff-sidepanel__tab--active {
    background: radial-gradient(circle at top, #f2c75c 0%, #cfa032 60%, #75541a 100%);
    color: #090909;
    font-weight: 600;
}

/* licznik Online */
.ff-sidepanel__tab--counter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #fada7a;
    font-size: 11px;
}

/* X w prawym górnym rogu panelu */
.ff-sidepanel__close {
    border: none;
    background: transparent;
    color: #aaaaaa;
    font-size: 16px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.ff-sidepanel__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* treść panelu */
.ff-sidepanel__body {
    flex: 1;
    padding: 10px 14px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 218, 122, 0.4) rgba(0, 0, 0, 0.6);
    position: relative;
    min-height: 0; /* Zapobiega problemom z flexbox */
}

/* Ukryj footer w panelu */
.ff-sidepanel__body footer,
.ff-sidepanel__body .modern-footer,
.ff-sidepanel__body #ft,
.ff-sidepanel__body .footer {
    display: none !important;
}

.ff-sidepanel__body::-webkit-scrollbar {
    width: 6px;
}

.ff-sidepanel__body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.7);
}

.ff-sidepanel__body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #f2c75c, #8c611f);
    border-radius: 999px;
}

/* Zawartość zakładek */
.ff-sidepanel__content {
    display: none;
}

.ff-sidepanel__content--active {
    display: block;
}

/* placeholder / info */
.ff-sidepanel__placeholder {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: #d0d0d0;
}

/* pływający przycisk otwierający panel */
.ff-sidepanel-fab {
    position: fixed;
    right: 18px;
    bottom: 90px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    background: radial-gradient(circle at 30% 0%, #ffe9a3 0%, #f2c75c 45%, #c49129 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    color: #201308;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ff-sidepanel-fab:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
}

.ff-sidepanel-fab:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.8);
}

/* Jeśli panel jest otwarty, schowaj FAB-a */
.ff-sidepanel--open ~ .ff-sidepanel-fab,
body.drawer-open ~ .ff-sidepanel-fab {
    display: none;
}

/* Ukryj footer w panelu */
.ff-sidepanel footer,
.ff-sidepanel .modern-footer,
.ff-sidepanel #ft,
.ff-sidepanel .footer {
    display: none !important;
}

/* Responsywność – na małych ekranach panel na 100% szerokości */
@media (max-width: 900px) {
    .ff-sidepanel {
        width: 100%;
    }
}

/* ====== FOTOFERIA – toast aktywności (premium) ====== */

.ff-activity-toast {
    position: fixed;
    right: 18px;
    bottom: 160px; /* Wyżej, żeby nie kolidować z FAB (który jest na bottom: 90px) */
    width: 280px;
    background: rgba(10, 10, 10, 0.96);
    border-radius: 12px;
    border: 1px solid rgba(250, 218, 122, 0.35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
    color: #f5f5f5;
    font-size: 13px;
    overflow: hidden;
    z-index: 10000;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ff-activity-toast--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ff-activity-toast__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(to right, rgba(250, 218, 122, 0.18), rgba(0, 0, 0, 0.4));
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ff-activity-toast__close {
    border: none;
    background: transparent;
    color: #ddd;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.ff-activity-toast__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.ff-activity-toast__body {
    padding: 8px 10px 10px;
}

.ff-activity-toast__body a {
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.ff-activity-toast__body a:hover {
    opacity: 0.8;
}

#ff-activity-user {
    color: #fada7a;
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

#ff-activity-action {
    display: block;
    color: #ddd;
    font-size: 12px;
    margin-bottom: 3px;
}

#ff-activity-photo {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #cccccc;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Firefox scrollbar */
.ff-news-scroll {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #181818;
}

/* Responsive adjustments for thumb grid */
@media (max-width: 768px) {
    .ff-thumb-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }
    
    .ff-thumb-image {
        min-height: 150px;
    }
    
    .ff-thumb-image img {
        max-height: 200px;
    }
    
    /* Mobile: ensure full frame on smaller screens too */
    .ff-thumb-grid .ff-card__img-wrapper,
    .ff-thumb-grid .ff-card {
        min-height: 150px !important;
    }
    
    .ff-thumb-grid .ff-card__img-wrapper img,
    .ff-thumb-grid .ff-card__img {
        max-height: 200px !important;
    }
}