/*
 * Shared visual language for the Lessons section (/lessons/library,
 * /lessons/mine, /lessons/submissions). Page-specific bits stay in
 * each EJS file (mini-cart, BOGO banner, Teacher-Code card, modals).
 */

/* ── Page header ────────────────────────────────────────────── */
.page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; flex-wrap: wrap;
}
.page-header-titles { min-width: 0; }
.page-header-title {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}
.page-header .breadcrumb,
.lessons-page .breadcrumb { font-size: .85rem; }

/* ── Filter row (search + pickers) ──────────────────────────── */
.mkt-filters { /* no card chrome — just a flex container */ }
.mkt-filter-row {
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: stretch;
}
.mkt-search {
    flex: 1 1 240px; min-width: 220px;
}
.mkt-search .form-control { min-height: 44px; }
.mkt-filter-subject { flex: 1 1 200px; min-width: 180px; }
.mkt-filter-grade   { flex: 0 1 180px; min-width: 150px; }
.d-contents { display: contents; }

/* ── Status / kind chip row + view toggle ───────────────────── */
.mkt-chip-row {
    display: flex; align-items: center; gap: .6rem;
    margin-top: .75rem;
}
.mkt-chip-scroll {
    display: flex; gap: .4rem; align-items: center;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 2px;   /* room for focus rings */
}
.mkt-chip-scroll::-webkit-scrollbar { display: none; }

.chip-text-short { display: none; }
@media (max-width: 767.98px) {
    .chip-text-long  { display: none; }
    .chip-text-short { display: inline; }
}

