/* ==========================================================================
   Dreamtails Sarasota — Boutique Thank You templates
   Used by:
     - page-thank-you.php             (.dt-thanks--message)
     - page-thank-you-appointment.php (.dt-thanks--appointment)
   ========================================================================== */

.dt-thanks {
	--dtt-teal:        #3D5155;
	--dtt-teal-deep:   #2a3a3d;
	--dtt-pink:        #d9b2af;
	--dtt-pink-soft:   #eabfbd;
	--dtt-peach:       #EECCAA;
	--dtt-peach-soft:  #f3dcc3;
	--dtt-yellow:      #F1E6B2;
	--dtt-cream:       #fffaf5;
	--dtt-cream-soft:  #fef6ed;
	--dtt-cream-deep:  #fef0e2;
	--dtt-ink:         #2a3a3d;
	--dtt-ink-soft:    #6a7a7e;
	--dtt-ink-faint:   #99a3a6;
	--dtt-line:        rgba( 61, 81, 85, .12 );

	background: linear-gradient( 180deg, var( --dtt-cream ) 0%, var( --dtt-cream-soft ) 100% );
	color: var( --dtt-ink );
	overflow: hidden;
}

/* ============== Hero ============== */

.dt-thanks__hero {
	position: relative;
	padding: 4.5rem 1.25rem 4rem;
	text-align: center;
	overflow: hidden;
}

.dt-thanks__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( circle at 18% 24%, rgba( 234, 191, 189, .35 ), transparent 42% ),
		radial-gradient( circle at 82% 22%, rgba( 238, 204, 170, .32 ), transparent 42% ),
		radial-gradient( circle at 50% 100%, rgba( 241, 230, 178, .25 ), transparent 50% );
	pointer-events: none;
	z-index: 0;
}

.dt-thanks__hero > .container {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

.dt-thanks__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem 1.05rem;
	background: linear-gradient( 135deg, var( --dtt-pink-soft ) 0%, var( --dtt-peach ) 100% );
	color: var( --dtt-teal-deep );
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	box-shadow: 0 8px 20px -10px rgba( 217, 178, 175, .55 );
	border: 1px solid rgba( 255, 255, 255, .55 );
}

.dt-thanks__eyebrow i {
	font-size: .82rem;
	color: var( --dtt-pink );
}

/* The big seal — a gradient circle with a check mark, gently bobbing */
.dt-thanks__seal {
	width: clamp( 96px, 14vw, 120px );
	height: clamp( 96px, 14vw, 120px );
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --dtt-teal ) 0%, var( --dtt-teal-deep ) 100% );
	color: var( --dtt-peach );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp( 2.6rem, 5.5vw, 3.6rem );
	box-shadow:
		0 22px 44px -16px rgba( 61, 81, 85, .5 ),
		inset 0 0 0 6px rgba( 255, 255, 255, .12 );
	border: 4px solid #ffffff;
	animation: dt-thanks-bob 4s ease-in-out infinite;
}

.dt-thanks__seal--calendar {
	background: linear-gradient( 135deg, var( --dtt-pink ) 0%, var( --dtt-pink-soft ) 100% );
	color: var( --dtt-teal-deep );
	box-shadow:
		0 22px 44px -16px rgba( 217, 178, 175, .55 ),
		inset 0 0 0 6px rgba( 255, 255, 255, .35 );
}

@keyframes dt-thanks-bob {
	0%, 100% { transform: translateY( 0 ) rotate( -4deg ); }
	50%      { transform: translateY( -8px ) rotate( 4deg ); }
}

@media (prefers-reduced-motion: reduce) {
	.dt-thanks__seal { animation: none; }
}

.dt-thanks__title {
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: clamp( 2.4rem, 5.5vw, 3.6rem );
	font-weight: 400;
	color: var( --dtt-teal-deep );
	margin: 0 0 .85rem;
	line-height: 1.05;
	letter-spacing: -.005em;
}

