.browse-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 28px;
align-items: start;
}
.browse-picker-card {
position: sticky;
top: 100px;
background: var(--surface-card);
border: 1px solid var(--surface-sunken);
border-radius: 16px;
padding: 20px;
box-shadow: var(--shadow-card);
}
.browse-picker-title {
color: var(--text-heading);
font-size: 1.05rem;
margin: 0 0 16px;
}
.picker-field { margin-bottom: 14px; }
.picker-field:last-child { margin-bottom: 0; }
.picker-field label {
display: block;
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 6px;
}
.picker-field select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 0.9rem;
color: var(--text-body);
background: var(--surface-card);
cursor: pointer;
}
.picker-field select:focus { outline: none; border-color: var(--brand); }
.picker-field select:disabled {
background: var(--surface-sunken);
color: var(--text-muted);
cursor: not-allowed;
}
/* Two-thumb rating/price sliders (Browse.aspx.cs's AppendDualRangeSlider, Scripts/browse.js's
initDualRange) - two overlapping native sharing one visual track. Both
inputs sit full-width and transparent; only their thumbs are interactive (pointer-events split
below), so a click anywhere on the track always reaches whichever thumb is actually closest. */
/* The page runs RTL (Home.Master's ), so this widget is left to inherit it - the
browser natively mirrors under RTL (min renders at the right, max at the
left), which is the intended reading direction here (right = min, left = max). Scripts/browse.js's
initDualRange positions the fill bar with matching RTL-aware math (see its render() comment) so
the fill never detaches from the mirrored thumbs while dragging. */
.dual-range {
position: relative;
height: 28px;
margin: 4px 2px 0;
}
.dual-range-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
transform: translateY(-50%);
background: var(--surface-sunken);
border-radius: 4px;
}
.dual-range-fill {
position: absolute;
top: 0;
height: 100%;
background: var(--brand);
border-radius: 4px;
/* Glides to its new position/width on every drag tick instead of snapping. */
transition: left 0.08s linear, width 0.08s linear;
}
.dual-range-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 28px;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
}
.dual-range-input:focus { outline: none; }
.dual-range-input::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: transparent;
}
.dual-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 16px;
height: 16px;
margin-top: 6px;
border-radius: 50%;
background: var(--surface-inverse);
border: 2px solid var(--brand);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dual-range-input::-moz-range-track {
background: transparent;
border: none;
height: 4px;
}
.dual-range-input::-moz-range-thumb {
pointer-events: auto;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--surface-inverse);
border: 2px solid var(--brand);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dual-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 600;
margin-top: 4px;
/* Left as natural RTL (inherited) - MinLabel is first in the DOM, so the RTL flex row
already puts it on the right, matching the min thumb (also right, see .dual-range above). */
}
.picker-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
.btn-apply-filters {
width: 100%;
background: var(--brand);
color: var(--text-on-brand);
font-weight: 700;
font-size: 0.9rem;
border: none;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s;
}
.btn-apply-filters:hover:not(:disabled) { background: var(--brand-hover); }
.btn-apply-filters:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-reset-filters {
width: 100%;
background: none;
border: none;
color: var(--text-muted);
font-size: 0.85rem;
cursor: pointer;
padding: 4px;
}
.btn-reset-filters:hover { color: var(--brand-ink); }
.browse-crumbs {
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: 4px;
}
.cat-header {
text-align: center;
margin-bottom: 36px;
}
.cat-header h2 {
color: var(--text-heading);
font-size: 1.8rem;
margin-bottom: 6px;
}
.cat-header .cat-subtitle {
color: var(--text-muted);
font-size: 1rem;
}
.instructor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
}
.instructor-card {
background: var(--surface-card);
border: 1px solid var(--surface-sunken);
border-radius: 16px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
padding: 18px 20px 20px;
}
.instructor-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 28px rgba(12,30,60,0.10);
}
.ic-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.card-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--surface-sunken);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ic-ident { flex: 1; min-width: 0; }
.card-name {
color: var(--text-heading);
font-size: 1.05rem;
margin: 0 0 2px;
}
.ic-rating {
color: var(--brand-ink);
font-size: 0.85rem;
font-weight: 600;
}
.ic-rating i { margin-left: 4px; }
.ic-context {
color: var(--text-muted);
font-size: 0.82rem;
margin: 2px 0 0;
}
.card-bio {
color: var(--text-muted);
font-size: 0.85rem;
line-height: 1.6;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ic-products-wrap {
position: relative;
margin-bottom: 14px;
}
.ic-products {
display: flex;
flex-direction: column;
gap: 10px;
max-height: var(--ic-rail-max, 250px);
overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-type: y proximity;
padding-inline-end: 6px;
}
.ic-products:focus { outline: none; }
.ic-products .product-item { scroll-snap-align: start; }
/* Slim scrollbar so the rail doesn't compete visually with the card content. */
.ic-products {
scrollbar-width: thin;
scrollbar-color: var(--brand-hover) var(--surface-sunken);
}
.ic-products::-webkit-scrollbar { width: 6px; }
.ic-products::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius: 3px; }
.ic-products::-webkit-scrollbar-thumb { background: var(--brand-hover); border-radius: 3px; }
.ic-products::-webkit-scrollbar-thumb:hover { background: var(--brand); }
/* Bottom fade - only shown (via .has-overflow, toggled by browse.js) while there's more to scroll to. */
.ic-products-wrap::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0;
height: 36px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface-card));
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.ic-products-wrap.has-overflow::after { opacity: 1; }
.ic-subject-group + .ic-subject-group { margin-top: 10px; }
.ic-subject-group-title {
color: var(--text-heading);
font-size: 0.85rem;
margin: 0 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--surface-sunken);
position: sticky;
top: 0;
background: var(--surface-card);
z-index: 1;
}
.ic-subject-group .product-item + .product-item { margin-top: 10px; }
.product-item {
background: var(--surface-page);
border: 1px solid var(--surface-sunken);
border-radius: 10px;
padding: 10px 12px;
}
.pi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.pi-name {
color: var(--text-heading);
font-weight: 600;
font-size: 0.9rem;
}
.pi-price {
color: var(--brand-ink);
font-weight: 700;
font-size: 0.9rem;
white-space: nowrap;
}
.pi-desc {
color: var(--text-muted);
font-size: 0.8rem;
line-height: 1.5;
margin: 0 0 8px;
}
.btn-book {
display: inline-block;
background: var(--brand);
color: var(--text-on-brand);
font-weight: 700;
font-size: 0.82rem;
text-decoration: none;
padding: 6px 16px;
border-radius: 8px;
transition: background 0.15s;
}
.btn-book:hover { background: var(--brand-hover); }
.ic-profile-link {
display: block;
text-align: center;
color: var(--text-muted);
font-size: 0.82rem;
text-decoration: none;
padding-top: 10px;
border-top: 1px solid var(--surface-sunken);
}
.ic-profile-link:hover { color: var(--brand-ink); }
/* Paging is the shared .rp-pager* (CSS\styles.css), rendered server-side by
Browse.aspx.cs's RenderPaging since ?page=N has to stay a real deep link on this page. */
.rp-pager { margin-top: 32px; }
a.rp-pager-btn { text-decoration: none; }
@media (max-width: 900px) {
.browse-layout {
grid-template-columns: 1fr;
}
.browse-picker-card {
position: static;
}
.ic-products {
--ic-rail-max: 320px;
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state i {
font-size: 3rem;
color: var(--brand-ink);
margin-bottom: 16px;
display: block;
}
.empty-state p { font-size: 1rem; }
.error-msg {
text-align: center;
color: var(--error);
font-size: 1rem;
padding: 40px;
}