/* One stable popup: list, filters and detail share the real navigation. */
.lc-header { border-bottom:1px solid var(--line); padding:18px 20px 16px; }
.lc-header h2 { font-size:24px; letter-spacing:-.8px; line-height:1.3; margin:5px 0 16px; }
.lc-header .lf-topline { margin-bottom:16px; }
.lc-header .lf-topline > .lc-eyebrow { color:var(--text); font-size:14px; font-weight:600; letter-spacing:-.2px; }
.lc-scroll { padding:16px 20px 22px; }
.lc-panel .ql-offers { grid-auto-rows:auto; gap:12px; }
.lc-panel .ql-card-copy > strong { font-size:15px; line-height:1.4; }
.lc-panel .ql-card-place,.lc-panel .ql-card-date { font-size:11px; }
.lc-panel .ql-card-bottom > small { font-size:11px; }
.lc-panel .ql-card-bottom > b { font-size:18px; }
.lc-instructor-name { color:var(--muted); font-size:11px; }
.lc-detail-photo { display:block; width:100%; height:160px; object-fit:cover; border-radius:16px; margin-bottom:20px; }
.lc-detail-heading > span { font-size:12px; color:var(--accent); }
.lc-detail-heading h3 { font-size:21px; line-height:1.4; letter-spacing:-.7px; margin:8px 0 18px; word-break:keep-all; }
.lc-teacher { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.lc-teacher > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--accent); font-size:13px; }
.lc-teacher strong { display:block; font-size:14px; }
.lc-teacher small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.lc-booking-facts { margin:0; }
.lc-booking-facts > div { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; line-height:1.7; }
.lc-booking-facts dt { flex-shrink:0; color:var(--muted); }
.lc-booking-facts dd { margin:0; text-align:right; word-break:keep-all; }
.lc-booking-total { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0; }
.lc-booking-total > span { font-size:13px; }
.lc-booking-total small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.lc-booking-total strong { font-size:25px; white-space:nowrap; letter-spacing:-1px; }
.lc-booking-info { border-top:1px solid var(--line); }
.lc-booking-info summary { min-height:44px; padding:12px 0; font-size:13px; cursor:pointer; }
.lc-booking-info p { font-size:12px; line-height:1.8; color:var(--muted); margin:0 0 12px; }
.lc-booking-complete { text-align:center; margin:6px 0 24px; }
.lc-booking-complete > span { display:grid; place-items:center; margin:0 auto 14px; width:54px; height:54px; border-radius:50%; color:var(--accent); background:var(--surface); }
.lc-booking-complete h3 { font-size:20px; margin:0 0 8px; }
.lc-booking-complete p { color:var(--muted); font-size:12px; line-height:1.7; }
.lc-after-booking { padding:16px; border-radius:14px; background:var(--surface); margin:6px 0 18px; }
.lc-after-booking strong { font-size:13px; }
.lc-after-booking p { font-size:12px; line-height:1.8; color:var(--muted); margin:7px 0; }
.lc-after-booking small { font-size:11px; color:var(--muted); }
.lc-booking-footer > div { grid-template-columns:84px minmax(0,1fr); }
.lc-note { font-size:12px; color:var(--accent); margin:0 0 16px; line-height:1.6; }
.lc-back { display:flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--text); min-height:40px; padding:0; font-size:13px; }
.lc-back svg { transform:rotate(180deg); width:16px; height:16px; }
.lc-subtitle { font-size:13px; color:var(--muted); line-height:1.7; margin:0 0 18px; }
.lc-search { display:flex; gap:10px; align-items:center; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.lc-search svg { width:18px; height:18px; color:var(--muted); }
.lc-search input { min-width:0; width:100%; border:0; border-radius:0; padding:0; background:transparent; color:var(--text); font:inherit; font-size:16px; }
.lc-regions,.lc-options,.lc-date-choices { display:flex; flex-wrap:wrap; gap:8px; }
.lc-regions { margin:18px 0; }
.lc-regions button,.lc-options button,.lc-date-choices button { min-height:42px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); font-size:12px; }
.lc-panel button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--bg)); }
.lc-field-title,.lc-scroll legend { font-size:14px; font-weight:600; margin:0 0 12px; }
.lc-scroll fieldset { border:0; margin:0 0 24px; padding:0; }
.lc-custom-dates { margin-top:24px; border-top:1px solid var(--line); }
.lc-custom-dates > summary { min-height:48px; padding:14px 0; cursor:pointer; font-size:13px; color:var(--text); }
.lc-custom-dates .date-calendar { box-shadow:none; padding-inline:0; border:0; }
.lc-custom-dates .date-label,.lc-custom-dates .calendar-footer { display:none; }
.lc-profile { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; width:100%; min-height:46px; margin-bottom:22px; padding:12px 14px; color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--bg)); border:1px solid var(--line); border-radius:12px; font-size:13px; }
.lc-profile span { font-size:12px; }
.lc-footer > div { grid-template-columns:minmax(84px,.8fr) minmax(0,1.4fr); }
.lc-footer > .secondary { width:100%; }
.lc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 0; text-align:center; }
.lc-empty > span { color:var(--accent); margin-bottom:12px; }
.lc-empty h3 { font-size:19px; line-height:1.5; letter-spacing:-.5px; margin:0 0 10px; }
.lc-empty p { font-size:12px; color:var(--muted); line-height:1.7; margin:0 0 20px; }
.lc-empty > div { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lc-empty button { min-height:44px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:11px; color:var(--text); font-size:12px; }
@media(min-width:600px) { .lc-header { padding-inline:24px; } .lc-scroll { padding-inline:24px; } }
@media(max-width:359px) { .lc-header { padding-inline:14px; } .lc-scroll { padding-inline:14px; } .lc-header .lf-topline > .lc-eyebrow { font-size:13px; } }
@media(max-height:540px) { .lc-header { padding-top:10px; } .lc-header .lf-topline { margin-bottom:6px; } }


/* Compact single row: sport, location, extra filters, sort. */
.lc-header { position:relative; z-index:2; }
.lc-toolbar { display:grid; grid-template-columns:minmax(48px,.8fr) minmax(0,1.55fr) 48px minmax(64px,1fr); gap:6px; align-items:stretch; }
.lc-toolbar > button,.lc-control { position:relative; display:flex; align-items:center; justify-content:center; gap:4px; box-sizing:border-box; min-width:0; height:44px; margin:0; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); font-size:12px; line-height:18px; letter-spacing:-.1px; }
.lc-toolbar > button > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-toolbar svg { width:10px; height:10px; flex:none; transform:rotate(90deg); fill:none; stroke:currentColor; stroke-width:1.8; }
.lc-control > span { overflow:hidden; text-overflow:ellipsis; min-width:0; white-space:nowrap; }
.lc-dropdown { position:relative; min-width:0; }
.lc-dropdown > .lc-control { width:100%; cursor:pointer; }
.lc-control[aria-expanded="true"] { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.lc-control[aria-expanded="true"] > svg { transform:rotate(-90deg); }
.lc-select-menu { position:absolute; z-index:3; top:calc(100% + 6px); left:0; width:148px; box-sizing:border-box; padding:5px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 10px 28px #0003; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.lc-select-menu[hidden] { display:none; }
.lc-dropdown:last-child .lc-select-menu { left:auto; right:0; width:166px; }
.lc-select-menu > button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:8px; color:var(--text); background:transparent; font:inherit; font-size:13px; line-height:20px; letter-spacing:-.15px; text-align:left; cursor:pointer; }
.lc-select-menu > button > svg { width:15px; height:15px; transform:none; visibility:hidden; }
.lc-select-menu > button[aria-selected="true"] { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); font-weight:600; }
.lc-select-menu > button[aria-selected="true"] > svg { visibility:visible; }
.lc-select-menu > button:focus-visible { outline-offset:-2px; }
@media(hover:hover) { .lc-select-menu > button:hover { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); } }
.lc-toolbar .is-active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.lc-toolbar b { font-size:10px; }
@media(min-width:600px) { .lc-toolbar { grid-template-columns:minmax(60px,.8fr) minmax(0,1.7fr) 64px minmax(76px,1fr); gap:8px; } }
@media(max-width:359px) { .lc-toolbar { grid-template-columns:48px minmax(0,1fr) 44px 64px; gap:5px; } .lc-toolbar > button,.lc-control { padding-inline:5px; font-size:11px; } .lc-control > span { gap:3px; } .lc-place-list > button { gap:8px; padding:12px; } }
@media(max-height:540px) { .lc-header h2 { font-size:18px; margin:0 0 8px; } .lc-header { padding-bottom:10px; } }