.dt-thanks__lede {
	font-family: 'Lato', sans-serif;
	color: var( --dtt-ink-soft );
	font-size: 1.05rem;
	max-width: 56ch;
	margin: 0 auto;
	line-height: 1.6;
}

.dt-thanks__lede p {
	margin: 0 0 .75rem;
}

.dt-thanks__lede p:last-child {
	margin-bottom: 0;
}

/* Floating decorative paws */
.dt-thanks__hero-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.dt-thanks__deco-paw {
	position: absolute;
	color: var( --dtt-pink-soft );
	opacity: .5;
	animation: dt-thanks-float 7s ease-in-out infinite;
}

.dt-thanks__deco-paw--1 { top: 12%;  left: 7%;   font-size: 2.2rem; animation-delay: 0s;   }
.dt-thanks__deco-paw--2 { top: 24%;  right: 9%;  font-size: 1.6rem; animation-delay: 1.5s; color: var( --dtt-peach ); }
.dt-thanks__deco-paw--3 { bottom: 22%; left: 12%; font-size: 1.4rem; animation-delay: 3s;   color: var( --dtt-yellow ); }
.dt-thanks__deco-paw--4 { bottom: 14%; right: 14%; font-size: 1.3rem; animation-delay: 4.5s; color: var( --dtt-pink ); }

@keyframes dt-thanks-float {
	0%, 100% { transform: translateY( 0 ) rotate( -10deg ); }
	50%      { transform: translateY( -16px ) rotate( 10deg ); }
}

@media (prefers-reduced-motion: reduce) {
	.dt-thanks__deco-paw { animation: none; }
}

/* ============== Section header (shared) ============== */

.dt-thanks__steps,
.dt-thanks__actions,
.dt-thanks__expect {
	padding: 3.5rem 1.25rem;
}

.dt-thanks__steps-head,
.dt-thanks__actions-head,
.dt-thanks__expect-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 2.5rem;
}

.dt-thanks__steps-eyebrow,
.dt-thanks__actions-eyebrow,
.dt-thanks__expect-eyebrow {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --dtt-pink );
	margin-bottom: .55rem;
}

.dt-thanks__steps-title,
.dt-thanks__actions-title,
.dt-thanks__expect-title {
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: clamp( 1.85rem, 4vw, 2.6rem );
	font-weight: 400;
	color: var( --dtt-teal-deep );
	margin: 0;
	line-height: 1.1;
}

.dt-thanks__expect-lede {
	margin: .85rem auto 0;
	max-width: 56ch;
	color: var( --dtt-ink-soft );
	font-size: 1rem;
	line-height: 1.55;
	font-style: italic;
	font-family: 'Playfair Display', serif;
}

/* ============== Roadmap (numbered steps) ============== */

.dt-thanks__step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	max-width: 760px;
	margin: 0 auto;
}

.dt-thanks__step {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.4rem 1.5rem;
	background: #ffffff;
	border: 1.5px solid var( --dtt-line );
	border-radius: 18px;
	box-shadow: 0 12px 30px -16px rgba( 61, 81, 85, .15 );
	transition: all .3s cubic-bezier( .4, 0, .2, 1 );
	position: relative;
	overflow: hidden;
}

.dt-thanks__step::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient( 180deg, var( --dtt-pink-soft ), var( --dtt-peach ) );
	opacity: 0;
	transition: opacity .25s ease;
}

.dt-thanks__step:hover {
	transform: translateY( -2px );
	border-color: var( --dtt-pink );
	box-shadow: 0 18px 40px -14px rgba( 217, 178, 175, .35 );
}

.dt-thanks__step:hover::before { opacity: 1; }

.dt-thanks__step-num {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --dtt-pink-soft ) 0%, var( --dtt-peach ) 100% );
	color: var( --dtt-teal-deep );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Mollie Glaston', 'Playfair Display', serif;
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1;
	box-shadow: 0 6px 14px -4px rgba( 217, 178, 175, .55 );
}

.dt-thanks__step-body {
	min-width: 0;
}

