/* podkova-regular - latin-ext */
@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/podkova-v17-latin-ext-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/podkova-v17-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/podkova-v17-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/podkova-v17-latin-ext-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/podkova-v17-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/podkova-v17-latin-ext-regular.svg#Podkova') format('svg'); /* Legacy iOS */
}

/* podkova-600 - latin-ext */
@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/podkova-v17-latin-ext-600.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/podkova-v17-latin-ext-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/podkova-v17-latin-ext-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/podkova-v17-latin-ext-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/podkova-v17-latin-ext-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/podkova-v17-latin-ext-600.svg#Podkova') format('svg'); /* Legacy iOS */
}

/* podkova-500 - latin-ext */
@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/podkova-v17-latin-ext-500.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/podkova-v17-latin-ext-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/podkova-v17-latin-ext-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/podkova-v17-latin-ext-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/podkova-v17-latin-ext-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/podkova-v17-latin-ext-500.svg#Podkova') format('svg'); /* Legacy iOS */
}

/* podkova-700 - latin-ext */
@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/podkova-v17-latin-ext-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/podkova-v17-latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/podkova-v17-latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/podkova-v17-latin-ext-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/podkova-v17-latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/podkova-v17-latin-ext-700.svg#Podkova') format('svg'); /* Legacy iOS */
}

/* podkova-800 - latin-ext */
@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/podkova-v17-latin-ext-800.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/podkova-v17-latin-ext-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/podkova-v17-latin-ext-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/podkova-v17-latin-ext-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/podkova-v17-latin-ext-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/podkova-v17-latin-ext-800.svg#Podkova') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src: local("Open Sans Light Italic"), local(OpenSans-LightItalic), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxrXcjzEax2LfQAlK8DdMzhA.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxko2lTMeWA_kmIyWrkNCwPc.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    src: local("Open Sans Italic"), local(OpenSans-Italic), url(//fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBmfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    src: local("Open Sans SemiBold Italic"), local(OpenSans-SemiBoldItalic), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxn5HxGBcBvicCpTp6spHfNo.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src: local("Open Sans Bold Italic"), local(OpenSans-BoldItalic), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxrFt29aCHKT7otDW9l62Aag.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxolIZu-HDpmDIZMigmsroc4.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    src: local("Open Sans ExtraBold Italic"), local(OpenSans-ExtraBoldItalic), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxphT2rkLFFMVLymfgfmWVtI.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxnibbpXgLHK_uTT48UMyjSM.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/PRmiXeptR36kaC0GEAetxkCDe67GEgBv_HnyvHTfdew.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local(OpenSans-Light), url(//fonts.gstatic.com/s/opensans/v14/DXI1ORHCpsQm3Vp6mXoaTXZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"), local(OpenSans-Regular), url(//fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"), local(OpenSans-SemiBold), url(//fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local(OpenSans-Bold), url(//fonts.gstatic.com/s/opensans/v14/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    src: local("Open Sans ExtraBold"), local(OpenSans-ExtraBold), url(//fonts.gstatic.com/s/opensans/v14/EInbV5DfGHOiMmvb1Xr-hnZ2MAKAc2x4R1uOSeegc5U.eot?#) format("eot"), url(//fonts.gstatic.com/s/opensans/v14/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(//fonts.gstatic.com/s/opensans/v14/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format("woff");
}

@charset "UTF-8";

body {
    font-family: "Open Sans", sans-serif; /* Użyj czcionki jak na alucenter.pl */
    margin: 0;
    padding: 0;
    background-color: #f8f8f8; /* Jasne tło strony */
    color: #333; /* Domyślny kolor tekstu */
    line-height: 1.6;
}

/* --- Nagłówek --- */
header {
    background-color: #222; /* Ciemny kolor nagłówka */
    color: #fff;
    padding: 15px 0;
    text-align: center;
    margin-bottom: 30px;
}

header h1 {
    margin: 0;
    font-size: 1.8em; /* Rozmiar tytułu */
    font-weight: 500; /* Grubość czcionki */
    font-family: 'Podkova', sans-serif; /* Czcionka Podkova */
}

/* --- Główny kontener --- */
.container {
    max-width: 700px; /* Szerokość kontenera */
    margin: 16px auto; /* Wyśrodkowanie i margines góra/dół */
    padding: 30px;
    background-color: #fff; /* Białe tło dla formularza */
    border: 1px solid #ddd; /* Delikatna ramka */
    /*border-radius: 5px; !* Zaokrąglenie rogów *!*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtelny cień */
}

/* --- Grupy formularza (etykieta + pole) --- */
.form-group {
    display: flex;
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie */
    flex-direction: column; /* Ustawienie elementów w kolumnie */
    margin-bottom: 20px; /* Odstęp między polami */
}

/* --- Etykiety --- */
label {
    display: block; /* Etykieta w nowej linii */
    margin-bottom: 4px;
    font-weight: bold; /* Pogrubienie */
    color: #444; /* Ciemniejszy szary */
    font-size: 0.95em;
    text-align: left;
}

