/* ──────────────────────────────────────────────────────────────────
   مدير إكس — موقع التسويق والتفعيل
   Built on top of tokens.css (single source of truth, mirrors the
   desktop client). All colours / sizes come from --mx-* variables;
   never hard-coded.
   ────────────────────────────────────────────────────────────────── */

@import url('./tokens.css');

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    direction: rtl;
    font-family: var(--mx-font-body);
    font-size: var(--mx-text-base);
    line-height: var(--mx-text-base-lh);
    background: var(--mx-navy-950);
    color: var(--mx-paper);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: var(--mx-gold-500); text-decoration: none; transition: color var(--mx-duration-2) var(--mx-ease); }
a:hover { color: var(--mx-gold-400); }

/* ─── Layout ─── */

.mx-shell { display: flex; flex-direction: column; min-height: 100vh; }

.mx-nav {
    background: rgba(10, 24, 37, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--mx-border-soft);
    padding: var(--mx-space-4) var(--mx-space-5);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--mx-space-5);
    position: sticky; top: 0;
    z-index: var(--mx-z-sticky);
}
.mx-nav-brand {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-extra);
    font-size: var(--mx-text-xl);
    color: var(--mx-paper);
    display: flex; align-items: center; gap: var(--mx-space-2);
}
.mx-nav-brand .mx-mark { color: var(--mx-gold-500); font-family: var(--mx-font-poster); }
.mx-nav-links { display: flex; gap: var(--mx-space-4); font-size: var(--mx-text-sm); align-items: center; }
.mx-nav-links a { color: var(--mx-steel-200); padding: var(--mx-space-2) var(--mx-space-3); }
.mx-nav-links a:hover { color: var(--mx-gold-500); }
.mx-nav-cta {
    background: var(--mx-gold-500); color: var(--mx-navy-950) !important;
    padding: var(--mx-space-2) var(--mx-space-4) !important;
    border-radius: var(--mx-radius-md);
    font-weight: var(--mx-fw-semibold);
}
.mx-nav-cta:hover { background: var(--mx-gold-400); color: var(--mx-navy-950) !important; }

.mx-content { flex: 1; padding: var(--mx-space-7) var(--mx-space-5); max-width: 1180px; margin: 0 auto; width: 100%; }

.mx-footer {
    background: var(--mx-navy-900);
    border-top: var(--mx-border-soft);
    padding: var(--mx-space-7) var(--mx-space-5) var(--mx-space-5);
    color: var(--mx-steel-400);
    font-size: var(--mx-text-sm);
}
.mx-footer-grid {
    max-width: 1180px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mx-space-5);
    margin-bottom: var(--mx-space-6);
}
.mx-footer-grid h4 {
    color: var(--mx-paper);
    font-family: var(--mx-font-display);
    font-size: var(--mx-text-md);
    margin: 0 0 var(--mx-space-3) 0;
}
.mx-footer-grid ul { list-style: none; padding: 0; margin: 0; }
.mx-footer-grid li { margin-bottom: var(--mx-space-2); }
.mx-footer-grid a { color: var(--mx-steel-300); }
.mx-footer-grid a:hover { color: var(--mx-gold-500); }
.mx-footer-bottom {
    text-align: center;
    border-top: 1px solid var(--mx-navy-800);
    padding-top: var(--mx-space-4);
    color: var(--mx-steel-500);
    max-width: 1180px; margin: 0 auto;
}

/* ─── Hero ─── */

