/* Основні стилі для калькулятора наклейок */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;

}

/* Блокує горизонтальну прокрутку на всій сторінці */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Гарантує, що iframe не вийде за межі екрану */
iframe {
    display: block;
    max-width: 100%;
    overflow-x: hidden;
}


/* Стилі для головного контейнера калькулятора */
.calculator {
    max-width: 500px ;
    margin: 50px auto; /* Відцентрування контейнера */
    padding: 20px;
    background-color: #fff; /* Білий фон */
    border-radius: 10px; /* Заокруглені кути */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легка тінь */
}

/* Заголовок калькулятора */
h1 {
    text-align: center;
    color: #333; /* Темно-сірий текст */
}

/* Основні стилі для форми */
form {
    display: flex;
    flex-direction: column; /* Відображення елементів у стовпець */
    gap: 10px; /* Відступи між елементами */
}

label {
    font-weight: bold; /* Напівжирний текст */
}

select, input {
    padding: 3px; /* Внутрішній відступ */
    border: 1px solid #ccc; /* Сіра рамка */
    border-radius: 5px; /* Заокруглені кути */
    font-size: 16px; /* Збільшений шрифт */
}

/* Група радіокнопок */
.radio-group {
    display: flex;
    gap: 23%; /* Відстань між елементами */
    margin-top: 5px;
}

.radio-group label {
    display: flex;
    align-items: center; /* Вирівнювання тексту і кнопки */
    cursor: pointer; /* Вказівник курсора при наведенні */
}

.radio-group input[type="radio"] {
    margin-right: 8px; /* Відступ праворуч від кнопки */
}

/* Стилі для кнопок */
button {
    padding: 10px;
    background-color: #ff6a00; /* Помаранчевий фон */
    color: #fff; /* Білий текст */
    border: none; /* Відсутність рамки */
    border-radius: 5px; /* Заокруглені кути */
    font-size: 16px; /* Збільшений шрифт */
    cursor: pointer; /* Вказівник курсора при наведенні */
}


/* Стилі для результату */
#result {
    margin-top: 20px;
    font-size: 18px;
    color: #ff6a00; /* Темно-сірий текст */
    text-align: center;
}

/* Контейнер для слайдера */
.slider-container {
    text-align: center;
}

input[type="range"] {
    width: 80%; /* Ширина слайдера */
    background: linear-gradient(to right, #ff6a00 0%, #ff6a00 50%, #ddd 50%, #ddd 100%); /* Градієнт фону */
    height: 6px; /* Висота слайдера */
    border-radius: 3px; /* Заокруглені краї */
    outline: none; /* Відсутність обведення */
    margin-top: 20px;
    -webkit-appearance: none; /* Відключення стандартного стилю в Webkit */
    transition: background 0.3s ease; /* Анімація фону */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; /* Ширина повзунка */
    height: 16px; /* Висота повзунка */
    background: #ff6a00; /* Помаранчевий колір повзунка */
    border: 2px solid #fff; /* Білий обвід */
    border-radius: 50%; /* Заокруглена форма */
    cursor: pointer; /* Вказівник курсора */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Легка тінь */
    transition: background 0.3s ease; /* Анімація зміни кольору */
}

/* Аналогічні стилі для інших браузерів */
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #ff6a00;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;

}

input[type="range"]:focus {
    outline: none; /* Відключення обведення при фокусі */
}

/* Виведення обраного значення тиражу */
.quantity-output {
    font-size: 18px; /* Збільшений шрифт */
    font-weight: bold; /* Напівжирний текст */
    color: #333; /* Темно-сірий текст */
    margin: 5px 0; /* Відступи зверху і знизу */
}

/* Вибір форми наклейки */
.shape-selector {
    display: flex;
    gap: 25px; /* Відстань між кнопками */
    justify-content: center;
    align-items: center;
}

/* Стилі для кнопок вибору форми */
.shape-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px; /* Регулюйте розміри під ваші потреби */
    height: 120px;
    border: 2px solid transparent; /* Відсутня обводка у неактивному стані */
    background-color: #fff;
    cursor: pointer;
    border-radius: 7px; /* Загальні кути */
    transition: 0.3s;
}

.shape-button.active {
    border: 3px solid #ff6a00; /* Помаранчева обводка при активному стані */
    background-color: #fff; /* Фон залишається білим */
    color: #333;
    box-shadow: none; /* Видаляємо тінь */
}

.shape-button:hover {
    border: 3px solid #ff6a00; /* Додаємо обводку при наведенні */
}

/* При наведенні або активному стані збільшуємо зображення */
.shape-button:hover img.shape-image,
.shape-button.active img.shape-image {
    transform: scale(1.1); /* Збільшення на 10% */
}


.shape-button img.shape-image {
    width: 80px;
    height: 80px;
    object-fit: contain;;
    margin-bottom: 5px; /* Відступ між зображенням і підписом */
}

.shape-button span {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}





