/**
 * SEE ENERGY wrapper for Amelia Customer Panel.
 * Plugin internals remain functional; this file controls the page composition
 * and aligns the embedded app with the site's design tokens.
 */

.customer-panel-hero {
	padding-block: var(--sp-14) var(--sp-10);
	background:
		radial-gradient(circle at 78% 18%, rgba(150, 183, 35, 0.12), transparent 28rem),
		linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
}

.customer-panel-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sp-10);
	align-items: end;
}

.customer-panel-hero__title {
	max-width: 52rem;
	margin: var(--sp-4) 0 0;
}

.customer-panel-hero__lead {
	max-width: 44rem;
	margin: var(--sp-6) 0 0;
	color: var(--c-text-body);
	font-size: var(--fs-body-lg);
	line-height: 1.7;
}

.customer-panel-hero__back {
	display: inline-flex;
	gap: var(--sp-3);
	white-space: nowrap;
}

.customer-panel-section {
	min-height: 42rem;
	padding-block: var(--sp-14) var(--sp-section);
	background: var(--c-bg-light);
}

.customer-panel-shell {
	display: grid;
	grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
	border: 1px solid var(--c-border-strong-inv);
	background: var(--c-surface-light);
	box-shadow: 0 2rem 5rem rgba(14, 17, 23, 0.12);
}

.customer-panel-shell__header {
	padding: clamp(2rem, 4vw, 3.5rem);
	border-right: 1px solid var(--c-border-strong-inv);
	background:
		linear-gradient(180deg, rgba(150, 183, 35, 0.08), transparent 55%),
		var(--c-surface-light);
}

.customer-panel-shell__header h2 {
	margin: var(--sp-4) 0 0;
	color: var(--c-text-inv);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	letter-spacing: var(--ls-heading);
	line-height: 1.05;
}

.customer-panel-shell__header > p:last-child {
	margin: var(--sp-6) 0 0;
	color: var(--c-text-body-inv);
	line-height: 1.7;
}

.customer-panel-shell__app {
	min-width: 0;
	min-height: 34rem;
	padding: clamp(1rem, 3vw, 2.5rem);
	background: #fff;
}

.customer-panel-shell__app > p:empty {
	display: none;
}

.customer-panel-page .amelia-v2-booking,
.customer-panel-page .amelia-v2-booking #amelia-container,
.customer-panel-page .amelia-v2-booking [id^="amelia-container"] {
	max-width: none !important;
	margin: 0 !important;
	font-family: var(--font-sans) !important;
}

.customer-panel-page .amelia-v2-booking {
	--am-c-btn-prim: var(--c-accent);
	--am-c-btn-prim-text: var(--c-on-accent);
	--am-c-btn-first: var(--c-accent);
	--am-c-btn-first-darken30: #718c18;
	--am-brad-main: 0;
	--am-brad-main-default: 0;
}

/* Amelia postavlja orange customization vrednosti inline na auth dugmad. */
.customer-panel-page .am-asi__btn,
.customer-panel-page .am-asi__footer-reset__btn {
	--am-c-btn-first: var(--c-accent) !important;
	--am-c-btn-first-op80: rgba(150, 183, 35, 0.8) !important;
	--am-c-btn-first-op30: rgba(150, 183, 35, 0.3) !important;
	--am-c-btn-first-op20: rgba(150, 183, 35, 0.12) !important;
}

@media (max-width: 1023px) {
	.customer-panel-shell {
		grid-template-columns: 1fr;
	}

	.customer-panel-shell__header {
		border-right: 0;
		border-bottom: 1px solid var(--c-border-strong-inv);
	}
}

@media (max-width: 767px) {
	.customer-panel-hero {
		padding-block: var(--sp-10) var(--sp-8);
	}

	.customer-panel-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.customer-panel-hero__back {
		width: 100%;
		justify-content: center;
	}

	.customer-panel-section {
		padding-block: var(--sp-8) var(--sp-14);
	}

	.customer-panel-shell__header,
	.customer-panel-shell__app {
		padding: var(--sp-6);
	}
}