/* Boinx Download List — themable via CSS custom properties.
   Override variables on .bx-download-list-root in your page CSS.
   Defaults below are intentionally neutral; each site declares its own brand.

   Defaults are scoped via :where() so they have zero specificity — any
   page-level rule on .bx-download-list-root wins regardless of cascade
   source order (this matters because plugin CSS loads after page CSS). */

/* Pin wrapper to full cross-axis width — without this, an Elementor flex
   parent (`.e-con-inner` with align-items:center) lets the widget shrink to
   its intrinsic content width, which differs between Release/Beta states. */
.bx-download-list-root {
    width: 100%;
    box-sizing: border-box;
}

:where(.bx-download-list-root) {
    /* Color tokens */
    --bxdl-accent: #60A5FA;
    --bxdl-accent-strong: #3B82F6;
    --bxdl-track-bg: #1a1a1a;
    --bxdl-card-from: rgb(53, 53, 56);
    --bxdl-card-to: rgb(24, 24, 26);
    --bxdl-text-primary: #ffffff;
    --bxdl-text-muted: #aaaaaa;
    --bxdl-text-secondary: #777777;

    /* Button visual tokens — every property the buttons render with is a var,
       so a host page can fully re-skin without !important fights. */
    --bxdl-btn-bg: #3B82F6;
    --bxdl-btn-bg-hover: #60A5FA;
    --bxdl-btn-color: #ffffff;
    --bxdl-btn-border: none;
    --bxdl-btn-radius: 8px;
    --bxdl-btn-padding: 12px 20px;
    --bxdl-btn-font-family: inherit;
    --bxdl-btn-font-size: 16px;
    --bxdl-btn-font-weight: 600;
    --bxdl-btn-letter-spacing: 0;

    /* Filter button text color when active (sitting on the pill). Defaults to
       text-primary so dark themes (where primary is white) work out of the box.
       Light themes set this explicitly because primary becomes dark. */
    --bxdl-filter-active-color: var(--bxdl-text-primary);
}

