/**
 * Clubs Away Configurator.
 *
 * Colours follow the Clubs Away brand: deep teal ground, coral accent, white
 * type. Every value is a custom property, so the Elementor widget's style
 * controls can override any of them per placement, and a site-wide change can
 * be made once here or in the theme.
 *
 * The teal and coral defaults were sampled from the approved configurator
 * mock-up rather than guessed.
 */

.cac {
	--cac-ground: #003847;
	--cac-ground-deep: #002c39;
	--cac-ground-lift: #00434f;
	--cac-accent: #e2978a;
	--cac-accent-hover: #ef9386;
	--cac-text: #ffffff;
	--cac-muted: rgba(255, 255, 255, 0.72);
	--cac-faint: rgba(255, 255, 255, 0.5);
	--cac-border: rgba(255, 255, 255, 0.22);
	--cac-surface: rgba(255, 255, 255, 0.05);
	/* Text laid over a category colour. White fails contrast on all four of
	   them at body sizes, so anything on a coloured surface sits dark. */
	--cac-on-colour: #0b2b33;
	--cac-item-bg: #00424e;
	--cac-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--cac-radius: 10px;
	--cac-radius-sm: 6px;
	--cac-gap: 1.5rem;
	--cac-columns: 3;

	position: relative;
	padding: 2rem clamp(1rem, 4vw, 3rem) 6rem;
	background: radial-gradient(120% 80% at 50% 0%, var(--cac-ground-lift), var(--cac-ground) 55%, var(--cac-ground-deep));
	color: var(--cac-text);
	font-family: var(--cac-font);
	container-type: inline-size;
}

.cac h1,
.cac h2,
.cac h3,
.cac h4,
.cac p,
.cac label,
.cac button,
.cac input,
.cac select,
.cac textarea,
.cac th,
.cac td {
	font-family: var(--cac-font);
}

.cac *,
.cac *::before,
.cac *::after {
	box-sizing: border-box;
}

/* Several of these elements are display:flex or display:grid, which beats the
   browser default for [hidden]. Without this they stay visible when hidden. */

.cac [hidden] {
	display: none !important;
}

.cac img {
	max-width: 100%;
}

/* Out of reach until an extra has been chosen. Kept clickable so the reason
   can be given, rather than the click doing nothing at all. */

.cac .is-locked {
	opacity: 0.4;
	cursor: not-allowed;
}

.cac .cac-card--category.is-locked:hover img,
.cac .cac-card--category.is-locked:hover::after {
	opacity: 1;
}

.cac .cac-card--category.is-locked:hover .cac-card__title {
	color: #fff !important;
}

/* Category rail -------------------------------------------------------- */

.cac-rail {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 2.5rem;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}

.cac-rail__item {
	flex: 0 0 auto;
}

.cac-rail__button {
	display: block;
	width: 9.5rem;
	padding: 0.5rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--cac-radius);
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.cac-rail__button img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--cac-radius-sm);
}

.cac-rail__label {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.95rem;
}

.cac-rail__button.is-selected {
	border-color: var(--cac-border);
}

.cac-rail__button.is-selected {
	border-color: var(--cac-cat, var(--cac-border));
	box-shadow: inset 0 -3px 0 var(--cac-cat, var(--cac-accent));
}

.cac-rail__button.is-selected .cac-rail__label {
	color: var(--cac-cat, var(--cac-accent));
}

.cac-rail__button:focus-visible {
	outline: 2px solid var(--cac-accent);
	outline-offset: 2px;
}

/* Summary panel -------------------------------------------------------- */

.cac-summary {
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--cac-surface);
	border: 1px solid var(--cac-border);
	border-radius: var(--cac-radius);
}

.cac-summary__heading {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cac-muted);
}

.cac-summary__progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}

.cac-summary__step {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cac-faint);
	font: inherit;
	font-size: 0.92rem;
	cursor: pointer;
}

.cac-summary__index {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.78rem;
	line-height: 1;
}

.cac-summary__step.is-done {
	color: var(--cac-text);
}

