/* =============================================================
   TTF-002 Therapist Shortlist
   Matches the site design system (single-therapist + SEO cards):
   tokens, circular avatars, gold pill CTAs, soft white cards.
   ============================================================= */

.ttf-heart,
.ttf-shortlist,
.ttf-shortlist-bar {
	--sl-accent:    #F7C845;   /* brand gold */
	--sl-accent-d:  #d9a611;   /* darker gold (hover) */
	--sl-accent-l:  #fef3d4;   /* light gold fill */
	--sl-text:      #1d2530;
	--sl-muted:     #5b6573;
	--sl-line:      #e5e9ee;
	--sl-card:      #ffffff;
	--sl-bg:        #f5f7f9;
	--sl-danger:    #b3261e;
	--sl-radius:    16px;
	--sl-shadow:    0 1px 2px rgba(20, 30, 45, .04), 0 1px 3px rgba(20, 30, 45, .06);
	--sl-shadow-h:  0 10px 28px rgba(20, 30, 45, .10);
}

/* =============================================================
   HEART BUTTON
   Reset hard so the parent theme's global gold <button> styling
   can't bleed in. Base is an icon-only circular control.
   ============================================================= */

button.ttf-heart {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	line-height: 1;
	font: inherit;
	color: var(--sl-text);
	background: var(--sl-card);
	border: 1px solid var(--sl-line);
	border-radius: 50%;
	box-shadow: var(--sl-shadow);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .08s ease;
}
button.ttf-heart:hover { border-color: var(--sl-accent); box-shadow: var(--sl-shadow-h); }
button.ttf-heart:active { transform: scale(.94); }
button.ttf-heart:focus-visible { outline: 2px solid var(--sl-accent-d); outline-offset: 2px; }

.ttf-heart__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: inline-block;
	background: no-repeat center / contain;
	/* outline heart */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6573' stroke-width='2'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.3 2 5 5.2 5c2 0 3.4 1.2 4.3 2.6C10.4 6.2 11.8 5 13.8 5 17 5 18.6 8.3 17 11.7 14.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
	transition: transform .12s ease;
}
button.ttf-heart.is-saved {
	border-color: var(--sl-accent);
	background: var(--sl-accent-l);
}
button.ttf-heart.is-saved .ttf-heart__icon {
	/* filled heart */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F7C845' stroke='%23d9a611' stroke-width='1'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.3 2 5 5.2 5c2 0 3.4 1.2 4.3 2.6C10.4 6.2 11.8 5 13.8 5 17 5 18.6 8.3 17 11.7 14.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
	transform: scale(1.08);
}
.ttf-heart__label { display: none; }   /* icon-only everywhere now */

/* Heart floating on a directory listing card (top-right corner) */
.ttf-has-heart { position: relative; }
button.ttf-heart--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 38px;
	height: 38px;
}
button.ttf-heart--card .ttf-heart__icon { width: 18px; height: 18px; }

/* Heart on the single-therapist profile — small icon beside the name */
.tp-profile .tp-hero-name-row {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
}
button.ttf-heart--profile { width: 40px; height: 40px; flex: 0 0 auto; }
button.ttf-heart--profile .ttf-heart__icon { width: 19px; height: 19px; }

/* =============================================================
   INLINE "N saved" BAR  (top of directory / profile pages)
   A centered gold pill CTA — not an underlined text link.
   ============================================================= */

.ttf-shortlist-bar {
	display: flex;
	justify-content: center;
	padding: 12px 16px;
	margin: 0;
	background: transparent;
}
.ttf-shortlist-bar[hidden] { display: none; }

.ttf-shortlist-bar a,
.ttf-shortlist-bar a:link,
.ttf-shortlist-bar a:visited {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--sl-accent);
	color: var(--sl-text);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: var(--sl-shadow);
	transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.ttf-shortlist-bar a:hover {
	background: var(--sl-accent-d);
	color: var(--sl-text);
	text-decoration: none !important;
	box-shadow: var(--sl-shadow-h);
}
.ttf-shortlist-bar a:active { transform: translateY(1px); }
.ttf-shortlist-bar__heart { color: var(--sl-text); font-size: 16px; line-height: 1; }
/* nudge the trailing arrow on hover */
.ttf-shortlist-bar a { transition: background .15s ease, box-shadow .15s ease; }

