/**
 * MeemClub Production V1 — design tokens and shared components.
 * Arabic-first RTL; mobile-first; Gate 1 art direction.
 * Primary typeface: Cairo (Google Fonts) — single Arabic family site-wide.
 */

:root {
	/* Approved MeemClub brand tokens (guidelines v1.0) */
	--meem-teal: #065573;
	--meem-coral: #f6a46c;
	--meem-ink: #23303a;
	--meem-warm-tint: #fff4ec;
	--meem-text-muted: #4b5c68;
	--meem-bg-subtle: #f7fafb;
	--meem-border: #d7e0e6;
	--meem-success: #0f7a4d;
	--meem-warning: #b86a00;
	--meem-error: #b42318;

	/* Compatibility aliases used across MeemClub CSS */
	--mc-color-primary: var(--meem-teal);
	--mc-color-primary-dark: #044861;
	--mc-color-secondary: #044861;
	--mc-color-accent: var(--meem-coral);
	--mc-color-success: var(--meem-success);
	--mc-color-warning: var(--meem-warning);
	--mc-color-error: var(--meem-error);
	--mc-color-surface: #ffffff;
	--mc-color-surface-alt: var(--meem-warm-tint);
	--mc-color-surface-muted: var(--meem-bg-subtle);
	--mc-color-text: var(--meem-ink);
	--mc-color-text-secondary: var(--meem-text-muted);
	--mc-color-border: var(--meem-border);
	--mc-color-whatsapp: #25d366;

	/* Typography — Cairo only (loaded via Google Fonts enqueue) */
	--mc-font-family: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
	--mc-font-h1: clamp(2.25rem, 5vw, 3.5rem);
	--mc-font-h2: clamp(1.75rem, 3.5vw, 2.5rem);
	--mc-font-h3: clamp(1.3rem, 2.5vw, 1.75rem);
	--mc-font-h4: 1.2rem;
	--mc-font-h5: 1.0625rem;
	--mc-font-h6: 1rem;
	--mc-font-body-lg: clamp(1.0625rem, 1.5vw, 1.1875rem);
	--mc-font-body: 1.0625rem;
	--mc-font-small: 0.9375rem;
	--mc-font-label: 0.875rem;
	--mc-font-button: 1rem;
	--mc-font-meta: 0.875rem;
	--mc-line-height-tight: 1.3;
	--mc-line-height-heading: 1.3;
	--mc-line-height-lead: 1.65;
	--mc-line-height-body: 1.75;

	/* Layout */
	--mc-page-max: 72rem;
	--mc-content-narrow: 42rem;
	--mc-section-spacing: clamp(2.75rem, 5.5vw, 4.5rem);
	--mc-card-gap: 1.25rem;
	--mc-gutter: clamp(1rem, 3vw, 1.5rem);
	--mc-radius-sm: 0.5rem;
	--mc-radius-md: 0.75rem;
	--mc-radius-lg: 1rem;
	--mc-radius-xl: 1.25rem;
	--mc-shadow-sm: 0 1px 2px rgba(35, 48, 58, 0.05);
	--mc-shadow-md: 0 6px 20px rgba(35, 48, 58, 0.07);
	--mc-shadow-lg: 0 14px 36px rgba(35, 48, 58, 0.1);
	--mc-focus-ring: 0 0 0 3px rgba(6, 85, 115, 0.35);
}

/* Base typography — force Cairo on public chrome (Elementor/Astra/forms) */
html,
body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-heading-title,
.elementor-button,
.ast-header-break-point,
.main-header-menu,
.main-header-menu a {
	font-family: var(--mc-font-family) !important;
}

body {
	font-family: var(--mc-font-family);
	font-size: var(--mc-font-body);
	font-weight: 400;
	color: var(--mc-color-text);
	line-height: var(--mc-line-height-body);
	background:
		radial-gradient(1200px 500px at 100% 0%, rgba(246, 164, 108, 0.07), transparent 60%),
		radial-gradient(900px 420px at 0% 10%, rgba(6, 85, 115, 0.05), transparent 55%),
		#ffffff;
}

/*
 * Arabic-first RTL baseline: MeemClub public surfaces read right-to-left
 * with right-aligned copy unless a component intentionally centers.
 */
body.rtl,
html[dir="rtl"] body {
	direction: rtl;
	text-align: right;
}

.meemclub-directory,
.meemclub-store,
.meemclub-application-page,
.meemclub-site-footer,
.meemclub-marketing-page,
.meemclub-home-elementor,
.meemclub-header-ctas {
	direction: rtl;
	text-align: right;
	unicode-bidi: isolate;
}

.meemclub-directory label,
.meemclub-directory input,
.meemclub-directory select,
.meemclub-directory textarea,
.meemclub-store label,
.meemclub-store input,
.meemclub-store select,
.meemclub-store textarea,
.meemclub-application-form label,
.meemclub-application-form input,
.meemclub-application-form select,
.meemclub-application-form textarea,
.meemclub-application-page__intro,
.meemclub-application-page__benefits,
.meemclub-application-page__header .entry-title {
	direction: rtl;
	text-align: right;
}

body.rtl .elementor-widget-heading .elementor-heading-title,
body.rtl .elementor-widget-text-editor,
body.rtl .elementor-widget-text-editor *,
html[dir="rtl"] .elementor-widget-heading .elementor-heading-title,
html[dir="rtl"] .elementor-widget-text-editor {
	text-align: right;
}

body.rtl .ast-builder-menu,
body.rtl .main-header-menu,
html[dir="rtl"] .ast-builder-menu,
html[dir="rtl"] .main-header-menu {
	direction: rtl;
	text-align: right;
}

.mc-h1,
.meemclub-section__title--hero {
	font-size: var(--mc-font-h1);
	line-height: var(--mc-line-height-heading);
	font-weight: 800;
	margin: 0 0 0.75rem;
	color: var(--mc-color-primary-dark);
	letter-spacing: -0.01em;
}

.mc-h2,
.meemclub-section__title {
	font-size: var(--mc-font-h2);
	line-height: var(--mc-line-height-heading);
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: var(--mc-color-primary-dark);
}

.mc-h3 { font-size: var(--mc-font-h3); font-weight: 700; margin: 0 0 0.5rem; line-height: var(--mc-line-height-heading); }
.mc-h4 { font-size: var(--mc-font-h4); font-weight: 700; margin: 0 0 0.5rem; line-height: var(--mc-line-height-heading); }
.mc-lead { font-size: var(--mc-font-body-lg); color: var(--mc-color-text-secondary); margin: 0 0 1rem; line-height: var(--mc-line-height-lead); max-width: 40rem; font-weight: 500; }
.mc-small { font-size: var(--mc-font-small); color: var(--mc-color-text-secondary); }
.mc-label { font-size: var(--mc-font-label); font-weight: 600; color: var(--mc-color-text-secondary); }

/* Buttons */
.mc-btn,
.meemclub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--mc-radius-md);
	border: 1px solid transparent;
	font-size: var(--mc-font-button);
	font-weight: 700;
	line-height: var(--mc-line-height-tight);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mc-btn:focus-visible,
.meemclub-btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: var(--mc-focus-ring);
}

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

.mc-btn--primary:hover,
.meemclub-btn--primary:hover {
	background: var(--mc-color-primary-dark);
	border-color: var(--mc-color-primary-dark);
	color: #fff;
}

.mc-btn--secondary,
.meemclub-btn--secondary {
	background: var(--mc-color-surface-alt);
	color: var(--mc-color-primary-dark);
	border-color: #a8c5d2;
}

.mc-btn--outline,
.meemclub-btn--outline {
	background: var(--mc-color-surface);
	color: var(--mc-color-primary-dark);
	border-color: var(--mc-color-border);
}

.mc-btn--accent,
.meemclub-btn--accent {
	background: var(--mc-color-accent);
	color: var(--meem-ink, #23303a);
	border-color: var(--mc-color-accent);
}

.mc-btn--accent:hover,
.meemclub-btn--accent:hover {
	background: #e89355;
	border-color: #e89355;
	color: var(--meem-ink, #23303a);
}

.meemclub-cta-banner--accent .meemclub-btn--outline,
.meemclub-cta-banner--accent .meemclub-btn--inverse {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-color: #fff;
}

.meemclub-cta-banner--accent .meemclub-btn--outline:hover,
.meemclub-cta-banner--accent .meemclub-btn--outline:focus-visible,
.meemclub-cta-banner--accent .meemclub-btn--inverse:hover,
.meemclub-cta-banner--accent .meemclub-btn--inverse:focus-visible {
	background: #fff;
	color: var(--mc-color-primary-dark);
	border-color: #fff;
}

.mc-btn--whatsapp,
.meemclub-btn--whatsapp {
	background: var(--mc-color-whatsapp);
	color: #fff;
	border-color: var(--mc-color-whatsapp);
}

/* Surfaces */
.mc-surface,
.meemclub-surface {
	background: var(--mc-color-surface);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-lg);
	box-shadow: var(--mc-shadow-sm);
}

.mc-surface--alt {
	background: var(--mc-color-surface-alt);
	border-color: #d7e8ef;
}

/* Badges & chips */
.mc-badge,
.meemclub-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: var(--mc-font-small);
	font-weight: 700;
	background: var(--meem-warm-tint, #fff4ec);
	color: var(--mc-color-primary-dark);
}

.mc-chip,
.meemclub-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: var(--mc-font-small);
	background: var(--mc-color-surface-muted);
	color: var(--mc-color-text-secondary);
	border: 1px solid var(--mc-color-border);
}

.mc-chip--active,
.meemclub-chip--active {
	background: var(--meem-warm-tint, #fff4ec);
	color: var(--mc-color-primary-dark);
	border-color: #a8c5d2;
}

/* Alerts & empty states */
.mc-alert {
	padding: 1rem 1.25rem;
	border-radius: var(--mc-radius-md);
	border: 1px solid var(--mc-color-border);
	background: var(--mc-color-surface-muted);
}

.mc-empty-state {
	text-align: right;
	padding: 2.5rem 1.5rem;
	border-radius: var(--mc-radius-lg);
	background: var(--mc-color-surface-muted);
	border: 1px dashed var(--mc-color-border);
}

.mc-empty-state__title {
	font-size: var(--mc-font-h3);
	margin: 0 0 0.5rem;
}

/* Section rhythm */
.meemclub-section {
	padding-block: var(--mc-section-spacing);
}

.meemclub-section--tight {
	padding-block: calc(var(--mc-section-spacing) * 0.6);
}

.meemclub-section__header {
	max-width: var(--mc-content-narrow);
	margin: 0 0 1.5rem auto;
	text-align: right;
}

/* CTA banner */
.meemclub-cta-banner {
	background: linear-gradient(135deg, var(--mc-color-primary), var(--mc-color-secondary));
	color: #fff;
	border-radius: var(--mc-radius-xl);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: right;
	box-shadow: var(--mc-shadow-md);
}

.meemclub-cta-banner .mc-h2,
.meemclub-cta-banner .meemclub-section__title {
	color: #fff;
}

/* Forms */
.meemclub-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.meemclub-form-field label {
	font-size: var(--mc-font-label);
	font-weight: 600;
	color: var(--mc-color-text-secondary);
}

.meemclub-form-field input,
.meemclub-form-field select,
.meemclub-form-field textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-sm);
	font: inherit;
	background: var(--mc-color-surface);
}