.cac-summary__step.is-current {
	color: var(--cac-text);
	font-weight: 600;
}

.cac-summary__step.is-current .cac-summary__index {
	background: var(--cac-accent);
	border-color: var(--cac-accent);
	color: #fff;
}

.cac-summary__step:focus-visible {
	outline: 2px solid var(--cac-accent);
	outline-offset: 3px;
}

.cac-summary__items {
	margin: 0;
	padding: 1rem 0 0;
	list-style: none;
	border-top: 1px solid var(--cac-border);
}

.cac-summary__item {
	background: var(--cac-cat, transparent);
	color: var(--cac-on-colour);
	margin-bottom: 0.4rem;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
	border-radius: var(--cac-radius-sm);
	border-bottom: none;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		'name amount remove'
		'meta amount remove';
	align-items: center;
	gap: 0 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--cac-border);
}

.cac-summary__item:last-child {
	margin-bottom: 0;
}

.cac-summary__item .cac-summary__meta,
.cac-summary__item .cac-summary__amount {
	color: var(--cac-on-colour);
}

.cac-summary__item .cac-summary__meta {
	opacity: 0.78;
}

.cac-summary__item .cac-summary__edit,
.cac-summary__item .cac-summary__remove {
	border-color: rgba(11, 43, 51, 0.35);
	color: var(--cac-on-colour);
}

.cac-summary__item .cac-summary__edit:hover,
.cac-summary__item .cac-summary__remove:hover {
	border-color: var(--cac-on-colour);
	color: var(--cac-on-colour);
	background: rgba(255, 255, 255, 0.35);
}

.cac-summary__name {
	grid-area: name;
	font-weight: 600;
}

.cac-summary__meta {
	grid-area: meta;
	color: var(--cac-muted);
	font-size: 0.85rem;
}

.cac-summary__amount {
	grid-area: amount;
	color: var(--cac-accent);
	font-weight: 600;
	white-space: nowrap;
}

.cac-summary__actions {
	grid-area: remove;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cac-summary__edit {
	padding: 0.32em 0.9em;
	background: none;
	border: 1px solid var(--cac-border);
	border-radius: var(--cac-radius-sm);
	color: var(--cac-text);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.cac-summary__edit:hover {
	border-color: var(--cac-accent);
	color: var(--cac-accent);
}

.cac-summary__edit:focus-visible,
.cac-summary__remove:focus-visible {
	outline: 2px solid var(--cac-accent);
	outline-offset: 2px;
}

.cac-summary__remove {
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	background: none;
	border: 1px solid var(--cac-border);
	border-radius: 50%;
	color: var(--cac-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.cac-summary__remove:hover {
	border-color: var(--cac-accent);
	color: var(--cac-accent);
}

.cac-summary__empty {
	margin: 0;
	padding-top: 0.2rem;
	color: var(--cac-muted);
	font-size: 0.92rem;
}

@container (max-width: 560px) {
	.cac-summary__item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			'name remove'
			'meta remove'
			'amount remove';
	}
}

/* Steps ---------------------------------------------------------------- */

.cac-step {
	outline: none;
}

.cac-step__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cac-text);
}

.cac-step--intro .cac-step__heading {
	margin-top: 2em;
	margin-bottom: 2em;
	color: var(--cac-accent);
	text-align: center;
}

.cac-step__intro {
	margin: 0 0 var(--cac-gap);
	max-width: 62ch;
	color: var(--cac-muted);
}

.cac-selection {
	margin: 0 0 var(--cac-gap);
	color: var(--cac-muted);
}

/* Grid and cards ------------------------------------------------------- */

.cac-grid {
	display: grid;
	grid-template-columns: repeat(var(--cac-columns), minmax(0, 1fr));
	gap: var(--cac-gap);
	margin: 0 0 var(--cac-gap);
	padding: 0;
	list-style: none;
}

.cac-grid--categories {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
}

@container (max-width: 1000px) {
	.cac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cac-grid--categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 560px) {
	.cac-grid { grid-template-columns: 1fr; }
	.cac-grid--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Category card: the image fills the tile, with the name laid over it.
   Hovering (or selecting) fades the photograph out to the category's own
   colour. The scrim stays put underneath the title either way, so the white
   text keeps its contrast over both the photograph and the colour. */

.cac-card--category {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--cac-card-ratio, 4 / 5);
	/* Floor for anything that does not honour aspect-ratio: without it the
	   absolutely positioned image leaves the tile with no height at all. */
	min-height: 13rem;
	padding: 0;
	overflow: hidden;
	background: var(--cac-cat, var(--cac-ground-lift));
	border: 0;
	border-radius: var(--cac-radius);
	color: #fff;
	font: inherit;
	font-family: var(--cac-font);
	text-align: left;
	cursor: pointer;
}

.cac-card--category img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: opacity 0.25s ease;
}

