/**
 * Shared visual system: Trade-In / Оплата и доставка / Расширенная гарантия.
 * Эталон: Trade-In (светлый hero + shadcn cards + тёмный CTA где нужен).
 */

.page-template-trade-in-page,
.page-template-delivery-page,
.page-template-extended-warranty-page,
.page-template-preorder-page,
.page-template-about-page,
.page-template-contact-page {
	--svc-border: #e5e7eb;
	--svc-border-hover: #d4d4d8;
	--svc-muted: #6b7280;
	--svc-text: #0a0a0a;
	--svc-soft: #f4f4f5;
	--svc-card: #ffffff;
	--svc-ring: rgba(0, 0, 0, 0.04);
	--svc-ring-hover: rgba(0, 0, 0, 0.08);
	--svc-accent: #ff7316;
	--svc-radius: 12px;
	--svc-radius-lg: 16px;
	--svc-radius-hero: 24px;
	--svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--svc-dur: 180ms;
	--svc-dur-btn: 220ms;
	--svc-lift: -2px;
}

/* ——— Shared hero card ——— */
.tradeInHero-card,
.odHero-card,
.ewHero-card,
.preorderHero-card,
.aboutHero-card,
.ctHero-card {
	position: relative;
	overflow: hidden;
	padding: 72px 48px 56px;
	border-radius: var(--svc-radius-hero);
	text-align: center;
	background:
		radial-gradient(ellipse 80% 60% at 50% -10%, rgba(249, 149, 21, 0.22), transparent 55%),
		radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 115, 22, 0.12), transparent 50%),
		linear-gradient(180deg, #fff8f0 0%, #ffffff 55%, #f7f8fa 100%);
	border: 1px solid rgba(249, 149, 21, 0.18);
}

