/* ================================================================
   مقاسي | Mqasy.com — ملف التنسيق المشترك لكل صفحات الموقع
   الطابع: فخامة هادئة (Quiet Luxury) بهوية سمو: كحلي + ذهبي + عاجي
   ⚠️ أسماء الكلاسات التي يعتمد عليها app.js محفوظة كما هي
   ================================================================ */

@font-face {
    font-family: 'Thamanya';
    src: url('/thmanyahsans-Regular.woff2') format('woff2'), url('/thmanyahsans-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Thamanya';
    src: url('/thmanyahsans-Bold.woff2') format('woff2'), url('/thmanyahsans-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #2B4A6F;          /* لون الهوية الأساسي */
    --navy-deep: #1F3652;     /* للترويسة والأزرار عند المرور */
    --gold: #C5A059;          /* يُستخدم بندرة: خطوط رفيعة ولمسات */
    --gold-soft: #F4EDDF;     /* خلفية فاتحة جداً لصناديق الإبراز */
    --ivory: #F7F4EE;         /* خلفية الصفحة */
    --paper: #FFFFFF;         /* خلفية البطاقات والحقول */
    --ink: #1D2433;           /* النص الأساسي */
    --muted: #6B7380;         /* النص الثانوي والتسميات */
    --line: #E4DED3;          /* الخطوط الفاصلة */
    --line-strong: #D3CBBC;
    --error: #8A2E2E;
    --ok: #2F5D45;
    --radius: 4px;

    /* أسماء قديمة محفوظة احتياطاً لأي صفحة ما زالت تستخدمها */
    --sumou-brown: var(--navy);
    --sumou-gold: var(--gold);
    --text-brown: var(--ink);
    --bg-container: var(--paper);
    --bg-inputs: var(--paper);
    --measure-red: var(--error);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Thamanya', 'Segoe UI', Tahoma, sans-serif;
    background: var(--ivory);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 40px;
    color: var(--ink);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- شريط التنقل العلوي ---------- */
.top-nav {
    width: 100%;
    max-width: 880px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 18px 0 14px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.top-nav .nav-group { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.top-nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .25s, border-color .25s;
}
.top-nav a:hover { color: var(--navy); }
.top-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); font-weight: bold; }

/* ---------- الحاوية الرئيسية ---------- */
.container {
    width: 100%;
    max-width: 520px;
    text-align: center;
    margin-bottom: 56px;
}

.logo-container img {
    width: 64px;
    height: auto;
    margin-bottom: 18px;
    opacity: .95;
}
.brand-mark {
    font-size: 11px;
    color: var(--gold);
    margin: 0 0 14px;
}
h1 {
    color: var(--navy);
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 14px;
}
.marketing-text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    margin: 0 auto 34px;
    max-width: 420px;
}
.hairline {
    width: 48px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 30px;
    border: 0;
}

/* ---------- البطاقة التي تحوي الحاسبة ---------- */
.tool-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 28px 30px;
    text-align: start;
}

/* ---------- التبويبات ---------- */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin: 0 -28px 28px;
    padding: 0 28px;
}
.tab-btn {
    flex: 1;
    padding: 18px 4px 16px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .25s, border-color .25s;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); font-weight: bold; border-bottom-color: var(--gold); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- الحقول ---------- */
.input-group { margin-bottom: 18px; text-align: start; }
.field-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}
input, select {
    width: 100%;
    height: 52px;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background-color: var(--paper);
    text-align: center;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color .25s;
    color: var(--ink);
}
input:focus, select:focus { border-color: var(--navy); }
input::placeholder { color: var(--placeholder); font-size: 14px; }
input[type="file"] { height: auto; }

.guide-link-container { text-align: start; margin: -4px 0 20px; }
.guide-link {
    color: var(--navy);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 5px;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}
.guide-link:hover { color: var(--gold); }

.error-msg {
    display: none;
    color: var(--error);
    background: var(--error-bg);
    border-inline-start: 2px solid var(--error);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.7;
    text-align: start;
}

