/* ===== كل خانات الإدخال في المتجر بشكل خانة صفحة الدخول (css/auth-emboss.css) — بطلب المالك 2026-10-28 =====
   محفورة + العنوان بيطير ويقعد على الإطار + قطر النور بيلف حوالين الخانة المفتوحة.
   js/emboss-fields.js بيعلّم: الخانة .emb-in — مجموعتها .emb-fg — العنوان .emb-lb (أو بيعمل عنوان من الكلام المساعد .emb-lb-gen)
   وبيحسب: --ef-bg (لون اللي ورا الخانة علشان الحفر وقَطعة الإطار تحت العنوان) و --ef-x / --ef-y / --ef-h (مكان الخانة جوه مجموعتها).
   صفحات الدخول في «حسابي» ليها شكلها الخاص ومش داخلة هنا (.auth-emboss).
   فيه !important كتير عن قصد: كل صفحة ليها تنسيق خانات قديم بأولوية عالية، والملف ده طبقة فوقهم.
   لون الإطار (border-color) من غير !important علشان تنبيه الخانة الغلط (الأحمر) يفضل يبان. */

:root {
    --ef-in-dark: rgba(0, 0, 0, .62);
    --ef-in-light: rgba(255, 255, 255, .05);
    --ef-rim: rgba(255, 255, 255, .08);
    --ef-primary: #00d4ff;
    --ef-primary-rgb: 0, 212, 255;
    --ef-secondary: #6366f1;
    --ef-text: #f8fafc;
    --ef-muted: #94a3b8;
    --ef-bg-def: #14141d;
    --ef-bad: #ef4444;
}
html[data-theme="light"] {
    --ef-in-dark: rgba(163, 177, 198, .7);
    --ef-in-light: rgba(255, 255, 255, .9);
    --ef-rim: rgba(148, 163, 184, .35);
    --ef-primary: #7c3aed;
    --ef-primary-rgb: 124, 58, 237;
    --ef-secondary: #4f46e5;
    --ef-text: #0f172a;
    --ef-muted: #556070;
    --ef-bg-def: #e9eef5;
    --ef-bad: #dc2626;
}

/* ===== الخانة نفسها: محفورة ===== */
html body .emb-in.emb-in {
    background-color: var(--ef-bg, var(--ef-bg-def)) !important;
    color: var(--ef-text) !important;
    -webkit-text-fill-color: var(--ef-text);
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ef-rim);
    box-shadow: inset 5px 5px 11px var(--ef-in-dark), inset -5px -5px 11px var(--ef-in-light) !important;
    outline: none !important;
    transform: none !important;
    transition: border-color .25s ease, box-shadow .25s ease !important;
}
html body .emb-in.emb-in:hover:not(:focus) { border-color: var(--ef-rim); }
html body .emb-in.emb-in:focus {
    border-color: rgba(var(--ef-primary-rgb), .5) !important;
    box-shadow: inset 5px 5px 11px var(--ef-in-dark), inset -5px -5px 11px var(--ef-in-light), 0 0 0 3px rgba(var(--ef-primary-rgb), .12) !important;
}
html body .emb-in.emb-in:disabled,
html body .emb-in.emb-in[readonly]:not(:focus) { box-shadow: inset 3px 3px 7px var(--ef-in-dark), inset -3px -3px 7px var(--ef-in-light) !important; }
/* الخانة الغلط (تنبيهات الصفحات وووكومرس) */
html body .emb-in.emb-in:is(.error, .is-invalid, .input-error, [aria-invalid="true"]),
html body .woocommerce-invalid .emb-in.emb-in { border-color: var(--ef-bad); }
/* لون المتصفح لما يملا الخانة لوحده بيبوّظ الحفر */
html body .emb-in.emb-in:-webkit-autofill {
    -webkit-text-fill-color: var(--ef-text);
    transition: background-color 9999s ease-in-out 0s !important;
}
html body select.emb-in.emb-in option { color: var(--ef-text); background-color: var(--ef-bg-def); }

