/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
a { text-decoration:none; }
.clear { clear:both; }
/*end reset*/

/* body { font-family: 'chevin'; background: #F8F8F8; } */
html, body {
	overflow-x: hidden;
	width: 100%;
	position: relative;
	font-family: 'chevin'; 
	background: #F8F8F8;
	font-size:1em;
	line-height: 1.25em;
}

@font-face { font-family: 'chevin'; src:url(../font/Chevin_Light.ttf); }
@font-face { font-family: 'chevin_bold'; src:url(../font/Chevin_Bold.ttf); }
b { font-family: 'chevin_bold'; }

.wrap {
	width: 95%;
	margin: 0 auto;
}
.content {
	padding: 10px 0;
}

.header-flex-container {
	padding: 0.3% 1.6% 1.3% 1.6%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 98%;
}
.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-left: 20px;
}
.header-actions a {
	display: inline-block;
	padding: 15px;
}
.header-actions img {
	display: block;
	height: auto;
}
.btn-icon img {
	width: 28px !important;
	object-fit: contain;
}
.btn-icon2 img {
	width: 32px !important;
	object-fit: contain;
}

/* Стилі для верхнього закріпленого блоку */
.sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* background-color: #f1f1f1; */
	background-color: #F8F8F8;
	color: white;
	z-index: 1000;
	transition: background-color 0.5s;
}
.sticky-header.scrolled {
	/* background-color: #cecece; */
	background-color: #eeeeee;
}
.sticky-header h1 {
	margin-top: 5px;
	font-size: 1.4em;
	color: #000000;
	text-align:left;
	font-family: 'chevin_bold';
}

.np-container {
	display: flex;
	flex-direction: column; /* Ставимо місто над відділенням */
	gap: 15px;             /* Відступ між полями */
	width: 100%;
	margin-top: 10px;
}

#cityInput, #warehouseSelect {
	width: 100% !important;  /* На всю ширину */
	min-width: 100% !important;
	height: 45px !important;
	padding: 10px 15px !important;
	border: 1px solid #2f2f2f !important;
	border-radius: 8px !important;
	box-sizing: border-box !important; /* Щоб падінги не "роздували" поле */
	display: block !important;
	font-size: 1.0em;
	font-family: 'chevin';
}

/* Прибираємо конфлікт з іншими інпутами групи */
.input-group input#cityInput {
	flex: none !important;
}

.scroll-container {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 0 8px 0px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: flex-start;
	width: fit-content;
}
.scroll-container::-webkit-scrollbar { display: none;}

