@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html,body {
    position: relative;
    margin: 0;
    padding: 0;
    /*padding-bottom: 70px;*/
}


body {
    padding-top: 70px; /* Dostosuj do wysokości navbaru */
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
}

.clickable-cell:hover {
    background-color: lightblue; /* Change background color on hover */
    cursor: pointer; /* Change cursor to pointer on hover */
}



.smooth-transition {
    transition: top 0.3s ease-in-out; /* Adjust timing and easing as needed */
}


.arrow-left, .arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

    .arrow-left:hover, .arrow-right:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }
/* Kontener galerii */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Pozycjonowanie każdego zdjęcia */
.gallery-item {
    flex: 1 1 calc(25% - 1rem); /* 4 kolumny */
    box-sizing: border-box;
    position: relative;
}

    /* Styl dla zdjęć */
    .gallery-item img {
        width: 100%;
        height: 200px; /* Stała wysokość zdjęć */
        object-fit: cover; /* Utrzymanie proporcji, przycięcie jeśli za duże */
        object-position: center; /* Wyrównanie zdjęcia do środka */
    }

/* Pozycjonowanie przycisku usuwania */
.delete-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

    .delete-button:hover {
        opacity: 1;
    }

/* Responsywność - 3 kolumny przy szerokości < 1200px */
@media (max-width: 1200px) {
    .gallery-item {
        flex: 1 1 calc(33.33% - 1rem); /* 3 kolumny */
    }
}

/* Responsywność - 2 kolumny przy szerokości < 992px */
@media (max-width: 992px) {
    .gallery-item {
        flex: 1 1 calc(50% - 1rem); /* 2 kolumny */
    }
}

/* Responsywność - 1 kolumna przy szerokości < 768px */
@media (max-width: 768px) {
    .gallery-item {
        flex: 1 1 100%; /* 1 kolumna */
    }
}




.container {
    display: block;
    justify-content: center;
    align-items: center;
    /*height: 100%;*/
    transition: all 0.3s ease;
}

    .container.scrolled {
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 60px; /* Adjust based on your navbar height */
    }

.results {
    display: none;
    margin-top: 1rem;
}

    .results.active {
        display: block;
    }

/* Domyślny rozmiar placeholdera */
::placeholder {
    font-size: 1rem;
}

/* Zmniejszony rozmiar placeholdera na mniejszych ekranach */
@media (max-width: 576px) {
    ::placeholder {
        font-size: 0.8rem;
    }
}

.rating-container {
    display: flex; /* Upewnia się, że gwiazdki są w jednej linii */
    gap: 5px; /* Opcjonalne: dodaje odstęp między gwiazdkami */
}

.star {
    font-size: 2rem;
    cursor: pointer;
    color: gold; /* Domyślny kolor */
    display: inline-block;
}

    .star::before {
        content: '\2606'; /* Pusta gwiazdka */
        color: gold;
    }

    .star.filled::before {
        content: '\2605'; /* Wypełniona gwiazdka */
    }

    .star:hover,
    .star.hover {
        color: gold;
    }

#shoppingCart {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 10px; /* Odległość od górnej krawędzi ekranu */
    z-index: 1000; /* Zapewnia, że koszyk będzie nad innymi elementami */
}

.pac-container {
    z-index: 1056 !important;
}

.custom-search-bar {
    display: flex;
    max-width: 600px; /* Szerokość paska wyszukiwania */
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* Animacje dla paska wyszukiwania */
    transform: translateY(0); /* Pozycja początkowa */
    opacity: 1; /* Pełna widoczność */
}

    .custom-search-bar .input-group {
        flex: 1;
        margin-right: 10px;
    }

    .custom-search-bar .form-control {
        height: calc(2.5rem + 2px); /* Wysokość inputu zgodna z przyciskiem */
    }

    .custom-search-bar .input-group-text {
        font-size: 1.5rem; /* Rozmiar ikony */
        background-color: white; /* Tło ikony */
        border: none; /* Brak obramowania ikony */
    }

    .custom-search-bar #searchButton {
        height: calc(2.5rem + 2px); /* Wysokość przycisku */
        padding: 0.5rem 1rem; /* Wewnętrzne marginesy przycisku */
    }


