/* Luminara Facials & Skin Treatments — Elementor widget styles
   Scoped under .lum-* root classes. No page/body background is set here —
   background is left entirely to Elementor's own Section/Column/Container
   background controls. */

.lum-sidebar,
.lum-treatments,
.lum-cta-banner {
	--lum-ink: #171310;
	--lum-muted: #6d625d;
	--lum-accent: #ae6b57;
	--lum-accent-dark: #985744;
	--lum-line: #ead9d2;
	--lum-soft: #f7f1ee;
	--lum-soft-2: #f3ece8;
	--lum-card-bg: #ffffff;
	--lum-card-bg-alpha: rgba(255, 255, 255, 0.62);
	--lum-shadow: 0 10px 30px rgba(68, 41, 32, 0.05);
	--lum-radius: 8px;
	--lum-gap: 12px;

	font-family: "DM Sans", Arial, sans-serif;
	color: var(--lum-ink);
	line-height: 1.65;
	box-sizing: border-box;
}

/* Treatments Accordion uses its own darker, more minimal default palette
   (flat list + dotted leader line, matching the reference design) — this
   only changes the DEFAULT values; every one of these is still overridable
   per-instance from the widget's Style tab color pickers. */
.lum-treatments {
	--lum-ink: #f2ede7;
	--lum-muted: #a79f98;
	--lum-accent: #c98a67;
	--lum-accent-dark: #b5745a;
	--lum-line: rgba(128, 120, 112, 0.35);
	--lum-card-bg: transparent;
	--lum-card-bg-alpha: transparent;
	--lum-option-bg: transparent;
	--lum-radius: 0px;
	--lum-gap: 0px;
}

.lum-sidebar,
.lum-treatments,
.lum-cta-banner {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
}

.lum-sidebar *,
.lum-treatments *,
.lum-cta-banner *,
.lum-sidebar *::before,
.lum-treatments *::before,
.lum-cta-banner *::before,
.lum-sidebar *::after,
.lum-treatments *::after,
.lum-cta-banner *::after {
	box-sizing: border-box;
}

.lum-sidebar a,
.lum-treatments a,
.lum-cta-banner a {
	text-decoration: none;
	color: inherit;
}

/* -------------------- Buttons -------------------- */
.lum-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 21px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: 0.2s ease;
	border: 1px solid transparent;
	cursor: pointer;
}

.lum-btn-primary {
	background: linear-gradient(135deg, var(--lum-accent), var(--lum-accent-dark));
	color: #fff;
	border-color: var(--lum-accent);
	box-shadow: 0 6px 16px rgba(174, 107, 87, 0.18);
}

.lum-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 9px 22px rgba(174, 107, 87, 0.25);
	color: #fff;
}

.lum-btn-outline {
	color: var(--lum-accent-dark);
	border-color: #d8aaa0;
	background: #fff;
}

.lum-btn-outline:hover {
	background: var(--lum-soft);
}

.lum-btn-full {
	width: 100%;
}

.lum-btn-small {
	min-height: 41px;
	padding-inline: 18px;
}

