/* ── S4K Course Finder v1.1 ──────────────────────────────────────────────── */
.s4kcf { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Filter bar */
.s4kcf-fbar       { display:flex; justify-content:center; margin-bottom:20px; }
.s4kcf-fbar-inner { display:flex; align-items:center; background:#f2f2f2; border-radius:50px; padding:5px 8px; border:1px solid #e0e0e0; flex-wrap:wrap; gap:4px; }
.s4kcf-sel        { border:none; background:transparent; font-size:14px; font-weight:500; color:#333; padding:10px 22px; border-radius:40px; cursor:pointer; outline:none; -webkit-appearance:none; appearance:none; min-width:130px; }
.s4kcf-sel:focus,
.s4kcf-sel:hover  { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.1); }
.s4kcf-fdiv       { width:1px; height:26px; background:#d0d0d0; flex-shrink:0; }

/* Count */
.s4kcf-count { text-align:center; color:#888; font-size:14px; font-weight:600; margin:0 0 20px; }

/* Carousel shell */
.s4kcf-carousel { position:relative; padding:0 36px; }
.s4kcf-overflow  { overflow:hidden; }
.s4kcf-track     { display:flex; gap:20px; transition:transform .4s cubic-bezier(.4,0,.2,1); }

/* Arrow buttons */
.s4kcf-arrow       { position:absolute; top:38%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:2px solid #ddd; background:#fff; cursor:pointer; font-size:26px; display:flex; align-items:center; justify-content:center; z-index:10; box-shadow:0 2px 12px rgba(0,0,0,.12); transition:all .2s; line-height:1; padding:0; }
.s4kcf-arrow:hover { border-color:#0066cc; color:#0066cc; box-shadow:0 4px 20px rgba(0,102,204,.2); }
.s4kcf-prev        { left:0; }
.s4kcf-next        { right:0; }
.s4kcf-arrow:disabled { opacity:.25; cursor:default; pointer-events:none; }

/* Cards */
.s4kcf-card       { border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; flex:0 0 calc(20% - 16px); min-width:0; }
.s4kcf-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.13); }
.s4kcf-card.s4kcf-hidden { display:none !important; }

.s4kcf-card-top   { position:relative; min-height:160px; overflow:hidden; }
.s4kcf-card-img   { width:100%; height:160px; object-fit:cover; display:block; }
.s4kcf-card-emoji { height:160px; display:flex; align-items:center; justify-content:center; font-size:56px; }

.s4kcf-card-body  { padding:14px 16px 18px; flex:1; display:flex; flex-direction:column; gap:10px; }
.s4kcf-card-title { font-size:15px; font-weight:800; color:#1a1a2e; line-height:1.25; flex:1; margin:0; }

.s4kcf-badges { display:flex; gap:6px; flex-wrap:wrap; }
.s4kcf-badge  { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:#f0f4ff; color:#0066cc; }

.s4kcf-btn-info       { width:100%; padding:10px; border:1.5px solid #e0e0e0; background:#fff; border-radius:10px; font-size:13px; font-weight:700; color:#0066cc; cursor:pointer; transition:background .15s, border-color .15s; margin-top:auto; }
.s4kcf-btn-info:hover { background:#f0f4ff; border-color:#0066cc; }

/* No results */
.s4kcf-nores             { display:none; text-align:center; padding:48px 20px; color:#aaa; font-size:16px; }
.s4kcf-nores.s4kcf-show  { display:block; }
.s4kcf-nores button      { background:none; border:none; color:#0066cc; cursor:pointer; font-size:15px; font-weight:700; }

/* ── Course Info Modal ───────────────────────────────────────────────────── */
.s4kcf-ov             { display:none; position:fixed; inset:0; background:rgba(0,0,0,.58); z-index:99990; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; }
.s4kcf-ov.s4kcf-open  { display:flex; }

.s4kcf-modal { background:#fff; border-radius:20px; width:100%; max-width:820px; box-shadow:0 32px 80px rgba(0,0,0,.28); margin:auto; position:relative; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow:hidden; }

.s4kcf-mhdr    { display:flex; align-items:center; padding:18px 24px 14px; border-bottom:1px solid #f0f0f0; }
.s4kcf-mhdr h2 { margin:0; font-size:18px; font-weight:800; color:#1a1a2e; flex:1; }
.s4kcf-mx      { background:none; border:none; font-size:22px; cursor:pointer; color:#aaa; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
.s4kcf-mx:hover { background:#f5f5f5; color:#333; }

.s4kcf-ci-meta      { display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; padding:14px 24px; background:#f8f9ff; border-bottom:1px solid #f0f0f0; }
.s4kcf-ci-mi        { display:flex; align-items:baseline; gap:8px; font-size:13px; }
.s4kcf-ci-mi strong { font-size:11px; font-weight:800; color:#888; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
.s4kcf-ci-mi span   { color:#1a1a2e; font-weight:500; }

.s4kcf-ci-body    { display:grid; grid-template-columns:1fr 1fr; }
.s4kcf-ci-img-col { background:#f0f0f0; min-height:300px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.s4kcf-ci-ph      { font-size:90px; opacity:.3; }

.s4kcf-ci-info-col     { padding:22px 26px; overflow-y:auto; max-height:420px; }
.s4kcf-ci-info-col h3  { font-size:17px; font-weight:800; color:#1a1a2e; margin:0 0 3px; }
.s4kcf-ci-type         { font-size:11px; font-weight:700; color:#0066cc; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.s4kcf-ci-desc-lbl     { font-size:11px; font-weight:800; color:#1a1a2e; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.s4kcf-ci-desc         { font-size:13px; color:#555; line-height:1.7; margin-bottom:16px; }
.s4kcf-ci-sec          { font-size:11px; font-weight:800; color:#1a1a2e; text-transform:uppercase; letter-spacing:.5px; margin:14px 0 7px; }

.s4kcf-ci-list            { list-style:none; padding:0; margin:0 0 14px; }
.s4kcf-ci-list li         { font-size:13px; color:#555; padding:3px 0 3px 16px; position:relative; line-height:1.5; }
.s4kcf-ci-list li::before      { content:'•'; position:absolute; left:0; color:#0066cc; font-weight:900; }
.s4kcf-ci-list-pink li::before { color:#e84393; }

.s4kcf-ci-footer    { padding:14px 24px; border-top:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.s4kcf-ci-close-btn { background:#f2f2f2; border:none; color:#555; font-size:14px; font-weight:600; cursor:pointer; padding:10px 24px; border-radius:10px; transition:background .15s; }
.s4kcf-ci-close-btn:hover { background:#e8e8e8; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
    .s4kcf-ci-body    { grid-template-columns:1fr; }
    .s4kcf-ci-img-col { min-height:200px; }
    .s4kcf-ci-meta    { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .s4kcf-fdiv       { display:none; }
    .s4kcf-fbar-inner { flex-direction:column; border-radius:16px; padding:10px; }
    .s4kcf-sel        { width:100%; }
    .s4kcf-carousel   { padding:0 28px; }
}