* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: sans-serif; 
    background-color: #b3c7e8;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Układ pionowy: pasek -> treść */
    position: relative;
    overflow-x: hidden;
	-webkit-user-select: none;   
    -ms-user-select: none;       
    user-select: none;     
}

/* Wspólne cechy */
.content-wrapper::before, .content-wrapper::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50px;
    filter: blur(5px);
    z-index: -1;
}

/* FIOLETOWY - Statyczny (Twoje oryginalne miejsce) */
.content-wrapper::before { 
    bottom: 10vh; 
    right: 10vw; 
    background: rgba(226, 209, 249, 0.6); 
}

/* BIAŁY - Animowany (Inne miejsce startowe) */
.content-wrapper::after { 
    content: '';
    position: absolute;
    /* Używamy zmiennych CSS z wartościami domyślnymi */
    top: var(--start-top, 10vh);
    left: var(--start-left, 10vw);
    width: 250px;
    height: 250px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(5px);
    z-index: -1;
    animation: floatWhite 30s infinite linear; 
}

/* Animacja tylko dla białego */
@keyframes floatWhite { 
    0% { transform: translate(0,0) rotate(0deg); } 
    50% { transform: translate(20vw, 20vh) rotate(180deg); } 
    100% { transform: translate(0,0) rotate(360deg); } 
}
        /* 3. PASEK NAWIGACYJNY */
.navbar {
    width: 100%;
	height: 63.6px; 
    display: flex;
    background-color: #b3c7e8; 
    justify-content: flex-start;       
    align-items: center;
    padding: 15px 10%;             
    box-sizing: border-box;
	box-shadow: 0 2px 10px rgba(24, 75, 154, 0.15); /* Lżejszy cień */


}

        /* 4. GŁÓWNY KONTENER TREŚCI (Wyśrodkowanie) */
        .content-wrapper {
			position: relative;
    		overflow: hidden; /* To sprawi, że kwadraty nie wyjdą poza obszar kontenera */
    /* ... reszta Twoich stylów ... */
            flex-grow: 1; /* Wypełnia resztę miejsca */
            display: flex;
            justify-content: center;
            align-items: center; /* Centruje panel w pionie i poziomie */
            padding: 20px;
        }


.item {
    width: 597px;
    height: 597px;
    max-width: 70vw;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background-color: transparent;
    margin-bottom: 15px;
    border-radius: 12px;
    position: relative; /* KLUCZOWE: aby .cta pozycjonował się względem .item */
    box-shadow: 0 2px 8px rgba(24, 75, 154, 0.1);
}
	    
		
.cta {
	width: 100%;
    position: absolute;
	padding: 10px 5px;           
    border: none;
    border-radius: 50px; 

    bottom: 20px;
    background: #e2d1f9;
    color: black;
	font-weight: bold;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent; 
    outline: none; 
}
		
.cta:hover { 
    filter: brightness(0.95);
}

.search-main-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: black;
}

.quote-box {
	width: 100%;
    position: relative;
    padding: 20px 40px;
    margin: 25px 0;
    border-left: 4px solid #ffffff; /* Pionowa linia */
    background: rgba(253, 216, 53, 0.6);
    border-radius: 4px;
    font-style: italic;
    color: black;
    text-align: left;
}

/* Opcjonalnie: mały kwadracik jako dekoracja */
.quote-box::before {
    content: "„";
    position: absolute;
    top: -15px;
    left: 10px;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.5);
}


.item {
	width: 597px;
	height: 597px;
    max-width: 90vw;
    text-align: center;
    color: black;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;           
    padding: 15px;       
    background-color: transparent; 
    margin-bottom: 15px;
    border-radius: 12px;
    transition: background-color 0.2s; /* Szybsze przejście na mobile */
    box-shadow: 0 2px 8px rgba(24, 75, 154, 0.1); 
}
.item-box {
    position: relative;
    padding: 20px 40px;
    margin: 25px 0;
    border-radius: 4px;
    color: black;
    text-align: left;
}