/* -------------------- Sidebar / treatment menu -------------------- */
.lum-sidebar-title {
	color: var(--lum-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 3px 0 16px;
	text-transform: uppercase;
}

.lum-service-nav {
	border-top: 1px solid var(--lum-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lum-service-nav li {
	list-style: none;
}

.lum-service-nav a {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 49px;
	padding: 0 13px;
	color: #504844;
	font-size: 13px;
	border-bottom: 1px solid #eee4e0;
	transition: 0.18s ease;
}

.lum-service-nav a .lum-nav-icon {
	width: 18px;
	color: #988d88;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.lum-service-nav a:hover,
.lum-service-nav a.lum-current {
	color: #2b211d;
	background: linear-gradient(90deg, #f2e9e4, #faf8f6);
}

.lum-service-nav a.lum-current {
	border-left: 3px solid var(--lum-accent);
}

.lum-consult-card {
	border: 1px solid var(--lum-line);
	border-radius: var(--lum-radius);
	margin-top: 46px;
	padding: 24px 18px 18px;
	text-align: center;
	background: rgba(255, 255, 255, 0.42);
}

.lum-consult-spark {
	color: var(--lum-accent);
	font-size: 20px;
	line-height: 1;
	margin-bottom: 4px;
}

.lum-consult-card h3 {
	font-family: "Playfair Display", serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.4;
	margin: 7px auto 10px;
}

.lum-consult-card p {
	color: var(--lum-muted);
	font-size: 12px;
	line-height: 1.55;
	margin: 0 0 17px;
}

/* -------------------- Treatments accordion -------------------- */
/* Flat list with a hairline divider between rows — no per-item card,
   border, radius, or shadow — matching the reference design. */
.lum-treatment-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--lum-line);
	border-radius: 0;
	margin-bottom: 0;
	box-shadow: none;
}

/* When "Show Border Around Open Item" is turned on (Style tab, off by
   default), this wraps the whole expanded row in an outline box — no
   fill, so the Elementor section/column background still shows through.
   Border color defaults to transparent (see the widget's Style controls)
   so the border itself is invisible unless that toggle is switched on. */
.lum-treatment-item[open] {
	background: transparent;
	box-shadow: none;
	border: 1px solid transparent;
	border-radius: 8px;
}

.lum-treatment-item:not(.lum-no-number) .lum-details-body {
	padding-left: 52px;
}

.lum-treatment-item summary {
	list-style: none;
	cursor: pointer;
	min-height: 52px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 6px;
	column-gap: 10px;
	padding: 12px 4px;
}

.lum-treatment-item summary::-webkit-details-marker {
	display: none;
}

.lum-number {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	color: var(--lum-accent);
	font-family: "Playfair Display", serif;
	font-size: 15px;
}

.lum-service-name {
	flex: 1 1 auto;
	min-width: 140px;
	font-family: "Playfair Display", serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	color: var(--lum-ink);
}

.lum-service-name .lum-service-note {
	font-size: 0.82em;
	font-weight: 400;
	color: var(--lum-ink);
}

/* Dotted "leader" line — short and sitting right against the price,
   not stretched across the row. The blank space between the title and
   the leader is pushed there by this element's own auto left-margin. */
.lum-leader {
	flex: 0 0 36px;
	min-width: 20px;
	align-self: center;
	height: 0;
	margin: 0 8px 0 auto;
	border-bottom: 1px dotted var(--lum-line);
	transform: translateY(-1px);
}

/* Groups price + arrow + button so they move together: they stay on
   the same line as the title when there's room, and drop to their own
   line — as a unit — the moment the row gets too narrow, regardless of
   viewport size (works the same in a full-width section or a narrow
   Elementor column). */
.lum-summary-meta {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;
}

.lum-price {
	flex: 0 0 auto;
	color: var(--lum-accent);
	font-size: 15px;
	white-space: nowrap;
}

.lum-price strong {
	font-weight: 500;
}

/* Chevron: a simple down-pointing character that flips on open, rather
   than a rotated bordered square. */
.lum-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: var(--lum-accent);
	font-size: 15px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.lum-toggle::before {
	content: "\2304";
}

.lum-treatment-item[open] .lum-toggle {
	transform: rotate(180deg);
}

.lum-details-body {
	padding: 0 4px 2px 4px;
	color: var(--lum-muted);
	font-size: 13px;
}

/* Whatever ends up last inside the expanded content — description,
   meta line, or the options list — shouldn't add its own trailing
   margin on top of the padding above; that margin can otherwise
   collapse through and widen the gap before the next treatment row. */
.lum-details-body > *:last-child {
	margin-bottom: 0 !important;
}

.lum-details-body > .lum-description {
	max-width: 750px;
	margin: 0 0 8px;
}

.lum-details-body > .lum-description p:first-child {
	margin-top: 0;
}

.lum-details-body > .lum-description p:last-child {
	margin-bottom: 0;
}

/* When the options list appears (now shown above the description), add
   space between them — the description no longer has a preceding margin
   of its own to rely on since it's not first anymore. */
.lum-option-list + .lum-description {
	margin-top: 10px;
}

.lum-meta {
	font-style: italic;
	color: var(--lum-muted);
	margin: 0 0 4px;
}

.lum-option-list {
	background: var(--lum-option-bg);
}

.lum-option-list .lum-option-row {
	min-height: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 20px;
	padding: 2px 4px;
	color: var(--lum-ink);
}

.lum-option-list .lum-option-price {
	font-size: 12px;
	color: var(--lum-ink);
	white-space: nowrap;
}

/* Uppercase, bordered "BOOK"-style button used in the accordion rows. */
.lum-treatments .lum-btn {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11.5px;
	min-height: 38px;
	padding: 0 18px;
	border-radius: 3px;
}

.lum-treatments .lum-btn-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--lum-ink);
}

.lum-treatments .lum-btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* -------------------- CTA banner -------------------- */
.lum-cta-banner {
	border: 1px solid var(--lum-line);
	border-radius: 9px;
	padding: 23px 24px;
	background: linear-gradient(90deg, #fff, #faf6f3);
	display: grid;
	grid-template-columns: 54px 1fr auto;
	gap: 18px;
	align-items: center;
}

.lum-cta-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--lum-soft-2);
	color: var(--lum-accent);
	font-size: 19px;
}

.lum-cta-copy {
	min-width: 0;
}