.calc-btn {
    width: 100%;
    height: 56px;
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 16px;
    font-weight: bold;
    font-family: inherit;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    margin: 4px 0 18px;
    transition: background-color .25s;
}
.calc-btn:hover { background-color: var(--btn-hover); }

/* ---------- سطر المزايا (نص هادئ بدل الأيقونات) ---------- */
.trust-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-bottom: 18px;
}
.trust-item {
    font-size: 12px;
    color: var(--muted);
    padding: 0 12px;
    line-height: 1.6;
}
.trust-item + .trust-item { border-inline-start: 1px solid var(--line-strong); }

.inline-cta {
    display: block;
    text-align: center;
    margin: 0 0 6px;
    padding: 14px 12px;
    border-top: 1px solid var(--line);
    color: var(--navy);
    font-size: 14px;
    text-decoration: none;
}
.inline-cta:hover { color: var(--gold); }

/* ---------- النتائج ---------- */
.results-container {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.result-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px 20px;
    text-align: center;
}
.result-title {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 6px;
}
.result-number {
    color: var(--navy);
    font-size: 40px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 14px;
    font-variant-numeric: lining-nums tabular-nums;
}
.result-note { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; line-height: 1.7; }

.buy-btn,
.vip-buy-btn,
.whatsapp-result-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    padding: 13px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--navy);
    transition: background-color .25s, color .25s, border-color .25s;
    margin-top: 4px;
    line-height: 1.6;
}
.buy-btn { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.buy-btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.result-card .buy-btn { background: transparent; color: var(--navy); }
.result-card .buy-btn:hover { background: var(--btn-bg); color: var(--btn-fg); }
.vip-buy-btn { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.vip-buy-btn:hover { background: var(--btn-hover); }
.whatsapp-result-btn { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }
.whatsapp-result-btn:hover { border-color: var(--navy); }
.whatsapp-result-btn::before {
    content: '';
    display: inline-block;
    width: 15px; height: 15px;
    margin-inline-end: 8px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.9 11.9 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.9A11.8 11.8 0 0 0 12.05 0Zm0 21.79a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88a9.89 9.89 0 0 1 9.88 9.89c0 5.45-4.44 9.88-9.89 9.88Zm5.42-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.08-.13-.28-.2-.57-.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.9 11.9 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.9A11.8 11.8 0 0 0 12.05 0Zm0 21.79a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.89-9.88a9.89 9.89 0 0 1 9.88 9.89c0 5.45-4.44 9.88-9.89 9.88Zm5.42-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.7.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.08-.13-.28-.2-.57-.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* شارة التفصيل الخاص: هادئة بلا تدرجات (يظهرها app.js بـ display:block) */
.vip-badge {
    display: none;
    background: var(--gold-soft);
    color: var(--navy);
    border-inline-start: 2px solid var(--gold);
    padding: 14px 16px;
    text-align: start;
    font-size: 14px;
    line-height: 1.8;
}
.vip-badge small { display: block; color: var(--muted); font-size: 12.5px; }

/* ---------- صمّم بشتك + احفظ مقاساتك + العائلة ---------- */
.design-box, .save-box, .family-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.family-panel { margin-bottom: 22px; }
.box-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--navy);
    margin: 0;
}
.dakka-thumb {
    display: block;
    width: 100%;
    max-height: 220px;
    height: auto;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--line);
    cursor: zoom-in;
    transition: max-height .4s ease;
}
.dakka-thumb.open { max-height: 2000px; cursor: zoom-out; object-fit: contain; }
.dakka-name { min-height: 20px; margin: 2px 0; font-size: 13.5px; }
.dakka-name.ok { color: var(--ok); }
.dakka-name.bad { color: var(--error); }
.design-box select { text-align-last: center; }
.save-box .buy-btn, .family-panel .buy-btn, .family-panel .whatsapp-result-btn { margin-top: 0; }
.save-box .buy-btn:disabled, .family-panel .buy-btn:disabled { opacity: .6; cursor: wait; }
.save-alt { background: var(--paper) !important; color: var(--navy) !important; border: 1px solid var(--line-strong) !important; }
.save-alt:hover { border-color: var(--navy) !important; }
.family-btn { background: var(--paper) !important; color: var(--navy) !important; border: 1px solid var(--gold) !important; }
.family-btn:hover { background: var(--gold-soft) !important; }

