/**
 * Snowbars Delivery — Front-end styles
 * Тема-независимые стили. Используют CSS custom properties для кастомизации.
 */

/* ─── Variables ────────────────────────────────────────────────────────────── */
:root {
	--sb-color-primary:    #1a73e8;
	--sb-color-primary-h:  #1558b0;
	--sb-color-secondary:  #f8f9fa;
	--sb-color-border:     #dee2e6;
	--sb-color-error:      #d32f2f;
	--sb-color-success:    #1b5e20;
	--sb-color-success-bg: #e8f5e9;
	--sb-color-text:       #212529;
	--sb-color-muted:      #6c757d;
	--sb-radius:           6px;
	--sb-shadow:           0 2px 8px rgba(0,0,0,.08);
}

/* ─── Обёртка формы ────────────────────────────────────────────────────────── */
.sb-form-wrap {
	max-width: 900px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--sb-color-text);
}

.sb-form-title {
	margin-bottom: 24px;
	font-size: 1.5rem;
}

/* ─── Сетка двух колонок ───────────────────────────────────────────────────── */
.sb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

@media (max-width: 680px) {
	.sb-form-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Fieldset ─────────────────────────────────────────────────────────────── */
.sb-fieldset {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius);
	background: #fff;
}

.sb-fieldset--params {
	background: var(--sb-color-secondary);
}

.sb-legend {
	font-weight: 600;
	font-size: 1rem;
	padding: 0 8px;
	color: var(--sb-color-text);
}

/* ─── Поле ─────────────────────────────────────────────────────────────────── */
.sb-field {
	margin-bottom: 16px;
	position: relative;
}

.sb-field:last-child {
	margin-bottom: 0;
}

.sb-field label {
	display: block;
	margin-bottom: 6px;
	font-size: .875rem;
	font-weight: 500;
}

.sb-field input[type="text"],
.sb-field input[type="tel"],
.sb-field input[type="number"],
.sb-field input[type="email"],
.sb-field input[type="datetime-local"],
.sb-field textarea,
.sb-field select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius);
	font-size: .9375rem;
	font-family: inherit;
	color: var(--sb-color-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s;
}

.sb-field input:focus,
.sb-field textarea:focus,
.sb-field select:focus {
	outline: none;
	border-color: var(--sb-color-primary);
	box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.sb-field--error input,
.sb-field--error textarea,
.sb-field--error select {
	border-color: var(--sb-color-error);
}

.sb-field-error {
	display: none;
	color: var(--sb-color-error);
	font-size: .8125rem;
	margin-top: 4px;
}

.sb-field-error:not(:empty) {
	display: block;
}

.sb-required {
	color: var(--sb-color-error);
	margin-left: 2px;
}

/* ─── Ряд полей ─────────────────────────────────────────────────────────────── */
.sb-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
}

.sb-form-row--calc {
	align-items: flex-start;
}

.sb-field--small  { flex: 0 0 120px; }
.sb-field--medium { flex: 1 1 180px; }
.sb-field--grow   { flex: 1 1 200px; }

.sb-field--inline {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.sb-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: .9375rem;
}

/* ─── Кнопки ───────────────────────────────────────────────────────────────── */
.sb-form-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.sb-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 24px;
	border: none;
	border-radius: var(--sb-radius);
	font-size: 1rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, opacity .15s;
	text-decoration: none;
}

.sb-btn--primary {
	background: var(--sb-color-primary);
	color: #fff;
}

.sb-btn--primary:hover {
	background: var(--sb-color-primary-h);
}

.sb-btn--primary:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.sb-btn--secondary {
	background: transparent;
	color: var(--sb-color-primary);
	border: 2px solid var(--sb-color-primary);
}

.sb-btn--secondary:hover {
	background: rgba(26,115,232,.06);
}

.sb-form-hint {
	font-size: .75rem;
	color: var(--sb-color-muted);
	margin: 0;
	width: 100%;
}

/* ─── Spinner ──────────────────────────────────────────────────────────────── */
.sb-form-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(26,115,232,.3);
	border-top-color: var(--sb-color-primary);
	border-radius: 50%;
	animation: sb-spin .7s linear infinite;
}

@keyframes sb-spin {
	to { transform: rotate(360deg); }
}

/* ─── Успех ────────────────────────────────────────────────────────────────── */
.sb-form-success {
	background: var(--sb-color-success-bg);
	border: 1px solid #a5d6a7;
	border-radius: var(--sb-radius);
	padding: 24px;
	text-align: center;
	margin-bottom: 16px;
}

.sb-success-icon {
	font-size: 2.5rem;
	color: var(--sb-color-success);
	margin-bottom: 8px;
}

