/* 1. Zmienne i Reset */
:root {
    --primary-blue: #1b6ec2;
    --dark-blue: #0d47a1;
    --white: #ffffff;
    --bg-light: #f6f8fb;
    --border-radius-lg: 24px; 
    --border-radius-md: 16px; 
    --transition: all 0.25s ease-in-out;
    --shadow-sm: 0 2px 4px rgba(0,0,0,.05);
    --shadow-md: 0 10px 40px rgba(0,0,0,0.1);
}

/* 2. Nawigacja */
.navbar {
    width: 100%;
    padding: 0.5rem 0;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    margin: 0;
}

/* 3. Układ strony (Grid/Container) */
.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 4. Sekcja Hero */
.hero-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
    color: var(--white);
    padding: 60px 20px 100px 20px; 
    text-align: center;
    position: relative;
    border-radius: var(--border-radius-lg); 
    max-width: 1100px; 
    margin: 20px auto 0 auto; 
    box-shadow: var(--shadow-md);
}

/* 5. Wyszukiwarka (Search Container) */
.search-container {
    max-width: 900px;
    margin: -60px auto 0 auto; /* Ujemny margines wycentrowany */
    position: relative;
    z-index: 10;
}

.search-container .card {
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
}

/* 6. Sekcja Kategorii */
.categories-section {
    background: var(--bg-light);
    padding: 60px 0;
    background: #eef2f7;

}

.category-card {
    background: #ffffff;

    border-radius: 16px;
    padding: 32px 28px;

    /* Delikatna ramka + pseudo-outline */
    border: 1px solid #dbe3ef;

    /* Mocny, czytelny cień */
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.12),
        0 4px 10px rgba(15, 23, 42, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    text-align: center;
    cursor: pointer;
}

/* Ikona wewnątrz kafelka */
.category-icon {
    background: #edf2f7; /* Ciemniejszy szary dla ikony w spoczynku */
    width: 64px;
    height: 64px;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    transition: var(--transition);
}

.category-card:hover .category-icon {
    background: var(--primary-blue);
    color: white;
    transform: scale(1.1) rotate(3deg); /* Lekki obrót dla dynamiki */
}

.form-range::-webkit-slider-thumb {
    background: var(--primary-blue);
}

.badge.bg-primary {
    background-color: var(--primary-blue) !important;
    padding: 8px 12px;
    border-radius: 8px;
}

/* 8. Stopka */
.footer {
    background: #f8f9fa;
    border-top: 1px solid #eee;
    color: #6c757d;
    padding: 40px 0;
}