.tradeInHero-eyebrow,
.odHero-eyebrow,
.ewHero-eyebrow,
.preorderHero-eyebrow,
.aboutHero-eyebrow,
.ctHero-eyebrow {
	margin: 0 0 12px;
	color: var(--svc-accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tradeInHero-title,
.odHero-title,
.ewHero-title,
.preorderHero-title,
.aboutHero-title,
.ctHero-title {
	margin: 0 auto;
	max-width: 920px;
	color: #090909;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 700;
	line-height: 110%;
}

.tradeInHero-title span,
.odHero-title span,
.ewHero-title span,
.preorderHero-title span,
.aboutHero-title span,
.ctHero-title span {
	background: linear-gradient(278deg, #f99515 -7.42%, #ff7316 112.6%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tradeInHero-lead,
.odHero-lead,
.ewHero-lead,
.preorderHero-lead,
.aboutHero-lead,
.ctHero-lead {
	margin: 16px auto 0;
	max-width: 640px;
	color: #333;
	font-size: 18px;
	font-weight: 300;
	line-height: 150%;
}

.tradeInHero-lead p,
.odHero-lead p,
.ewHero-lead p,
.preorderHero-lead p,
.aboutHero-lead p,
.ctHero-lead p {
	margin: 0;
}

.tradeInHero-tags,
.odHero-tags,
.ewHero-tags,
.preorderHero-tags,
.aboutHero-tags,
.ctHero-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.tradeInHero-tag,
.odHero-tag,
.ewHero-tag,
.preorderHero-tag,
.aboutHero-tag,
.ctHero-tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(249, 149, 21, 0.35);
	background: rgba(255, 255, 255, 0.75);
	color: #333;
	font-size: 14px;
	line-height: 120%;
}

/* Чёрная CTA в hero — общий отступ от лида на всех service-страницах */
.tradeInHero-btn,
.odHero-btn,
.ewHero-btn,
.preorderHero .pg-hero__btn,
.aboutHero .pg-hero__btn,
.ctHero .pg-hero__btn,
.tradeInHero .pg-hero__btn,
.odHero .pg-hero__btn,
.ewHero .pg-hero__btn {
	margin: 36px auto 0;
	position: relative;
	z-index: 2;
}

.odHero-btn,
.ewHero-btn {
	text-decoration: none;
	outline: none;
	display: inline-flex;
	align-items: center;
	height: 48px;
	border-radius: 32px;
	background: #090909;
	padding: 0 24px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 120%;
	transition: background var(--svc-dur-btn) var(--svc-ease), color var(--svc-dur-btn) var(--svc-ease);
}

.odHero-btn svg,
.ewHero-btn svg,
.tradeInHero-btn svg,
.preorderHero .pg-hero__btn svg,
.aboutHero .pg-hero__btn svg,
.ctHero .pg-hero__btn svg {
	margin-left: 12px;
	flex-shrink: 0;
	transition: transform var(--svc-dur) var(--svc-ease);
}

/* ——— Shared content card shell ——— */
.svcCard,
.odCard,
.ewStory-item,
.ewBenefits-item,
.ewPlan:not(.is-featured),
.tradeInAbout-main,
.tradeInBenefits-item,
.tradeInPrep-card,
.tradeInProcess-step,
.tradeInCases-item,
.tradeInHardware-aside,
.tradeInFactors-item,
.preorderBenefits-item,
.preorderAbout-main,
.preorderSteps-item,
.aboutMore-main,
.aboutGoal-card,
.ctCards-item,
.ctMeta-card {
	border-radius: var(--svc-radius);
	border: 1px solid var(--svc-border);
	background: var(--svc-card);
	box-shadow: 0 1px 2px var(--svc-ring);
}

.svcSoft,
.odCard--muted,
.tradeInBand,
.tradeInAbout-side {
	background: var(--svc-soft);
	border-radius: var(--svc-radius);
}

/*
 * Interaction tiers (fine pointer only — no sticky hover on touch):
 * 1) .svcLift  — benefit/feature tiles: border + lift
 * 2) .svcTint  — static tiles (cases/steps/stats): border only
 * 3) links/buttons — accent / focus-visible
 */
.svcLift,
.tradeInBenefits-item,
.tradeInCases-item,
.preorderBenefits-item,
.preorderSteps-item,
.ewBenefits-item,
.ewStory-item,
.aboutGoal-card,
.ctCards-item,
.ctMessengers-link {
	transition:
		border-color var(--svc-dur) var(--svc-ease),
		transform var(--svc-dur) var(--svc-ease),
		background-color var(--svc-dur) var(--svc-ease),
		color var(--svc-dur) var(--svc-ease);
}

.svcTint,
.tradeInProcess-step,
.tradeInFactors-item,
.tradeInHardware-aside,
.preorderAbout-main,
.aboutMore-main,
.aboutStats-item,
.ctMeta-card,
.odCard,
.odTile {
	transition: border-color var(--svc-dur) var(--svc-ease);
}

@media (hover: hover) and (pointer: fine) {
	.odHero-btn:hover,
	.ewHero-btn:hover,
	.tradeInHero-btn:hover,
	.preorderHero .pg-hero__btn:hover,
	.aboutHero .pg-hero__btn:hover,
	.ctHero .pg-hero__btn:hover,
	.tradeInHero .pg-hero__btn:hover,
	.odHero .pg-hero__btn:hover,
	.ewHero .pg-hero__btn:hover {
		background: var(--svc-accent);
		color: #fff;
	}

	.odHero-btn:hover svg,
	.ewHero-btn:hover svg,
	.tradeInHero-btn:hover svg,
	.preorderHero .pg-hero__btn:hover svg,
	.aboutHero .pg-hero__btn:hover svg,
	.ctHero .pg-hero__btn:hover svg,
	.tradeInHero .pg-hero__btn:hover svg {
		transform: translateX(3px);
	}

	.svcLift:hover,
	.tradeInBenefits-item:hover,
	.tradeInCases-item:hover,
	.preorderBenefits-item:hover,
	.preorderSteps-item:hover,
	.ewBenefits-item:hover,
	.ewStory-item:hover,
	a.aboutGoal-card:hover,
	.ctCards-item:hover {
		border-color: var(--svc-border-hover);
		transform: translateY(var(--svc-lift));
	}

	.svcTint:hover,
	.tradeInProcess-step:hover,
	.tradeInFactors-item:hover,
	.odTile:hover {
		border-color: var(--svc-border-hover);
	}

	.tradeInBenefits-item:hover .tradeInBenefits-icon,
	.preorderBenefits-item:hover .preorderBenefits-icon,
	.ctCards-item:hover .ctCards-icon {
		transform: scale(1.04);
	}

	.tradeInBenefits-icon,
	.preorderBenefits-icon,
	.ctCards-icon {
		transition: transform var(--svc-dur) var(--svc-ease);
	}

	.ewStory-btn:hover,
	.ewPlan-btn:hover {
		filter: brightness(1.05);
	}

	.ctMessengers-link:hover {
		border-color: rgba(255, 115, 22, 0.45);
		background: #fff;
		color: var(--svc-accent);
	}

	.ctMessengers-link:hover .ctMessengers-ico {
		transform: scale(1.06);
	}

	.ctMessengers-ico {
		transition: transform var(--svc-dur) var(--svc-ease);
	}
}

/* Keyboard / accessibility */
.odHero-btn:focus-visible,
.ewHero-btn:focus-visible,
.tradeInHero-btn:focus-visible,
.preorderHero .pg-hero__btn:focus-visible,
.aboutHero .pg-hero__btn:focus-visible,
.ctHero .pg-hero__btn:focus-visible,
.tradeInHero .pg-hero__btn:focus-visible,
.ewStory-btn:focus-visible,
.ewPlan-btn:focus-visible,
.ewBenefits-link:focus-visible,
a.aboutGoal-card:focus-visible,
.ctMessengers-link:focus-visible,
.ctMap-link:focus-visible,
a.ctCards-value:focus-visible {
	outline: 2px solid var(--svc-accent);
	outline-offset: 3px;
}

/* PageSpeed: skip layout for offscreen sections; keep hero / sliders eager */
.tradeInSection,
.preorderSection,
.aboutSection,
.ctSection,
.ewSection,
.odPage .odCard:not(.odPromo) {
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}

.tradeInHero,
.preorderHero,
.aboutHero,
.ctHero,
.odHero,
.ewHero,
.odPage .odPromo {
	content-visibility: visible;
}

/* Media: decode off main thread where supported */
.ewBenefits-media img,
.ewStory-media img,
.aboutGoal-media img,
.odPromo-img {
	content-visibility: auto;
}

/* ——— Shared section head ——— */
.tradeInHead-label,
.ewHead-label {
	color: var(--svc-accent);
}

.ewHead-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ewHead-title {
	margin: 0;
	color: var(--svc-text);
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 600;
	line-height: 125%;
	letter-spacing: -0.015em;
}

.ewSection {
	padding: 32px 0;
}

/* ——— Shared responsive pass (service pages) ——— */
.page-template-trade-in-page,
.page-template-delivery-page,
.page-template-extended-warranty-page,
.page-template-preorder-page,
.page-template-about-page,
.page-template-contact-page {
	overflow-x: clip;
}

@media (max-width: 1100px) {
	.tradeInHero-title,
	.odHero-title,
	.ewHero-title,
	.preorderHero-title,
	.aboutHero-title,
	.ctHero-title {
		font-size: clamp(30px, 4.5vw, 44px);
	}
}

@media (max-width: 821px) {
	.tradeInHero-card,
	.odHero-card,
	.ewHero-card,
	.preorderHero-card,
	.aboutHero-card,
	.ctHero-card {
		padding: 40px 20px 36px;
	}

	.tradeInHero-lead,
	.odHero-lead,
	.ewHero-lead,
	.preorderHero-lead,
	.aboutHero-lead,
	.ctHero-lead {
		font-size: 16px;
		max-width: 100%;
	}

	.tradeInHero-tags,
	.odHero-tags,
	.ewHero-tags,
	.preorderHero-tags,
	.aboutHero-tags,
	.ctHero-tags {
		gap: 8px;
		margin-top: 22px;
	}

	.tradeInHero-btn,
	.odHero-btn,
	.ewHero-btn,
	.preorderHero .pg-hero__btn,
	.aboutHero .pg-hero__btn,
	.ctHero .pg-hero__btn,
	.tradeInHero .pg-hero__btn,
	.odHero .pg-hero__btn,
	.ewHero .pg-hero__btn {
		margin-top: 28px;
		max-width: 100%;
		height: 46px;
		font-size: 16px;
	}
}

@media (max-width: 560px) {
	.tradeInHero-card,
	.odHero-card,
	.ewHero-card,
	.preorderHero-card,
	.aboutHero-card,
	.ctHero-card {
		padding: 32px 16px 28px;
		border-radius: 18px;
	}

	.tradeInHero-title,
	.odHero-title,
	.ewHero-title,
	.preorderHero-title,
	.aboutHero-title,
	.ctHero-title {
		font-size: clamp(26px, 8vw, 32px);
	}

	.tradeInHero-tag,
	.odHero-tag,
	.ewHero-tag,
	.preorderHero-tag,
	.aboutHero-tag,
	.ctHero-tag {
		font-size: 12px;
		padding: 6px 10px;
	}

	.tradeInHero-btn,
	.odHero-btn,
	.ewHero-btn,
	.preorderHero .pg-hero__btn,
	.aboutHero .pg-hero__btn,
	.ctHero .pg-hero__btn,
	.tradeInHero .pg-hero__btn,
	.odHero .pg-hero__btn,
	.ewHero .pg-hero__btn {
		width: 100%;
		justify-content: center;
	}
}

/* A11y / PageSpeed: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.page-template-trade-in-page *,
	.page-template-delivery-page *,
	.page-template-extended-warranty-page *,
	.page-template-preorder-page *,
	.page-template-about-page *,
	.page-template-contact-page *,
	.page-template-trade-in-page *::before,
	.page-template-delivery-page *::before,
	.page-template-extended-warranty-page *::before,
	.page-template-preorder-page *::before,
	.page-template-about-page *::before,
	.page-template-contact-page *::before,
	.page-template-trade-in-page *::after,
	.page-template-delivery-page *::after,
	.page-template-extended-warranty-page *::after,
	.page-template-preorder-page *::after,
	.page-template-about-page *::after,
	.page-template-contact-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.svcLift:hover,
	.tradeInBenefits-item:hover,
	.tradeInCases-item:hover,
	.preorderBenefits-item:hover,
	.preorderSteps-item:hover,
	.ewBenefits-item:hover,
	.ewStory-item:hover,
	a.aboutGoal-card:hover,
	.ctCards-item:hover {
		transform: none;
	}
}