/*
 * Curlyhouse — Быстрый заказ.
 * Оформление кнопки и модальной формы.
 */

/* --- Кнопка «Быстрый заказ» ----------------------------------------------
 * Узкая кнопка СПРАВА от «В корзину» — как дополнительная опция, а не вторая
 * равная кнопка. Ширина фиксированная (140 px), поэтому на телефоне она тоже
 * помещается в одну строку с корзиной.
 *
 * 🔴 ПОЧЕМУ СЕЛЕКТОРЫ ТАКИЕ ДЛИННЫЕ. Фон и цвет кнопкам задаёт тема, и делает
 * это в трёх местах:
 *   • style.css            `.button`                    — (0,1,0)
 *   • инлайн nm-custom-styles `.button`                 — (0,1,0), но печатается
 *     на wp_head с приоритетом 100, то есть ПОСЛЕ нашего <link>: при равной
 *     специфичности выигрывает он;
 *   • shop.css             `.product .summary .button`  — (0,3,0), padding 14px.
 * Селектор `.chq-open` — тоже (0,1,0), поэтому он всё проигрывал, и кнопка
 * выглядела чёрной с паддингом 28 px по бокам.
 * Селекторы ниже дают (0,3,1) и (0,4,2) — этого хватает, и `!important` не нужен.
 * Замер победивших правил в реальном браузере: work/audit/probe-button-css.js.
 *
 * Высота: padding 13px + border 1px + line-height 16px = 44 px — ровно как
 * у корзины (padding 14px + line-height 16px, без рамки).
 */

button.chq-open.button.alt,
.woocommerce div.product .summary button.chq-open {
	display: block;
	float: right;
	box-sizing: border-box;
	width: 140px;
	margin: 0;
	padding: 13px 10px;
	background-color: #ffffff;
	border: 1px solid #d0d0d0;
	color: #282828;
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Кнопка «В корзину» отдаёт место быстрому заказу.
   Дочерняя тема держит её на 50 % (`custom.css`, строка 74) — значение, которое
   имело смысл, пока кнопка быстрого заказа была такой же широкой. Перебиваем
   специфичностью (0,4,1) против (0,3,0); `!important` не нужен.
   Эти правила живут в плагине, поэтому при его отключении стили не загрузятся
   и тема вернётся к своему поведению. */
.woocommerce div.product .summary .single_add_to_cart_button {
	width: calc(100% - 152px);
}

button.chq-open.button.alt:hover,
button.chq-open.button.alt:focus,
.woocommerce div.product .summary button.chq-open:hover,
.woocommerce div.product .summary button.chq-open:focus {
	background-color: #282828;
	border-color: #282828;
	color: #ffffff;
}

button.chq-open.button.alt[disabled],
.woocommerce div.product .summary button.chq-open[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* --- Модальное окно ------------------------------------------------------ */

.chq-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.55);
	overflow-y: auto;
}

.chq-overlay[hidden] {
	display: none;
}

body.chq-open-modal {
	overflow: hidden;
}

.chq-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 30px 26px;
	background: #ffffff;
	color: #262626;
	box-sizing: border-box;
}

.chq-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	color: #777777;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.chq-close:hover {
	color: #000000;
}

.chq-modal-title {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --- Что заказывают ------------------------------------------------------
 * Название товара, размер выбранного варианта и его цена — чтобы человек
 * видел, что именно подтверждает, и не звонил «а я думал, это L».
 *
 * Цену WooCommerce отдаёт ГОТОВЫМ HTML (`get_price_html()`), поэтому для
 * товара со скидкой она придёт как <del>старая</del> <ins>новая</ins> —
 * отсюда правила для del/ins ниже. Форматировать цену в JS нельзя:
 * символ валюты и разделители разрядов задаёт сайт.
 *
 * Фон и полоска слева отделяют «что заказываю» от «как со мной связаться»,
 * не добавляя ещё одной рамки к и без того вложенной форме.
 */
.chq-item {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #f7f7f7;
	border-left: 3px solid #282828;
}

.chq-item .chq-product {
	margin: 0;
	color: #262626;
	font-size: 15px;
	line-height: 1.35;
}

.chq-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

/* Размер и цену скрипт показывает только тогда, когда они известны:
   у простого товара размера нет, и пустая строка там не нужна. */
.chq-item-meta > span[hidden] {
	display: none;
}

.chq-size {
	color: #777777;
}

.chq-price {
	color: #262626;
	font-weight: 600;
}

.chq-price del {
	color: #999999;
	font-weight: 400;
	opacity: 1;
}

.chq-price ins {
	color: #262626;
	text-decoration: none;
}

.chq-field {
	margin: 0 0 14px;
}

.chq-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	color: #262626;
}

.chq-req {
	color: #c0392b;
}

.chq-field input[type="text"],
.chq-field input[type="tel"],
.chq-field input[type="email"],
.chq-field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #dadada;
	background: #ffffff;
	color: #262626;
	font-size: 15px;
	box-sizing: border-box;
}

.chq-field input:focus,
.chq-field textarea:focus {
	border-color: #262626;
	outline: none;
}

/* Подсказка под полем телефона: «Оформление заказа по телефону».
   Мелким серым — чтобы читалась, но не спорила с подписью поля. */
.chq-hint {
	display: block;
	margin-top: 6px;
	color: #777777;
	font-size: 12px;
	line-height: 1.4;
}

.chq-consent label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	line-height: 1.45;
	color: #777777;
}

.chq-consent input {
	margin-top: 2px;
}

/* Ловушка для ботов: поле есть в разметке, но человек его не видит. */
.chq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.chq-actions {
	margin: 18px 0 0;
}

.chq-submit {
	width: 100%;
	padding: 14px 20px;
	background-color: #000000;
	border: 1px solid #000000;
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.chq-submit:hover {
	background-color: #262626;
}

.chq-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.chq-message {
	margin: 14px 0 0;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
}

.chq-message.is-error {
	background: #fdecea;
	border: 1px solid #f5c6c0;
	color: #a3271b;
}

.chq-message.is-success {
	background: #eaf7ee;
	border: 1px solid #bfe3cb;
	color: #226b3c;
}

.chq-modal.is-done .chq-form {
	display: none;
}

@media (max-width: 480px) {
	.chq-modal {
		padding: 26px 20px 20px;
	}

	/* Кнопка быстрого заказа НАМЕРЕННО остаётся узкой и справа: 140 px
	   помещаются в строку с корзиной даже на 320 px (корзине остаётся 138 px,
	   а надписи «В корзину» нужно ~113 px). Растягивать её во всю ширину
	   не нужно — иначе она снова станет «второй корзиной». */
}