.family-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.family-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: start;
}
.fam-info { display: flex; flex-direction: column; font-size: 14px; line-height: 1.6; }
.fam-info span { font-size: 12.5px; color: var(--muted); }
.fam-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fam-actions button {
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: var(--radius);
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    color: var(--navy);
    cursor: pointer;
}
.fam-actions button.del { color: var(--error); }

.restore-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--gold-soft);
    border-inline-start: 2px solid var(--gold);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--ink);
    text-align: start;
}
.restore-bar button {
    flex-shrink: 0;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: none;
    border-radius: var(--radius);
    padding: 7px 14px;
    font-family: inherit;
    cursor: pointer;
}

/* ---------- مساعد ورقة الخياط ---------- */
.sheet-upload-btn {
    display: block;
    text-align: center;
    padding: 14px 10px;
    margin-bottom: 22px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--navy);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .25s;
}
.sheet-upload-btn:hover { border-color: var(--gold); }
.sheet-viewer {
    position: sticky;
    top: 8px;
    z-index: 20;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 8px;
    margin-bottom: 18px;
}
.sheet-viewer.unstick { position: static; }
.sheet-frame { max-height: 220px; overflow: auto; background: var(--paper); -webkit-overflow-scrolling: touch; }
.sheet-frame img { display: block; width: 100%; height: auto; }
.sheet-frame.zoomed { max-height: 60vh; }
.sheet-frame.zoomed img { width: 220%; max-width: none; }
.sheet-tools { display: flex; gap: 6px; margin-top: 8px; }
.sheet-tools button {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--navy);
    cursor: pointer;
}
.field-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.7;
}
.cm-alert {
    background: var(--gold-soft);
    border-inline-start: 2px solid var(--gold);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.8;
    text-align: start;
}
.cm-alert p { margin: 0 0 10px; }
.info-msg {
    background: var(--ok-bg);
    border-inline-start: 2px solid var(--ok);
    color: var(--ok);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.7;
    text-align: start;
}

/* ---------- أقسام أسفل الصفحة ---------- */
.section {
    width: 100%;
    max-width: 760px;
    margin-bottom: 56px;
    text-align: start;
}
.section-title, .faq-title, .blogs-title {
    color: var(--navy);
    font-size: 21px;
    font-weight: bold;
    margin: 0 0 6px;
    text-align: center;
}
.section-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.section-title::after, .faq-title::after, .blogs-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: 14px auto 26px;
}

/* حقائق الصنعة: قائمة ثابتة بلا مبالغة */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fact { background: var(--paper); padding: 22px 20px; }
.fact b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.fact span { color: var(--muted); font-size: 13.5px; line-height: 1.8; }

/* المدونة: روابط نصية هادئة */
.blogs-section { width: 100%; max-width: 760px; margin-bottom: 56px; }
.blogs-grid { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.blog-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: color .25s;
}
.blog-card:hover { color: var(--navy); }
.blog-card h3 { font-size: 15px; font-weight: normal; margin: 0; }
.blog-card::after { content: '←'; color: var(--gold); }
[dir="ltr"] .blog-card::after { content: '→'; }

/* الأسئلة الشائعة (تُفتح بالجافاسكربت عبر .active) */
.faq-section { width: 100%; max-width: 760px; margin-bottom: 56px; text-align: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-question {
    padding: 18px 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    font-size: 15px;
    font-weight: normal;
    margin: 0;
}
.faq-question:hover { color: var(--navy); }
.faq-question::after {
    content: '+';
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: var(--gold);
    font-weight: normal;
    flex-shrink: 0;
}
.faq-item.active .faq-question { color: var(--navy); font-weight: bold; }
.faq-item.active .faq-question::after { content: '−'; }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease;
    color: var(--muted);
    line-height: 1.9;
    font-size: 14.5px;
    padding: 0 4px;
}
.faq-item.active .faq-answer { max-height: 600px; padding: 0 4px 20px; }