.cac-card--category::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.45) 34%,
		rgba(0, 0, 0, 0.08) 68%,
		rgba(0, 0, 0, 0) 100%
	);
	transition: opacity 0.25s ease;
}

.cac-card--category .cac-card__title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0.9rem 1rem;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: color 0.25s ease;
}

/* Hover and selected show the category's colour flat: the photograph fades out
   and the scrim goes with it, so the tile is the colour itself rather than a
   darkened version of it. The title switches to the dark ink at the same time,
   because white does not hold contrast on any of the four. */

.cac-card--category:hover img,
.cac-card--category:focus-visible img,
.cac-card--category.is-selected img,
.cac-card--category:hover::after,
.cac-card--category:focus-visible::after,
.cac-card--category.is-selected::after {
	opacity: 0;
}

.cac-card--category:hover .cac-card__title,
.cac-card--category:focus-visible .cac-card__title,
.cac-card--category.is-selected .cac-card__title {
	color: var(--cac-on-colour);
	text-shadow: none;
}

.cac-card--category.is-selected {
	outline: 2px solid var(--cac-on-colour);
	outline-offset: -2px;
}

.cac-card--category:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Event card: full-bleed image with the name laid over it. */

.cac-card--event {
	position: relative;
	display: block;
	width: 100%;
	min-height: 22rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--cac-radius);
	background: var(--cac-ground-lift);
	color: inherit;
	font: inherit;
	text-align: left;
}

.cac-card--event > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cac-card--event::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 34, 44, 0.92) 0%, rgba(0, 34, 44, 0.35) 45%, rgba(0, 34, 44, 0.05) 100%);
}

.cac-card__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	min-height: 22rem;
	padding: 1.25rem;
}

