/*
 * Veterinary Pricing — front end
 *
 * Fonts and text color come from the theme. Sizes are in px so the layout
 * doesn't shift with a theme's root font size. Adjust the look per site by
 * overriding the custom properties on .vetp in the theme stylesheet, e.g.
 *   .vetp { --vetp-accent: #7a3e8f; --vetp-col: 150px; --vetp-radius: 0; }
 */

.vetp {
	--vetp-accent: #2b6a5d;
	--vetp-muted: #5d6b68;
	--vetp-rule: rgba(0, 0, 0, 0.12);
	--vetp-col-rule: #eee;     /* divider to the left of each price column */
	--vetp-panel-bg: #fff;
	--vetp-panel-border: var(--vetp-rule);
	--vetp-radius: 10px;
	--vetp-col: 150px;         /* minimum width of each price column; wider content widens it */
	--vetp-col-gap: 0px;
	--vetp-pad: 20px;          /* panel side padding */
	--vetp-tip-bg: #1f2a28;
	--vetp-tip-fg: #fff;

	container-type: inline-size;
	display: grid;
	gap: 12px;
	margin-block: 24px;
}

/* ---- Sections ---- */

.vetp--accordion .vetp__section {
	background: var(--vetp-panel-bg);
	border: 1px solid var(--vetp-panel-border);
	border-radius: var(--vetp-radius);
}

.vetp__summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px var(--vetp-pad);
	cursor: pointer;
}
.vetp__summary::-webkit-details-marker { display: none; }
.vetp__summary::marker { content: ""; }
.vetp__summary:focus-visible { outline: 2px solid var(--vetp-accent); outline-offset: 2px; border-radius: var(--vetp-radius); }

.vetp .vetp__title { flex: 1; min-width: 0; font-weight: 700; font-size: 25px; line-height: 1.25; }
.vetp__chev { flex: none; color: var(--vetp-muted); transition: transform 0.2s; }
.vetp__section[open] .vetp__chev { transform: rotate(180deg); }

.vetp--accordion .vetp__body { padding: 0 var(--vetp-pad) 16px; }
.vetp--list .vetp__section + .vetp__section { margin-top: 24px; }
.vetp--list .vetp__heading { margin: 0 0 12px; }

.vetp__intro { color: var(--vetp-muted); margin-bottom: 16px; }
.vetp__intro p { margin: 0; }
.vetp__intro p + p { margin-top: 0.75em; }

/* ---- Rows ---- */

.vetp__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 32px;
	align-items: start;
	padding-block: 16px;
	border-top: 1px solid var(--vetp-rule);
}
.vetp--list .vetp__body > .vetp__row:first-child,
.vetp--rows .vetp__body > .vetp__row:first-child { border-top: 0; }

/* Left side: name and description use all the space up to the price columns. */
.vetp__info { min-width: 0; display: block; }
.vetp .vetp__name { font-weight: 600; font-size: 18px; line-height: 1.3; }
.vetp a.vetp__name--link { color: inherit; text-decoration: underline; text-decoration-color: var(--vetp-rule); text-underline-offset: 3px; box-shadow: none; }
.vetp a.vetp__name--link:hover,
.vetp a.vetp__name--link:focus { color: var(--vetp-accent); text-decoration-color: currentColor; }
.vetp .vetp__desc { display: block; margin-top: 10px; color: var(--vetp-muted); font-size: 14px; line-height: 1.3em; }

/* Right side: price columns. Each is at least --vetp-col wide and grows if its
   content needs more, so prices and labels never break across lines. */