.search-bar-container {
    border: 1px solid #ced4da; /* Grubość i kolor ramki */
    border-radius: 5px; /* Zaokrąglenie rogów */
    padding: 10px; /* Wewnętrzny padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Cień */
}

.search-container {
    height: 500px;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    transition: height .55s cubic-bezier(.2,.7,.15,1), 
    padding-top .35s ease; 
    border-radius: 20px;
}

    .search-container.shrunk {
        height: 250px;
        padding-top: 10px;
    }

.search-container figure p {
    font-weight: bold; /* Opcjonalnie pogrubienie */
    color: black; /* Opcjonalnie zmiana koloru */
}

    .search-container figure {
        margin-bottom: 20px;
        transition: transform .35s ease, opacity .35s ease, margin-bottom .35s ease; /* BYŁO: 1.8s */
        will-change: transform, opacity; /* podpowiedź dla GPU */
    }

        .search-container figure.no-margin {
            margin-bottom: 0;
        }
    .search-container.shrunk figure {
        transform: translateY(-8px);
        opacity: .98;
    }

@media (max-width: 768px) {
    .custom-search-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .custom-search-bar .btn-main-search {
            margin-top: 10px;
        }

    .search-container figure p {
        font-size:smaller;
        font-weight: bold; /* Opcjonalnie pogrubienie */
        color: black; /* Opcjonalnie zmiana koloru */
    }
}


.btn-main-search {
    background: #14af4b;
    border-color: #14af4b;
    color: white;
}

    .btn-main-search:hover,
    .btn-main-search:focus {
        background: #128a3a; /* Ciemniejszy odcień zieleni */
        border-color: #128a3a;
        color: white;
        box-shadow: 3px 3px 15px rgba(40, 167, 69, 0.3);
    }


#s_results {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .6s ease, opacity .35s ease, transform .35s ease;
}

    /* stały, duży sufit – wystarczy 200vh / 3000px */
    #s_results.show {
        max-height: 600vh; /* zamiast 200vh */
        opacity: 1;
        transform: translateY(0);
    }

    #s_results[aria-busy="true"] {
        cursor: progress;
    }

/* Sidebar Background - Lighter */
.sidebar-menu-bg {
    background-color: #f8f9fa !important; /* Light gray background */
    color: #333333; /* Dark text color for better contrast */
}

/* Navigation Links - Lighter Text */
.sidebar-menu-link {
    color: #333333; /* Dark text for contrast */
    padding: 12px;
    border-radius: 8px;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
}

    /* Hover Effect - Light Color Theme */
    .sidebar-menu-link:hover,
    .sidebar-menu-link:focus {
        background: rgba(0, 123, 255, 0.1); /* Light blue background on hover */
        color: #007bff; /* Blue color on hover */
    }

/* Ensure full width for nav items */
.sidebar-menu-item {
    width: 100%;
}

/* Icon Animation */
.sidebar-menu-link i {
    transition: transform 0.3s ease;
}

.sidebar-menu-link:hover i {
    transform: scale(1.1);
}

/* Active Item Highlight (for selected state) */
.sidebar-menu-link.active {
    background: rgba(0, 123, 255, 0.2); /* Active item with blue background */
    color: #007bff !important; /* Ensure the color stays */
    font-weight: bold;
}

.list-group-item {
   
    background-color: #f8f9fa !important;
  
}

.custom-tabs .nav-tabs {
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 5px;
}

.custom-tabs .nav-link {
    color: #333;
    border: none;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
    padding: 10px 15px;
    position: relative;
}

    .custom-tabs .nav-link:hover {
        background-color: #e9ecef;
    }

    /* Active tab with underline effect */
    .custom-tabs .nav-link.active {
        background-color: transparent;
        color: #007bff;
        font-weight: 600;
    }

        .custom-tabs .nav-link.active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 50%;
            height: 3px;
            background-color: #007bff;
            transform: translateX(-50%);
            transition: width 0.3s ease;
        }

    /* Make underline expand on hover */
    .custom-tabs .nav-link:hover::after {
        width: 80%;
    }