.cac-card--event .cac-card__title {
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.cac-card--event .cac-card__meta,
.cac-card--event .cac-card__text {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
}

.cac-card--event.is-selected {
	border-color: var(--cac-accent);
}

.cac-card--event.is-unavailable > img {
	filter: grayscale(0.8);
}

/* Month picker, where the category asks for one. */

.cac-monthbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cac-monthbox label {
	color: var(--cac-muted);
	font-size: 0.85rem;
}

.cac-monthbox select {
	padding: 0.45rem 0.6rem;
	background: #fff;
	border: 0;
	border-radius: var(--cac-radius-sm);
	color: #00303d;
	font: inherit;
	font-size: 0.92rem;
	max-width: 11rem;
}

.cac-card__month {
	position: relative;
	z-index: 1;
	margin: 0.5rem 0 0.35rem;
}

.cac-card__month .cac-monthbox {
	flex-wrap: wrap;
}

.cac-card__month select {
	max-width: 100%;
}

.cac-card__month .cac-monthbox label {
	color: rgba(255, 255, 255, 0.85);
}

/* Guest entry and add control on the event card. */

.cac-card__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.cac-guestbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cac-guestbox input {
	width: 4.5rem;
	padding: 0.45rem 0.6rem;
	background: #fff;
	border: 0;
	border-radius: var(--cac-radius-sm);
	color: #00303d;
	font: inherit;
	font-weight: 600;
	text-align: center;
}

.cac-guestbox label {
	font-size: 1rem;
	color: #fff;
}

.cac-add {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	background: var(--cac-accent);
	border: 0;
	border-radius: var(--cac-radius-sm);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.cac-add:hover {
	background: var(--cac-accent-hover);
}

.cac-add[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.cac-flag {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}

.cac-flag--out {
	color: var(--cac-accent);
}

/* Event block on the add-ons step -------------------------------------- */

.cac-items {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-bottom: var(--cac-gap);
}

.cac-item {
	padding: 1.4rem;
	background: var(--cac-item-bg);
	border: 2px solid var(--cac-cat, var(--cac-border));
	border-radius: var(--cac-radius);
	color: var(--cac-text);
}

.cac-item__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--cac-border);
}

.cac-item__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.cac-item__meta {
	margin: 0.2rem 0 0;
	color: var(--cac-muted);
	font-size: 0.9rem;
}

.cac-item__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Brief highlight when the user arrives here from the summary's Edit control. */



.cac-guestbox--light label,
.cac-item .cac-monthbox label {
	color: var(--cac-muted);
	font-size: 0.9rem;
}

.cac-item.is-editing {
	box-shadow: 0 0 0 3px var(--cac-cat, var(--cac-accent));
}

/* Inside an event block, an add-on takes that category's colour for its
   artwork, its price and its add control, so the association carries all the
   way down to the card. */

.cac-item .cac-card__price {
	color: var(--cac-cat, var(--cac-accent));
}

.cac-item .cac-card--addon .cac-button {
	background: var(--cac-cat, var(--cac-accent));
	border-color: var(--cac-cat, var(--cac-accent));
	color: var(--cac-on-colour);
}

.cac-item .cac-card--addon .cac-button--ghost {
	background: transparent;
	color: var(--cac-cat, var(--cac-accent));
	border-color: var(--cac-cat, var(--cac-border));
}

.cac-item .cac-card--addon.is-selected {
	border-color: var(--cac-cat, var(--cac-accent));
	background: rgba(255, 255, 255, 0.06);
}

/* Add-on card ---------------------------------------------------------- */

.cac-card--addon {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: 1.1rem;
	background: var(--cac-surface);
	border: 1px solid var(--cac-border);
	border-radius: var(--cac-radius);
}

.cac-card--addon.is-selected {
	border-color: var(--cac-accent);
	background: rgba(226, 151, 138, 0.12);
}

.cac-card--addon .cac-card__media {
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.4rem;
}

.cac-card--addon .cac-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--cac-radius-sm);
}

/* Line art is masked rather than drawn, so it takes the category's colour. */

.cac-card__media--tinted {
	background-color: var(--cac-cat, var(--cac-accent));
	-webkit-mask: var(--cac-icon) center / contain no-repeat;
	mask: var(--cac-icon) center / contain no-repeat;
}

.cac-card--addon .cac-card__title {
	font-size: 1.1rem;
	font-weight: 600;
}

.cac-card__text {
	color: var(--cac-muted);
	font-size: 0.9rem;
}

.cac-card__price {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--cac-accent);
	font-weight: 600;
}

.cac-card__required {
	font-size: 0.8rem;
	color: var(--cac-faint);
}

.cac-card__qty {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--cac-muted);
}

.cac-card__qty-input {
	width: 4.5rem;
	padding: 0.35rem 0.5rem;
	background: #fff;
	border: 0;
	border-radius: var(--cac-radius-sm);
	color: #00303d;
	font: inherit;
	text-align: center;
}

/* Forms ---------------------------------------------------------------- */

.cac-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cac-field--wide {
	grid-column: 1 / -1;
}

.cac-field__label {
	font-size: 0.85rem;
	color: var(--cac-muted);
}

.cac input[type="text"],
.cac input[type="email"],
.cac input[type="number"],
.cac textarea {
	padding: 0.55rem 0.7rem;
	background: rgba(255, 255, 255, 0.96);
	border: 0;
	border-radius: var(--cac-radius-sm);
	color: #00303d;
	font: inherit;
}

