/* Salud Lab Cupones — frontend */

:root {
	--slc-purple: #4a2c6a;
	--slc-purple-soft: #6b3d8f;
	--slc-teal: #2a9d8f;
	--slc-danger: #c0392b;
	--slc-border: #e6e0ee;
	--slc-bg: #faf8fc;
	--slc-muted: #6b6575;
	--slc-ok: #1e7a4a;
}

.slc-enroll-wrap {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.75rem 0;
	width: 100%;
	max-width: 320px;
}

.slc-enroll-btn {
	background: var(--slc-teal) !important;
	border-color: var(--slc-teal) !important;
	color: #fff !important;
	cursor: pointer;
}

.slc-enroll-btn:hover,
.slc-enroll-btn:focus {
	filter: brightness(0.95);
}

button.slc-enroll-btn.button,
a.slc-enroll-login {
	border-radius: 56px !important;
	margin: auto 15px !important;
	text-align: center !important;
}

/* Producto ya inscrito */
.slc-enroll-btn.is-enrolled {
	background: #666666 !important;
	border-color: #666666 !important;
}

button.slc-enroll-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.slc-enroll-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
	margin: 0;
}

.slc-enroll-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.slc-enroll-btn--compact {
	font-size: 0.85rem;
	padding: 0.4rem 0.8rem;
}

.slc-enroll-message {
	font-size: 0.9rem;
	line-height: 1.35;
	padding: 0.5rem 0.65rem;
	border-radius: 4px;
	background: var(--slc-bg);
	border: 1px solid var(--slc-border);
}

.slc-enroll-message.is-success {
	border-color: #b7e0c7;
	color: var(--slc-ok);
	background: #f0faf4;
}

.slc-enroll-message.is-error {
	border-color: #f0c4c0;
	color: var(--slc-danger);
	background: #fff5f4;
}

.slc-enroll-message.is-info {
	border-color: #d5c8e8;
	color: var(--slc-purple);
}

/* Mis cupones — grilla de cards */
.slc-my-coupons {
	margin: 1rem 0 2rem;
}

.slc-my-coupons__notice {
	margin: 0 0 1.5rem;
	margin-bottom: 12px !important;
	white-space: normal !important;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-style: normal !important;
	color: #000 !important;
}

.slc-my-coupons__title {
	color: var(--slc-purple);
	font-size: 1.5rem;
	margin: 0 0 0.35rem;
}

.slc-my-coupons__rut {
	color: var(--slc-muted);
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.slc-my-coupons__loading,
.slc-my-coupons__empty,
.slc-notice {
	padding: 1rem;
	background: var(--slc-bg);
	border: 1px solid var(--slc-border);
	border-radius: 6px;
	color: var(--slc-muted);
}

.slc-notice--error,
.slc-my-coupons__error {
	color: var(--slc-danger);
	background: #fff5f4;
	border: 1px solid #f0c4c0;
	border-radius: 6px;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}

.slc-coupons-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

ul.slc-shortcodes-list {
	margin: 0;
	list-style: none;
}

ul.slc-coupons-list {
	margin: 0;
}

.slc-coupon-item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--slc-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(74, 44, 106, 0.06);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.slc-coupon-item:hover {
	border-color: #d5c8e8;
	box-shadow: 0 6px 18px rgba(74, 44, 106, 0.1);
}

.slc-coupon-item__image img {
	width: 100%;
	height: 140px;
	object-fit: contain;
	display: block;
	background: #fff;
	border: 1px solid var(--slc-border);
	border-radius: 6px;
}

.slc-coupon-item__body {
	flex: 1;
	min-width: 0;
}

.slc-coupon-item__name {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #222;
}

.slc-coupon-item__name a {
	color: inherit;
	text-decoration: none;
}

.slc-coupon-item__name a:hover {
	color: var(--slc-purple);
}

.slc-coupon-item__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--slc-muted);
	line-height: 1.5;
	/* El tema aplica white-space sin salto a estos párrafos */
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.slc-coupon-item__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--slc-border);
}

