/* ═══════════════════════════════════════════════
   Etb3ha v3 — Design System
   هوية etb3ha الرسمية CMYK: بينك/أزرق/أصفر
   على ورق كريمي — نفس روح المرجع وخطوطه Cairo/Tajawal/Inter
   ═══════════════════════════════════════════════ */

@font-face {
        font-family: 'Cairo';
        src: url('../fonts/cairo-var.woff2') format('woff2-variations');
        font-weight: 200 1000;
        font-style: normal;
        font-display: swap;
}

/* ─── Inter + Tajawal محليًا (نفس خطوط المرجع) ─── */
@font-face {
        font-family: 'Inter';
        src: url('../fonts/inter-400.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: 'Inter';
        src: url('../fonts/inter-500.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: 'Inter';
        src: url('../fonts/inter-600.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: 'Inter';
        src: url('../fonts/inter-700.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: 'Inter';
        src: url('../fonts/inter-800.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: 'Tajawal';
        src: url('../fonts/tajawal-400.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
        font-family: 'Tajawal';
        src: url('../fonts/tajawal-500.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
        font-family: 'Tajawal';
        src: url('../fonts/tajawal-700.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
        font-family: 'Tajawal';
        src: url('../fonts/tajawal-800.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
        /* هوية etb3ha الرسمية — ألوان اللوجو CMYK */
        --paper: #faf8f3;
        --paper-deep: #f1ede4;
        --white: #ffffff;
        --ink: #16121f;
        --ink-2: #241a30;
        --muted: #6f6879;
        --pink: #f40b70;
        --pink-2: #ff4da1;
        --pink-dark: #c60858;
        --pink-soft: #ffe3f1;
        --blue: #02abf2;
        --blue-dark: #0591e2;
        --yellow: #fdca0c;
        --mint: #ffe3f1;
        --line: #eae4d8;
        --ok: #16a34a;
        --gold: #fdca0c;
        /* أسماء قديمة متوافقة (توجّه للهوية الجديدة) */
        --green: #f40b70;
        --green-dark: #c60858;
        --orange: #f40b70;
        --orange-2: #ff4da1;
        --flame: #f40b70;
        --flame-2: #ff4da1;
        --flame-dark: #c60858;
        --magenta: #f40b70;
        --teal: #f40b70;
        --teal-2: #d90b64;
        --cyan: #02abf2;
        --sun: #fdca0c;
        --txt: #16121f;
        --card: #ffffff;
        --cream: #f7f3ea;
        --cream-btn: #f4eee1;
        --coral-soft: #ffe0ec;
        --blue-soft: #e3f4ff;
        --radius: 14px;
        --radius-lg: 20px;
        --shadow-1: 0 8px 26px -12px rgba(30, 18, 40, .18);
        --shadow-2: 0 22px 70px rgba(30, 18, 40, .13);
        --grad-teal: linear-gradient(145deg, #241126, #a10753);
        --grad-brand: linear-gradient(120deg, var(--pink), #a10753);
        --ease-spring: cubic-bezier(.2, .72, .25, 1);
        --page-gutter: clamp(22px, 5.4vw, 88px);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-family: 'Cairo', 'Tajawal', 'Inter', sans-serif; }
body {
        margin: 0;
        font-family: 'Cairo', 'Tajawal', 'Inter', sans-serif;
        background: var(--paper);
        color: var(--ink);
        font-size: 15px;
        line-height: 1.7;
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
}
html[lang="en"] body, [lang="en"] { font-family: 'Inter', 'Cairo', sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.18; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.25; letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--orange); }
:focus-visible { outline: 3px solid #fdca0c; outline-offset: 3px; border-radius: 4px; }
::selection { color: #fff; background: var(--green); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 99px; border: 2px solid var(--paper-deep); }

.etb-container { width: min(1240px, 100% - 2.2rem); margin-inline: auto; }
.etb-narrow { width: min(860px, 100% - 2.2rem); margin-inline: auto; }
.etb-main { min-height: 55vh; }
.etb-muted { color: var(--muted); }
.etb-link { color: var(--green); font-weight: 700; border-bottom: 1px solid #7d9a8a; padding-bottom: 2px; transition: color .2s, border-color .2s; }
.etb-link:hover { color: var(--orange); border-color: var(--orange); }
.etb-h3 { font-size: 1.3rem; }
.etb-h4 { font-size: 1.02rem; margin-bottom: .6em; }

/* ─── Eyebrow — توقيع المرجع ─── */
.etb-eyebrow {
        display: inline-flex; align-items: center; gap: 9px;
        color: #7d7488; font-size: 11px; letter-spacing: .12em;
        font-weight: 800; text-transform: uppercase; line-height: 1.5;
}
html[lang="ar"] .etb-eyebrow { letter-spacing: .02em; }
.etb-eyebrow::before { content: ""; width: 27px; height: 1px; background: var(--orange); }

/* ─── تمييز كلمة في العنوان (بدل قوس قزح) ─── */
.gradient-text { color: var(--orange); -webkit-text-fill-color: currentColor; }

/* ─── الأزرار — 3px 13px زي المرجع ─── */
.etb-btn {
        min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center; gap: 12px;
        padding: 0 22px; border: 1px solid transparent;
        border-radius: 3px 13px;
        font-size: .84rem; font-weight: 700; line-height: 1.4;
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
        user-select: none; text-align: center;
}
.etb-btn:active { transform: scale(.97); }
.etb-btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(30, 18, 40, .13); }
.etb-btn-primary:hover { transform: translateY(-2px); background: var(--green-dark); box-shadow: 0 14px 28px rgba(244, 11, 112, .25); }
.etb-btn-outline { background: transparent; border-color: var(--green); color: var(--green); }
.etb-btn-outline:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.etb-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.etb-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.etb-btn-light { background: var(--cream-btn); color: var(--green-dark); }
.etb-btn-light:hover { background: #fff; transform: translateY(-2px); }
.etb-btn-lg { min-height: 52px; padding: 0 26px; font-size: .92rem; }
.etb-btn-xl { width: 100%; min-height: 54px; font-size: .95rem; }
.etb-btn-sm { min-height: 38px; padding: 0 14px; font-size: .8rem; }
.btn-glow { animation: etbGlowBreathe 4.5s ease-in-out infinite; }
@keyframes etbGlowBreathe {
        0%, 100% { box-shadow: 0 8px 18px rgba(30, 18, 40, .13); }
        50% { box-shadow: 0 10px 30px rgba(244, 11, 112, .3); }
}

/* ─── سهم SVG متوافق مع الاتجاه ─── */
.etb-arr { display: inline-flex; align-items: center; }
[dir="ltr"] .etb-arr svg { transform: scaleX(-1); }

/* ─── شارات ─── */
.etb-badge {
        position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2;
        padding: .28em .9em; border-radius: 3px 10px; font-size: .74rem; font-weight: 800; color: #fff;
        background: var(--orange); box-shadow: 0 6px 16px -6px rgba(244, 11, 112, .55);
}
.etb-badge-new { background: var(--blue); }
.etb-badge-offer { background: var(--gold); color: var(--ink-2); }
.etb-badge-fast { background: var(--green); }
.etb-badge-featured { background: var(--ink-2); }
.etb-badge-tier { inset-inline-start: auto; inset-inline-end: 12px; background: rgba(30, 18, 40, .85); font-size: .72rem; }
.etb-badge-lg { position: static; display: inline-block; margin-bottom: .7rem; padding: .3em 1em; font-size: .8rem; }
.etb-tag {
        display: inline-block; padding: .18em .7em; margin-inline-end: .35em; margin-top: .35em;
        border-radius: 999px; background: var(--paper-deep); color: var(--muted); font-size: .78rem; font-weight: 700;
}
.etb-tag-mockup { background: var(--mint); color: var(--green); }

/* ─── شريط الإعلان — مثل المرجع ─── */
.etb-topbar {
        position: relative; z-index: 60;
        display: flex; align-items: center; gap: 12px;
        height: 34px; padding: 0 var(--page-gutter);
        background: var(--green-dark); color: var(--cream);
        font-size: 11px; letter-spacing: .015em; overflow: hidden;
}
.etb-marquee { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; opacity: .92; }
.marquee-track { display: flex; width: max-content; animation: etbMarquee 30s linear infinite; }
@keyframes etbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="ltr"] .marquee-track { animation-direction: normal; }
.etb-announce-mark { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: 800; }
.etb-announce-mark svg { color: var(--gold); }
.etb-announce-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.etb-lang-btn {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: .4em;
        padding: .18em .85em; border-radius: 999px; background: rgba(248, 244, 233, .14);
        font-size: .78rem; font-weight: 800; transition: background .2s;
}
.etb-lang-btn:hover { background: rgba(248, 244, 233, .3); }
.etb-topbar-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .76rem; color: var(--gold); background: rgba(248, 244, 233, .1); padding: 3px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s; }
.etb-topbar-phone:hover { background: rgba(248, 244, 233, .22); }

/* ─── الهيدر ─── */
.etb-header {
        position: sticky; top: 0; z-index: 50;
        background: rgba(248, 246, 239, .93);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(30, 18, 40, .09);
        transition: box-shadow .3s;
}
.etb-header.is-scrolled { box-shadow: 0 8px 30px -14px rgba(30, 18, 40, .25); }
.etb-header-in { display: flex; align-items: center; gap: 1.2rem; min-height: 76px; padding: .55rem 0; }

/* رمز البراند — مربع أخضر مائل بإطار ورقي (توقيع المرجع) */
.etb-logo { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.etb-logo-mark { display: inline-flex; }
.etb-brand-symbol {
        position: relative; width: 38px; height: 38px; flex-shrink: 0;
        border-radius: 12px 12px 12px 4px; background: var(--green);
        display: inline-grid; place-items: center;
        transform: rotate(-3deg);
        box-shadow: 0 5px 12px rgba(30, 18, 40, .13);
        animation: etbSymbolBreathe 6s ease-in-out infinite;
}
.etb-brand-symbol::before {
        content: ""; position: absolute; width: 18px; height: 20px;
        border: 1.5px solid var(--cream); border-radius: 2px; transform: rotate(4deg);
}
.etb-brand-symbol::after {
        content: ""; position: absolute; width: 13px; height: 1.5px;
        background: var(--orange); transform: rotate(-37deg);
        inset-inline-start: 6px; top: 17px;
}
.etb-brand-symbol > span {
        position: absolute; width: 4px; height: 4px; border-radius: 50%;
        background: var(--gold); inset-inline-end: 7px; bottom: 7px;
}
@keyframes etbSymbolBreathe { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
.etb-logo:hover .etb-brand-symbol { animation: none; transform: rotate(3deg) scale(1.06); }
.etb-logo-text { display: flex; flex-direction: column; font-weight: 800; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.04em; color: var(--ink); }
/* ─── اللوجو الرسمي (صورة) ─── */
.etb-logo { display: inline-flex; align-items: center; }
.etb-logo-img { display: block; height: 38px; width: auto; transition: transform .45s var(--ease-spring); }
.etb-logo:hover .etb-logo-img { transform: scale(1.04) rotate(-1.2deg); }
.etb-footer .etb-logo-img { height: 46px; }
.etb-header.is-scrolled .etb-logo-img { height: 33px; }
@media (max-width: 640px) {
        .etb-logo-img { height: 31px; }
        .etb-footer .etb-logo-img { height: 40px; }
}

.etb-logo-text small { font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 700; color: #9a92a4; letter-spacing: .14em; }
.etb-logo-light .etb-logo-text { color: var(--ink); }
.etb-logo-light .etb-logo-text small { color: #9a92a4; }

.etb-nav { flex: 1; }
.etb-menu { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.etb-menu a {
        display: block; padding: .4em .9em; border-radius: 3px 10px;
        font-weight: 700; font-size: .9rem; color: var(--ink-2);
        transition: background .2s, color .2s;
}
.etb-menu a:hover, .etb-menu .current-menu-item a { background: var(--mint); color: var(--green); }

.etb-header-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.etb-icon-btn {
        position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border-radius: 3px 13px; border: none; background: transparent; color: var(--ink);
        transition: background .2s, transform .2s, border-color .2s;
}
.etb-icon-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-1); }
.etb-cart-count {
        position: absolute; inset-block-start: 2px; inset-inline-end: 0;
        min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
        background: var(--orange); color: #fff; font-size: .7rem; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 3px 10px -2px rgba(244, 11, 112, .6);
}
.etb-cart-count.animate-pop { animation: etbPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes etbPop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-10deg); } 100% { transform: scale(1); } }
.etb-dot { position: absolute; inset-block-start: 4px; inset-inline-end: 5px; width: 9px; height: 9px; border-radius: 50%; background: #02abf2; border: 2px solid var(--paper); }
.etb-dot-green { background: #02abf2; }

.etb-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 12px; }
.etb-burger span { width: 21px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.etb-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.etb-burger.is-open span:nth-child(2) { opacity: 0; }
.etb-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.etb-mobile-menu { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 49; padding: 5.2rem 1.4rem 1.4rem; background: rgba(251, 250, 245, .98); backdrop-filter: blur(16px); box-shadow: var(--shadow-2); animation: etbSlideDown .35s var(--ease-spring); }
@keyframes etbSlideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.etb-mobile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.etb-mobile-list a { display: block; padding: .75em 1.2em; border-radius: 3px 12px; font-weight: 800; font-size: 1.02rem; }
.etb-mobile-list a:hover { background: var(--mint); color: var(--green); }

/* شريط الموبايل السفلي */
.etb-mobile-bar {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 48; display: none;
        background: rgba(251, 250, 245, .96); backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom, 0px));
}
.etb-mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .3rem .8rem; border-radius: 12px; font-size: .68rem; font-weight: 700; color: var(--muted); }
.etb-mobile-bar a span { font-size: 1.15rem; display: grid; place-items: center; height: 22px; }
.etb-mobile-bar a:hover { color: var(--green); }

/* ─── حركات عامة ─── */
@keyframes etbFloatA { 0%, 100% { translate: 0 0; rotate: -13deg; } 50% { translate: -4px -14px; rotate: -8deg; } }
@keyframes etbFloatB { 0%, 100% { translate: 0 0; rotate: 11deg; } 50% { translate: 5px -12px; rotate: 16deg; } }
@keyframes etbFloatC { 0%, 100% { translate: 0 0; rotate: 9deg; } 50% { translate: -5px 10px; rotate: 4deg; } }
@keyframes etbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes etbOrbitSpin { to { transform: rotate(348deg); } }
@keyframes etbStickerDrift { 0%, 100% { transform: rotate(-11deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-8px); } }
@keyframes etbGlowBreatheAnim { 0%, 100% { transform: scale(.96); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes etbCenterFloat { 0%, 100% { translate: 0 0; rotate: -7deg; } 50% { translate: 0 -11px; rotate: -4deg; } }
@keyframes etbRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes etbSpin { to { transform: rotate(360deg); } }
@keyframes etbNotePop { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

.etb-float-a { animation: etbFloatA 7s ease-in-out infinite; }
.etb-float-b { animation: etbFloatB 8s ease-in-out infinite; animation-delay: .7s; }
.etb-float-c { animation: etbFloatC 6.5s ease-in-out infinite; animation-delay: 1.3s; }
.etb-sticker-drift { animation: etbStickerDrift 5.5s ease-in-out infinite; }
.animate-float { animation: etbBob 5s ease-in-out infinite; }
.animate-float-slow { animation: etbBob 8s ease-in-out infinite; }

/* الظهور عند السكرول — توقيت المرجع بالظبط */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .72s var(--ease-spring), transform .72s var(--ease-spring); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .reveal { opacity: 1; transform: none; transition: none; }
        .marquee-track, .animate-float, .animate-float-slow, .etb-blob, .btn-glow, .etb-float-a, .etb-float-b, .etb-float-c,
        .etb-orbit, .etb-orbit-dot, .etb-hero-note-float, .etb-sticker-drift, .etb-topbar, .etb-brand-symbol,
        .etb-hero-glow, .etb-hero-center-card, .etb-hero-card { animation: none !important; }
}

/* لمعان الكروت */
.shine-hover { position: relative; overflow: hidden; }
.shine-hover::after {
        content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0;
        width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
        transform: translateX(-120%) skewX(-15deg); opacity: 0; pointer-events: none;
}
.shine-hover:hover::after { opacity: 1; animation: etbShine .9s ease; }
@keyframes etbShine { from { transform: translateX(-120%) skewX(-15deg); } to { transform: translateX(260%) skewX(-15deg); } }

/* ─── الهيرو — فاتح دافي زي المرجع ─── */
.etb-hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
.etb-hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2.4rem, 7vw, 6rem); padding: clamp(3rem, 7vw, 5.4rem) 0 clamp(3rem, 6.5vw, 4.6rem); }
.etb-hero-badge {
        display: inline-flex; align-items: center; gap: 9px; margin-bottom: 1.15rem;
        color: #7d7488; font-size: 11px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase;
}
html[lang="ar"] .etb-hero-badge { letter-spacing: .02em; }
.etb-hero-badge::before { content: ""; width: 27px; height: 1px; background: var(--orange); }
.etb-hero-title { font-size: clamp(2.5rem, 5.8vw, 4.7rem); font-weight: 700; line-height: 1.16; letter-spacing: -.045em; margin-bottom: .3em; }
html[lang="ar"] .etb-hero-title { letter-spacing: -.02em; }
.etb-hero-sub { font-size: .92rem; color: var(--muted); line-height: 1.95; max-width: 29rem; margin-bottom: 1.5rem; }
.etb-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.etb-hero-note { font-size: .84rem; color: var(--muted); }

/* إثبات اجتماعي: أفاتار + نقطة حية + تقييم */
.etb-hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 2.4rem; flex-wrap: wrap; }
.etb-avatars { display: flex; }
.etb-avatars span {
        width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--paper);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .72rem; font-weight: 800; color: #fff; margin-inline-start: -9px;
}
.etb-avatars span:first-child { margin-inline-start: 0; }
.etb-av1 { background: var(--green); } .etb-av2 { background: var(--orange); }
.etb-av3 { background: var(--blue); } .etb-av4 { background: var(--gold); color: var(--ink-2); }
.etb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #02abf2; box-shadow: 0 0 0 4px rgba(2, 171, 242, .14); flex-shrink: 0; }
.etb-proof-txt { font-size: .8rem; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 8px; }
.etb-proof-txt small { color: var(--muted); font-weight: 600; }

.etb-hero-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.etb-stat b { display: block; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.etb-stat span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.etb-stat-chip b { width: 34px; height: 34px; border-radius: 3px 10px; background: var(--mint); display: flex; align-items: center; justify-content: center; color: var(--green); }

/* ─── الهيرو المرئي — توقيع المرجع ─── */
.etb-hero-visual { position: relative; min-height: 460px; }
.etb-hero-glow {
        position: absolute; width: min(42vw, 540px); height: min(42vw, 540px); border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 227, 241, .9), rgba(227, 244, 255, .55) 52%, transparent 70%);
        filter: blur(2px); z-index: 0;
        inset-inline-start: 50%; top: 50%; translate: -50% -50%;
        animation: etbGlowBreatheAnim 6s ease-in-out infinite;
        pointer-events: none;
}
.etb-orbit {
        position: absolute; inset: -2% -1%; border: 1px dashed rgba(2, 171, 242, .36);
        border-radius: 50%; z-index: 1; animation: etbOrbitSpin 46s linear infinite; pointer-events: none;
}
.etb-orbit-2 { inset: 12% 9%; animation-duration: 34s; animation-direction: reverse; border-color: rgba(244, 11, 112, .25); }
.etb-orbit-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 4px 12px rgba(30, 18, 40, .25); }
.etb-od1 { inset-block-start: 6%; inset-inline-start: 14%; background: var(--orange); }
.etb-od2 { inset-block-end: 12%; inset-inline-end: 10%; background: var(--gold); }
.etb-od3 { inset-block-start: 46%; inset-inline-end: -1%; background: var(--blue); }
.etb-orbit-2 .etb-od3 { background: var(--green); inset-block-start: 10%; }

.etb-hero-card {
        position: absolute; z-index: 3; width: clamp(112px, 12.5vw, 172px); aspect-ratio: 1 / 1.07;
        padding: 8px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(30, 18, 40, .08);
        border-radius: 19px 5px; box-shadow: 0 18px 40px rgba(30, 18, 40, .14);
}
.etb-hero-card img { border-radius: 13px 3px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.etb-hero-card-1 { inset-block-start: 2%; inset-inline-start: 0; animation: etbFloatA 7s ease-in-out infinite; }
.etb-hero-card-2 { inset-block-start: 34%; inset-inline-end: 0; animation: etbFloatB 8s ease-in-out infinite; animation-delay: .6s; }
.etb-hero-card-3 { inset-block-end: -2%; inset-inline-start: 17%; width: clamp(96px, 10.5vw, 146px); animation: etbFloatC 6.5s ease-in-out infinite; animation-delay: 1.1s; }
.etb-hero-chip {
        position: absolute; inset-block-end: -12px; inset-inline-end: 10px;
        padding: .22em .85em; border-radius: 999px; background: var(--green); color: #fff;
        font-size: .78rem; font-weight: 800; box-shadow: 0 8px 20px -6px rgba(244, 11, 112, .5);
        font-variant-numeric: tabular-nums;
}

/* الكارت الأخضر المركزي */
.etb-hero-center-card {
        position: absolute; z-index: 4;
        inset-inline-start: 50%; top: 44%; translate: -50% -50%;
        width: clamp(150px, 15vw, 205px); height: clamp(175px, 17vw, 235px);
        border-radius: 50% 12%;
        background: linear-gradient(145deg, var(--green-dark), var(--green)); color: #fff;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
        text-align: center; padding: 18px;
        box-shadow: 18px 24px rgba(244, 11, 112, .2), 0 28px 70px rgba(30, 18, 40, .25);
        animation: etbCenterFloat 5s ease-in-out infinite;
}
.etb-hero-center-card b { font-size: 1.18rem; font-weight: 800; line-height: 1.35; }
.etb-hero-center-card small { font-size: .68rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.etb-hero-center-card svg { color: var(--gold); }

/* ستيكر كورال دائري */
.etb-hero-sticker {
        position: absolute; z-index: 5; inset-block-start: 0; inset-inline-start: -3%;
        width: 104px; height: 104px; border-radius: 50%; background: var(--orange);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: #fffdf8; text-align: center; font-size: .68rem; font-weight: 800; line-height: 1.3;
        transform: rotate(-12deg); box-shadow: 0 14px 35px rgba(30, 18, 40, .16);
        animation: etbStickerDrift 5.5s ease-in-out infinite;
}
.etb-hero-sticker svg { opacity: .95; }

/* ملاحظات طايرة */
.etb-hero-note-float {
        position: absolute; z-index: 6;
        display: flex; align-items: center; gap: 8px;
        background: #fff; border-radius: 999px; padding: 10px 15px;
        font-size: .72rem; font-weight: 800; color: var(--green);
        box-shadow: 0 9px 26px rgba(30, 18, 40, .12);
        animation: etbBob 4s ease-in-out infinite;
        white-space: nowrap;
}
.etb-nf1 { inset-block-start: 6%; inset-inline-end: 4%; }
.etb-nf2 { inset-block-end: 9%; inset-inline-start: -2%; animation-delay: 1.6s; }
.etb-nf-ico {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--green); color: #fff; flex: none;
}
.etb-nf-ico.etb-nf-gold { background: var(--gold); color: var(--ink-2); }

/* ─── الأقسام العامة ─── */
.etb-section { padding: clamp(2.8rem, 6vw, 4.6rem) 0; }
.etb-section-alt { background: var(--white); border-block: 1px solid var(--line); }
.etb-section-dark { position: relative; overflow: hidden; background: var(--green-dark); color: var(--cream); }
.etb-section-dark h2, .etb-section-dark h3 { color: #fff; }
.etb-section-dark p { color: rgba(255, 255, 255, .72); }
.etb-sec-head { text-align: center; margin-bottom: 2.2rem; }
.etb-sec-head p { color: var(--muted); font-weight: 600; }
.etb-sec-head-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; text-align: start; }

/* ─── الأقسام (كروت التصنيفات) ─── */
.etb-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.etb-cat {
        display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
        padding: 1.4rem .8rem 1.15rem; background: var(--white);
        border-radius: 5px 22px; border: 1px solid var(--line);
        transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.etb-cat:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 18px 38px rgba(30, 18, 40, .09); }
.etb-cat-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--green); transition: transform .3s var(--ease-spring); }
.etb-cat:hover .etb-cat-ico { transform: scale(1.12) rotate(-6deg); }
.etb-cat b { font-size: .98rem; }
.etb-cat-count { font-size: .76rem; color: var(--muted); font-weight: 600; }

/* ─── كروت المنتجات ─── */
.etb-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; }
.etb-card {
        display: flex; flex-direction: column; background: var(--white);
        border-radius: 5px 22px; overflow: hidden; border: 1px solid var(--line);
        transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.etb-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(30, 18, 40, .09); border-color: transparent; }
.etb-card-imgwrap { position: relative; display: block; background: var(--paper-deep); }
.etb-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease-spring); }
.etb-card:hover .etb-card-img { transform: scale(1.06); }
.etb-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.etb-card-title { margin: 0 0 .25em; font-size: 1rem; }
.etb-card-title a:hover { color: var(--green); }
.etb-card-desc { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); flex: 1; }
.etb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.etb-price-wrap { display: flex; flex-direction: column; line-height: 1.3; }
.etb-price { font-size: 1.05rem; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.etb-price-tier { font-size: .72rem; color: var(--muted); font-weight: 600; }

/* ─── ليه احنا ─── */
.etb-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.etb-why-card {
        padding: 1.5rem 1.3rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line);
        transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.etb-why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); }
.etb-why-ico {
        display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
        border-radius: 3px 14px; margin-bottom: .9rem; color: var(--green);
}
.etb-w1 { background: var(--mint); }
.etb-w2 { background: #e3f4ff; color: var(--blue); }
.etb-w3 { background: #fdf3d7; color: #a47708; }
.etb-w4 { background: #ffe9e5; color: var(--orange); }

/* ─── الخطوات — فاتحة بأرقام دائرية زي المرجع ─── */
.etb-steps { display: flex; align-items: stretch; gap: 1rem; position: relative; z-index: 1; }
.etb-step {
        flex: 1; padding: 1.7rem 1.2rem; border-radius: 5px 22px;
        background: var(--white); border: 1px solid var(--line);
        transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.etb-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); }
.etb-step-num {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        margin-bottom: .8rem; border-radius: 50%; background: #e5ede4; color: var(--green);
        font: 800 1rem 'Inter', sans-serif;
}
.etb-step h3 { color: var(--ink); font-size: 1.05rem; }
.etb-step p { color: var(--muted); font-size: .87rem; margin: 0; }
.etb-step-arrow { align-self: center; color: var(--orange); display: inline-flex; }
[dir="ltr"] .etb-step-arrow { transform: scaleX(-1); }

/* ─── CTA التصاميم الجاهزة ─── */
.etb-ready-cta {
        display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem;
        padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: 5px 52px;
        background: var(--white); border: 1px solid var(--line);
        box-shadow: var(--shadow-2);
}
.etb-ready-copy h2 { margin-bottom: .4em; }
.etb-ready-copy p { color: var(--muted); margin-bottom: 1.3rem; }
.etb-ready-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.etb-ready-strip img { width: 94px; height: 94px; padding: 12px; background: var(--paper); border-radius: 19px 5px; box-shadow: var(--shadow-1); border: 1px solid var(--line); }

/* ─── الآراء ─── */
.etb-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.etb-testi {
        margin: 0; padding: 1.5rem 1.4rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line);
        display: flex; flex-direction: column; gap: .8rem; transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.etb-testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.etb-testi-stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; display: flex; gap: 2px; }
.etb-testi-stars svg { display: block; }
.etb-testi-note { text-align: center; margin: 1.6rem 0 0; color: var(--muted); font-size: .85rem; }
.etb-testi blockquote { margin: 0; flex: 1; font-size: .92rem; color: var(--ink); }
.etb-testi figcaption { display: flex; flex-direction: column; border-top: 1px dashed var(--line); padding-top: .8rem; }
.etb-testi figcaption b { font-size: .93rem; }
.etb-testi figcaption span { font-size: .78rem; color: var(--muted); }

/* ─── CTA الشركات — شريط أخضر ─── */
.etb-quote-cta {
        display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
        padding: clamp(1.8rem, 4vw, 2.8rem); border-radius: 5px 52px;
        background: var(--green); color: var(--cream);
        box-shadow: 0 22px 55px -18px rgba(244, 11, 112, .45);
        position: relative; overflow: hidden;
}
.etb-quote-cta::before {
        content: ""; position: absolute; inset-inline-end: 3%; inset-block-start: -18%;
        width: 220px; height: 220px; border-radius: 48px; background: rgba(255, 255, 255, .08);
        transform: rotate(14deg); pointer-events: none;
}
.etb-quote-cta h2 { color: #fff; margin-bottom: .2em; }
.etb-quote-cta p { margin: 0; opacity: .88; }

/* ─── ترويسة الصفحات الداخلية ─── */
.etb-page-head { padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(.6rem, 2vw, 1.2rem); }
.etb-page-head p { color: var(--muted); font-weight: 600; margin: 0; }

/* ─── المتجر ─── */
.etb-shop-section { padding-top: 1rem; }
.etb-shop-bar {
        display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
        padding: .9rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.etb-search-wrap { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; }
.etb-search-wrap svg { position: absolute; inset-inline-start: 14px; color: var(--muted); pointer-events: none; }
.etb-search-wrap input {
        width: 100%; padding: .68em 3rem .68em 1.1rem; border-radius: 3px 12px; border: 1px solid var(--line); background: var(--paper);
        transition: border-color .2s, box-shadow .2s;
}
[dir="ltr"] .etb-search-wrap input { padding: .68em 1.1rem .68em 3rem; }
.etb-search-wrap input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(244, 11, 112, .1); }
.etb-shop-bar select { padding: .66em 1em; border-radius: 3px 12px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; color: var(--ink); }
.etb-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.etb-chip {
        padding: .4em 1.15em; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
        font-weight: 700; font-size: .86rem; transition: all .2s;
}
.etb-chip:hover { border-color: var(--green); color: var(--green); background: var(--mint); transform: translateY(-1px); }
.etb-chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.etb-results-count { margin: 1rem 0; color: var(--muted); font-size: .86rem; font-weight: 700; }

/* ─── صفحة المنتج ─── */
.etb-crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1.4rem; }
.etb-crumbs a:hover { color: var(--green); }
.etb-product-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: start; }
.etb-product-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .3em; letter-spacing: -.02em; }
.etb-product-desc { color: var(--ink-2); }
.etb-stock { display: inline-flex; align-items: center; gap: .45em; color: var(--ok); font-weight: 700; font-size: .88rem; margin-bottom: .8rem; }
.etb-stock .etb-dot { position: static; width: 10px; height: 10px; flex: none; background: #02abf2; }

/* ─── شارات الثقة تحت زر الشراء ─── */
.etb-trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; margin-top: 1.1rem; }
.etb-trust-mini {
        display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem;
        background: var(--paper); border: 1px dashed var(--line); border-radius: 3px 12px;
        font-size: .76rem; font-weight: 700; color: var(--ink-2);
}
.etb-trust-mini svg { color: var(--green); flex: none; }