.cac-client {
	margin-bottom: var(--cac-gap);
}

.cac-client__heading {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.cac-client__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.cac-guests {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--cac-gap);
	padding: 1rem 1.15rem;
	background: var(--cac-surface);
	border-radius: var(--cac-radius);
}

.cac-guests__label {
	font-weight: 600;
}

.cac-guests__hint {
	color: var(--cac-muted);
	font-size: 0.88rem;
}

/* Total bar ------------------------------------------------------------ */

.cac-total {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	margin: 2rem -1rem 0;
	padding: 1.1rem clamp(1rem, 4vw, 3rem);
	background: var(--cac-ground-deep);
	border-top: 1px solid var(--cac-border);
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}

.cac-total__value {
	color: var(--cac-accent);
	font-weight: 600;
}

.cac-total__vat {
	font-size: 0.85rem;
	color: var(--cac-muted);
}

/* Quote ---------------------------------------------------------------- */

.cac-quote__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--cac-gap);
}

.cac-quote__caption {
	text-align: left;
	padding-bottom: 1rem;
	color: var(--cac-cat, var(--cac-muted));
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.cac-quote__table th,
.cac-quote__table td {
	text-align: left;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--cac-border);
	font-weight: 400;
	vertical-align: top;
}

.cac-quote__amount {
	text-align: right;
	white-space: nowrap;
}

.cac-quote__basis,
.cac-quote__qty {
	display: block;
	color: var(--cac-faint);
	font-size: 0.82rem;
}

.cac-quote__total th,
.cac-quote__total td {
	padding-top: 1.1rem;
	border-bottom: none;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.cac-quote__total td {
	color: var(--cac-accent);
}

.cac-quote__table--totals {
	margin-top: 0.5rem;
}

.cac-quote__table--totals th {
	width: 100%;
}

/* Year view ------------------------------------------------------------ */

.cac-year {
	margin-bottom: var(--cac-gap);
}

.cac-year__heading {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.cac-year__year {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--cac-muted);
}

.cac-year__block + .cac-year__block {
	margin-top: 1.5rem;
}

.cac-year__months {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (max-width: 900px) {
	.cac-year__months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 520px) {
	.cac-year__months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cac-year__month {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-height: 6.5rem;
	padding: 0.7rem 0.75rem;
	background: var(--cac-surface);
	border: 1px solid var(--cac-border);
	border-radius: var(--cac-radius-sm);
}

/* An empty month is kept, and kept legible — the gap in the year is the
   point of showing it. */

.cac-year__month:not(.has-events) {
	background: transparent;
	border-style: dashed;
}

.cac-year__name {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cac-muted);
}

.cac-year__month.has-events .cac-year__name {
	color: var(--cac-text);
}

.cac-year__event {
	display: block;
	padding: 0.32rem 0.5rem;
	background: var(--cac-cat, var(--cac-accent));
	border-radius: 3px;
	color: var(--cac-on-colour);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.25;
}

/* A month an event runs into, rather than starts in: shown, but its money is
   counted against the month it began. */

.cac-year__event.is-carried {
	background: transparent;
	border: 1px dashed var(--cac-cat, var(--cac-accent));
	color: var(--cac-cat, var(--cac-accent));
}

.cac-year__total {
	margin-top: auto;
	padding-top: 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cac-text);
}

.cac-year__none {
	color: var(--cac-faint);
	font-size: 0.8rem;
}

.cac-year__sum {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0.75rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--cac-border);
	color: var(--cac-muted);
	font-size: 0.9rem;
}

.cac-year__sum-value {
	color: var(--cac-accent);
	font-size: 1.05rem;
	font-weight: 600;
}

/* USPs ----------------------------------------------------------------- */

.cac-usps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--cac-gap);
	margin-bottom: var(--cac-gap);
	padding: 1.5rem;
	background: var(--cac-surface);
	border-radius: var(--cac-radius);
}

.cac-usp__icon {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	margin-bottom: 0.5rem;
}

