* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg-light: #ffffff;
    --primary-dark: #1a3c34;
}

html {
    background-color: #EFEBE0; /* Твій бежевий фон */
    scroll-behavior: smooth;
    /* Повернули стандартну поведінку скролу, бо без неї iOS здається "зламаним" */
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #FFFFFF 0%, #EFEBE0 100%);
    /* Більше ніяких fixed фонів, iOS їх ненавидить */
    
    /* Робимо так, щоб body завжди займав мінімум весь екран */
    min-height: 100vh;
    min-height: 100dvh;
    
    /* ТІЛЬКИ відступ для системної смужки iPhone внизу. Жодних вигаданих 80px! */
    padding-bottom: env(safe-area-inset-bottom);
}

.btn-item {
    text-decoration: none;
    display: block;
}

@font-face {
    font-display: swap; 
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v20-cyrillic_latin-regular.woff2') format('woff2'); 
}

@font-face {
    font-display: swap; 
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v20-cyrillic_latin-700.woff2') format('woff2'); 
}

/* 💥💥💥 ТОЙ САМИЙ ФІКС ДЛЯ ПАНЕЛЕЙ (TOP / BOTTOM) 💥💥💥 */
/* ТІЛЬКИ бокові панелі! Вбиваємо глобальні селектори, які ламали дизайн карток. */
.supplier-form-panel,
.offcanvas {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important; 
    max-height: none !important;
    /* Враховуємо чубчик айфона */
    padding-top: env(safe-area-inset-top);
}

/* ТІЛЬКИ футери модалок/панелей! .product-footer тепер у безпеці. */
.panel-footer,
.modal-footer,
.offcanvas-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}


/* 💥💥💥 ЛІКУЄМО ТВОЮ ЛІТАЮЧУ НИЖНЮ НАВІГАЦІЮ ЗІ СКРІНІВ 💥💥💥 */
/* Увага! Я не знаю точний клас твого меню (bottom-nav чи mobile-nav), тому пишу загальний селектор. 
   Якщо у тебе інший клас - просто додай його сюди! */
nav.bottom-nav, 
.mobile-nav, 
.bottom-navigation {
    position: fixed !important;
    bottom: 0 !important; /* Жорстко прибиваємо до низу */
    left: 0;
    width: 100%;
    z-index: 999;
    /* Обов'язково додаємо відступ для смужки iPhone, щоб іконки не з'їхали вниз */
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: #fff; /* Переконайся, що у меню є фон, інакше дірки будуть просвічувати */
}


/* Глобальне перевизначення стандартних елементів */
input.form-control,
select.form-control,
textarea.form-control {
    border-radius: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

button,
.btn-primary-action,
.btn-secondary {
    border-radius: 100px !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
}

.admin-layout input.form-control,
.admin-layout button {
    border-radius: 100px !important;
    -webkit-appearance: none; 
    appearance: none;
    outline: none;
}

.admin-layout input,
.admin-layout .form-control {
    border-radius: 100px !important; 
    -webkit-appearance: none !important;
    appearance: none !important;
}

.admin-layout button,
.admin-layout .btn-primary-action {
    border-radius: 100px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input, button, select {
    border-radius: 100px !important;
}

.admin-layout input,
.admin-layout button {
    box-sizing: border-box;
    outline: none;
}

.admin-layout input,
.admin-layout select,
.admin-layout button {
    border-radius: 100px !important; 
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid transparent; 
}