/* =============================================================
   SHORTLIST PAGE  ( [ttf_shortlist] on /my-shortlist/ )
   ============================================================= */

.ttf-shortlist {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 4px 16px 64px;
	color: var(--sl-text);
	min-height: 46vh;          /* keeps the footer from riding up when sparse */
}
.ttf-shortlist *,
.ttf-shortlist *::before,
.ttf-shortlist *::after { box-sizing: border-box; }

.ttf-shortlist__intro {
	max-width: 640px;
	margin: 0 auto 28px;
	text-align: center;
	color: var(--sl-muted);
	font-size: 15.5px;
	line-height: 1.55;
}

/* ---- Cards (mirror .ttf-seo-card) ---- */
.ttf-shortlist-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	margin: 0 0 36px;
}
.ttf-shortlist-grid:empty { margin: 0; }

.ttf-shortlist-card {
	position: relative;
	flex: 0 0 268px;
	max-width: 268px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--sl-card);
	border: 1px solid #ececf0;
	border-radius: var(--sl-radius);
	padding: 1.6rem 1.25rem 1.1rem;
	box-shadow: var(--sl-shadow);
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, opacity .15s ease;
}
.ttf-shortlist-card:hover {
	border-color: #e0e3e8;
	box-shadow: var(--sl-shadow-h);
	transform: translateY(-3px);
}
.ttf-shortlist-card.is-disabled { opacity: .55; }
.ttf-shortlist-card.is-disabled:hover { transform: none; box-shadow: var(--sl-shadow); }

@media (max-width: 360px) {
	.ttf-shortlist-card { flex-basis: 100%; max-width: 100%; }
}

/* circular avatar — same treatment as the hero / SEO cards */
.ttf-shortlist-card__media {
	width: 116px;
	height: 116px;
	flex: 0 0 auto;
	margin: 0 0 .9rem;
	border-radius: 50%;
	overflow: hidden;
	background: #f1f3f5;
	border: 4px solid #fff;
	box-shadow: 0 0 0 1px #ececf0, 0 4px 12px rgba(20, 30, 45, .10);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ttf-shortlist-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttf-shortlist-card__initials { font-size: 2rem; font-weight: 700; color: #b3bac3; letter-spacing: .02em; }

.ttf-shortlist-card__name { font-size: 1.12rem; line-height: 1.3; font-weight: 700; margin: 0 0 .2rem; color: var(--sl-text); }
.ttf-shortlist-card__role { font-size: .82rem; font-weight: 600; color: #8a93a0; margin: 0 0 .65rem; }
.ttf-shortlist-card__excerpt {
	font-size: .88rem;
	line-height: 1.55;
	color: #5b6471;
	margin: 0 0 1.05rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(.88rem * 1.55 * 3);
}

/* footer: gold "View profile" pill + email select */
.ttf-shortlist-card__foot {
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
}
a.ttf-shortlist-card__view {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--sl-accent);
	color: var(--sl-text) !important;
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none !important;
	padding: .58rem 1.4rem;
	border-radius: 999px;
	transition: background .15s ease, transform .15s ease;
}
a.ttf-shortlist-card__view:hover { background: var(--sl-accent-d); transform: translateY(-1px); }

/* email select — a clear full-width pill toggle */
.ttf-shortlist-card__select {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--sl-muted);
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ttf-shortlist-card__select:hover { border-color: var(--sl-accent); }
.ttf-shortlist-card__select input { width: 17px; height: 17px; accent-color: var(--sl-accent-d); cursor: pointer; margin: 0; }
.ttf-shortlist-card__select:has(input:checked) {
	border-color: var(--sl-accent);
	background: var(--sl-accent-l);
	color: var(--sl-text);
}
.ttf-shortlist-card.is-disabled .ttf-shortlist-card__select { cursor: not-allowed; }

/* remove (×) — top-right corner of the card */
button.ttf-shortlist-card__remove {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--sl-muted);
	background: var(--sl-card);
	border: 1px solid var(--sl-line);
	border-radius: 50%;
	box-shadow: var(--sl-shadow);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
button.ttf-shortlist-card__remove:hover { color: var(--sl-danger); border-color: var(--sl-danger); background: #fff5f4; }
button.ttf-shortlist-card__remove:focus-visible { outline: 2px solid var(--sl-accent-d); outline-offset: 2px; }

/* =============================================================
   EMAIL FORM  — a centered white card with branded controls
   ID prefix wins specificity over parent-theme global form styles.
   ============================================================= */

#ttf-shortlist-root .ttf-shortlist-form {
	max-width: 640px;
	margin: 0 auto;
	background: var(--sl-card);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	box-shadow: var(--sl-shadow);
	padding: 28px 26px;
}
#ttf-shortlist-root .ttf-shortlist-form > h3 {
	font-size: 1.4rem;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--sl-text);
}
#ttf-shortlist-root .ttf-shortlist-help {
	margin: 0 0 20px;
	color: var(--sl-muted);
	font-size: 14.5px;
	line-height: 1.5;
}
#ttf-shortlist-root .ttf-field { margin: 0 0 16px; }
#ttf-shortlist-root .ttf-field > label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 6px;
	color: var(--sl-text);
}
#ttf-shortlist-root .ttf-shortlist-form input[type="text"],
#ttf-shortlist-root .ttf-shortlist-form input[type="email"],
#ttf-shortlist-root .ttf-shortlist-form textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--sl-text);
	background: #fff;
	border: 1px solid #d4dae1;
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#ttf-shortlist-root .ttf-shortlist-form input:focus,
#ttf-shortlist-root .ttf-shortlist-form textarea:focus {
	outline: none;
	border-color: var(--sl-accent);
	box-shadow: 0 0 0 3px rgba(247, 200, 69, .25);
}
#ttf-shortlist-root .ttf-shortlist-form textarea { min-height: 140px; resize: vertical; }