/* نص المحتوى */
.seo-container {
    width: 100%;
    max-width: 760px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    text-align: start;
    margin-bottom: 56px;
}
.seo-container h2 { color: var(--navy); font-size: 21px; margin: 0 0 18px; }
.seo-container h3 { color: var(--navy); font-size: 17px; margin: 28px 0 8px; }
.seo-container p, .seo-container ul { color: var(--ink); font-size: 15px; line-height: 1.95; margin: 0 0 14px; }
.seo-container ul { list-style: none; padding: 0; }
.seo-container li { padding-inline-start: 20px; position: relative; margin-bottom: 8px; }
.seo-container li::before { content: '◆'; color: var(--gold); font-size: 9px; position: absolute; inset-inline-start: 0; top: 8px; }
.seo-container a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.seo-container a:hover { color: var(--gold); }

footer {
    width: 100%;
    max-width: 880px;
    padding: 30px 0 10px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
}
footer .slogan { display: block; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
footer a { color: inherit; }

/* ---------- زر الواتساب العائم (كحلي هادئ) ---------- */
.whatsapp-btn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 52px;
    height: 52px;
    background-color: var(--btn-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 14px rgba(29, 36, 51, .18);
    z-index: 1000;
    text-decoration: none;
    transition: background-color .25s;
}
.whatsapp-btn:hover { background-color: var(--btn-hover); }
.whatsapp-btn svg { width: 26px; height: 26px; fill: var(--btn-fg); }

/* ---------- نافذة دليل المقاسات ---------- */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(29, 36, 51, .55); z-index: 2000; justify-content: center; align-items: center;
}
.modal-content {
    background: var(--paper); border-radius: var(--radius); width: 94%; max-width: 440px;
    padding: 28px 22px 22px; position: relative; text-align: center;
    max-height: 92vh; overflow-y: auto;
}
.close-modal {
    position: absolute; top: 12px; left: 16px; font-size: 26px; color: var(--muted);
    cursor: pointer; line-height: 1; background: none; border: none; font-family: inherit; padding: 0;
}
.close-modal:hover { color: var(--navy); }
.modal-title { color: var(--navy); font-size: 18px; margin: 0 0 4px; }
.vector-infographic-container {
    width: 100%;
    aspect-ratio: 5 / 6;
    background: #F7F3EB url('/maqasi-guide.webp') center / cover no-repeat;
    margin: 14px 0 6px;
    border: 1px solid var(--line);
}
.modal-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* ---------- صفحات المحتوى (جدول المقاسات وغيرها) ---------- */
.page-card {
    width: 100%;
    max-width: 760px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 36px;
    margin-bottom: 40px;
    line-height: 1.9;
    text-align: start;
}
.page-card h1 { text-align: center; margin-bottom: 16px; }
.page-card h2 { font-size: 18px; color: var(--navy); margin: 32px 0 10px; }
.page-card p { font-size: 15px; margin: 0 0 12px; }
.page-card a:not(.buy-btn):not(.whatsapp-result-btn):not(.vip-buy-btn) {
    color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px;
}
.lead {
    font-size: 16px !important;
    background: var(--gold-soft);
    border-inline-start: 2px solid var(--gold);
    padding: 14px 18px;
}
.breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: inherit !important; text-decoration: none !important; }

