/* «كله يوصل» — بانر التثبيت وشريط التحديث. مبني على متغيرات static/css/souq.css (--p, --amber, --head...)
   وخطوات الآيفون بتستخدم .sheet بتاعة السوق نفسها. */

/* بانر «ثبّت التطبيق» — نفس كارت .box */
.ky-banner {
    position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 48;
    max-width: 520px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    background: var(--card, #fff); border: 1px solid var(--line, #E6E1EC); border-radius: 22px;
    padding: 12px 12px 12px 8px; box-shadow: var(--shadow, 0 10px 30px rgba(59, 30, 104, .3));
    animation: ky-up .3s ease-out;
}
body:has(.cartbar) .ky-banner { bottom: calc(84px + env(safe-area-inset-bottom)); } /* فوق شريط السلة */
.ky-banner img { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.ky-banner .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ky-banner .tx b { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--p, #3B1E68); }
.ky-banner .tx span { font-size: 12px; color: var(--muted, #6A6475); }
.ky-banner .btn { flex-shrink: 0; }
.ky-banner .ky-x { border: 0; background: none; color: var(--muted, #6A6475); font-size: 22px; line-height: 1; width: 32px; height: 32px; flex-shrink: 0; }

/* خطوات الآيفون (جوه .sheet) */
.ky-steps { list-style: none; margin: 4px 0 6px; padding: 0; counter-reset: s; display: flex; flex-direction: column; }
.ky-steps li { counter-increment: s; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--line3, #EEEAF2); font-size: 15px; }
.ky-steps li:last-child { border-bottom: 0; }
.ky-steps li::before {
    content: counter(s); width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--p, #3B1E68); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--head); font-weight: 700; font-size: 13px;
}
.ky-steps svg { width: 22px; height: 22px; color: #0A84FF; flex-shrink: 0; }
.ky-steps small { color: var(--muted, #6A6475); font-size: 12px; }

/* شريط «فيه تحديث» — نفس هيرو الطلب */
.ky-update {
    position: fixed; top: calc(10px + env(safe-area-inset-top)); inset-inline: 12px; z-index: 60;
    max-width: 520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--p, #3B1E68); color: #fff; border-radius: 16px; padding: 8px 8px 8px 14px; padding-inline-start: 16px;
    font-size: 14px; box-shadow: var(--shadow, 0 10px 30px rgba(59, 30, 104, .3)); animation: ky-down .3s ease-out;
}

/* صندوق «بلّغني» في صفحة الطلب */
.ky-notify .ky-row { display: flex; align-items: center; gap: 12px; }
.ky-notify .ky-ic {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--amber-soft, #FFF6E6); color: var(--amber-text, #7A4B00);
}
.ky-notify .ky-ic svg { width: 22px; height: 22px; }
.ky-on { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ok, #1E8F5A);
    background: var(--ok-soft, #E6F5EE); border-radius: 12px; padding: 10px 12px; }

/* فاتح كتطبيق متثبّت: نخفي أي «ثبّت التطبيق» */
.ky-app [data-pwa-install], .ky-app .ky-hide-in-app { display: none !important; }

@keyframes ky-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ky-down { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }