/* ============================================================
   MTSP — Оплата і доставка (v2 canon)
   Верстка за docs-claude/mockups/Оплата і доставка v2.html.
   Токени — canon --mtsp-* (tokens.css). Generic-класи скоуплені
   під .mtsp-od-page (немає глобального .container на темі —
   патерн .mtsp-catalog-page / .mtsp-ki-page).
   Бренд-кольори перевізників — хардкод (легітимні марки, НЕ canon).
   ============================================================ */

.mtsp-od-page {
	font-family: var(--mtsp-font-body);
	color: var(--mtsp-gray-800);
}

/* ============ CONTAINER ============ */
.mtsp-od-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* BREADCRUMBS — спільне джерело .mtsp-info-page .breadcrumbs (page-head.css). Корінь несе клас .mtsp-info-page. */

/* ============ PAGE HEAD (світлий — інформаційна сторінка) ============ */
.mtsp-od-page .page-head {
	background: var(--mtsp-gray-50);
	border-bottom: 1px solid var(--mtsp-gray-200);
	padding: 48px 0 40px;
}
.mtsp-od-page .page-head h1 {
	font-family: var(--mtsp-font-display);
	font-size: 40px; font-weight: 600;
	color: var(--mtsp-navy);
	letter-spacing: -1px; line-height: 1.08;
	margin: 0 0 12px;
}
.mtsp-od-page .page-head p {
	color: var(--mtsp-gray-600);
	font-size: 15px; line-height: 1.7;
	max-width: 620px; margin: 0;
}

/* ============ SECTION SHELL (мова каталогу / rsm-v2) ============ */
.mtsp-od-page .section {
	padding: 72px 0;
	border-bottom: 1px solid var(--mtsp-gray-100);
}
.mtsp-od-page .section.compact { padding: 44px 0; }
.mtsp-od-page .section.alt { background: var(--mtsp-gray-50); }
.mtsp-od-page .section:last-of-type { border-bottom: none; }

/* .section-eyebrow / .section-title / .section-header → канон у page-head.css (sitewide) */

/* ============ ЗАМОВЛЕННЯ — order steps ============ */
.mtsp-od-page .order-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}
.mtsp-od-page .order-step {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 24px;
}
.mtsp-od-page .step-num {
	width: 27px; height: 27px;
	background: var(--mtsp-accent);
	color: var(--mtsp-white);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700;
	margin-bottom: 14px;
	flex-shrink: 0;
}
.mtsp-od-page .order-step-body {
	font-size: 14px;
	color: var(--mtsp-gray-600);
	line-height: 1.65;
}
.mtsp-od-page .order-step h4 {
	font-size: 16px; font-weight: 700;
	color: var(--mtsp-navy);
	line-height: 1.35;
	margin: 0 0 8px;
}
.mtsp-od-page .order-step > p {
	font-size: 14px; color: var(--mtsp-gray-600);
	line-height: 1.65; margin: 0;
}
.mtsp-od-page .order-step-body p { margin: 0 0 8px; }
.mtsp-od-page .order-step-body p:last-child { margin-bottom: 0; }
/* tel:/mailto: у ТЕКСТОВОМУ контенті (G_OD shortcode/wysiwyg) — canon-акцент, не синій underline.
   НЕ чіпає .step-contact (плитки — окремий стиль нижче). */
.mtsp-od-page .order-step-body a,
.mtsp-od-page .note-strip a,
.mtsp-od-page .delivery-text a {
	color: var(--mtsp-accent);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}
.mtsp-od-page .order-step-body a:hover,
.mtsp-od-page .note-strip a:hover,
.mtsp-od-page .delivery-text a:hover { border-bottom-color: var(--mtsp-accent); }

/* Крок 1 — контакт-плитки (телефони/email з G62, оператор із префікса) */
.mtsp-od-page .step-contacts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mtsp-od-page .step-contact {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
.mtsp-od-page .step-contact:hover { border-color: var(--mtsp-accent); background: var(--mtsp-accent-soft); }
.mtsp-od-page .step-contact i[data-lucide],
.mtsp-od-page .step-contact svg { width: 16px; height: 16px; color: var(--mtsp-accent); flex-shrink: 0; }
.mtsp-od-page .step-contact .v {
	font-family: var(--mtsp-font-mono);
	font-size: 14px; font-weight: 600;
	color: var(--mtsp-navy);
	white-space: nowrap;
}
.mtsp-od-page .step-contact .h { margin-left: auto; font-size: 11.5px; color: var(--mtsp-gray-400); }

/* ============ NOTE-STRIP ============ */
.mtsp-od-page .note-strip {
	padding: 16px 20px;
	background: var(--mtsp-accent-soft);
	border-left: 3px solid var(--mtsp-accent);
	border-radius: 0 6px 6px 0;
	font-size: 14px; line-height: 1.65;
	color: var(--mtsp-gray-700);
	max-width: 880px;
}
.mtsp-od-page .note-strip strong { color: var(--mtsp-navy); }
.mtsp-od-page .note-strip p { margin: 0; }

/* ============ ОПЛАТА — pay cards ============ */
.mtsp-od-page .pay-group { margin-bottom: 28px; }
.mtsp-od-page .pay-group:last-child { margin-bottom: 0; }
.mtsp-od-page .pay-group > h3 {
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 600;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--mtsp-accent);
	margin: 0 0 14px;
}
.mtsp-od-page .pay-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.mtsp-od-page .pay-card {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 18px 20px;
}
.mtsp-od-page .pay-card-icon { color: var(--mtsp-accent); margin-bottom: 12px; line-height: 0; }
.mtsp-od-page .pay-card-icon i[data-lucide],
.mtsp-od-page .pay-card-icon svg { width: 24px; height: 24px; }
.mtsp-od-page .pay-card h4 {
	font-size: 14.5px; font-weight: 700;
	color: var(--mtsp-navy);
	margin: 0 0 5px; line-height: 1.35;
}
.mtsp-od-page .pay-card p {
	font-size: 12.5px;
	color: var(--mtsp-gray-600);
	line-height: 1.55;
	margin: 0;
}

/* ============ ДОСТАВКА — carriers ============ */
.mtsp-od-page .delivery-text {
	font-size: 15px; color: var(--mtsp-gray-700);
	line-height: 1.75; max-width: 720px;
	margin: 0 0 20px;
}
.mtsp-od-page .delivery-text strong { color: var(--mtsp-navy); }
.mtsp-od-page .carriers-row {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin: 0 0 24px;
}
.mtsp-od-page .carrier {
	display: flex; align-items: center; gap: 12px;
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 14px 20px 14px 14px;
	min-width: 180px;
}
.mtsp-od-page .carrier .mark {
	width: 40px; height: 40px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	color: var(--mtsp-white);
	font-family: var(--mtsp-font-mono);
	font-size: 12px; font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}
.mtsp-od-page .carrier .mark img { width: 100%; height: 100%; object-fit: contain; } /* заділ під SVG-лого */
.mtsp-od-page .carrier .mark i[data-lucide],
.mtsp-od-page .carrier .mark svg { width: 22px; height: 22px; }
/* brand colors — легітимні марки перевізників, НЕ canon-палітра, НЕ чіпати */
.mtsp-od-page .carrier.np .mark  { background: #d52b1e; } /* Нова Пошта */
.mtsp-od-page .carrier.sat .mark { background: #16306b; } /* САТ */
.mtsp-od-page .carrier.del .mark { background: #16a34a; } /* Делівері */
.mtsp-od-page .carrier.sv .mark  { background: var(--mtsp-navy); } /* самовивіз */
.mtsp-od-page .carrier .name { font-size: 14px; font-weight: 700; color: var(--mtsp-navy); }
.mtsp-od-page .carrier .sub { font-size: 12px; color: var(--mtsp-gray-500); }

/* ============ FAQ (акордеон) ============ */
.mtsp-od-page .faq-list { max-width: 880px; }
.mtsp-od-page .faq-item {
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	background: var(--mtsp-white);
	margin-bottom: 10px;
	overflow: hidden;
}
.mtsp-od-page .faq-q {
	width: 100%;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 22px;
	background: none; border: none;
	font-family: inherit;
	font-size: 15px; font-weight: 700;
	color: var(--mtsp-navy);
	text-align: left; cursor: pointer;
}
.mtsp-od-page .faq-q .ind {
	font-family: var(--mtsp-font-mono);
	font-size: 18px; font-weight: 500;
	color: var(--mtsp-accent);
	flex-shrink: 0;
	transition: transform 0.25s;
}
.mtsp-od-page .faq-item.open .faq-q .ind { transform: rotate(45deg); }
.mtsp-od-page .faq-a {
	max-height: 0; overflow: hidden;
	transition: max-height 0.3s ease;
}
.mtsp-od-page .faq-a-inner {
	padding: 0 22px 18px;
	font-size: 14px; color: var(--mtsp-gray-700);
	line-height: 1.7;
}
.mtsp-od-page .faq-a-inner strong { color: var(--mtsp-navy); }
.mtsp-od-page .faq-a-inner p { margin: 0 0 8px; }
.mtsp-od-page .faq-a-inner p:last-child { margin-bottom: 0; }

/* ============ CTA BAND (navy — консультація) ============ */
.mtsp-od-page .cta-band {
	background: linear-gradient(135deg, var(--mtsp-navy) 0%, var(--mtsp-navy-light) 100%);
	color: var(--mtsp-white);
	padding: 40px 0;
	position: relative; overflow: hidden;
}
.mtsp-od-page .cta-band::before {
	content: '';
	position: absolute; top: -80%; right: -5%;
	width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(217, 116, 65, 0.18), transparent 60%);
	pointer-events: none;
}
.mtsp-od-page .cta-band-inner {
	display: flex; justify-content: space-between; align-items: center;
	gap: 32px; flex-wrap: wrap;
	position: relative;
}
.mtsp-od-page .cta-band h3 {
	font-family: var(--mtsp-font-display);
	font-size: 26px; font-weight: 600;
	color: var(--mtsp-white);
	letter-spacing: -0.4px; margin: 0 0 4px;
}
.mtsp-od-page .cta-band p { font-size: 14px; color: rgba(255, 255, 255, 0.72); margin: 0; }
.mtsp-od-page .cta-band-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Кнопка cta-band → глобальний canon .btn.btn--primary.btn--lg (buttons.css, трек E).
   Scoped-копію видалено 2026-07-08. */
.mtsp-od-page .cta-band-phone {
	color: var(--mtsp-white);
	font-family: var(--mtsp-font-mono);
	font-weight: 700; font-size: 16px;
	text-decoration: none; white-space: nowrap;
}
.mtsp-od-page .cta-band-phone:hover { color: var(--mtsp-accent); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.mtsp-od-page .order-steps { grid-template-columns: 1fr; }
	.mtsp-od-page .pay-grid { grid-template-columns: repeat(2, 1fr); }
	.mtsp-od-page .page-head h1 { font-size: 30px; }
}
@media (max-width: 640px) {
	.mtsp-od-page .pay-grid { grid-template-columns: 1fr; }
	.mtsp-od-page .cta-band-inner { flex-direction: column; align-items: flex-start; }
}