/*
 * Dream Tails — Financing Banner
 *
 * A financing callout for pet cards and the single pet page, plus the shared
 * modal it opens. Ported from the sister Petland theme and rebuilt on the
 * Dream Tails palette: muted teal, blush, peach, champagne and sage on warm
 * cream, pill shapes, teal-tinted shadows, no pure black.
 *
 * Design notes
 *  · The CTA is a thin underlined link, NOT a pill button. The pet card
 *    already stacks three saturated gradient pills (Call / Get My Details /
 *    Meet Me); a fourth would compete with the actual conversion button. The
 *    underline also reads as a financial product rather than another ad.
 *  · Tabular numerals so any figures line up.
 *  · Five presets, three of which reuse the card buttons' exact gradients so
 *    the banner reads as native rather than bolted on.
 *
 * Loaded by DT_Financing_Banner only on surfaces where a pet card or single
 * pet page can appear, and only when the feature is enabled with a valid
 * Gravity Form chosen.
 */

.dt-fb {
	--dtfb-teal:       #3D5155;
	--dtfb-teal-deep:  #2a3a3d;
	--dtfb-teal-light: #4a6367;
	--dtfb-pink:       #d9b2af;
	--dtfb-pink-soft:  #eabfbd;
	--dtfb-pink-deep:  #efc4c1;
	--dtfb-peach:      #EECCAA;
	--dtfb-peach-soft: #f4d4b1;
	--dtfb-butter:     #F1E6B2;
	--dtfb-sage:       #BCC9C5;
	--dtfb-cream:      #fffaf5;
	--dtfb-cream-soft: #fef6ed;
	--dtfb-ink:        #2a3a3d;
	--dtfb-ink-soft:   #6a7a7e;
	--dtfb-line:       rgba(61, 81, 85, .12);
	--dtfb-line-soft:  rgba(61, 81, 85, .08);
	--dtfb-radius:     14px;
	--dtfb-ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ============================ BANNER (base) ============================ */

/* Own the box model rather than inheriting a global reset — the banner is
   full-width inside a padded card, so a content-box fallback would overflow. */
.dt-fb,
.dt-fb *,
.dt-fb *::before,
.dt-fb *::after { box-sizing: border-box; }

.dt-fb {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	column-gap: .9rem;
	row-gap: .15rem;
	width: 100%;
	margin: .6rem 0 0;
	padding: .7rem .95rem;
	border: 1px solid var(--dtfb-line-soft);
	border-radius: var(--dtfb-radius);
	background: var(--dtfb-cream);
	color: var(--dtfb-ink);
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	font-feature-settings: "tnum" 1, "lnum" 1;
	transition: transform .25s var(--dtfb-ease),
	            box-shadow .25s var(--dtfb-ease),
	            border-color .25s var(--dtfb-ease),
	            background .25s var(--dtfb-ease);
	/* Sit above any card media overlay so the click opens the modal. */
	position: relative;
	z-index: 2;
	overflow: hidden;
	isolation: isolate;
}

.dt-fb:hover,
.dt-fb:focus-visible {
	text-decoration: none;
	color: var(--dtfb-ink);
	transform: translateY(-2px);
}

.dt-fb:focus-visible {
	outline: 2px solid var(--dtfb-teal);
	outline-offset: 2px;
}

/* With an icon the layout flips to three columns: [icon] [copy] [cta]. */
.dt-fb--has-icon {
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: .85rem;
}

.dt-fb__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--dtfb-butter);
	color: var(--dtfb-teal);
	font-size: 1.1rem;
	position: relative;
	transition: transform .25s var(--dtfb-ease);
}

.dt-fb:hover .dt-fb__icon {
	transform: rotate(-6deg) scale(1.06);
}

.dt-fb__eyebrow {
	grid-column: 1;
	grid-row: 1;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--dtfb-teal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dt-fb--has-icon .dt-fb__eyebrow { grid-column: 2; }

.dt-fb__headline {
	grid-column: 1 / -1;
	grid-row: 2;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--dtfb-ink);
}
.dt-fb--has-icon .dt-fb__headline { grid-column: 2 / -1; }