/* الخانة اللي ليها عنوان: نفس مقاس خانة الدخول */
html body .emb-in.emb-in.emb-has-lb { border-radius: 16px !important; font-size: 1rem; font-weight: 600; }
html body input.emb-in.emb-in.emb-has-lb:not(.emb-gen),
html body select.emb-in.emb-in.emb-has-lb:not(.emb-gen) { height: 56px !important; min-height: 56px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body textarea.emb-in.emb-in.emb-has-lb { min-height: 56px !important; padding-top: 16px !important; padding-bottom: 12px !important; line-height: 1.6 !important; }
html body textarea.emb-in.emb-in.emb-has-lb:not([rows="1"]) { min-height: 104px !important; }
/* قايمة ووكومرس (select2) */
html body .select2-selection.emb-in.emb-in { height: 56px !important; display: flex !important; align-items: center !important; border-radius: 16px !important; }
html body .select2-selection.emb-in.emb-in .select2-selection__rendered { flex: 1; line-height: 54px !important; padding-inline: 18px 34px !important; color: var(--ef-text) !important; font-size: 1rem; font-weight: 600; }
html body .select2-selection.emb-in.emb-in .select2-selection__arrow { height: 54px !important; top: 1px !important; }
html body .emb-in.emb-in.emb-gen { min-height: 48px !important; border-radius: 16px !important; }
[dir="rtl"] .emb-fg .emb-in.emb-in.emb-has-lb { padding-right: 18px !important; }
html:not([dir="rtl"]) .emb-fg .emb-in.emb-in.emb-has-lb { padding-left: 18px !important; }

/* ===== العنوان: جوه الخانة وهي فاضية ← بيطير ويقعد على إطارها ===== */
html body .emb-fg.emb-fg { position: relative !important; overflow: visible !important; }
html body .emb-fg > .emb-lb.emb-lb {
    position: absolute !important;
    inset-inline-start: calc(var(--ef-x, 0px) + 18px) !important;
    inset-inline-end: auto !important;
    top: calc(var(--ef-y, 0px) + var(--ef-h, 56px) / 2) !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100% - var(--ef-x, 0px) - 64px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--ef-muted) !important;
    -webkit-text-fill-color: currentColor;
    background: transparent !important;
    box-shadow: none !important;
    text-align: start !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: top .28s cubic-bezier(.3, .7, .3, 1), inset-inline-start .28s cubic-bezier(.3, .7, .3, 1), transform .28s cubic-bezier(.3, .7, .3, 1), font-size .28s cubic-bezier(.3, .7, .3, 1), color .28s ease, padding .28s ease !important;
}
html body .emb-fg > .emb-lb.emb-lb :is(i, svg, .fa, .fas, .far, .fab) { display: none !important; }
html body .emb-fg > .emb-lb.emb-lb :is(small, .optional) { font-size: .82em; font-weight: 600; opacity: .8; color: inherit !important; }
html body .emb-fg > .emb-lb.emb-lb :is(span, abbr, b, strong, em) { color: inherit; text-decoration: none; border: 0; }
html body .emb-fg > .emb-lb.emb-lb :is(.required, abbr[title]) { color: var(--ef-bad) !important; }

html body .emb-fg.emb-fg:focus-within > .emb-lb.emb-lb,
html body .emb-fg.emb-fg.is-filled > .emb-lb.emb-lb,
html body .emb-fg.emb-fg.is-pinned > .emb-lb.emb-lb {
    top: calc(var(--ef-y, 0px) - 10px) !important;
    inset-inline-start: calc(var(--ef-x, 0px) + 12px) !important;
    transform: none !important;
    padding: 0 7px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--ef-primary) !important;
    background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 2px), var(--ef-bg, var(--ef-bg-def)) calc(50% - 2px)) !important;
}
/* المتصفح ملا الخانة لوحده — قاعدة لوحدها علشان المتصفحات اللي مابتعرفش :has ماتلغيش اللي فوق */
html body .emb-fg.emb-fg:has(.emb-in:-webkit-autofill) > .emb-lb.emb-lb {
    top: calc(var(--ef-y, 0px) - 10px) !important;
    inset-inline-start: calc(var(--ef-x, 0px) + 12px) !important;
    transform: none !important;
    padding: 0 7px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--ef-primary) !important;
    background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 2px), var(--ef-bg, var(--ef-bg-def)) calc(50% - 2px)) !important;
}

/* الكلام المساعد جوه الخانة بيستخبى طول ما العنوان قاعد مكانه، ويظهر لما الخانة تتفتح */
/* (-webkit-text-fill-color بتاعة الخانة بتلوّن الكلام المساعد كمان، فلازم تتظبط هنا) */
html body .emb-in.emb-in::placeholder { color: var(--ef-muted); -webkit-text-fill-color: var(--ef-muted); opacity: 1; }
html body .emb-fg .emb-in.emb-has-lb::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; opacity: 1 !important; transition: color .2s ease; }
html body .emb-fg:focus-within .emb-in.emb-has-lb:not(.emb-ph-off)::placeholder,
html body .emb-fg.is-pinned .emb-in.emb-has-lb:not(.emb-ph-off)::placeholder { color: var(--ef-muted) !important; -webkit-text-fill-color: var(--ef-muted) !important; font-weight: 500; }

/* ===== قطر النور: حتة منوّرة (راس + ديل) بتلف حوالين إطار الخانة المفتوحة مع عقارب الساعة ===== */
.ef-train {
    position: absolute; z-index: 2; pointer-events: none; overflow: visible;
    opacity: 0; transition: opacity .3s ease;
    filter: drop-shadow(0 0 4px rgba(var(--ef-primary-rgb), .9));
}
.ef-train.is-fixed { position: fixed; left: 0; top: 0; }
.ef-train.is-on { opacity: 1; }
.ef-train rect { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.ef-train .ef-head { stroke: var(--ef-primary); }
.ef-train .ef-tail { stroke: var(--ef-secondary); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    html body .emb-fg > .emb-lb.emb-lb { transition: none !important; }
    .ef-train { display: none; }
}