.interactive-img {
	height: 200px;
	width: auto;
	flex-shrink: 0;
	display: block;
	cursor: pointer;
	transition: transform 0.1s;
	border: 2px solid transparent;
	border-radius: 8px;
	max-width:100%;
}
.interactive-img.selected { border-color: #009e09; } /* #4CAF50 */

.plates-row {
	display: flex;
	flex-direction: column;
	margin: 20px 20px 0 20px;
	gap: 20px;
}
.plate-item {
	box-sizing: border-box;
	width: 80%;
	border: 1px solid #b1b1b1;
	border-radius: 6px;
	padding: 5px 5px 5px 8px;
	cursor: pointer;
	background-color: white;
}
.plate-item:hover { background-color: #f5f5f5; }
.plate-item.selected {
	border: 2px solid #4caf50;
	background-color: #f5f5f5;
	padding: 4px 4px 4px 7px;
}

.input-group { 
	/* display: flex; 
	flex-direction: column; 
	gap: 0; */
	display: grid;
	grid-template-columns: 1fr 1fr; /* По 2 в ряд */
	gap: 10px;
	margin-bottom: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.interactive-img:hover { transform: scale(1.11); position: relative; z-index: 30; }
	.scroll-container {padding: 14px 9px 14px 12px; gap: 6px;}
	.interactive-img {height: 221px; border: 3px solid transparent; position: relative;}
	.plate-item.selected {border: 3px solid #4caf50; padding: 3px 3px 3px 6px;}
	.plates-row {flex-direction: row; margin: 20px 38px 0 38px;}
	.plate-item {width: 33%; }
	.plates-row {gap: 38px; }
	.input-group { display: flex; flex-direction: row; gap: 15px; align-items: flex-start; }
	.input-group input { flex: 1; margin-bottom: 0; }
	.btn-icon img { width: 48px !important; object-fit: contain; }
	.btn-icon2 img { width: 54px !important; object-fit: contain; }
}

@media only screen and (min-width: 900px) {
	.wrap { max-width: 850px; width: auto; margin: 0 auto; }
	.wrap img { max-width: 60%; }
}

.review {
	width:97%;
	padding: 1.5%;
}
.review p{
	font-size:1em;
	padding:7px 0;
	color: #000000;
}
.review p a{
	color: #6A82A4;
	color: #225cb5;
}
.review p a:hover{ color:#B81D22; }
.review a:hover { color:#B81D22; }
.review h3 {
	padding-top: 35px;
	padding-bottom: 5px;
	font-size:1.2em;
	color: gray;
	font-family: 'chevin_bold';
}
.company_address p {
	font-size: 0.825em;
	color: #757575;
	padding: 0.17em 0;
	font-family: chevin;
}
.company_address p span {
	text-decoration: none;
	color: #444;
	color: #6A82A4;
	cursor: pointer;
}
.company_address h5 {
	padding-top: 20px;
	padding-bottom: 5px;
	font-size: 1.0em;
	color: #6A82A4;
	color: gray;
	font-family: chevin_bold;
}
.copy_right {
	text-align: center;
	border-top: 1px solid #EEE;
	padding: 10px 0;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: relative;
}
.copy_right p {
	padding: 1px;
	font-size:0.73em;
	color: #d5d5d5;
}

.arrows {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: white; border: 1px solid #ccc; border-radius: 50%; width: 32px; height: 32px;
	cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 20px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0;
}

h4 {
	margin-top: 1px;
	font-size: 1.0em;
	color: #4e4e4e;
	text-align:left;
	font-family: 'chevin_bold';
}
h4 span { color: #336699; }
h4 small { font-family: 'chevin'; }

#submitBtn {
	display: block;
	margin-left: auto;
	margin-right: 0;
	margin-top: 20px;
	box-shadow:inset 0px 1px 0px 0px #29bbff;
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	border-radius:5px;
	border:2px solid #0688fa;
	cursor:pointer;
	color:#ffffff;
	font-family: 'chevin_bold';
	font-size: 1.15em;
	padding:5px 12px;
	text-decoration:none;
	width: auto;
	min-width: 160px;
}

#submitBtn:hover {
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
}

#submitBtn:disabled {
	border:2px solid #cbd5e0;
	box-shadow:inset 0px 1px 0px 0px #cbd5e0;
	background:linear-gradient(to bottom, #cbd5e0 5%, #cbd5e0 100%);
	background-color:#cbd5e0;
	cursor: not-allowed;
}

/* #submitBtn.error { background-color: #dc3545; } */
.error-text {
	color: rgba(175, 41, 54, 1) !important; /* Червоний колір */
	transition: color 0.3s ease;
}

input[type="text"], 
input[type="tel"], 
input[type="email"], 
textarea {
	font-family: 'chevin_bold';
	width: 100%;              /* Повна ширина контейнера */
	padding: 10px 15px;      /* Відступи всередині */
	margin-bottom: 5px;     /* Відступ між полями */
	background-color: #ffffff;
	border: 1px solid #2f2f2f;
	border-radius: 6px;
	font-size: 1em;
	color: #2f2f2f;          /* Колір тексту при введенні */
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
	outline: none;
}
/* Ефект при натисканні на поле (Focus) */
input:focus, textarea:focus {
	border-color: #0688fa;
	box-shadow: 0 0 0 3px rgba(34, 92, 181, 0.1);
}
/* Стиль для плейсхолдера (підказки всередині) */
::placeholder {
	color: #a0a0a0;
	font-size: 0.9em;
	font-family: 'chevin';
}

/* Головний контейнер Select2 */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #2f2f2f !important;
    border-radius: 6px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* Ефект фокусу (синя рамка як у твоїх форм) */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #0688fa !important;
    box-shadow: 0 0 0 3px rgba(34, 92, 181, 0.1) !important;
}

/* Текст всередині поля */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2f2f2f !important;
    font-family: 'chevin' !important; /* Твій основний шрифт */
    font-size: 1em !important;
    padding-left: 15px !important;
    line-height: normal !important;
}

/* Плейсхолдер ("Оберіть номер відділення") */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #a0a0a0 !important;
    font-family: 'chevin' !important;
    font-size: 0.9em !important;
}

/* Стрілочка вибору */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px !important;
    right: 10px !important;
}

/* Випадаюче вікно */
.select2-dropdown {
    border: 1px solid #2f2f2f !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
}

/* Поле пошуку всередині випадаючого списку */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-family: 'chevin' !important;
}

/* Колір вибраного елемента або при наведенні */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%) !important; /* Колір як у кнопки Замовити */
    color: white !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 0.9em !important;
    padding: 5px !important;
	font-family: 'chevin' !important;
}

/* Стиль для підсвітки помилки в Select2 */
.select2-error + .select2-container .select2-selection {
    border: 2px solid rgba(175, 41, 54, 1) !important;
}


/* 3. Стиль для тексту "placeholder" всередині помилкового поля */
/* Робимо текст червоним з прозорістю 0.5 */
.select2-error + .select2-container .select2-selection__placeholder {
    color: rgba(175, 41, 54, 0.8) !important;
}

/* Якщо місто вже було обране, але є помилка в іншому полі, 
   звичайний текст залишаємо чорним, щоб не плутати */
.select2-error + .select2-container .select2-selection__rendered {
    color: #444;
}

/* Уніфікація шрифту в списку та результатах пошуку */
.select2-results__option {
    font-family: 'chevin' !important;
    font-size: 1em !important;
}

.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr; /* По 2 в ряд */
    gap: 10px;
    margin-bottom: 20px;
}

.payment-item {
    border: 1px solid #363636;
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    background-color: white;
    transition: all 0.1s ease;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-item.selected {
    border: 3px solid #4caf50;
    background-color: #f3f3f3;
    padding: 8px 4px;
}

/* Підсумок замовлення */
.order-summary {
    background: #f9f9f9;
    border: 1px dashed #8d8d8d;
    border-radius: 8px;
    padding: 2px 15px 10px 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease-in-out;
    text-align: left;
    color: #000000;
    line-height: 1.6;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.summary-label { color: #777; font-size: 0.9em; }