.dt-thanks__step-title {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --dtt-teal-deep );
	margin-bottom: .25rem;
	line-height: 1.25;
}

.dt-thanks__step-text {
	margin: 0;
	color: var( --dtt-ink-soft );
	font-size: .92rem;
	line-height: 1.55;
}

/* ============== Action cards (3-up) ============== */

.dt-thanks__cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
}

.dt-thanks__card {
	position: relative;
	padding: 1.85rem 1.5rem 1.6rem;
	background: #ffffff;
	border: 1.5px solid var( --dtt-line );
	border-radius: 22px;
	box-shadow: 0 12px 30px -16px rgba( 61, 81, 85, .15 );
	transition: all .3s cubic-bezier( .4, 0, .2, 1 );
	text-align: center;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dt-thanks__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient( 90deg, var( --dtt-pink-soft ), var( --dtt-peach ) );
	opacity: 0;
	transition: opacity .3s ease;
}

.dt-thanks__card:hover {
	transform: translateY( -4px );
	border-color: var( --dtt-pink );
	box-shadow: 0 22px 50px -16px rgba( 61, 81, 85, .25 );
}

.dt-thanks__card:hover::before { opacity: 1; }

.dt-thanks__card--feature {
	background: linear-gradient( 145deg, var( --dtt-cream ) 0%, var( --dtt-cream-soft ) 100% );
	border-color: var( --dtt-pink-soft );
}

.dt-thanks__card--feature::before { opacity: .65; }

.dt-thanks__card-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --dtt-pink-soft ) 0%, var( --dtt-peach ) 100% );
	color: var( --dtt-teal-deep );
	font-size: 1.6rem;
	margin: 0 auto 1.25rem;
	box-shadow: 0 10px 24px -10px rgba( 217, 178, 175, .55 );
	transition: transform .3s ease;
}

.dt-thanks__card:hover .dt-thanks__card-icon { transform: scale( 1.08 ) rotate( -4deg ); }

.dt-thanks__card-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var( --dtt-teal-deep );
	margin: 0 0 .55rem;
	line-height: 1.25;
}

.dt-thanks__card-desc {
	color: var( --dtt-ink-soft );
	font-size: .92rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
	flex: 1;
}

.dt-thanks__card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 0 auto;
	padding: .7rem 1.25rem;
	background: var( --dtt-teal );
	color: #ffffff;
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .03em;
	text-decoration: none;
	transition: all .25s ease;
	width: 100%;
}

.dt-thanks__card-cta:hover {
	background: var( --dtt-teal-deep );
	color: #ffffff;
	gap: .65rem;
}

.dt-thanks__card-cta i { transition: transform .25s ease; }
.dt-thanks__card-cta:hover i { transform: translateX( 3px ); }

/* ============== Expect (visit-only) ============== */

.dt-thanks__expect {
	background: linear-gradient( 145deg, var( --dtt-cream ) 0%, var( --dtt-cream-deep ) 100% );
}

.dt-thanks__expect-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
}

.dt-thanks__expect-card {
	background: #ffffff;
	border: 1.5px solid var( --dtt-line );
	border-radius: 18px;
	padding: 1.5rem 1.4rem 1.4rem;
	box-shadow: 0 10px 24px -14px rgba( 61, 81, 85, .15 );
	transition: all .3s cubic-bezier( .4, 0, .2, 1 );
	text-align: center;
}

.dt-thanks__expect-card:hover {
	transform: translateY( -3px );
	border-color: var( --dtt-pink );
	box-shadow: 0 18px 40px -14px rgba( 217, 178, 175, .35 );
}

.dt-thanks__expect-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --dtt-pink-soft ) 0%, var( --dtt-peach ) 100% );
	color: var( --dtt-teal-deep );
	font-size: 1.35rem;
	margin: 0 auto 1rem;
	box-shadow: 0 8px 18px -6px rgba( 217, 178, 175, .55 );
}

