/* Lewy box nadal wklęsły – BEZ zmian */
#logo-box {
    background: rgba(255,255,255,0.45) !important;
    padding: 44px !important;
    border-radius: 24px !important;
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 6px 12px rgba(0,0,0,0.20),
        inset 0 -4px 10px rgba(255,255,255,0.55),
        0 14px 28px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* JEDYNA RZECZ: POSZERZAM PRAWA KOLUMNĘ */
#content #right {
    min-width: 650px !important; /* było ~500 — TERAZ SZERZEJ */
    width: 700px !important;      /* ładna szerokość dla tekstu */
    padding: 40px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 1px rgba(0,0,0,0.20);
}

/* Przyciski rozciągnięte 100% dostępnej SZEROKOŚCI */
#content .btn-success {
    width: 100% !important;
    max-width: 700px !important; /* dopasowane do szerokiej kolumny */
    display: block !important;
    padding: 18px !important;
    font-size: 1.15rem !important;
    border-radius: 14px !important;
    background-color: #22C85A !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important;
}

/* 🧩 Odstęp między lewą i prawą stroną – większy */
#content > div {
    gap: 180px !important;
}


/* 🔹Cieniowanie całej zawartości w logo-box (tekst + logo) */
#logo-box {
    background: rgba(255, 255, 255, 0.50) !important;
    padding: 30px !important;
    border-radius: 18px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* 🔹Leva sekcja (logo + tytuł) z cieniowaniem */
#left {
    background: rgba(255,255,255,0.50) !important;
    padding: 35px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#left h1 {
    margin-top: 18px !important;
}
#left img {
    max-width: 175px !important;
}


/* 🔹Nowy układ strony głównej – dwa eleganckie boxy w jednej linii */

/* Kontener główny */
#content > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 60px;
}

/* Lewy box (logo + tytuł) */
#left {
    background: rgba(255,255,255,0.55) !important;
    padding: 40px 30px !important;
    border-radius: 22px !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 260px;
}

/* Prawy box z listą */
#right {
    background: rgba(255,255,255,0.35) !important;
    padding: 45px 35px !important;
    border-radius: 22px !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 30px rgba(0,0,0,0.28);
    min-width: 360px;
    width: 420px; /* 🔹ANKIETY SZERSZE */
}

/* Przyciski ankiet */
#right .btn-success {
    width: 100% !important;
    font-size: 15px;
    font-weight: 600;
}

/* Tekst stopki jaśniejszy i zawsze na dole */
#surveyListFooter {
    color: #e5e5e5 !important;
    font-size: 12px;
}


/* Tylko lewa strona z mocnym cieniem */
#left {
    background: rgba(255,255,255,0.55) !important;
    padding: 38px !important;
    border-radius: 22px !important;
    backdrop-filter: blur(13px);
    box-shadow: 0 12px 45px rgba(0,0,0,0.36);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Prawa delikatna transparentność bez cienia */
#right {
    background: rgba(255,255,255,0.22) !important;
    padding: 40px 30px !important;
    border-radius: 18px !important;
    width: 430px;
}

/* Przyciski trochę szersze */
#right .btn-success {
    width: 100% !important;
    font-size: 15px;
    margin-bottom: 12px;
}


/* Prawa sekcja: ZERO cienia – elegancka, czytelna lista */
#right {
    background: transparent !important;
    padding: 0 !important;
    width: 480px;
}

/* Nagłówek „Lista dostępnych ankiet” */
#right h2 {
    font-size: 22px;
    margin-bottom: 18px;
    font-weight: 700;
    color: #1e1e1e;
}

/* Kontener listy jako elegancka tabela */
#right > div:first-of-type {
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Każda ankieta jak wirtualny wiersz tabeli */
#right .btn-success {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100% !important;
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px !important;
    border: none;
}

/* Opis kontaktu – niżej i delikatniej */
#right > div:last-of-type {
    margin-top: 14px !important;
    font-size: 12px;
    color: #3a3a3a;
    text-align: center;
}


/* 🔹Prawa sekcja: przejrzysta lista bez cienia i bez ikon */
#right {
    background: transparent !important;
    padding: 0 !important;
    width: 460px;
}

/* Nagłówek */
#right h2 {
    font-size: 21px;
    margin-bottom: 14px;
    font-weight: 700;
    color: #1f1f1f;
    text-align: left;
}

/* Kontener listy – lekka półprzezroczystość */
#right > div:first-of-type {
    background: rgba(255,255,255,0.40) !important;
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Przyciski – nie za wysokie, pasują 7–9 pozycji */
#right .btn-success {
    width: 100% !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px !important;
    border: none;
    padding: 8px 12px !important;
    text-align: left;
    white-space: normal;
    line-height: 1.2em;
}

/* Kontakt mniejszy i niżej */
#right > div:last-of-type {
    margin-top: 10px !important;
    font-size: 12px;
    color: #3a3a3a;
    text-align: center;
}


/* 🔹Prawa sekcja — brak ikon, pionowe wyśrodkowanie tekstu */
#right .btn-success {
    width: 100% !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px !important;
    border: none;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important; /* pion */
    justify-content: center !important; /* poziom */
    text-align: center;
    line-height: 1.25em;
    white-space: normal;
}


/* 🔹Apple-style: delikatne szarości zamiast mocnej czerni */
#right h2 {
    color: #2c2c2e !important; /* ciemny grafit */
}

#right > div:first-of-type {
    background: rgba(255,255,255,0.38) !important; /* delikatniejsze szkło */
}

/* Przyciski – pastelowy zielony + grafitowy tekst */
#right .btn-success {
    background-color: #34c759 !important; /* apple green */
    color: #222222 !important; /* stonowany */
    transition: background-color 0.25s ease-in-out;
}

/* Hover: lekko jaśniejszy */
#right .btn-success:hover {
    background-color: #4cd964 !important;
    color: #1c1c1e !important;
}

/* Tekst kontaktu – jaśniejszy */
#right > div:last-of-type {
    color: #4a4a4c !important;
}