/**
 * Athath Core — baseline styles for the configurator, quotation form and
 * showroom cards. Design tokens come from the theme; these are the fallbacks
 * so the plugin is usable with any theme.
 */

:root {
	--athath-ink: #16161b;
	--athath-muted: #6f6e7a;
	--athath-line: #e6e2dc;
	--athath-gold: #d09253;
	--athath-gold-dark: #b57a3f;
	--athath-cream: #faf4ee;
	--athath-sand: #f0ddca;
	--athath-radius: 12px;
	--athath-radius-sm: 8px;
}

/* ---------- Set configurator ---------- */

.athath-builder {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.athath-option {
	margin: 0;
	padding: 0;
	border: 0;
}

.athath-option__legend {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: 0;
	margin-bottom: .6rem;
	font-weight: 600;
	color: var(--athath-ink);
}

.athath-option__value {
	color: var(--athath-muted);
	font-weight: 400;
}

.athath-option__choices {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.athath-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.athath-choice input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.athath-choice__swatch {
	display: block;
	width: 42px;
	height: 42px;
	border: 2px solid transparent;
	border-radius: var(--athath-radius-sm);
	box-shadow: inset 0 0 0 1px var(--athath-line);
	background-size: cover;
	background-position: center;
	transition: border-color .15s ease, transform .15s ease;
}

.athath-choice input:checked + .athath-choice__swatch {
	border-color: var(--athath-ink);
	transform: scale(1.04);
}

.athath-choice input:focus-visible + .athath-choice__swatch,
.athath-choice input:focus-visible + .athath-choice__text {
	outline: 2px solid var(--athath-gold);
	outline-offset: 2px;
}

.athath-choice__text {
	display: block;
	padding: .5rem .95rem;
	border: 1px solid var(--athath-line);
	border-radius: 999px;
	font-size: .9rem;
	line-height: 1.2;
	transition: border-color .15s ease, background .15s ease;
}

.athath-choice input:checked + .athath-choice__text {
	border-color: var(--athath-ink);
	background: var(--athath-cream);
	font-weight: 600;
}

/* ---------- Pieces ---------- */

.athath-pieces {
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius);
	padding: 1rem 1.1rem;
	background: #fff;
}

.athath-pieces__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .85rem;
	font-size: 1rem;
}

.athath-pieces__count {
	font-size: .82rem;
	font-weight: 400;
	color: var(--athath-muted);
}

.athath-pieces__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.athath-piece {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--athath-line);
}

.athath-piece:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.athath-piece__media img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: var(--athath-radius-sm);
	object-fit: cover;
}

.athath-piece__info {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.athath-piece__label {
	font-weight: 600;
	color: var(--athath-muted);
	transition: color .15s ease;
}

.athath-piece.is-active .athath-piece__label {
	color: var(--athath-ink);
}

.athath-piece__hint,
.athath-piece__included {
	font-size: .78rem;
	color: var(--athath-muted);
}

.athath-piece__included {
	color: var(--athath-gold-dark);
}

.athath-piece__price {
	font-size: .85rem;
	font-weight: 600;
	color: var(--athath-ink);
}

.athath-piece__select {
	max-width: 150px;
	padding: .4rem .5rem;
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius-sm);
	background: #fff;
}

/* ---------- Stepper ---------- */

.athath-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--athath-line);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	flex: 0 0 auto;
}

.athath-stepper__btn {
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	color: var(--athath-ink);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.athath-stepper__btn:hover:not(:disabled) {
	background: var(--athath-cream);
}

.athath-stepper__btn:disabled,
.athath-stepper__btn[aria-disabled="true"] {
	opacity: .35;
	cursor: not-allowed;
}

.athath-stepper__btn[aria-disabled="true"]:hover {
	background: transparent;
}

.athath-stepper__input {
	width: 44px;
	height: 38px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--athath-line);
	text-align: center;
	font-weight: 600;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.athath-stepper__input::-webkit-outer-spin-button,
.athath-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Notes and summary ---------- */

.athath-notes label {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	font-weight: 600;
	margin-bottom: .4rem;
}

.athath-notes__hint {
	font-weight: 400;
	font-size: .8rem;
	color: var(--athath-muted);
}

.athath-notes textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius-sm);
	font: inherit;
	resize: vertical;
}

.athath-summary {
	padding: .9rem 1.1rem;
	border-radius: var(--athath-radius);
	background: var(--athath-cream);
}

.athath-summary__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.athath-summary__label {
	font-weight: 600;
}

.athath-summary__price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--athath-ink);
}

.athath-summary__price del {
	font-size: .9rem;
	color: var(--athath-muted);
}

.athath-summary__errors:empty {
	display: none;
}

.athath-summary__errors {
	margin: .5rem 0 0;
	color: #b3261e;
	font-size: .85rem;
}

.athath-builder__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.athath-builder__submit {
	flex: 1 1 220px;
	min-height: 52px;
	border-radius: 999px;
	background: var(--athath-gold);
	color: #fff;
	border: 0;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background .15s ease;
}

.athath-builder__submit:hover:not(:disabled) {
	background: var(--athath-gold-dark);
}

.athath-builder__submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.athath-builder__quote a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .8rem 1rem;
	border: 1px dashed var(--athath-line);
	border-radius: var(--athath-radius);
	text-decoration: none;
	color: var(--athath-ink);
}

.athath-builder__quote a:hover {
	border-color: var(--athath-gold);
}

.athath-line-amount {
	color: var(--athath-muted);
}

