/* V20.9.62 — ONE canonical Droocy course card. Reference-matched, responsive. */
.course-card{--accent:#6d35f2;position:relative!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#fff!important;border:2px solid rgba(109,53,242,.40)!important;border-radius:18px!important;box-shadow:0 0 0 1px rgba(109,53,242,.08),0 0 18px rgba(109,53,242,.16),0 12px 28px rgba(24,35,70,.10)!important;transition:.22s ease!important;color:#101828!important}
.course-card:hover{transform:translateY(-4px)!important;border-color:#7b42ff!important;box-shadow:0 0 0 2px rgba(123,66,255,.10),0 0 28px rgba(109,53,242,.25),0 20px 40px rgba(24,35,70,.14)!important}
.course-card.subject-math{--accent:#6847e8}.course-card.subject-physics{--accent:#6847e8}.course-card.subject-chemistry{--accent:#6847e8}.course-card.subject-biology,.course-card.subject-science{--accent:#6847e8}.course-card.subject-arabic,.course-card.subject-english,.course-card.subject-history,.course-card.subject-studies,.course-card.subject-psychology{--accent:#6847e8}
.course-card .course-media{position:relative!important;width:100%!important;aspect-ratio:16/10!important;min-height:0!important;background:linear-gradient(135deg,#132a66,#6138ed)!important;overflow:hidden!important;border:0!important;border-radius:0!important}
.course-card .course-media img,.course-card .course-media video,.course-card .course-media iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;display:block!important}
.course-card .course-media-fallback{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;background:radial-gradient(circle at 70% 30%,rgba(130,92,255,.9),transparent 30%),linear-gradient(135deg,#0c2c68,#142d67 50%,#4f2bd8)!important;color:#fff!important}.course-card .course-media-fallback span{font-size:48px!important}.course-card .course-media-fallback b{font-size:20px!important}
.course-card .course-info-head{padding:11px 14px 8px!important;background:#fff!important;text-align:right!important;direction:rtl!important;border:0!important}
.course-card .subject-name{display:block!important;margin:0 0 4px!important;color:#6b35ed!important;font-size:12px!important;font-weight:900!important;background:none!important;padding:0!important}
.course-card .course-title-row{display:block!important}.course-card .course-title{margin:0!important;color:#111936!important;font-size:18px!important;line-height:1.42!important;font-weight:950!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.course-card .course-lower-badges{display:flex!important;gap:5px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:8px!important}.course-card .grade-badge,.course-card .access-badge,.course-card .discount-badge{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:25px!important;padding:3px 8px!important;border-radius:7px!important;font-size:8.5px!important;font-weight:900!important;box-shadow:none!important;margin:0!important}.course-card .grade-badge{color:#6735e9!important;background:#f1edff!important;border:1px solid #ded4ff!important}.course-card .access-badge{color:#a85c00!important;background:#fff5e7!important;border:1px solid #ffe0b3!important}.course-card .access-badge.free{color:#008a52!important;background:#e9fff4!important;border-color:#b9efd4!important}.course-card .discount-badge{color:#e22424!important;background:#fff0f0!important;border:1px solid #ffcaca!important}
.course-card .course-desc{margin:7px 0 0!important;color:#647091!important;font-size:10px!important;line-height:1.65!important;min-height:32px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.course-card .course-body{padding:0 12px 12px!important;background:#fff!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.course-card .stats-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;padding:0!important;background:#f7fbff!important;border:1px solid #d8e8f4!important;border-radius:10px!important;overflow:hidden!important}.course-card .stat-box{min-height:58px!important;padding:7px 4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;border-inline-start:1px solid #d8e8f4!important;background:linear-gradient(180deg,#f7fcff,#eef9fd)!important}.course-card .stat-box:last-child{border-inline-start:0!important}.course-card .stat-box small{font-size:7.5px!important;color:#0782b5!important;font-weight:900!important;background:none!important;padding:0!important}.course-card .stat-box strong{margin-top:4px!important;font-size:8.5px!important;line-height:1.3!important;color:#111936!important;font-weight:950!important}
.course-card .teacher-price{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(100px,.72fr)!important;align-items:center!important;gap:8px!important;min-height:78px!important;padding:0!important;background:#fff!important;border:0!important;border-radius:0!important;direction:rtl!important}.course-card .teacher{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}.course-card .teacher-avatar{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:12px!important;overflow:hidden!important;position:relative!important;background:#f1efff!important;border:1px solid #e5e1f5!important}.course-card .teacher-avatar img,.course-card .teacher-avatar-fallback{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;display:grid!important;place-items:center!important}.course-card .teacher-avatar img{z-index:2!important}.course-card .teacher strong{display:block!important;color:#121a38!important;font-size:10.5px!important;font-weight:950!important}.course-card .teacher small{display:block!important;color:#737e99!important;font-size:8px!important;margin-top:2px!important}
.course-card .price{text-align:left!important;direction:ltr!important;background:none!important;border:0!important;padding:0!important;margin:0!important}.course-card .price-main{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important}.course-card .price-main strong{color:#7138ef!important;font-size:20px!important;font-weight:950!important;white-space:nowrap!important}.course-card .old{order:-1!important;color:#747d94!important;font-size:9px!important;text-decoration:line-through!important;text-decoration-color:#e63a3a!important}.course-card .saving{display:inline-flex!important;margin-top:5px!important;padding:4px 7px!important;border-radius:6px!important;background:#e9fff2!important;color:#07975a!important;border:1px solid #c7f3d9!important;font-size:8px!important;font-weight:900!important}
.course-card .actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(82px,.55fr)!important;gap:8px!important;margin-top:auto!important}.course-card .add-cart-form{margin:0!important;width:100%!important}.course-card .add,.course-card .start,.course-card .view{width:100%!important;min-height:42px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:10.5px!important;font-weight:950!important;text-decoration:none!important;transition:.18s ease!important}.course-card .add,.course-card .start{border:0!important;background:linear-gradient(135deg,#7a37f3,#5d20df)!important;color:#fff!important;box-shadow:0 7px 15px rgba(104,54,232,.22)!important}.course-card .view{background:#fff!important;color:#6d35ed!important;border:1.5px solid #8d59f5!important}.course-card .add:hover,.course-card .start:hover,.course-card .view:hover{transform:translateY(-1px)!important}
/* Keep all text on blue/purple surfaces white. */
.course-card .add,.course-card .start,.course-card .add *,.course-card .start *{color:#fff!important}
@media(max-width:700px){.course-card{border-radius:15px!important}.course-card .course-media{aspect-ratio:16/9!important}.course-card .course-info-head{padding:10px 10px 7px!important}.course-card .course-title{font-size:15px!important}.course-card .course-desc{font-size:8.7px!important;min-height:28px!important}.course-card .course-body{padding:0 9px 10px!important;gap:8px!important}.course-card .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.course-card .stat-box{min-height:55px!important;padding:5px 2px!important}.course-card .stat-box small{font-size:6.6px!important}.course-card .stat-box strong{font-size:7.2px!important}.course-card .teacher-price{grid-template-columns:minmax(0,1fr) 82px!important;min-height:68px!important}.course-card .teacher-avatar{width:48px!important;height:48px!important;flex-basis:48px!important}.course-card .teacher strong{font-size:9px!important}.course-card .teacher small{font-size:7px!important}.course-card .price-main strong{font-size:16px!important}.course-card .actions{grid-template-columns:minmax(0,1fr) 82px!important}.course-card .add,.course-card .start,.course-card .view{min-height:39px!important;font-size:9.5px!important}}


.course-grid>.course-card{min-width:0;height:100%}.course-card .teacher-avatar img{object-fit:contain}.course-card .course-title{overflow-wrap:anywhere}.course-card .course-desc{overflow-wrap:anywhere}

/* Student cards use the same marketplace card, with enrollment data in place of checkout. */
.course-card .enrolled-details{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#374151;font-size:11px;font-weight:800}.course-card .enrolled-access{padding:5px 9px;border-radius:8px;color:#087a55;background:#ecfdf5}.course-card .enrolled-units{display:flex;flex-wrap:wrap;gap:5px}.course-card .enrolled-units span{padding:4px 7px;border-radius:7px;background:#f2efff;color:#6048d2;font-size:9px}.course-card .enrolled-progress{height:7px;border-radius:10px;background:#edf0f4;overflow:hidden}.course-card .enrolled-progress span{display:block;height:100%;background:#6847e8}.course-card .actions:has(>.start){grid-template-columns:1fr!important}