.jforma-list-root { border:1px solid #e5e5e5; padding:12px; background:#fff; } .jforma-list-filters { margin-bottom:12px; }
.jfl-row {
display: grid;
grid-template-columns: 2fr 1fr; gap: 16px;
align-items: end;
} .jfl-keywords .jfl-label { font-weight:600; font-size:14px; color:#333; }
.jfl-input-wrap { position: relative; display:block; }
.jfl-input-wrap .jfl-input {
width:100%;
padding:8px 36px 8px 10px; border:1px solid #cfcfcf; border-radius:4px; font-size:14px;
box-sizing:border-box; line-height:1.3;
}
.jfl-input-wrap .jfl-clear {
position:absolute; right:8px; top:50%; transform:translateY(-50%);
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
line-height:1; text-align:center;
border:1px solid #cfcfcf; border-radius:50%;
background:#fff; color:#666; cursor:pointer;
font-size:14px; padding:0;
opacity:0; pointer-events:none; transition:opacity .15s ease, background .15s ease;
}
.jfl-input-wrap .jfl-clear.is-visible { opacity:1; pointer-events:auto; }
.jfl-input-wrap .jfl-clear:hover { background:#f2f2f2; }
.jfl-input-wrap .jfl-clear:focus { outline:none; box-shadow:0 0 0 3px rgba(34,113,177,.25); } .jfl-order .jfl-label { font-weight:600; font-size:14px; color:#333; margin-bottom:6px; }
.jfl-order-inline { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.jfl-radio { display:inline-flex; align-items:center; gap:6px; font-size:14px; } .jfl-tags .jfl-label { font-weight:600; font-size:14px; color:#333; margin-bottom:6px; }
.jfl-tags .jfl-tags-wrap { display:flex; flex-wrap:wrap; gap:8px 10px; }
.jfl-tag {
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px;
border:1px solid #ddd;
background:#f4f6f8;
color:#333;
border-radius:9999px;
cursor:pointer;
font-size:13px;
line-height:1.1;
user-select:none;
transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.jfl-tag:hover { background:#e9edf1; }
.jfl-tag:focus { outline:none; box-shadow:0 0 0 3px rgba(34,113,177,.25); }
.jfl-tag.is-selected,
.jfl-tag[aria-pressed="true"] {
background:#2271b1;
color:#fff;
border-color:#2271b1;
} .jfl-legend {
display:flex;
justify-content:flex-end;
flex-wrap:nowrap;
gap:10px;
margin:6px 0 14px;
font-size:13px;
}
.jfl-legend-item {
display:inline-flex;
align-items:center;
padding:4px 10px;
border:1px solid #e2e2e2;
border-radius:6px;
white-space:nowrap;
}
.jfl-legend-text { font-weight:600; color:#333; } .jfl-lesson-filter {
border:none;
margin:0 0 14px;
padding:0;
}
.jfl-lesson-filter-wrap {
display:flex;
justify-content:flex-end;
flex-wrap:wrap;
gap:8px;
}
.jfl-lesson-btn {
display:inline-flex;
align-items:center;
padding:6px 14px;
border:2px solid #e2e2e2;
border-radius:6px;
background:#f9f9f9;
cursor:pointer;
font-size:13px;
font-weight:600;
color:#555;
transition:all .15s ease;
white-space:nowrap;
}
.jfl-lesson-btn:hover {
border-color:#999;
background:#f0f0f0;
}
.jfl-lesson-btn:focus {
outline:none;
box-shadow:0 0 0 3px rgba(34,113,177,.25);
}
.jfl-lesson-btn.is-active,
.jfl-lesson-btn[aria-pressed="true"] {
border-color:#2271b1;
box-shadow:0 0 0 2px rgba(34,113,177,.2);
}
.jfl-lesson-btn.is-active .jfl-lesson-btn-text,
.jfl-lesson-btn[aria-pressed="true"] .jfl-lesson-btn-text {
color:#2271b1;
} .jfl-lesson-btn.lesson-type-class { background:#fff7ed; border-color:#f7d9ba; }
.jfl-lesson-btn.lesson-type-class.is-active { border-color:#d97706; box-shadow:0 0 0 2px rgba(217,119,6,.2); }
.jfl-lesson-btn.lesson-type-online { background:#e8fbff; border-color:#bfe4ef; }
.jfl-lesson-btn.lesson-type-online.is-active { border-color:#0891b2; box-shadow:0 0 0 2px rgba(8,145,178,.2); }
.jfl-lesson-btn.lesson-type-remote { background:#eef5ff; border-color:#cfdcf7; }
.jfl-lesson-btn.lesson-type-remote.is-active { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.2); }
.jfl-lesson-btn.lesson-type-blended { background:#f6f2ff; border-color:#dcd3ff; }
.jfl-lesson-btn.lesson-type-blended.is-active { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.2); }
.jfl-lesson-btn.lesson-type-e-learning { background:#f0fdf4; border-color:#bbf7d0; }
.jfl-lesson-btn.lesson-type-e-learning.is-active { border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.2); }
.jfl-lesson-btn.lesson-type-webinar { background:#fefce8; border-color:#fef08a; }
.jfl-lesson-btn.lesson-type-webinar.is-active { border-color:#ca8a04; box-shadow:0 0 0 2px rgba(202,138,4,.2); }
.jfl-lesson-btn.lesson-type-on-agency { background:#fff1f8; border-color:#f5d3e3; }
.jfl-lesson-btn.lesson-type-on-agency.is-active { border-color:#db2777; box-shadow:0 0 0 2px rgba(219,39,119,.2); }
.jfl-lesson-btn.lesson-type-at-home { background:#f1fbf3; border-color:#cfead5; }
.jfl-lesson-btn.lesson-type-at-home.is-active { border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.2); } .jforma-list-results { margin-top:10px; }
.jforma-list {
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:1fr;
gap:16px;
align-items:stretch;
grid-auto-rows:minmax(220px, auto);
}
.jforma-list:empty::after {
content: attr(data-empty);
display:block; padding:10px; color:#666; font-style:italic; border:1px dashed #ddd;
} .jfl-empty-message {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: #555;
font-size: 16px;
font-style: italic;
border: 1px dashed #ccc;
background: #fafafa;
border-radius: 6px;
} .jfl-item {
border:1px solid #e8e8e8;
padding:12px;
background:#fff;
height:100%;
min-height:220px;
}
.jfl-item-main {
display:grid;
grid-template-rows:auto 1fr auto;
row-gap:8px;
width:100%;
height:100%;
} .jfl-meta {
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin-bottom:0; font-size:13px; color:#444;
}
.jfl-meta .meta-left, .jfl-meta .meta-right { display:flex; align-items:center; gap:6px; }
.jfl-item-body {
display:grid;
grid-template-columns: 33.3333% 1fr; gap:12px;
align-items:stretch;
min-height:0;
}
.jfl-item-body.no-image { grid-template-columns:1fr; }
.jfl-media {
width:100%;
height:100%;
display:flex;
align-items:flex-start;
justify-content:center;
}
.jfl-media img {
width:100%;
height:100%;
object-fit:contain; border-radius:4px;
display:block;
}
.jfl-content {
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
} .jfl-name {
font-weight:700; font-size:16px; line-height:1.35; margin:0 0 6px 0;
}
.jfl-name a { color:inherit; text-decoration:none; }
.jfl-name a:hover, .jfl-name a:focus { text-decoration:underline; }
.jfl-subtitle {
font-size:14px; color:#555; line-height:1.35; margin:0;
} .jfl-price-row {
margin-top:0; background:#f2f2f2; border-radius:4px;
border:1px solid rgba(34,34,34,0.15);
padding:8px 12px; display:flex; align-items:center; gap:12px;
justify-content:space-between;
width:100%;
font-weight:600; color:#222; font-size:14px;
min-height:44px; line-height:1.2;
}
.jfl-price-row .jfl-amount,
.jfl-price-row .jfl-countdown { display:flex; align-items:center; gap:6px; line-height:1.2; }
.jfl-price-row .jfl-amount { justify-content:flex-start; }
.jfl-price-row .jfl-countdown {
margin-left:auto;
justify-content:flex-end;
text-align:right;
} .jfl-pagination {
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
justify-content:space-between;
}
.jfl-pagination.is-hidden { display:none; }
.jfl-pagination-info { font-size:13px; color:#555; }
.jfl-pagination-controls {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.jfl-page-btn,
.jfl-page-number {
border:1px solid #d0d0d0;
background:#fff;
color:#333;
padding:6px 10px;
border-radius:4px;
cursor:pointer;
font-size:13px;
line-height:1.1;
}
.jfl-page-btn:hover,
.jfl-page-number:hover { background:#f3f3f3; }
.jfl-page-btn:disabled {
opacity:0.5;
cursor:default;
}
.jfl-page-numbers { display:flex; gap:6px; align-items:center; }
.jfl-page-number[aria-current="page"] {
border-color:#2271b1;
background:#2271b1;
color:#fff;
}
.jfl-page-ellipsis { color:#777; padding:0 4px; }
.jfl-page-size { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#444; }
.jfl-page-size-select {
border:1px solid #d0d0d0;
border-radius:4px;
padding:6px 8px;
font-size:13px;
background:#fff;
} .jfl-sr-only {
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
} @media (max-width: 767px) {
.jfl-row { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
.jforma-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.jforma-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .jfl-item.lesson-type-class,
.jfl-legend-item.lesson-type-class { background:#fff7ed; border-color:#f7d9ba; }
.jfl-item.lesson-type-remote,
.jfl-legend-item.lesson-type-remote { background:#eef5ff; border-color:#cfdcf7; }
.jfl-item.lesson-type-online,
.jfl-legend-item.lesson-type-online { background:#e8fbff; border-color:#bfe4ef; }
.jfl-item.lesson-type-blended,
.jfl-legend-item.lesson-type-blended { background:#f6f2ff; border-color:#dcd3ff; }
.jfl-item.lesson-type-on-agency,
.jfl-legend-item.lesson-type-on-agency { background:#fff1f8; border-color:#f5d3e3; }
.jfl-item.lesson-type-at-home,
.jfl-legend-item.lesson-type-at-home { background:#f1fbf3; border-color:#cfead5; }