.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; } .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-item {
border:1px solid #e8e8e8;
padding:12px;
background:#fff;
height:100%;
display:flex;
flex-direction:column;
min-height:220px;
}
.jfl-item-main {
display:flex;
flex-direction:column;
width:100%;
flex:1 1 auto;
} .jfl-meta {
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin-bottom:8px; font-size:13px; color:#444;
}
.jfl-meta .meta-left, .jfl-meta .meta-right { display:flex; align-items:center; gap:6px; } .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:auto; 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-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; }