/* ─── الاستوديو ─── */
.etb-studio {
        background: var(--white); border-radius: 5px 26px; border: 1px solid var(--line);
        padding: 1.2rem; box-shadow: var(--shadow-1);
}
.etb-studio-head h2 { margin-bottom: .15em; }
.etb-studio-head p { color: var(--muted); font-size: .86rem; margin-bottom: 1rem; }
.etb-tabs { display: flex; gap: .4rem; padding: .35rem; background: var(--paper-deep); border-radius: 3px 14px; margin-bottom: 1rem; }
.etb-tab {
        flex: 1; padding: .55em .6em; border: none; border-radius: 3px 11px; background: transparent;
        font-weight: 800; font-size: .82rem; color: var(--muted); transition: all .25s var(--ease-spring);
}
.etb-tab.is-active { background: var(--green); color: #fff; box-shadow: 0 4px 14px -4px rgba(244, 11, 112, .4); }
.etb-tab-panel[hidden] { display: none; }

.etb-stage-wrap { margin-bottom: 1rem; }
.etb-stage {
        position: relative; width: 100%; aspect-ratio: 1; border-radius: 5px 20px;
        overflow: hidden; background: var(--paper-deep); touch-action: none; user-select: none;
        box-shadow: inset 0 0 0 1px var(--line);
}
.etb-stage-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.etb-print-area {
        position: absolute; border: 2px dashed rgba(244, 11, 112, .55); border-radius: 10px;
        background: rgba(244, 11, 112, .05); pointer-events: none;
        transition: opacity .3s;
}
.etb-stage.has-design .etb-print-area { border-color: transparent; background: transparent; }
.etb-stage-design {
        position: absolute; cursor: grab; z-index: 3;
        filter: drop-shadow(0 2px 6px rgba(30, 18, 40, .25));
        will-change: transform;
}
.etb-stage-design:active { cursor: grabbing; }
.etb-stage-hint {
        position: absolute; inset-inline: 0; inset-block-end: 12px; z-index: 4; margin: 0 auto; width: max-content; max-width: 90%;
        padding: .3em 1em; border-radius: 999px; background: rgba(30, 18, 40, .78); color: #fff;
        font-size: .74rem; font-weight: 600; backdrop-filter: blur(6px); pointer-events: none;
        transition: opacity .3s;
}
.etb-stage.has-design .etb-stage-hint { opacity: 0; }
.etb-stage-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(251, 250, 245, .6); backdrop-filter: blur(3px); }
.etb-spinner {
        width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid rgba(244, 11, 112, .2); border-top-color: var(--green);
        animation: etbSpin .8s linear infinite;
}
/* خطوط التوسيط (سناب) */
.etb-guide { position: absolute; background: var(--green); opacity: 0; pointer-events: none; z-index: 4; transition: opacity .15s; }
.etb-guide-v { left: 50%; inset-block: 0; width: 1.5px; margin-inline-start: -0.75px; }
.etb-guide-h { top: 50%; inset-inline: 0; height: 1.5px; margin-block-start: -0.75px; }
.etb-stage.show-guide .etb-guide { opacity: .85; }
/* تلميح الكيبورد — يظهر مع التصميم بس */
.etb-stage .etb-stage-hint-kbd { opacity: 0; transition: opacity .3s; }
.etb-stage.has-design .etb-stage-hint-kbd { opacity: 1; }
/* زر مسح التصميم العائم */
.etb-stage-x {
        position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 6;
        width: 34px; height: 34px; border: none; border-radius: 3px 10px;
        background: rgba(30, 18, 40, .8); color: #fff; display: inline-flex; align-items: center; justify-content: center;
        backdrop-filter: blur(6px); transition: background .2s, transform .2s;
}
.etb-stage-x:hover { background: var(--orange); transform: rotate(90deg); }
.etb-stage-hint-kbd {
        position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 4;
        padding: .25em .8em; border-radius: 999px; background: rgba(30, 18, 40, .6); color: #fff;
        font-size: .66rem; font-weight: 700; pointer-events: none; backdrop-filter: blur(4px);
}

