/* BreederFront display layer — neutral base the Elementor kit inherits.
   Palette hooks: override the custom props per client kit. */
:root {
	--bf-accent: #1e5b4f;
	--bf-accent-ink: #ffffff;
	--bf-ink: #1f2937;
	--bf-muted: #6b7280;
	--bf-line: #e5e7eb;
	--bf-surface: #ffffff;
	--bf-radius: 14px;
}

/* buttons */
.bf-btn {
	display: inline-block;
	background: var(--bf-accent);
	color: var(--bf-accent-ink) !important;
	padding: 0.65em 1.4em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.bf-btn:hover { filter: brightness(1.12); }
.bf-btn--ghost {
	background: transparent;
	color: var(--bf-accent) !important;
	box-shadow: inset 0 0 0 2px var(--bf-accent);
}

/* availability strip */
.bf-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--bf-surface);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	padding: 1rem 1.5rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.bf-strip p { margin: 0; flex: 1 1 240px; font-size: 1.05em; }
.bf-strip__dot {
	width: 12px; height: 12px; border-radius: 50%;
	background: #22c55e; flex: 0 0 auto;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
	animation: bfpulse 2s infinite;
}
@keyframes bfpulse { 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.08); } }
@media (prefers-reduced-motion: reduce) { .bf-strip__dot { animation: none; } }

/* filter chips */
.bf-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; align-items: center; }
.bf-chip {
	border: 1px solid var(--bf-line);
	background: var(--bf-surface);
	color: var(--bf-ink);
	border-radius: 999px;
	padding: 0.4em 1em;
	font-size: 0.9em;
	cursor: pointer;
	transition: all 0.12s ease;
}
.bf-chip:hover { border-color: var(--bf-accent); }
.bf-chip.is-active { background: var(--bf-accent); border-color: var(--bf-accent); color: var(--bf-accent-ink); }
.bf-chip-sep { width: 1px; height: 1.4em; background: var(--bf-line); margin: 0 0.35rem; }

/* card grids */
.bf-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.bf-grid--litters { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.bf-card {
	background: var(--bf-surface);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bf-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09); }
.bf-card.bf-hidden { display: none; }
.bf-card__media { display: block; aspect-ratio: 4 / 3; background: #f3f4f6; position: relative; }
.bf-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; font-size: 3rem; opacity: 0.35;
}
.bf-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.bf-card__toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.bf-card__title { margin: 0; font-size: 1.1em; }
.bf-card__title a { color: var(--bf-ink); text-decoration: none; }
.bf-card__meta { margin: 0; color: var(--bf-muted); font-size: 0.92em; }
.bf-card__litter { font-size: 0.88em; color: var(--bf-accent); text-decoration: none; }
.bf-card__tests { margin: 0; color: #166534; font-size: 0.88em; font-weight: 600; }

/* litter status badges */
.bf-badge--litter-planned { background: #f3f4f6; color: #374151; }
.bf-badge--litter-expecting { background: #fce7f3; color: #9d174d; }
.bf-badge--litter-born { background: #dbeafe; color: #1e40af; }
.bf-badge--litter-accepting_applications { background: #dcfce7; color: #166534; }
.bf-badge--litter-waitlist_full { background: #fef3c7; color: #92400e; }
.bf-badge--litter-all_placed { background: #e5e7eb; color: #374151; }

/* detail lists */
.bf-details { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bf-details li { display: flex; gap: 0.75rem; font-size: 0.95em; align-items: baseline; }
.bf-details li span:first-child {
	flex: 0 0 90px; color: var(--bf-muted);
	font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em;
}
.bf-details--single { border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 1rem 1.25rem; max-width: 520px; }

/* tables (health tests) */
.bf-table-wrap { overflow-x: auto; }
.bf-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.bf-table th, .bf-table td { text-align: left; padding: 0.6em 0.9em; border-bottom: 1px solid var(--bf-line); }
.bf-table th { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bf-muted); }
.bf-health-group { margin-bottom: 2rem; }
.bf-health-group h3 a { color: var(--bf-ink); text-decoration: none; }

/* galleries */
.bf-gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin: 1rem 0; }
.bf-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

/* testimonials */
.bf-quote {
	margin: 0; padding: 1.5rem;
	background: var(--bf-surface);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	display: flex; flex-direction: column; gap: 0.6rem;
}
.bf-quote footer { color: var(--bf-muted); font-size: 0.92em; }
.bf-stars { color: #f59e0b; letter-spacing: 0.1em; }

/* FAQs */
.bf-faqs { display: flex; flex-direction: column; gap: 0.75rem; max-width: 780px; }
.bf-faq { border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 0; background: var(--bf-surface); }
.bf-faq summary { cursor: pointer; font-weight: 600; padding: 1rem 1.25rem; list-style-position: inside; }
.bf-faq__a { padding: 0 1.25rem 1.25rem; color: var(--bf-muted); }

/* pedigree */
.bf-ped { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; max-width: 820px; }
.bf-ped__col { display: flex; flex-direction: column; justify-content: space-around; gap: 0.75rem; }
.bf-ped__cell { border: 1px solid var(--bf-line); border-radius: 10px; padding: 0.6rem 0.85rem; background: var(--bf-surface); font-size: 0.92em; }
.bf-ped__cell a { font-weight: 600; color: var(--bf-ink); text-decoration: none; display: block; }
.bf-ped__cell span { color: var(--bf-muted); font-size: 0.85em; display: block; }
.bf-ped__cell--empty { color: var(--bf-muted); border-style: dashed; }
.bf-countdown { font-size: 1.05em; background: #fef9c3; border: 1px solid #fde047; border-radius: 10px; padding: 0.6em 1em; display: inline-block; }

/* empty states */
.bf-empty {
	border: 1px dashed var(--bf-line);
	border-radius: var(--bf-radius);
	padding: 2rem;
	text-align: center;
	color: var(--bf-muted);
}
.bf-titles { padding-left: 1.2em; }