/* Import czcionek z szablonu "Property" */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    /* Zmiana: Ciemna Czerwień/Cegła (symbol historyczny, herb, architektura Bydgoszczy) */
    --primary: #9B2226; 
    /* Opcjonalny Akcent Wodny (dla przyszłego użycia, np. tła) */
    --secondary-accent: #174087; 
    --light: #F0F5FF;
    --dark: #0F172B;
}

body {
    font-family: 'Heebo', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Stylizacja sekcji "Hero" */
.hero-section {
    background: linear-gradient(rgba(15, 23, 43, .4), rgba(15, 23, 43, .4)), url(hero-couple.png) center center no-repeat;
    background-size: cover;
    padding: 8rem 0;
    margin-bottom: 2rem;
}

/* Stylizacja kart ogłoszeń */
.property-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.property-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.property-item .card-img-top {
    height: 250px;
    object-fit: cover;
}

/* Zmiana domyślnego niebieskiego koloru Bootstrap na nasz nowy czerwony */
.text-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}

.navbar-brand {
    font-size: 1.5rem;
}

/* --- STYLIZACJA PAGINACJI --- */

.pagination .page-item .page-link {
    border-radius: 6px; /* Zaokrąglamy rogi, aby pasowały do kart */
    margin: 0 4px; /* Dodajemy mały odstęp między przyciskami */
    border: 1px solid #dee2e6;
    color: var(--primary); /* Używamy naszego nowego koloru dla cyfr */
    transition: all 0.2s ease-in-out;
}

/* Styl dla aktywnej (wybranej) strony */
.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 8px rgba(155, 34, 38, 0.2); /* Subtelny cień dla aktywnego elementu (dostosowany do nowej czerwieni) */
}

/* Styl przy najechaniu myszką na nieaktywny przycisk */
.pagination .page-item:not(.active) .page-link:hover {
    background-color: #f8f9fa; /* Lekkie podświetlenie tła */
}

/* Styl dla nieaktywnych przycisków (np. "Poprzednia" na pierwszej stronie) */
.pagination .page-item.disabled .page-link {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* Usunięcie domyślnego cienia przy fokusie i użycie naszego */
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(155, 34, 38, 0.25); /* Dostosowany cień do nowej czerwieni */
}


/* --- STYLIZACJA FORMULARZA KONTAKTOWEGO --- */

