/* =========================================================================
   ZoomShape — Клубна карта (REVOLT CLUB)

   Един SVG за четирите ранга. Разликата е само в цвета на очите, който
   идва от класа върху обвивката: zs-card--gain / --power / --beast / --revolt

   Цветовете идват от --zs-* променливите в style.css на child темата,
   със стойности за резерв.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Картата
   ---------------------------------------------------------------------- */

.zs-card {
	display: block;
	width: 100%;
	max-width: 34rem;
	margin: 0 0 1.5rem;
	line-height: 0;
}

.zs-card svg {
	display: block;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   2. Очите по ранг

   id бие class по специфичност, затова тези правила надделяват над
   запълването, което Илюстратор е записал в самото SVG.
   ---------------------------------------------------------------------- */

.zs-card--gain #zs-eye-l,
.zs-card--gain #zs-eye-r {
	fill: #5A5250;
}

.zs-card--power #zs-eye-l,
.zs-card--power #zs-eye-r {
	fill: #FFFFFF;
}

.zs-card--beast #zs-eye-l,
.zs-card--beast #zs-eye-r {
	fill: #E8927A;
}

.zs-card--revolt #zs-eye-l,
.zs-card--revolt #zs-eye-r {
	fill: var(--zs-accent, #F43C12);
}

/* -------------------------------------------------------------------------
   3. Ранг и прогрес под картата
   ---------------------------------------------------------------------- */