.accordion-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    background: #f8f9fa;
}

.accordion-button {
    font-weight: bold;
    background-color: #ffffff;
    color: #333;
    border-bottom: 1px solid #ddd;
}

    .accordion-button:hover {
        background-color: #e9ecef;
        /*color: #0056b3;*/
       
    }

.accordion-body {
    background-color: #fff;
    padding: 15px;
    font-size: 14px;
}

.accordion-button:not(.collapsed) {
    background-color: #e9ecef;
    /*color: #0056b3;*/
    box-shadow: none; /* Removes the blue outline shadow */
}

.accordion-body button {
    padding: 5px 10px;
}


/* Remove the bottom border line */
.accordion-button:focus {
    box-shadow: none !important; /* Removes the blue focus ring */
    border-bottom: none !important; /* Removes the bottom border */
}

/* Style dla wyłączonych accordionów */
.accordion-item.disabled {
    background-color: #f1f1f1;
    border-color: #ccc;
    opacity: 0.6;
    pointer-events: none; /* Wyłącza interakcję */
}

    .accordion-item.disabled .accordion-button {
        background-color: #f1f1f1;
        color: #888;
        border-bottom: 1px solid #ccc;
        pointer-events: none; /* Wyłącza klikanie */
        cursor: not-allowed;
    }

        .accordion-item.disabled .accordion-button:hover {
            background-color: #f1f1f1; /* Brak zmiany koloru na hover */
        }

    .accordion-item.disabled .accordion-body {
        background-color: #f9f9f9;
        color: #aaa;
    }


.custom-card {
    background-color: #f8f9fa !important;
}

/* Ensure text looks clickable */
.termin-link {
    color: #007bff; /* Bootstrap primary blue */
    text-decoration: none;
    /* font-weight: bold; */
}

    .termin-link:hover {
        text-decoration: underline;
    }

/* Disable links visually but keep same structure */
.disabled-link {
    color: gray !important;
    pointer-events: none; /* Prevent clicking */
}

/* Remove blue focus border on click */
a:focus, a:active {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

#gallery .public-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}

#gallery .public-gallery-item {
    flex: 1 1 200px;
    max-width: 300px;
    overflow: hidden; /* Ukrywa nadmiar zdjęć, które wykraczają poza kontener */
}

#gallery .public-gallery-item img {
    width: 100%;
    height: 200px; /* Stała wysokość dla wszystkich zdjęć */
    object-fit: cover; /* Utrzymuje proporcje i przycina zdjęcie, aby pasowało do kontenera */
    object-position: center; /* Wyrównuje obrazek w centrum kontenera */
}
/* Dostosowanie, gdy jest mniej niż 3 zdjęcia w galerii */
@media (max-width: 768px) {
    #gallery .public-gallery-item {
        width: calc(50% - 16px); /* 2 zdjęcia w rzędzie na średnich ekranach */
    }
}

@media (max-width: 480px) {
    #gallery .public-gallery-item {
        width: 100%; /* 1 zdjęcie w rzędzie na małych ekranach */
    }
}

/* Zmiana rozmiaru dla mniejszych ekranów */
@media (max-width: 767px) {
    #gallery .public-gallery-container {
        justify-content: flex-start; /* Jeśli jest mniej niż 3 zdjęcia, nie są wyśrodkowane */
    }
}

/* Dostosowanie galerii, gdy jest tylko 1 lub 2 zdjęcia */
@media (max-width: 1024px) {
    #gallery .public-gallery-item {
        width: calc(50% - 16px); /* Zmniejszenie szerokości elementów, by nie zajmowały całej szerokości ekranu */
    }
}

/* Styl mrugania zegara */
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Klasa, która będzie dodana w ostatniej minucie */
.blinking {
    animation: blink 1s step-end infinite;
    color: red; /* Zmienia kolor na czerwony, możesz dostosować */
}

.polecane-header {
    margin-top: 3rem;
}