.table-wrap { width: 100%; overflow-x: auto; margin: 16px 0 10px; }
.chart-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 14px; }
.chart-table caption { caption-side: bottom; padding-top: 8px; color: var(--muted); font-size: 12.5px; }
.chart-table th {
    background: var(--btn-bg);
    color: var(--btn-fg);
    padding: 12px 8px;
    font-weight: bold;
    line-height: 1.5;
}
.chart-table td {
    padding: 11px 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.chart-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.chart-table td:first-child { color: var(--navy); font-weight: bold; white-space: nowrap; }
.table-note { font-size: 13px !important; color: var(--muted); }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.cta-row a { flex: 1; min-width: 200px; }

details.faq-static { border-bottom: 1px solid var(--line); padding: 0 4px; }
details.faq-static:first-of-type { border-top: 1px solid var(--line); }
details.faq-static summary { cursor: pointer; padding: 16px 0; list-style-position: inside; }
details.faq-static[open] summary { color: var(--navy); font-weight: bold; }
details.faq-static p { padding: 0 0 16px; margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- الجوال ---------- */
@media (max-width: 520px) {
    body { padding: 0 14px 32px; }
    .top-nav { margin-bottom: 28px; font-size: 12.5px; gap: 6px 14px; }
    .top-nav .nav-group { gap: 4px 14px; }
    h1 { font-size: 24px; }
    .tool-card { padding: 4px 18px 24px; }
    .tabs { margin: 0 -18px 24px; padding: 0 18px; }
    .tab-btn { font-size: 14px; }
    .result-number { font-size: 36px; }
    .facts { grid-template-columns: 1fr; }
    .seo-container, .page-card { padding: 28px 20px; }
    .chart-table { font-size: 12.5px; }
    .chart-table th { padding: 10px 3px; font-size: 11.5px; }
    .chart-table td { padding: 9px 3px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ================================================================
   اللون التكميلي: "الجملي" (لون وبر الجمل) + "الرملي"
   الكحلي للأساسيات فقط (العنوان، الزر الرئيسي، الأرقام)
   الجملي للتسميات والأزرار الثانوية، والرملي لخلفيات الأقسام
   ================================================================ */
:root {
    --camel: #8C6A3E;        /* نص وتفاصيل (تباين مقروء على الأبيض) */
    --sand: #EFE7D8;         /* خلفية الأقسام */
    --sand-soft: #FAF6EE;    /* خلفية بطاقات النتائج */
}

.brand-mark { color: var(--camel); }
.field-label, .result-title, .section-sub { color: var(--camel); }
.guide-link { color: var(--camel); }
.trust-item { color: var(--camel); }
.trust-item + .trust-item { border-inline-start-color: var(--line-warm); }
.tab-btn:hover { color: var(--camel); }
.inline-cta { color: var(--camel); }
.inline-cta:hover { color: var(--navy); }

/* بطاقات النتائج: خلفية رملية فاتحة وخط ذهبي رفيع أعلاها */
.result-card { background: var(--sand-soft); border-color: var(--line-warm); border-top: 2px solid var(--gold); }
.result-card .buy-btn { color: var(--camel); border-color: var(--camel); }
.result-card .buy-btn:hover { background: var(--camel); color: var(--btn-fg); border-color: var(--camel); }

/* الأزرار الثانوية بالجملي، والرئيسية تبقى كحلية */
.save-alt { color: var(--camel) !important; border-color: var(--line-warm) !important; }
.save-alt:hover { border-color: var(--camel) !important; }
.family-btn { color: var(--camel) !important; }
.whatsapp-result-btn { color: var(--camel); border-color: var(--line-warm); }
.whatsapp-result-btn:hover { border-color: var(--camel); }
.box-title { color: var(--camel); }
.vip-badge { color: var(--ink); }

/* قسم "بعد أن تعرف مقاسك" على شريط رملي بعرض الشاشة */
.band {
    width: calc(100% + 32px);
    margin: 0 -16px 56px;
    background: var(--sand);
    padding: 52px 16px;
    display: flex;
    justify-content: center;
}
.band .section { margin-bottom: 0; }
.band .facts { background: var(--line-warm); border-color: var(--line-warm); }
.fact b { color: var(--camel); }

/* روابط المدونة وعلامات الأسئلة */
.blog-card::after { color: var(--camel); }
.faq-question:hover, .faq-item.active .faq-question { color: var(--camel); }
.seo-container h3 { color: var(--camel); }
.lead { background: var(--sand-soft); }

/* الخاتمة: شريط كحلي بعرض الشاشة وشعار العلامة بالذهبي */
footer {
    max-width: none;
    width: calc(100% + 32px);
    margin: 0 -16px -40px;
    background: var(--footer-bg);
    border-top: 0;
    color: var(--footer-fg);
    padding: 36px 16px 30px;
}
footer .slogan { color: var(--gold); font-size: 17px; }
footer a { color: var(--footer-link); }

@media (max-width: 520px) {
    .band { width: calc(100% + 28px); margin: 0 -14px 48px; padding: 40px 14px; }
    footer { width: calc(100% + 28px); margin: 0 -14px -32px; }
}
.dia { color: var(--gold); font-size: 10px; vertical-align: 2px; margin-inline-end: 4px; }

/* ================================================================
   متغيرات الوضعين (نهاري / ليلي)
   ================================================================ */
:root {
    --btn-bg: var(--navy); --btn-fg: #FFFFFF; --btn-hover: var(--navy-deep);
    --error-bg: #FBF5F4; --ok-bg: #F2F6F3; --row-alt: #FBFAF7;
    --line-warm: #E2D6C1; --placeholder: #A3A9B3;
    --footer-bg: #2B4A6F; --footer-fg: #C9D2DE; --footer-link: #FFFFFF;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --ivory: #0F151E;  --paper: #161E2A;  --ink: #E7E2D8;  --muted: #9DA6B3;
    --line: #263142;   --line-strong: #364459;
    --navy: #E3D3B3;   /* العناوين والأرقام: رملي فاتح بدل الكحلي */
    --navy-deep: #D4B271;
    --btn-bg: #C5A059; --btn-fg: #10161F; --btn-hover: #D4B271;
    --gold: #C5A059;   --gold-soft: #221F17;
    --camel: #C9A878;  --sand: #131B26;  --sand-soft: #1A2330;
    --error: #E59A9A;  --error-bg: #2A1C1E; --ok: #8CC2A2; --ok-bg: #17261F;
    --row-alt: #1A2330; --line-warm: #2E3A4C; --placeholder: #6F7886;
    --footer-bg: #0A0F16; --footer-fg: #8E97A5; --footer-link: #E7E2D8;
    color-scheme: dark;
}
:root[data-theme="dark"] .logo-container img { filter: brightness(0) invert(90%) sepia(18%); }
:root[data-theme="dark"] .result-card { border-top-color: var(--gold); }
:root[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.65); }

/* ---------- أدوات الشريط العلوي: اللغة + الوضع الليلي ---------- */
.nav-tools { display: flex; align-items: center; gap: 4px; }
.nav-icon {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; min-width: 34px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 17px;
    background: transparent; color: var(--muted);
    font-family: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer;
    transition: color .25s, border-color .25s;
}
.top-nav a.nav-icon { border-bottom: 1px solid var(--line); padding: 0 10px; }
.nav-icon:hover { color: var(--navy); border-color: var(--gold) !important; }
.nav-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-toggle { padding: 0; justify-content: center; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
.latin { letter-spacing: .4em; padding-inline-start: .4em; }

/* ================================================================
   وزن خط ثمانية: العريض لعناصر الواجهة كما في النسخة السابقة،
   والعادي للفقرات الطويلة فقط حتى تبقى مريحة للقراءة
   ================================================================ */
.top-nav a, .tab-btn, input, select, .field-label, .guide-link,
.calc-btn, .buy-btn, .vip-buy-btn, .whatsapp-result-btn, .trust-item,
.inline-cta, .result-title, .result-note, .vip-badge, .box-title, .restore-bar,
.sheet-upload-btn, .sheet-tools button, .fam-actions button, .fam-info,
.cm-alert, .info-msg, .error-msg, .dakka-name, .marketing-text, .brand-mark,
.fact b, .faq-question, .blog-card h3, .section-title, .faq-title, .blogs-title,
.breadcrumb, details.faq-static summary, .chart-table td, .chart-table th,
footer, .modal-note, .nav-icon {
    font-weight: bold;
}
input::placeholder { font-weight: normal; }

h1, .section-title, .faq-title, .blogs-title, .seo-container h2, .seo-container h3,
.page-card h2, .modal-title, .result-number, footer .slogan, .fact b { font-weight: bold; }