/*
 * الفوتر: كبسولة بيضاء غير شفاف بعرض الشاشة تقريبا (هامش 8 بكسل من الجنبين ومن الحافة السفلية)، اطرافها نصف دائرة كاملة وبلا اطار.
 * في منتصفها شق نصف دائري تنزل فيه دائرة الدعم (بلا نص) وحولها هالة زرقاء خفيفة، وباقي البنود: أيقونة وتحتها كلمة واحدة،
 * والبند الحالي ملون وتحته خط. البنود بعيدة عن حافتي الكبسولة بـ26 بكسل.
 *
 * ⚠ خلفية الشريط ثلاث قطع (.bn-bg): يسار ويمين تمتدان، ووسط ثابت العرض (84 بكسل) فيه الشق مرسوم،
 *   فيبقى الشق بنفس الشكل على كل عرض شاشة، والظل على القطع الثلاث معا (drop-shadow) فيتبع الشق.
 *   والظل وحده هو ما يفصل الشريط عن الصفحة (لا اطار).
 * المساحة التي يشغلها من أسفل الشاشة = ارتفاعه 62 + max(8px, منطقة الامان) (--bn-h في bottom_nav.php).
 */
.bn {
    --bn-pb: max(8px, env(safe-area-inset-bottom, 0px));
    position: fixed;
    inset-inline: 8px;
    bottom: var(--bn-pb);
    z-index: 900;

    display: flex;
    align-items: flex-end;
    justify-content: space-around;

    height: 62px;
    padding: 0 26px 11px;
    box-sizing: border-box;
}

.bn-bg {
    position: absolute;
    inset: 0;
    display: flex;
    direction: ltr;
    pointer-events: none;
    filter: drop-shadow(0 6px 16px rgba(30, 60, 140, 0.22));
}

.bn-bg i { display: block; height: 100%; background: #fff; box-sizing: border-box; }
.bn-bg .l { flex: 1; margin-right: -0.5px; border-radius: 31px 0 0 31px; }
.bn-bg .r { flex: 1; margin-left: -0.5px; border-radius: 0 31px 31px 0; }
.bn-bg .c {
    flex: 0 0 84px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' width='84' height='64'%3E%3Cpath fill='%23ffffff' d='M0 0H1.73Q13.73 0 10.56 9.02A32 32 0 1 0 73.44 9.02Q70.27 0 82.27 0H84V64H0Z'/%3E%3C/svg%3E") no-repeat center top / 84px 64px,
        linear-gradient(#fff, #fff) no-repeat 0 63px / 100% 100%;
}

.bn-i {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;

    text-decoration: none;
    color: #7a869f;

    padding: 4px 2px 0;
    min-width: 0;

    transition: color .15s ease, opacity .1s ease;
    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;
    cursor: pointer;
}

.bn-i:hover  { color: #1d57d8; }
/*
 * ⚠ الضغط يغير الشفافية لا الحجم.
 *
 * والحجم يحرك ما حوله بصريا، ودائرة الدعم تبرز فوق الشريط فيتحرك معها ظلها وحدها.
 * وهي أقوى من a:active { transform: scale(0.97) } العامة آخر هذا الملف (تخصيص أعلى).
 */
.bn .bn-i:active { transform: none; opacity: 0.65; }
.bn-i.on     { color: #1d57d8; }

.bn-lb {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

/* الخط تحت البند الحالي */
.bn-i.on:not(.bn-mid)::after {
    content: "";
    position: absolute;
    bottom: -7px;
    inset-inline: 0;
    margin-inline: auto;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: currentColor;
}

.bn-ic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.bn-ic svg { width: 25px; height: 25px; }

.bn-dot {
    position: absolute;
    top: -1px;
    inset-inline-end: -2px;

    width: 9px;
    height: 9px;
    border-radius: 50%;

    background: var(--danger);
    border: 2px solid var(--surface);
}

.bn-dot[hidden] { display: none; }

/*
 * دائرة الدعم: بلا نص تحتها، وتنزل في الشق.
 * مركزها 15 بكسل تحت حافة الشريط العليا (مركز الشق نفسه)، فتبرز فوق الشريط 11 بكسل.
 * وبندها يحجز 84 بكسل في المنتصف (عرض قطعة الشق).
 */
.bn-mid { position: static; flex: 0 0 84px; align-self: stretch; justify-content: flex-end; padding-top: 0; }

.bn-mid .bn-ic {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);

    width: 52px;
    height: 52px;
    border-radius: 50%;

    color: #fff;
    background: linear-gradient(150deg, #4a86ff, #1749c9);
    box-sizing: border-box;

    box-shadow: 0 6px 14px rgba(29, 87, 216, 0.38), 0 0 0 6px rgba(29, 87, 216, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bn-mid .bn-ic svg { width: 24px; height: 24px; stroke: currentColor; }

.bn-mid:hover  { color: inherit; }
.bn .bn-mid:active { transform: none; opacity: 1; }
.bn .bn-mid:active .bn-ic { filter: brightness(0.9); }

.bn-mid.on .bn-ic { background: linear-gradient(150deg, #3a74ee, #123fb4); }

/* نقطة الرسائل بلا رقم (الأدمن): على حافة الدائرة عند الزاوية العليا اليمنى، نفس موضع شارة الرقم */
.bn-mid .bn-dot {
    top: 7.6px;
    left: 44.4px;
    right: auto;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-color: var(--surface);
}

html:not([data-theme="light"]) .bn-i       { color: #8d99b5; }
html:not([data-theme="light"]) .bn-i.on,
html:not([data-theme="light"]) .bn-i:hover { color: #6c9bff; }
html:not([data-theme="light"]) .bn-mid,
html:not([data-theme="light"]) .bn-mid:hover { color: inherit; }
html:not([data-theme="light"]) .bn-bg { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)); }
html:not([data-theme="light"]) .bn-bg i { background: #131d33; }
html:not([data-theme="light"]) .bn-bg .c {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 64' width='84' height='64'%3E%3Cpath fill='%23131d33' d='M0 0H1.73Q13.73 0 10.56 9.02A32 32 0 1 0 73.44 9.02Q70.27 0 82.27 0H84V64H0Z'/%3E%3C/svg%3E") no-repeat center top / 84px 64px,
        linear-gradient(#131d33, #131d33) no-repeat 0 63px / 100% 100%;
}
html:not([data-theme="light"]) .bn-mid .bn-ic {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(108, 155, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body.has-bn {
    padding-bottom: calc(var(--bn-h, 70px) + 18px) !important;
}

@media (max-width: 359px) {
    .bn { padding-inline: 16px; }
}

@media (min-width: 560px) {
    .bn {
        max-width: 460px;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-i { transition: none; }
}

.bn {
    will-change: transform;
    backface-visibility: hidden;
}

a,
button,
[role="button"],
input,
select,
textarea,
summary,
label,
.card-icon-btn,
.copy-btn {
    -webkit-tap-highlight-color: transparent;
}

a:active,
button:active,
[role="button"]:active,
summary:active {
    transform: scale(0.97);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}