/*
 * v90: صفحة «ثبّت التطبيق» — تعمل داخل الواجهة العامة (site.css) ولوحة العميل (.ds) بمتغيرات محلية.
 * الحالة سمات على الجذر .ia (يضعها السكربت المضمَّن في partials/install-app قبل أول رسم):
 *   data-device = ios | android | desktop      الجهاز المكتشف (بطاقته أولًا ومفتوحة)
 *   data-browser = chrome | edge | safari | firefox
 *   data-installed  التطبيق يعمل الآن في وضع standalone
 *   data-justinstalled  اكتمل التثبيت للتو من هذه الصفحة
 *   data-inapp  المتصفح داخل تطبيق آخر (لا يدعم التثبيت)
 *   data-canprompt  المتصفح يدعم التثبيت بنقرة واحدة (beforeinstallprompt)
 * بلا جافاسكربت تبقى البطاقات الثلاث مفتوحة وتُقرأ كلها.
 */

.ia {
    /* الواجهة العامة (site.css) */
    --ia-surface: var(--s1);
    --ia-alt: var(--s2);
    --ia-line: var(--sep);
    --ia-ink: var(--ink);
    --ia-ink2: var(--ink2);
    --ia-mut: var(--mut);
    --ia-fill: var(--acc);
    --ia-fillInk: #fff;
    --ia-soft: var(--accS);
    --ia-pos: var(--pos);
    --ia-posS: var(--posS);
    --ia-warn: var(--warn);
    --ia-warnS: rgba(255, 159, 10, .14);
    --ia-ease: cubic-bezier(.32, .72, 0, 1);

    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    color: var(--ia-ink);
    interpolate-size: allow-keywords;
}

/* لوحة العميل (.ds): نفس البنية بمتغيرات القالب الداخلي */
.ia[data-ctx="client"] {
    --ia-surface: var(--surface);
    --ia-alt: var(--alt);
    --ia-line: var(--line);
    --ia-ink: var(--ink);
    --ia-ink2: var(--ink2);
    --ia-mut: var(--muted);
    --ia-fill: var(--brand);
    --ia-fillInk: var(--brandInk);
    --ia-soft: var(--accSoft);
    --ia-pos: var(--pos);
    --ia-posS: var(--posSoft);
    --ia-warn: var(--warn);
    --ia-warnS: var(--warnSoft);
    max-width: 760px;
}

.ia p,
.ia ol,
.ia ul,
.ia h3 {
    margin: 0;
}

/* مقدمة الصفحة داخل لوحة العميل (في الصفحة العامة تحلّ محلها ترويسة الصفحة) */
.iaLead {
    font-size: 15px;
    line-height: 1.9;
    color: var(--ia-ink2);
    max-width: 62ch;
    text-wrap: balance;
}

/* ===== شرائط الحالة ===== */
.iaBanner {
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--ia-line);
    background: var(--ia-surface);
}

.iaBIc {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.iaBTx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ia-ink2);
}

.iaBTx b {
    font-size: 15px;
    font-weight: 600;
    color: var(--ia-ink);
}

.iaDone,
.iaJust {
    background: var(--ia-posS);
    border-color: color-mix(in srgb, var(--ia-pos) 38%, transparent);
    align-items: center;
}

.iaDone .iaBIc,
.iaJust .iaBIc {
    background: var(--ia-pos);
    color: #fff;
}

.iaDone .iaBTx,
.iaJust .iaBTx {
    color: var(--ia-ink);
    font-weight: 500;
}

.iaWarn {
    background: var(--ia-warnS);
    border-color: color-mix(in srgb, var(--ia-warn) 40%, transparent);
}

.iaWarn .iaBIc {
    background: var(--ia-warn);
    color: #000;
}

.iaCopy {
    margin-top: 4px;
}

.iaCopy[data-done] {
    pointer-events: none;
}

.ia[data-installed] .iaDone,
.ia[data-justinstalled] .iaJust,
.ia[data-inapp] .iaWarn {
    display: flex;
}

/* ===== التثبيت بنقرة واحدة ===== */
.iaQuick {
    display: none;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--ia-soft);
    border: 1px solid color-mix(in srgb, var(--ia-fill) 45%, transparent);
}

.iaQt {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iaQt b {
    font-size: 15.5px;
    font-weight: 600;
}

.iaQt span {
    font-size: 13.5px;
    color: var(--ia-ink2);
    line-height: 1.7;
}

.ia[data-canprompt]:not([data-installed]):not([data-justinstalled]):not([data-inapp]) .iaQuick {
    display: flex;
}

.ia[data-justinstalled] .iaCards,
.ia[data-justinstalled] .iaBenefits {
    display: none;
}

/* ===== الميزات ===== */
.iaBenefits {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iaBenefits li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding-inline: 12px 14px;
    border-radius: 999px;
    background: var(--ia-alt);
    color: var(--ia-ink2);
    font-size: 13px;
    font-weight: 500;
}

.iaBenefits svg {
    color: var(--ia-pos);
}

/* ===== البطاقات ===== */
.iaCards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iaCard {
    background: var(--ia-surface);
    border: 1px solid var(--ia-line);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color .25s;
}

.iaCard[data-detected] {
    border-color: var(--ia-fill);
    background: linear-gradient(180deg, var(--ia-soft), transparent 170px), var(--ia-surface);
}

.iaCard > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.iaCard > summary::-webkit-details-marker {
    display: none;
}

.iaCard > summary:focus-visible {
    outline: 2px solid var(--ia-fill);
    outline-offset: -3px;
    border-radius: 18px;
}

@media (hover: hover) {
    .iaCard:not([data-detected]) > summary:hover {
        background: color-mix(in srgb, var(--ia-alt) 70%, transparent);
    }
}

.iaTile {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--ia-alt);
    color: var(--ia-ink);
}

.iaCard[data-detected] .iaTile {
    background: var(--ia-fill);
    color: var(--ia-fillInk);
}

.iaTt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.iaName {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.4;
}

.iaSub {
    font-size: 13px;
    color: var(--ia-mut);
    line-height: 1.5;
}

.iaBadge {
    display: none;
    align-items: center;
    height: 22px;
    padding-inline: 10px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--ia-fill);
    color: var(--ia-fillInk);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.iaCard[data-detected] .iaBadge {
    display: inline-flex;
}

/* السهم: حدّان فيزيائيان مدوَّران فلا يتأثر اتجاهه بالعربية/الإنجليزية */
.iaCaret {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ia-mut);
    border-bottom: 2px solid var(--ia-mut);
    transform: rotate(45deg);
    position: relative;
    top: -2px;
    margin-inline: 4px 2px;
    transition: transform .3s var(--ia-ease), top .3s var(--ia-ease);
}

.iaCard[open] .iaCaret {
    transform: rotate(-135deg);
    top: 2px;
}

/* فتح/إغلاق سلس حيث يدعمه المتصفح، وبلا ذلك يبقى الانتقال فوريًا */
@supports selector(::details-content) {
    .iaCard::details-content {
        height: 0;
        overflow: hidden;
        transition: height .35s var(--ia-ease), content-visibility .35s allow-discrete;
    }

    .iaCard[open]::details-content {
        height: auto;
    }
}

.iaBody {
    padding: 2px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== الخطوات ===== */
.iaSteps {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: ia;
}

.iaSteps li {
    counter-increment: ia;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ia-ink2);
}

.iaSteps li::before {
    content: counter(ia);
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ia-alt);
    color: var(--ia-ink);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iaCard[data-detected] .iaSteps li::before {
    background: var(--ia-fill);
    color: var(--ia-fillInk);
}

.iaGlyph {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-inline: 2px;
    border-radius: 8px;
    background: var(--ia-alt);
    border: 1px solid var(--ia-line);
    color: var(--ia-ink);
    vertical-align: middle;
}

.iaNote {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ia-mut);
}

/* ===== متصفحات الكمبيوتر ===== */
.iaBr {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iaBr li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--ia-alt);
    border: 1px solid transparent;
}

.iaBr b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.iaBr p {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ia-ink2);
}

.iaMine {
    display: none;
    align-items: center;
    height: 20px;
    padding-inline: 8px;
    border-radius: 999px;
    background: var(--ia-fill);
    color: var(--ia-fillInk);
    font-size: 11px;
    font-weight: 600;
}

.ia[data-browser="chrome"] .iaBr [data-br="chrome"],
.ia[data-browser="edge"] .iaBr [data-br="edge"],
.ia[data-browser="safari"] .iaBr [data-br="safari"] {
    order: -1;
    background: var(--ia-soft);
    border-color: color-mix(in srgb, var(--ia-fill) 55%, transparent);
}

.ia[data-browser="chrome"] [data-br="chrome"] .iaMine,
.ia[data-browser="edge"] [data-br="edge"] .iaMine,
.ia[data-browser="safari"] [data-br="safari"] .iaMine {
    display: inline-flex;
}

/* ===== ملف APK ===== */
.iaApk {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: var(--ia-alt);
}

.iaApk h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
}

.iaApkBtn {
    align-self: flex-start;
}

.iaBtnSize {
    margin-inline-start: 2px;
    font-size: 13px;
    font-weight: 500;
    opacity: .78;
}

.iaSafe {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ia-mut);
}

.iaSafe svg {
    margin-top: 4px;
    color: var(--ia-pos);
}

.iaFoot {
    margin-top: 2px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ia-mut);
}

/* الصفحة العامة: قسم البطاقات أقرب إلى الترويسة (الصفحات العامة الأخرى تحتاج مسافة أكبر لأن محتواها أطول) */
.iaSec {
    padding-block: 36px 28px;
}

.pgH .lead.iaLeadPub {
    text-wrap: balance;
}

@media (max-width: 480px) {
    .iaCard > summary {
        padding: 14px;
        gap: 12px;
    }

    .iaTile {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .iaName {
        font-size: 16px;
    }

    .iaBody {
        padding-inline: 14px;
        padding-bottom: 18px;
    }

    .iaSteps li {
        font-size: 14.5px;
    }

    .iaQuick .btn,
    .iaApkBtn {
        width: 100%;
        align-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iaCaret,
    .iaCard,
    .iaCard::details-content {
        transition: none;
    }
}