.mx-hero {
    text-align: center;
    padding: var(--mx-space-8) var(--mx-space-4) var(--mx-space-7);
    background:
        radial-gradient(ellipse at top, rgba(201, 163, 92, 0.12), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(44, 98, 152, 0.15), transparent 60%);
    border-radius: var(--mx-radius-xl);
    margin-bottom: var(--mx-space-7);
    position: relative;
    overflow: hidden;
}
.mx-hero-eyebrow {
    display: inline-block;
    background: rgba(201, 163, 92, 0.12);
    color: var(--mx-gold-400);
    padding: var(--mx-space-1) var(--mx-space-3);
    border-radius: var(--mx-radius-pill);
    font-size: var(--mx-text-sm);
    font-weight: var(--mx-fw-semibold);
    margin-bottom: var(--mx-space-4);
    border: 1px solid rgba(201, 163, 92, 0.25);
}
.mx-hero h1 {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-extra);
    font-size: clamp(32px, 5.5vw, 56px);
    line-height: 1.15;
    margin: 0 0 var(--mx-space-4) 0;
    color: var(--mx-paper);
}
.mx-hero h1 .mx-accent { color: var(--mx-gold-500); }
.mx-hero p.mx-lede {
    font-size: var(--mx-text-md);
    color: var(--mx-steel-200);
    max-width: 720px;
    margin: 0 auto var(--mx-space-6);
    line-height: 1.7;
}
.mx-hero-actions { display: flex; gap: var(--mx-space-3); justify-content: center; flex-wrap: wrap; }
.mx-trust {
    margin-top: var(--mx-space-5);
    display: flex; gap: var(--mx-space-5); justify-content: center; flex-wrap: wrap;
    font-size: var(--mx-text-sm);
    color: var(--mx-steel-400);
}
.mx-trust > div { display: flex; align-items: center; gap: var(--mx-space-2); }
.mx-trust .mx-check { color: var(--mx-success); font-weight: bold; }

/* ─── Section heading ─── */

.mx-section { padding: var(--mx-space-7) 0; }
.mx-section-head { text-align: center; margin-bottom: var(--mx-space-6); }
.mx-section-head h2 {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-bold);
    font-size: var(--mx-text-2xl);
    color: var(--mx-paper);
    margin: 0 0 var(--mx-space-2) 0;
}
.mx-section-head p {
    color: var(--mx-steel-300);
    font-size: var(--mx-text-md);
    max-width: 600px; margin: 0 auto;
}

/* ─── Card ─── */

.mx-card {
    background: var(--mx-navy-900);
    border: var(--mx-border-soft);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-5);
    transition: border-color var(--mx-duration-2) var(--mx-ease),
                transform var(--mx-duration-2) var(--mx-ease);
}
.mx-card-title {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-semibold);
    font-size: var(--mx-text-md);
    color: var(--mx-gold-500);
    margin: 0 0 var(--mx-space-3) 0;
}
.mx-card-paper {
    background: var(--mx-paper);
    color: var(--mx-navy-900);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-6);
    box-shadow: var(--mx-shadow-lg);
}

/* ─── Feature grid ─── */

.mx-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mx-space-4);
}
.mx-feature {
    background: var(--mx-navy-900);
    border: var(--mx-border-soft);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-5);
    transition: all var(--mx-duration-2) var(--mx-ease);
}
.mx-feature:hover {
    border-color: var(--mx-gold-700);
    background: var(--mx-navy-800);
}
.mx-feature .mx-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201, 163, 92, 0.12);
    border-radius: var(--mx-radius-md);
    font-size: 22px;
    margin-bottom: var(--mx-space-3);
}
.mx-feature h3 {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-semibold);
    color: var(--mx-paper);
    margin: 0 0 var(--mx-space-2) 0;
    font-size: var(--mx-text-md);
}
.mx-feature p {
    margin: 0;
    font-size: var(--mx-text-sm);
    color: var(--mx-steel-300);
    line-height: 1.6;
}

/* ─── Shop type chips ─── */

.mx-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mx-space-3);
}
.mx-shop {
    background: var(--mx-navy-900);
    border: var(--mx-border-soft);
    border-radius: var(--mx-radius-md);
    padding: var(--mx-space-4);
    text-align: center;
    transition: all var(--mx-duration-2) var(--mx-ease);
}
.mx-shop:hover { border-color: var(--mx-gold-600); background: var(--mx-navy-800); }
.mx-shop .mx-shop-icon { font-size: 28px; margin-bottom: var(--mx-space-2); }
.mx-shop h4 {
    font-family: var(--mx-font-display);
    font-size: var(--mx-text-sm);
    font-weight: var(--mx-fw-semibold);
    color: var(--mx-paper);
    margin: 0;
}

/* ─── Pricing ─── */