/* ── Filter chips (status / kind) ───────────────────────────── */
.mkt-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .82rem; font-weight: 600; line-height: 1.2;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background .1s ease, border-color .1s ease, color .1s ease;
    white-space: nowrap;
    cursor: pointer;
}
.mkt-chip:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; }
.mkt-chip.active {
    background: #7209b7;
    border-color: #7209b7;
    color: #fff;
}
.mkt-chip.active:hover { background: #5a0891; border-color: #5a0891; color: #fff; }
.mkt-chip-count {
    font-size: .75rem;
    background: rgba(255,255,255,.25);
    color: inherit;
    padding: 0 .4rem;
    border-radius: 999px;
    margin-left: .1rem;
}
.mkt-chip:not(.active) .mkt-chip-count {
    background: #f3f4f6;
    color: #6b7280;
}
.mkt-chip-sep {
    width: 1px; height: 20px; background: #e5e7eb; margin: 0 .4rem;
}

/* ── View toggle ────────────────────────────────────────────── */
.view-toggle {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    align-self: center;
}
.view-toggle-btn {
    background: #fff; border: 0;
    padding: .4rem .55rem;
    color: #6b7280;
    font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid #e5e7eb; }
.view-toggle-btn:hover { background: #f9fafb; color: #111827; }
.view-toggle-btn[aria-pressed="true"] { background: #7209b7; color: #fff; }

/* ── Filter trigger buttons (replacing native <select>) ─────── */
.filter-trigger {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 44px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .3rem .55rem .3rem .5rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .1s, box-shadow .1s;
}
.filter-trigger:hover { border-color: #7209b7; }
.filter-trigger:focus-visible {
    outline: 2px solid rgba(114,9,183,.25);
    outline-offset: 1px;
    border-color: #7209b7;
}
.filter-trigger-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: #f3f4f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    color: #6b7280;
}
/* On very narrow screens the icon box is just decoration — hide it to
   keep the trigger legible. */
@media (max-width: 575.98px) {
    .filter-trigger-icon { display: none; }
    .filter-trigger      { padding-left: .8rem; }
}
.filter-emoji { font-size: 1.1rem; line-height: 1; }
.filter-trigger-body {
    display: flex; flex-direction: column; flex-grow: 1; min-width: 0;
    line-height: 1.1;
}
.filter-trigger-label {
    font-size: .68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.filter-trigger-value {
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-trigger-chevron {
    color: #9ca3af; flex-shrink: 0; font-size: .8rem;
}
.filter-trigger-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    transition: background .1s, color .1s;
    flex-shrink: 0;
}
.filter-trigger-clear:hover { background: #fee2e2; color: #dc2626; }
.filter-count-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 .4rem;
    border-radius: 999px;
    background: #7209b7; color: #fff;
    font-size: .72rem; font-weight: 700; line-height: 1;
}

/* ── Active filter chip row (under filter bar) ──────────────── */
.active-filter-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    padding: .1rem 0;
}
.active-filter-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem .3rem .55rem;
    border-radius: 999px;
    background: #faf5ff;
    border: 1px solid #ddd6fe;
    color: #5b21b6;
    font-size: .8rem; font-weight: 600;
    text-decoration: none;
    transition: background .1s, border-color .1s, color .1s;
}
.active-filter-chip:hover {
    background: #f3e8ff; border-color: #c4b5fd; color: #5b21b6;
}
.active-filter-chip i.ph-x {
    font-size: .85rem; opacity: .65;
}
.active-filter-chip:hover i.ph-x { opacity: 1; color: #7c3aed; }
.active-filter-chip-emoji { font-size: 1rem; line-height: 1; }
.active-filter-chip-icon { font-size: 1rem; color: #7c3aed; }
.active-filter-chip--clear {
    background: transparent; border-color: transparent; color: #6b7280;
    padding-left: .5rem;
}
.active-filter-chip--clear:hover {
    background: #fee2e2; border-color: #fecaca; color: #dc2626;
}

/* ── Filter modal tiles ─────────────────────────────────────── */
.filter-modal .modal-content {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}
.filter-modal-search {
    position: relative;
}
.filter-modal-search i {
    position: absolute; left: 0.9rem; top: 50%;
    transform: translateY(-50%);
    color: #6b7280; font-size: 1.1rem;
    z-index: 4;
}
.filter-modal-search .form-control {
    padding-left: 2.5rem;
    min-height: 44px;
    font-size: .95rem;
}
.filter-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .65rem;
}
.filter-modal-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.filter-tile {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    text-align: center;
    padding: .85rem .6rem;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .1s, border-color .1s, background .1s, box-shadow .1s;
    min-height: 98px;
    justify-content: center;
    position: relative;
}
.filter-tile:hover {
    border-color: #c4b5fd;
    background: #faf5ff;
    transform: translateY(-1px);
}
.filter-tile.is-selected {
    border-color: #7209b7;
    background: #faf5ff;
    box-shadow: 0 0 0 3px rgba(114,9,183,.12);
}
.filter-tile-check {
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #7209b7; color: #fff;
    display: none;
    align-items: center; justify-content: center;
    font-size: .7rem;
}
.filter-tile.is-selected .filter-tile-check { display: inline-flex; }
.filter-tile-emoji { font-size: 1.55rem; line-height: 1; }
.filter-tile-label {
    font-size: .82rem; font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.filter-tile-count {
    font-size: .68rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: .1rem .5rem;
    font-weight: 600;
}
.filter-tile.is-selected .filter-tile-count {
    background: #7209b7;
    color: #fff;
}
.filter-tile--grade {
    min-height: 64px;
    padding: .55rem .4rem;
}
.filter-modal-foot {
    border-top: 1px solid #f3f4f6;
    padding: .8rem 1rem;
}
.filter-modal-apply-count {
    margin-left: .3rem;
    font-weight: 700;
}

/* ── Results grid (shared by library / mine / submissions) ──── */
.mkt-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ── Marketplace card (grid view) ───────────────────────────── */
.mkt-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.1rem 1.15rem;
    height: 100%;
    min-height: 210px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .75rem;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
}
.mkt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15,23,42,.08);
    border-color: #d8b4fe;
}
.mkt-card--pending {
    background: repeating-linear-gradient(45deg, #fafafa 0, #fafafa 10px, #fff 10px, #fff 20px);
}
/* Optional left-border accent (used by /lessons/mine, /lessons/submissions) */
.mkt-card--accent-primary  { border-left: 4px solid #7209b7; }
.mkt-card--accent-muted    { border-left: 4px solid #9ca3af; }

.mkt-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.mkt-chip-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .74rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap;
    /* In both grid- and list-view cards the chip sits inside a flex/
       grid track that can try to shrink it below its content size when
       the row is tight. flex-shrink:0 + min-width:max-content locks the
       chip to its natural width so "Interactive"/"Coming soon" never
       get clipped. */
    flex-shrink: 0;
    min-width: max-content;
}
.mkt-chip-badge i { font-size: .88rem; line-height: 1; }
.mkt-chip-interactive { background: rgba(114,9,183,.10); color: #5a0891; }
.mkt-chip-classic     { background: #f3f4f6; color: #374151; }
.mkt-chip-pending     { background: #fef3c7; color: #92400e; }
.mkt-chip-owned       { background: #dcfce7; color: #166534; }
.mkt-chip-warn        { background: #fef3c7; color: #92400e; }
.mkt-chip-ok          { background: #dcfce7; color: #166534; }
.mkt-chip-grade       { background: rgba(114,9,183,.10); color: #5a0891; }
.mkt-chip-subject     { background: #f3f4f6; color: #374151; }

.mkt-card-body { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.mkt-card-title {
    font-size: 1.02rem; font-weight: 700; color: #0f172a;
    line-height: 1.3; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mkt-card-meta {
    display: flex; flex-wrap: wrap; gap: .75rem;
    color: #6b7280; font-size: .82rem;
}
.mkt-card-meta span {
    display: inline-flex; align-items: center; gap: .3rem;
}
.mkt-card-meta i { font-size: .95rem; line-height: 1; }

.mkt-card-foot {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    padding-top: .6rem;
    border-top: 1px solid #f3f4f6;
}
.mkt-price { font-weight: 700; font-size: 1rem; color: #111827; }
.mkt-price-free { color: #059669; }
.mkt-price-muted { color: #9ca3af; font-weight: 500; }

/* Pages that want a stack of buttons in the footer (e.g. /lessons/mine)
   can add .mkt-card-foot--stack to switch the footer to a single-column
   column of buttons instead of the price+CTA grid. */
.mkt-card-foot--stack {
    grid-template-columns: 1fr;
    gap: .5rem;
    border-top: 0;
    padding-top: 0;
}

/* ── Marketplace card (list view) ───────────────────────────── */
.mkt-view-list .mkt-results {
    grid-template-columns: 1fr;
    gap: .5rem;
}
.mkt-view-list .mkt-card {
    grid-template-rows: none;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: .75rem 1rem;
}
.mkt-view-list .mkt-card:hover { transform: none; }
.mkt-view-list .mkt-card-head {
    padding: 0;
    width: auto;
}
.mkt-view-list .mkt-card-title {
    font-size: .95rem;
    -webkit-line-clamp: 1;
}
.mkt-view-list .mkt-card-meta {
    font-size: .78rem;
    gap: .5rem;
}
.mkt-view-list .mkt-card-body { gap: .15rem; }
.mkt-view-list .mkt-card-foot {
    display: contents;
}
.mkt-view-list .mkt-card-foot .mkt-price {
    padding-top: 0;
    border-top: 0;
}
.mkt-view-list .mkt-card-foot .mkt-btn {
    min-width: 140px;
}
.mkt-view-list .mkt-card-foot--stack {
    /* In list view the stack footer flattens to a horizontal row so the
       buttons sit next to the card body. */
    display: flex;
    gap: .5rem;
    padding-top: 0;
    border-top: 0;
}
.mkt-view-list .mkt-card-foot--stack .mkt-btn { min-width: 0; }
/* Below the md breakpoint the 4-column list-view row is too tight to
   fit chip + title + price + CTA on one line, so we stack into three
   rows: chips, title, then price + CTA. */
@media (max-width: 767.98px) {
    .mkt-view-list .mkt-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "body"
            "foot";
        gap: .4rem;
    }
    .mkt-view-list .mkt-card-head  { grid-area: head; }
    .mkt-view-list .mkt-card-body  { grid-area: body; }
    .mkt-view-list .mkt-card-foot  {
        grid-area: foot;
        display: flex; align-items: center; justify-content: space-between;
        gap: .5rem;
        border-top: 1px dashed #f3f4f6; padding-top: .4rem;
        flex-wrap: wrap;
    }
    .mkt-view-list .mkt-card-foot .mkt-btn { min-width: 0; }
    .mkt-view-list .mkt-card-foot--stack  {
        border-top: 1px dashed #f3f4f6; padding-top: .4rem;
    }
}

/* ── Marketplace buttons ────────────────────────────────────── */
.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 38px;
    padding: 0 .9rem;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    justify-self: end;
    box-sizing: border-box;
    vertical-align: middle;
}
.mkt-btn:disabled { opacity: .6; cursor: not-allowed; }
.mkt-btn i { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.mkt-btn-primary { background: #7209b7; color: #fff; border-color: #7209b7; }
.mkt-btn-primary:hover:not(:disabled) { background: #5a0891; border-color: #5a0891; color: #fff; }
.mkt-btn-outline { background: #fff; color: #7209b7; border-color: #c4b5fd; }
.mkt-btn-outline:hover { background: rgba(114,9,183,.08); color: #5a0891; border-color: #a78bfa; }
.mkt-btn-secondary { background: #fff; color: #374151; border-color: #cbd5e1; }
.mkt-btn-secondary:hover:not(:disabled) { background: #f9fafb; color: #0f172a; border-color: #94a3b8; }
.mkt-btn-icon {
    background: #ffffff; color: #374151; border-color: #cbd5e1;
    width: 38px; padding: 0; flex-shrink: 0;
}
.mkt-btn-icon:hover { background: #f9fafb; color: #0f172a; border-color: #94a3b8; }

.mkt-btn-notify { background: #fff; color: #92400e; border-color: #fcd34d; }
.mkt-btn-notify:hover:not(:disabled) { background: #fffbeb; border-color: #fbbf24; }
.mkt-btn-notify .mkt-btn-label-on  { display: none; }
.mkt-btn-notify.is-on              { background: #dcfce7; color: #166534; border-color: #86efac; }
.mkt-btn-notify.is-on:hover        { background: #bbf7d0; border-color: #4ade80; }
.mkt-btn-notify.is-on .mkt-btn-label-off { display: none; }
.mkt-btn-notify.is-on .mkt-btn-label-on  { display: inline-flex; align-items: center; gap: .3rem; }

.mkt-btn-label-off { display: inline-flex; align-items: center; gap: .3rem; }

/* ── Result count + pagination ──────────────────────────────── */
.mkt-count { margin-top: .25rem; }
.mkt-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .25rem;
    margin: 2rem 0 1rem;
    flex-wrap: wrap;
}
.mkt-page {
    display: inline-flex; align-items: center; gap: .25rem;
    min-width: 38px;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-weight: 600; font-size: .9rem;
    color: #374151; background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.mkt-page:hover:not(.disabled):not(.current) { background: #f9fafb; color: #111827; }
.mkt-page.current {
    background: #7209b7; border-color: #7209b7; color: #fff; cursor: default;
}
.mkt-page.disabled { opacity: .45; pointer-events: none; }
.mkt-page-gap { color: #9ca3af; padding: 0 .15rem; }

/* ── Empty state card ───────────────────────────────────────── */
.mkt-empty {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}