/* ---------- Language switcher ---------- */

.athath-lang {
	position: relative;
	flex: 0 0 auto;
}

.athath-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	min-height: 42px;
	padding: 0 .6rem;
	border: 1px solid var(--athath-line);
	border-radius: 999px;
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	color: var(--athath-ink);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.athath-lang__toggle:hover {
	border-color: var(--athath-gold);
	background: var(--athath-cream);
}

.athath-lang__caret {
	transition: transform .2s ease;
}

.athath-lang__toggle[aria-expanded="true"] .athath-lang__caret {
	transform: rotate(180deg);
}

.athath-lang__list {
	position: absolute;
	inset-block-start: calc(100% + .4rem);
	inset-inline-end: 0;
	z-index: 60;
	min-width: 150px;
	margin: 0;
	padding: .3rem;
	list-style: none;
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius-sm);
	background: #fff;
	box-shadow: 0 12px 30px rgba(22, 22, 27, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.athath-lang__toggle[aria-expanded="true"] + .athath-lang__list {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.athath-lang__link {
	display: block;
	padding: .5rem .7rem;
	border-radius: 6px;
	font-size: .88rem;
	text-decoration: none;
	color: var(--athath-ink);
}

.athath-lang__link:hover {
	background: var(--athath-cream);
}

.athath-lang__link.is-current {
	font-weight: 700;
	color: var(--athath-gold-dark);
}

/* In the mobile drawer the switcher is a plain row, not a dropdown. */
.athath-drawer__foot .athath-lang__toggle {
	display: none;
}

.athath-drawer__foot .athath-lang__list {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	display: flex;
	gap: .4rem;
	margin-block-end: .75rem;
}

.athath-drawer__foot .athath-lang__link {
	border: 1px solid var(--athath-line);
	border-radius: 999px;
	padding: .45rem .9rem;
}

/* ---------- Breadcrumbs ---------- */

.athath-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .85rem;
}

.athath-breadcrumbs__item + .athath-breadcrumbs__item::before {
	content: "\203A";
	margin-inline-end: .4rem;
	color: var(--athath-muted);
}

.athath-breadcrumbs__item--current {
	color: var(--athath-gold-dark);
}

/* ---------- Quotation form ---------- */

.athath-quote__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.athath-quote .athath-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
}

.athath-quote .athath-field--full {
	margin-top: 1rem;
}

.athath-quote label {
	font-weight: 600;
	font-size: .9rem;
}

.athath-quote input,
.athath-quote select,
.athath-quote textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius-sm);
	font: inherit;
	background: #fff;
}

.athath-quote__honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.athath-quote__submit {
	min-height: 52px;
	padding-inline: 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--athath-gold);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.athath-quote__errors {
	padding: .8rem 1rem;
	margin-bottom: 1rem;
	border-radius: var(--athath-radius-sm);
	background: #fdecea;
	color: #b3261e;
}

.athath-quote__errors ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.athath-quote__success {
	padding: 1.5rem;
	border-radius: var(--athath-radius);
	background: var(--athath-cream);
}

/* ---------- Showrooms ---------- */

.athath-locations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.athath-location-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--athath-line);
	border-radius: var(--athath-radius);
	overflow: hidden;
	background: #fff;
}

.athath-location-card__media img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.athath-location-card__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1rem 1.1rem 1.2rem;
}

.athath-location-card__title {
	margin: 0;
	font-size: 1.05rem;
}

.athath-location-card__title a {
	color: inherit;
	text-decoration: none;
}

.athath-location-card__address {
	margin: 0;
	color: var(--athath-muted);
	font-size: .9rem;
}

.athath-location-card__hours {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	color: var(--athath-muted);
}

.athath-location-card__hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.athath-location-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .3rem;
}

.athath-location-card__action {
	padding: .45rem .9rem;
	border: 1px solid var(--athath-line);
	border-radius: 999px;
	font-size: .82rem;
	text-decoration: none;
	color: var(--athath-ink);
}

.athath-location-card__action:hover {
	border-color: var(--athath-gold);
	background: var(--athath-cream);
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	.athath-piece {
		flex-wrap: wrap;
	}

	.athath-piece__info {
		flex: 1 1 100%;
		order: 1;
	}

	.athath-piece__media {
		order: 0;
	}

	.athath-piece__variant {
		order: 2;
		flex: 1 1 auto;
	}

	.athath-piece__select {
		max-width: none;
		width: 100%;
	}

	.athath-stepper {
		order: 3;
	}

	.athath-builder__submit {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Price on request
   ========================================================================== */

.athath-on-request {
	font-weight: 600;
	white-space: nowrap;
}

.athath-btn--whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	/* Matches the buy button it replaces, so the page keeps its rhythm when a
	   set is quoted rather than priced. */
	min-height: 48px;
	padding: .75rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: #25d366;
	color: #06301a;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}

.athath-btn--whatsapp:hover,
.athath-btn--whatsapp:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #06301a;
}

.athath-builder__whatsapp {
	flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
	.athath-btn--whatsapp {
		transition: none;
	}

	.athath-btn--whatsapp:hover,
	.athath-btn--whatsapp:focus-visible {
		transform: none;
	}
}

.athath-builder__branch {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0 0 .75rem;
	flex: 1 1 100%;
	font-size: .88rem;
}

.athath-builder__branch-select {
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid rgba(22, 22, 27, .18);
	border-radius: 12px;
	background: #fff;
	font: inherit;
}
