/* TODO: перенести на прод
   Мобильная вёрстка магазина (экраны до 767px; на компьютере ничего не меняется):
   - окна покупки: #search_modal (/cross/, header_!_.tpl), #basket-modal (/autopart/, artinf__jsonld_alt.tpl),
     #td-basket-modal (/parts-catalog/, catalogs_tecdoc/templates/tecdoc_buy_modals.tpl);
   - корзина (basket.tpl): у клиентов строки таблиц -> карточки (.bsk-cards, ячейки .bc-*),
     у менеджеров (5, 7) таблица прокручивается внутри .bsk-scroll;
   - заказы (orders_user.tpl): то же самое, .oc-cards / .oc-*, .oc-scroll.
   Подписи в карточках берутся из атрибута data-label ячейки. */

@media (max-width: 767px) {

	/* ---------- окна покупки ---------- */
	#search_modal .modal-dialog,
	#basket-modal .modal-dialog,
	#td-basket-modal .modal-dialog {
		min-width: 0 !important;
		width: auto !important;
		margin: 10px;
	}
	#search_modal .modal-title { font-size: 17px !important; padding-right: 24px; }
	#search_modal #sw_kod_brand,
	#search_modal #sw_price { font-size: 16px !important; }
	#search_modal .not-login table { width: 100%; }
	#search_modal .not-login table td { width: auto !important; }

	#search_modal .modal-footer,
	#basket-modal .modal-footer,
	#td-basket-modal .modal-footer {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	#search_modal .modal-footer .btn,
	#basket-modal .modal-footer .btn,
	#td-basket-modal .modal-footer .btn {
		display: block;
		width: 100%;
		margin: 0 0 8px !important;
		padding: 11px 12px;
		font-size: 15px;
		white-space: normal;
		border-radius: 8px;
	}
	/* «ОК, оформити замовлення» - главная кнопка */
	#search_modal .modal-footer .btn:first-child,
	#basket-modal .modal-footer .btn[data-go-cart="1"],
	#td-basket-modal .modal-footer .btn[data-go-cart="1"] {
		background: #f3d02b;
		border-color: #e6c21c;
		color: #1f2a3a;
		font-weight: 600;
	}
	/* поле количества: 16px, чтобы iPhone не увеличивал страницу при вводе */
	#search_modal input.form-control,
	#basket-modal input.form-control,
	#td-basket-modal input.form-control { font-size: 16px; }

	/* ---------- корзина: кнопки ---------- */
	.bsk-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 6px 0 10px;
	}
	.bsk-actions .btn {
		flex: 1 1 100%;
		margin: 0 !important;
		padding: 10px 12px;
		font-size: 15px;
		border-radius: 8px;
	}
	.bsk-actions .bsk-clear { flex-basis: 100%; }

	/* ---------- таблицы корзины и заказов: прокрутка внутри блока ---------- */
	.bsk-scroll,
	.oc-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		clear: both;
	}

	/* ---------- корзина: карточки ---------- */
	table.bsk-cards {
		display: block;
		float: none;
		min-width: 0 !important;
		width: 100% !important;
		border: 0 !important;
		background: none !important;
		margin: 8px 0 16px !important;
	}
	table.bsk-cards > tbody { display: block; }
	table.bsk-cards tr.bc-head { display: none; }

	table.bsk-cards tr.bc-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
		row-gap: 6px;
		margin: 0 0 10px;
		padding: 10px 12px;
		border: 1px solid #c9d4e6;
		border-radius: 10px;
		background: #fff;
	}
	table.bsk-cards tr.bc-item > td {
		display: block;
		border: 0 !important;
		padding: 0 !important;
		background: none !important;
		text-align: left !important;
		white-space: normal;
	}
	table.bsk-cards td.bc-foto { display: none !important; }

	/* строка 1: [v] № артикул ... [удалить] */
	table.bsk-cards td.bc-chk  { order: 1; }
	table.bsk-cards td.bc-chk input { width: 20px; height: 20px; margin: 0; }
	table.bsk-cards td.bc-num  { order: 2; color: #8a94a6; font-size: 12px; }
	table.bsk-cards td.bc-kod  { order: 3; flex: 1 1 auto; font-size: 16px; font-weight: 600; }
	table.bsk-cards td.bc-del  { order: 4; }
	table.bsk-cards td.bc-del .btn { padding: 6px 10px; }
	/* строка 2-3: бренд, название */
	table.bsk-cards td.bc-brand { order: 5; flex: 1 1 100%; font-size: 13px !important; color: #2f5ca6; font-weight: 600; }
	table.bsk-cards td.bc-name  { order: 6; flex: 1 1 100%; font-size: 14px !important; }
	/* строка 4: срок, направление, отметки */
	table.bsk-cards td.bc-term,
	table.bsk-cards td.bc-dir   { order: 7; font-size: 13px; }
	table.bsk-cards td.bc-ret,
	table.bsk-cards td.bc-sale  { order: 8; }
	/* строка 5: количество / цена / сумма */
	table.bsk-cards td.bc-qty,
	table.bsk-cards td.bc-price,
	table.bsk-cards td.bc-sum {
		order: 10;
		flex: 1 1 0;
		min-width: 0;
		font-size: 15px;
		padding-top: 6px !important;
		border-top: 1px solid #eef3fb !important;
	}
	table.bsk-cards td.bc-sum { font-weight: 700; }
	table.bsk-cards td.bc-qty input {
		width: 70px !important;
		height: 34px !important;
		font-size: 16px !important;
		text-align: center;
	}
	table.bsk-cards td.bc-x   { order: 11; flex: 1 1 100%; font-size: 13px; background: none !important; }
	/* строка 6: комментарий */
	table.bsk-cards td.bc-cmt { order: 12; flex: 1 1 100%; }
	/* перенос строки перед «Кількість / Ціна / Сума» */
	table.bsk-cards tr.bc-item::after,
	table.oc-cards tr.oc-item::after {
		content: "";
		order: 9;
		flex: 0 0 100%;
		height: 0;
	}
	table.bsk-cards td.bc-cmt input {
		width: 100% !important;
		height: 34px !important;
		font-size: 16px !important;
	}

	/* подписи */
	table.bsk-cards td.bc-qty::before,
	table.bsk-cards td.bc-price::before,
	table.bsk-cards td.bc-sum::before,
	table.bsk-cards td.bc-x[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		font-weight: 400;
		color: #8a94a6;
	}
	table.bsk-cards td.bc-term::before,
	table.bsk-cards td.bc-dir::before {
		content: attr(data-label) ": ";
		color: #8a94a6;
	}
	table.bsk-cards td.bc-cmt::before {
		content: "\041A\043E\043C\0435\043D\0442\0430\0440";
		display: block;
		margin-bottom: 2px;
		font-size: 11px;
		color: #8a94a6;
	}

	/* итоговые строки и общие управляющие строки */
	table.bsk-cards tr.bc-total {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
		padding: 8px 2px;
	}
	table.bsk-cards tr.bc-total > td {
		display: block;
		border: 0 !important;
		padding: 0 !important;
		background: none !important;
		text-align: left !important;
	}
	table.bsk-cards tr.bc-total > td:empty { display: none; }

	/* ---------- корзина: параметры доставки (за замовчуванням / разова / getdost) ----------
	   строки показывает и скрывает скрипт корзины (display: table-row / none), поэтому трогаем только ячейки:
	   подпись над полем, поля во всю ширину */
	#dd_settings table,
	#od_settings,
	#getdost_settings {
		width: 100% !important;
		min-width: 0 !important;
	}
	#dd_settings table td,
	#od_settings td,
	#getdost_settings td {
		display: block;
		width: auto !important;
		padding: 2px 0 !important;
	}
	#dd_settings select,
	#od_settings select,
	#getdost_settings select,
	#dd_settings input.form-control,
	#od_settings input.form-control,
	#getdost_settings input.form-control {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100%;
		height: 36px !important;
		font-size: 16px !important;
	}
	/* «Відділення: [Виберіть: select , або вкажіть: номер]» - в несколько строк */
	#dd_settings .input-group,
	#od_settings .input-group,
	#getdost_settings .input-group {
		display: flex !important;
		flex-wrap: wrap;
		width: 100% !important;
		height: auto !important;
	}
	#dd_settings .input-group > *,
	#od_settings .input-group > *,
	#getdost_settings .input-group > * {
		float: none;
		border-radius: 4px !important;
	}
	#dd_settings .input-group > .input-group-addon,
	#od_settings .input-group > .input-group-addon,
	#getdost_settings .input-group > .input-group-addon {
		display: flex;
		align-items: center;
		width: auto;
		height: 36px !important;
	}
	#dd_settings .input-group > .input-group-addon:first-child,
	#od_settings .input-group > .input-group-addon:first-child,
	#getdost_settings .input-group > .input-group-addon:first-child { display: none; }
	#dd_settings .input-group > select,
	#od_settings .input-group > select,
	#getdost_settings .input-group > select { flex: 1 1 100%; order: -1; }
	#dd_settings .input-group > input.form-control,
	#od_settings .input-group > input.form-control,
	#getdost_settings .input-group > input.form-control { flex: 1 1 70px; width: auto !important; }
	#dd_settings textarea,
	#od_settings textarea,
	#getdost_settings textarea { width: 100% !important; max-width: 100%; font-size: 16px; }

	/* подсказки (i) в корзине: скрытая подсказка шириной 500px растягивала страницу;
	   на телефоне показываем её панелью внизу экрана */
	#bask .tooltip_i .tooltip_itext {
		position: fixed;
		top: auto;
		bottom: 16px;
		left: 16px;
		right: 16px;
		min-width: 0;
		max-width: none !important;
		width: auto;
		z-index: 1060;
		box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	}

	/* ---------- заказы: карточки ---------- */
	table.oc-cards {
		display: block;
		border: 0 !important;
		background: none !important;
	}
	table.oc-cards > thead { display: none; }
	table.oc-cards > tbody { display: block; }
	table.oc-cards tr.oc-item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 12px;
		row-gap: 4px;
		margin: 0 0 10px;
		padding: 10px 12px;
		border: 1px solid #c9d4e6;
		border-radius: 10px;
	}
	table.oc-cards tr.oc-item > td {
		display: block;
		border: 0 !important;
		padding: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		background: none !important;
		white-space: normal;
	}
	table.oc-cards td.oc-foto { display: none !important; }

	table.oc-cards td.oc-date  { order: 1; flex: 1 1 auto; font-size: 12px; color: #4a5568; }
	table.oc-cards td.oc-num   { order: 2; font-size: 13px; }
	table.oc-cards td.oc-kod   { order: 4; font-size: 16px; }
	table.oc-cards td.oc-brand { order: 5; flex: 1 1 auto; font-size: 13px; color: #2f5ca6; font-weight: 600; }
	table.oc-cards td.oc-name  { order: 6; flex: 1 1 100%; font-size: 14px; }
	table.oc-cards td.oc-qty,
	table.oc-cards td.oc-price,
	table.oc-cards td.oc-sum   { order: 7; flex: 1 1 0; font-size: 15px !important; }
	table.oc-cards td.oc-term,
	table.oc-cards td.oc-ves,
	table.oc-cards td.oc-nakl,
	table.oc-cards td.oc-ret   { order: 9; font-size: 13px; }
	table.oc-cards td.oc-ves:has(> b:empty) { display: none; }
	table.oc-cards td.oc-stat  { order: 10; flex: 1 1 100%; font-size: 13px !important; font-weight: 600; }
	table.oc-cards td.oc-cmt   { order: 11; flex: 1 1 100%; font-size: 13px; }
	table.oc-cards td.oc-dost  { order: 12; flex: 1 1 100%; font-size: 12px; }
	/* переносы строк: после даты и номера, после «Кількість / Ціна / Сума» */
	table.oc-cards tr.oc-item::before {
		content: "";
		order: 3;
		flex: 0 0 100%;
		height: 0;
	}
	table.oc-cards tr.oc-item::after { order: 8; }
	table.oc-cards td.oc-dost .dost_l { margin-top: 0 !important; }

	table.oc-cards td.oc-qty::before,
	table.oc-cards td.oc-price::before,
	table.oc-cards td.oc-sum::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 400;
		color: #4a5568;
	}
	table.oc-cards td.oc-num::before,
	table.oc-cards td.oc-term::before,
	table.oc-cards td.oc-ves::before {
		content: attr(data-label) " ";
		color: #4a5568;
	}
}