.sb-success-message {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--sb-color-success);
	margin: 0 0 8px;
}

.sb-success-waybill,
.sb-success-price {
	margin: 4px 0;
	color: var(--sb-color-text);
}

/* ─── Баннер ошибки ─────────────────────────────────────────────────────────── */
.sb-form-error-banner {
	background: #ffebee;
	border: 1px solid #ef9a9a;
	border-radius: var(--sb-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
}

.sb-form-error-banner p {
	margin: 0;
	color: var(--sb-color-error);
}

/* ─── Результат калькулятора ────────────────────────────────────────────────── */
.sb-calc-result {
	margin-top: 20px;
	padding: 20px 24px;
	background: #e3f2fd;
	border: 1px solid #90caf9;
	border-radius: var(--sb-radius);
}

.sb-calc-result-inner {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.sb-calc-route {
	display: block;
	width: 100%;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sb-color-text);
	margin-bottom: 4px;
}

.sb-calc-label {
	font-size: 1rem;
	color: var(--sb-color-muted);
}

.sb-calc-price {
	font-size: 1.75rem;
	font-weight: 700;
	color: #1565c0;
}

.sb-calc-message {
	font-size: .9375rem;
	color: var(--sb-color-text);
}

.sb-calc-cta {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #90caf9;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.sb-calc-cta p {
	margin: 0;
	font-size: .9375rem;
}

/* ─── Трекинг ──────────────────────────────────────────────────────────────── */
.sb-tracking-input-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.sb-tracking-btn-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 2px; /* Выравнивание с полем ввода */
}

/* Карточка результата */
.sb-track-card {
	margin-top: 20px;
	border: 1px solid var(--sb-color-border);
	border-radius: var(--sb-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--sb-shadow);
}

.sb-track-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid var(--sb-color-border);
}

.sb-track-waybill {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .03em;
	font-family: monospace;
}

/* Бейджи статусов */
.sb-track-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: .8125rem;
	font-weight: 600;
}

.sb-status-new {
	background: #f1f3f4;
	color: #5f6368;
}

.sb-status-in-transit {
	background: #e8f0fe;
	color: #1a73e8;
}

.sb-status-delivered {
	background: #e6f4ea;
	color: #137333;
}

/* Строки данных */
.sb-track-body {
	padding: 16px 20px;
}

.sb-track-row {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f3f4;
}

.sb-track-row:last-child {
	border-bottom: none;
}

.sb-track-label {
	flex: 0 0 110px;
	font-size: .875rem;
	color: var(--sb-color-muted);
}

.sb-track-value {
	font-size: .9375rem;
	color: var(--sb-color-text);
}

/* Маршрут */
.sb-track-route {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sb-track-city-from,
.sb-track-city-to {
	font-weight: 500;
}

.sb-track-arrow {
	color: var(--sb-color-muted);
	font-size: 1rem;
}

/* Не найдено */
.sb-track-not-found {
	margin-top: 16px;
	padding: 16px 20px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: var(--sb-radius);
	color: #6d4c00;
	font-size: .9375rem;
}

/* ─── Honeypot (никогда не показывать) ─────────────────────────────────────── */
.sb-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* ─── Предварительная стоимость в форме заявки ─────────────────────────────── */
.sb-price-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	padding: 14px 20px;
	background: var(--sb-color-success-bg);
	border: 1px solid #a5d6a7;
	border-radius: var(--sb-radius);
	font-size: 1rem;
	line-height: 1.4;
}

.sb-price-preview__route {
	font-weight: 600;
	color: var(--sb-color-text);
	white-space: nowrap;
}

.sb-price-preview__sep {
	color: var(--sb-color-muted);
}

.sb-price-preview__value {
	font-weight: 700;
	color: var(--sb-color-success);
	font-size: 1.125rem;
}

.sb-price-preview__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #a5d6a7;
	border-top-color: var(--sb-color-success);
	border-radius: 50%;
	animation: sb-spin .7s linear infinite;
	flex-shrink: 0;
}


/* ── Pickup interval ─────────────────────────────────────── */
.sb-pickup-interval {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 6px;
}
.sb-pickup-interval__part {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--sb-color-bg, #f5f7fa);
	border: 1px solid var(--sb-color-border, #cfd8dc);
	border-radius: var(--sb-radius, 8px);
	padding: 4px 10px;
}
.sb-pickup-interval__label {
	font-size: 12px;
	color: var(--sb-color-muted, #546e7a);
	white-space: nowrap;
	min-width: 16px;
}
.sb-pickup-interval__part input[type="time"] {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 14px;
	flex: 1;
	min-width: 0;
}