/* /desktop — the computer app: a laptop drawing, one card per system (Windows download, Mac App Store),
   and the Windows install steps with a drawing of the blue SmartScreen box. Shared look in ../pages.css. */
.dk-main { position: relative; max-width: 760px; margin: 0 auto; padding: 10px 16px 44px; text-align: center; }

/* ── The laptop ── */
.dk-laptop { width: min(100%, 470px); margin: 6px auto 22px; }
.dk-screen {
    position: relative; width: 86%; margin: 0 auto; aspect-ratio: 16 / 10; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 10px solid var(--ink); border-bottom-width: 12px; border-radius: 20px 20px 6px 6px;
    background: var(--blue-grad); box-shadow: 0 16px 34px rgba(31,58,95,0.24);
}
.dk-screen::before {
    content: ''; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
    background: url('../img/doodles-white-soft.svg') center / 420px auto;
}
.dk-screen::after {   /* the light glow behind the mascot, as on the home download panel */
    content: ''; position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,232,143,0.42), rgba(255,232,143,0) 64%); pointer-events: none;
}
.dk-mascot {
    position: relative; z-index: 1; width: 40%; height: auto;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.28)); animation: dk-floaty 3s ease-in-out infinite;
}
.dk-screen-name { position: relative; z-index: 1; margin-top: 2px; font: 800 clamp(18px, 5vw, 26px)/1.2 var(--title-font); color: var(--yellow); text-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.dk-star {
    position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
    background: url('../img/star.svg') center / contain no-repeat; transform: rotate(var(--r));
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}
.dk-base {
    position: relative; height: 16px; border-radius: 3px 3px 18px 18px;
    background: linear-gradient(#E3D9C2, #C8BB9E); box-shadow: 0 10px 18px rgba(60,40,0,0.18);
}
.dk-base::after {   /* the notch to open the lid */
    content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%);
    border-radius: 0 0 8px 8px; background: #B6A887;
}
@keyframes dk-floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }

.dk-main h1 { font: 800 34px/1.3 var(--title-font); color: var(--ink); text-wrap: balance; }
.dk-main h1 .mk { color: var(--blue); background: var(--marker); padding: 0 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dk-lead { font-size: 16.5px; font-weight: 700; color: var(--ink-2); margin: 6px auto 22px; text-wrap: balance; }
.dk-phone { text-align: start; margin: 0 0 18px; }

/* ── One card per system ── */
.dk-grid { display: grid; gap: 16px; text-align: start; }
.dk-card { display: flex; flex-direction: column; gap: 16px; }
.dk-card-head { display: flex; align-items: center; gap: 14px; }
.dk-card-head .ico-disc { width: 56px; height: 56px; }
.dk-card-head .ico-disc svg { width: 58%; height: 58%; }
.dk-card .card-title { font-size: 25px; margin: 0; line-height: 1.2; }
.dk-req { font-size: 14px; font-weight: 700; color: var(--muted); }
.dk-card .btn { margin-top: auto; }
.dk-meta { margin-top: -6px; font-size: 13.5px; font-weight: 700; color: var(--muted); text-align: center; }
.dk-meta .ltr { font-variant-numeric: tabular-nums; }
/* the card of the visitor's own system: ringed in yellow, with a «جهازك» tag */
.dk-card.is-yours { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(249,197,58,0.35), var(--card-shadow-hi); }
.dk-yours {
    position: absolute; top: -13px; inset-inline-start: 22px; padding: 3px 14px 1px; border-radius: 30px;
    background: var(--yellow); color: var(--ink); font-size: 12.5px; font-weight: 800; box-shadow: 0 3px 0 var(--yellow-deep);
}
/* «soon»: the button stays in its place but reads as not ready yet */
.btn[aria-disabled="true"] { cursor: default; background: #E8E1CF; color: rgba(31,58,95,0.55); box-shadow: none; transform: none; }

/* ── Windows install steps ── */
.dk-steps { margin-top: 16px; text-align: start; }
.dk-ol { list-style: none; counter-reset: dk; margin-top: 14px; display: grid; gap: 16px; }
.dk-ol > li { counter-increment: dk; position: relative; padding-inline-start: 46px; font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.dk-ol > li::before {
    content: counter(dk); position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-top: 2px;
    background: var(--blue); color: #FFFFFF; font: 800 16px/1 'Almarai', sans-serif; box-shadow: 0 3px 0 var(--blue-700);
}
.dk-ol b { color: var(--ink); }
.dk-ol .ltr { font-weight: 800; color: var(--ink); }
.dk-fr { display: block; font-size: 13.5px; color: var(--muted); }
.dk-fr .ltr { color: var(--ink-2); }

/* the drawing of the SmartScreen box (Windows' own blue), in English and left-to-right like on the PC */
.dk-ss { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; direction: ltr; }
.dk-ss-box {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px;
    padding: 12px 12px 10px; border-radius: 10px; background: #1F64B8; color: #FFFFFF; text-align: left;
    font-family: 'Segoe UI', system-ui, sans-serif; box-shadow: 0 8px 18px rgba(31,58,95,0.22);
}
.dk-ss-title { font-size: 13px; font-weight: 700; line-height: 1.3; padding-right: 22px; }
.dk-ss-line { display: block; width: 92%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.35); }
.dk-ss-line.short { width: 64%; }
.dk-ss-link { font-size: 12px; font-weight: 700; text-decoration: underline; padding: 1px 4px; margin-left: -4px; border-radius: 5px; }
.dk-ss-app { font-size: 11px; opacity: 0.85; }
.dk-ss-btns { display: flex; gap: 6px; margin-top: auto; align-self: flex-end; }
.dk-ss-btn { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border: 1.5px solid rgba(255,255,255,0.75); border-radius: 4px; white-space: nowrap; }
.dk-ss-hit { outline: 3px solid var(--yellow); outline-offset: 2px; background: rgba(249,197,58,0.22); }
.dk-ss-num {
    position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--yellow); color: var(--ink); font: 800 14px/1 'Almarai', sans-serif; box-shadow: 0 3px 0 var(--yellow-deep);
}

/* the small phone / TV line */
.dk-note { margin-top: 28px; font-size: 14.5px; color: var(--ink-2); line-height: 2; text-wrap: balance; }
.dk-note strong { color: var(--ink); }
.dk-note a { font-weight: 800; white-space: nowrap; }
.dk-note-sep { margin: 0 8px; color: rgba(31,58,95,0.3); }

@media (max-width: 479px) {
    .dk-ss { grid-template-columns: 1fr; }
}
@media (min-width: 700px) {
    .dk-main { padding-top: 22px; }
    .dk-main h1 { font-size: 46px; }
    .dk-lead { font-size: 18px; margin-bottom: 28px; }
    .dk-grid { grid-template-columns: 1fr 1fr; }
    .dk-card + .dk-card { margin-top: 0; }
    .dk-ss { gap: 16px; }
    .dk-ss-box { min-height: 150px; padding: 16px 16px 12px; }
    .dk-ss-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-mascot { animation: none; }
}

/* «English button name» inside Arabic: kept on one line, quotes on the right sides */
.q { white-space: nowrap; unicode-bidi: isolate; }