.zs-card-meta {
	max-width: 34rem;
	margin: 0 0 1.5rem;
	font-family: var(--zs-text, Inter), sans-serif;
	color: var(--zs-dark, #2F4858);
}

.zs-card-meta__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 0.0625rem solid var(--zs-line, #DFE5E8);
}

.zs-card-meta__row:last-child {
	border-bottom: 0;
}

.zs-card-meta__label {
	font-size: 0.875rem;
	color: var(--zs-muted, #8FA0AC);
}

.zs-card-meta__value {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Woo връща сумата в <span class="woocommerce-Price-amount"> — изравняваме я. */
.zs-card-meta__value .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.zs-card-progress {
	height: 0.375rem;
	margin-top: 0.75rem;
	background: var(--zs-tint, #F4F6F7);
}

.zs-card-progress span {
	display: block;
	height: 100%;
	background: var(--zs-accent, #F43C12);
}

/* -------------------------------------------------------------------------
   4. Четирите ранга
   ---------------------------------------------------------------------- */

.zs-card-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.125rem;
	max-width: 34rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zs-card-tiers__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem 0.75rem;
	background: var(--zs-tint, #F4F6F7);
	font-family: var(--zs-text, Inter), sans-serif;
	color: var(--zs-muted, #8FA0AC);
}

.zs-card-tiers__item strong {
	font-family: var(--zs-head, Play), sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--zs-dark, #2F4858);
}

.zs-card-tiers__item span {
	font-size: 0.75rem;
	white-space: nowrap;
}

.zs-card-tiers__item span .woocommerce-Price-amount {
	color: inherit;
}

.zs-card-tiers__item.is-current {
	background: var(--zs-dark, #2F4858);
	color: #FFFFFF;
}

.zs-card-tiers__item.is-current strong {
	color: var(--zs-accent, #F43C12);
}

/* -------------------------------------------------------------------------
   5. Телефон
   ---------------------------------------------------------------------- */

@media (max-width: 48rem) {

	.zs-card-tiers {
		grid-template-columns: repeat(2, 1fr);
	}

	.zs-card-meta__row {
		flex-direction: column;
		gap: 0.125rem;
	}
}


/* =========================================================================
   Клубна карта — двуколонна подредба
   Добавя се В КРАЯ на assets/card.css. Правилата са с по-висока
   специфичност от съществуващите, защото минават през .zs-card-side,
   така че нищо отгоре не трябва да се пипа.
   ====================================================================== */

.zs-card-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

.zs-card-layout > .zs-card {
	margin: 0;
	max-width: none;
}

.zs-card-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* -------------------------------------------------------------------------
   Ранг и прогрес
   ---------------------------------------------------------------------- */

.zs-card-side .zs-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.zs-card-side .zs-card-meta__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--zs-line, #DFE5E8);
}

.zs-card-side .zs-card-meta__label {
	font-family: var(--zs-text, Inter), sans-serif;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--zs-muted, #8FA0AC);
}

.zs-card-side .zs-card-meta__value {
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--zs-dark, #2F4858);
}

.zs-card-side .zs-card-progress {
	margin-top: .25rem;
}

/* -------------------------------------------------------------------------
   Четирите ранга — вертикален списък
   ---------------------------------------------------------------------- */

.zs-card-side .zs-card-tiers {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--zs-line, #DFE5E8);
}

.zs-card-side .zs-card-tiers__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .875rem 1rem;
	background: transparent;
	border-bottom: 1px solid var(--zs-line, #DFE5E8);
	border-left: 3px solid transparent;
}

.zs-card-side .zs-card-tiers__item:last-child {
	border-bottom: 0;
}

.zs-card-side .zs-card-tiers__item strong {
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .06em;
	color: var(--zs-dark, #2F4858);
}

.zs-card-side .zs-card-tiers__item span {
	font-family: var(--zs-text, Inter), sans-serif;
	font-size: .8125rem;
	color: var(--zs-muted, #8FA0AC);
	white-space: nowrap;
}

/* Текущият ранг: бял текст върху тъмно синьо, акцентът е лентата отляво.
   Оранжево върху #2F4858 не се чете — двата цвята са твърде близки по
   светлота. */

.zs-card-side .zs-card-tiers__item.is-current {
	background: var(--zs-dark, #2F4858);
	border-left-color: var(--zs-accent, #F43C12);
}

.zs-card-side .zs-card-tiers__item.is-current strong {
	color: #FFFFFF;
}

.zs-card-side .zs-card-tiers__item.is-current span {
	color: #B9C4CB;
}

/* -------------------------------------------------------------------------
   Таблет и надолу — колоните се разгъват една под друга
   ---------------------------------------------------------------------- */

@media (max-width: 60rem) {

	.zs-card-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}


/* =========================================================================
   WPGens Loyalty Program — привеждане към стила на ZoomShape (v2)

   ЗАМЕНЯ предишния WPGens блок в assets/card.css изцяло.
   Изтрий стария (от неговия начален коментар до края на файла) и сложи
   този на негово място.

   Всички селектори минават през .woocommerce-MyAccount-content, защото
   плъгинът печата <style> тагове вътре в body — те идват по-късно от
   card.css и биха спечелили при равна специфичност.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Секцията и контейнерът — вън сивият фон и центрирането
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-section {
	padding: 0;
	background-color: transparent;
	text-align: left;
}

.woocommerce-MyAccount-content .wpgens-loyalty-container {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Остри ръбове навсякъде в блока — правилото на сайта. */

.woocommerce-MyAccount-content [class*="wpgens-"] {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   Заглавната част — свита до един ред, за да не изяжда екрана
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-section-hero {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	text-align: left;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--zs-line, #DFE5E8);
}

.woocommerce-MyAccount-content .wpgens-loyalty-section-hero h1,
.woocommerce-MyAccount-content .wpgens-loyalty-section-hero h2,
.woocommerce-MyAccount-content .wpgens-loyalty-section-hero h3 {
	margin: 0;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--zs-dark, #2F4858);
}

.woocommerce-MyAccount-content .wpgens-loyalty-section-hero p {
	margin: 0;
	text-align: left;
	font-family: var(--zs-text, Inter), sans-serif;
	font-size: .9375rem;
	color: var(--zs-body, #3D5969);
}

/* Иконата — малка, на реда, а не като илюстрация над него. */

.woocommerce-MyAccount-content .wpgens-loyalty-section-hero svg {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	color: var(--zs-accent, #F43C12);
}

/* -------------------------------------------------------------------------
   Две колони: табовете вляво, съдържанието вдясно

   Външният .wpgens-loyalty-listing държи лентата с табовете и всички
   панели като свои деца. Скритите панели са display:none и не заемат
   клетка, така че видимият винаги ляга в дясната колона на първи ред.
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-container > .wpgens-loyalty-listing {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: 0 2.5rem;
	align-items: start;
	margin-top: 1.5rem;
}

.woocommerce-MyAccount-content .wpgens-loyalty-container > .wpgens-loyalty-listing > *:not(.wpgens-loyalty-tabs){
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-MyAccount-content .wpgens-loyalty-tabs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	border-bottom: 0;
	border-right: 1px solid var(--zs-line, #DFE5E8);
}

.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab] {
	padding: .75rem 1rem;
	text-align: left;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zs-muted, #8FA0AC);
	cursor: pointer;
	border-bottom: 0;
	border-left: 3px solid transparent;
	transition: color .15s ease;
}

.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab]:hover {
	color: var(--zs-dark, #2F4858);
}

/* Активният таб повтаря жеста на менюто на профила отляво. */

.woocommerce-MyAccount-content .wpgens-loyalty-tabs span.tab-active {
	color: var(--zs-accent, #F43C12);
	border-left-color: var(--zs-accent, #F43C12);
}

/* -------------------------------------------------------------------------
   Съдържанието на панелите — на цялата ширина на дясната колона
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-listing,
.woocommerce-MyAccount-content .wpgens-loyalty-refer-a-friend,
.woocommerce-MyAccount-content .wpgens-loyalty-points-stats,
.woocommerce-MyAccount-content .wpgens-loyalty-listing-inner,
.woocommerce-MyAccount-content .wpgens-raf-text,
.woocommerce-MyAccount-content .wpgens-raf-body {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

.woocommerce-MyAccount-content .wpgens-loyalty-container > .wpgens-loyalty-listing > *:not(.wpgens-loyalty-tabs) {
	margin-top: 0;
}

.woocommerce-MyAccount-content .wpgens-loyalty-listing-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--zs-line, #DFE5E8);
	font-family: var(--zs-text, Inter), sans-serif;
	color: var(--zs-body, #3D5969);
}

.woocommerce-MyAccount-content .wpgens-loyalty-refer-a-friend h2,
.woocommerce-MyAccount-content .wpgens-loyalty-points-stats h2 {
	margin: 0 0 .5rem;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--zs-dark, #2F4858);
}

/* -------------------------------------------------------------------------
   Полетата в „Покани приятел“
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-raf-field label {
	font-family: var(--zs-text, Inter), sans-serif;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--zs-muted, #8FA0AC);
}

.woocommerce-MyAccount-content .wpgens-raf-field input[type="text"],
.woocommerce-MyAccount-content .wpgens-raf-field input[type="email"] {
	border: 1px solid var(--zs-line, #DFE5E8);
	font-family: var(--zs-text, Inter), sans-serif;
	color: var(--zs-body, #3D5969);
}

/* -------------------------------------------------------------------------
   Бутоните
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-button,
.woocommerce-MyAccount-content .wpgens-default-button {
	height: auto;
	line-height: 1;
	padding: .875rem 1.5rem;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	background-color: var(--zs-accent, #F43C12);
	color: #FFFFFF;
}

.woocommerce-MyAccount-content .wpgens-loyalty-button:hover,
.woocommerce-MyAccount-content .wpgens-default-button:hover {
	opacity: 1;
	background-color: var(--zs-accent-dark, #D2340F);
}

/* Плъгинът дава зелено за налична награда — извън палитрата на сайта. */

.woocommerce-MyAccount-content .wpgens-loyalty-button.available {
	background-color: var(--zs-dark, #2F4858);
	color: #FFFFFF;
}

.woocommerce-MyAccount-content .wpgens-loyalty-button.used {
	background-color: var(--zs-tint, #F4F6F7);
	color: var(--zs-muted, #8FA0AC);
}

/* -------------------------------------------------------------------------
   Картите на ранговете
   ---------------------------------------------------------------------- */

.woocommerce-MyAccount-content .wpgens-loyalty-ranks-container {
	gap: 1rem;
	margin: 1.5rem 0 0;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.woocommerce-MyAccount-content .wpgens-loyalty-rank-card {
	background: #FFFFFF;
	border: 1px solid var(--zs-line, #DFE5E8);
	padding: 1.25rem;
}

.woocommerce-MyAccount-content .wpgens-loyalty-rank-card:hover {
	border-color: var(--zs-muted, #8FA0AC);
	box-shadow: none;
}

/* Текущият ранг: тъмно синьо с акцентна лента отгоре, без градиент. */

.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank {
	background: var(--zs-dark, #2F4858);
	border-color: var(--zs-dark, #2F4858);
	border-top: 3px solid var(--zs-accent, #F43C12);
}

.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank,
.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank * {
	color: #FFFFFF;
}

.woocommerce-MyAccount-content .wpgens-loyalty-rank-header {
	text-align: left;
	margin-bottom: .75rem;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce-MyAccount-content .wpgens-loyalty-rank-badge {
	justify-content: flex-start;
	margin-bottom: .75rem;
}

/* -------------------------------------------------------------------------
   Таблет и надолу — табовете се връщат в хоризонтална лента
   ---------------------------------------------------------------------- */

@media (max-width: 60rem) {

	.woocommerce-MyAccount-content .wpgens-loyalty-container > .wpgens-loyalty-listing {
		display: block;
	}

	.woocommerce-MyAccount-content .wpgens-loyalty-tabs {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--zs-line, #DFE5E8);
		margin-bottom: 1.5rem;
	}

	.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab] {
		white-space: nowrap;
		border-left: 0;
		border-bottom: 3px solid transparent;
		margin-bottom: -1px;
	}

	.woocommerce-MyAccount-content .wpgens-loyalty-tabs span.tab-active {
		border-bottom-color: var(--zs-accent, #F43C12);
	}
}


.woocommerce-MyAccount-content .wpgens-loyalty-listing[data-tab-content="ranks"] > div:first-child {
	border: 1px solid var(--zs-line, #DFE5E8);
	padding: 1.25rem;
}

.woocommerce-MyAccount-content .wpgens-loyalty-listing[data-tab-content="ranks"] h2,
.woocommerce-MyAccount-content .wpgens-loyalty-listing[data-tab-content="ranks"] h3,
.woocommerce-MyAccount-content .wpgens-loyalty-listing[data-tab-content="ranks"] h4 {
	margin: 0 0 .75rem;
	font-family: var(--zs-head, Play), sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--zs-dark, #2F4858);
}


.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank h2,
.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank h3,
.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank h4,
.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank .wpgens-loyalty-rank-header,
.woocommerce-MyAccount-content .wpgens-loyalty-rank-card.current-rank .wpgens-loyalty-rank-header * {
	color: #FFFFFF !important;
}


.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab]:focus,
.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab]:focus-visible {
	outline: none;
	box-shadow: none;
}


.woocommerce-MyAccount-content .wpgens-loyalty-listing-redeem {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}



/* Нивата се показват на картата в /my-account/karta/. Табът „Нива“ на
   WPGens брои само поръчките след активирането на плъгина и показва
   различно число, затова се скрива. */

.woocommerce-MyAccount-content .wpgens-loyalty-tabs span[data-tab="ranks"] {
	display: none;
}