/* Ogólne stylowanie strony */
body {
    touch-action: manipulation;
    font-family: 'Roboto', sans-serif;  /* Czcionka używana na stronie */
    color: #333333;  /* Kolor tekstu */
    line-height: 1.6;  /* Wysokość linii */
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;  /* Kolor tła */
}

/* Stylowanie obrazów produktów */
.product-img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* Stylowanie kart produktów */
.card {
    position: relative;
}

/* Stylowanie przycisków przełączania obrazu */
.toggle-image {
    bottom: 10px;
    right: 10px;
}

/* Stylowanie przycisków na stronie produktu */
.btn-product-page {
    background-color: red;
    color: white;
}

.btn-view-3d {
    background-color: #ffc107;
    color: black;
}

.btn-toggle-image {
    background-color: #6c757d;
    color: white;
}

/* Stylowanie linków do tytułów produktów */
.product-title a {
    color: black;
    text-decoration: none;
}

.product-title a:hover {
    color: #fe0000;
}

/* Stylowanie tabel */
.table {
    width: 100%;
    table-layout: fixed;
}

.table td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* Stylowanie modalnych okien pełnoekranowych */
.modal-fullscreen {
    max-width: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100vh;
}

.modal-fullscreen .modal-body {
    height: 100%;
}

#iframe3D {
    border: none;
    height: 100%;
    width: 100%;
}

/* Stylowanie nagłówków */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;  /* Grubość czcionki */
    margin-top: 1em;
    margin-bottom: 0.5em;
}

/* Stylowanie paragrafów */
p {
    margin-bottom: 1em;
    font-size: 1rem;  /* Rozmiar czcionki */
}

.lead {
    font-size: 14px;
}

/* Stylowanie elementów z klasą text-danger */
.text-danger { 
    background-color: #fe0000;
    border-color: #fe0000;
}

/* Stylowanie elementów z klasą text-warning */
.text-warning { 
    background-color: #ff9c22;
    border-color: #ff9c22;
}

/* Stylowanie obrazków z flagami */
.img-flag {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

select#country option {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px; /* Przestrzeń na flagę */
}

/* Stylowanie elementów formularza walidacji */
.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    color: #dc3545;
    display: block;
}

.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: none;
    color: #dc3545;
}

.is-invalid + .invalid-feedback {
    display: block;
}

/* Stylowanie tabeli rozmiarów */
.size-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.size-table th, .size-table td {
    padding: 4px;
    text-align: center;
}

/* Stylowanie przycisków rozmiarów */
.size-button {
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0s ease;
}

/* Stylowanie aktywnego przycisku rozmiaru */
.size-button.active {
    background-color: #393939;
    color: white;
}

/* Stylowanie przycisków kontrolnych */
.control-button {
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0s ease;
}

.control-button:hover {
    background-color: #f1f1f1;
}

/* Stylowanie wierszy kontrolnych */
.control-row td {
    visibility: hidden; /* Ukrywa elementy, ale rezerwuje ich miejsce */
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear; /* Dodaje przejście do efektu wyświetlania */
}

.control-row td.active {
    visibility: visible; /* Pokazuje elementy */
    opacity: 1;
}

/* Stylizacja dla komórek `td` w wierszu licznika */
.control-row.count-row td {
    color: #333; /* Kolor tekstu */
    font-size: 22px; /* Rozmiar czcionki */
    font-weight: bold; /* Grubość czcionki */
    text-align: center; /* Wyrównanie tekstu */
}

/* Stylowanie ikony koszyka */
.cart-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #fe0000;
    color: white;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cart-icon:hover {
    background-color: #cc0000;
    transform: scale(1.1);
}

.list-group-item {
    cursor: pointer; /* Zmienia kursor na wskaźnik ręki */
    color: #000; /* Kolor linku */
    transition: color 0.2s; /* Płynna zmiana koloru */
}

.list-group-item:hover {
    color: #0351a5; /* Zmiana koloru tekstu przy najechaniu */
}

/* Stylowanie dla nowych informacji o produktach */
.product-info {
    font-size: 15px;
    margin-bottom: 10px;
    display: none; /* Domyślnie ukryty */
    color: black;
}

.product-info span:first-child {
    color: black; /* Kolor liczby sztuk */
}

.product-info span:last-child {
    color: #fe0000;
    font-weight: bold; /* Pogrubienie ceny */
}

.price { color:#fe0000; }

.personalization-item {
    margin-bottom: 10px;
    color:#000;
}
.personalization-item:hover {
    margin-bottom: 10px;
    color:#000;
    text-decoration: none;

}

.personalization-item input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    font-size: 14px;
    color:#fe0000;
}