.lum-cta-copy h2 {
	font-family: "Playfair Display", serif;
	font-weight: 500;
	margin: 1px 0 3px;
	font-size: 25px;
}

.lum-cta-copy p {
	margin: 0;
	color: #5b514d;
	font-size: 13px;
}

.lum-cta-eyebrow {
	color: var(--lum-accent);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}

.lum-cta-btn {
	min-width: 148px;
}

/* -------------------- Responsive -------------------- */

/* The treatment row (.lum-treatment-item summary) is flexbox with wrap,
   so the title / price / button / arrow group reflow automatically based
   on the widget's real rendered width — whether that's a full-width
   mobile screen or a narrow Elementor column at desktop resolution.
   These breakpoints only need to polish spacing and type size, and
   handle the sidebar nav + CTA banner, which stay CSS Grid. */

/* Tablet (~768–1024px) */
@media (max-width: 1024px) {
	.lum-treatment-item summary {
		padding: 10px 4px;
		column-gap: 10px;
	}

	.lum-service-name {
		font-size: 16px;
	}

	.lum-price {
		font-size: 14px;
	}

	.lum-btn-small {
		padding-inline: 12px;
		min-height: 38px;
		font-size: 12px;
	}

	.lum-details-body {
		padding: 0 4px 2px 4px;
	}

	.lum-treatment-item:not(.lum-no-number) .lum-details-body {
		padding-left: 52px;
	}

	.lum-cta-banner {
		grid-template-columns: 48px 1fr auto;
		gap: 14px;
		padding: 20px;
	}

	.lum-cta-copy h2 {
		font-size: 21px;
	}
}

/* Mobile (≤767px): sidebar nav becomes a horizontal scrollable pill bar;
   the treatment row's meta group (price/button/arrow) is already wrapping
   onto its own line by now via flex-wrap — this just tightens it up. */
@media (max-width: 767px) {
	.lum-service-nav {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 7px;
		padding: 2px 2px 10px;
		border-top: 0;
		scrollbar-width: none;
	}

	.lum-service-nav::-webkit-scrollbar {
		display: none;
	}

	.lum-service-nav a {
		flex: 0 0 auto;
		min-height: 40px;
		border: 1px solid var(--lum-line);
		border-radius: 100px;
		padding: 0 14px;
		background: #fff;
	}

	.lum-service-nav a.lum-current {
		border-color: var(--lum-accent);
	}

	.lum-consult-card {
		margin-top: 28px;
	}

	.lum-treatment-item summary {
		min-height: auto;
		padding: 10px 4px;
		row-gap: 8px;
	}

	.lum-treatment-item[open] {
		border-radius: 6px;
	}

	.lum-leader {
		display: none;
	}

	.lum-number {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

	.lum-service-name {
		font-size: 15.5px;
	}

	.lum-summary-meta {
		width: 100%;
		justify-content: space-between;
	}

	.lum-price {
		font-size: 13.5px;
	}

	.lum-btn-small {
		min-height: 34px;
		padding-inline: 14px;
	}

	.lum-details-body {
		padding: 0 4px 2px 4px;
		font-size: 12.5px;
	}

	.lum-treatment-item:not(.lum-no-number) .lum-details-body {
		padding-left: 46px;
	}

	.lum-details-body > .lum-description {
		margin-bottom: 8px;
	}

	.lum-option-list .lum-option-row {
		align-items: flex-start;
		padding: 5px 4px;
		font-size: 12px;
	}

	.lum-cta-banner {
		grid-template-columns: 44px 1fr;
		gap: 10px 12px;
		padding: 18px;
	}

	.lum-cta-icon {
		width: 44px;
		height: 44px;
		font-size: 16px;
	}

	.lum-cta-copy h2 {
		font-size: 19px;
	}

	.lum-cta-btn {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* Small phones (≤480px): trim padding and type size a little further so
   nothing crowds edge-to-edge on 320–390px wide screens. */
@media (max-width: 480px) {
	.lum-consult-card {
		padding: 20px 14px 16px;
	}

	.lum-treatment-item summary {
		padding: 9px 4px;
	}

	.lum-service-name {
		font-size: 14.5px;
		min-width: 100px;
	}

	.lum-details-body {
		padding-left: 4px;
		padding-right: 4px;
	}

	.lum-treatment-item:not(.lum-no-number) .lum-details-body {
		padding-left: 40px;
	}

	.lum-option-list .lum-option-row {
		padding: 4px 4px;
	}

	.lum-cta-banner {
		padding: 16px;
	}

	.lum-cta-copy h2 {
		font-size: 17px;
	}

	.lum-cta-copy p {
		font-size: 12px;
	}

	.lum-btn {
		font-size: 12.5px;
		padding: 0 16px;
	}
}