/* Standalone courses (الكورسات): cards, filter pills, ordered row, full-diploma banner.
   Used on the home page, /courses and the diploma+courses pages. */
.q-crs{--cr-navy:#062985;--cr-cob:#2440DC;--cr-mut:#475569;--cr-line:#E2E8F0}
.q-crs .q-cc,.q-cc.q-cc--cr{display:flex;flex-direction:column;border:1px solid var(--cc-line,#E2E8F0);border-radius:8px;background:var(--cc-bg,#fff);overflow:clip;color:#0F172A;text-decoration:none;transition:transform 250ms ease,box-shadow 250ms ease}
.q-cc.q-cc--cr:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,23,42,0.10)}
.q-cc--cr .q-cc__m{position:relative;aspect-ratio:16/9;overflow:clip;border-bottom:1px solid var(--cc-line,#E2E8F0)}
.q-cc--cr .q-cc__art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--cc-bg,#fff)}
.q-cc--cr .q-cc__tag{position:absolute;top:14px;inset-inline-end:14px;height:30px;padding:0 12px;border-radius:999px;background:rgba(15,23,42,0.86);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.q-cc--cr .q-cc__tag .cs-icon{font-size:17px}
.q-cc--cr .q-cc__b{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1 1 auto}
.q-cc--cr .q-cc__lv{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#2440DC}
.q-cc--cr .q-cc__lv .cs-icon{font-size:18px}
.q-cc--cr h3{margin:0;font-size:20px;line-height:1.45;font-weight:700}
.q-cc--cr .q-cc__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:#334155}
.q-cc--cr .q-cc__meta span{display:inline-flex;align-items:center;gap:6px}
.q-cc--cr .q-cc__meta .cs-icon{font-size:18px;color:#2440DC}
.q-cc--cr p{margin:0;font-size:14.5px;line-height:1.8;color:#475569}
.q-cr__from{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#64748B}
.q-cr__from .cs-icon{font-size:16px;color:#2440DC}
.q-cr__price{margin-top:auto;padding-top:14px;border-top:1px solid rgba(15,23,42,0.08);display:grid;gap:6px;font-size:14px}
.q-cr__price > div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.q-cr__price small{color:#64748B;font-size:13px}
.q-cr__price b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:20px;color:#062985}
.q-cr__price b .cur{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;margin-inline-start:4px}
.q-cr__inst{font-weight:600;color:#062985}
.q-cr__cta{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.q-cr__cta .q-b{justify-content:center;width:100%}
.q-cr__cta .q-a{align-self:center}
.q-cr__row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.q-cr__row .q-a{font-size:14px}
.q-cr__new{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#F59E0B;color:#fff;font-size:11px;font-weight:700;line-height:1;margin-inline-start:6px;vertical-align:middle}

/* grid + ordered row with arrows */
.q-crs__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.q-crs__seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative}
.q-crs__seq > .q-cc--cr{position:relative}
.q-crs__seq > .q-cc--cr:not(:last-child)::after{content:"";position:absolute;top:28%;inset-inline-end:-24px;width:20px;height:20px;border-radius:999px;background:#fff;border:1px solid #CBD5E1;box-shadow:0 2px 6px rgba(15,23,42,.08);z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='%23062985' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:14px;background-repeat:no-repeat;background-position:center}
html[dir="ltr"] .q-crs__seq > .q-cc--cr:not(:last-child)::after{transform:scaleX(-1)}

/* filter pills (/courses) */
.q-crs__pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}
.q-crs__pills label{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;border:1px solid #E2E8F0;background:#fff;font-size:15px;font-weight:600;color:#334155;cursor:pointer}
.q-crs:has(#cf-all:checked) label[for=cf-all],.q-crs:has(#cf-basics:checked) label[for=cf-basics],.q-crs:has(#cf-algo:checked) label[for=cf-algo],.q-crs:has(#cf-ai:checked) label[for=cf-ai]{background:#062985;border-color:#062985;color:#fff;box-shadow:0 10px 24px rgba(6,41,133,0.25)}
.q-crs:has(#cf-basics:checked) .q-cc--cr:not([data-cat=basics]),.q-crs:has(#cf-algo:checked) .q-cc--cr:not([data-cat=algo]),.q-crs:has(#cf-ai:checked) .q-cc--cr:not([data-cat=ai]){display:none}
.q-crs:has(input[name=cf]:focus-visible) label{outline-offset:3px}

/* banner: «ادرس الدبلومة على أجزاء» (home) and full-diploma banner (diploma+courses page) */
.q-crs__tip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;margin-bottom:24px;border:1px solid #C7D7FE;border-radius:12px;background:#EFF4FF}
.q-crs__tip > div{display:flex;align-items:center;gap:14px}
.q-crs__tip .q-crs__ic{flex:none;width:44px;height:44px;border-radius:10px;background:#2440DC;color:#fff;display:flex;align-items:center;justify-content:center}
.q-crs__tip b{display:block;font-size:16px;color:#0F172A}
.q-crs__tip > div > div > span{font-size:14px;color:#475569}
.q-crs__tip .q-crs__ic .cs-icon{font-size:24px;color:#fff}
.q-crs__full{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 32px;border-radius:12px;background:#062985;color:#fff;position:relative;overflow:clip}
.q-crs__full::before{content:"";position:absolute;width:240px;height:240px;border-radius:24px;background:#2440DC;top:-120px;inset-inline-start:-60px;rotate:18deg;opacity:.7}
.q-crs__full > *{position:relative}
.q-crs__full .q-tag{background:rgba(255,255,255,.14);color:#fff;border:0}
.q-crs__full h3{margin:8px 0 6px;font-size:22px;color:#fff}
.q-crs__full p{margin:0;font-size:14px;color:#C7D2FE}
.q-crs__full .q-crs__btns{display:flex;gap:10px;flex-wrap:wrap}

/* home catalog: courses tab */
.q-cat:has(#ct-cr:checked) label[for=ct-cr]{background:#062985;border-color:#062985;color:#fff;box-shadow:0 10px 24px rgba(6,41,133,0.25)}
.q-cat:has(#ct-cr:checked) label[for=ct-cr] .cs-icon{color:#fff}
.q-cat:has(#ct-cr:focus-visible) label[for=ct-cr]{outline:2px solid #2440DC;outline-offset:3px}
.q-cat .q-crs--home{display:none}
.q-cat:has(#ct-cr:checked) .q-crs--home{display:block}
.q-cat:has(#ct-cr:checked) .q-cat__g:not(.q-crs__g){display:none}
.q-cc__inst{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#062985}
.q-cc__inst .cs-icon{font-size:17px;color:#2440DC}

@media (max-width:1024px){.q-crs__g,.q-crs__seq{grid-template-columns:repeat(2,minmax(0,1fr))}.q-crs__seq > .q-cc--cr::after{display:none}}
@media (max-width:640px){.q-crs__g,.q-crs__seq{grid-template-columns:minmax(0,1fr)}.q-crs__full{padding:22px}.q-crs__tip{padding:16px}}

html[data-theme="dark"] .q-cc.q-cc--cr{background:#111827 !important;border-color:rgba(148,163,184,.18) !important;color:#e2e8f0}
html[data-theme="dark"] .q-cc--cr .q-cc__m,html[data-theme="dark"] .q-cc--cr .q-cc__art{background:#1f2937 !important;border-color:rgba(148,163,184,.18) !important}
html[data-theme="dark"] .q-cc--cr h3,html[data-theme="dark"] .q-crs__tip b{color:#e2e8f0 !important}
html[data-theme="dark"] .q-cc--cr p,html[data-theme="dark"] .q-cc--cr .q-cc__meta,html[data-theme="dark"] .q-crs__tip > div > div > span{color:#94a3b8 !important}
html[data-theme="dark"] .q-cr__price b,html[data-theme="dark"] .q-cr__inst,html[data-theme="dark"] .q-cc__inst{color:#c7d2fe !important}
html[data-theme="dark"] .q-crs__tip{background:#0f1a36 !important;border-color:rgba(148,163,184,.25) !important}
html[data-theme="dark"] .q-crs__pills label{background:#111827;border-color:rgba(148,163,184,.25);color:#e2e8f0}
.q-crs__seq > .q-cc.q-cc--cr{overflow:visible}
.q-crs__seq > .q-cc--cr .q-cc__m{border-radius:8px 8px 0 0}
/* course landing page: course price vs full diploma, prev/next course */
.q-crs__pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin-inline:auto}
.q-crs__pay .q-cc--cr{border-width:1.5px}
.q-crs__pay .q-cr__price b{font-size:26px}
.q-crs__nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:900px;margin:28px auto 0}
@media (max-width:640px){.q-crs__pay{grid-template-columns:minmax(0,1fr)}}
.q-cr__plan{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.q-cr__plan .cs-icon{font-size:20px;color:#2440DC}
/* home courses tab: one group per diploma */
.q-crs--home .q-crs__grp{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.q-crs--home .q-crs__g + .q-crs__grp{margin-top:40px}
.q-crs__grp h3{margin:0;font-size:20px;font-weight:700;color:#0F172A}
.q-crs__grp .q-a{font-size:14px}
html[data-theme="dark"] .q-crs__grp h3{color:#e2e8f0}
/* course cards in grids (home, /courses, diploma+courses pages): same size everywhere */
.q-crs__g,.q-crs__seq{gap:24px}
@media (min-width:1181px){.q-crs__g,.q-crs__seq{grid-template-columns:repeat(4,minmax(0,1fr))}}
.q-crs__g > .q-cc--cr .q-cc__b,.q-crs__seq > .q-cc--cr .q-cc__b{padding:18px 18px 20px}
.q-crs__g > .q-cc--cr h3,.q-crs__seq > .q-cc--cr h3{font-size:18px;line-height:1.45;min-height:2.9em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.q-crs__g > .q-cc--cr p,.q-crs__seq > .q-cc--cr p{font-size:14px;line-height:1.8;min-height:5.4em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.q-crs__g .q-cr__price > div:nth-child(2),.q-crs__seq .q-cr__price > div:nth-child(2){flex-direction:column;align-items:flex-start;gap:2px}
/* whole card opens the course page; buttons and price links stay clickable above it */
.q-cc--cr{position:relative;cursor:pointer}
.q-cc__link{color:inherit;text-decoration:none}
.q-cc__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.q-cc--cr .q-cr__price a,.q-cc--cr .q-cr__cta a,.q-cc--cr .q-cr__row a{position:relative;z-index:2}
.q-cc--cr:has(.q-cc__link:focus-visible){outline:2px solid #2440DC;outline-offset:3px}
.q-cc__link:focus-visible{outline:none}
.q-cc--cr:hover h3{color:#2440DC}
html[data-theme="dark"] .q-cc--cr:hover h3{color:#a5b4fc !important}
.q-cr__ph{visibility:hidden}
.q-crs__g .q-cr__price > div:nth-child(2) .q-cr__inst,.q-crs__seq .q-cr__price > div:nth-child(2) .q-cr__inst{font-size:13px;line-height:1.6;min-height:3.2em}
a.q-cr__inst{text-decoration:underline;text-decoration-color:rgba(36,64,220,.35);text-underline-offset:3px}