/*
 * MeemClub single Store styles.
 * Loaded only on single "stores" pages.
 * RTL, mobile-first, no external fonts, no hardcoded brand assets.
 */

.meemclub-store {
	--mc-radius: var(--mc-radius-lg, 16px);
	--mc-gap: 16px;
	--mc-fg: var(--mc-color-text, #0f172a);
	--mc-muted: var(--mc-color-text-secondary, #475569);
	--mc-line: var(--mc-color-border, #e2e8f0);
	--mc-accent: var(--mc-color-primary, var(--mc-color-primary, #065573));
	--mc-accent-strong: var(--mc-color-primary-dark, var(--mc-color-primary-dark, #044861));
	--mc-whatsapp: var(--mc-color-whatsapp, #25d366);
	--mc-card-bg: #0f2d24;

	direction: rtl;
	text-align: right;
	color: var(--mc-fg);
	max-width: 68rem;
	margin: 0 auto;
	padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
	line-height: var(--mc-line-height-body, 1.75);
}

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

.meemclub-store img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mc-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	padding: 0.75rem var(--mc-gutter, 1rem);
	font-size: var(--mc-font-small, 0.875rem);
	color: var(--mc-muted);
}

.mc-breadcrumbs a {
	color: var(--mc-accent-strong);
	text-decoration: none;
}

.mc-breadcrumbs a:hover {
	text-decoration: underline;
}

.mc-lifecycle-notice {
	margin: 0 16px 12px;
	padding: 10px 14px;
	border-radius: var(--mc-radius);
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
	font-size: var(--mc-font-small, 0.875rem);
}

.mc-lifecycle-notice p {
	margin: 0;
}

/* Integrated status notice (lifecycle / verification-pending offer) */
.mc-status-notice {
	display: grid;
	gap: 0.25rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--mc-radius-md, 0.75rem);
	border: 1px solid rgba(184, 106, 0, 0.28);
	background: #fff8ef;
	color: var(--meem-ink, #23303a);
}

.mc-status-notice__label {
	font-size: 0.95rem;
	font-weight: 800;
	color: #9a3412;
}

.mc-status-notice__body {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--meem-text-muted, #4b5c68);
}

.mc-status-notice__body p {
	margin: 0;
}

.mc-status-notice--lifecycle {
	margin-bottom: 0.75rem;
}

.mc-offer-block {
	padding: 1rem 1.05rem;
	margin: 0 0 1rem;
	border: 1px solid var(--meem-border, #d7e0e6);
	border-radius: var(--mc-radius-lg, 1rem);
	background: #fff;
	box-shadow: var(--mc-shadow-sm);
}

.mc-offer-block__pct {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem 0.65rem;
	margin-bottom: 0.55rem;
}

.mc-offer-block__num {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	color: var(--meem-coral, #f6a46c);
}

.mc-offer-block__pct-label {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--meem-text-muted, #4b5c68);
}

.mc-offer-block__title {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--mc-color-primary-dark, #044861);
}

.mc-offer-block__description {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--meem-ink, #23303a);
}

.mc-offer-block__description p {
	margin: 0 0 0.4rem;
}

.mc-offer-block__lead {
	margin: 0.65rem 0 0;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--meem-text-muted, #4b5c68);
}

.mc-profile-stack {
	padding-top: 0.85rem;
	padding-bottom: 1rem;
	max-width: 48rem;
}

.mc-section--compact {
	margin: 0.85rem 0;
	padding: 0;
}

.mc-section--compact .mc-section__title {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
}

.mc-section--compact .mc-section__body {
	font-size: 0.98rem;
	line-height: 1.6;
}

.mc-section--compact .mc-section__hint {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
}

.mc-section--qr .mc-qr-display {
	max-width: 8.5rem;
	height: auto;
}

.mc-followup--secondary {
	margin-block: 1.15rem 0.75rem;
}

/* ---------- Preview / unavailable ---------- */
.mc-preview-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	margin: 0;
	padding: 0.85rem 1rem;
	background: linear-gradient(90deg, rgba(6, 85, 115, 0.12), rgba(246, 164, 108, 0.18));
	border-bottom: 1px solid var(--mc-line);
	color: var(--mc-fg);
	font-size: var(--mc-font-small, 0.875rem);
}

.mc-preview-banner strong {
	color: var(--mc-accent-strong);
	font-weight: 800;
}

.mc-unavailable {
	padding: 4rem 1rem;
	text-align: center;
	max-width: 32rem;
	margin: 0 auto;
}

.mc-unavailable__title {
	margin: 0 0 0.75rem;
	font-size: var(--mc-font-h2, 1.5rem);
	color: var(--mc-accent-strong);
}

.mc-unavailable__body {
	margin: 0 0 1.5rem;
	color: var(--mc-muted);
}

.mc-empty-hint,
.mc-lead--empty {
	color: var(--mc-muted);
	font-size: var(--mc-font-small, 0.875rem);
	background: var(--mc-color-surface-muted, #f7fafb);
	border: 1px dashed var(--mc-line);
	border-radius: var(--mc-radius-md, 0.75rem);
	padding: 0.85rem 1rem;
}

/* ---------- Hero ---------- */
.mc-hero {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	background: #0a2f3d;
	margin: 0;
	isolation: isolate;
}

.meemclub-store--modern .mc-hero {
	min-height: 0;
}

.meemclub-store--modern .mc-hero.has-cover {
	min-height: clamp(180px, 28vw, 280px);
}

.mc-hero.has-cover {
	background-size: cover;
	background-position: center;
}

.mc-hero--no-cover,
.mc-hero--compact {
	background:
		linear-gradient(135deg, #f4f8fa 0%, #e8f1f5 55%, #dff0f6 100%);
	border-bottom: 1px solid var(--meem-border, #d7e0e6);
}

.mc-hero--no-cover .mc-hero__media,
.mc-hero--compact .mc-hero__media {
	display: none;
}

.mc-hero__media {
	position: absolute;
	inset: 0;
	background-image: var(--mc-hero-image, none);
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
	filter: saturate(1.05);
	z-index: 0;
}

.mc-hero.has-cover .mc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 32, 44, 0.25) 0%, rgba(4, 32, 44, 0.78) 70%, rgba(4, 32, 44, 0.92) 100%),
		radial-gradient(80% 60% at 100% 0%, rgba(246, 164, 108, 0.28), transparent 55%);
}

.mc-hero__overlay {
	position: relative;
	z-index: 1;
	background: transparent;
	padding: 1rem var(--mc-gutter, 1rem) 1.1rem;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
	max-width: 48rem;
	margin: 0 auto;
}

.mc-hero--compact .mc-hero__overlay,
.mc-hero--no-cover .mc-hero__overlay {
	color: var(--meem-ink, #23303a);
	padding-block: 1rem 1.05rem;
}

.mc-hero__identity {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.mc-hero__logo {
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 0.95rem;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--mc-shadow-sm);
	margin-bottom: 0;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 0.3rem;
	display: grid;
	place-items: center;
}

.mc-hero--compact .mc-hero__logo,
.mc-hero--no-cover .mc-hero__logo {
	border-color: var(--meem-border, #d7e0e6);
	box-shadow: none;
}

.mc-hero__logo--placeholder,
.mc-hero__logo--brand {
	display: grid;
	place-items: center;
	background: #044861;
	border-color: rgba(4, 72, 97, 0.35);
}

.mc-hero__logo--brand img {
	width: 72%;
	height: 72%;
	object-fit: contain;
}

.mc-followup--secondary {
	margin-block: 2rem 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--meem-border, #d7e0e6);
	border-radius: var(--mc-radius-md, 0.75rem);
	background: var(--meem-bg-subtle, #f7fafb);
}

.mc-followup__summary {
	font-weight: 700;
	cursor: pointer;
	color: var(--meem-text-muted, #4b5c68);
}

.mc-followup__body {
	margin-top: 1rem;
}

.mc-followup__hint {
	margin: 0 0 1rem;
	font-size: var(--mc-font-small, 0.9375rem);
	color: var(--meem-text-muted, #4b5c68);
	line-height: var(--mc-line-height-lead, 1.65);
}

.mc-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.mc-hero__copy {
	min-width: 0;
	flex: 1;
}

.mc-hero__title {
	margin: 0 0 6px;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	font-weight: 800;
	color: inherit;
	line-height: var(--mc-line-height-heading, 1.35);
	text-shadow: none;
}

.mc-hero.has-cover .mc-hero__title {
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.mc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mc-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(6, 85, 115, 0.08);
	color: var(--mc-color-primary-dark, #044861);
	font-size: 0.875rem;
	font-weight: 600;
}

.mc-hero.has-cover .mc-chip {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	backdrop-filter: blur(2px);
}

.mc-chip--category {
	background: rgba(6, 85, 115, 0.12);
	color: var(--mc-accent-strong, #044861);
	font-weight: 700;
}

.mc-hero.has-cover .mc-chip--category {
	background: rgba(255, 255, 255, 0.95);
	color: var(--mc-accent-strong);
}

.mc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(31, 122, 90, 0.95);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	width: fit-content;
}

.mc-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9cf6cf;
	box-shadow: 0 0 0 4px rgba(156, 246, 207, 0.3);
}

/* ---------- Container ---------- */
.mc-container {
	padding: 0 16px;
}

.mc-lead {
	color: var(--mc-muted);
	font-size: 1.02rem;
	margin: 18px 4px;
}

/* ---------- Contact strip ---------- */
.mc-contact-strip {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.mc-contact-strip__link {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border-radius: var(--mc-radius-md, 0.75rem);
	border: 1px solid var(--mc-line);
	background: #fff;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--mc-shadow-sm);
	transition: border-color 0.15s ease, transform 0.08s ease;
}

.mc-contact-strip__link:hover {
	border-color: rgba(6, 85, 115, 0.35);
	transform: translateY(-1px);
}

.mc-contact-strip__link--wa {
	border-color: rgba(37, 211, 102, 0.35);
	background: linear-gradient(180deg, #f3fff7, #fff);
}

.mc-contact-strip__label {
	font-size: var(--mc-font-label, 0.8125rem);
	color: var(--mc-muted);
	font-weight: 700;
}

.mc-contact-strip__value {
	font-weight: 800;
	color: var(--mc-accent-strong);
	word-break: break-word;
}

/* ---------- Discount box (legacy selectors kept for compatibility) ---------- */
.mc-discount {
	background: #fff;
	color: var(--meem-ink, #23303a);
	border-radius: var(--mc-radius-lg, 1rem);
	padding: 1rem 1.05rem;
	margin: 8px 0 18px;
	border: 1px solid var(--meem-border, #d7e0e6);
	box-shadow: var(--mc-shadow-sm);
}

.mc-discount--empty {
	background: #fff;
	color: var(--mc-fg);
	border: 1px solid var(--mc-line);
	box-shadow: none;
}

.mc-discount--empty .mc-discount__title {
	color: var(--mc-accent-strong);
}

.mc-discount--empty .mc-discount__description {
	color: var(--mc-muted);
	margin: 0;
}

.mc-discount__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--mc-color-primary-dark, #044861);
}

.mc-discount__description {
	margin: 0 0 1rem;
	line-height: 1.65;
}

.mc-discount__value {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.mc-discount__num {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;
	color: var(--meem-coral, #f6a46c);
}

.mc-discount__label {
	font-size: 0.95rem;
	opacity: 0.95;
	color: var(--meem-text-muted, #4b5c68);
}

/* ---------- CTA ---------- */
.mc-cta {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0 0 24px;
}

.mc-cta__primary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.625rem;
}

.mc-cta__secondary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.mc-cta__secondary .mc-btn {
	min-height: 44px;
	padding: 0.625rem 0.5rem;
	font-size: 0.875rem;
}

@media (min-width: 480px) {
	.mc-cta__primary {
		grid-template-columns: 1.4fr 1fr;
	}
}

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid var(--mc-line);
	background: #fff;
	color: var(--mc-fg);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	min-height: 52px;
	transition: transform 0.06s ease, box-shadow 0.15s ease;
}

.mc-btn:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.mc-btn:active {
	transform: translateY(1px);
}

.mc-btn--primary {
	background: var(--mc-accent);
	border-color: var(--mc-accent);
	color: #fff;
}

.mc-btn--whatsapp {
	background: var(--mc-whatsapp);
	border-color: var(--mc-whatsapp);
	color: #05341c;
}

/* ---------- Digital card ---------- */
.mc-card {
	margin: 4px 0 26px;
	animation: mc-fade 0.25s ease;
}

.mc-card[hidden] {
	display: none;
}

.mc-card__inner {
	background: radial-gradient(120% 120% at 100% 0%, #14664a 0%, var(--mc-card-bg) 60%);
	color: #eafff5;
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 16px 40px rgba(15, 45, 36, 0.35);
}

.mc-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.mc-card__brand {
	font-weight: 900;
	letter-spacing: 0.5px;
	font-size: 1.1rem;
}

.mc-card__badge {
	background: rgba(156, 246, 207, 0.18);
	border: 1px solid rgba(156, 246, 207, 0.4);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.mc-card__store {
	margin: 4px 0;
	font-size: 1.35rem;
	color: #fff;
}

.mc-card__discount {
	font-size: 2.4rem;
	font-weight: 900;
	color: #9cf6cf;
	margin: 6px 0 14px;
}

.mc-card__note {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
	font-size: 0.95rem;
}

.mc-card__note p {
	margin: 6px 0 0;
}

.mc-card__link {
	display: inline-block;
	margin-top: 8px;
	color: #9cf6cf;
	font-weight: 700;
	text-decoration: underline;
}

@keyframes mc-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Sections ---------- */
.mc-section {
	border-top: 1px solid var(--mc-line);
	padding: 1.5rem 0;
}

.mc-section--surface {
	background: var(--mc-color-surface-muted, #f8fafc);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-lg, 1rem);
	padding: 1.25rem;
	margin: 1rem 0;
}

.mc-section__title {
	font-size: var(--mc-font-h4, 1.125rem);
	font-weight: 800;
	margin: 0 0 0.75rem;
	color: var(--mc-accent-strong);
}

.mc-section__body {
	color: var(--mc-fg);
}

/* ---------- Gallery ---------- */
.mc-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.mc-gallery__item {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f3f7;
	aspect-ratio: 4 / 3;
}

.mc-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Contact list ---------- */
.mc-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.mc-contact li {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 0.5rem 1rem;
	padding: 0.875rem 1rem;
	background: var(--mc-color-surface, #fff);
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-md, 0.75rem);
	box-shadow: var(--mc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.mc-contact__label {
	color: var(--mc-muted);
	font-weight: 700;
}

.mc-contact a {
	color: var(--mc-accent-strong);
	text-decoration: none;
	word-break: break-word;
}

.mc-qr-display,
.mc-section--qr img {
	max-width: 12rem;
	margin: 0 auto;
	border-radius: var(--mc-radius-md, 0.75rem);
	border: 1px solid var(--mc-line);
	padding: 0.5rem;
	background: #fff;
}

.mc-similar {
	margin-top: 1.5rem;
	padding-top: 0.5rem;
}

.meemclub-store--modern .mc-container.mc-profile-layout {
	padding-top: 1.25rem;
}

.meemclub-store--modern .mc-breadcrumbs {
	max-width: 68rem;
	margin: 0 auto;
}

@media (min-width: 720px) {
	.mc-profile-layout {
		display: grid;
		grid-template-columns: 1.25fr 0.75fr;
		gap: 1.5rem;
		align-items: start;
	}

	.mc-profile-layout__main {
		min-width: 0;
	}

	.mc-profile-layout__aside .mc-discount {
		margin-top: 0;
		position: sticky;
		top: 1rem;
	}

	.mc-contact-strip {
		grid-template-columns: repeat(3, 1fr);
	}

	.mc-cta {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.mc-cta__primary {
		grid-template-columns: 1.5fr 1fr;
	}

	.mc-cta__secondary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mc-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.mc-hero.has-cover .mc-hero__overlay {
		min-height: 220px;
		padding: 28px 24px 22px;
	}

	.mc-hero--compact .mc-hero__overlay,
	.mc-hero--no-cover .mc-hero__overlay {
		min-height: 0;
		padding: 1.1rem 1.25rem 1.15rem;
	}

	.mc-hero.has-cover .mc-hero__logo {
		width: 5.25rem;
		height: 5.25rem;
	}

	.mc-hero--compact .mc-hero__logo,
	.mc-hero--no-cover .mc-hero__logo {
		width: 4.5rem;
		height: 4.5rem;
	}

	.meemclub-store {
		padding-bottom: 40px;
	}
}

/* ---------- Prominent CTA on small screens ---------- */
@media (max-width: 719px) {
	.mc-cta {
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(6px);
		padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
		margin-inline: -16px;
		border-top: 1px solid var(--mc-line);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mc-card,
	.mc-btn {
		animation: none;
		transition: none;
	}
}