/* ==========================================================================
   TPB Course Search — Stylesheet
   Design direction: refined, minimal dark-on-light sidebar tool.
   Uses CSS custom properties for all colours so Elementor overrides land
   cleanly without specificity fights.
   ========================================================================== */

/* ── CSS custom properties (defaults; Elementor inline styles override) ── */
.tpb-cs-wrapper {
    --tpb-cs-field-bg:          #ffffff;
    --tpb-cs-field-color:       #1a1a2e;
    --tpb-cs-field-placeholder: #9098a9;
    --tpb-cs-field-border:      #dde1ea;
    --tpb-cs-btn-bg:            #1e3a5f;
    --tpb-cs-btn-color:         #ffffff;
    --tpb-cs-btn-hover-bg:      #2d5591;
    --tpb-cs-radius:            8px;

    --tpb-cs-panel-bg:          #f8f9fb;
    --tpb-cs-panel-shadow:      0 8px 32px rgba(30,58,95,.13);
    --tpb-cs-panel-max-h:       60vh;

    --tpb-cs-scope-bg:          #eef1f6;
    --tpb-cs-scope-label:       #6b7280;
    --tpb-cs-scope-active:      #1e3a5f;

    --tpb-cs-title-color:       #1e3a5f;
    --tpb-cs-excerpt-color:     #4b5563;
    --tpb-cs-meta-color:        #9098a9;
    --tpb-cs-divider:           #e5e9f0;
    --tpb-cs-mark-bg:           #fff3b0;
    --tpb-cs-mark-color:        #1a1a2e;

    --tpb-cs-locked-color:      #9098a9;

    --tpb-cs-page-color:        #6b7280;
    --tpb-cs-page-hover:        #1e3a5f;

    position: relative;
    font-family: inherit;
    width: 100%;
}

/* ── Field row ─────────────────────────────────────────────────────── */
.tpb-cs-field-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--tpb-cs-field-border);
    border-radius: var(--tpb-cs-radius);
    overflow: hidden;
    background: var(--tpb-cs-field-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.tpb-cs-wrapper.is-focused .tpb-cs-field-wrap,
.tpb-cs-field-wrap:focus-within {
    border-color: var(--tpb-cs-btn-bg);
    box-shadow: 0 0 0 3px rgba(30,58,95,.12);
}

.tpb-cs-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--tpb-cs-field-color);
    font-size: .9rem;
    line-height: 1;
    padding: .65em .75em;
    -webkit-appearance: none;
    appearance: none;
}

.tpb-cs-input::-webkit-search-cancel-button,
.tpb-cs-input::-webkit-search-decoration { display: none; }

.tpb-cs-input::placeholder { color: var(--tpb-cs-field-placeholder); }

.tpb-cs-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tpb-cs-btn-bg);
    color: var(--tpb-cs-btn-color);
    border: none;
    cursor: pointer;
    padding: 0 .85em;
    transition: background-color .18s ease;
}

.tpb-cs-btn:hover  { background: var(--tpb-cs-btn-hover-bg); }
.tpb-cs-btn:focus-visible {
    outline: 2px solid var(--tpb-cs-btn-bg);
    outline-offset: 2px;
}

.tpb-cs-btn svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
    color: var(--tpb-cs-btn-color);
}

/* ── Expandable panel ──────────────────────────────────────────────── */
.tpb-cs-panel {
    display: flex;
    flex-direction: column;
    background: var(--tpb-cs-panel-bg);
    border: 1.5px solid var(--tpb-cs-field-border);
    border-top: none;
    border-radius: 0 0 var(--tpb-cs-radius) var(--tpb-cs-radius);
    box-shadow: var(--tpb-cs-panel-shadow);

    /* Slide-down animation */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height .28s cubic-bezier(.4,0,.2,1),
        opacity    .22s ease,
        transform  .22s ease;
    pointer-events: none;
}