.cac-usp__heading {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	color: var(--cac-accent);
}

.cac-usp__body {
	margin: 0;
	color: var(--cac-muted);
	font-size: 0.92rem;
}

/* Actions and buttons -------------------------------------------------- */

.cac-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cac-button {
	display: inline-block;
	padding: 0.7em 1.5em;
	background: var(--cac-accent);
	border: 1px solid var(--cac-accent);
	border-radius: var(--cac-radius-sm);
	color: #fff;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.cac-button:hover {
	background: var(--cac-accent-hover);
	border-color: var(--cac-accent-hover);
	color: #fff;
}

.cac-button--ghost {
	background: transparent;
	color: var(--cac-text);
	border-color: var(--cac-border);
}

.cac-button--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--cac-text);
	color: var(--cac-text);
}

/* The download sits beside Save once a quote exists, and takes over as the
   primary action. */

.cac-button--document {
	background: var(--cac-accent);
	border-color: var(--cac-accent);
	color: #fff;
}

.cac-button--small {
	padding: 0.45em 1.1em;
	font-size: 0.9em;
}

.cac-button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.cac-button:focus-visible,
.cac-add:focus-visible,
.cac-card--event:focus-visible {
	outline: 2px solid var(--cac-accent);
	outline-offset: 3px;
}

/* Messages ------------------------------------------------------------- */

.cac-alert,
.cac-notice,
.cac-empty,
.cac-loading {
	padding: 0.9rem 1.1rem;
	background: rgba(0, 44, 57, 0.6);
	border: 1px solid var(--cac-border);
	border-radius: var(--cac-radius-sm);
	color: #fff;
	margin-bottom: 1.5rem;
}

.cac-alert--error,
.cac-alert--warning {
	border-color: var(--cac-accent);
	color: var(--cac-accent);
}

.cac-alert--success {
	border-color: #7fc9a4;
	color: #7fc9a4;
}

.cac-empty,
.cac-loading {
	grid-column: 1 / -1;
	color: var(--cac-muted);
	list-style: none;
}

/* The signed-out and no-data notices render outside .cac, so they carry
   their own colours rather than inheriting the configurator's. */