.shape-button.rectangle {
    border-radius: 4px; /* Злегка заокруглені кути */
}




.form-container {
    display: flex; /* Вирівнювання елементів горизонтально */
    justify-content: space-between; /* Простір між блоками */
    gap: 20px; /* Відстань між основною формою і додатковими полями */
    align-items: flex-start; /* Вирівнювання по верхньому краю */

}
/* Основна форма */
#stickerForm {
    flex: 2; /* Займає більше простору */
}
/* Додаткові поля */
#additionalFields {
    flex: 1; /* Займає менше простору */
    padding: 10px;

}

/* Для дополнительных полей */
#additionalFields {
    position: absolute; /* Абсолютное позиционирование */
    top: 10%; /* Располагаем ниже основного контента */
    left: 1000px;
    width: 15% ; /* Растягиваем на ширину контейнера */
    height: 30% auto;
    background: #fff; /* Белый фон */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    padding: 10px;
    border-radius: 10px; /* Заокруглені кути */
}


.hidden {
    display: none;
}

#largeOrderMessage {
    color: ; #ccc
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    font-size: 13px
}


/* Червона рамка для невалідних полів */
.error-border {
    border: 2px solid red;
}

/* Контейнер для повідомлень про помилки */
.error-messages {
    margin-top: 5px;
    color: red;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Відстань між повідомленнями */
}


button.inactive {
    background-color: #ccc; /* Сірий фон */
    color: #666; /* Світлий текст */
    cursor: not-allowed; /* Заборонений курсор */
}
#result{
    font-weight: bold;
}


/* Стилі для блоку завантаження */
#fileUpload {
    text-align: center;
    padding: 14px;
    border: 2px dashed #ff6a00; /* Пунктирна рамка */
    border-radius: 10px;
    background-color: #fff;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    width: 80%;
    max-width: 400px;
    margin: 10px auto;
}

/* Підсвічування при перетягуванні файлу */
#fileUpload.highlight {
    background-color: rgba(255, 106, 0, 0.2);
}

/* Текст "Завантажити макет до 20MB:" */
.file-upload-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

/* Додатковий текст-підказка */
.file-upload-subtext {
    font-size: 13px;
    color: #ff6a00;
}

/* Іконка завантаження */
.file-upload-icon {
    font-size: 40px;
    color: #ff6a00;
    transition: 0.3s ease-in-out;
    display: block;
    margin: 5px auto;
}

#fileUpload:hover .file-upload-icon {
    color: #d15802;
    transform: scale(1.1);
}

/* Відображення імені вибраного файлу */
#fileName {
    max-width: 100%; /* Робимо контейнер обмеженим за шириною */
    overflow: hidden; /* Ховаємо текст, що не вміщується */
    text-overflow: ellipsis; /* Додаємо "..." для довгих назв */
    white-space: nowrap; /* Запобігаємо переносу тексту */
    display: block;
    font-size: 14px;
    color: #333;
    margin-top: 5px;
    font-weight: bold;
}

.file-format {
    font-size: 11px;
    color: #555;
    margin-top: 5px;
}





/* Контейнер кнопки замовлення */
.order-button-container {
    display: flex;
    justify-content: center; /* Центрування кнопки */
    margin-top: 12px; /* Відступ зверху, щоб кнопка не накладалася на fileUpload */
}

/* Стилі для кнопки "Замовити" */
#orderButton {
    padding: 6px 14px;
    background-color: #ff6a00; /* Помаранчевий фон */
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    text-align: center;
    width: 100%; /* Робимо кнопку широкою */
    max-width: 200px; /* Обмежуємо ширину */
}

/* Ефект при наведенні */
#orderButton:hover {
    background-color: #d15802; /* Темніший помаранчевий */
}


#uploadFile {
    display: none;
}
#fileName {
    max-width: 100%; /* Робимо контейнер обмеженим за шириною */
    overflow: hidden; /* Ховаємо текст, що не вміщується */
    text-overflow: ellipsis; /* Додаємо "..." для довгих назв */
    white-space: nowrap; /* Запобігаємо переносу тексту */
    display: block;
    font-size: 14px;
    color: #333;
    margin-top: 5px;
    font-weight: bold;
}


.full-iframe {
  width: 100%;
  height: 90vh;
  border: none;
}


/* Телефон */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .calculator {
        margin: 20px auto;
        padding: 15px;
    }

    .form-container {
        flex-direction: column;
        align-items: center;
    }

    form,
    #additionalFields {
        width: 100%;
    }

    #additionalFields {
        position: static !important; /* ключовий момент */
        box-shadow: none;
        margin-top: 10px;
        background: #fff;
    }

    .order-button-container {
        justify-content: center;
    }

    .shape-selector {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .shape-button {
        width: 45%;
        max-width: 130px;
        height: auto;
    }
    .radio-group {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    }
    
    /* iframe */
    iframe {
      width: 25vw !important; /* 50% ширини екрана */
      height: 100vh !important;
    }
    



}