.vetp__cluster {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--vetp-col), max-content);
	gap: var(--vetp-col-gap);
	justify-content: end;
}
.vetp__col {
	border-left: 1px solid var(--vetp-col-rule);
	padding: 0 10px;
	text-align: center;
	white-space: nowrap;
}
.vetp .vetp__price { margin-bottom: 4px; font-size: 16px; line-height: 1.1em; font-weight: 600; font-variant-numeric: tabular-nums; }
.vetp .vetp__price--na { color: var(--vetp-muted); font-weight: 500; font-size: 14px; }
.vetp .vetp__label { font-size: 14px; line-height: 1.3; color: var(--vetp-muted); display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Subheadings */
.vetp__sub { padding: 24px 0 8px; border-top: 1px solid var(--vetp-rule); }
.vetp__body > .vetp__sub:first-child,
.vetp__intro + .vetp__sub { padding-top: 4px; border-top: 0; }
.vetp .vetp__sub-title { margin: 0; padding: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vetp-accent); }
.vetp .vetp__sub-text { margin-top: 6px; color: var(--vetp-muted); font-size: 14px; line-height: 1.3em; }

/* Resource links */
.vetp a.vetp__row--resource { color: inherit; text-decoration: none; box-shadow: none; }
.vetp a.vetp__row--resource:hover .vetp__name,
.vetp a.vetp__row--resource:focus .vetp__name { color: var(--vetp-accent); text-decoration: underline; }
.vetp__resource { min-width: var(--vetp-col); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--vetp-accent); white-space: nowrap; }

/* ---- Tooltip ---- */

.vetp__tip { position: relative; display: inline-flex; }
.vetp .vetp__tip-btn {
	all: unset;
	display: inline-flex;
	cursor: pointer;
	color: var(--vetp-muted);
	border-radius: 50%;
}
/* Themes often style button:hover/:focus with high specificity; keep the icon button plain. */
.vetp .vetp__tip-btn,
.vetp .vetp__tip-btn:hover,
.vetp .vetp__tip-btn:focus,
.vetp .vetp__tip-btn:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.vetp .vetp__tip-btn:hover,
.vetp .vetp__tip-btn[aria-expanded="true"] { color: var(--vetp-accent); }
.vetp .vetp__tip-btn:focus-visible { outline: 2px solid var(--vetp-accent); outline-offset: 1px; }
.vetp__tip-box {
	position: absolute;
	bottom: calc(100% + 8px);
	right: -8px;
	z-index: 20;
	width: max-content;
	max-width: 240px;
	padding: 9px 11px;
	border-radius: 6px;
	background: var(--vetp-tip-bg);
	color: var(--vetp-tip-fg);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s;
}
.vetp__tip-btn[aria-expanded="true"] + .vetp__tip-box { visibility: visible; opacity: 1; }
@media (hover: hover) {
	.vetp__tip:hover .vetp__tip-box { visibility: visible; opacity: 1; }
}

.vetp__sr:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Narrower containers ----
   Breakpoints are based on the width of the pricing block, not the screen,
   so it adapts to sidebars and narrow content columns too. */

/* Rows with 4+ prices drop the prices below the name. */
@container (max-width: 920px) {
	.vetp__row:is([data-prices="4"], [data-prices="5"], [data-prices="6"]) { grid-template-columns: minmax(0, 1fr); }
	.vetp__row:is([data-prices="4"], [data-prices="5"], [data-prices="6"]) .vetp__cluster { justify-content: start; }
}

/* Rows with 3 prices do the same a little narrower. */
@container (max-width: 780px) {
	.vetp__row[data-prices="3"] { grid-template-columns: minmax(0, 1fr); }
	.vetp__row[data-prices="3"] .vetp__cluster { justify-content: start; }
}

/* Small (phones, sidebars): every row stacks; prices form a 2-up grid. */
@container (max-width: 560px) {
	.vetp__section { --vetp-pad: 16px; }
	.vetp .vetp__title { font-size: 21px; }
	.vetp__row { grid-template-columns: minmax(0, 1fr); }
	.vetp__cluster {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: auto;
		row-gap: 12px;
		justify-content: start;
	}
	.vetp__resource { min-width: 0; justify-content: flex-start; }
	.vetp .vetp__label { flex-wrap: wrap; }
	.vetp__tip { display: contents; }
	.vetp__tip-box {
		position: static;
		display: none;
		flex-basis: 100%;
		max-width: none;
		margin-top: 5px;
		visibility: visible;
		opacity: 1;
	}
	.vetp__tip-btn[aria-expanded="true"] + .vetp__tip-box { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.vetp__chev, .vetp__tip-box { transition: none; }
}