.mx-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mx-space-4);
    max-width: 1000px; margin: 0 auto;
}
.mx-price-card {
    background: var(--mx-navy-900);
    border: var(--mx-border-soft);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-6);
    text-align: center;
    position: relative;
    transition: all var(--mx-duration-2) var(--mx-ease);
}
.mx-price-card:hover { border-color: var(--mx-gold-600); transform: translateY(-4px); }
.mx-price-card.mx-recommended {
    border: 2px solid var(--mx-gold-500);
    background: linear-gradient(180deg, var(--mx-navy-800) 0%, var(--mx-navy-900) 100%);
}
.mx-price-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--mx-gold-500); color: var(--mx-navy-950);
    padding: var(--mx-space-1) var(--mx-space-3);
    border-radius: var(--mx-radius-pill);
    font-size: var(--mx-text-xs);
    font-weight: var(--mx-fw-bold);
}
.mx-price-card h3 {
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-bold);
    color: var(--mx-paper);
    font-size: var(--mx-text-lg);
    margin: 0 0 var(--mx-space-2);
}
.mx-price-amount {
    font-family: var(--mx-font-num);
    font-size: var(--mx-text-3xl);
    font-weight: var(--mx-fw-extra);
    color: var(--mx-gold-500);
    margin: var(--mx-space-3) 0 var(--mx-space-1);
    line-height: 1;
}
.mx-price-amount .mx-price-currency {
    font-size: var(--mx-text-md);
    color: var(--mx-steel-400);
    font-weight: var(--mx-fw-medium);
}
.mx-price-period {
    color: var(--mx-steel-300);
    font-size: var(--mx-text-sm);
    margin-bottom: var(--mx-space-4);
}
.mx-price-saving {
    background: var(--mx-success-soft);
    color: #B8E6C8;
    border-radius: var(--mx-radius-pill);
    padding: 2px var(--mx-space-2);
    font-size: var(--mx-text-xs);
    font-weight: var(--mx-fw-semibold);
    display: inline-block;
    margin-bottom: var(--mx-space-3);
}
.mx-price-features {
    list-style: none; padding: 0; margin: 0 0 var(--mx-space-5) 0;
    text-align: start;
}
.mx-price-features li {
    padding: var(--mx-space-2) 0;
    color: var(--mx-steel-200);
    font-size: var(--mx-text-sm);
    display: flex; align-items: center; gap: var(--mx-space-2);
}
.mx-price-features li::before { content: '✓'; color: var(--mx-success); font-weight: bold; }

/* ─── FAQ ─── */

.mx-faq { max-width: 760px; margin: 0 auto; }
.mx-faq details {
    background: var(--mx-navy-900);
    border: var(--mx-border-soft);
    border-radius: var(--mx-radius-md);
    margin-bottom: var(--mx-space-3);
    overflow: hidden;
}
.mx-faq summary {
    cursor: pointer;
    padding: var(--mx-space-4) var(--mx-space-5);
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-semibold);
    color: var(--mx-paper);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after {
    content: '+';
    color: var(--mx-gold-500);
    font-size: var(--mx-text-xl);
    transition: transform var(--mx-duration-2) var(--mx-ease);
}
.mx-faq details[open] summary::after { transform: rotate(45deg); }
.mx-faq details > div {
    padding: 0 var(--mx-space-5) var(--mx-space-5);
    color: var(--mx-steel-300);
    font-size: var(--mx-text-sm);
    line-height: 1.7;
}

/* ─── Forms ─── */

.mx-field { display: block; margin-bottom: var(--mx-space-3); }
.mx-field label {
    display: block; font-size: var(--mx-text-sm);
    font-weight: var(--mx-fw-semibold);
    margin-bottom: var(--mx-space-2);
    color: var(--mx-paper);
}
.mx-card-paper .mx-field label { color: var(--mx-navy-900); }

.mx-input, .mx-select, .mx-textarea {
    width: 100%;
    padding: var(--mx-space-3) var(--mx-space-4);
    background: white;
    color: var(--mx-navy-900);
    border: 1px solid var(--mx-steel-300);
    border-radius: var(--mx-radius-md);
    font-family: var(--mx-font-body);
    font-size: var(--mx-text-base);
    transition: border-color var(--mx-duration-1) var(--mx-ease),
                box-shadow var(--mx-duration-1) var(--mx-ease);
}
.mx-input:focus, .mx-select:focus, .mx-textarea:focus {
    outline: none;
    border-color: var(--mx-gold-500);
    box-shadow: 0 0 0 3px rgba(201,163,92,0.18);
}
.mx-textarea { resize: vertical; min-height: 80px; }
.mx-input[dir="ltr"], .mx-mono { font-family: var(--mx-font-mono); }