/* Hidden on the card — it lives in the modal footer there. */
.dt-fb__disclaimer { display: none; }

.dt-fb__cta {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: baseline;
	gap: .25rem;
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dtfb-teal);
	white-space: nowrap;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color .25s var(--dtfb-ease), gap .25s var(--dtfb-ease);
}
.dt-fb--has-icon .dt-fb__cta { grid-column: 3; }

.dt-fb__cta .bi {
	font-size: .82em;
	transition: transform .25s var(--dtfb-ease);
}
.dt-fb:hover .dt-fb__cta,
.dt-fb:focus-visible .dt-fb__cta { gap: .4rem; }
.dt-fb:hover .dt-fb__cta .bi,
.dt-fb:focus-visible .dt-fb__cta .bi { transform: translateX(3px); }

/* Sheen sweep element — only rendered when the animation setting is on. */
.dt-fb__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	z-index: 0;
}

/* Keep real content above the sheen so nothing washes out. */
.dt-fb__icon,
.dt-fb__eyebrow,
.dt-fb__headline,
.dt-fb__cta,
.dt-fb__disclaimer { position: relative; z-index: 1; }

/* ============================== PRESETS ============================== */

/* ---- Champagne Ivory (default) ----
   Cream surface, hairline stroke, champagne icon chip. Lowest visual cost. */
.dt-fb--ivory {
	background: var(--dtfb-cream);
	border-color: var(--dtfb-line-soft);
	box-shadow: 0 4px 16px rgba(61, 81, 85, .05);
}
.dt-fb--ivory:hover,
.dt-fb--ivory:focus-visible {
	background: #fff;
	border-color: rgba(238, 204, 170, .85);
	box-shadow: 0 10px 26px rgba(61, 81, 85, .1);
}
.dt-fb--ivory .dt-fb__icon    { background: var(--dtfb-butter); color: var(--dtfb-teal); }
.dt-fb--ivory .dt-fb__eyebrow { color: var(--dtfb-teal); }
.dt-fb--ivory .dt-fb__cta     { color: var(--dtfb-teal); }
.dt-fb--ivory:hover .dt-fb__cta { color: var(--dtfb-teal-deep); }