.label-container {
    width: 100%; /* Dopasowanie do szerokości rodzica */
    text-align: left; /* Wyrównanie tekstu do lewej */
    max-width: 400px; /* Maksymalna szerokość etykiety */
}

/* --- Pola Select --- */
select {
    width: 100%; /* Pełna szerokość kontenera */
    max-width: 400px;
    padding: 10px 12px; /* Wewnętrzny odstęp */
    border: 1px solid #ccc; /* Szara ramka */
    /*border-radius: 4px; !* Lekkie zaokrąglenie *!*/
    box-sizing: border-box; /* Padding wliczony w szerokość */
    font-size: 1em;
    background-color: #fff;
    appearance: none; /* Ukrycie domyślnej strzałki przeglądarki */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Dodanie własnej strzałki jako tło */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
    cursor: pointer;
}

/* --- Przycisk --- */
.btn {
    font-family: "Podkova", serif;
    text-transform: uppercase;
    font-size: 1.125rem;
    cursor: pointer;
    border: 0.0625rem solid #141414;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.centered-button {
    display: block;
    margin: 20px auto; /* Wyśrodkowanie przycisku */
    width: 100%; /* Szerokość przycisku */
    max-width: 400px;
    text-align: center;
}

@media (max-width: 767px) {
    .btn {
        line-height: 1.2;
        white-space: normal;
    }
}

.btn.btn-sm, .btn-group-sm > .btn {
    font-size: 1rem;
}

.btn.btn-md {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
}

@media (min-width: 992px) {
    .btn.btn-md {
        min-width: 14rem;
    }
}

.btn:active, .btn.active, .btn:focus, .btn.focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-default {
    background: #141414;
    color: #fff;
    outline: 0.0625rem solid #fff;
    outline-offset: -0.1875rem;
}

.btn-default:hover {
    color: #fff;
    outline-color: #f33f2e;
    background: #f33f2e;
    border-color: #f33f2e;
}

.btn-default.disabled, .btn-default:disabled {
    cursor: default;
}

.btn-default.disabled:hover, .btn-default:disabled:hover {
    outline-color: #fff;
    background: #141414;
    border-color: #141414;
}


/* --- Obszar wyników --- */
.result {
    margin-top: 30px; /* Odstęp od przycisku */
    padding: 15px;
    background-color: #f0f0f0; /* Lekko szare tło dla wyników */
    border: 1px solid #ddd;
    /*border-radius: 4px;*/
    min-height: 40px; /* Minimalna wysokość */
    color: #555;
}

/* --- Obrazek wyniku --- */
#resultImage {
    display: none; /* Domyślnie ukryty */
    max-width: 100%; /* Obrazek responsywny */
    height: auto; /* Zachowanie proporcji */
    margin: 20px auto 0; /* Wyśrodkowanie i margines górny */
    border: 1px solid #eee; /* Delikatna ramka */
    /*border-radius: 4px;*/
}

.product-card {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    /*border-radius: 8px;*/
    padding: 10px;
    max-width: 400px;
    margin: 20px auto;
    background-color: #f9f9f9;
}

.product-card img {
    max-width: 100px;
    max-height: 100px;
    /*border-radius: 4px;*/
    margin-right: 15px;
    object-fit: cover;
}

.product-details {
    font-size: 14px;
    color: #333;
}

.product-details p {
    margin: 2px 0; /* Zmniejszenie marginesów góra/dół */
}

.loading-overlay {
    position: fixed; /* Lub absolute, jeśli ma pokrywać tylko kontener formularza */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Półprzezroczyste białe tło */
    display: flex; /* Użyj flexbox do wyśrodkowania spinnera */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Upewnij się, że jest na wierzchu */
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #f33f2e; /* Kolor spinnera */
    animation: spin 1s ease infinite;
}

.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    /*border-radius: 5px;*/
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* --- Media Queries (prosta responsywność) --- */
@media (max-width: 768px) {
    .container {
        margin-left: 15px;
        margin-right: 15px;
        padding: 20px;
    }

    header h1 {
        font-size: 1.6em;
    }

    button#fitButton {
        font-size: 1em;
        padding: 10px 15px;
    }
}

.custom-select {
    position: relative;
    width: 100%;
    max-width: 400px;
    /*margin-bottom: 20px;*/
    font-size: 1em;
}
.custom-select-selected {
    background: #fff;
    border: 1px solid #ccc;
    padding: 2px 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    min-height: 40px;
}
.custom-select-arrow {
    margin-left: auto;
    border: solid #888;
    border-width: 0 2px 2px 0;
    padding: 4px;
    transform: rotate(45deg);
}
.custom-select-list {
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.custom-select-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.custom-select-item:hover,
.custom-select-item.selected {
    background: #f0f0f0;
}

.custom-select.disabled .custom-select-selected {
    background: #f5f5f5;
    color: #aaa;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}
.custom-select.disabled .custom-select-arrow {
    border-color: #bbb;
}
.color-box {
    width: 18px;
    height: 18px;
    border: 1px solid #aaa;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
}

.make-box {
    width: 24px;
    height: 18px;
    border: 1px solid #aaa;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
}