.cac-notice--locked,
.cac-notice--empty {
	background: #003847;
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cac * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Theme and Elementor overrides

   Elementor's global kit styles buttons, inputs, headings and links site-wide,
   and most themes style form controls as well. Those rules routinely beat a
   plugin's own, so the configurator restates the properties that matter.

   Everything here resolves through the --cac-* custom properties, so the
   Elementor widget's style controls still win: they set the variable, and
   these rules read it.
   --------------------------------------------------------------------------- */

.cac button,
.cac input,
.cac select,
.cac textarea {
	font-family: var(--cac-font) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	max-width: none !important;
	background-image: none !important;
}

.cac .cac-button,
.cac .cac-button:hover,
.cac .cac-button:focus {
	text-decoration: none !important;
	line-height: 1.2 !important;
	border-radius: var(--cac-radius-sm) !important;
}

.cac .cac-button {
	background-color: var(--cac-accent);
	border: 1px solid var(--cac-accent);
	color: #fff;
}

.cac .cac-button--ghost {
	background-color: transparent;
	color: var(--cac-text);
	border-color: var(--cac-border);
}

.cac .cac-item .cac-card--addon .cac-button {
	background-color: var(--cac-cat, var(--cac-accent));
	border-color: var(--cac-cat, var(--cac-accent));
	color: var(--cac-on-colour);
}

.cac .cac-item .cac-card--addon .cac-button--ghost {
	background-color: transparent;
	color: var(--cac-cat, var(--cac-accent));
	border-color: var(--cac-cat, var(--cac-border));
}

/* Every element the configurator draws as a <button> has to hold its own
   colours through hover, focus and active. A theme or Elementor rule written
   as button:hover is an element plus a pseudo-class, which outranks a single
   class selector — so it wins regardless of which stylesheet loads last, and
   restating the colours here is the only thing that settles it. */

.cac .cac-card--category,
.cac .cac-card--category:hover,
.cac .cac-card--category:focus,
.cac .cac-card--category:focus-visible,
.cac .cac-card--category:active,
.cac .cac-card--category.is-selected {
	background-color: var(--cac-cat, var(--cac-ground-lift)) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.cac .cac-card--category .cac-card__title {
	color: #fff !important;
}

.cac .cac-card--category:hover .cac-card__title,
.cac .cac-card--category:focus-visible .cac-card__title,
.cac .cac-card--category.is-selected .cac-card__title {
	color: var(--cac-on-colour) !important;
}

.cac .cac-rail__button,
.cac .cac-rail__button:hover,
.cac .cac-rail__button:focus,
.cac .cac-rail__button:active {
	background-color: transparent !important;
	background-image: none !important;
	color: inherit;
}

.cac .cac-add,
.cac .cac-add:hover,
.cac .cac-add:focus,
.cac .cac-add:active {
	background-color: var(--cac-accent) !important;
	background-image: none !important;
	color: #fff !important;
}

.cac .cac-summary__edit,
.cac .cac-summary__edit:hover,
.cac .cac-summary__remove,
.cac .cac-summary__remove:hover {
	background-color: transparent !important;
	background-image: none !important;
}

.cac .cac-button:hover,
.cac .cac-button:focus,
.cac .cac-button:active {
	background-color: var(--cac-accent-hover) !important;
	border-color: var(--cac-accent-hover) !important;
	color: #fff !important;
}

.cac .cac-button--document,
.cac .cac-button--document:hover,
.cac .cac-button--document:focus {
	background-color: var(--cac-accent) !important;
	border-color: var(--cac-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.cac .cac-button--ghost:hover,
.cac .cac-button--ghost:focus,
.cac .cac-button--ghost:active {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--cac-text) !important;
	color: var(--cac-text) !important;
}

.cac .cac-item .cac-card--addon .cac-button,
.cac .cac-item .cac-card--addon .cac-button:hover,
.cac .cac-item .cac-card--addon .cac-button:focus,
.cac .cac-item .cac-card--addon .cac-button:active {
	background-color: var(--cac-cat, var(--cac-accent)) !important;
	border-color: var(--cac-cat, var(--cac-accent)) !important;
	color: var(--cac-on-colour) !important;
}

.cac .cac-item .cac-card--addon .cac-button--ghost,
.cac .cac-item .cac-card--addon .cac-button--ghost:hover,
.cac .cac-item .cac-card--addon .cac-button--ghost:focus {
	background-color: transparent !important;
	color: var(--cac-cat, var(--cac-accent)) !important;
}

.cac input[type="text"],
.cac input[type="email"],
.cac input[type="number"],
.cac select,
.cac textarea {
	background-color: rgba(255, 255, 255, 0.96) !important;
	border: 0 !important;
	border-radius: var(--cac-radius-sm) !important;
	color: #00303d !important;
	width: auto;
}

.cac input[type="text"],
.cac input[type="email"],
.cac textarea {
	width: 100%;
}

.cac .cac-quote__caption {
	color: var(--cac-cat, var(--cac-muted)) !important;
	font-size: 1.2rem !important;
}

.cac h1,
.cac h2,
.cac h3,
.cac h4 {
	color: inherit;
	text-transform: none !important;
	letter-spacing: normal;
}

.cac .cac-step__heading {
	color: var(--cac-text);
}

.cac .cac-step--intro .cac-step__heading {
	color: var(--cac-accent);
}

.cac a {
	text-decoration: none;
}

/* Themes that decorate list items would otherwise put bullets through the
   card grids and the summary. */

.cac ul,
.cac ol {
	list-style: none;
}

.cac ul li::before,
.cac ol li::before,
.cac ul li::marker,
.cac ol li::marker {
	content: none !important;
}

/* Elementor's container queries can clamp descendants; the grids manage their
   own widths. */

.cac .cac-grid,
.cac .cac-items,
.cac .cac-summary {
	max-width: none !important;
}