/* ---------------- Hero cards ---------------- */
.bx-download-list-root .bx-download-hero {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 100px;
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.bx-download-list-root .bx-download-hero-card.bx-hidden {
    display: none;
}

.bx-download-list-root .bx-download-hero-card {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background: linear-gradient(178deg, var(--bxdl-card-from) 0%, var(--bxdl-card-to) 100%);
    border-radius: 30px;
    padding: 50px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bx-download-list-root .bx-download-hero-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 16px;
}
.bx-download-list-root .bx-download-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bx-download-list-root .bx-download-hero-name {
    color: var(--bxdl-accent);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}
.bx-download-list-root .bx-download-hero-card-beta .bx-download-hero-name {
    color: var(--bxdl-text-primary);
}

.bx-download-list-root .bx-download-hero-version {
    color: var(--bxdl-text-primary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2px;
}
.bx-download-list-root .bx-download-hero-date {
    color: var(--bxdl-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.bx-download-list-root .bx-download-hero-requirements {
    color: var(--bxdl-text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 360px;
}
.bx-download-list-root .bx-download-hero-os {
    color: var(--bxdl-accent);
    font-size: 13px;
    font-weight: 500;
}

/* ---------------- Buttons (hero + list) ----------------
   All visual props are pinned across base / :hover / :focus / :active in one
   selector list — otherwise an external `.…:hover { letter-spacing: 0 }` /
   etc. would change geometry on hover and the button would reflow.
   The hover rule below ONLY changes the bg-color (the actual hover effect). */
.bx-download-list-root .bx-download-hero-btn,
.bx-download-list-root .bx-download-hero-btn:hover,
.bx-download-list-root .bx-download-hero-btn:focus,
.bx-download-list-root .bx-download-hero-btn:active,
.bx-download-list-root .bx-download-button,
.bx-download-list-root .bx-download-button:hover,
.bx-download-list-root .bx-download-button:focus,
.bx-download-list-root .bx-download-button:active {
    display: inline-block !important;
    color: var(--bxdl-btn-color) !important;
    border: var(--bxdl-btn-border) !important;
    border-radius: var(--bxdl-btn-radius) !important;
    padding: var(--bxdl-btn-padding) !important;
    font-family: var(--bxdl-btn-font-family) !important;
    font-size: var(--bxdl-btn-font-size) !important;
    font-weight: var(--bxdl-btn-font-weight) !important;
    letter-spacing: var(--bxdl-btn-letter-spacing) !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease;
}
.bx-download-list-root .bx-download-hero-btn,
.bx-download-list-root .bx-download-hero-btn:focus,
.bx-download-list-root .bx-download-hero-btn:active,
.bx-download-list-root .bx-download-button,
.bx-download-list-root .bx-download-button:focus,
.bx-download-list-root .bx-download-button:active {
    background-color: var(--bxdl-btn-bg) !important;
}
.bx-download-list-root .bx-download-hero-btn:hover,
.bx-download-list-root .bx-download-button:hover {
    background-color: var(--bxdl-btn-bg-hover) !important;
}
.bx-download-list-root .bx-download-hero-btn { margin-bottom: 10px; }
.bx-download-list-root .bx-download-button { margin-top: 16px; }

.bx-download-list-root .bx-download-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-left: 6px;
}

/* ---------------- Hero card notes disclosure ---------------- */
.bx-download-list-root .bx-download-hero-notes-toggle {
    margin-top: 20px;
    width: 75%;
    background-color: transparent;
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
}
.bx-download-list-root .bx-download-hero-notes-toggle .bx-download-summary {
    padding: 12px 16px;
    align-items: center;
}
.bx-download-list-root .bx-download-hero-notes-toggle .bx-download-arrow {
    display: none;
}
.bx-download-list-root .bx-download-hero-notes-toggle[open] .bx-download-arrow {
    transform: rotate(90deg);
}
.bx-download-list-root .bx-download-hero-notes-toggle[open] .bx-download-excerpt {
    display: none;
}
.bx-download-list-root .bx-download-hero-notes-toggle .bx-download-excerpt {
    text-align: left;
}

.bx-download-list-root .bx-download-hero-notes {
    padding: 0 16px 16px 48px;
    text-align: left;
    font-size: 13px;
    color: var(--bxdl-text-muted);
    line-height: 1.6;
}
.bx-download-list-root .bx-download-hero-notes > *:first-child {
    margin-top: 0;
    padding-top: 0;
}
.bx-download-list-root .bx-download-hero-notes .appVersion {
    display: none;
}
.bx-download-list-root .bx-download-hero-notes * {
    color: inherit;
    background: none;
    font-family: inherit;
}
.bx-download-list-root .bx-download-hero-notes h3 {
    color: var(--bxdl-accent);
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px 0;
}
.bx-download-list-root .bx-download-hero-notes h3:first-child {
    margin-top: 0;
}
.bx-download-list-root .bx-download-hero-notes ul {
    margin: 0 0 8px 0;
    padding-left: 18px;
}
.bx-download-list-root .bx-download-hero-notes li {
    margin-bottom: 3px;
}

@media (max-width: 600px) {
    .bx-download-list-root .bx-download-hero { grid-template-columns: 1fr; }
}

/* ---------------- Segmented filter control ----------------
   The host theme's `button:hover` / `.elementor-button:hover` rules will
   otherwise repaint the radius and background — `!important` defends. */
.bx-download-list-root .bx-download-filters {
    display: inline-flex;
    position: relative;
    gap: 0;
    margin-bottom: 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bxdl-track-bg) !important;
    border-radius: 25px !important;
    padding: 4px !important;
}
.bx-download-list-root .bx-download-filters-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background-color: var(--bxdl-accent-strong) !important;
    border-radius: 21px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}
.bx-download-list-root .bx-download-filter-btn,
.bx-download-list-root .bx-download-filter-btn:hover,
.bx-download-list-root .bx-download-filter-btn:focus,
.bx-download-list-root .bx-download-filter-btn:active {
    position: relative;
    z-index: 1;
    padding: 8px 21px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 21px !important;
    cursor: pointer;
    border: none !important;
    font-family: inherit !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    line-height: normal !important;
    color: var(--bxdl-text-primary) !important;
    transition: color 0.2s ease;
}

/* Active filter button (sits on the pill) — pinned across all pseudo states
   so :hover / :focus / :active don't revert to text-primary. Specificity
   (0,3,0) / (0,3,1) beats the filter-btn group above. */
.bx-download-list-root .bx-download-filter-btn.active,
.bx-download-list-root .bx-download-filter-btn.active:hover,
.bx-download-list-root .bx-download-filter-btn.active:focus,
.bx-download-list-root .bx-download-filter-btn.active:active {
    color: var(--bxdl-filter-active-color) !important;
}

/* ---------------- Version list ---------------- */
.bx-download-list-root .bx-download-item.bx-hidden {
    display: none;
}
.bx-download-list-root .bx-download-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1086px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bx-download-list-root .bx-download-item {
    background-color: var(--bxdl-track-bg);
    border: none;
    border-radius: 22px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.bx-download-list-root .bx-download-summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 32px;
    cursor: pointer;
    list-style: none;
}
.bx-download-list-root .bx-download-summary::-webkit-details-marker { display: none; }
.bx-download-list-root .bx-download-summary::marker { display: none; content: ""; }

.bx-download-list-root .bx-download-arrow {
    font-size: 22px;
    color: var(--bxdl-text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    margin-top: 2px;
}
.bx-download-list-root .bx-download-item[open] .bx-download-arrow {
    transform: rotate(90deg);
}

.bx-download-list-root .bx-download-header {
    min-width: 0;
    flex: 1;
}
.bx-download-list-root .bx-download-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}
.bx-download-list-root .bx-download-app {
    color: var(--bxdl-accent);
    font-size: 17px;
    font-weight: 700;
}
.bx-download-list-root .bx-download-date {
    color: var(--bxdl-text-primary);
    font-weight: 400;
}
.bx-download-list-root .bx-download-excerpt {
    font-size: 13px;
    color: var(--bxdl-text-muted);
    font-weight: 400;
    line-height: 1.4;
}
.bx-download-list-root .bx-download-item[open] .bx-download-excerpt {
    display: none;
}

.bx-download-list-root .bx-download-notes * {
    color: inherit;
    background: none;
    font-family: inherit;
}
.bx-download-list-root .bx-download-details {
    padding: 0 32px 32px 68px;
}
.bx-download-list-root .bx-download-notes {
    font-size: 14px;
    color: var(--bxdl-text-muted);
    line-height: 1.6;
}
.bx-download-list-root .bx-download-notes h3 {
    color: var(--bxdl-accent);
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px 0;
}
.bx-download-list-root .bx-download-notes h3:first-child {
    margin-top: 0;
}
.bx-download-list-root .bx-download-notes ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}
.bx-download-list-root .bx-download-notes li {
    margin-bottom: 4px;
}