/* ==========================================================================
   قائمة — نظام إدارة المنيو الرقمي | ورقة أنماط عامة (RTL أولاً)
   ========================================================================== */

:root {
    /* عناصر التحكم الأصلية (التقويم، القوائم المنسدلة، أشرطة التمرير) تُرسم للوضع الداكن */
    color-scheme: dark;
    --bg: #0A0C08;
    --surface: #111613;
    --ink: #EEF7F1;
    --ink-soft: #A0B0A7;
    --line: #24312B;
    --line-strong: #35463D;
    --accent: #00E676;
    --accent-dark: #00B85C;
    --accent-soft: #073A29;
    --dark: #070D0A;
    --dark-2: #111B16;
    --cream: #E8FFF1;
    --green: #00D96B;
    --green-soft: #0A3A29;
    --red: #FF786C;
    --red-soft: #431F1E;
    --amber: #F4C95D;
    --amber-soft: #42371A;
    --font: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --display: 'Sora', 'Tajawal', sans-serif;
    --radius: 16px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::placeholder { color: #8AA093; opacity: 1; }

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.w-full { width: 100%; }

.language-switcher {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 40;
}
.language-switcher__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.language-switcher__link:hover { border-color: var(--accent); color: var(--accent); }
html[dir="rtl"] .language-switcher { inset-inline-end: 1rem; }

/* ===== الأزرار ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .62rem 1.15rem; border-radius: 11px; border: 1.5px solid transparent;
    font-weight: 700; font-size: .95rem; cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--dark { background: var(--dark); color: var(--cream); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: #F1EADD; }
.btn--soft { background: var(--accent-soft); color: var(--accent-dark); }
.btn--danger { background: var(--red-soft); color: var(--red); }
.btn--sm { padding: .38rem .75rem; font-size: .84rem; border-radius: 9px; }
.btn--icon { padding: .5rem; border-radius: 10px; }

/* ===== الحقول ===== */
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__subtitle { margin: .4rem 0 0; font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-weight: 700; font-size: .9rem; }
.field__hint { font-size: .8rem; color: var(--ink-soft); margin: 0; }
.field__error { font-size: .8rem; color: var(--red); font-weight: 600; }
/* القاعدة الموحدة لكل الحقول — داكنة من المصدر (لا خلفية بيضاء مع نص فاتح موروث) */
.input {
    width: 100%; padding: .68rem .9rem; background: #0D130F; color: var(--ink);
    border: 1.5px solid var(--line-strong); border-radius: 11px;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 230, 118, .14); }
.input--error { border-color: var(--red); }
select.input { cursor: pointer; }
textarea.input { resize: vertical; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-inline-end: 2.8rem; }
.eye {
    position: absolute; inset-inline-end: .55rem;
    display: inline-flex; padding: .35rem; border-radius: 8px; color: var(--ink-soft);
}
.eye:hover { color: var(--ink); background: rgba(0, 230, 118, .1); }
.eye .i-off { display: none; }
.eye.is-visible .i-on { display: none; }
.eye.is-visible .i-off { display: inline-flex; }
.input-group { display: flex; align-items: stretch; }
/* الملاحظة: التطبيق يعمل باتجاه RTL فقط، لذا الزوايا مبنية على اليمين */
.input-group__addon {
    display: flex; align-items: center; padding: 0 .8rem; white-space: nowrap;
    background: #17221C; border: 1.5px solid var(--line-strong); border-inline-end: none;
    border-radius: 0 11px 11px 0; color: var(--ink-soft); font-size: .85rem;
}
.input-group .input { border-radius: 11px 0 0 11px; }
.check { display: flex; gap: .5rem; align-items: center; font-size: .9rem; font-weight: 600; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.alert { padding: .75rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.alert--error { background: var(--red-soft); color: var(--red); }

/* ===== فاصل "أو" وزر Google — صفحتا الدخول والتسجيل ===== */
.auth-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.2rem 0; color: var(--ink-soft); font-size: .82rem; font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--line-strong);
}
.google-btn { margin-top: 0; }
.google-btn__icon { flex-shrink: 0; }

/* قائمة متطلبات كلمة المرور */
.pwd-rules { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.pwd-rules li { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink-soft); }
.pwd-rules li.is-ok { color: var(--green); font-weight: 700; }
.pwd-rules .ri { display: inline-flex; }
.pwd-rules .i-check { display: none; color: var(--green); }
.pwd-rules .i-x { color: #C4B69E; }
.pwd-rules li.is-ok .i-check { display: inline-flex; }
.pwd-rules li.is-ok .i-x { display: none; }

/* ===== بطاقات وعناوين ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.card__title { margin: 0; font-size: 1.05rem; }
.card__more { font-size: .85rem; font-weight: 700; color: var(--accent-dark); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-title { margin: 0; font-size: 1.35rem; }
.page-sub { margin: .2rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.narrow { max-width: 620px; margin-inline: auto; }
.back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem; color: var(--ink-soft); margin-bottom: .9rem; }
.back:hover { color: var(--accent-dark); }
.empty {
    text-align: center; padding: 3rem 1.5rem; background: #fff;
    border: 1.5px dashed var(--line-strong); border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.empty > .icon { width: 46px; height: 46px; color: #C9BA9F; }
.empty__title { margin: 0; font-size: 1.15rem; }
.empty__text { margin: 0 0 .8rem; color: var(--ink-soft); max-width: 420px; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.code-404 { font-family: var(--display); font-size: 3rem; color: var(--accent); line-height: 1; }

/* ===== شريط الإحصائيات ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: .4rem 0; margin-top: 1rem; }
.stat { display: flex; flex-direction: column; padding: .5rem 1.3rem; }
.stat + .stat { border-inline-start: 1px dashed var(--line-strong); }
.stat__num { font-size: 1.7rem; font-weight: 800; color: var(--accent-dark); line-height: 1.2; }
.stat__label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.stat__hint { font-size: .75rem; color: #A79B88; }

/* ===== بطاقة المتجر في لوحة التحكم ===== */
.store-card { display: flex; flex-direction: column; gap: 1rem; }
.store-card__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.store-card__logo {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--line-strong); background: var(--accent-soft);
    display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: var(--accent-dark);
}
.store-card__info { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 220px; }
.store-card__info strong { font-size: 1.1rem; }
.url-row { display: flex; align-items: center; gap: .4rem; }
.url-row code {
    background: #F1EADD; padding: .25rem .6rem; border-radius: 8px;
    font-size: .82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seg { display: inline-flex; background: #F1EADD; border-radius: 12px; padding: 4px; gap: 4px; width: fit-content; }
.seg__btn { padding: .45rem 1.1rem; border-radius: 9px; font-weight: 700; font-size: .88rem; color: var(--ink-soft); }
.seg__btn.is-active { background: var(--dark); color: var(--cream); }

/* ===== الصفوف (الأقسام / المنتجات) ===== */
.rows { display: flex; flex-direction: column; gap: .6rem; }
.row {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .75rem 1rem;
    transition: box-shadow .15s ease;
}
.row:hover { box-shadow: var(--shadow); }
.sortable-ghost { opacity: .35; border-style: dashed; }
.grip { cursor: grab; color: #BFB29A; display: inline-flex; padding: .2rem; }
.row__main { display: flex; flex-direction: column; flex: 1; min-width: 160px; }
.row__main small { color: var(--ink-soft); }
.row__actions { display: flex; align-items: center; gap: .4rem; }
.row__thumb { width: 68px; height: 68px; border-radius: 11px; object-fit: cover; border: 1px solid var(--line); }
.row__thumb--empty {
    display: grid; place-items: center; background: #F1EADD; color: #B3A78F;
}
.row__thumb--empty .icon { width: 22px; height: 22px; }

/* ===== مفاتيح التبديل ===== */
.switch {
    width: 42px; height: 24px; border-radius: 99px; background: #D8CFC0;
    position: relative; flex: none; transition: background .2s ease;
}
.switch__knob {
    position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: inset-inline-start .2s ease;
}
.switch.is-on, .switch[aria-checked="true"] { background: var(--green); }
.switch.is-on .switch__knob, .switch[aria-checked="true"] .switch__knob { inset-inline-start: 21px; }
.switch:disabled { opacity: .5; }
.toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.switch-check { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; cursor: pointer; }
.switch-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-check .switch { background: #D8CFC0; }
.switch-check input:checked + .switch { background: var(--green); }
.switch-check input:checked + .switch .switch__knob { inset-inline-start: 21px; }
.switch-check input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row { display: flex; gap: 1.6rem; flex-wrap: wrap; padding: .4rem 0; }

/* ===== الشارات ===== */
.badge { display: inline-flex; align-items: center; padding: .18rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; margin-inline-start: .3rem; }
.badge--green { background: var(--green-soft); color: var(--green); }
.badge--red { background: var(--red-soft); color: var(--red); }
.badge--amber { background: var(--amber-soft); color: var(--amber); }
.badge--neutral { background: #EFE8DA; color: var(--ink-soft); }

/* ===== التنبيهات المنبثقة ===== */
.toasts { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: .5rem; width: min(420px, calc(100vw - 2rem)); }
.toast {
    display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
    background: var(--dark); color: var(--cream); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 12, 4, .3); font-weight: 600; font-size: .9rem;
    animation: toast-in .22s ease;
}
.toast .icon { width: 1.2em; height: 1.2em; }
.toast--success > .icon { color: #7FDCA4; }
.toast--error > .icon { color: #F0968A; }
.toast__close { margin-inline-start: auto; color: #9A8D7A; display: inline-flex; }
.toast__close:hover { color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ===== نافذة التأكيد ===== */
.modal { position: fixed; inset: 0; display: none; place-items: center; background: rgba(30, 22, 15, .5); z-index: 80; padding: 1rem; }
.modal.is-open { display: grid; }
.modal__card { background: #fff; border-radius: 18px; padding: 1.6rem; width: min(420px, 100%); animation: pop .16s ease; }
.modal__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; margin-bottom: .8rem; }
.modal__icon .icon { width: 22px; height: 22px; }
.modal__title { margin: 0 0 .3rem; }
.modal__text { margin: 0 0 1.2rem; color: var(--ink-soft); }
.modal__actions { display: flex; gap: .6rem; justify-content: flex-start; }
@keyframes pop { from { transform: scale(.95); opacity: 0; } }

/* ===== هيكل لوحة التحكم ===== */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
    background: var(--dark); color: #E8DECE; padding: 1.4rem 1.1rem;
    display: flex; flex-direction: column; gap: 1.4rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; }
.brand__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.brand__mark .icon { width: 21px; height: 21px; }
.brand--dark { color: var(--ink); }
.nav { display: flex; flex-direction: column; gap: .25rem; }
.nav__label { font-size: .72rem; font-weight: 700; color: #8A7C67; letter-spacing: .02em; padding: .8rem .8rem .25rem; }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 11px; color: #C4B8A2; font-weight: 600; font-size: .95rem; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.is-active { background: var(--accent); color: #fff; }
.sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: .8rem; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 1rem; }
.sidebar__admin { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; color: #E4B68F; }
.sidebar__admin:hover { color: #F3CDA9; }
.sidebar__user { display: flex; align-items: center; gap: .6rem; }
.sidebar__user-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.sidebar__user-info strong { font-size: .9rem; }
.sidebar__user-info small { color: #93866F; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(247, 242, 233, .88); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: .8rem 1.6rem; display: flex; align-items: center; gap: .9rem;
}
.topbar__title { margin: 0; font-size: 1.1rem; flex: 1; }
.topbar__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--accent-dark); }
.content { padding: 1.6rem; max-width: 1080px; width: 100%; margin-inline: auto; }
.scrim { position: fixed; inset: 0; background: rgba(30, 22, 15, .45); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.only-mobile { display: none; }

/* ===== الجداول ===== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: right; padding: .6rem .8rem; color: var(--ink-soft); font-size: .78rem; border-bottom: 1px solid var(--line); }
.table td { padding: .75rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #FBF7EF; }
.table__empty { text-align: center; color: var(--ink-soft); padding: 2rem !important; }
.cell-store { display: flex; flex-direction: column; line-height: 1.4; }
.cell-store small { color: var(--ink-soft); font-size: .78rem; }
.pager { display: flex; gap: .3rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.pager__item { padding: .4rem .8rem; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .85rem; }
.pager__item.is-active { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.pager__item.is-disabled { opacity: .45; pointer-events: none; }
.search-bar { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-bar .input-wrap { flex: 1; min-width: 220px; }
.search-icon { position: absolute; inset-inline-start: .7rem; color: #B3A78F; }
.search-bar .input { padding-inline-start: 2.4rem; }
.owner-box { display: flex; flex-direction: column; background: #F1EADD; border-radius: 12px; padding: .9rem 1rem; gap: .1rem; }
.owner-box strong { font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.danger-zone { margin-top: 1rem; border-color: #EFC9C3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ===== رفع الصور ===== */
.logo-pick { display: flex; align-items: center; gap: 1rem; }
.logo-preview { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-strong); background: #F1EADD; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; color: var(--accent-dark); }
.logo-preview--text { display: grid; place-items: center; }
.file-name { min-height: 1.1rem; word-break: break-word; }
.img-preview { width: 110px; height: 110px; border-radius: 14px; object-fit: cover; border: 2px solid var(--line-strong); background: #F1EADD; }

/* ===== صفحة QR ===== */
.qr-layout { display: grid; grid-template-columns: 400px 1fr; gap: 1.4rem; align-items: start; }
.qr-card { text-align: center; }
.qr-box { background: #fff; border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 1rem; display: inline-block; }
.qr-box img, .qr-box canvas { width: 100% !important; height: auto !important; }
.qr-store { margin: 1rem 0 .1rem; font-family: var(--display); font-size: 1.4rem; }
.qr-url { margin: 0; color: var(--ink-soft); font-size: .82rem; word-break: break-all; }
.copy-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.copy-row code { flex: 1; font-size: .84rem; word-break: break-all; }

/* ===== صفحات الدخول ===== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__aside {
    background: var(--dark); color: #EFE6D6; padding: 2.6rem;
    display: flex; flex-direction: column; gap: 1.6rem; position: relative; overflow: hidden;
}
.auth__aside .big-icon { position: absolute; inset-inline-start: -70px; bottom: -70px; width: 320px; height: 320px; opacity: .05; }
.auth__headline { font-family: var(--display); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.6; margin: 1rem 0 .4rem; }
.auth__sub2 { color: #B7AA93; max-width: 400px; margin: 0; }
.auth__main { display: grid; place-items: center; padding: 2.4rem 1.2rem; }
.auth__box { width: 100%; max-width: 470px; }
.auth__brand { margin-bottom: 1.6rem; }
.auth__title { margin: 0 0 .2rem; font-size: 1.55rem; }
.auth__sub { margin: 0 0 1.3rem; color: var(--ink-soft); }
.auth__alt { margin-top: 1.2rem; font-size: .92rem; color: var(--ink-soft); }
.auth__alt a { color: var(--accent-dark); }
.auth__links { display: flex; justify-content: space-between; margin-top: 1.2rem; font-size: .92rem; flex-wrap: wrap; gap: .5rem; }
.auth__links a { color: var(--accent-dark); }
.mock-card {
    margin-top: auto; background: #FBF6EC; color: var(--ink); border-radius: 16px;
    padding: 1.1rem 1.2rem; max-width: 340px; box-shadow: 0 24px 48px rgba(0, 0, 0, .3);
}
.mock-card__head { font-family: var(--display); font-size: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .6rem; }
.mock-card__row { display: flex; align-items: baseline; gap: .5rem; padding: .28rem 0; font-weight: 600; font-size: .92rem; }
.mock-card__row i { flex: 1; border-bottom: 2px dotted #D8CBB3; }
.mock-card__row b { color: var(--accent-dark); }
.mock-card__foot { margin-top: .7rem; font-size: .78rem; color: var(--ink-soft); display: flex; gap: .4rem; align-items: center; }

/* ===== المنيو العام ===== */
.pm-header { background: var(--dark); color: #F3EBDD; padding: 2.4rem 1rem 2.6rem; border-radius: 0 0 26px 26px; }
.pm-header__inner { max-width: 620px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.pm-logo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(243, 235, 221, .25); }
.pm-logo--text { display: grid; place-items: center; background: var(--accent); font-size: 2rem; font-weight: 800; }
.pm-name { margin: .4rem 0 0; font-family: var(--display); font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.4; }
.pm-desc { margin: 0; color: #C8BBA4; max-width: 480px; font-size: .95rem; }
.pm-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 99px; font-size: .8rem; font-weight: 700; }
.pm-status--open { background: rgba(88, 214, 141, .14); color: #7FE0A6; }
.pm-status--closed { background: rgba(240, 150, 132, .15); color: #F0A48B; }
.pm-status--unavailable { background: rgba(232, 201, 126, .14); color: #E8C97E; }
.pm-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .6rem; }
.pm-contact {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
    color: #EFE6D6; padding: .42rem .9rem; border-radius: 99px; font-size: .87rem;
    transition: background .15s ease;
}
.pm-contact:hover { background: rgba(255, 255, 255, .14); }
.pm-socials { display: flex; gap: .5rem; margin-top: .5rem; }
.pm-social {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); color: #EFE6D6;
}
.pm-social:hover { background: var(--accent); border-color: var(--accent); }
.pm-nav { position: sticky; top: 0; z-index: 20; background: rgba(247, 242, 233, .93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: .6rem .9rem; }
.pm-nav__inner { max-width: 620px; margin-inline: auto; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.pm-nav__inner::-webkit-scrollbar { display: none; }
.pm-chip {
    flex: none; padding: .42rem 1rem; border-radius: 99px; background: #fff;
    border: 1.5px solid var(--line-strong); font-weight: 700; font-size: .86rem; color: var(--ink-soft);
    transition: all .15s ease;
}
.pm-chip.is-active, .pm-chip:hover { background: var(--dark); border-color: var(--dark); color: var(--cream); }
.pm { max-width: 620px; margin-inline: auto; padding: 1.2rem .9rem 4rem; }
.pm-centered { display: grid; place-items: center; min-height: 70vh; }
.pm-section { padding-top: 1.2rem; scroll-margin-top: 78px; }
.pm-section__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .8rem; }
.pm-section__head h2 { margin: 0; font-size: 1.2rem; }
.pm-section__head span { color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.pm-section__head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pm-items { display: flex; flex-direction: column; gap: .7rem; }
.pm-item {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem;
}
.pm-item__body { flex: 1; min-width: 0; }
.pm-item__head { display: flex; align-items: baseline; gap: .55rem; }
.pm-item__name { margin: 0; font-size: 1.02rem; font-weight: 800; }
.pm-item__dots { flex: 1; min-width: 14px; border-bottom: 2px dotted #D8CBB3; transform: translateY(-4px); }
.pm-item__price { font-weight: 800; color: var(--accent-dark); white-space: nowrap; }
.pm-item__price small { font-weight: 700; font-size: .72rem; }
.pm-item__badge { color: var(--amber); background: var(--amber-soft); padding: .14rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pm-item__desc { margin: .2rem 0 0; color: var(--ink-soft); font-size: .86rem; }
.pm-item__img { width: 104px; height: 104px; border-radius: 12px; object-fit: cover; flex: none; background: #F1EADD; }
.pm-item.is-unavailable { opacity: .72; }
.pm-item.is-unavailable .pm-item__img { filter: grayscale(1); }
.pm-notice {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--amber-soft); border: 1.5px solid #EBD9A4; color: var(--amber);
    padding: 1rem 1.1rem; border-radius: 16px;
}
.pm-notice .icon { width: 24px; height: 24px; flex: none; margin-top: .15rem; }
.pm-notice strong { display: block; }
.pm-notice span { font-size: .88rem; }
.pm-footer { margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; text-align: center; color: var(--ink-soft); font-size: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.pm-footer__brand strong { color: var(--accent-dark); }

/* ===== الاستجابة ===== */
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: 284px; z-index: 70;
        transform: translateX(105%); transition: transform .25s ease; height: 100dvh;
    }
    .sidebar.is-open { transform: translateX(0); }
    .only-mobile { display: inline-flex; }
    .topbar { padding: .7rem 1rem; }
    .content { padding: 1.1rem .9rem 2.5rem; }
}
@media (max-width: 960px) {
    html[dir="ltr"] .sidebar { transform: translateX(-105%); }
    html[dir="ltr"] .sidebar.is-open { transform: translateX(0); }
}
@media (max-width: 720px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(3) { border-inline-start: none; }
    .stat:nth-child(n+3) { border-top: 1px dashed var(--line-strong); }
    .qr-layout { grid-template-columns: 1fr; }
    .toggle { display: none; }
    .row__main { min-width: 120px; }
}

/* ===== الطباعة (صفحة QR) ===== */
@media print {
    body { background: #fff; }
    .sidebar, .topbar, .no-print, .toasts, .modal, .scrim { display: none !important; }
    .shell, .main { display: block; }
    .content { padding: 0; max-width: none; }
    .qr-layout { display: block; }
    .qr-card { border: none; box-shadow: none; width: 420px; margin: 0 auto; }
}
/* ===== أوقات العمل الأسبوعية ===== */
.schedule-card { margin: 1rem 0; }
.hours-grid { display: flex; flex-direction: column; gap: .55rem; margin-top: .8rem; }
.hours-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; background: #FBF9F4; border: 1px solid var(--line); border-radius: 12px; }
.hours-day { min-width: 150px; }
.hours-times { display: flex; align-items: center; gap: .7rem; }
.field-inline { display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.field-inline .input { width: 125px; }
@media (max-width: 640px) {
    .hours-row { align-items: stretch; flex-direction: column; }
    .hours-day { min-width: 0; }
    .hours-times { width: 100%; }
    .field-inline { flex: 1; }
    .field-inline .input { width: 100%; }
}

/* ==================== الكتلة الموحدة: الخطوات ①–⑦ ==================== */

/* موظفو المطبخ وشاشة المطبخ */
.avatar--soft { background: var(--accent-soft); color: var(--accent-dark); }
.kitchen-body { background: var(--dark); min-height: 100vh; color: var(--cream); }
.kitchen-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #1B150F; padding: .8rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kitchen-topbar__store { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 180px; }
.kitchen-topbar__store strong { display: block; font-size: 1.05rem; line-height: 1.3; }
.kitchen-topbar__store small { color: #9A8D7A; font-size: .76rem; }
.kitchen-topbar__clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; background: rgba(255, 255, 255, .06); padding: .35rem .9rem; border-radius: 10px; }
.kitchen-topbar .btn--ghost { color: #C4B8A2; border-color: rgba(255, 255, 255, .22); }
.kitchen-topbar .btn--ghost:hover { background: rgba(255, 255, 255, .07); }
.kitchen-main { padding: 1.4rem; max-width: 1400px; margin-inline: auto; }
.kitchen-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 5rem 1.5rem; border: 1.5px dashed rgba(255, 255, 255, .16); border-radius: 18px; color: #9A8D7A; }
.kitchen-empty .icon { width: 44px; height: 44px; color: #6B5F4E; }
.kitchen-empty h2 { margin: 0; color: var(--cream); font-size: 1.25rem; }
.kitchen-empty p { margin: 0; font-size: .92rem; }

/* الطاولات وسياق الطاولة */
.pm-table-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 99px; font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #EFE6D6; }
.pm-table-chip--muted { background: transparent; border-style: dashed; color: #9A8D7A; }
.qr-table { margin: .1rem 0 .2rem; color: var(--accent-dark); font-weight: 800; font-size: 1.1rem; }
.archived-box { margin-top: 1.4rem; }

/* محرر خيارات المنتج */
.opt-groups-editor { display: flex; flex-direction: column; gap: .8rem; }
.opt-group { border: 1.5px solid var(--line-strong); border-radius: 14px; padding: .9rem; background: #FBF9F4; display: flex; flex-direction: column; gap: .6rem; }
.opt-group__head { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.opt-group__head .input:first-child { flex: 1; min-width: 160px; }
.opt-group__type { width: auto; }
.opt-values { display: flex; flex-direction: column; gap: .45rem; }
.opt-value { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: .5rem .6rem; }
.opt-value .input:first-child { flex: 1; min-width: 140px; }
.opt-value__price { width: 110px; }

/* المنيو العام: الإضافة والسلة */
.pm-item__opts { margin: .25rem 0 0; color: var(--ink-soft); font-size: .8rem; }
.pm-item__opts .icon { color: var(--accent-dark); }
.pm-add { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; transition: transform .12s ease, background .15s ease; }
.pm-add:hover { background: var(--accent-dark); transform: scale(1.06); }
.cart-fab { position: fixed; bottom: 0; inset-inline: 0; z-index: 50; display: none; align-items: center; justify-content: center; gap: .6rem; margin: 0 .9rem 1rem; background: var(--dark); color: var(--cream); font-weight: 800; padding: .9rem 1.2rem; border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 12, 4, .35); }
.cart-fab.is-visible { display: flex; }
.cart-fab b { background: var(--accent); color: #fff; border-radius: 99px; min-width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: .8rem; }
.opt-modal { text-align: right; max-height: 80vh; overflow-y: auto; }
.opt-groups { display: flex; flex-direction: column; gap: .9rem; margin: .6rem 0; }
.opt-group-pick { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; margin: 0; }
.opt-pick__title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: .35rem; }
.opt-choice { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; cursor: pointer; }
.opt-choice .price { margin-inline-start: auto; color: var(--accent-dark); font-weight: 700; font-size: .84rem; }
.opt-qty { display: flex; align-items: center; gap: .8rem; }
.opt-qty button { width: 34px; height: 34px; border-radius: 10px; background: #F1EADD; font-weight: 800; font-size: 1.1rem; }
.opt-qty b { min-width: 1.4rem; text-align: center; }
.opt-total { margin-inline-start: auto; font-weight: 800; color: var(--accent-dark); }
.cart-page { max-width: 620px; margin-inline: auto; padding: 1.2rem .9rem 5.5rem; }
.cart-page__head { margin-bottom: 1rem; }
.cart-page__head .page-title { margin-top: .4rem; font-size: 1.2rem; }
.cart-items { display: flex; flex-direction: column; gap: .7rem; }
.cart-item { display: flex; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem; }
.cart-item.has-issues { border-color: #EFC9C3; }
.cart-item__img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; background: #F1EADD; }
.cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cart-item__head { display: flex; justify-content: space-between; gap: .5rem; }
.cart-item__head b { color: var(--accent-dark); white-space: nowrap; }
.cart-item__opts { color: var(--ink-soft); font-size: .82rem; }
.cart-item__issues { margin: 0; color: var(--red); font-size: .8rem; font-weight: 700; }
.cart-item__controls { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cart-item__controls small { color: var(--ink-soft); }
.cart-item__note { font-size: .85rem; padding: .45rem .7rem; }
.qty-ctl { display: inline-flex; align-items: center; gap: .45rem; }
.qty-ctl button { width: 30px; height: 30px; border-radius: 9px; background: #F1EADD; font-weight: 800; }
.cart-summary { margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.05rem; }

/* الطلبات: إيصال الزبون وسجل الطلبات ولوحة المالك */
.pm-narrow { max-width: 560px; }
.order-receipt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin-bottom: .7rem; }
.order-receipt__number { display: block; font-size: 1.2rem; }
.order-receipt__head small { color: var(--ink-soft); }
.order-receipt__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: var(--ink-soft); font-size: .88rem; margin-bottom: .9rem; }
.order-receipt__meta .icon { color: var(--accent-dark); }
.order-receipt__items { display: flex; flex-direction: column; gap: .7rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.order-line__head { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; }
.order-line__head span { color: var(--accent-dark); }
.order-line__opts { color: var(--ink-soft); font-size: .82rem; margin-top: .1rem; }
.order-receipt__total { margin-top: .9rem; }
.order-list { display: flex; flex-direction: column; gap: .7rem; }
.order-row { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; }
.order-row__main { flex: 1; display: flex; flex-direction: column; line-height: 1.4; }
.order-row__main small { color: var(--ink-soft); }
.status-pill { padding: .16rem .65rem; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.status-pill--pending { background: var(--amber-soft); color: var(--amber); }
.status-pill--preparing { background: #E7EEF8; color: #3E5F8A; }
.status-pill--ready { background: var(--green-soft); color: var(--green); }
.status-pill--completed { background: #EFE8DA; color: var(--ink-soft); }
.status-pill--cancelled { background: var(--red-soft); color: var(--red); }
.order-owner-lines { display: flex; flex-direction: column; gap: .1rem; margin-top: .3rem; }
.order-owner-lines small { color: var(--ink-soft); }

/* لوحة المطبخ */
.kitchen-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #9A8D7A; font-size: .85rem; margin-bottom: 1rem; }
.kboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kboard__col { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; min-height: 180px; }
.kboard__title { margin: 0; font-size: 1rem; color: #E8DECE; display: flex; align-items: center; gap: .45rem; }
.kboard__title span { background: rgba(255, 255, 255, .1); border-radius: 99px; padding: 0 .55rem; font-size: .8rem; }
.kboard__cards { display: flex; flex-direction: column; gap: .7rem; }
.kcard { background: #FBF6EC; color: var(--ink); border-radius: 14px; padding: .85rem .9rem; }
.kcard__head { display: flex; align-items: center; gap: .6rem; border-bottom: 1px dashed var(--line-strong); padding-bottom: .4rem; margin-bottom: .5rem; }
.kcard__head b { font-size: 1.05rem; }
.kcard__table { background: var(--accent-soft); color: var(--accent-dark); border-radius: 99px; padding: .05rem .6rem; font-size: .8rem; font-weight: 800; }
.kcard__head time { margin-inline-start: auto; color: var(--ink-soft); font-size: .8rem; }
.kcard__item { padding: .25rem 0; }
.kcard__item-head { display: flex; gap: .4rem; font-weight: 700; }
.kcard__opts { margin: .1rem 0 0; padding-inline-start: 1.1rem; color: var(--ink-soft); font-size: .82rem; }
.kcard__note { margin: .2rem 0 0; background: var(--amber-soft); color: var(--amber); border-radius: 8px; padding: .15rem .5rem; font-size: .8rem; font-weight: 700; display: inline-block; }
.kcard__note--order { margin-top: .5rem; }
.kcard__actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; border-top: 1px dashed var(--line-strong); padding-top: .5rem; }
.kcard__actions .badge { margin-inline-end: auto; margin-inline-start: 0; }
.kdone { margin-top: 1.4rem; }
.kdone__cards { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.kdone__cards .kcard { flex: 0 1 240px; opacity: .75; }
@media (max-width: 900px) { .kboard { grid-template-columns: 1fr; } }

/* المساعد الذكي */
.chat-fab { position: fixed; bottom: 5.4rem; inset-inline-start: 1rem; z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 26px rgba(20, 12, 4, .35); }
.chat-fab .icon { width: 24px; height: 24px; }
.chat-panel { position: fixed; bottom: 5.4rem; inset-inline-start: 1rem; z-index: 55; width: min(360px, calc(100vw - 2rem)); background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(20, 12, 4, .3); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel__head { background: var(--dark); color: var(--cream); padding: .7rem .9rem; display: flex; align-items: center; gap: .5rem; }
.chat-panel__head button { margin-inline-start: auto; color: #9A8D7A; display: inline-flex; }
.chat-log { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; max-height: 46vh; overflow-y: auto; background: #FBF9F4; }
.chat-msg { max-width: 85%; padding: .5rem .7rem; border-radius: 12px; font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.chat-msg--ai { background: #fff; border: 1px solid var(--line); align-self: flex-start; }
.chat-msg--user { background: var(--accent); color: #fff; align-self: flex-end; }
.chat-msg--typing { color: var(--ink-soft); font-style: italic; }
.chat-form { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; }

/* باقات المشرف + بطاقة باقة المالك */
.plan-card { align-items: flex-start; background: #FBF9F4; border: 1.5px solid var(--line); border-radius: 12px; padding: .7rem .8rem; }
.plan-card__body { display: flex; flex-direction: column; }
.plan-card__body small { color: var(--ink-soft); }
.plan-card-owner { margin-top: 1rem; }
.plan-owner__name { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 800; color: var(--accent-dark); }
.plan-owner__limits { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; }
.plan-owner__limits li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.plan-owner__limits li:last-child { border-bottom: none; }
.plan-owner__limits b { font-variant-numeric: tabular-nums; }
.plan-owner__off { color: var(--ink-soft); }

/* ===== نظام الشروط والأحكام (إضافة معزولة) ===== */
.terms-gate { min-height: 100vh; display: grid; place-items: center; padding: 1.6rem 1rem; }
.terms-gate__card { width: min(760px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.terms-gate__head { background: var(--dark); color: var(--cream); padding: 1.4rem 1.6rem; display: flex; align-items: center; gap: .9rem; }
.terms-gate__head .brand__mark { color: var(--accent); }
.terms-gate__title { margin: 0; font-size: 1.15rem; }
.terms-gate__meta { margin: .1rem 0 0; color: #C9BA9F; font-size: .8rem; }
.terms-gate__body { padding: 1.4rem 1.6rem; }
.terms-gate__scroll { max-height: 52vh; overflow-y: auto; padding-inline-end: .3rem; margin-bottom: 1.2rem; }
.terms-prose h2 { margin: 0 0 .4rem; font-size: 1rem; }
.terms-prose .terms-prose__block { margin-bottom: 1.1rem; }
.terms-prose ul { margin: 0; padding-inline-start: 1.25rem; }
.terms-prose li { color: var(--ink-soft); margin-bottom: .4rem; }
.terms-check { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; cursor: pointer; user-select: none; }
.terms-check input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.terms-gate__actions { display: flex; flex-direction: column; gap: .6rem; }
.terms-notes { background: #FBF7EF; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.diff { display: flex; flex-direction: column; gap: .4rem; }
.diff__item { border-radius: 12px; padding: .6rem .8rem; font-size: .85rem; border: 1px solid var(--line); }
.diff__item--added { background: var(--green-soft); border-color: #BFD9C8; }
.diff__item--removed { background: var(--red-soft); border-color: #EFC9C3; text-decoration: line-through; opacity: .85; }
.diff__item--modified { background: var(--amber-soft); border-color: #E8D9A8; }
.diff__meta { font-size: .75rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .15rem; }
.audience-chip { display: inline-flex; align-items: center; gap: .35rem; }

/* ==========================================================================
   MenuUX identity — dark graphite, signal green, and flowing organic light
   ========================================================================== */
body {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 230, 118, .08), transparent 30rem),
        radial-gradient(circle at 92% 18%, rgba(0, 230, 118, .045), transparent 24rem),
        var(--bg);
}

.brand {
    font-family: 'Sora', var(--font);
    letter-spacing: -.055em;
}
.brand__mark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #00E676 5%, #00B85C 54%, #08734A 100%);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 230, 118, .22), 0 7px 24px rgba(0, 230, 118, .18);
}
.brand__mark::before {
    content: 'M';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #06150D;
    font: 800 1.55rem/1 'Sora', sans-serif;
    font-style: italic;
    transform: skewX(-9deg);
}
.brand__mark .icon { display: none; }
.brand__name span { color: var(--accent); }
.brand--dark .brand__mark { background: linear-gradient(135deg, #00E676, #00B85C); }

.btn {
    border-radius: 12px;
    transition: transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--primary {
    background: var(--accent);
    color: #04130B;
    box-shadow: 0 8px 22px rgba(0, 230, 118, .14);
}
.btn--primary:hover {
    background: #21F08C;
    box-shadow: 0 10px 28px rgba(0, 230, 118, .24);
}
.btn--dark { background: #17231D; color: var(--cream); }
.btn--ghost { background: rgba(255,255,255,.02); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: rgba(0, 230, 118, .08); border-color: rgba(0, 230, 118, .45); }
.btn--soft { background: var(--accent-soft); color: #59F5A4; }
.btn--danger { background: var(--red-soft); color: #FF9A91; }

.card, .row, .pm-item, .cart-item, .order-row, .empty,
.opt-group, .opt-value, .terms-gate__card, .modal__card {
    background: rgba(17, 22, 19, .92);
    border-color: var(--line);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .12);
}
.card:hover, .row:hover, .pm-item:hover { border-color: rgba(0, 230, 118, .28); }
.input {
    background: #0D130F;
    color: var(--ink);
    border-color: var(--line-strong);
    color-scheme: dark;
}
.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 230, 118, .12);
}
/* Chrome/Safari otherwise paint saved email and password values white. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px #0D130F inset;
    box-shadow: 0 0 0 1000px #0D130F inset;
    transition: background-color 99999s ease-out 0s;
}
.input:autofill {
    color: var(--ink);
    caret-color: var(--ink);
    box-shadow: 0 0 0 1000px #0D130F inset;
}
select.input option { background: #0D130F; color: var(--ink); }
.input-group__addon, .seg, .owner-box, .plan-card,
.row__thumb--empty, .img-preview, .logo-preview, .pm-item__img,
.qty-ctl button, .opt-qty button {
    background: #17221C;
    border-color: var(--line);
}
.hours-row { background: #101811; border-color: var(--line); }
.seg__btn.is-active, .pager__item.is-active { background: var(--accent); color: #04130B; }
.alert--error { background: var(--red-soft); color: #FFAAA2; }

.sidebar {
    background:
        linear-gradient(180deg, rgba(0, 230, 118, .055), transparent 28%),
        var(--dark);
    border-inline-start: 1px solid rgba(0, 230, 118, .08);
}
.nav__label { color: #62776B; }
.nav a { color: #A4B8AC; }
.nav a:hover { background: rgba(0, 230, 118, .07); color: #EFFFF4; }
.nav a.is-active {
    background: linear-gradient(100deg, rgba(0, 230, 118, .2), rgba(0, 230, 118, .06));
    color: var(--accent);
    box-shadow: inset -2px 0 0 var(--accent);
}
.sidebar__footer { border-top-color: rgba(255,255,255,.1); }
.sidebar__admin { color: #74E7A7; }
.sidebar__user-info small { color: #71857A; }
.avatar { background: linear-gradient(135deg, var(--accent), #08734A); color: #04130B; }
.topbar {
    background: rgba(10, 12, 8, .86);
    border-bottom-color: var(--line);
}
.topbar__link, .card__more, .back:hover { color: var(--accent); }
.content { max-width: 1160px; }
.page-sub, .field__hint, .stat__label, .field__error { color: var(--ink-soft); }
.stat__num, .store-card__info strong, .plan-owner__name { color: var(--accent); }
.stat + .stat { border-inline-start-color: var(--line-strong); }
.table th { color: var(--ink-soft); border-bottom-color: var(--line); }
.table td { border-bottom-color: var(--line); }
.table tbody tr:hover td { background: rgba(0, 230, 118, .035); }
.pager__item { background: var(--surface); border-color: var(--line); }
.search-icon, .grip { color: #688077; }

/* Login / register: the first emotional encounter with the brand */
.auth { background: var(--bg); }
.auth__aside {
    isolation: isolate;
    background:
        radial-gradient(ellipse at 82% 12%, rgba(0, 230, 118, .24), transparent 24rem),
        linear-gradient(145deg, #08110C 0%, #0A1510 50%, #07100C 100%);
    color: #EFFFF4;
}
.auth__aside::before,
.auth__aside::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 125%;
    height: 16rem;
    border: 1px solid rgba(0, 230, 118, .17);
    border-radius: 50%;
    transform: rotate(-17deg);
    pointer-events: none;
}
.auth__aside::before { inset-inline-end: -35%; top: 30%; box-shadow: 0 0 70px rgba(0, 230, 118, .12); }
.auth__aside::after { inset-inline-start: -42%; top: 43%; border-color: rgba(0, 230, 118, .08); }
.auth__aside .big-icon { opacity: 0; }
.auth__headline {
    font-family: 'Tajawal', sans-serif;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.24;
}
.auth__headline em { color: var(--accent); font-style: normal; }
.auth__sub2 { color: #9CB1A4; }
.auth__main { background: #0A0C08; }
.auth__title { color: #F2FFF6; }
.auth__sub, .auth__alt { color: var(--ink-soft); }
.auth__links a, .auth__alt a { color: var(--accent); }
.auth__brand { color: var(--ink); }
.mock-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #16251D, #0E1712);
    color: #ECFFF2;
    border: 1px solid rgba(0, 230, 118, .25);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 45px rgba(0, 230, 118, .08);
}
.mock-card::after {
    content: '';
    position: absolute;
    width: 13rem;
    height: 13rem;
    inset-inline-end: -7rem;
    bottom: -8rem;
    border-radius: 50%;
    background: rgba(0, 230, 118, .11);
    filter: blur(2px);
}
.mock-card__top {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #759487;
    font: 600 .6rem/1 'Sora', sans-serif;
    letter-spacing: .12em;
}
.mock-card__top b { margin-inline-start: auto; color: var(--accent); font-weight: 600; }
.mock-card__signal { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.mock-card__brand {
    margin: 1.5rem 0 1.25rem;
    font: 700 1.4rem/1 'Sora', sans-serif;
    letter-spacing: -.06em;
}
.mock-card__brand span { color: var(--accent); }
.mock-card__brand small { display: block; margin-top: .45rem; color: #6C8778; font: 600 .55rem/1 'Sora', sans-serif; letter-spacing: .18em; }
.mock-card__head { color: #F3FFF7; border-bottom-color: rgba(255,255,255,.1); font: 700 1.05rem/1.3 'Tajawal', sans-serif; }
.mock-card__row { color: #B7C9BD; }
.mock-card__row i { border-bottom-color: rgba(0, 230, 118, .2); }
.mock-card__row b { color: var(--accent); }
.mock-card__foot { color: #88A294; }
.mock-card__foot .icon { color: var(--accent); }
.mock-card__foot span { margin-inline-start: auto; color: var(--accent); font: 1.2rem/1 'Sora', sans-serif; }

/* Public menu: a calm, premium dark surface instead of a generic restaurant card */
.pm-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 78% 18%, rgba(0, 230, 118, .2), transparent 18rem),
        linear-gradient(150deg, #08110C, #101D16 60%, #08110C);
    border-radius: 0 0 30px 30px;
}
.pm-header::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 11rem;
    inset-inline-end: -35%;
    bottom: -8rem;
    border: 1px solid rgba(0, 230, 118, .22);
    border-radius: 50%;
    transform: rotate(-12deg);
    box-shadow: 0 -20px 60px rgba(0, 230, 118, .08);
}
.pm-header__inner { position: relative; z-index: 1; }
.pm-logo { border-color: rgba(0, 230, 118, .5); box-shadow: 0 0 28px rgba(0, 230, 118, .2); }
.pm-logo--text { background: linear-gradient(135deg, var(--accent), #08734A); color: #04130B; }
.pm-name { font-family: 'Tajawal', sans-serif; font-weight: 800; }
.pm-desc { color: #A7BBAF; }
.pm-contact, .pm-table-chip { background: rgba(255,255,255,.055); border-color: rgba(0, 230, 118, .18); color: #CDE6D6; }
.pm-contact:hover, .pm-social:hover { background: var(--accent); border-color: var(--accent); color: #04130B; }
.pm-nav {
    background: rgba(10, 12, 8, .9);
    border-bottom-color: var(--line);
}
.pm-chip { background: #141D18; border-color: var(--line); color: #A8BBB0; }
.pm-chip.is-active, .pm-chip:hover { background: var(--accent); border-color: var(--accent); color: #04130B; }
.pm-section__head::after { background: var(--line); }
.pm-section__head span, .pm-item__desc, .pm-item__opts, .pm-footer { color: var(--ink-soft); }
.pm-item { background: #111A15; }
.pm-item__price, .pm-footer__brand strong, .pm-item__opts .icon { color: var(--accent); }
.pm-item__dots { border-bottom-color: rgba(0, 230, 118, .2); }
.pm-add { background: var(--accent); color: #04130B; box-shadow: 0 5px 16px rgba(0, 230, 118, .18); }
.pm-add:hover { background: #21F08C; }
.pm-footer { border-top-color: var(--line); }
.cart-fab { background: #17241D; color: var(--cream); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
.cart-fab b { background: var(--accent); color: #04130B; }
.chat-fab { background: var(--accent); color: #04130B; box-shadow: 0 12px 30px rgba(0, 230, 118, .2); }
.chat-panel__head { background: #101B15; }
.chat-log { background: #0E1511; }
.chat-msg--ai { background: #17221C; border-color: var(--line); }
.chat-msg--user { background: var(--accent); color: #04130B; }

.kitchen-body { background: #070D0A; }
.kitchen-topbar { background: #0C1510; border-bottom-color: rgba(0, 230, 118, .13); }
.kitchen-topbar__clock { background: rgba(0, 230, 118, .08); color: var(--accent); }
.kcard { background: #142019; color: var(--ink); }
.kboard__col { background: rgba(255,255,255,.025); border-color: rgba(0, 230, 118, .12); }

@media (max-width: 720px) {
    .auth__main { padding-top: 2rem; }
    .pm-header { padding-top: 2rem; }
}

/* ==========================================================================
   إصلاحات الواجهة: تباين الحقول، حقول التاريخ، السلة، حالة الطلب، الطاولة، المساعد الذكي
   ========================================================================== */

/* ----- الحقول: قاعدة واحدة لكل النماذج (إعدادات المتجر، الإدارة، المطبخ، المنيو) ----- */
.input, select.input, textarea.input {
    background: #0D130F;
    color: var(--ink);
    border-color: var(--line-strong);
    color-scheme: dark;
}
.input::placeholder, textarea.input::placeholder { color: #8AA093; opacity: 1; }
.input:hover:not(:disabled):not(:focus) { border-color: #4B6154; }
.input:focus, .input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 230, 118, .16);
}
.input:disabled, .input[readonly] { background: #0B100D; color: #8AA093; border-color: var(--line); cursor: not-allowed; }
.input--error, .input--error:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 120, 108, .14); }
.field__label { color: var(--ink); }
.field__hint { color: #93A79B; }
.field__error { color: #FF9A91; }
select.input option { background: #0D130F; color: var(--ink); }
select.input option:checked { background: var(--accent-soft); color: var(--accent); }
textarea.input { min-height: 5.5rem; line-height: 1.6; }
.input-group__addon { background: #17221C; border-color: var(--line-strong); color: #93A79B; }
input[type="file"].input { padding: .5rem .7rem; }
input[type="file"].input::file-selector-button {
    background: var(--accent-soft); color: #59F5A4; border: none; border-radius: 8px;
    padding: .35rem .8rem; font: inherit; font-weight: 700; margin-inline-end: .7rem; cursor: pointer;
}
.alert--success { background: var(--green-soft); color: #7FF0B4; border: 1px solid rgba(0, 230, 118, .25); }
.alert--error { border: 1px solid rgba(255, 120, 108, .3); }
.badge--neutral { background: #1B2620; color: #C7D6CC; }
.status-pill--preparing { background: #14283F; color: #8FB6EA; }
.status-pill--completed { background: #1B2620; color: #B4C4BA; }
.pm-notice { border-color: rgba(244, 201, 93, .35); }
.danger-zone { border-color: rgba(255, 120, 108, .35); }
.cart-item.has-issues { border-color: rgba(255, 120, 108, .5); }

/* ----- حقول التاريخ/الوقت: أيقونة التقويم ظاهرة على الخلفية الداكنة والحقل كله قابل للنقر ----- */
.input[type="date"], .input[type="time"], .input[type="datetime-local"] {
    cursor: pointer; min-height: 2.9rem; font-variant-numeric: tabular-nums;
}
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .9; width: 1.35rem; height: 1.35rem; padding: .15rem; border-radius: 6px;
    transition: background .15s ease, opacity .15s ease;
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover,
.input[type="time"]::-webkit-calendar-picker-indicator:hover,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: rgba(0, 230, 118, .18); }
.input[type="date"]::-webkit-datetime-edit,
.input[type="time"]::-webkit-datetime-edit { color: var(--ink); }
.input[type="date"]:invalid, .input[type="time"]:invalid { border-color: var(--red); }

/* ----- السلة: أزرار كمية واضحة وقابلة للمس ----- */
.qty-ctl {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #0D130F; border: 1px solid var(--line-strong); border-radius: 12px; padding: .2rem;
}
.qty-ctl button {
    width: 38px; height: 38px; border-radius: 9px; background: #17221C; color: var(--ink);
    font-size: 1.3rem; font-weight: 800; line-height: 1; display: grid; place-items: center;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.qty-ctl button:hover:not(:disabled), .qty-ctl button:focus-visible { background: var(--accent); color: #04130B; }
.qty-ctl button:active:not(:disabled) { transform: scale(.94); }
.qty-ctl button:disabled { opacity: .35; cursor: not-allowed; }
.qty-ctl b { min-width: 2.1rem; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cart-item__controls { justify-content: space-between; }
.cart-item.is-busy { opacity: .65; pointer-events: none; }
.cart-item__head b, .cart-summary__row b { color: var(--accent); }
.cart-summary__hint b { color: #FF9A91; }

/* ----- تتبع حالة الطلب لدى الزبون + شارة الطاولة ----- */
.order-table-badge {
    display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
    background: var(--accent-soft); color: #9AF7C6; border: 1px solid rgba(0, 230, 118, .35);
    border-radius: 12px; padding: .45rem .9rem; font-weight: 800; font-size: .95rem; margin-bottom: .9rem;
}
.order-table-badge .icon { color: var(--accent); }
.order-table-badge b { font-size: 1.25rem; color: var(--accent); line-height: 1; }
.order-table-badge--sm { padding: .2rem .6rem; font-size: .82rem; margin: .15rem 0 0; border-radius: 9px; }
.order-table-badge--sm b { font-size: 1rem; }
.order-owner-head { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.status-timeline {
    list-style: none; margin: .2rem 0 .9rem; padding: .4rem 0 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem;
}
.status-step {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-soft);
}
/* خط الوصل يمتد من مركز المرحلة نحو المرحلة السابقة — يعمل في RTL وLTR عبر inset-inline */
.status-step::before {
    content: ''; position: absolute; top: 10px; inset-inline-end: 50%; width: 100%; height: 2px;
    background: var(--line-strong); z-index: 0;
}
.status-step:first-child::before { display: none; }
.status-step__dot {
    position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center;
    transition: background .2s ease, border-color .2s ease;
}
.status-step.is-done::before, .status-step.is-current::before { background: var(--accent); }
.status-step.is-done { color: var(--ink); }
.status-step.is-done .status-step__dot { background: var(--accent); border-color: var(--accent); }
.status-step.is-done .status-step__dot::after {
    content: ''; width: 5px; height: 9px; border: solid #04130B; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.status-step.is-current { color: var(--accent); }
.status-step.is-current .status-step__dot {
    border-color: var(--accent); box-shadow: 0 0 0 5px rgba(0, 230, 118, .16);
    animation: status-pulse 1.8s ease-in-out infinite;
}
.status-timeline.is-cancelled .status-step { opacity: .4; }
.status-timeline.is-cancelled .status-step::before { background: var(--line-strong); }
.order-cancelled { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.status-pill { transition: background .2s ease, color .2s ease; }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 9px rgba(0, 230, 118, .05); } }

/* ----- شاشة المطبخ: رقم الطاولة بارز ومنفصل عن رقم الطلب ----- */
.kcard__head { flex-wrap: wrap; row-gap: .45rem; }
.kcard__table {
    order: -1; flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: .45rem;
    background: var(--accent); color: #04130B; border-radius: 10px; padding: .4rem .7rem;
    font-size: 1rem; font-weight: 800; line-height: 1.25;
}
.kcard__table small { font-size: .85rem; font-weight: 800; opacity: .85; }
.kcard__table b { font-size: 1.45rem; font-weight: 800; }
.kcard__number { font-size: .92rem; font-weight: 700; color: var(--ink-soft); }
.kcard__head time { margin-inline-start: auto; color: var(--ink-soft); }
.kdone__cards .kcard .kcard__table { background: #1B2620; color: #C7D6CC; }

/* ----- المساعد الذكي: زر واضح بعلامة نصية، فوق شريط السلة ولا يغطي المنيو ----- */
.chat-fab {
    position: fixed; bottom: 5.6rem; inset-inline-start: 1rem; z-index: 50;
    width: auto; height: auto; min-height: 50px;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem 1.05rem .55rem .75rem; border-radius: 99px;
    background: linear-gradient(135deg, #21F08C, var(--accent) 55%, var(--accent-dark));
    color: #04130B; font-weight: 800; font-size: .92rem; line-height: 1.15; text-align: start;
    box-shadow: 0 12px 30px rgba(0, 230, 118, .28), 0 0 0 1px rgba(0, 230, 118, .4);
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.chat-fab .icon { width: 24px; height: 24px; }
.chat-fab__text { display: flex; flex-direction: column; }
.chat-fab__hint { font-size: .68rem; font-weight: 600; opacity: .8; }
.chat-fab:hover, .chat-fab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 230, 118, .36), 0 0 0 1px rgba(0, 230, 118, .55);
}
.chat-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chat-fab:active { transform: scale(.97); }
.chat-fab[aria-expanded="true"] {
    background: #17241D; color: var(--cream);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 230, 118, .35);
}
.chat-fab[aria-expanded="true"] .chat-fab__hint { display: none; }
.chat-fab__close-label, .chat-fab[aria-expanded="true"] .chat-fab__open-label { display: none; }
.chat-fab[aria-expanded="true"] .chat-fab__close-label { display: inline; }
.chat-panel {
    bottom: 9.4rem; background: var(--surface); color: var(--ink);
    border: 1px solid rgba(0, 230, 118, .25); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    max-height: calc(100dvh - 11rem);
}
.chat-panel__head { background: #101B15; border-bottom: 1px solid var(--line); }
.chat-panel__head > .icon { color: var(--accent); }
.chat-panel__head small { display: block; font-weight: 500; font-size: .72rem; color: #93A79B; }
.chat-panel__head button:hover { color: var(--ink); }
.chat-log { max-height: 42vh; }
.chat-msg--ai { color: var(--ink); }
.chat-form { background: var(--surface); border-top-color: var(--line); }

/* ----- الاستجابة ----- */
@media (max-width: 640px) {
    .status-timeline { gap: 0; }
    .status-step { font-size: .72rem; }
    .kcard__table b { font-size: 1.3rem; }
    .cart-item__controls { gap: .5rem; }
    .cart-item__controls small { flex: 1 0 100%; order: 3; }
}
@media (max-width: 420px) {
    .chat-fab { padding: .5rem .85rem .5rem .65rem; font-size: .86rem; }
    .chat-fab__hint { display: none; }
}

/* ==========================================================================
   شاشات العرض الرقمية (Digital Displays) — إضافة معزولة
   ========================================================================== */
.ds-page { margin: 0; background: #000; overflow: hidden; }
.ds-page .ds-root { position: fixed; inset: 0; }

.ds-root {
    container-type: size;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    color: #fff;
    font-family: var(--display);
}

.ds-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* ترتيب فيزيائي ثابت: الشريحة التالية دائماً إلى اليمين، فالحركة نحو اليسار */
.ds-track {
    display: flex;
    flex-wrap: nowrap;
    direction: ltr;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.ds-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    direction: rtl;
    display: grid;
    overflow: hidden;
    background: var(--ds-bg, #0A0C08);
    color: var(--ds-text, #fff);
    padding: clamp(1.5rem, 5cqw, 5rem);
    gap: clamp(.6rem, 2cqw, 2rem);
}
html[dir="ltr"] .ds-slide { direction: ltr; }

.ds-root [hidden] { display: none !important; }

/* القوالب */
.ds-tpl-product_focus { grid-template-areas: "media" "body"; grid-template-rows: 1.15fr .85fr; grid-template-columns: 1fr; }
.ds-tpl-image_left    { grid-template-areas: "media body"; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; }
.ds-tpl-image_right   { grid-template-areas: "body media"; grid-template-columns: 1fr 1.1fr; grid-template-rows: 1fr; }
.ds-tpl-promo         { grid-template-areas: "media body"; grid-template-columns: 1fr 1.2fr; grid-template-rows: 1fr; }
.ds-tpl-minimal       { grid-template-areas: "body media"; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr; }

/* ==========================================================================
   مكتبة القوالب الجديدة — تخطيطات 16:9 مميّزة (أصليّة، مستوحاة لا منسوخة)
   تُكتب قبل قواعد ds-img-* ليبقى تجاوز موضع الصورة صالحاً عند طلبه.
   ========================================================================== */

/* --- Modern heroes --- */
.ds-tpl-modern_hero  { grid-template-areas: "body media"; grid-template-columns: 1fr 1.2fr; }
.ds-tpl-modern_hero .ds-media { border-radius: 4px 4px 90px 4px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); }
.ds-tpl-modern_hero::after { content: ""; position: absolute; inset-inline-start: clamp(1.5rem,5cqw,5rem); bottom: clamp(1rem,3cqw,3.2rem); width: 22cqw; max-width: 260px; height: clamp(4px,.6cqw,10px); background: var(--ds-accent); }

.ds-tpl-hero_reverse { grid-template-areas: "media body"; grid-template-columns: 1.2fr 1fr; }
.ds-tpl-hero_reverse .ds-media { margin-inline-start: calc(-1 * clamp(1.5rem,5cqw,5rem)); margin-block: calc(-1 * clamp(1.5rem,5cqw,5rem)); border-radius: 0 0 0 120px; }

.ds-tpl-split_screen { grid-template-areas: "media body"; grid-template-columns: 1fr 1fr; background: #fff; }
.ds-tpl-split_screen .ds-body { background: var(--ds-bg); color: var(--ds-text); padding: clamp(1.5rem,4cqw,4rem); align-self: stretch; justify-content: center; }
.ds-tpl-split_screen .ds-media { border-radius: 0; }

.ds-tpl-modern_contrast { grid-template-areas: "body media"; grid-template-columns: 1fr 1.1fr; }
.ds-tpl-modern_contrast .ds-title { background: var(--ds-text); color: var(--ds-bg); padding: .08em .22em; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ds-tpl-modern_contrast .ds-media { border-radius: 0; }

.ds-tpl-dynamic_diagonal { grid-template-areas: "body media"; grid-template-columns: 1.1fr 1fr; }
.ds-tpl-dynamic_diagonal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--ds-bg) 0 58%, rgba(0,0,0,.22) 58% 100%); z-index: 0; }
.ds-tpl-dynamic_diagonal .ds-media { border-radius: 24px; transform: rotate(-2deg); }

/* --- Full-bleed / overlay --- */
.ds-tpl-full_bleed { grid-template-areas: "body"; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: end; }
.ds-tpl-full_bleed .ds-scrim { background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 48%, rgba(0,0,0,.05) 100%); }
.ds-tpl-full_bleed .ds-body { max-width: 66%; }
.ds-tpl-full_bleed .ds-title { font-size: clamp(2.6rem,7cqw,7rem); }

.ds-tpl-premium_dark { grid-template-areas: "body"; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: end; }
.ds-tpl-premium_dark .ds-scrim { background: radial-gradient(120% 120% at 85% 12%, rgba(0,0,0,.12), rgba(0,0,0,.93)); }
.ds-tpl-premium_dark .ds-body { max-width: 60%; border-inline-start: clamp(2px,.35cqw,5px) solid var(--ds-accent); padding-inline-start: clamp(1rem,2.4cqw,2.4rem); }
.ds-tpl-premium_dark .ds-badge { background: transparent; color: var(--ds-accent); border: 1px solid var(--ds-accent); }

.ds-tpl-cafe_classic { grid-template-areas: "media body"; grid-template-columns: 1.15fr 1fr; }
.ds-tpl-cafe_classic .ds-media { border-radius: 999px 999px 24px 24px; border: clamp(2px,.35cqw,6px) solid var(--ds-accent); }
.ds-tpl-cafe_classic .ds-title { font-family: Georgia, 'Tajawal', serif; }

/* --- Stacked / card / centered --- */
.ds-tpl-product_card { grid-template-areas: "media" "body"; grid-template-rows: 1.1fr .9fr; }
.ds-tpl-product_card .ds-media { border-radius: 24px; }
.ds-tpl-product_card .ds-body { background: var(--ds-bg); border-radius: 24px; padding: clamp(1.2rem,3cqw,3rem); margin-top: calc(-1 * clamp(1rem,3cqw,3rem)); box-shadow: 0 25px 60px -25px rgba(0,0,0,.5); z-index: 2; }

.ds-tpl-centered_hero { grid-template-areas: "media" "body"; grid-template-rows: 1.15fr .85fr; }
.ds-tpl-centered_hero .ds-media { border-radius: 50%; max-width: 46cqw; justify-self: center; aspect-ratio: 1; }
.ds-tpl-centered_hero .ds-body { align-items: center; text-align: center; }

.ds-tpl-editorial { grid-template-areas: "body media"; grid-template-columns: 1fr 1fr; }
.ds-tpl-editorial .ds-body { justify-content: space-between; }
.ds-tpl-editorial .ds-price { order: 2; }

.ds-tpl-signature { grid-template-areas: "body" "media"; grid-template-rows: .75fr 1.25fr; text-align: center; }
.ds-tpl-signature .ds-body { align-items: center; }
.ds-tpl-signature .ds-media { border-radius: 0; }
.ds-tpl-signature::before, .ds-tpl-signature::after { content: ""; position: absolute; inset-inline: 12%; height: 1px; background: var(--ds-accent); opacity: .6; }
.ds-tpl-signature::before { top: clamp(1rem,3cqw,3rem); }
.ds-tpl-signature::after { bottom: clamp(1rem,3cqw,3rem); }

/* --- Minimal --- */
.ds-tpl-minimal_white { grid-template-areas: "body media"; grid-template-columns: 1.4fr 1fr; }
.ds-tpl-minimal_white .ds-media { border-radius: 0; outline: 1px solid rgba(0,0,0,.12); outline-offset: 12px; }

/* --- Price focused --- */
.ds-tpl-price_focus { grid-template-areas: "body media"; grid-template-columns: 1.6fr 1fr; }
.ds-tpl-price_focus .ds-price { font-size: clamp(4rem,16cqw,15rem); }
.ds-tpl-price_focus .ds-media { border-radius: 50%; aspect-ratio: 1; align-self: center; }

.ds-tpl-discount_sale { grid-template-areas: "body media"; grid-template-columns: 1.3fr 1fr; }
.ds-tpl-discount_sale::before { content: ""; position: absolute; inset-inline-start: -10%; top: -40%; width: 60%; height: 180%; background: rgba(255,255,255,.08); transform: rotate(18deg); }
.ds-tpl-discount_sale .ds-price { font-weight: 900; }

.ds-tpl-best_seller { grid-template-areas: "body media"; grid-template-columns: 1fr 1.1fr; }
.ds-tpl-best_seller .ds-media { border: clamp(2px,.4cqw,6px) solid var(--ds-accent); border-radius: 20px; }

/* --- Promotional --- */
.ds-tpl-special_offer { grid-template-areas: "body media"; grid-template-columns: 1.1fr 1fr; }
.ds-tpl-special_offer .ds-badge { position: absolute; top: calc(-1 * clamp(1.5rem,5cqw,5rem)); inset-inline-start: 0; border-radius: 0 0 14px 0; font-size: clamp(1rem,2.2cqw,2rem); }
.ds-tpl-special_offer .ds-price { background: rgba(0,0,0,.25); padding: .15em .5em; border-radius: 16px; align-self: flex-start; }

.ds-tpl-new_item { grid-template-areas: "media" "body"; grid-template-rows: 1fr .9fr; }
.ds-tpl-new_item .ds-badge { position: absolute; top: 0; inset-inline-end: 0; border-radius: 0 0 0 20px; }
.ds-tpl-new_item .ds-body { align-items: center; text-align: center; }

.ds-tpl-combo_deal { grid-template-areas: "body media"; grid-template-columns: 1.1fr 1fr; }
.ds-tpl-combo_deal .ds-media { border-radius: 24px; }
.ds-tpl-combo_deal::after { content: ""; position: absolute; bottom: clamp(1.5rem,5cqw,5rem); inset-inline-start: clamp(1.5rem,5cqw,5rem); width: clamp(40px,7cqw,90px); height: clamp(40px,7cqw,90px); border-radius: 50%; background: var(--ds-accent); opacity: .18; }

/* --- Playful --- */
.ds-tpl-colorful_playful { grid-template-areas: "media" "body"; grid-template-rows: 1.05fr .95fr; }
.ds-tpl-colorful_playful .ds-media { border-radius: 40px; }
.ds-tpl-colorful_playful .ds-body { align-items: center; text-align: center; }
.ds-tpl-colorful_playful::before { content: ""; position: absolute; top: -20%; inset-inline-end: -10%; width: 46%; height: 90%; background: var(--ds-accent); opacity: .16; border-radius: 50%; }
.ds-tpl-colorful_playful::after { content: ""; position: absolute; bottom: -25%; inset-inline-start: -8%; width: 40%; height: 80%; background: var(--ds-price); opacity: .14; border-radius: 50%; }

/* موضع الصورة يتجاوز القالب */
.ds-slide.ds-img-left  { grid-template-areas: "media body"; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; }
.ds-slide.ds-img-right { grid-template-areas: "body media"; grid-template-columns: 1fr 1.1fr; grid-template-rows: 1fr; }
.ds-slide.ds-img-top   { grid-template-areas: "media" "body"; grid-template-columns: 1fr; grid-template-rows: 1.15fr .85fr; }
.ds-slide.ds-img-background { grid-template-areas: "body"; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ds-slide:not(.ds-has-image) { grid-template-areas: "body"; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ds-slide.ds-img-background .ds-media,
.ds-slide:not(.ds-has-image) .ds-media { display: none; }

.ds-media { grid-area: media; margin: 0; min-height: 0; min-width: 0; border-radius: clamp(.6rem, 1.6cqw, 1.4rem); overflow: hidden; background: rgba(255,255,255,.04); }
.ds-media img { width: 100%; height: 100%; display: block; }

.ds-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ds-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.35)); }

.ds-body { grid-area: body; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(.5rem, 1.4cqw, 1.2rem); position: relative; z-index: 1; }
.ds-img-background .ds-body { align-items: center; text-align: center; }

.ds-align-start  { text-align: start; }
.ds-align-center { text-align: center; }
.ds-align-end    { text-align: end; }
.ds-align-center .ds-body { align-items: center; }
.ds-align-end .ds-body { align-items: flex-end; }

.ds-badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--ds-accent, #00E676);
    color: #04120B;
    font-weight: 800;
    padding: .35em .9em;
    border-radius: 999px;
    font-size: clamp(.8rem, 1.7cqw, 1.5rem);
    letter-spacing: .3px;
}
.ds-align-center .ds-badge { align-self: center; }
.ds-align-end .ds-badge { align-self: flex-end; }

.ds-title { margin: 0; font-weight: 800; line-height: 1.05; }
.ds-desc { margin: 0; opacity: .9; line-height: 1.35; max-width: 46ch; }
.ds-price { display: flex; align-items: baseline; gap: .4em; color: var(--ds-price, #00E676); font-weight: 800; line-height: 1; }
.ds-price__currency { font-size: .45em; opacity: .9; }

.ds-size-sm { font-size: clamp(.9rem, 2.1cqw, 2rem); }
.ds-size-md { font-size: clamp(1.1rem, 3cqw, 3rem); }
.ds-size-lg { font-size: clamp(1.5rem, 4.4cqw, 4.4rem); }
.ds-size-xl { font-size: clamp(2rem, 6cqw, 6.5rem); }

.ds-tpl-promo .ds-title { font-size: clamp(2.4rem, 7cqw, 8rem); }

.ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 100%; color: #9FB3A8; text-align: center; padding: 2rem; }
.ds-empty .icon { width: 3rem; height: 3rem; }
.ds-empty__title { margin: 0; font-size: clamp(1.4rem, 4cqw, 3rem); color: #EEF7F1; }
.ds-root--message { position: fixed; inset: 0; }

.ds-offline {
    position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,120,108,.15); color: #FFB4AC;
    border: 1px solid rgba(255,120,108,.4);
    padding: .45rem .9rem; border-radius: 999px; font-size: .85rem;
}

/* إطار المعاينة 16:9 */
.ds-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.ds-frame .ds-root { position: absolute; inset: 0; }
.ds-frame--sm { max-width: 100%; }

/* محرر الشريحة */
.ds-editor__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 1.2rem; align-items: start; }
.ds-editor__side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.ds-editor__main { display: flex; flex-direction: column; gap: 1rem; }
.ds-choice { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ds-choice__item { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 11px; cursor: pointer; font-weight: 700; font-size: .9rem; }
.ds-choice__item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ds-choice__item input { accent-color: var(--accent); }
input[type="color"] { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }

@media (max-width: 1000px) {
    .ds-editor__grid { grid-template-columns: 1fr; }
    .ds-editor__side { position: static; }
}
@media print { .ds-root, .ds-frame { display: none !important; } }

/* ==========================================================================
   مكتبة القوالب — واجهة اختيار مرئية (تصفية + بطاقات معاينة 16:9)
   ========================================================================== */
.ds-templates { display: flex; flex-direction: column; gap: .9rem; }
.ds-templates__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-filter {
    border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
    padding: .4rem .9rem; border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.ds-filter:hover { border-color: var(--accent); color: var(--accent); }
.ds-filter.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ds-filter[hidden] { display: none; }

.ds-templates__grid {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ds-template {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    padding: .5rem; border: 2px solid var(--line-strong); border-radius: 16px;
    background: var(--surface); cursor: pointer; text-align: start;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ds-template:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ds-template.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-template[hidden] { display: none; }
.ds-template > input { position: absolute; opacity: 0; pointer-events: none; }

.ds-frame--thumb { border-radius: 10px; box-shadow: none; border-color: var(--line); }
.ds-template__meta { display: flex; flex-direction: column; gap: .1rem; padding: 0 .3rem .2rem; }
.ds-template__meta strong { font-size: .92rem; }
.ds-template__meta small { color: var(--ink-soft); font-size: .74rem; }
.ds-template__check {
    position: absolute; top: .7rem; inset-inline-end: .7rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #04130a; display: grid; place-items: center;
    font-size: .8rem; opacity: 0; transform: scale(.6); transition: .2s;
}
.ds-template.is-selected .ds-template__check { opacity: 1; transform: scale(1); }

.ds-advanced { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ds-advanced > summary {
    cursor: pointer; list-style: none; padding: .85rem 1rem; font-weight: 800;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.ds-advanced > summary::-webkit-details-marker { display: none; }
.ds-advanced > summary::after { content: "▾"; color: var(--ink-soft); transition: transform .2s; }
.ds-advanced[open] > summary::after { transform: rotate(180deg); }
.ds-advanced__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ds-advanced .form-grid { margin: 0; }
.ds-reset {
    align-self: flex-start; border: 1px dashed var(--line-strong); background: transparent;
    color: var(--ink-soft); padding: .35rem .8rem; border-radius: 10px; font-size: .8rem; cursor: pointer;
}
.ds-reset:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
    .ds-templates__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ==========================================================================
   سلامة المحتوى — أسماء/أوصاف طويلة أو ناقصة لا تكسر التخطيط
   ========================================================================== */
.ds-title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-wrap: balance; overflow-wrap: anywhere;
}
.ds-desc {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.ds-tpl-full_bleed .ds-title,
.ds-tpl-premium_dark .ds-title,
.ds-tpl-price_focus .ds-title { -webkit-line-clamp: 2; }
.ds-price__amount { overflow-wrap: anywhere; }

/* طبقات: الصورة والنص دائماً فوق العناصر الزخرفية للقوالب */
.ds-slide .ds-media { position: relative; z-index: 1; }
.ds-slide .ds-body { z-index: 2; }

/* معاينات مصغّرة متناسقة داخل بطاقات مكتبة القوالب */
.ds-root--thumb .ds-slide { padding: clamp(.7rem, 5cqw, 2rem); gap: clamp(.25rem, 1.6cqw, .8rem); }
.ds-root--thumb .ds-size-sm { font-size: clamp(.5rem, 1.6cqw, 1.1rem); }
.ds-root--thumb .ds-size-md { font-size: clamp(.6rem, 2.2cqw, 1.5rem); }
.ds-root--thumb .ds-size-lg { font-size: clamp(.72rem, 3cqw, 2rem); }
.ds-root--thumb .ds-size-xl { font-size: clamp(.85rem, 4.2cqw, 2.6rem); }
.ds-root--thumb .ds-badge { font-size: clamp(.45rem, 1.5cqw, .95rem); padding: .25em .7em; }
.ds-root--thumb .ds-desc { -webkit-line-clamp: 1; }
.ds-root--thumb .ds-title { -webkit-line-clamp: 2; }
.ds-root--thumb .ds-tpl-price_focus .ds-price { font-size: clamp(1.4rem, 9cqw, 4rem); }

/* ==========================================================================
   وضع الصورة المباشرة (Direct Image)
   الصورة تُعرض كاملة كما رُفعت: بلا قص، بلا تمدد، بلا نصوص أو طبقات.
   المساحات الفارغة (Letterbox) تعود لخلفية حاوية العرض فقط ولا تمسّ الملف.
   ========================================================================== */
.ds-slide.ds-tpl-direct_image {
    display: block;
    padding: 0;
    gap: 0;
    background: #000;
}
.ds-slide.ds-tpl-direct_image .ds-direct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.ds-slide.ds-tpl-direct_image .ds-direct img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* إظهار كامل الصورة — لا اقتصاص */
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.ds-root--direct { background: #000; }

/* بطاقات اختيار وضع الإنشاء */
.ds-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .8rem;
}
.ds-mode {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ds-mode:hover { transform: translateY(-1px); }
.ds-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ds-mode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #2F6BFF) 12%, transparent);
    color: var(--accent, #2F6BFF);
    font-size: 1.2rem;
    flex: 0 0 auto;
}
.ds-mode__text { display: flex; flex-direction: column; gap: .15rem; }
.ds-mode__text strong { font-size: .98rem; }
.ds-mode__text small { color: var(--muted, #6b7280); font-size: .82rem; line-height: 1.4; }
.ds-mode__check {
    position: absolute; inset-inline-end: .8rem; inset-block-start: .8rem;
    color: var(--accent, #2F6BFF); opacity: 0; transition: opacity .15s;
}
.ds-mode.is-selected { border-color: var(--accent, #2F6BFF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2F6BFF) 18%, transparent); }
.ds-mode.is-selected .ds-mode__check { opacity: 1; }

/* منطقة رفع الصورة المباشرة */
.ds-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.6rem 1rem;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent, #2F6BFF) 4%, transparent);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ds-dropzone:hover,
.ds-dropzone.is-dragover { border-color: var(--accent, #2F6BFF); background: color-mix(in srgb, var(--accent, #2F6BFF) 9%, transparent); }
.ds-dropzone__icon { width: 2rem; height: 2rem; color: var(--accent, #2F6BFF); }
.ds-dropzone small { color: var(--muted, #6b7280); }
.ds-direct-current { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.ds-direct-current .ds-frame { max-width: 320px; }

/* ==========================================================================
   محرر الشريحة — الحالة المحددة من الراديو الفعلي (احتياط بلا JavaScript)،
   وترقيم الخطوات، وتجاوب البطاقات.
   ملاحظة: .is-selected تُدار من JavaScript، و:has() احتياط فقط لا بديل عنها.
   ========================================================================== */
.ds-mode:has(input:checked) { border-color: var(--accent, #2F6BFF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2F6BFF) 18%, transparent); }
.ds-mode:has(input:checked) .ds-mode__check { opacity: 1; }
.ds-template:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-template:has(input:checked) .ds-template__check { opacity: 1; transform: scale(1); }
/* Layer 2 — conditional config: [hidden] must win over .form/.field/.ds-note display
   so only the selected slide type's settings are visible. Layer 1 type cards
   (.ds-modes) never carry [hidden] and always stay visible. */
#ds-editor [hidden] { display: none !important; }
.ds-step__num {
    display: inline-grid; place-items: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--accent, #2F6BFF); color: #fff;
    font-size: .85rem; font-weight: 800; line-height: 1;
    vertical-align: .15em; margin-inline-end: .45rem;
}
@media (max-width: 640px) {
    .ds-modes { grid-template-columns: 1fr; }
    .ds-mode { padding: .85rem; }
}

/* ملاحظات الحواف الفارغة */
.ds-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .9rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.6;
}
.ds-note--warn { background: #FFF7E6; color: #8A5A00; border: 1px solid #F5D48A; }
.ds-note--ok { background: #EAF7EF; color: #1B6B3A; border: 1px solid #B7E3C7; }
.ds-note--landscape { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.ds-note--portrait { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
html[dir="rtl"] .ds-note { text-align: right; }

/* ==========================================================================
   اتجاه الشاشة (Landscape / Portrait) — امتداد معزول، لا يمسّ سلوك 16:9 القائم
   ========================================================================== */
/* إطار عمودي 9:16 — العرض هو المحرك (width-driven) فيبقى الارتفاع مشتقاً من النسبة */
.ds-frame--portrait { aspect-ratio: 9 / 16; width: min(380px, 82%); margin-inline: auto; }
.ds-frame--portrait .ds-root { position: absolute; inset: 0; }

/* القوالب الأفقية داخل إطار عمودي (معاينة المحرر): تكديس علوي/سفلي بدل التقسيم الجانبي.
   تُستثنى القوالب أحادية المنطقة والخلفية الكاملة والصورة المباشرة — تبقى كما هي. */
.ds-root--portrait .ds-slide.ds-has-image:not(.ds-tpl-direct_image):not(.ds-tpl-full_bleed):not(.ds-tpl-premium_dark) {
    grid-template-areas: "media" "body";
    grid-template-columns: 1fr;
    grid-template-rows: 1.15fr .85fr;
}

/* بطاقات اختيار الاتجاه في نموذج الشاشة */
#ds-screen-form [hidden] { display: none !important; }
.ds-orient { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ds-orient__card {
    position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .9rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 14px;
    background: var(--surface); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ds-orient__card:hover { border-color: var(--accent); }
.ds-orient__card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-orient__card.is-locked { cursor: not-allowed; opacity: .8; }
.ds-orient__card > input { position: absolute; opacity: 0; pointer-events: none; }
.ds-orient__card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-orient__shape {
    flex: 0 0 auto; border: 2px solid var(--accent); border-radius: 6px;
    background: color-mix(in srgb, var(--accent, #2F6BFF) 12%, transparent);
}
.ds-orient__shape--landscape { width: 56px; height: 32px; }
.ds-orient__shape--portrait { width: 32px; height: 56px; }
.ds-orient__text { display: flex; flex-direction: column; gap: .15rem; }
.ds-orient__text small { color: var(--ink-soft); font-size: .8rem; }
.ds-orient__check { position: absolute; inset-inline-end: .7rem; top: .7rem; color: var(--accent); opacity: 0; }
.ds-orient__card.is-selected .ds-orient__check,
.ds-orient__card:has(input:checked) .ds-orient__check { opacity: 1; }

/* المعاينة الحيّة للاتجاه في نموذج الشاشة */
.ds-orient-live { margin-top: 1rem; display: flex; justify-content: center; }
.ds-orient-live .ds-frame { width: min(100%, 560px); }
.ds-orient-live .ds-frame--portrait { width: min(220px, 60%); }
.ds-orient-live__label {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #8b8b8b; font-size: .85rem;
}

.ds-orient-badge { white-space: nowrap; }

@media (max-width: 640px) {
    .ds-orient { grid-template-columns: 1fr; }
}