/* Region search stays in the header while only locations scroll. */
.lc-panel[data-catalog-view="region"] .lc-regions { margin:0 0 16px; }
.lc-header .lc-search { width:100%; box-sizing:border-box; }

.lc-panel[data-catalog-view="region"] .lc-back { min-height:44px; padding:9px 12px; gap:6px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--accent) 6%,var(--surface)); color:var(--accent); font-size:13px; font-weight:600; }
.lc-panel[data-catalog-view="region"] .lc-back svg { width:14px; height:14px; }

.lc-header .lc-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.lc-header .lc-search input:focus-visible { outline:none; }

/* Region shortcuts and location maps share consistent alignment. */
.lc-panel[data-catalog-view="region"] .lc-regions { display:grid; grid-template-columns:repeat(var(--lc-region-columns),minmax(0,1fr)); gap:6px; margin-bottom:16px; }
.lc-regions > button { min-width:0; min-height:44px; padding:8px 4px; font-size:12px; line-height:20px; border-radius:10px; }
.lc-place-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:10px; }
.lc-place-list > button { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; min-width:0; width:100%; padding:8px; gap:10px; border:1px solid var(--line); border-radius:15px; background:var(--surface); color:var(--text); text-align:left; overflow:hidden; }
.lc-place-list .ll-location { border-radius:9px; }
.lc-place-list .ll-place-label { font-size:12px; line-height:16px; }
.lc-place-summary { display:grid; gap:4px; min-width:0; padding:0 3px 3px; }
.lc-place-summary > small { color:var(--muted); font-size:11px; line-height:16px; white-space:nowrap; }
.lc-place-summary > span { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--text); font-size:11px; line-height:16px; }
.lc-place-summary svg { width:13px; height:13px; }
.lc-place-list > button[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface)); }
.lc-place-list > .lc-subtitle { grid-column:1/-1; padding:20px 0; text-align:center; }
@media(min-width:600px) { .lc-place-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
@media(max-width:359px) { .lc-place-list .ll-place-label { font-size:11px; line-height:15px; } .lc-place-summary { padding-inline:1px; } .lc-place-summary > small { font-size:10px; } }

/* Location browsing shares the stable popup frame with the lesson list. */
.lc-panel[data-catalog-view="region"] .lc-header { padding:12px 16px; }
.lc-panel[data-catalog-view="region"] .lf-topline { display:flex; align-items:center; gap:8px; margin:0; min-width:0; }
.lc-panel[data-catalog-view="region"] .lc-back { flex:none; padding-inline:10px; }
.lc-panel[data-catalog-view="region"] #lf-close { flex:none; width:44px; height:44px; }
.lc-panel[data-catalog-view="region"] .lc-header .lc-search { flex:1; min-width:0; width:auto; min-height:44px; padding:8px 10px; }
.lc-panel[data-catalog-view="region"] .lc-search input { height:24px; line-height:24px; }
.lc-panel[data-catalog-view="region"] .lc-scroll { padding:12px 16px 16px; }
.lc-panel[data-catalog-view="region"] .lc-regions { margin-bottom:8px; }
.lc-area-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; color:var(--muted); font-size:12px; line-height:20px; }
.lc-area-summary b { font-weight:600; color:var(--text); }
.lc-area-summary button { display:flex; align-items:center; gap:5px; flex:none; min-height:44px; padding:8px 0 8px 10px; border:0; background:transparent; color:var(--accent); font-size:12px; line-height:20px; }
.lc-area-summary svg { width:13px; height:13px; }
.lc-panel[data-catalog-view="region"] .lc-place-list { gap:10px; }
.lc-panel[data-catalog-view="region"] .lc-place-list > button { padding:7px; gap:8px; }
.lc-panel[data-catalog-view="region"] .ql-preview-note { margin-top:10px; }
@media(max-width:359px) { .lc-panel[data-catalog-view="region"] .lc-header { padding-inline:14px; } .lc-panel[data-catalog-view="region"] .lc-scroll { padding-inline:14px; } }
@media(max-height:540px) { .lc-panel[data-catalog-view="region"] .lc-header { padding-block:8px; } }