.polecane-title {
    color: black;
    font-size: 2rem;
}

.polecane-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.polecana-karta {
    margin-bottom: 1rem;
}

.polecana-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.polecana-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.polecana-card-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end; /* Zmiana na flex-end, aby przesunąć do prawej */
    align-items: flex-start;
    padding: 15px;
}

.polecana-rating-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.polecana-srednia {
    font-size: 18px;
}

.polecana-liczba-opinii {
    font-size: 12px;
}

.polecana-card-body {
    padding: 1rem;
    background-color: white;
}

.polecana-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.polecana-card-text {
    font-size: 12px;
    color: #666;
}


.salon-image {
    width: 170px;
    position: relative; /* Ustawienie pozycji jako odniesienia */
    display: block; /* Zapewnia, że szerokość działa poprawnie */
}

@media (max-width: 576px) {
    .salon-image {
        width: 100%; /* Dopasowanie do responsywnego układu */
    }
}


.search-rating-overlay {
    position: absolute;
    top: 10px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap; /* Zapobiega zawijaniu tekstu */
}

    .search-rating-overlay p {
        margin: 0;
        font-size: 12px;
    }

/* Ogólne style dla nowoczesnych przycisków */
.btn {
    font-size: 1rem; /* Mniejsza czcionka */
    font-weight: 400; /* Zmniejszenie grubości czcionki */
    padding: 10px 20px;
    border-radius: 7px; /* Lekko zaokrąglone rogi */
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Mniejsze rozstawienie liter */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* PRIMARY BUTTON */
.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    color: white;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: linear-gradient(135deg, #0056b3, #004494);
        box-shadow: 3px 3px 15px rgba(0, 91, 187, 0.3);
    }

/* OUTLINE PRIMARY BUTTON */
.btn-outline-primary {
    border-color: #007bff; /* Zgodnie z kolorem tła przycisku primary */
    color: #007bff; /* Zgodnie z kolorem tekstu przycisku primary */
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: #007bff;
        color: white;
        box-shadow: 3px 3px 15px rgba(0, 91, 187, 0.3);
    }

    /* AKTYWNY PRZYCISK W GRUPIE PRZYCISKÓW */
    .btn-check:checked + .btn-outline-primary,
    .btn-check:active + .btn-outline-primary,
    .btn-outline-primary.active,
    .btn-outline-primary:active {
        background: linear-gradient(135deg, #007bff, #0056b3); /* Styl jak dla primary */
        color: white;
        border-color: #007bff;
    }

/* SUCCESS BUTTON */
.btn-success {
    background: #14af4b;
    border-color: #14af4b;
    color: white;
}

    .btn-success:hover,
    .btn-success:focus {
        background: #128a3a; /* Ciemniejszy odcień zieleni */
        border-color: #128a3a;
        color: white;
        box-shadow: 3px 3px 15px rgba(40, 167, 69, 0.3);
    }


/* DANGER BUTTON */
.btn-danger {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    border: none;
    color: white;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background: linear-gradient(135deg, #a71d2a, #7a141e);
        box-shadow: 3px 3px 15px rgba(220, 53, 69, 0.3);
    }

/* Efekt wciśnięcia */
.btn:active {
    transform: scale(0.95);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Małe przyciski */
.btn-sm {
    font-size: 0.875rem;
    padding: 5px 10px;
    border-radius: 5px;
}

.glowna-salon-img-container {
    margin-top: 20px;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.glowna-salon-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* Nakładka dostosowująca się do wielkości obrazu */
.glowna-salon-img-overlay {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 20%;
    max-width: 80px; /* Maksymalny rozmiar */
    min-width: 50px; /* Minimalny rozmiar */
    aspect-ratio: 1 / 1; /* Zapewnia, że overlay pozostaje kwadratowy */
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Poprawiony rozmiar tekstu */
.glowna-salon-srednia {
    font-size: 1rem; /* Domyślny rozmiar */
    font-weight: bold;
}

/* Liczba opinii */
.glowna-salon-liczba-opinii {
    font-size: 0.85rem;
    opacity: 0.8;
    white-space: nowrap;
}

/* Dla mniejszych ekranów */
@media (max-width: 768px) {
    .glowna-salon-img-overlay {
        width: 25%;
        max-width: 80px; /* Nieco mniejszy, ale czytelny */
    }

    .glowna-salon-srednia {
        font-size: 1.2rem; /* Większa czcionka na mobile */
    }

    .glowna-salon-liczba-opinii {
        font-size: 1rem;
        white-space: nowrap;
    }
}

/* Dla bardzo małych ekranów */
@media (max-width: 480px) {
    .glowna-salon-img-overlay {
        width: 30%;
        max-width: 70px;
    }

    .glowna-salon-srednia {
        font-size: 1.4rem; /* Jeszcze większa na mobilnych */
    }

    .glowna-salon-liczba-opinii {
        font-size: 1.1rem;
        white-space: nowrap;
    }
}
/* Efekt powiększenia tekstu przy najechaniu */
.navbar-nav .nav-item .nav-link {
    transition: transform 0.3s ease, font-weight 0.3s ease;
}

    .navbar-nav .nav-item .nav-link:hover {
        font-size: 1.1rem;
        font-weight: 600;
    }

/* Aktywny link – stylizacja, gdy rodzic ma klasę active */
.navbar-nav .nav-item.active .nav-link {
    color: #007bff;
    font-weight: bold;
    border-bottom: 2px solid #007bff; /* Zmniejszona grubość linii */
    padding-bottom: 4px; /* Zmniejszenie odległości między tekstem a linią */
}


/* Styl dla elementu nawigacyjnego, który nie jest aktywny */
.navbar-nav .nav-item .nav-link {
    text-decoration: none;
}

/* Płynne przejścia */
.navbar-nav .nav-item .nav-link {
    transition: color 0.3s ease, border-bottom 0.3s ease;
}




.navbar-transparent {
    background-color: rgba(255, 255, 255, 0.8); /* Biały z 80% krycia */
    backdrop-filter: blur(10px); /* Lekko rozmywa tło za navbar */
    transition: background-color 0.3s ease-in-out;
}



footer {
    background-color: #e0e0e0; /* Ten sam kolor co dół tła w body */
    border-top: 2px solid #b3b3b3; /* Subtelna ramka oddzielająca stopkę */
    color: #333; /* Tekst w ciemniejszym odcieniu dla kontrastu */
    padding: 20px 0;
   
}

/* Unikalne style dla modala cookies */
.cookie-consent-dialog {
    max-width: 500px;
    margin: 0 auto;
}

.cookie-consent-content {
    font-family: 'Arial', sans-serif;
}

.cookie-consent-header {
    background-color: #007bff;
    color: white;
}

.cookie-consent-body p {
    font-size: 16px;
    line-height: 1.5;
}

.cookie-consent-footer button {
    font-size: 16px;
    padding: 10px 20px;
}

.cookie-consent-footer .cookie-consent-reject {
    background-color: #f8f9fa;
    border: 1px solid #007bff;
}

    .cookie-consent-footer .cookie-consent-reject:hover {
        background-color: #007bff;
        color: white;
    }

.cookie-consent-footer .cookie-consent-accept {
    background-color: #007bff;
    color: white;
}

    .cookie-consent-footer .cookie-consent-accept:hover {
        background-color: #0056b3;
    }

.transparent-bg {
    background-color: transparent !important;
}


.carousel-item {
    transition: transform 3s ease !important; 
}

@media (max-width: 768px) {
    .mobile-img {
        max-width: 240px;
    }
}

#chartControls {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.date-range,
.chart-type,
.chart-view {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .date-range label,
    .chart-type button,
    .chart-view button {
        margin-right: 10px;
    }

.chart-btn, .chart-toggle-btn {
    padding: 8px 12px;
    background: #f4f4f4;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
}

    .chart-btn.active, .chart-toggle-btn.active {
        background: #447abe;
        color: white;
        font-weight: bold;
    }

#chartContainer {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#summaryContainer {
    margin-bottom: 15px;
    padding: 10px;
    background: #f4f7f9;
    border-radius: 5px;
    display: inline-block;
}

.modal-backdrop {
    background-color: rgba(255, 255, 255, 0.7); /* jasne tło z przezroczystością */
    backdrop-filter: blur(10px); /* opcjonalnie zostaw rozmycie */
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-anim {
    opacity: 0;
    animation: slideFadeIn 0.6s ease forwards;
}

.nieodczytane {
    font-weight: 700;
    background-color: #f8f9fa; /* delikatne tło, opcjonalnie */
}

.search-container[data-img="salonurody"] {
    background-image: url('/pictures/search/salonurody_search.jpg');
}

.search-container[data-img="salonfryzjerski"] {
    background-image: url('/pictures/search/salonfryzjerski_search.jpg');
}

.search-container[data-img="salonbarberski"] {
    background-image: url('/pictures/search/salonbarberski_search.jpg');
}

.search-container[data-img="salongroomerski"] {
    background-image: url('/pictures/search/salongroomerski_search.jpg');
}

.search-container[data-img="salonterapeutyczny"] {
    background-image: url('/pictures/search/salonterapeutyczny_search.jpg');
}

.search-container[data-img="salonfizjoterapeutyczny"] {
    background-image: url('/pictures/search/salonfizjoterapeutyczny_search.jpg');
}

.search-container[data-img="salonmasazu"] {
    background-image: url('/pictures/search/salonmasazu_search.jpg');
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    .search-container[data-img="salonurody"] {
        background-image: url('/pictures/search/salonurody_search_mobile.jpg');
    }

    .search-container[data-img="salonfryzjerski"] {
        background-image: url('/pictures/search/salonfryzjerski_search_mobile.jpg');
    }

    .search-container[data-img="salonbarberski"] {
        background-image: url('/pictures/search/salonbarberski_search_mobile.jpg');
    }

    .search-container[data-img="salongroomerski"] {
        background-image: url('/pictures/search/salongroomerski_search_mobile.jpg');
    }

    .search-container[data-img="salonterapeutyczny"] {
        background-image: url('/pictures/search/salonterapeutyczny_search_mobile.jpg');
    }

    .search-container[data-img="salonfizjoterapeutyczny"] {
        background-image: url('/pictures/search/salonfizjoterapeutyczny_search_mobile.jpg');
    }

    .search-container[data-img="salonmasazu"] {
        background-image: url('/pictures/search/salonmasazu_search_mobile.jpg');
    }
}

/* Mobile: select ma mieć szerokość wg treści */
@media (max-width: 575.98px) {
    #agenda_jesliklikupracownikow #agenda_select_pracownicy {
        display: inline-block; /* zamiast block */
        width: max-content; /* szerokość = zawartość */
        max-width: calc(100vw - 2rem); /* nie wychodź poza ekran */
        white-space: nowrap; /* nie łam tekstu w opcji */
    }
}
@media (max-width: 575.98px) {
    /* Zewnętrzny kontener ma już mx-2 dzięki klasie; nothing else needed */

    /* Wewnętrzny: bez ramki/tła/zaokrągleń na mobile */
    #mobileActiveInfo .mobile-active-inner {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: .75rem !important; /* opcjonalnie ciut ciaśniej na mobile */
    }
}
@media (max-width: 575.98px) {
    #mobileActivationCard .mobile-activation-inner {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: .75rem !important;
    }

    /* Na mobile przycisk wygląda jak btn-sm */
    #generatetokenbtn {
        margin-left: 10px;
        padding: .25rem .5rem !important; /* standard btn-sm */
        font-size: .875rem !important;
        border-radius: .2rem !important;
    }
}
@media (max-width: 575.98px) {
    /* Karta bez ramki/tła/rounded na telefonach */
    .reservation-inner {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: .75rem !important;
    }
    /* Przycisk jak btn-sm i na pełną szerokość */
    #reservationForm .btn {
        width: 100% !important;
        padding: .25rem .5rem !important; /* btn-sm */
        font-size: .875rem !important;
        border-radius: .2rem !important;
    }
}