/* =========================================================================
   Financing page (page-financing.php) — light, warm, on-brand.
   The hero base comes from the theme's own `.page-hero` (css/pages.css); this
   stylesheet only adds the financing-specific bits and keeps everything on the
   site color scheme via --ui-* / --bs-* variables (orange on this install).
   ====================================================================== */

/* ============================== HERO add-ons ============================== */
/* (.page-hero supplies the cream bg, orange accent bar, kicker, title, lede) */
.page-hero.financing-hero { margin-bottom: 0; }
.financing-hero .financing-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.5rem;
}
.financing-hero__cta .btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.financing-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}
.financing-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ui-ink-soft, #475569);
}
.financing-hero__trust .bi { color: var(--ui-primary, #dc3545); font-size: 1rem; }

.financing-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 1.2rem 0 0;
	font-size: .98rem;
	color: var(--ui-ink-soft, #475569);
}
.financing-hero__phone .bi { color: var(--ui-primary, #dc3545); }
.financing-hero__phone a { color: var(--ui-ink, #0f172a); font-weight: 700; text-decoration: none; }
.financing-hero__phone a:hover { color: var(--ui-primary, #dc3545); text-decoration: underline; }

/* Hero split: text left, shiny card right */
.financing-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.financing-hero__content { max-width: 620px; }
.financing-hero__visual { display: flex; justify-content: center; }

/* ===================== PETLAND CREDIT CARD (shiny) ===================== */
.pl-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 1.585 / 1;
	border-radius: 18px;
	padding: clamp(1rem, 2.4vw, 1.55rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	background:
		radial-gradient(130% 150% at 88% -10%, rgba(242, 99, 34, .6), transparent 52%),
		linear-gradient(135deg, #2c313a 0%, #15181e 58%, #0b0d11 100%);
	box-shadow: 0 26px 54px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .12);
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease;
}
.pl-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .1);
	pointer-events: none;
}
.pl-card:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }

.pl-card__shine {
	position: absolute;
	top: -60%;
	left: -60%;
	width: 80%;
	height: 220%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .14) 58%, transparent 100%);
	pointer-events: none;
	z-index: 0;
	animation: pl-card-shine 6.5s ease-in-out infinite;
}
@keyframes pl-card-shine {
	0%, 100% { transform: rotate(18deg) translateX(-70%); opacity: 0; }
	42%, 58% { opacity: 1; }
	50% { transform: rotate(18deg) translateX(240%); opacity: 1; }
}
.pl-card > * { position: relative; z-index: 1; }

.pl-card__head { display: flex; flex-direction: column; gap: .9rem; }
.pl-card__top { display: flex; align-items: center; gap: .55rem; }
.pl-card__logo { width: 34px; height: 34px; flex: none; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.pl-card__brand { display: flex; flex-direction: column; line-height: 1; font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; }
.pl-card__brand small { margin-top: 4px; font-size: .54rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }

.pl-card__chip {
	position: relative;
	width: 44px;
	height: 33px;
	border-radius: 7px;
	background: linear-gradient(135deg, #f7d98a 0%, #d9a83f 52%, #b07d23 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -2px 3px rgba(120, 80, 10, .5);
}
.pl-card__chip::before { content: ""; position: absolute; inset: 6px 8px; border: 1px solid rgba(120, 80, 10, .45); border-radius: 3px; }
.pl-card__chip::after { content: ""; position: absolute; top: 50%; left: 4px; right: 4px; height: 1px; background: rgba(120, 80, 10, .45); }

.pl-card__number {
	display: flex;
	gap: .65rem;
	font-size: clamp(.9rem, 1.7vw, 1.18rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.pl-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pl-card__field small { display: block; margin-bottom: 2px; font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pl-card__field strong { font-size: .82rem; font-weight: 700; letter-spacing: .05em; }
.pl-card__field--right { text-align: right; }

/* ============================ HOW IT WORKS ============================ */
.financing-steps { padding: clamp(1.15rem, 2.6vw, 1.9rem) 0; background: var(--ui-surface, #fff); }
.financing-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}
.financing-steps__item {
	position: relative;
	text-align: center;
	padding: 2rem 1.25rem 1.5rem;
	background: var(--ui-surface-sunken, #f8fafc);
	border: 1px solid var(--ui-border, #e2e8f0);
	border-radius: var(--ui-radius, 14px);
}
.financing-steps__num {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: .9rem;
	color: #fff;
	background: var(--ui-primary, #dc3545);
	box-shadow: var(--ui-shadow, 0 4px 14px rgba(15, 23, 42, .12));
}
.financing-steps__icon { display: block; margin-bottom: .5rem; font-size: 1.9rem; color: var(--ui-primary, #dc3545); }
.financing-steps__title { margin: .25rem 0 .4rem; font-size: 1.12rem; font-weight: 800; color: var(--ui-ink, #0f172a); }
.financing-steps__text { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--ui-ink-soft, #475569); }

/* ========================= AVAILABLE PUPPIES ========================= */
.financing-puppies { padding: clamp(1.15rem, 2.6vw, 1.9rem) 0; background: var(--ui-surface, #fff); scroll-margin-top: 80px; }
.financing-puppies .section-title { margin-bottom: 1rem; }
.financing-steps .section-title,
.financing-puppies .section-title { margin-top: .25rem !important; }

/* =========================== APPLY / CARD =========================== */
.financing-apply { padding: clamp(1.15rem, 2.6vw, 1.9rem) 0; background: var(--ui-surface, #fff); }
.financing-apply__card {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border-radius: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #faf3ef 100%);
	border: 1px solid var(--ui-border, #e2e8f0);
	box-shadow: var(--ui-shadow-lift, 0 10px 25px -8px rgba(15, 23, 42, .15));
}
.financing-apply__title { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--ui-ink, #0f172a); }
.financing-apply__intro { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.55; color: var(--ui-ink-soft, #475569); }
.financing-apply__benefits { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.financing-apply__benefits li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; color: var(--ui-ink, #0f172a); }
.financing-apply__benefits .bi { margin-top: .15rem; color: var(--ui-primary, #dc3545); }
.financing-apply__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; }
.financing-apply__fallback { max-width: 40ch; font-size: .9rem; color: var(--ui-ink-soft, #475569); }
.financing-apply__fallback a { color: var(--ui-primary, #dc3545); font-weight: 600; text-decoration: underline; }
.financing-apply__visual { display: flex; justify-content: center; }
.financing-apply__visual .pl-card { max-width: 360px; }
.financing-apply__disclaimer {
	margin: 1.5rem auto 0;
	max-width: 900px;
	text-align: center;
	font-size: .76rem;
	line-height: 1.5;
	color: var(--ui-ink-faint, #94a3b8);
}

/* =========================== REASSURANCE =========================== */
.financing-help {
	padding: clamp(1rem, 2.3vw, 1.5rem) 0;
	background: var(--ui-surface-sunken, #f8fafc);
	border-top: 1px solid var(--ui-border, #e2e8f0);
}
.financing-help__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	justify-content: space-between;
}
.financing-help__title { margin: 0 0 .4rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; color: var(--ui-ink, #0f172a); }
.financing-help__text { margin: 0; max-width: 60ch; line-height: 1.55; color: var(--ui-ink-soft, #475569); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 991px) {
	.financing-hero__grid { grid-template-columns: 1fr; }
	.financing-hero__content { max-width: none; }
	.financing-hero__visual { order: 2; }
	.financing-hero__visual .pl-card { max-width: 380px; }
	.financing-apply__card { grid-template-columns: 1fr; }
	.financing-apply__visual { order: -1; }
}
@media (max-width: 767px) {
	/* Compact the section + turn the 3 steps into a smooth swipe carousel so the
	   pets come up higher on the page. */
	.financing-steps { padding: 1rem 0 .85rem; }
	.financing-steps__grid {
		display: flex;
		grid-template-columns: none;
		gap: .85rem;
		margin-top: 1.4rem;
		padding: 18px 2px .85rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.financing-steps__grid::-webkit-scrollbar { display: none; }
	.financing-steps__item {
		flex: 0 0 82%;
		scroll-snap-align: center;
	}
}
@media (max-width: 575px) {
	.financing-hero__cta { gap: .6rem; }
	.financing-hero__cta .btn { width: 100%; justify-content: center; }
	.financing-puppies__all { display: none; }
	.financing-help__inner { flex-direction: column; align-items: flex-start; }
}