/* Final confirmation: one compact summary, one cost breakdown, persistent total. */
#lesson-flow .lc-panel[data-catalog-view="review"] .lc-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; padding:10px 16px; }
#lesson-flow .lc-panel[data-catalog-view="review"] .lf-topline { display:contents; }
#lesson-flow .lc-panel[data-catalog-view="review"] .lc-back { grid-column:1; grid-row:1; display:grid; place-items:center; width:44px; min-height:44px; padding:0; font-size:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
#lesson-flow .lc-panel[data-catalog-view="review"] #lf-close { grid-column:3; grid-row:1; width:44px; height:44px; }
#lesson-flow .lc-panel[data-catalog-view="review"] .lc-header h2 { grid-column:2; grid-row:1; margin:0; color:var(--text); font-size:16px; font-weight:650; line-height:1.4; letter-spacing:-.3px; text-align:center; }
#lesson-flow .lc-panel[data-catalog-view="review"] .lc-scroll { padding:20px 16px 16px; scroll-padding-block:16px; }
.br-review { min-width:0; color:var(--text); }
.br-heading { margin-bottom:20px; }
.br-heading > p { margin:0 0 8px; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.br-heading h3 { margin:0 0 8px; font-size:23px; font-weight:700; line-height:1.35; letter-spacing:-.7px; word-break:keep-all; overflow-wrap:anywhere; }
.br-heading > span,.br-note { color:var(--muted); font-size:12px; line-height:1.65; }
.br-facts { margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.br-facts > div { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; padding:6px 0; font-size:13px; line-height:1.6; }
.br-facts dt { color:var(--muted); }
.br-facts dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
.br-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 6px; }
.br-section-head h4,.br-costs h4 { margin:0; color:var(--text); font-size:14px; line-height:1.6; font-weight:650; }
.br-edit { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 0 8px 10px; border:0; background:transparent; color:var(--accent); font:inherit; font-size:13px; }
.br-student-list { display:grid; gap:8px; }
.br-student { display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.br-student > span { color:var(--muted); font-size:12px; line-height:1.7; }
.br-student strong { display:block; color:var(--text); font-size:13px; line-height:1.6; font-weight:600; overflow-wrap:anywhere; }
.br-student p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.br-students > .br-note { margin:10px 0 0; }
.br-rental-note { margin:12px 0 0; padding:12px 14px; border-radius:12px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); color:var(--text); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.br-costs { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.br-costs dl { display:grid; gap:12px; margin:14px 0 0; }
.br-costs dl > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; color:var(--text); font-size:13px; line-height:1.6; }
.br-costs dt { overflow-wrap:anywhere; }
.br-costs dt small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.6; }
.br-costs dd { margin:0; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.br-costs .br-note { margin:12px 0 0; }
.br-confirmation { margin:18px 0 8px; color:var(--muted); font-size:12px; line-height:1.7; }
.br-terms,.br-sessions { border-bottom:1px solid var(--line); }
.br-terms > summary,.br-sessions > summary { min-height:44px; padding:12px 0; color:var(--text); font-size:12px; line-height:20px; cursor:pointer; }
.br-terms h4 { margin:12px 0 6px; font-size:13px; }
.br-terms p { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; }
.br-sessions { margin:2px 0 12px; }
.br-sessions ol { list-style:none; padding:0; margin:0 0 12px; }
.br-sessions li { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding:7px 0; font-size:12px; line-height:1.6; }
.br-sessions li > span { color:var(--muted); }
.br-sessions strong { font-weight:500; }
.br-error,.br-sending { margin:0 0 16px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; color:var(--text); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.br-sending { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
#lesson-flow .lf-footer.br-footer { display:grid; grid-template-columns:minmax(104px,.9fr) minmax(0,1.1fr); align-items:center; gap:12px; padding:12px 16px; }
#lesson-flow .br-footer > .br-footer-total { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.br-footer-total > span,.br-footer-total > small { color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.br-footer-total > strong { color:var(--text); font-size:24px; line-height:1.3; font-weight:700; letter-spacing:-.6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.br-footer-total.is-long-total > strong { font-size:20px; }
#lesson-flow .br-footer > .primary { width:100%; min-height:48px; padding:12px 10px; gap:6px; font-size:14px; line-height:1.5; }
#lesson-flow .br-footer > .primary:disabled { opacity:1; background:var(--disabled-bg); border:1px solid transparent; color:var(--disabled-text); cursor:not-allowed; }
@media(min-width:600px) {
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-header { padding-inline:24px; }
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-scroll { padding:24px; }
 #lesson-flow .lf-footer.br-footer { padding-inline:24px; }
 .br-heading h3 { font-size:25px; }
}
@media(max-width:359px) {
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-header { padding-inline:14px; }
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-scroll { padding-inline:14px; }
 #lesson-flow .lf-footer.br-footer { padding-inline:14px; gap:8px; grid-template-columns:minmax(94px,.85fr) minmax(0,1.15fr); }
 .br-footer-total > strong { font-size:21px; }
 .br-footer-total.is-long-total > strong { font-size:18px; }
 #lesson-flow .br-footer > .primary { font-size:13px; padding-inline:8px; }
 .br-heading h3 { font-size:22px; }
 .br-student { grid-template-columns:52px minmax(0,1fr); padding:12px; gap:8px; }
}
@media(max-height:540px) {
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-header { padding-block:6px; }
 #lesson-flow .lc-panel[data-catalog-view="review"] .lc-scroll { padding-block:14px; }
 #lesson-flow .lf-footer.br-footer { padding-block:8px; }
 .br-footer-total > small { display:none; }
 .br-heading { margin-bottom:14px; }
}