.dt-thanks__expect-card-title {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --dtt-teal-deep );
	margin-bottom: .4rem;
	line-height: 1.25;
}

.dt-thanks__expect-card-text {
	margin: 0;
	color: var( --dtt-ink-soft );
	font-size: .88rem;
	line-height: 1.55;
}

/* ============== Address card (visit-only) ============== */

.dt-thanks__address {
	padding: 1rem 1.25rem 2rem;
}

.dt-thanks__address-card {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.4rem 1.5rem;
	background: linear-gradient( 135deg, var( --dtt-pink-soft ) 0%, var( --dtt-peach ) 100% );
	border-radius: 22px;
	box-shadow: 0 18px 40px -16px rgba( 217, 178, 175, .55 );
	color: var( --dtt-teal-deep );
	flex-wrap: wrap;
}

.dt-thanks__address-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .85 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: var( --dtt-teal-deep );
	box-shadow: 0 8px 18px -6px rgba( 61, 81, 85, .25 );
}

.dt-thanks__address-body {
	flex: 1;
	min-width: 200px;
}

.dt-thanks__address-eyebrow {
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --dtt-teal-deep );
	margin-bottom: .25rem;
	opacity: .8;
}

.dt-thanks__address-line {
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var( --dtt-teal-deep );
	font-style: normal;
	line-height: 1.35;
	margin: 0;
}

.dt-thanks__address-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .6rem 1.15rem;
	background: var( --dtt-teal-deep );
	color: #ffffff;
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	flex-shrink: 0;
	transition: all .25s ease;
	white-space: nowrap;
}

.dt-thanks__address-cta:hover {
	background: #1a2a2d;
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 14px 28px -10px rgba( 61, 81, 85, .55 );
}

/* ============== Quicklinks footer ============== */

.dt-thanks__quicklinks {
	padding: 1rem 1.25rem 4rem;
	text-align: center;
}

.dt-thanks__quicklinks-label {
	font-size: .82rem;
	color: var( --dtt-ink-soft );
	font-style: italic;
	margin: 0 0 .85rem;
	font-family: 'Playfair Display', serif;
}

.dt-thanks__quicklinks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem .65rem;
}

.dt-thanks__quicklinks-list a {
	display: inline-block;
	padding: .35rem .9rem;
	background: rgba( 255, 255, 255, .85 );
	color: var( --dtt-teal-deep );
	border: 1px solid var( --dtt-line );
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s ease;
}

.dt-thanks__quicklinks-list a:hover {
	background: var( --dtt-teal-deep );
	color: #ffffff;
	border-color: var( --dtt-teal-deep );
	transform: translateY( -1px );
}

/* ============== Mobile ============== */

@media (max-width: 575.98px) {
	.dt-thanks__hero { padding: 2.75rem 1rem 2.5rem; }
	.dt-thanks__seal {
		margin-bottom: 1.1rem;
		border-width: 3px;
	}
	.dt-thanks__title { font-size: 2rem; }
	.dt-thanks__lede { font-size: .95rem; }
	.dt-thanks__deco-paw { display: none; }

	.dt-thanks__steps,
	.dt-thanks__actions,
	.dt-thanks__expect { padding: 2.5rem 1rem; }

	.dt-thanks__step {
		padding: 1.15rem 1.1rem;
		gap: .85rem;
	}
	.dt-thanks__step-num { width: 38px; height: 38px; font-size: 1.2rem; }

	.dt-thanks__cards { gap: 1rem; }
	.dt-thanks__card { padding: 1.5rem 1.25rem 1.4rem; border-radius: 18px; }
	.dt-thanks__card-icon { width: 56px; height: 56px; font-size: 1.4rem; }

	.dt-thanks__address-card {
		padding: 1.15rem 1.25rem;
		border-radius: 18px;
		flex-direction: column;
		text-align: center;
	}

	.dt-thanks__address-cta {
		width: 100%;
		justify-content: center;
	}

	.dt-thanks__quicklinks { padding-bottom: 2.5rem; }
}