/* Site Builder — Costs & Consultations band.
 *
 * Two views of one price list: tier cards you book from, and the full rate
 * card underneath. They share the accent colour through --sb-pricing-accent
 * so the Elementor colour control drives both halves at once.
 */

.sb-lf-pricing {
	--sb-pricing-accent: var(--sb-gold);
	position: relative;
	background-color: #fff;
	font-family: var(--sb-font-sans);
}

.sb-lf-pricing.sb-lf-stretch {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sb-lf-pricing-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 96px 24px;
}

/* ---------------------------------------------------------------- Heading */

.sb-lf-pricing-header {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}

.sb-lf-pricing-eyebrow {
	font-size: 12px;
	font-weight: var(--sb-weight-semibold);
	letter-spacing: var(--sb-tracking-caps);
	text-transform: uppercase;
	color: var(--sb-pricing-accent);
	margin-bottom: 14px;
}

.sb-lf-pricing-heading {
	font-family: var(--sb-font-serif);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: var(--sb-weight-semibold);
	line-height: 1.18;
	letter-spacing: var(--sb-tracking-tight);
	color: #151312;
	margin: 0;
}

.sb-lf-pricing-description {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: #5f5c57;
}

/* ------------------------------------------------------------ Tier cards */

.sb-lf-pricing-cards {
	display: grid;
	/* auto-fit rather than a fixed column count: the widget is used with
	   three tiers on the booking page and one on the free-consultation
	   band, and both should centre rather than leave empty columns. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
}

.sb-lf-pricing-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 36px 28px;
	background: #f6f5f1;
	border: 1px solid rgba(10, 10, 12, 0.07);
	border-radius: 14px;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.sb-lf-pricing-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--sb-pricing-accent) 45%, transparent);
	box-shadow: 0 18px 44px rgba(10, 10, 12, 0.1);
}

.sb-lf-pricing-card.is-featured {
	border-color: var(--sb-pricing-accent);
	box-shadow: 0 18px 44px rgba(182, 145, 44, 0.16);
}

.sb-lf-pricing-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: #6f6b64;
	margin-bottom: 18px;
	min-height: 2.2em;
}

.sb-lf-pricing-duration {
	font-family: var(--sb-font-serif);
	font-size: 22px;
	font-weight: var(--sb-weight-semibold);
	color: #151312;
}

.sb-lf-pricing-price {
	font-family: var(--sb-font-serif);
	font-size: 44px;
	font-weight: var(--sb-weight-bold);
	line-height: 1.1;
	color: var(--sb-pricing-accent);
	margin-top: 8px;
	/* Lining, equal-width figures so £78 and £138 share a baseline and the
	   three cards' prices line up rather than drifting by a digit width. */
	font-variant-numeric: lining-nums tabular-nums;
}

.sb-lf-pricing-price-note {
	font-size: 12px;
	letter-spacing: var(--sb-tracking-wide);
	text-transform: uppercase;
	color: #6f6b64;
	margin-top: 6px;
}

.sb-lf-pricing-btn {
	display: inline-block;
	margin-top: 26px;
	padding: 13px 28px;
	font-size: 14px;
	font-weight: var(--sb-weight-semibold);
	letter-spacing: var(--sb-tracking-wide);
	text-decoration: none;
	color: #fff;
	background: var(--sb-pricing-accent);
	border-radius: 4px;
	transition: background 0.3s ease, transform 0.2s ease;
}

.sb-lf-pricing-btn:hover,
.sb-lf-pricing-btn:focus-visible {
	background: #151312;
	color: #fff;
	transform: translateY(-1px);
}

.sb-lf-pricing-footnote {
	max-width: 760px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7;
	color: #6f6b64;
}

/* ------------------------------------------------------------- Fee table */

.sb-lf-pricing-table-wrap {
	max-width: 860px;
	margin: 72px auto 0;
}

.sb-lf-pricing-cards + .sb-lf-pricing-table-wrap,
.sb-lf-pricing-footnote + .sb-lf-pricing-table-wrap {
	margin-top: 80px;
}

.sb-lf-pricing-table-heading {
	font-family: var(--sb-font-serif);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: var(--sb-weight-semibold);
	color: #151312;
	margin: 0 0 24px;
	text-align: center;
}

/* The fee column carries strings like "£100 + £138 per hour + VAT" that will
   not wrap below ~360px. Scrolling the table inside its own box keeps the
   page body from scrolling sideways and taking the header with it. */
.sb-lf-pricing-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(10, 10, 12, 0.09);
	border-radius: 12px;
}

.sb-lf-pricing-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 15px;
}

.sb-lf-pricing-table th,
.sb-lf-pricing-table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(10, 10, 12, 0.07);
}

.sb-lf-pricing-table thead th {
	font-size: 12px;
	font-weight: var(--sb-weight-semibold);
	letter-spacing: var(--sb-tracking-caps);
	text-transform: uppercase;
	color: #fff;
	background: #151312;
	border-bottom: 0;
}

.sb-lf-pricing-table tbody th {
	font-weight: var(--sb-weight-medium);
	color: #151312;
}

.sb-lf-pricing-table tbody td {
	color: #4a4741;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.sb-lf-pricing-table tbody tr:nth-child(even) {
	background: #faf9f6;
}

.sb-lf-pricing-table tbody tr:last-child th,
.sb-lf-pricing-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ------------------------------------------------------------------ Small */

@media (max-width: 767px) {
	.sb-lf-pricing-inner {
		padding: 64px 16px;
	}

	.sb-lf-pricing-cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.sb-lf-pricing-note {
		min-height: 0;
	}

	.sb-lf-pricing-price {
		font-size: 38px;
	}

	.sb-lf-pricing-table-wrap {
		margin-top: 56px;
	}

	.sb-lf-pricing-table th,
	.sb-lf-pricing-table td {
		padding: 13px 16px;
	}
}