.tpb-cs-panel:not([hidden]) {
    max-height: var(--tpb-cs-panel-max-h);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* [hidden] is set/removed by JS; also handle the CSS animation state */
.tpb-cs-panel[hidden] {
    display: flex !important; /* keep in flow for animation; JS removes hidden when open */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Scope bar (sticky top inside panel) ───────────────────────────── */
.tpb-cs-scope-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: .25em;
    background: var(--tpb-cs-scope-bg);
    padding: .4em .6em;
    border-bottom: 1px solid var(--tpb-cs-divider);
}

.tpb-cs-scope-label {
    display: none; /* self-explanatory from the pill pattern */
}

.tpb-cs-scope-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.tpb-cs-scope-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tpb-cs-scope-option span {
    font-size: .75rem;
    color: var(--tpb-cs-scope-label);
    padding: .2em .6em;
    border-radius: 20px;
    transition: color .15s ease, background-color .15s ease;
    position: relative;
    white-space: nowrap;
}

.tpb-cs-scope-option input:checked + span {
    color: var(--tpb-cs-scope-active);
    font-weight: 600;
    background: rgba(30,58,95,.08);
}

.tpb-cs-scope-option:hover span {
    color: var(--tpb-cs-scope-active);
}

.tpb-cs-scope-option input:focus-visible + span {
    outline: 2px solid var(--tpb-cs-scope-active);
    outline-offset: 2px;
}

/* ── Results scrollable area ───────────────────────────────────────── */
.tpb-cs-results-panel {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .25em 0;
    /* Thin scrollbar for webkit */
    scrollbar-width: thin;
    scrollbar-color: var(--tpb-cs-field-border) transparent;
}

.tpb-cs-results-panel::-webkit-scrollbar       { width: 4px; }
.tpb-cs-results-panel::-webkit-scrollbar-track  { background: transparent; }
.tpb-cs-results-panel::-webkit-scrollbar-thumb  { background: var(--tpb-cs-field-border); border-radius: 4px; }

/* ── Status / loading message ──────────────────────────────────────── */
.tpb-cs-status {
    font-size: .82rem;
    color: var(--tpb-cs-meta-color);
    padding: .6em .85em;
    min-height: 1.5em;
}

.tpb-cs-status:empty { display: none; }

/* ── Results list ──────────────────────────────────────────────────── */
.tpb-cs-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Individual result item ────────────────────────────────────────── */
.tpb-cs-result-item {
    padding: .7em .85em;
    border-top: 1px solid var(--tpb-cs-divider);
    transition: background-color .12s ease;
    cursor: pointer;
}

.tpb-cs-result-item:first-child { border-top: none; }
.tpb-cs-result-item:hover       { background: rgba(30,58,95,.07); }
.tpb-cs-result-item:hover .tpb-cs-result-title a { color: var(--tpb-cs-btn-hover-bg); text-decoration: underline; }

/* Locked result */
.tpb-cs-result-item.is-locked .tpb-cs-result-title a {
    color: var(--tpb-cs-locked-color);
}

/* Type badge */
.tpb-cs-result-meta {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .68rem;
    color: var(--tpb-cs-meta-color);
    margin-bottom: .25em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tpb-cs-result-meta .tpb-cs-type-badge {
    display: inline-flex;
    align-items: center;
}

.tpb-cs-lock-icon {
    display: inline-flex;
    align-items: center;
    color: var(--tpb-cs-locked-color);
}

.tpb-cs-lock-icon svg {
    width: .85em;
    height: .85em;
}

/* Title */
.tpb-cs-result-title {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 .22em;
    line-height: 1.25;
}

.tpb-cs-result-title a {
    color: var(--tpb-cs-title-color);
    text-decoration: none;
    transition: color .15s ease;
}

.tpb-cs-result-title a:hover { text-decoration: underline; }

/* Excerpt */
.tpb-cs-result-excerpt {
    font-size: .8rem;
    color: var(--tpb-cs-excerpt-color);
    line-height: 1.45;
    margin: 0;
}

.tpb-cs-result-excerpt mark {
    background: var(--tpb-cs-mark-bg);
    color: var(--tpb-cs-mark-color);
    padding: .05em .15em;
    border-radius: 2px;
    font-style: normal;
}

/* ── Pagination (sticky bottom) ────────────────────────────────────── */
.tpb-cs-pagination {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45em .75em;
    border-top: 1px solid var(--tpb-cs-divider);
    background: var(--tpb-cs-panel-bg);
}

.tpb-cs-pagination[hidden] { display: none !important; }

.tpb-cs-page-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: .3em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tpb-cs-page-color);
    border-radius: 4px;
    transition: color .15s ease, background-color .15s ease;
}

.tpb-cs-page-btn svg {
    width: 1.1em;
    height: 1.1em;
    display: block;
}

.tpb-cs-page-btn:not(:disabled):hover {
    color: var(--tpb-cs-page-hover);
    background: rgba(30,58,95,.07);
}

.tpb-cs-page-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.tpb-cs-page-info {
    font-size: .75rem;
    color: var(--tpb-cs-page-color);
    font-weight: 500;
    text-align: center;
}

/* ── Spinner ────────────────────────────────────────────────────────── */
.tpb-cs-spinner {
    display: inline-block;
    width: .85em;
    height: .85em;
    border: 2px solid var(--tpb-cs-field-border);
    border-top-color: var(--tpb-cs-btn-bg);
    border-radius: 50%;
    animation: tpb-cs-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: .35em;
}

@keyframes tpb-cs-spin {
    to { transform: rotate(360deg); }
}

/* ── Accessibility: reduce motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tpb-cs-panel,
    .tpb-cs-field-wrap,
    .tpb-cs-btn,
    .tpb-cs-result-item,
    .tpb-cs-scope-option span {
        transition: none !important;
    }
    .tpb-cs-spinner { animation: none; }
}