.etb-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: .9rem; align-items: end; margin-top: .8rem; padding: .9rem; background: var(--paper-deep); border-radius: 5px 16px; }
.etb-ctl label { display: block; font-size: .76rem; font-weight: 800; color: var(--muted); margin-bottom: .25em; }
.etb-ctl input[type="range"] { width: 100%; accent-color: var(--green); }
.etb-ctl-btns { display: flex; gap: .45rem; flex-wrap: wrap; }
.etb-stage-msg { min-height: 1.5em; margin: .5rem 0 0; font-size: .84rem; font-weight: 700; color: var(--ok); text-align: center; }
.etb-stage-msg.etb-msg-error { color: var(--flame-dark); }

.etb-dropzone {
        display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
        padding: 1.8rem 1rem; border: 2px dashed #b9d8c8; border-radius: 5px 18px;
        background: #f7fbf5; cursor: pointer; transition: all .25s;
}
.etb-dropzone:hover, .etb-dropzone.is-drag { border-color: var(--green); background: #eff8ef; transform: translateY(-2px); }
.etb-drop-ico { display: grid; place-items: center; color: var(--green); }
.etb-dropzone b { font-size: .93rem; }
.etb-drop-types { font-size: .74rem; color: var(--muted); font-weight: 600; }
.etb-dropzone-sm { padding: 1.1rem .8rem; }

.etb-file-chip {
        display: flex; align-items: center; gap: .6rem; margin-top: .7rem;
        padding: .55rem .9rem; background: #e9f9ef; border: 1px solid #b7ecd0; border-radius: 3px 12px;
        animation: etbZoomIn .35s var(--ease-spring);
}
.etb-file-chip b { flex: 1; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
@keyframes etbZoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.etb-x { flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(30, 18, 40, .08); color: var(--ink); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.etb-x:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

.etb-panel-note { font-size: .86rem; color: var(--muted); font-weight: 600; margin-bottom: .8rem; }
.etb-ready-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: .8rem; }
.etb-ready-item {
        padding: .55rem; background: #fff; border: 1.5px solid var(--line); border-radius: 5px 14px;
        transition: all .25s var(--ease-spring);
}
.etb-ready-item img { aspect-ratio: 1; object-fit: contain; }
.etb-ready-item:hover { border-color: var(--green); transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 10px 24px -10px rgba(244, 11, 112, .35); }
.etb-ready-item.is-active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(244, 11, 112, .14); }

.etb-mockup-box {
        padding: 1.2rem; border-radius: 5px 18px; background: linear-gradient(120deg, #f2f9f5, #eaf3fd); border: 1px solid #cfe5d9;
}
.etb-mockup-box p { font-size: .88rem; color: var(--ink-2); }
.etb-mockup-note { margin-top: .8rem; font-weight: 700; color: var(--green); font-size: .84rem; display: flex; align-items: center; gap: 6px; }

/* ─── صناديق الشراء ─── */
.etb-buybox { background: var(--white); border-radius: 5px 26px; border: 1px solid var(--line); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: .9rem; }
.etb-tier-box { border: 1px solid var(--line); border-radius: 5px 16px; overflow: hidden; }
.etb-tier-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1rem; background: var(--paper-deep); font-size: .82rem; }
.etb-tier-head b { font-size: .88rem; }
.etb-tier-head span { color: var(--muted); font-size: .72rem; }
.etb-tier-rows { display: grid; grid-template-columns: repeat(3, 1fr); }
.etb-tier {
        padding: .65rem .4rem; border: none; background: #fff; border-inline-end: 1px solid var(--line);
        display: flex; flex-direction: column; align-items: center; gap: .1em; transition: all .2s;
}
.etb-tier:last-child { border-inline-end: none; }
.etb-tier span { font-size: .76rem; font-weight: 800; color: var(--muted); }
.etb-tier b { font-size: .93rem; font-variant-numeric: tabular-nums; }
.etb-tier:hover { background: var(--mint); }
.etb-tier.is-active { background: var(--mint); color: var(--green); box-shadow: inset 0 -3px 0 var(--green); }
.etb-tier.is-active span { color: var(--green); }

.etb-buy-row { display: flex; align-items: stretch; gap: .8rem; }
.etb-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 3px 13px; overflow: hidden; background: var(--paper); }
.etb-qty-btn { width: 44px; height: 48px; border: none; background: transparent; font-size: 1.25rem; font-weight: 800; color: var(--green); transition: background .2s; }
.etb-qty-btn:hover { background: var(--mint); }
.etb-qty input { width: 58px; border: none; background: transparent; text-align: center; font-weight: 800; font-size: 1.05rem; }
.etb-qty input:focus { outline: none; }
.etb-total { flex: 1; display: flex; flex-direction: column; align-items: end; justify-content: center; line-height: 1.3; }
.etb-total span { font-size: .76rem; color: var(--muted); font-weight: 700; }
.etb-total b { font-size: 1.4rem; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }

.etb-specs { border-top: 1px dashed var(--line); padding-top: 1rem; }
.etb-specs dl { margin: 0; }
.etb-spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.etb-spec-row:last-child { border-bottom: none; }
.etb-spec-row dt { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.etb-spec-row dd { margin: 0; font-weight: 700; text-align: end; }

.etb-desc-block { margin-top: 2.2rem; padding: 1.4rem 1.6rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); }
.etb-prose p { color: var(--ink-2); }
.etb-related { margin-top: 2.4rem; }

/* ─── السلة والشيك أوت ─── */
.etb-checkout-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.6rem; align-items: start; }
.etb-cart-side, .etb-checkout-side { background: var(--white); border-radius: 5px 26px; border: 1px solid var(--line); padding: 1.3rem; box-shadow: var(--shadow-1); }
.etb-cart-item { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px dashed var(--line); }
.etb-cart-item:last-child { border-bottom: none; }
.etb-cart-thumb img { width: 74px; height: 74px; border-radius: 5px 12px; object-fit: cover; }
.etb-cart-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.etb-cart-info b { font-size: .93rem; }
.etb-cart-line { display: flex; flex-direction: column; align-items: end; gap: .4rem; }
.etb-cart-line b { color: var(--orange); font-size: .98rem; font-variant-numeric: tabular-nums; }
.etb-preview-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.etb-preview-chip img { width: 40px; height: 40px; border-radius: 5px 9px; object-fit: cover; border: 1px solid var(--line); }
.etb-free-ship-note { margin: 1rem 0 0; padding: .6rem 1rem; border-radius: 3px 12px; background: #fdf3d7; color: #92400e; font-size: .82rem; font-weight: 700; text-align: center; }
.etb-free-ship-note.is-free { background: #e9f9ef; color: #15803d; }

.etb-form-card { display: flex; flex-direction: column; gap: .9rem; }
.etb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.etb-field { display: flex; flex-direction: column; gap: .3rem; }
.etb-field-full { grid-column: 1 / -1; }
.etb-field label { font-weight: 800; font-size: .84rem; }
.etb-field input, .etb-field select, .etb-field textarea {
        padding: .68em 1em; border-radius: 3px 12px; border: 1px solid var(--line); background: var(--paper);
        transition: border-color .2s, box-shadow .2s; width: 100%;
}
.etb-field input:focus, .etb-field select:focus, .etb-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(244, 11, 112, .1); }
.etb-form-msg { min-height: 1.4em; margin: 0; font-weight: 700; font-size: .88rem; color: var(--ok); }
.etb-msg-error { color: var(--flame-dark); animation: etbShake .5s ease; }
@keyframes etbShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.etb-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.etb-pay-option {
        position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem;
        padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 5px 16px; cursor: pointer; transition: all .2s; background: #fff;
}
.etb-pay-option input { position: absolute; opacity: 0; pointer-events: none; grid-area: 1 / 1; }
.etb-pay-ico { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; color: var(--green); }
.etb-pay-option b { font-size: .9rem; }
.etb-pay-option small { grid-column: 2; font-size: .72rem; color: var(--muted); }
.etb-pay-option:has(input:checked) { border-color: var(--green); background: #f4faf6; box-shadow: 0 0 0 3px rgba(244, 11, 112, .12); }

.etb-summary { padding: 1rem 1.1rem; background: var(--paper-deep); border-radius: 5px 16px; }
.etb-sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .9rem; }
.etb-sum-total { border-top: 1.5px dashed var(--line); margin-top: .4rem; padding-top: .7rem; font-size: 1rem; }
.etb-sum-total b { color: var(--orange); font-size: 1.28rem; font-weight: 800; }

.etb-success { max-width: 560px; margin: 1rem auto; text-align: center; background: var(--white); border-radius: 5px 26px; border: 1px solid var(--line); padding: 2.4rem 1.8rem; box-shadow: var(--shadow-1); }
.etb-success-ico { width: 92px; height: 92px; margin: 0 auto .8rem; border-radius: 50%; background: #e9f9ef; color: var(--ok); display: grid; place-items: center; }
.etb-success-num { font-size: 1.02rem; }
.etb-success-num b { color: var(--orange); font-size: 1.22rem; direction: ltr; display: inline-block; }

/* ─── صفحة الدخول والطابعة ─── */
.etb-auth-page { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.6rem) 0; }
.etb-auth-in { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; align-items: center; }
.etb-auth-brand h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.etb-auth-brand p { color: var(--muted); max-width: 26rem; }
.etb-auth-floats { display: flex; gap: 1.2rem; margin-top: 1.6rem; }
.etb-auth-floats span { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; overflow: hidden; background: var(--white); border-radius: 19px 5px; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.etb-auth-floats span img { width: 76%; height: 76%; object-fit: contain; }

.etb-auth-card {
        background: var(--white); border-radius: 5px 26px; border: 1px solid var(--line);
        padding: 1.6rem; box-shadow: var(--shadow-2); max-width: 460px; width: 100%; margin-inline: auto;
}
.etb-printer-zone { text-align: center; margin-bottom: 1rem; }
.etb-printer { position: relative; display: inline-block; animation: etbBob 4.5s ease-in-out infinite; color: var(--green); }
.etb-printer-led { animation: etbBlink 1.1s ease-in-out infinite; }
@keyframes etbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.etb-paper {
        position: relative; margin: -14px auto 0; width: 150px; height: 8px;
        background: #fff; border: 1px solid var(--line); border-top: none;
        border-radius: 0 0 8px 8px; overflow: hidden;
        transition: height .5s var(--ease-spring);
        box-shadow: 0 6px 16px -8px rgba(30, 18, 40, .25);
}
.etb-paper-inner { position: absolute; inset: 0; padding: 8px 12px; text-align: center; direction: ltr; }
.etb-paper-line { font-size: .66rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.etb-paper-line.is-shown { opacity: 1; }
.etb-paper-dots { letter-spacing: .2em; color: var(--muted); }
.etb-paper-stamp { margin-top: 6px; font-size: .6rem; font-weight: 800; color: var(--green); opacity: 0; transform: scale(.6); transition: all .4s var(--ease-spring); }
.etb-paper.has-stamp .etb-paper-stamp { opacity: 1; transform: scale(1); }
.etb-printer-hint { font-size: .78rem; color: var(--muted); font-weight: 600; margin: .6rem 0 0; }

.etb-auth-tabs { display: flex; gap: .35rem; padding: .3rem; background: var(--paper-deep); border-radius: 3px 14px; margin-bottom: 1.1rem; }
.etb-auth-tab { flex: 1; padding: .55em; border: none; border-radius: 3px 11px; background: transparent; font-weight: 800; font-size: .88rem; color: var(--muted); transition: all .25s; }
.etb-auth-tab.is-active { background: var(--green); color: #fff; }
.etb-auth-form { display: flex; flex-direction: column; gap: .85rem; }
.etb-auth-form[hidden] { display: none; }
.etb-demo-note { text-align: center; font-size: .74rem; color: var(--muted); margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.etb-social-wrap { margin-top: 1.2rem; border-top: 1px dashed var(--line); padding-top: 1.1rem; text-align: center; }
.etb-social-or { display: block; font-size: .78rem; color: var(--muted); font-weight: 700; margin-bottom: .7rem; }
.etb-social-btns { display: flex; gap: .7rem; justify-content: center; }
.etb-social-btn {
        display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.4em;
        border-radius: 3px 12px; border: 1px solid var(--line); background: #fff;
        font-weight: 800; font-size: .9rem; transition: all .2s;
}
.etb-social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: #aab7ae; }
.etb-social-note { font-size: .7rem; color: var(--muted); margin: .7rem 0 0; }
.etb-secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: .82rem; color: var(--muted); }
.etb-secure-note svg { color: var(--ok); flex: none; }

/* انفجار الورقة وتحويلها للوجو */
.etb-print-morph { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(251, 250, 245, .96); backdrop-filter: blur(10px); }
.etb-print-morph[hidden] { display: none; }
.etb-morph-paper {
        position: absolute; width: 150px; height: 200px; border-radius: 10px; background: #fff;
        box-shadow: 0 20px 60px -20px rgba(30, 18, 40, .35);
        animation: etbPaperZoom 1.15s var(--ease-spring) forwards;
}
@keyframes etbPaperZoom {
        0% { transform: scale(.4) rotate(-4deg); opacity: .4; }
        55% { transform: scale(1.7) rotate(1deg); opacity: 1; }
        100% { transform: scale(4.2) rotate(0deg); opacity: 0; }
}
.etb-morph-logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: 0; animation: etbLogoIn .6s var(--ease-spring) .75s forwards; }
.etb-morph-logo b { font-size: 2rem; font-weight: 800; }
.etb-morph-logo span { color: var(--muted); font-weight: 700; letter-spacing: .06em; }
@keyframes etbLogoIn { from { opacity: 0; transform: scale(.5) translateY(24px); } to { opacity: 1; transform: none; } }
.etb-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -4vh; width: 10px; height: 15px; border-radius: 2px; animation: etbConfetti linear forwards; }
@keyframes etbConfetti { to { transform: translateY(110vh) rotate(720deg); } }

/* ─── حسابي والطلبات ─── */
.etb-account-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.etb-account-user { display: flex; align-items: center; gap: 1rem; }
.etb-account-user div { display: flex; flex-direction: column; line-height: 1.4; }
.etb-account-user small { color: var(--muted); font-size: .74rem; }
.etb-avatar {
        display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
        border-radius: 50%; background: var(--grad-teal); color: #fff; font-size: 1.4rem; font-weight: 800;
        box-shadow: 0 8px 22px -8px rgba(244, 11, 112, .55);
}
.etb-orders-list { display: grid; gap: .9rem; }
.etb-order-row { padding: 1.1rem 1.3rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); transition: box-shadow .25s, transform .25s; }
.etb-order-row:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.etb-order-main { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.etb-order-num { font-size: 1rem; direction: ltr; }
.etb-order-date { color: var(--muted); font-size: .82rem; font-weight: 600; }
.etb-status-pill { padding: .2em .9em; border-radius: 999px; font-size: .74rem; font-weight: 800; background: var(--paper-deep); color: var(--muted); }
.etb-status-pill.st-new { background: #ffe9e5; color: var(--flame-dark); }
.etb-status-pill.st-in_production { background: #e3f4ff; color: #1d6fd8; }
.etb-status-pill.st-shipped { background: #e3f4ff; color: #0e7490; }
.etb-status-pill.st-done { background: #e9f9ef; color: #15803d; }
.etb-order-items { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .45rem 0; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.etb-order-previews { display: flex; gap: .5rem; flex-wrap: wrap; }
.etb-order-previews img { width: 62px; height: 62px; border-radius: 5px 11px; object-fit: cover; border: 1px solid var(--line); }
.etb-order-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }
.etb-order-foot b { color: var(--orange); font-size: 1.08rem; }

/* ─── عروض الأسعار ─── */
.etb-quote-perks { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.4rem; }
.etb-quote-perks span { padding: .5em 1.2em; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .86rem; }

/* ─── الأسئلة ─── */
.etb-faq-list { display: grid; gap: .7rem; }
.etb-faq { background: var(--white); border: 1px solid var(--line); border-radius: 5px 18px; overflow: hidden; transition: box-shadow .25s; }
.etb-faq[open] { box-shadow: var(--shadow-1); border-color: #b9d8c8; }
.etb-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; cursor: pointer; font-weight: 800; }
.etb-faq summary::-webkit-details-marker { display: none; }
.etb-faq-x { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-deep); font-weight: 800; transition: all .3s var(--ease-spring); }
.etb-faq[open] .etb-faq-x { transform: rotate(45deg); background: var(--green); color: #fff; }
.etb-faq > p { padding: 0 1.3rem 1.1rem; margin: 0; color: var(--ink-2); }
.etb-faq-cta { text-align: center; margin-top: 2rem; }
.etb-faq-cta p { font-weight: 800; }
.etb-faq-cta .etb-hero-ctas { justify-content: center; }

/* ─── عن اطبعها ─── */
.etb-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; }
.etb-mv-card { padding: 1.5rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); }
.etb-mv-card span { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 3px 14px; background: var(--mint); color: var(--green); margin-bottom: .7rem; }
.etb-mv-card p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ─── صفحة التصاميم الجاهزة ─── */
.etb-ready-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); box-shadow: var(--shadow-1); margin-bottom: 1.5rem; }
.etb-ready-products { display: flex; gap: .5rem; flex-wrap: wrap; }
.etb-mini-prod img { width: 52px; height: 52px; border-radius: 5px 11px; object-fit: cover; border: 1.5px solid var(--line); transition: all .2s; }
.etb-mini-prod:hover img { border-color: var(--green); transform: translateY(-2px); }
.etb-mini-prod.is-active img { border-color: var(--green); box-shadow: 0 0 0 3px rgba(244, 11, 112, .14); }
.etb-designs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.etb-design-card { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; background: var(--white); border-radius: 5px 22px; border: 1px solid var(--line); transition: all .3s var(--ease-spring); }
.etb-design-card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--shadow-2); border-color: #b9d8c8; }
.etb-design-frame { display: block; background: var(--paper-deep); border-radius: 5px 14px; padding: 1rem; }
.etb-design-frame img { aspect-ratio: 1; object-fit: contain; }
.etb-design-card b { font-size: .9rem; }
.etb-design-cta { font-size: .76rem; color: var(--green); font-weight: 800; }

/* ─── عناصر عامة ─── */
.etb-empty { text-align: center; padding: 3rem 1rem; }
.etb-empty-ico { display: grid; place-items: center; color: var(--orange); opacity: .8; margin-bottom: .8rem; }
.etb-empty .etb-btn { margin-top: .8rem; }

.etb-whatsapp-float {
        position: fixed; inset-block-end: 84px; inset-inline-end: 18px; z-index: 47;
        display: inline-flex; align-items: center; justify-content: center;
        width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
        box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .7);
        transition: transform .25s var(--ease-spring);
        animation: etbPulseRing 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
.etb-whatsapp-float:hover { transform: scale(1.1) rotate(6deg); }
@keyframes etbPulseRing { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

.etb-toasts { position: fixed; inset-block-start: 74px; inset-inline-end: 16px; z-index: 100; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.etb-toast {
        display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-radius: 3px 12px;
        background: var(--green-dark); color: #fff; font-weight: 700; font-size: .88rem;
        box-shadow: var(--shadow-2); animation: etbToastIn .4s var(--ease-spring);
        max-width: 320px;
}
.etb-toast.is-out { animation: etbToastOut .3s ease forwards; }
@keyframes etbToastIn { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes etbToastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.etb-toast-ico { display: inline-flex; color: var(--gold); }

/* ─── الفوتر — فاتح زي المرجع ─── */
.etb-footer { background: #e9e9df; color: var(--ink); margin-top: 2rem; }
.etb-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 2rem; padding: clamp(2.4rem, 5vw, 3.4rem) 0 2rem; }
.etb-footer h4 { color: var(--ink-2); margin-bottom: .9em; font-size: .95rem; }
.etb-footer-brand p { font-size: .88rem; color: var(--muted); }
.etb-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.etb-footer-links a { color: var(--green); font-size: .88rem; font-weight: 700; border-bottom: 1px solid #7d9a8a; padding-bottom: 3px; display: inline-block; transition: color .2s, border-color .2s; }
.etb-footer-links a:hover { color: var(--orange); border-color: var(--orange); }
.etb-socials { display: flex; gap: .6rem; margin-top: 1rem; }
.etb-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 3px 12px; background: rgba(30, 18, 40, .07); color: var(--green-dark); transition: all .25s; }
.etb-socials a:hover { background: var(--green); color: #fff; transform: translateY(-3px); }
.etb-footer-news p { font-size: .86rem; color: var(--muted); }
.etb-news-form { display: flex; gap: .5rem; }
.etb-news-form input {
        flex: 1; min-width: 0; padding: .65em 1.1em; border-radius: 3px 12px; border: 1px solid var(--line);
        background: #fff; color: var(--ink);
}
.etb-news-form input::placeholder { color: var(--muted); }
.etb-news-form input:focus { outline: none; border-color: var(--green); }
.etb-news-msg { margin: .5rem 0 0; font-size: .82rem; font-weight: 700; color: var(--green); }
.etb-contact-lines { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.1rem; font-size: .88rem; }
.etb-contact-lines a, .etb-contact-lines span { display: flex; align-items: center; gap: 9px; }
.etb-contact-lines svg { flex: none; color: var(--green); }
.etb-contact-lines a:hover { color: var(--orange); }
.etb-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 0 1.4rem; border-top: 1px solid rgba(30, 18, 40, .13); font-size: .8rem; color: #77827b; }

/* وسائل الدفع + السياسات */
.etb-footer-pay { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.etb-pay-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgba(30, 18, 40, .16); border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--ink-2); background: rgba(255, 255, 255, .55); }
.etb-footer-policies { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.etb-footer-policies a { color: var(--green); font-weight: 700; }
.etb-footer-policies a:hover { color: var(--orange); }

/* ─── الفاتورة ─── */
.etb-invoice-body { background: var(--paper-deep); }
.etb-invoice-wrap { max-width: 820px; margin: 2rem auto; padding: 0 1rem; }
.etb-invoice { position: relative; background: #fff; border-radius: 5px 26px; box-shadow: var(--shadow-2); overflow: hidden; }
.etb-inv-strip { height: 6px; background: linear-gradient(90deg, var(--green) 0 50%, var(--orange) 50% 78%, var(--gold) 78%); }
.etb-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.8rem 2rem 1rem; }
.etb-inv-brand { display: flex; align-items: center; gap: .9rem; }
.etb-inv-brand div { display: flex; flex-direction: column; line-height: 1.25; }
.etb-inv-name { font-size: 1.45rem; font-weight: 800; }
.etb-inv-site { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.etb-inv-meta { text-align: end; }
.etb-inv-meta-rows { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; }
.etb-inv-meta-rows em { font-style: normal; color: var(--muted); }
.etb-inv-status { display: inline-block; width: max-content; margin-inline-start: auto; padding: .15em 1em; border-radius: 999px; font-size: .76rem; font-weight: 800; background: #ffe9e5; color: var(--flame-dark); }
.etb-inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .8rem 2rem; }
.etb-inv-parties h4 { margin-bottom: .3em; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.etb-inv-parties b { font-size: 1.02rem; }
.etb-inv-parties p { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-2); }
.etb-inv-table { width: 100%; border-collapse: collapse; margin: .8rem 0 0; font-size: .9rem; }
.etb-inv-table th { background: var(--green-dark); color: #fff; padding: .7em 1em; text-align: start; font-size: .8rem; }
.etb-inv-table td { padding: .8em 1em; border-bottom: 1px solid var(--line); vertical-align: top; }
.etb-inv-table .etb-c { text-align: center; }
.etb-inv-tier { display: inline-block; margin-inline-start: .5em; padding: .05em .6em; border-radius: 999px; background: var(--mint); color: var(--green); font-size: .72rem; font-weight: 800; }
.etb-inv-previews { padding: 1rem 2rem 0; }
.etb-inv-previews h4 { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.etb-inv-preview-grid { display: flex; gap: .7rem; flex-wrap: wrap; }
.etb-inv-preview-grid img { width: 92px; height: 92px; border-radius: 5px 11px; object-fit: cover; border: 1px solid var(--line); }
.etb-inv-totals { margin-inline-start: auto; width: min(320px, 100%); padding: 1.2rem 2rem; }
.etb-inv-notes { margin: 0; padding: 0 2rem 1rem; color: var(--muted); font-size: .86rem; }
.etb-inv-foot { padding: 1.2rem 2rem 1.8rem; text-align: center; border-top: 1px dashed var(--line); }
.etb-inv-barcode { display: flex; justify-content: center; align-items: flex-end; gap: 2px; height: 34px; margin-bottom: .7rem; }
.etb-inv-barcode span { display: inline-block; height: 100%; background: var(--ink); border-radius: 1px; }
.etb-inv-thanks { font-size: 1.02rem; }
.etb-inv-note { color: var(--muted); font-size: .76rem; margin: .2rem 0 0; }
.etb-inv-actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.etb-inv-empty { padding: 3rem; text-align: center; font-size: 2rem; }
.etb-inv-empty p { font-size: 1rem; font-weight: 700; }

/* ─── فوتر لاصق ─── */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .etb-main { flex: 1; }

/* ─── تجاوب ─── */
@media (max-width: 1024px) {
        .etb-hero-in { grid-template-columns: 1fr; }
        .etb-hero-visual { min-height: 360px; max-width: 500px; margin-inline: auto; width: 100%; }
        .etb-cats-grid { grid-template-columns: repeat(3, 1fr); }
        .etb-products-grid { grid-template-columns: repeat(3, 1fr); }
        .etb-why-grid { grid-template-columns: repeat(2, 1fr); }
        .etb-testi-grid { grid-template-columns: 1fr 1fr; }
        .etb-designs-grid { grid-template-columns: repeat(3, 1fr); }
        .etb-footer-grid { grid-template-columns: 1fr 1fr; }
        .etb-product-layout { grid-template-columns: 1fr; }
        .etb-checkout-layout { grid-template-columns: 1fr; }
        .etb-auth-in { grid-template-columns: 1fr; }
        .etb-auth-brand { display: none; }
}
@media (max-width: 768px) {
        html { font-size: 15px; }
        .etb-nav { display: none; }
        .etb-burger { display: inline-flex; }
        .etb-mobile-bar { display: flex; justify-content: space-around; }
        .etb-whatsapp-float { inset-block-end: 74px; }
        body { padding-bottom: 58px; }
        .etb-products-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
        .etb-cats-grid { grid-template-columns: repeat(2, 1fr); }
        .etb-why-grid { grid-template-columns: 1fr; }
        .etb-testi-grid { grid-template-columns: 1fr; }
        .etb-designs-grid { grid-template-columns: repeat(2, 1fr); }
        .etb-steps { flex-direction: column; }
        .etb-step-arrow { transform: rotate(90deg); align-self: center; }
        [dir="ltr"] .etb-step-arrow { transform: rotate(-90deg) scaleX(-1); }
        .etb-ready-cta { grid-template-columns: 1fr; }
        .etb-form-grid { grid-template-columns: 1fr; }
        .etb-pay-grid { grid-template-columns: 1fr; }
        .etb-controls { grid-template-columns: 1fr 1fr; }
        .etb-ctl-btns { grid-column: 1 / -1; justify-content: stretch; }
        .etb-ctl-btns .etb-btn { flex: 1; }
        .etb-ready-grid { grid-template-columns: repeat(3, 1fr); }
        .etb-mv-grid { grid-template-columns: 1fr; }
        .etb-sec-head-row { flex-direction: column; align-items: flex-start; }
        .etb-hero-stats { gap: 1rem 1.4rem; }
        .etb-hero-visual { min-height: 330px; }
        .etb-hero-sticker { width: 84px; height: 84px; font-size: .6rem; inset-inline-start: -2%; }
        .etb-nf1, .etb-nf2 { display: none; }
        .etb-topbar { padding-inline: 16px; }
        .etb-topbar-phone { display: none; }
        .etb-inv-head, .etb-inv-parties { padding-inline: 1.2rem; }
        .etb-inv-parties { grid-template-columns: 1fr; }
        .etb-inv-totals { padding-inline: 1.2rem; }
        .etb-inv-foot { padding-inline: 1.2rem; }
}
@media (max-width: 480px) {
        .etb-products-grid { grid-template-columns: 1fr 1fr; }
        .etb-hero-visual { min-height: 300px; }
        .etb-ready-grid { grid-template-columns: repeat(2, 1fr); }
        .etb-footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
        .etb-news-form { flex-direction: column; }
        .etb-buy-row { flex-wrap: wrap; }
        .etb-total { align-items: flex-start; }
        .etb-trust-row { grid-template-columns: 1fr 1fr; }
}

/* طباعة الفاتورة */
@media print {
        body { background: #fff; padding: 0; }
        .etb-invoice-wrap { margin: 0; max-width: 100%; padding: 0; }
        .etb-invoice { box-shadow: none; border-radius: 0; }
        .etb-inv-actions, .etb-toasts, .etb-mobile-bar, .etb-whatsapp-float { display: none !important; }
        @page { size: A4; margin: 10mm; }
}

/* القالب الاحتياطي index.php */
.etb-fallback { padding: 48px 0 80px; }
.etb-fallback-card { max-width: 820px; margin: 0 auto 24px; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 5px 22px; }
.etb-fallback-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 16px; color: var(--ink); }
.etb-fallback-title a { color: inherit; text-decoration: none; }
.etb-fallback-title a:hover { color: var(--orange); }
.etb-fallback-thumb { margin: 0 0 20px; border-radius: 5px 18px; overflow: hidden; }
.etb-fallback-thumb img { width: 100%; height: auto; display: block; }
.etb-fallback-content { color: var(--ink); line-height: 1.9; }
.etb-fallback-content a { color: var(--green); }
.etb-fallback-empty { text-align: center; }
.etb-fallback-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.etb-page-links { margin-top: 16px; }
.etb-pagination { margin: 32px auto 0; max-width: 820px; display: flex; justify-content: center; }
.etb-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; margin: 0 4px; padding: 0 12px; border-radius: 3px 12px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-1); }
.etb-pagination .page-numbers.current { background: var(--green); color: #fff; }
.etb-pagination .page-numbers:hover { color: var(--green); }

/* ─── أيقونات SVG داخل صناديق ─── */
.etb-why-ico, .etb-cat-ico, .etb-pay-ico, .etb-drop-ico, .etb-file-ico,
.etb-empty-ico, .etb-toast-ico, .etb-val-ico, .etb-ico-box { display: grid !important; place-items: center; }
.etb-why-ico svg, .etb-cat-ico svg, .etb-pay-ico svg, .etb-drop-ico svg, .etb-file-ico svg,
.etb-empty-ico svg, .etb-toast-ico svg, .etb-val-ico svg, .etb-ico-box svg { display: block; }
.etb-stat-star { display: inline-flex; align-items: center; gap: 5px; }
.etb-stat-star svg { color: var(--gold); flex: none; }
.etb-demo-note svg { color: var(--gold); }

/* ─── شريط الثقة تحت الهيرو ─── */
.etb-trustbar { background: var(--white); border-block: 1px solid var(--line); }
.etb-trustbar-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-block: 26px; }
.etb-trust-item { display: flex; flex-direction: column; align-items: flex-start; }
.etb-trust-item .etb-ico-box { width: 44px; height: 44px; border-radius: 3px 13px; color: var(--green); background: var(--mint); margin-bottom: 10px; }
.etb-trust-item b { font-size: .93rem; color: var(--ink); }
.etb-trust-item > span:last-child { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ─── سكلتون صورة المنتج ─── */
.etb-stage.etb-stage-loading-img::after {
        content: '';
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(100deg, var(--paper-deep) 40%, #f6faf7 50%, var(--paper-deep) 60%);
        background-size: 200% 100%;
        animation: etbShimmer 1.4s linear infinite;
        pointer-events: none;
}
.etb-stage.etb-stage-loading-img .etb-stage-base { opacity: 0; transition: opacity .45s ease; }
.etb-stage:not(.etb-stage-loading-img) .etb-stage-base { opacity: 1; transition: opacity .45s ease; }
@keyframes etbShimmer { to { background-position: -200% 0; } }

/* ─── أدوات النص في الاستوديو ─── */
.etb-ctl-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.etb-ctl-halves > div { min-width: 0; }

/* ─── الفلاتر السريعة لاستوديو التصميم ─── */
.etb-ctl-filters { margin-top: 2px; }
.etb-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.etb-filter-chips button {
        padding: .42em 1em; border-radius: 999px; cursor: pointer;
        border: 1.5px solid var(--line); background: #fff;
        font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2);
        transition: all .22s var(--ease-spring);
}
.etb-filter-chips button:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-1px); }
.etb-filter-chips button.is-active {
        background: var(--pink); border-color: var(--pink); color: #fff;
        box-shadow: 0 6px 16px -6px rgba(244, 11, 112, .55);
}
.etb-outline-color { flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: 46%; }
.etb-outline-color label { font-size: .76rem; font-weight: 700; color: var(--muted); }
.etb-text-tool {
        border: 1.5px dashed var(--line); border-radius: 5px 16px;
        padding: 14px 16px 16px; margin-top: 14px;
        background: #fff;
}
.etb-text-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.etb-text-row input[type="text"] {
        flex: 1; min-width: 0; padding: .68em 1em;
        border: 1.5px solid var(--line); border-radius: 3px 12px;
        font-family: inherit; font-size: .95rem; color: var(--ink);
        transition: border-color .2s;
}
.etb-text-row input[type="text"]:focus { outline: none; border-color: var(--green); }
.etb-text-row-2 { align-items: stretch; }
.etb-text-row-2 > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.etb-text-row-2 label { font-size: .76rem; font-weight: 700; color: var(--muted); }
.etb-text-row select {
        flex: 1; min-width: 0; padding: .6em .8em; border: 1.5px solid var(--line);
        border-radius: 3px 12px; background: #fff; font-weight: 700; font-size: .88rem; color: var(--ink);
}
.etb-text-check { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.etb-text-check input { width: 17px; height: 17px; accent-color: var(--green); }
input[type="color"] {
        width: 100%; height: 42px; padding: 3px;
        border: 1.5px solid var(--line); border-radius: 3px 12px;
        background: #fff; cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px 8px; }

@media (max-width: 980px) { .etb-trustbar-in { grid-template-columns: repeat(2, 1fr); } }


/* قلب اتجاه السهم للاستخدامات العكسية (سابق/تالي) */
.etb-arr-flip svg { transform: scaleX(-1); }
[dir="ltr"] .etb-arr-flip svg { transform: none; }
.etb-pagination .page-numbers .etb-arr svg { display: block; }