/* consent / copy checkboxes */
#ttf-shortlist-root .ttf-field--check > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sl-text);
	cursor: pointer;
}
#ttf-shortlist-root .ttf-field--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var(--sl-accent-d);
	cursor: pointer;
}

#ttf-shortlist-root .cf-turnstile { margin: 4px 0 18px; }

#ttf-shortlist-root button.ttf-shortlist-submit {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 4px 0 0;
	padding: 13px 30px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--sl-text);
	background: var(--sl-accent);
	border: 1px solid var(--sl-accent);
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
#ttf-shortlist-root button.ttf-shortlist-submit:hover:not(:disabled) {
	background: var(--sl-accent-d);
	border-color: var(--sl-accent-d);
	box-shadow: var(--sl-shadow-h);
}
#ttf-shortlist-root button.ttf-shortlist-submit:active:not(:disabled) { transform: translateY(1px); }
#ttf-shortlist-root button.ttf-shortlist-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: var(--sl-accent-l);
	border-color: var(--sl-accent-l);
	color: var(--sl-muted);
	box-shadow: none;
}

/* honeypot */
.ttf-shortlist-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* errors + notices */
.ttf-shortlist-error { color: var(--sl-danger); font-size: 13px; margin: 6px 0 0; }
.ttf-shortlist-notice {
	max-width: 640px;
	margin: 0 auto 24px;
	background: var(--sl-accent-l);
	border: 1px solid #f3d488;
	border-radius: 12px;
	padding: 14px 18px;
	color: var(--sl-text);
	font-size: 14.5px;
	line-height: 1.5;
}

/* =============================================================
   EMPTY STATE — friendly centered card, not bare gray text
   ============================================================= */

.ttf-shortlist-empty {
	max-width: 480px;
	margin: 8px auto;
	text-align: center;
	color: var(--sl-muted);
	font-size: 16px;
	line-height: 1.55;
	padding: 44px 28px;
	background: var(--sl-card);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	box-shadow: var(--sl-shadow);
}
.ttf-shortlist-empty[hidden] { display: none; }
.ttf-shortlist-empty::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	background: no-repeat center / contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7C845' stroke-width='1.6'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.3 2 5 5.2 5c2 0 3.4 1.2 4.3 2.6C10.4 6.2 11.8 5 13.8 5 17 5 18.6 8.3 17 11.7 14.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}