/* ---- Blush Boutique ---- matches .dt-pet__btn--inquire */
.dt-fb--blush {
	background: linear-gradient(135deg, var(--dtfb-pink) 0%, var(--dtfb-pink-deep) 100%);
	border-color: transparent;
	box-shadow: 0 6px 16px rgba(217, 178, 175, .5);
}
.dt-fb--blush:hover,
.dt-fb--blush:focus-visible {
	background: linear-gradient(135deg, #d8aaa8 0%, #e9bdba 100%);
	box-shadow: 0 12px 26px rgba(217, 178, 175, .65);
}
.dt-fb--blush .dt-fb__icon    { background: rgba(255, 255, 255, .72); color: var(--dtfb-teal); }
.dt-fb--blush .dt-fb__eyebrow { color: var(--dtfb-teal); }
.dt-fb--blush .dt-fb__headline,
.dt-fb--blush .dt-fb__cta     { color: var(--dtfb-teal); }
.dt-fb--blush .dt-fb__disclaimer { color: rgba(61, 81, 85, .78); }

/* ---- Deep Teal ---- matches .dt-pet__btn--call */
.dt-fb--teal {
	background: linear-gradient(135deg, var(--dtfb-teal) 0%, var(--dtfb-teal-light) 100%);
	border-color: transparent;
	color: var(--dtfb-cream);
	box-shadow: 0 6px 16px rgba(61, 81, 85, .28);
}
.dt-fb--teal:hover,
.dt-fb--teal:focus-visible {
	background: linear-gradient(135deg, #2f4044 0%, #3d5155 100%);
	color: var(--dtfb-cream);
	box-shadow: 0 12px 26px rgba(61, 81, 85, .42);
}
.dt-fb--teal .dt-fb__icon       { background: rgba(241, 230, 178, .18); color: var(--dtfb-peach); }
.dt-fb--teal .dt-fb__eyebrow    { color: var(--dtfb-peach); }
.dt-fb--teal .dt-fb__headline   { color: var(--dtfb-cream); }
.dt-fb--teal .dt-fb__cta        { color: var(--dtfb-butter); }
.dt-fb--teal:hover .dt-fb__cta  { color: #fff; }
.dt-fb--teal .dt-fb__disclaimer { color: rgba(255, 250, 245, .75); }
.dt-fb--teal:focus-visible      { outline-color: var(--dtfb-peach); }

/* ---- Sage Chrome ---- borrowed from the header/footer bar */
.dt-fb--sage {
	background: rgba(188, 201, 197, .30);
	border-color: rgba(61, 81, 85, .14);
	box-shadow: 0 4px 16px rgba(61, 81, 85, .05);
}
.dt-fb--sage:hover,
.dt-fb--sage:focus-visible {
	background: rgba(188, 201, 197, .45);
	border-color: rgba(61, 81, 85, .22);
	box-shadow: 0 10px 26px rgba(61, 81, 85, .1);
}
.dt-fb--sage .dt-fb__icon    { background: var(--dtfb-peach); color: var(--dtfb-teal); }
.dt-fb--sage .dt-fb__eyebrow { color: var(--dtfb-teal); }
.dt-fb--sage .dt-fb__cta     { color: var(--dtfb-teal); }

/* ---- Peach Warmth ---- matches .dt-pet__btn--visit */
.dt-fb--peach {
	background: linear-gradient(135deg, var(--dtfb-peach) 0%, var(--dtfb-peach-soft) 100%);
	border-color: transparent;
	box-shadow: 0 6px 16px rgba(238, 204, 170, .55);
}
.dt-fb--peach:hover,
.dt-fb--peach:focus-visible {
	background: linear-gradient(135deg, #e6bc94 0%, #f0c896 100%);
	box-shadow: 0 12px 26px rgba(238, 204, 170, .7);
}
.dt-fb--peach .dt-fb__icon    { background: rgba(255, 255, 255, .68); color: var(--dtfb-teal); }
.dt-fb--peach .dt-fb__eyebrow { color: var(--dtfb-teal); }
.dt-fb--peach .dt-fb__cta     { color: var(--dtfb-teal); }
.dt-fb--peach .dt-fb__disclaimer { color: rgba(61, 81, 85, .78); }

/* ========================== CARD VARIANT ========================== */

.dt-fb--card {
	padding: .6rem .8rem;
}
.dt-fb--card.dt-fb--has-icon { column-gap: .7rem; }
.dt-fb--card .dt-fb__icon     { width: 32px; height: 32px; font-size: .95rem; }
.dt-fb--card .dt-fb__eyebrow  { font-size: .62rem; letter-spacing: .1em; }
.dt-fb--card .dt-fb__headline { font-size: .82rem; }
.dt-fb--card .dt-fb__cta      { font-size: .72rem; }

/* ========================= SINGLE VARIANT ========================= */

.dt-fb--single {
	margin: 0 0 1.25rem;
	padding: 1.15rem 1.35rem 1.25rem;
	row-gap: .35rem;
	border-radius: 18px;
}
.dt-fb--single.dt-fb--has-icon { column-gap: 1rem; }
.dt-fb--single .dt-fb__icon    { width: 46px; height: 46px; font-size: 1.35rem; }
.dt-fb--single .dt-fb__eyebrow { font-size: .72rem; }

/* The single page has room for the display face — matches .dt-deposit-cta. */
.dt-fb--single .dt-fb__headline {
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: -.005em;
}

.dt-fb--single .dt-fb__disclaimer {
	display: block;
	grid-column: 1 / -1;
	grid-row: 3;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: .72rem;
	line-height: 1.45;
	color: var(--dtfb-ink-soft);
}
.dt-fb--single.dt-fb--has-icon .dt-fb__disclaimer { grid-column: 2 / -1; }

.dt-fb--single .dt-fb__cta {
	font-size: .85rem;
	align-self: end;
}

/* ============================== MOBILE ============================== */
/*
 * Cards compress to a single-row strip: [icon] [headline] [arrow]. The eyebrow
 * drops and the CTA loses its label — the headline is the message, everything
 * else is editorial polish there is no room for.
 *
 * The single variant keeps all three rows; it just steps down a notch.
 */
@media (max-width: 575.98px) {

	.dt-fb--card {
		padding: .55rem .75rem;
		row-gap: 0;
		align-items: center;
	}
	.dt-fb--card.dt-fb--has-icon { column-gap: .6rem; }
	.dt-fb--card .dt-fb__icon    { width: 30px; height: 30px; font-size: .9rem; }
	.dt-fb--card .dt-fb__eyebrow { display: none; }
	.dt-fb--card .dt-fb__headline {
		grid-row: 1;
		grid-column: 1 / -1;
		font-size: .78rem;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.dt-fb--card.dt-fb--has-icon .dt-fb__headline { grid-column: 2 / -1; }
	.dt-fb--card .dt-fb__cta {
		grid-row: 1;
		border-bottom: none;
		padding-bottom: 0;
		align-self: center;
	}
	.dt-fb--card .dt-fb__cta-label { display: none; }
	.dt-fb--card .dt-fb__cta .bi   { font-size: .95rem; }

	.dt-fb--single {
		padding: .95rem 1.05rem 1rem;
		row-gap: .25rem;
	}
	.dt-fb--single.dt-fb--has-icon { column-gap: .8rem; }
	.dt-fb--single .dt-fb__icon      { width: 38px; height: 38px; font-size: 1.1rem; }
	.dt-fb--single .dt-fb__eyebrow   { font-size: .65rem; letter-spacing: .14em; }
	.dt-fb--single .dt-fb__headline  { font-size: 1.1rem; }
	.dt-fb--single .dt-fb__disclaimer { font-size: .66rem; }
	.dt-fb--single .dt-fb__cta       { font-size: .78rem; }
}

/* Very narrow card columns — drop the arrow, give the headline the full row. */
@media (max-width: 360px) {
	.dt-fb--card .dt-fb__cta { display: none; }
	.dt-fb--card.dt-fb--has-icon .dt-fb__headline { grid-column: 2 / -1; }
}

/* ============================ ANIMATION ============================ */
/*
 * One coordinated 5s beat, so the eye registers a single quiet moment rather
 * than four competing loops: the icon wiggles, a peach glint pops beside it, a
 * sheen crosses the banner, and the shadow breathes. All four peak together,
 * then ~4s of rest. Pauses on hover. Fully off under reduced-motion.
 */

@keyframes dt-fb-wiggle {
	0%, 84%, 100% { transform: rotate(0) scale(1); }
	86% { transform: rotate(-13deg) scale(1.06); }
	88% { transform: rotate(11deg)  scale(1.06); }
	90% { transform: rotate(-7deg)  scale(1.04); }
	92% { transform: rotate(5deg)   scale(1.03); }
	94% { transform: rotate(-2deg)  scale(1.01); }
}

@keyframes dt-fb-glint {
	0%, 82%, 100% { opacity: 0; transform: scale(0) translate(0, 0); }
	86% { opacity: 1; transform: scale(1) translate(2px, -3px); }
	92% { opacity: 0; transform: scale(.4) translate(9px, -13px); }
}

@keyframes dt-fb-sheen {
	0%, 78%, 100% { transform: translateX(-115%); opacity: 0; }
	82%  { opacity: 1; }
	92%  { transform: translateX(115%); opacity: 0; }
}

@keyframes dt-fb-breathe {
	0%, 100% { box-shadow: 0 4px 16px rgba(61, 81, 85, .05); }
	50%      { box-shadow: 0 6px 22px rgba(238, 204, 170, .55); }
}

@keyframes dt-fb-breathe-teal {
	0%, 100% { box-shadow: 0 6px 16px rgba(61, 81, 85, .28); }
	50%      { box-shadow: 0 6px 26px rgba(241, 230, 178, .4); }
}

.dt-fb--animated { animation: dt-fb-breathe 5s ease-in-out infinite; }

.dt-fb--animated .dt-fb__shine {
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
	animation: dt-fb-sheen 5s ease-in-out infinite;
	will-change: transform, opacity;
}

.dt-fb--animated .dt-fb__icon .bi {
	display: inline-block;
	transform-origin: center;
	animation: dt-fb-wiggle 5s ease-in-out infinite;
	will-change: transform;
}

/* Coin glint — a small peach dot that pops as the icon wiggles. */
.dt-fb--animated .dt-fb__icon::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dtfb-peach);
	box-shadow: 0 0 8px rgba(238, 204, 170, .9);
	opacity: 0;
	pointer-events: none;
	animation: dt-fb-glint 5s ease-in-out infinite;
	will-change: opacity, transform;
	z-index: 2;
}

/* Per-preset recolouring so the beat reads on every surface. */
.dt-fb--animated.dt-fb--teal { animation-name: dt-fb-breathe-teal; }
.dt-fb--animated.dt-fb--teal .dt-fb__shine {
	background: linear-gradient(110deg, transparent 35%, rgba(241, 230, 178, .3) 50%, transparent 65%);
}
.dt-fb--animated.dt-fb--teal .dt-fb__icon::after {
	background: var(--dtfb-butter);
	box-shadow: 0 0 8px rgba(241, 230, 178, .9);
}
.dt-fb--animated.dt-fb--blush .dt-fb__icon::after,
.dt-fb--animated.dt-fb--peach .dt-fb__icon::after {
	background: #fff;
	box-shadow: 0 0 8px rgba(255, 255, 255, .95);
}

/* Hover hands over from the ambient loop to the interactive moment. */
.dt-fb--animated:hover,
.dt-fb--animated:focus-visible { animation-play-state: paused; }
.dt-fb--animated:hover .dt-fb__shine,
.dt-fb--animated:focus-visible .dt-fb__shine { opacity: 0; animation-play-state: paused; }
.dt-fb--animated:hover .dt-fb__icon .bi,
.dt-fb--animated:focus-visible .dt-fb__icon .bi,
.dt-fb--animated:hover .dt-fb__icon::after,
.dt-fb--animated:focus-visible .dt-fb__icon::after { animation-duration: 1.4s; }

/* Smaller glint on the smaller card icon. */
@media (max-width: 575.98px) {
	.dt-fb--animated.dt-fb--card .dt-fb__icon::after { width: 5px; height: 5px; top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.dt-fb,
	.dt-fb--animated,
	.dt-fb--animated .dt-fb__shine,
	.dt-fb--animated .dt-fb__icon,
	.dt-fb--animated .dt-fb__icon .bi,
	.dt-fb--animated .dt-fb__icon::after {
		animation: none !important;
		transition: none !important;
	}
	.dt-fb--animated .dt-fb__shine { display: none; }
	.dt-fb:hover { transform: none; }
}

/* =============================== MODAL =============================== */

/* Same defensive box model as the banner — Gravity Forms ships width:100% on
   its inputs, and we add padding + a border on top of that. */
.dt-fb-modal,
.dt-fb-modal *,
.dt-fb-modal *::before,
.dt-fb-modal *::after { box-sizing: border-box; }

.dt-fb-modal .modal-content,
.dt-fb-modal__content {
	border: none;
	border-radius: 20px;
	overflow: hidden;
	background: #fffaf5;
	font-family: 'Lato', sans-serif;
	font-feature-settings: "tnum" 1, "lnum" 1;
	box-shadow: 0 30px 80px rgba(46, 51, 78, .35), 0 0 0 1px rgba(61, 81, 85, .06);
}

.dt-fb-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 1;
	background-color: #fff;
	border: 1px solid rgba(61, 81, 85, .12);
	border-radius: 999px;
	transition: border-color .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
}
.dt-fb-modal__close:hover {
	border-color: #EECCAA;
	transform: rotate(90deg);
}

.dt-fb-modal__hero {
	position: relative;
	padding: 2.25rem 2rem 1.75rem;
	border-bottom: 1px solid rgba(61, 81, 85, .1);
	background:
		radial-gradient(circle at 12% 20%, rgba(234, 191, 189, .3), transparent 55%),
		radial-gradient(circle at 92% 8%, rgba(238, 204, 170, .32), transparent 55%),
		linear-gradient(145deg, #fffaf5 0%, #fef6ed 100%);
}

.dt-fb-modal__badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: 1rem;
	padding: .4rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .55);
	background: linear-gradient(135deg, #eabfbd 0%, #EECCAA 100%);
	color: #2a3a3d;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 8px 20px -10px rgba(217, 178, 175, .55);
}
.dt-fb-modal__badge .bi { font-size: .9rem; }

.dt-fb-modal__title {
	margin: 0 0 .6rem;
	max-width: 22ch;
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: clamp(1.9rem, 4vw, 2.4rem);
	font-weight: normal;
	line-height: 1.05;
	letter-spacing: -.005em;
	color: #3D5155;
}

.dt-fb-modal__subtitle {
	margin: 0;
	max-width: 52ch;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.5;
	color: #6a7a7e;
}

.dt-fb-modal__body {
	padding: 1.5rem 2rem 1.25rem;
	background: #fffaf5;
}

.dt-fb-modal__benefits {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 1.05rem 1.15rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem 1.25rem;
	background: #fff;
	border: 1px solid rgba(61, 81, 85, .1);
	border-radius: 14px;
}
.dt-fb-modal__benefits li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .88rem;
	line-height: 1.35;
	color: #2a3a3d;
}
.dt-fb-modal__benefits li .bi {
	flex: 0 0 auto;
	margin-top: .12rem;
	font-size: .95rem;
	color: #d9b2af;
}

.dt-fb-modal__pet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .5rem;
	margin: 0 0 1.25rem;
	padding: .8rem .95rem;
	background: #fff;
	border: 1px dashed rgba(61, 81, 85, .18);
	border-radius: 14px;
}
.dt-fb-modal__pet.d-none { display: none !important; }
.dt-fb-modal__pet-context {
	width: 100%;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6a7a7e;
}
.dt-fb-modal__pet-name {
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: 1.35rem;
	font-weight: normal;
	line-height: 1.2;
	color: #3D5155;
}
.dt-fb-modal__pet-ref {
	font-size: .78rem;
	color: #6a7a7e;
	font-variant-numeric: tabular-nums;
}

/* ---- Gravity Form inside the modal ---- */

/* Belt and braces. Gravity Forms hides administrative fields from its own
   basic.min.css with `position:absolute; left:-9999px; visibility:hidden`. If
   that stylesheet ever fails to reach the page, those fields render inline —
   along with GF's "Hidden" admin badge — exposing internal pet data fields
   (Pet ID, Reference ID, Breed…) to the shopper. Hide them here too, so the
   modal is correct even when GF's CSS is missing. */
.dt-fb-modal__form .gfield_visibility_hidden,
.dt-fb-modal__form .gf_invisible,
.dt-fb-modal__form .gform_hidden,
.dt-fb-modal__form .gf_hidden,
.dt-fb-modal__form .admin-hidden-markup { display: none !important; }

.dt-fb-modal__form .gform_wrapper { margin: 0; }
.dt-fb-modal__form .gform_wrapper .gform_title,
.dt-fb-modal__form .gform_wrapper .gform_description { display: none; }

.dt-fb-modal__form .gform_wrapper input[type="text"],
.dt-fb-modal__form .gform_wrapper input[type="email"],
.dt-fb-modal__form .gform_wrapper input[type="tel"],
.dt-fb-modal__form .gform_wrapper input[type="number"],
.dt-fb-modal__form .gform_wrapper input[type="url"],
.dt-fb-modal__form .gform_wrapper select,
.dt-fb-modal__form .gform_wrapper textarea {
	background: #fff;
	border: 1px solid rgba(61, 81, 85, .16);
	border-radius: 12px;
	padding: .7rem .9rem;
	font-size: .95rem;
	color: #2a3a3d;
	transition: border-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}
.dt-fb-modal__form .gform_wrapper input:focus,
.dt-fb-modal__form .gform_wrapper select:focus,
.dt-fb-modal__form .gform_wrapper textarea:focus {
	outline: none;
	border-color: #3D5155;
	box-shadow: 0 0 0 3px rgba(61, 81, 85, .12);
}
.dt-fb-modal__form .gform_wrapper label,
.dt-fb-modal__form .gform_wrapper .gfield_label {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: #2a3a3d;
}

.dt-fb-modal__form .gform_footer { margin-top: 1.1rem; padding-top: 0; }
.dt-fb-modal__form .gform_footer input[type="submit"],
.dt-fb-modal__form .gform_button {
	width: 100%;
	padding: .95rem 1.5rem;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #3D5155 0%, #4a6367 100%) !important;
	color: #fff !important;
	font-family: 'Lato', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 8px 22px rgba(61, 81, 85, .3);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), background .25s cubic-bezier(.4, 0, .2, 1);
}
.dt-fb-modal__form .gform_footer input[type="submit"]:hover,
.dt-fb-modal__form .gform_button:hover {
	background: linear-gradient(135deg, #2f4044 0%, #3d5155 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(61, 81, 85, .4);
}

.dt-fb-modal__footer {
	padding: 1rem 2rem 1.15rem;
	background: #fef0e2;
	border-top: 1px solid rgba(61, 81, 85, .1);
}
.dt-fb-modal__disclaimer {
	display: block;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: .72rem;
	line-height: 1.55;
	color: #6a7a7e;
}

/* ---- Deep Teal modal treatment, so the modal matches the banner ---- */
.dt-fb-modal--teal .dt-fb-modal__hero {
	background:
		radial-gradient(circle at 12% 20%, rgba(241, 230, 178, .16), transparent 55%),
		radial-gradient(circle at 92% 8%, rgba(238, 204, 170, .18), transparent 55%),
		linear-gradient(135deg, #3D5155 0%, #4a6367 100%);
	border-bottom-color: rgba(255, 250, 245, .16);
}
.dt-fb-modal--teal .dt-fb-modal__title    { color: #fffaf5; }
.dt-fb-modal--teal .dt-fb-modal__subtitle { color: rgba(255, 250, 245, .82); }
.dt-fb-modal--teal .dt-fb-modal__badge {
	background: rgba(241, 230, 178, .18);
	border-color: rgba(241, 230, 178, .35);
	color: #F1E6B2;
	box-shadow: none;
}

/* ---- Modal, mobile ---- */
@media (max-width: 767.98px) {
	.dt-fb-modal__hero  { padding: 1.6rem 1.25rem 1.3rem; }
	.dt-fb-modal__title { font-size: 1.65rem; max-width: none; }
	.dt-fb-modal__subtitle { font-size: .92rem; }
	.dt-fb-modal__body  { padding: 1.15rem 1.25rem 1rem; }
	.dt-fb-modal__benefits {
		grid-template-columns: 1fr;
		gap: .55rem;
		margin-bottom: 1.1rem;
		padding: .9rem 1rem;
	}
	.dt-fb-modal__footer { padding: .9rem 1.25rem 1rem; }
	.dt-fb-modal .modal-content,
	.dt-fb-modal__content { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dt-fb-modal__close:hover { transform: none; }
	.dt-fb-modal__form .gform_footer input[type="submit"]:hover,
	.dt-fb-modal__form .gform_button:hover { transform: none; }
}