/* Lepszy wygląd przycisku, używamy naszego nowego czerwonego koloru */
.btn-primary-custom {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #791b1f; /* Ciemniejszy odcień czerwonego */
    border-color: #791b1f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Dostosowanie pływających etykiet z ikonami */
.form-floating > .form-control {
    padding-left: 2.5rem;
}

.form-floating > label {
    padding-left: 2.5rem;
}

.form-floating > label > i {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.form-floating > .form-control:focus ~ label > i,
.form-floating > .form-control:not(:placeholder-shown) ~ label > i {
    opacity: 1;
}

/* --- STYLIZACJA KARUZELI W KARCIE OGŁOSZENIA --- */

/* Ukrywamy strzałki domyślnie */
.property-item .carousel-control-prev,
.property-item .carousel-control-next {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Pokazujemy strzałki, gdy najedziemy na całą kartę */
.property-item:hover .carousel-control-prev,
.property-item:hover .carousel-control-next {
    opacity: 0.7;
}

/* Zmniejszenie ikon strzałek */
.property-item .carousel-control-prev-icon,
.property-item .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Tło dla strzałek, aby były lepiej widoczne */
.property-item .carousel-control-prev,
.property-item .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.2);
    width: 15%; /* Zmniejszenie szerokości obszaru klikalnego */
}

/* --- STYLE DLA NOWEGO UKŁADU STRONY OFERTY --- */

.offer-gallery-item {
    height: 60vh; /* Wysokość galerii na 60% wysokości ekranu */
    max-height: 550px; /* Maksymalna wysokość, żeby nie była za duża */
}

.offer-gallery-item img {
    height: 100%;
    object-fit: cover; /* Zdjęcie będzie idealnie wypełniać kadr */
    object-position: center;
}

/* --- POPRAWKA DLA GALERII NA STRONIE OFERTY --- */

/* Usunięcie sztywnej wysokości, aby zdjęcia się nie ucinały */
.offer-gallery-item {
    height: auto;
    max-height: none;
}
.offer-gallery-item img {
    height: auto;
    object-fit: contain; /* Zdjęcie będzie skalowane, aby zmieścić się w całości */
}

/* --- STYLE DLA PASKA Z MINIATURKAMI --- */
.thumbnail-strip {
    display: flex;
    flex-wrap: nowrap; /* Miniaturki będą w jednej linii */
    overflow-x: auto; /* Pasek będzie przewijalny w poziomie, jeśli miniaturki się nie zmieszczą */
    gap: 10px; /* Odstęp między miniaturkami */
    padding-bottom: 10px; /* Mały padding na dole dla paska przewijania */
}

.thumbnail-img {
    height: 80px; /* Stała wysokość miniaturek */
    width: auto;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
    border: 2px solid transparent;
}

.thumbnail-img:hover {
    opacity: 1;
}

.thumbnail-img.active {
    opacity: 1;
    border-color: var(--primary); /* Nowa czerwona ramka dla aktywnej miniaturki */
}

/* --- STYLE DLA NOWEJ WYSZUKIWARKI W HERO --- */

/* Lekko zmniejszamy padding, bo formularz zajmuje miejsce */
.hero-section {
    padding: 3rem 0;
}

.search-form {
    background: rgba(255, 255, 255, 0.98); /* Lekko przezroczyste tło */
    backdrop-filter: blur(5px); /* Efekt "oszronionego szkła" */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.search-form .form-label {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.hero-section h1 {
    /* Dodajemy mocniejszy, rozmyty cień, aby tekst był czytelny na jasnym i ciemnym tle */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.col-lg-4 {
    position: relative;
}

/* --- OSTATECZNA POPRAWKA DLA "PRZYKLEJONEJ" KOLUMNY (SAFARI FIX) --- */
.col-lg-8 {
    min-height: 1px; /* To "zmusza" Safari do prawidłowego obliczania wysokości kolumny */
}

/* --- NOWE STYLE DLA OPISU OFERTY --- */

.offer-description h4 {
    font-size: 1.3rem;
    color: var(--dark);
}

.offer-description p,
.offer-description li {
    font-size: 1.1rem;
    color: #495057; /* Subtelniejszy kolor tekstu */
    line-height: 1.7;
}

.offer-description ul {
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.offer-description-list li {
    padding-left: 0;
    margin-bottom: 0.5rem;
}

.offer-description-list li i {
    vertical-align: middle;
    font-size: 0.9em;
    position: relative;
    top: -1px;
}


/* --- STYLE DLA BOXU Z NAJNOWSZYMI OFERTAMI --- */

.latest-offer-item {
    transition: background-color 0.2s ease-in-out;
}

/* Nowy kontener dla zdjęcia */
.latest-offer-img-container {
    width: 80px;
    height: 60px;
    flex-shrink: 0; /* Zapobiega kurczeniu się kontenera */
    border-radius: 6px;
    overflow: hidden; /* Ukrywa części obrazka wystające poza ramkę */
}

/* Obrazek wewnątrz kontenera */
.latest-offer-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wypełnia kontener, przycinając jeśli trzeba */
}

/* Tytuł oferty w bocznym boxie */
.latest-offer-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detale (pokoje, metraż) w bocznym boxie */
.latest-offer-details {
    font-size: 0.85rem;
    display: block; /* Upewnia się, że element jest w nowej linii */
}


/* --- NOWE, ULEPSZONE STYLE DLA BOXU Z NAJNOWSZYMI OFERTAMI --- */

/* Cały box */
.latest-offer-item {
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #f0f0f0; /* Subtelny separator między ofertami */
}

/* Usuwamy ostatni separator */
.list-group-flush .list-group-item:last-child {
    border-bottom: 0;
}

/* Efekt po najechaniu myszką */
.latest-offer-item:hover {
    background-color: #f8f9fa; /* Lekkie podświetlenie */
}

/* Kontener na zdjęcie */
.latest-offer-img-container {
    width: 90px;  /* Lekko większe zdjęcie */
    height: 70px;
    flex-shrink: 0;
    border-radius: 8px; /* Bardziej zaokrąglone rogi */
    overflow: hidden;
}

.latest-offer-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tytuł (dzielnica) */
.latest-offer-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem; /* Większy i bardziej czytelny */
}

/* Detale (pokoje, metraż) */
.latest-offer-details {
    font-size: 0.8rem;
    display: flex; /* Ustawiamy w jednej linii */
    align-items: center;
}

.latest-offer-details i {
    position: relative;
    top: -1px; /* Lepsze wyrównanie ikon */
}

/* Przycisk na dole */
.card-footer .btn-outline-primary {
    border-width: 2px; /* Grubsza ramka dla lepszej widoczności */
    font-weight: 600;
}

/* --- NOWE STYLE DLA NAGŁÓWKA ARTYKUŁU --- */

.article-category-badge {
    display: inline-block;
    background-color: var(--primary);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px; /* Okrągłe rogi */
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.article-category-badge:hover {
    background-color: #791b1f; /* Ciemniejszy odcień czerwieni */
    color: #fff;
}

/* --- NOWE STYLE DLA NAGŁÓWKA ARTYKUŁU (WERSJA WYRÓWNANA DO LEWEJ) --- */

/* Modyfikujemy istniejący styl, aby badge był mniejszy */
.article-category-badge {
    padding: 6px 18px; /* Mniejszy padding */
    font-size: 0.8rem; /* Mniejsza czcionka */
}

/* Nowy styl dla głównego tytułu H1 na stronie artykułu */
article header h1 {
    font-size: 2.2rem; /* Znacznie mniejszy rozmiar niż display-5 */
    font-weight: 700; /* Mocniejsze pogrubienie */
    line-height: 1.3;
}


/* --- STYLE DLA NOWEJ, ROZBUDOWANEJ STOPKI --- */

/* --- NOWE, POPRAWIONE STYLE DLA STOPKI --- */

.site-footer {
    border-top: 1px solid #dee2e6;
}

.footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--dark);
    text-transform: uppercase; /* Dodajemy wielkie litery dla nagłówków */
    letter-spacing: 0.5px;
}

.footer-links li {
    margin-bottom: 0.6rem;
}

.footer-links a {
    color: #495057;
    text-decoration: none; /* Usuwamy domyślne podkreślenie */
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(3px); /* Subtelny efekt przesunięcia */
}

.footer-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #495057; /* Ciemnoszary kolor linków */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-links a:hover {
    color: var(--primary); /* Czerwony kolor po najechaniu */
    text-decoration: underline;
}


/* --- STYLE DLA 5-KOLUMNOWEJ STOPKI --- */

/* Tworzymy niestandardową klasę Bootstrapa dla 5 kolumn */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Zmniejszamy czcionkę linków, aby uniknąć zawijania */
.footer-links a {
    font-size: 0.85rem;
}

/* --- NOWE STYLE DLA BOXU Z CENĄ --- */

.price-box {
    background-color: #f8f9fa; /* Jasnoszare tło */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.price-box small {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-box .price-value {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--primary); /* Używamy naszego koloru akcentu */
    line-height: 1.2;
}


/* --- STYLE DLA FILTRA KATEGORII W PORADNIKACH --- */
.category-filter {
    gap: 10px; /* Odstęp między przyciskami */
}

.category-filter .btn-outline-primary {
    border-radius: 50px; /* Zaokrąglone przyciski "pigułki" */
    font-weight: 600;
    border-width: 2px;
    padding: 8px 20px;
    transition: all 0.2s ease-in-out;
}

/* Styl dla aktywnego przycisku filtra */
.category-filter .btn-outline-primary.active,
.category-filter .btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}