@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap');
/* Додайте до існуючого імпорту на початку файлу */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Підключення кастомного шрифту DIN Pro Cond Medium */
/* Переконайтеся, що файл DINPro-CondMedium.ttf лежить у папці fonts */
@font-face {
    font-family: "DIN Pro Cond Medium";
    src: url("../fonts/DINPro-CondMedium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'UA LP Standart';
    src: url('шлях/до/вашої/папки/UA_LP_Standart.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* =======================================================
   ЛОКАЛЬНІ АВТОМОБІЛЬНІ ШРИФТИ (TTF / OTF)
   ======================================================= */
/* fonts.css */
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'RoadUA'; src: url('../fonts/RoadUA-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face {
    font-family: 'GPTFont'; /* Внутрішня системна назва для коду */
    src: url('../fonts/UA_plate_FINAL.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}
/* 1. Alte DIN 1451 Mittelschrift */
@font-face {
    font-family: 'Alte DIN 1451';
    src: url('../fonts/alte-din-1451-mittelschrift.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. FE-Schrift (Німецький сучасний) */
@font-face {
    font-family: 'FE-Schrift';
    src: url('../fonts/FE Mittelschrift Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 3. DIN 1451 Alt */
@font-face {
    font-family: 'DIN 1451 Alt';
    src: url('../fonts/din1451alt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 4. DIN 1451 Alt G */
@font-face {
    font-family: 'DIN 1451 Alt G';
    src: url('../fonts/din1451alt G.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Charles Wright (Британський стандарт) */
@font-face {
    font-family: 'Charles Wright';
    src: url('../fonts/CharlesWright-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* =======================================================
   СІМЕЙСТВО D-DIN (Аналог DIN Pro)
   ======================================================= */

/* D-DIN Звичайний */
@font-face {
    font-family: 'D-DIN';
    src: url('../fonts/D-DIN.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* D-DIN Жирний */
@font-face {
    font-family: 'D-DIN';
    src: url('../fonts/D-DIN-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* D-DIN Курсив */
@font-face {
    font-family: 'D-DIN';
    src: url('../fonts/D-DIN-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* D-DIN Condensed (Вузький) */
@font-face {
    font-family: 'D-DIN Condensed';
    src: url('../fonts/D-DINCondensed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Condensed';
    src: url('../fonts/D-DINCondensed-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* D-DIN Expanded (Широкий) */
@font-face {
    font-family: 'D-DIN Expanded';
    src: url('../fonts/D-DINExp.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Expanded';
    src: url('../fonts/D-DINExp-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN Expanded';
    src: url('../fonts/D-DINExp-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* =======================================================
   ЛОКАЛЬНІ АВТОМОБІЛЬНІ ШРИФТИ
   ======================================================= */
@font-face {
    font-family: 'FE-Schrift';
    src: url('../fonts/fe-schrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN 1451 Engschrift';
    src: url('../fonts/din1451engschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Стилі для випадаючого списку шрифтів */
.font-selector {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    margin-top: 5px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.font-selector:focus {
    outline: none;
    border-color: #111;
}

.plate-designer{
display:flex;
gap:40px;
flex-wrap:wrap;
}

.plate-preview{
position:relative;
}

#plateCanvas{
border:1px solid #ccc;
}

.plate-input{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:40px;
border:none;
background:transparent;
text-align:center;
width:80%;
}

.control-group{
margin-bottom:20px;
}

.color-buttons,
.font-buttons,
.size-buttons{
display:flex;
gap:10px;
}

.color-btn,
.font-btn{
width:35px;
height:35px;
border-radius:6px;
border:2px solid #999;
cursor:pointer;
}

.color-btn.white{background:#fff}
.color-btn.black{background:#000}
.color-btn.red{background:#c00}
.color-btn.yellow{background:#ffd800}
.color-btn.blue{background:#00aaff}
.color-btn.green{background:#008000}

.font-btn.black{background:#000}
.font-btn.white{background:#fff}
.font-btn.green{background:#008000}
.font-btn.gold{background:#c9a227}
/* ---------- PLATE FONT ---------- */

@font-face{
    font-family: "PlateFont";
    src: url("../fonts/FE.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


/* ---------- LAYOUT ---------- */

.plate-designer{
display:flex;
gap:40px;
flex-wrap:wrap;
}

.plate-preview{
position:relative;
}

#plateCanvas{
border:1px solid #ccc;
}


/* ---------- INPUT ---------- */

.plate-input{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:40px;
border:none;
background:transparent;
text-align:center;
width:80%;
}


/* ---------- CONTROLS ---------- */

.control-group{
margin-bottom:20px;
}

.color-buttons,
.font-buttons,
.size-buttons{
display:flex;
gap:10px;
}


/* ---------- BUTTONS ---------- */

.color-btn,
.font-btn{
width:35px;
height:35px;
border-radius:6px;
border:2px solid #999;
cursor:pointer;
}


/* ---------- PLATE COLORS ---------- */

.color-btn.white{background:#fff}
.color-btn.black{background:#000}
.color-btn.red{background:#c00}
.color-btn.yellow{background:#ffd800}
.color-btn.blue{background:#00aaff}
.color-btn.green{background:#008000}
.color-btn.rose{background:#FF007F}


/* ---------- FONT COLORS ---------- */

.font-btn.black{background:#000}
.font-btn.white{background:#fff}
.font-btn.green{background:#008000}
.font-btn.gold{background:#c9a227}

/* Основні стилі */
body {
    font-family: 'DIN Alternate', Arial, sans-serif;
    background-color: #f8f8f8;
    color: #111;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-weight: 700;
    margin: 20px 0;
}

/* Контейнер всього сайту */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Ліва колонка: номер та input */
.left-column {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Canvas */
#plateCanvas {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* Поле введення тексту */
#plateInput {
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Права колонка: всі налаштування */
.right-column {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Контролі */
.plate-controls, .plate-sliders {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.plate-controls label, .plate-sliders label {
    flex: 1 1 100%;
    font-weight: 500;
}

/* Кнопки */
.size-btn, .color-btn, .font-btn {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    background-color: #eee;
    transition: 0.2s;
}

.size-btn.active, .color-btn.active, .font-btn.active {
    background-color: #111;
    color: #fff;
}

/* Повзунки */
input[type="range"] {
    width: 100%;
}

/* Додаткові відступи для повзунків */
.slider-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 20px;
    }

    .right-column {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .plate-sliders, .plate-controls {
        flex: 1 1 48%;
    }

    #plateCanvas {
        max-width: 100%;
    }
}
/* Нові кольори для кнопок вибору фону та тексту */
.color-btn.red, .font-btn.red { 
    background-color: #cc0000; 
}

.color-btn.blue, .font-btn.blue { 
    background-color: #0033cc; 
}

.color-btn.yellow, .font-btn.yellow { 
    background-color: #ffcc00; 
}

.color-btn.gold, .font-btn.gold { 
    background-color: #c9a227; 
}

.font-btn.orange { 
    background-color: #ff6600; 
}

.font-btn.silver { 
    background-color: #c0c0c0; 
}
/* ---------- POPUP (МОДАЛЬНЕ ВІКНО) ---------- */
.plate-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.plate-popup-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    font-family: inherit;
}

.plate-popup-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

.plate-popup-close:hover {
    color: #111;
}

.plate-popup-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 22px;
    color: #111;
    text-align: center;
}

.plate-popup-content p {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
    font-size: 14px;
}

.plate-popup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plate-popup-form label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: -10px;
}

.plate-popup-form input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

.plate-popup-form input:focus {
    border-color: #111;
}

.confirm-btn {
    background: #111;
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}

.confirm-btn:hover {
    background: #333;
}

.confirm-btn:disabled {
    background: #888;
    cursor: not-allowed;
}
/* =======================================================
   СТИЛІЗАЦІЯ ПІД ДИЗАЙН AVTONOMEROCHEKOFFICIAL.COM
   ======================================================= */

/* Загальний контейнер */
.plate-designer {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    border: 1px solid #f0f0f0;
}

/* Канвас з номером */
#plateCanvas {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: none;
    margin-bottom: 25px;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Заголовки блоків налаштувань */
.control-title {
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Поля вводу (Текст номера, Регіон) */
#plateInput, #regionCode {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: #fafafa;
}

#plateInput:focus, #regionCode:focus {
    border-color: #ffcc00; /* Фірмовий жовтий акцент */
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.15);
}

/* Повзунки (Слайдери) */
.plate-sliders label {
    font-weight: 600;
    color: #444;
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}

.plate-sliders input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: #e0e0e0;
    height: 6px;
    border-radius: 3px;
    outline: none;
    margin-bottom: 18px;
}

.plate-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffcc00;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s;
}

.plate-sliders input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Кнопки вибору розміру таблички */
.size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-btn:hover {
    background: #e8e8e8;
    color: #111;
}

.size-btn.active {
    background: #111;
    color: #ffcc00; /* Чорний фон + жовтий текст */
    border-color: #111;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Кнопки вибору кольору (робимо їх круглими) */
.color-btn, .font-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.color-btn:hover, .font-btn:hover {
    transform: translateY(-3px);
}

.color-btn.active, .font-btn.active {
    border-color: #111;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Випадаючий список шрифтів */
.font-selector {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eaeaea;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none; /* Прибирає стандартну стрілочку в деяких браузерах, можна залишити */
}

.font-selector:focus {
    border-color: #ffcc00;
    outline: none;
}

/* Зображення рамок та логотипів */
#framesList img, #presetImagesList img {
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#framesList img:hover, #presetImagesList img:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ГОЛОВНА КНОПКА ВІДПРАВКИ */
#downloadBtn, .confirm-btn {
    background: #ffcc00; /* Жовтий акцентний колір */
    color: #111;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 18px 30px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(255, 204, 0, 0.4);
    margin-top: 10px;
}

#downloadBtn:hover, .confirm-btn:hover {
    background: #e6b800;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.5);
}

#downloadBtn:disabled, .confirm-btn:disabled {
    background: #ccc;
    color: #666;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .plate-designer {
        padding: 15px;
    }
    #downloadBtn, .confirm-btn {
        padding: 15px 20px;
        font-size: 16px;
    }
}
/* ---------- ФОНОВЕ ЗОБРАЖЕННЯ ТА КОНТРАСТ UI ---------- */
.plate-designer {
    background-image: url('../backgrounds/back/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Щоб підкладка не вилазила за краї */
}

/* Напівпрозора підкладка, щоб текст ідеально читався на строкатому фоні */
.plate-designer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.85); /* Змініть 0.85 на менше число, якщо хочете, щоб фон було видно сильніше */
    z-index: -1;
}

/* Максимальна контрастність шрифтів інтерфейсу */
.plate-designer label, 
.plate-designer .control-title, 
.plate-designer p {
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
}
/* =======================================================
   ФІКСИ ДЛЯ МОБІЛЬНОЇ ВЕРСІЇ ТА ДИЗАЙНУ (v1.4.1)
   ======================================================= */

/* 1. Виправлення вилізання за межі екрану на мобільному */
.plate-designer {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important; /* Запобігає горизонтальному скролу */
}

.plate-designer * {
    box-sizing: border-box !important;
}

.plate-preview-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}



/* 2. Красивий дизайн для поля "Вибрати файли" */
#addImage {
    width: 100% !important;
    max-width: 100% !important;
    font-family: inherit !important;
    color: #555 !important;
    background: #fff !important;
    border: 2px dashed #ccc !important;
    border-radius: 8px !important;
    padding: 10px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
}

#addImage:hover {
    border-color: #ffcc00 !important;
}

/* Стилізація самої кнопочки всередині інпуту */
#addImage::file-selector-button {
    background: #111 !important;
    color: #ffcc00 !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-right: 15px !important;
    transition: background 0.3s !important;
}

#addImage::file-selector-button:hover {
    background: #333 !important;
}

/* 3. Виправлення контекстного меню (щоб було стовпчиком і красивим) */
.image-context-menu {
    position: fixed !important; 
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    display: none; /* JS змінює на flex */
    flex-direction: column !important; /* ПРИМУСОВО стовпчиком */
    min-width: 180px !important;
    z-index: 999999 !important;
    padding: 8px 0 !important;
}

.image-context-menu button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.image-context-menu button:last-child {
    border-bottom: none !important;
}

.image-context-menu button:hover {
    background: #f9f9f9 !important;
}

.image-context-menu .delete-btn-cm {
    color: #ff3b30 !important;
}

.image-context-menu .icon {
    margin-right: 10px !important;
    font-size: 18px !important;
}
/* =======================================================
   БРОНЕБІЙНИЙ ФІКС АДАПТИВНОСТІ (ШИРИНА 100%)
   ======================================================= */

/* 1. Жорстко обмежуємо всі головні контейнери плагіна */
.plate-designer, 
.plate-preview, 
.plate-controls, 
.plate-preview-container {
    width: 100% !important;
    max-width: 100vw !important; /* Не більше ширини вікна */
    box-sizing: border-box !important;
}

#plateCanvas {
    width: auto !important; /* Ось тут головна магія: канвас бере свій реальний розмір */
    max-width: 100% !important; /* Але не вилазить за краї екрана на телефонах */
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
}

/* 3. Дозволяємо всім кнопкам переноситися на новий рядок, щоб вони не розпирали екран */
.size-buttons, 
.color-buttons, 
.font-buttons, 
.font-picker,
#framesList, 
#presetImagesList {
    display: flex !important;
    flex-wrap: wrap !important; /* Ключове правило для мобільних: переносити елементи */
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Поля вводу тексту не повинні вилазити за краї */
#plateInput, #regionCode {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. Запобіжник для всієї сторінки, якщо щось інше вилазить */
body {
    overflow-x: hidden !important;
}
/* =======================================================
   БЛОК КОНТАКТІВ (avtonomerochek) - ПІДВИЩЕНА КОНТРАСТНІСТЬ
   ======================================================= */
.avtonomerochek {
    background: #ffffff;
    border: 2px solid #111; /* Більш різка рамка */
    border-left: 8px solid #ffcc00; /* Товщий фірмовий жовтий акцент */
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Сильніша тінь */
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avtonomerochek:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.avtonomerochek h3 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 22px;
    font-weight: 900; /* Максимальна жирність */
    text-transform: uppercase;
    color: #000; /* Абсолютно чорний */
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0px rgba(255, 204, 0, 0.3); /* Легкий жовтий відблиск */
}

.avtonomerochek p {
    margin: 12px 0;
    font-size: 16px;
    color: #111;
    font-weight: 700; /* Жирніший текст */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.avtonomerochek a {
    text-decoration: none;
    font-weight: 800; /* Жирніші посилання */
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
    border: 1px solid #111; /* Рамка навколо кнопок */
}

/* Посилання на сайт (Яскраво Жовтий) */
.avtonomerochek a[href^="http"] {
    background: #ffcc00;
    color: #000;
}

.avtonomerochek a[href^="http"]:hover {
    background: #e6b800;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
}

/* Номер телефону (Контрастний Чорний) */
.avtonomerochek a[href^="tel:"] {
    background: #000;
    color: #ffcc00;
    letter-spacing: 1px;
}

.avtonomerochek a[href^="tel:"]:hover {
    background: #222;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* =======================================================
   ФІКС: КОМПАКТНІ ПОВЗУНКИ (ДЛЯ ВСІХ ПРИСТРОЇВ)
   ======================================================= */

/* Зменшуємо відступи для десктопу та планшетів */
.plate-sliders {
    gap: 4px !important; /* Було 10px */
}

.plate-sliders label {
    margin-bottom: 2px !important; /* Було 6px */
    font-size: 13px !important;
}

.plate-sliders input[type="range"] {
    margin-bottom: 12px !important; /* Значно зменшуємо порожнечу під повзунком (було 18px) */
}

/* Ще трохи компактніше спеціально для мобільних телефонів */
@media (max-width: 768px) {
    .plate-sliders {
        gap: 4px !important;
    }
    
    .plate-sliders label {
        font-size: 12px !important;
    }
    
    .plate-sliders input[type="range"] {
        margin-bottom: 8px !important;
    }
}
/* =======================================================
   ФІКС ДЛЯ МОБІЛЬНОЇ ВЕРСІЇ: КОМПАКТНІ ВІДСТУПИ МІЖ БЛОКАМИ
   ======================================================= */
@media (max-width: 768px) {
    /* Зменшуємо відстань між самими секціями (Розмір, Рамка, Шрифт і т.д.) */
    .control-group {
        margin-bottom: 12px !important; /* Було 20px */
    }

    /* Відстань між заголовком ("РОЗМІР ТАБЛИЧКИ") та кнопками */
    .control-title {
        margin-bottom: 6px !important; /* Було 12px */
    }

    /* Зменшуємо відступи між текстовими полями */
    #plateInput, #regionCode {
        margin-bottom: 10px !important; /* Було 15px */
    }

    /* Відстань під текстом "Текст номеру" */
    .plate-preview > p {
        margin-bottom: 4px !important;
        margin-top: 10px !important;
    }
}
/* =======================================================
   ФІКС ДЛЯ БІЛИХ КНОПОК (Захист від перефарбовування)
   ======================================================= */
.color-btn.white, .font-btn.white {
    background-color: #ffffff !important; /* Примусово тримаємо білий фон */
    border: 2px solid #dddddd !important; /* Легка сіра рамочка, щоб кнопку було видно на білому фоні */
}

.color-btn.white.active, .font-btn.white.active {
    background-color: #ffffff !important; /* Навіть коли активна - фон білий */
    border: 3px solid #000000 !important; /* Товста чорна рамка при виділенні */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
/* Колір для рожевої кнопки */
.color-btn.rose, .font-btn.rose {
    background-color: #FF007F !important;
}
/* Колір для світло-зеленої кнопки */
.color-btn.lightgreen, .font-btn.lightgreen {
    background-color: #32CD32 !important; /* Яскравий світло-зелений (LimeGreen) */
}
/* Приклад стилізації під ваш інтерфейс */
#download-plate {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff; /* Ваш основний колір */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
    margin-top: 15px;
}

#download-plate:hover {
    background-color: #0056b3;
}
/* =========================================================
   ФІКС: Дизайн кнопки "Завантажити макет" 
   (робимо ідентичною до кнопки "ВІДПРАВИТИ")
   ========================================================= */

/* Застосовуємо до ID кнопки завантаження. 
   Якщо у вас інший ID чи клас (наприклад #downloadBtn), замініть #download-plate на нього */
#download-plate {
    background-color: #ffcc00 !important; /* Жовтий колір фону */
    color: #000000 !important; /* Чорний текст */
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important; /* Внутрішні відступи */
    border: none !important;
    border-radius: 8px !important; /* Заокруглені кути */
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4) !important; /* Жовтувата тінь */
    cursor: pointer !important;
    
    /* Фіксуємо проблему з розтягуванням */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important; 
    min-height: 48px !important; /* Стандартна висота */
    width: auto !important; /* Ширина по контенту */
    
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Анімація при наведенні (кнопка трохи піднімається) */
#download-plate:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.6) !important;
}

/* =========================================================
   Щоб кнопки стояли ідеально рівно в один ряд (опціонально)
   ========================================================= */
/* Якщо вони лежать у спільному div, додайте йому цей клас */
.buttons-wrapper {
    display: flex !important;
    gap: 20px !important; /* Відстань між кнопками */
    align-items: center !important; /* Вирівнювання по центру по вертикалі */
    flex-wrap: wrap !important;
    margin-top: 15px !important;
}
/* =========================================================
   ЖОРСТКИЙ ФІКС РОЗМІРУ ДЛЯ КНОПКИ "ЗАВАНТАЖИТИ МАКЕТ"
   ========================================================= */
#download-plate {
    /* Забороняємо контейнеру розтягувати кнопку по вертикалі та горизонталі */
    align-self: center !important; 
    flex: 0 0 auto !important;
    
    /* Жорстко фіксуємо розміри */
    width: max-content !important; /* Ширина рівно по тексту, не більше */
    min-width: 180px !important; /* Мінімальна ширина, щоб не була занадто вузькою */
    height: 50px !important; /* Фіксована висота (приблизно як у жовтої) */
    max-height: 50px !important;
    margin-bottom: 25px;
    
    /* Прибираємо зовнішні відступи, які можуть її "роздувати" */
    
    /* Рівняємо текст рівно по центру фіксованого блоку */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 25px !important;
}
/* =========================================================
   ФІКС: КНОПКИ В ОДИН РЯД
   ========================================================= */
.plate-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Для мобільних пристроїв */
    gap: 20px !important; /* Ідеальна відстань між кнопками */
    align-items: center !important; /* Вирівнювання по вертикалі */
    justify-content: flex-start !important; /* Змінити на center, якщо хочете їх по центру екрана */
    margin: 20px 0 !important;
    width: 100% !important;
}

/* Прибираємо старі відступи, які можуть заважати */
.plate-action-buttons #downloadBtn,
.plate-action-buttons #download-plate {
    margin: 0 !important; 
}
/* =========================================================
   ФІКС: ІДЕАЛЬНО РІВНІ КНОПКИ ДІЙ
   ========================================================= */

/* Контейнер для кнопок */
.plate-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important; /* Ставимо їх по центру */
    align-items: center !important;
    gap: 70px !important; /* Відстань між кнопками */
    width: 100% !important;
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* Робимо обидві кнопки абсолютно ідентичними */
#downloadBtn,
#download-plate {
    background-color: #ffcc00 !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4) !important;
    cursor: pointer !important;
    
    /* Вирівнювання тексту всередині та фіксація розміру */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 55px !important; /* Однакова висота */
    
    /* Кнопки будуть однакової ширини */
    flex: 1 !important; 
    max-width: 250px !important; /* Щоб не розтягувались на весь екран на ПК */
    
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Анімація наведення для обох кнопок */
#downloadBtn:hover,
#download-plate:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.6) !important;
}

/* На мобільних екранах ставимо їх одна під одною на всю ширину */
@media (max-width: 600px) {
    .plate-action-buttons {
        flex-direction: column !important;
        gap: 15px !important;
    }
    #downloadBtn,
    #download-plate {
        width: 100% !important;
        max-width: 100% !important;
    }
}