/**
 * Shared service rail (.svc-rail) + service-page price panel (.svc-price).
 *
 * Design pass 2026-09-11. Two surfaces carry the hierarchy:
 *   white + hairline + one soft shadow + 18px radius = an object you read
 *     (a service card, the price panel);
 *   flat peach, no border, no shadow                 = the tray that carries them
 *     (the rail container).
 * Tokens are theme.json presets, the same set blocks/services-goal-finder/style.css
 * declares, so the rail and the finder are visibly one kit.
 *
 * Specificity note: both components render inside `.cderma-page-content`, whose
 * generic list and table styling (style.css:3014 `ul > li::before` gold tick +
 * 28px indent; style.css:3059 gold `th` on a tinted band; style.css:3077 grey
 * zebra `td`) would otherwise win. The `.svc-rail`/`.svc-price` prefixes below are
 * doubled up deliberately to outrank it -- do not "simplify" them to one class.
 */

.svc-rail {
	--svc-rail-gap: 18px;
	--svc-rail-gold: var( --wp--preset--color--primary, #bca443 );
	--svc-rail-gold-dark: var( --wp--preset--color--gold-dark, #8c7332 );
	--svc-rail-heading: var( --wp--preset--color--heading, #262626 );
	--svc-rail-body: var( --wp--preset--color--body, #3a3833 );
	/* `nav`, not `muted`: the notes, meta and status sit on the peach tray at
	   13-13.5px, where #8a8472 is 3.6:1 -- under AA for body text. #57534a is
	   7.4:1 there and still reads as the quiet tier. */
	--svc-rail-muted: var( --wp--preset--color--nav, #57534a );
	--svc-rail-border: var( --wp--preset--color--border, #ece9df );
	--svc-rail-border-muted: var( --wp--preset--color--border-muted, #cfc9b4 );
	--svc-rail-tray: var( --wp--preset--color--peach-bg, #fdfaf2 );
	--svc-rail-surface: var( --wp--preset--color--primary-surface, #f7f3e8 );
	margin: 40px 0;
	padding: 22px 20px 20px;
	border-radius: 18px;
	background: var( --svc-rail-tray );
	color: var( --svc-rail-body );
	font-family: var( --wp--preset--font-family--body, 'Lato', sans-serif );
}

.svc-rail *,
.svc-price * {
	box-sizing: border-box;
}

.svc-rail__head {
	margin-bottom: 14px;
}

.svc-rail .svc-rail__heading {
	margin: 0;
	color: var( --svc-rail-heading );
	font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif );
	font-size: clamp( 20px, 1.6vw, 26px );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.svc-rail__viewport {
	overflow: hidden;
}

.svc-rail .svc-rail__track {
	display: flex;
	gap: var( --svc-rail-gap );
	margin: 0;
	padding: 2px 0 4px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.svc-rail .svc-rail__track::-webkit-scrollbar {
	display: none;
}

/* --- card ---------------------------------------------------------------- */

.svc-rail .svc-rail__card {
	display: flex;
	flex: 0 0 min( 78%, 300px );
	flex-direction: column;
	margin: 0;
	padding: 14px;
	border: 1px solid var( --svc-rail-border );
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba( 25, 28, 29, 0.05 );
	scroll-snap-align: start;
}

/* Kill the page-content list bullet + indent (style.css:3008-3030). */
.svc-rail .svc-rail__card::before,
.svc-rail .svc-rail__card::marker {
	content: none;
}

.svc-rail .svc-rail__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: 14px;
	background: var( --svc-rail-surface );
}

.svc-rail .svc-rail__title {
	margin: 12px 0 0;
	font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif );
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.1px;
}

.svc-rail .svc-rail__title a {
	color: var( --svc-rail-heading );
	text-decoration: none;
}

.svc-rail .svc-rail__title a:hover,
.svc-rail .svc-rail__title a:focus-visible {
	color: var( --svc-rail-gold-dark );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The one loud line on every card. */
.svc-rail .svc-rail__price {
	margin: 6px 0 0;
	color: var( --svc-rail-gold-dark );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.svc-rail .svc-rail__meta {
	margin: 6px 0 0;
	color: var( --svc-rail-muted );
	font-size: 13.5px;
	line-height: 1.45;
}

.svc-rail .svc-rail__more {
	margin-top: auto;
	padding-top: 14px;
	align-self: flex-start;
	color: var( --svc-rail-gold-dark );
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba( 140, 115, 50, 0.35 );
	text-underline-offset: 3px;
}

.svc-rail .svc-rail__more:hover,
.svc-rail .svc-rail__more:focus-visible {
	text-decoration-color: currentColor;
}

/* --- one result: a compact horizontal row, not a poster ------------------- */

.svc-rail--single .svc-rail__viewport,
.svc-rail--static .svc-rail__viewport {
	overflow: visible;
}

.svc-rail--single .svc-rail__track,
.svc-rail--static .svc-rail__track {
	display: block;
	overflow: visible;
	scroll-snap-type: none;
}

.svc-rail--single .svc-rail__card {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 14px;
	align-items: start;
}

/* Rows are auto/auto/auto/1fr, not four autos: the image spans all four, and a
   spanned item taller than its tracks hands its slack to *every* auto row --
   which opened a gap between the title and the price. The 1fr row soaks it up
   below the link instead. */
.svc-rail--single .svc-rail__card:has( .svc-rail__image ) {
	grid-template-columns: 96px 1fr;
	grid-template-rows: auto auto auto 1fr;
	align-content: start;
}

.svc-rail--single .svc-rail__card:has( .svc-rail__image ) .svc-rail__title,
.svc-rail--single .svc-rail__card:has( .svc-rail__image ) .svc-rail__price,
.svc-rail--single .svc-rail__card:has( .svc-rail__image ) .svc-rail__meta,
.svc-rail--single .svc-rail__card:has( .svc-rail__image ) .svc-rail__more {
	grid-column: 2;
}

.svc-rail--single .svc-rail__card:has( .svc-rail__image ) .svc-rail__image {
	grid-column: 1;
	grid-row: 1 / -1;
	aspect-ratio: 1 / 1;
	align-self: start;
}

.svc-rail--single .svc-rail__title {
	margin-top: 0;
}

.svc-rail--single .svc-rail__more {
	margin-top: 0;
	padding-top: 10px;
}

@media ( min-width: 700px ) {
	.svc-rail--single .svc-rail__card:has( .svc-rail__image ) {
		grid-template-columns: 132px 1fr;
		column-gap: 18px;
		padding: 16px;
	}
}

/* --- desktop: a still 3-up row; the carousel engages past it -------------- */

@media ( min-width: 900px ) {
	.svc-rail:not( .svc-rail--single ) .svc-rail__card {
		flex: 1 0 calc( ( 100% - 2 * var( --svc-rail-gap ) ) / 3 );
	}
}

/* "Tampilkan semua" -- a real grid, so a fourth card never stretches. */
.svc-rail--grid .svc-rail__viewport {
	overflow: visible;
}

.svc-rail--grid .svc-rail__track {
	display: grid;
	grid-template-columns: 1fr;
	overflow: visible;
	scroll-snap-type: none;
}

.svc-rail--grid .svc-rail__card {
	flex: none;
}

@media ( min-width: 900px ) {
	.svc-rail--grid .svc-rail__track {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* --- carousel controls: a quiet cluster, not a row of CTAs ---------------- */

.svc-rail__controls {
	display: none;
}

/* One line at 390px: [<][>]  Kartu 1 dari 3        Tampilkan semua.
   Round 2 -- the labelled pill pair plus the count plus the toggle needed two
   rows of chrome under a three-card rail, which outweighed the cards. The
   direction buttons carry a chevron and keep their Indonesian name for screen
   readers; the toggle drops to a text link. Nothing wraps. */
.svc-rail--enhanced .svc-rail__controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.svc-rail__nav {
	display: inline-flex;
	flex: none;
	gap: 6px;
}

.svc-rail--grid .svc-rail__nav,
.svc-rail--grid .svc-rail__status {
	display: none;
}

/* Visually hidden, still announced and still found by find-in-page readers. */
.svc-rail .svc-rail__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.svc-rail .svc-rail__prev,
.svc-rail .svc-rail__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --svc-rail-border-muted );
	border-radius: 50%;
	background: transparent;
	color: var( --svc-rail-body );
	cursor: pointer;
}

.svc-rail .svc-rail__prev:hover,
.svc-rail .svc-rail__next:hover {
	border-color: var( --svc-rail-gold-dark );
	color: var( --svc-rail-gold-dark );
}

.svc-rail .svc-rail__chevron {
	flex: none;
	pointer-events: none;
}

/* Quiet text link, but still a 44px tap target. */
.svc-rail .svc-rail__all {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 44px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var( --svc-rail-gold-dark );
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: rgba( 140, 115, 50, 0.35 );
	text-underline-offset: 3px;
	cursor: pointer;
}

.svc-rail .svc-rail__all:hover,
.svc-rail .svc-rail__all[ aria-expanded="true" ] {
	text-decoration-color: currentColor;
}

.svc-rail .svc-rail__status {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var( --svc-rail-muted );
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- footer: one primary action ------------------------------------------ */

.svc-rail__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var( --svc-rail-border );
}

.svc-rail--consult .svc-rail__foot {
	border-top: 0;
	padding-top: 0;
}

.svc-rail .svc-rail__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* Primary. White on #8c7332 = 4.9:1. */
.svc-rail .svc-rail__link--wa {
	order: 1;
	flex: 1 1 auto;
	border: 1.5px solid var( --svc-rail-gold-dark );
	background: var( --svc-rail-gold-dark );
	color: #ffffff;
}

.svc-rail .svc-rail__link--wa:hover,
.svc-rail .svc-rail__link--wa:focus-visible {
	background: #75601f;
	border-color: #75601f;
	color: #ffffff;
}

/* Secondary. */
.svc-rail .svc-rail__link--book {
	order: 2;
	flex: 0 1 auto;
	border: 1.5px solid var( --svc-rail-gold );
	background: #ffffff;
	color: var( --svc-rail-gold-dark );
}

.svc-rail .svc-rail__link--book:hover,
.svc-rail .svc-rail__link--book:focus-visible {
	background: var( --svc-rail-surface );
	color: var( --svc-rail-gold-dark );
}

/* Quiet text link on its own line. */
.svc-rail .svc-rail__link--finder {
	order: 3;
	flex: 1 1 100%;
	justify-content: flex-start;
	min-height: 0;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --svc-rail-gold-dark );
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba( 140, 115, 50, 0.35 );
	text-underline-offset: 3px;
}

.svc-rail .svc-rail__link--finder:hover,
.svc-rail .svc-rail__link--finder:focus-visible {
	text-decoration-color: currentColor;
}

.svc-rail__note,
.svc-rail__consult-text {
	margin: 0;
	color: var( --svc-rail-muted );
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 68ch;
}

.svc-rail__note {
	order: 4;
	flex-basis: 100%;
	margin-top: 2px;
}

/* --- consult prompt: the finder's "nothing chosen yet" signature ---------- */

.svc-rail--consult {
	border: 1px solid var( --svc-rail-border );
	background: var( --svc-rail-tray );
	padding: 20px;
}

.svc-rail--consult .svc-rail__heading {
	margin-bottom: 8px;
}

.svc-rail--consult .svc-rail__consult-text {
	margin-bottom: 14px;
	color: var( --svc-rail-body );
	font-size: 14.5px;
}

/* --- focus ---------------------------------------------------------------- */

.svc-rail a:focus-visible,
.svc-rail button:focus-visible,
.svc-price a:focus-visible {
	outline: 2px solid var( --wp--preset--color--gold-dark, #8c7332 );
	outline-offset: 2px;
	border-radius: 4px;
}

/* ========================================================================== */
/* Service-page price panel                                                   */
/* ========================================================================== */

.svc-price {
	scroll-margin-top: 100px;
	--svc-price-gold: var( --wp--preset--color--primary, #bca443 );
	--svc-price-gold-dark: var( --wp--preset--color--gold-dark, #8c7332 );
	--svc-price-heading: var( --wp--preset--color--heading, #262626 );
	--svc-price-body: var( --wp--preset--color--body, #3a3833 );
	--svc-price-muted: var( --wp--preset--color--nav, #57534a );
	--svc-price-border: var( --wp--preset--color--border, #ece9df );
	--svc-price-surface: var( --wp--preset--color--primary-surface, #f7f3e8 );
	margin: 32px 0;
	padding: 22px 20px;
	border: 1px solid var( --svc-price-border );
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba( 25, 28, 29, 0.05 );
	color: var( --svc-price-body );
	font-family: var( --wp--preset--font-family--body, 'Lato', sans-serif );
}

.svc-price h2 {
	margin: 0 0 4px;
	color: var( --svc-price-heading );
	font-family: var( --wp--preset--font-family--heading, 'Ubuntu', sans-serif );
	font-size: clamp( 20px, 1.6vw, 26px );
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

/* Reset the page-content table shell (style.css:3048). */
.svc-price .svc-price__table {
	width: 100%;
	margin: 14px 0 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	border-spacing: 0;
	overflow: visible;
	background: none;
}

/* Beats `.cderma-page-content table tbody tr:nth-child(even) td` (0,2,4) and
   `table th` (0,1,2) -- three classes on purpose. */
.svc-price .svc-price__table .svc-price__row th,
.svc-price .svc-price__table .svc-price__row td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var( --svc-price-border );
	background: none;
	vertical-align: baseline;
	text-align: left;
}

.svc-price .svc-price__table .svc-price__row th {
	padding-right: 18px;
	color: var( --svc-price-body );
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.4;
}

.svc-price .svc-price__table .svc-price__row td {
	color: var( --svc-price-gold-dark );
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.svc-price .svc-price__table .svc-price__row:last-child th,
.svc-price .svc-price__table .svc-price__row:last-child td {
	border-bottom: 0;
}

.svc-price .svc-price__table small {
	display: block;
	margin-top: 3px;
	color: var( --svc-price-muted );
	font-size: 12.5px;
	font-weight: 400;
	white-space: normal;
}

/* Add-ons hang off the line above: the indent and the "+" are the hierarchy. */
.svc-price .svc-price__table .svc-price__row--addon th {
	padding-left: 20px;
	color: var( --svc-price-muted );
	font-size: 13.5px;
}

.svc-price .svc-price__table .svc-price__row--addon td {
	color: var( --svc-price-muted );
	font-size: 14.5px;
	font-weight: 600;
}

.svc-price .svc-price__table .svc-price__row--addon th::before {
	content: "+ ";
	color: var( --svc-price-gold );
}

.svc-price__src,
.svc-price__consult {
	margin: 14px 0 0;
	color: var( --svc-price-muted );
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 68ch;
}

.svc-price__consult {
	color: var( --svc-price-body );
	font-size: 15px;
}

.svc-price__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var( --svc-price-border );
}

.svc-price .svc-price__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* Same primary as the rail: one WhatsApp button treatment per page. */
.svc-price .svc-price__btn--wa {
	flex: 1 1 auto;
	border: 1.5px solid var( --svc-price-gold-dark );
	background: var( --svc-price-gold-dark );
	color: #ffffff;
}

.svc-price .svc-price__btn--wa:hover,
.svc-price .svc-price__btn--wa:focus-visible {
	background: #75601f;
	border-color: #75601f;
	color: #ffffff;
}

.svc-price .svc-price__btn--book {
	flex: 0 1 auto;
	border: 1.5px solid var( --svc-price-gold );
	background: #ffffff;
	color: var( --svc-price-gold-dark );
}

.svc-price .svc-price__btn--book:hover,
.svc-price .svc-price__btn--book:focus-visible {
	background: var( --svc-price-surface );
	color: var( --svc-price-gold-dark );
}

/* --- phone: a list of prices, not a ladder of bands ----------------------- */

@media ( max-width: 640px ) {
	.svc-price {
		padding: 18px 16px;
	}

	.svc-price .svc-price__table .svc-price__row th,
	.svc-price .svc-price__table .svc-price__row td {
		display: block;
		width: 100%;
		text-align: left;
		white-space: normal;
	}

	.svc-price .svc-price__table .svc-price__row th {
		padding: 12px 0 0;
		border-bottom: 0;
	}

	.svc-price .svc-price__table .svc-price__row td {
		padding: 2px 0 12px;
		font-size: 17px;
	}

	.svc-price .svc-price__table .svc-price__row--addon th {
		padding-left: 16px;
	}

	.svc-price .svc-price__table .svc-price__row--addon td {
		padding-left: 16px;
		font-size: 15px;
	}

	.svc-price .svc-price__btn {
		flex: 1 1 100%;
	}
}

@media ( max-width: 480px ) {
	.svc-rail {
		padding: 18px 16px 16px;
	}

	.svc-rail .svc-rail__link--book {
		flex: 1 1 auto;
	}
}

/* On a phone the primary fills the row it shares with the secondary. On a wide
   column that same rule stretches it to ~700px, which reads as a banner rather
   than a button — so past the fold of a phone both settle at their own width. */
@media ( min-width: 700px ) {
	.svc-rail .svc-rail__link--wa,
	.svc-price .svc-price__btn--wa {
		flex: 0 1 auto;
	}
}