.mx-button {
    display: inline-block;
    padding: var(--mx-space-3) var(--mx-space-5);
    background: var(--mx-gold-500);
    color: var(--mx-navy-950);
    border: none;
    border-radius: var(--mx-radius-md);
    font-family: var(--mx-font-display);
    font-weight: var(--mx-fw-bold);
    font-size: var(--mx-text-base);
    cursor: pointer;
    transition: all var(--mx-duration-1) var(--mx-ease);
    text-decoration: none;
    text-align: center;
}
.mx-button:hover {
    background: var(--mx-gold-400);
    color: var(--mx-navy-950);
    transform: translateY(-1px);
    box-shadow: var(--mx-shadow-gold);
}
.mx-button-secondary {
    background: transparent;
    border: 1px solid var(--mx-navy-700);
    color: var(--mx-paper);
}
.mx-button-secondary:hover {
    background: var(--mx-navy-800);
    border-color: var(--mx-gold-600);
    color: var(--mx-paper);
}
.mx-card-paper .mx-button-secondary { color: var(--mx-navy-900); border-color: var(--mx-steel-300); }
.mx-button-lg { padding: var(--mx-space-4) var(--mx-space-6); font-size: var(--mx-text-md); }

.mx-alert {
    padding: var(--mx-space-3) var(--mx-space-4);
    border-radius: var(--mx-radius-md);
    background: var(--mx-danger-soft);
    color: #FFB3BB;
    border: 1px solid rgba(184, 50, 50, 0.3);
    font-size: var(--mx-text-sm);
    margin-bottom: var(--mx-space-4);
}
.mx-card-paper .mx-alert { background: rgba(184, 50, 50, 0.08); color: var(--mx-danger); }
.mx-success-alert { background: var(--mx-success-soft); color: #B8E6C8; border-color: rgba(45,122,74,0.3); }

/* ─── Tables ─── */

.mx-table { width: 100%; border-collapse: collapse; font-size: var(--mx-text-sm); }
.mx-table th {
    background: var(--mx-navy-800);
    padding: var(--mx-space-3);
    text-align: start;
    font-weight: var(--mx-fw-bold);
    font-size: var(--mx-text-xs);
    color: var(--mx-paper);
    border-bottom: 2px solid var(--mx-gold-500);
}
.mx-table td { padding: var(--mx-space-3); border-bottom: 1px solid var(--mx-navy-800); }
.mx-table tr:hover td { background: rgba(255,255,255,0.02); }
.mx-table .mx-num { font-family: var(--mx-font-num); text-align: end; }

/* ─── Status pills ─── */

.mx-pill {
    display: inline-block;
    font-size: var(--mx-text-xs);
    padding: 2px var(--mx-space-3);
    border-radius: var(--mx-radius-pill);
    font-weight: var(--mx-fw-semibold);
}
.mx-pill-pending  { background: var(--mx-warning-soft); color: var(--mx-warning); }
.mx-pill-approved { background: var(--mx-success-soft); color: var(--mx-success); }
.mx-pill-rejected { background: var(--mx-danger-soft);  color: var(--mx-danger); }
.mx-pill-active   { background: var(--mx-success-soft); color: var(--mx-success); }
.mx-pill-revoked  { background: var(--mx-danger-soft);  color: var(--mx-danger); }
.mx-pill-expired  { background: rgba(107,119,133,0.2); color: var(--mx-steel-300); }

/* ─── Utilities ─── */

.mx-stack > * + * { margin-top: var(--mx-space-3); }
.mx-row { display: flex; gap: var(--mx-space-3); align-items: center; flex-wrap: wrap; }
.mx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mx-space-4); }
.mx-mono { font-family: var(--mx-font-mono); }
.mx-num-font { font-family: var(--mx-font-num); }
.mx-muted { color: var(--mx-steel-500); }
.mx-ltr { direction: ltr; text-align: start; }
.mx-text-end { text-align: end; }

@media (max-width: 720px) {
    .mx-grid-2 { grid-template-columns: 1fr; }
    .mx-nav { flex-direction: column; gap: var(--mx-space-3); padding: var(--mx-space-3); }
    .mx-nav-links { flex-wrap: wrap; justify-content: center; }
    .mx-content { padding: var(--mx-space-5) var(--mx-space-3); }
}