.slc-coupon-item__badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
}

.slc-coupon-item__badge--active {
	background: #e6f6ed;
	color: var(--slc-ok);
}

.slc-coupon-item__badge--expired {
	background: #f3f1f5;
	color: var(--slc-muted);
}

.slc-coupon-item__units {
	font-size: 0.9rem;
	color: var(--slc-purple);
	font-weight: 600;
}

.slc-coupon-item__badge {
	margin-left: auto;
}

.slc-coupon-item__price {
	margin-right: auto;
}

@media (max-width: 1100px) {
	.slc-coupons-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.slc-coupons-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.slc-coupons-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stores map: filtros + resultados a la izquierda, mapa sticky a la derecha */
.slc-stores {
	margin: 1rem 0 2rem;
	display: grid;
	grid-template-columns: minmax(280px, 2fr) 3fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"filters map"
		"list    map";
	gap: 0 1.5rem;
}

.slc-stores__filters {
	grid-area: filters;
	min-width: 0;
}

.slc-stores__list-wrap {
	grid-area: list;
	min-width: 0;
}

.slc-stores__map-col {
	grid-area: map;
	align-self: start;
	position: sticky;
	top: var(--slc-sticky-top, 1.5rem);
	min-width: 0;
	transition: top 0.2s ease;
}

.admin-bar .slc-stores__map-col {
	--slc-sticky-top: calc(32px + 1.5rem);
}

/* Al hacer scroll el mapa baja 110px (espacio para el header fijo del tema) */
.slc-stores.is-scrolled .slc-stores__map-col {
	--slc-sticky-top: 110px;
}

.admin-bar .slc-stores.is-scrolled .slc-stores__map-col {
	--slc-sticky-top: calc(32px + 130px);
}

@media (min-width: 861px) {
	.slc-stores.is-scrolled .slc-stores__map {
		height: min(var(--slc-map-height, 480px), calc(100vh - 110px - 1.5rem));
	}
}

.slc-stores__toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.slc-stores__locate,
.slc-stores__search-btn {
	background: var(--slc-teal) !important;
	border-color: var(--slc-teal) !important;
	color: #fff !important;
	width: 100%;
	text-align: center;
}

.slc-stores__radius,
.slc-stores__city {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
	font-size: 0.9rem;
	color: var(--slc-muted);
}

.slc-stores__radius select,
.slc-stores__city select {
	width: 100%;
}

.slc-stores__status {
	font-size: 0.9rem;
	color: var(--slc-muted);
	margin-bottom: 0.5rem;
}

.slc-stores__status.is-error {
	color: var(--slc-danger);
}

.slc-stores__hint {
	font-size: 0.85rem;
	color: var(--slc-muted);
	margin: 0;
}

.slc-stores__map {
	width: 100%;
	height: min(var(--slc-map-height, 480px), calc(100vh - 3rem));
	min-height: 320px;
	border: 1px solid var(--slc-border);
	border-radius: 8px;
	overflow: hidden;
	background: #e8eef2;
	z-index: 1;
}

.slc-stores__list-title {
	margin: 1.25rem 0 0.5rem;
	color: var(--slc-purple);
	font-size: 1.15rem;
}

.slc-stores__chain {
	margin-bottom: 1rem;
}

.slc-stores__chain-name {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
	color: #333;
}

.slc-stores__store {
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--slc-border);
	border-radius: 4px;
	margin-bottom: 0.4rem;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.slc-stores__store:hover,
.slc-stores__store.is-active {
	border-color: var(--slc-teal);
}

.slc-stores__store-name {
	font-weight: 600;
	margin: 0 0 0.15rem;
}

.slc-stores__store-addr {
	margin: 0;
	font-size: 0.88rem;
	color: var(--slc-muted);
}

@media (max-width: 860px) {
	.slc-stores {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"filters"
			"map"
			"list";
	}

	.slc-stores__map-col {
		position: static;
		margin-top: 0.75rem;
	}

	.slc-stores__map {
		height: min(var(--slc-map-height, 480px), 60vh);
	}
}