/* /Components/Films/FilmCard.razor.rz.scp.css */
.film-card[b-ry2id28n9z] {
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 40, 60, .08);
}

.film-poster[b-ry2id28n9z] {
    position: relative;
    height: 168px;
}

.film-poster-image[b-ry2id28n9z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-poster-badge[b-ry2id28n9z] {
    position: absolute;
    top: 12px;
    right: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
}

.film-poster-initial[b-ry2id28n9z] {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 64px;
    color: rgba(255, 255, 255, .32);
    line-height: .8;
}

.film-poster-label[b-ry2id28n9z] {
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .6);
}

.film-body[b-ry2id28n9z] {
    padding: 15px 16px 17px;
}

.film-heading[b-ry2id28n9z] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.film-title[b-ry2id28n9z] {
    font-size: 19px;
}

.film-price[b-ry2id28n9z] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--primary);
    white-space: nowrap;
}

.film-crowded-note[b-ry2id28n9z] {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--amber-ink);
}

.film-meta[b-ry2id28n9z] {
    margin: 5px 0 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.film-description[b-ry2id28n9z] {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #48565c;
    font-weight: 500;
}

.film-footer[b-ry2id28n9z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.film-trailer[b-ry2id28n9z] {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    cursor: pointer;
}

@media (min-width: 768px) {
    .film-title[b-ry2id28n9z] {
        font-size: 20px;
    }

    .film-price[b-ry2id28n9z] {
        font-size: 18px;
    }

    .film-description[b-ry2id28n9z] {
        min-height: 42px;
    }
}
/* /Components/Films/FilmFilter.razor.rz.scp.css */
.film-filter-label[b-727r2ul3g7] {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--sub);
    margin-bottom: 7px;
}

.film-filter-icon[b-727r2ul3g7] {
    font-size: 13px;
    color: var(--sub);
    margin-right: 6px;
}

.film-filter-select[b-727r2ul3g7] {
    position: relative;
    width: 100%;
}

.film-filter-select select[b-727r2ul3g7] {
    width: 100%;
    padding: 13px 38px 13px 14px;
    border: 2px solid var(--soft);
    border-radius: var(--r-btn);
    font-size: 15px;
    font-weight: 700;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 40, 60, .06);
}

.film-filter-caret[b-727r2ul3g7] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--sub);
    font-size: 12px;
}

@media (min-width: 768px) {
    .film-filter-select[b-727r2ul3g7] {
        width: 300px;
    }
}
/* /Components/Layout/AdminAuthLayout.razor.rz.scp.css */
.admin-auth-layout[b-0qjbo966wi] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-checking[b-ajgbyvgh1d] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--sub);
    font-weight: 700;
}

.admin-shell[b-ajgbyvgh1d] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.admin-sidebar[b-ajgbyvgh1d] {
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: 0 1px 0 rgba(15, 40, 60, .08);
    padding: 16px;
}

.admin-brand[b-ajgbyvgh1d] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    padding: 6px;
    margin-bottom: 10px;
}

.admin-brand-icon[b-ajgbyvgh1d] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}

.admin-brand-tag[b-ajgbyvgh1d] {
    font-size: 12px;
    font-weight: 800;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-nav[b-ajgbyvgh1d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-ajgbyvgh1d] .admin-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--sub);
}

[b-ajgbyvgh1d] .admin-nav-link.active {
    background: var(--soft);
    color: var(--deep);
}

.admin-nav-link-logout[b-ajgbyvgh1d] {
    border: none;
    background: transparent;
    color: #c75c4a;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.admin-user[b-ajgbyvgh1d] {
    display: none;
}

.admin-content[b-ajgbyvgh1d] {
    padding: 20px 16px 60px;
}

@media (min-width: 900px) {
    .admin-shell[b-ajgbyvgh1d] {
        flex-direction: row;
    }

    .admin-sidebar[b-ajgbyvgh1d] {
        width: 240px;
        flex: none;
        min-height: 100vh;
        position: sticky;
        top: 0;
        padding: 20px 16px;
    }

    .admin-nav[b-ajgbyvgh1d] {
        flex-direction: column;
        margin-top: 12px;
    }

    [b-ajgbyvgh1d] .admin-nav-link {
        width: 100%;
    }

    .admin-nav-link-logout[b-ajgbyvgh1d] {
        display: none;
    }

    .admin-user[b-ajgbyvgh1d] {
        display: block;
        margin-top: auto;
        padding: 14px 12px 4px;
        border-top: 1px solid var(--grey-100);
    }

    .admin-user-name[b-ajgbyvgh1d] {
        font-weight: 800;
        color: var(--ink);
        font-size: 14px;
    }

    .admin-user-role[b-ajgbyvgh1d] {
        font-size: 12px;
        font-weight: 700;
        color: var(--sub);
        margin-bottom: 10px;
    }

    .admin-logout[b-ajgbyvgh1d] {
        border: none;
        background: transparent;
        color: #c75c4a;
        font-weight: 800;
        font-size: 13px;
        padding: 0;
    }

    .admin-content[b-ajgbyvgh1d] {
        flex: 1;
        padding: 32px 40px 80px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-fxxrfqlhjl] {
    min-height: calc(100vh - 70px);
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
.navbar[b-fv6p2u58yt] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    height: 70px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(15, 40, 60, .08);
}

[b-fv6p2u58yt] .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.brand-icon[b-fv6p2u58yt] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}

.navbar-links[b-fv6p2u58yt] {
    display: flex;
    align-items: center;
    gap: 14px;
}

[b-fv6p2u58yt] .nav-link {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 14px;
    color: var(--sub);
}

[b-fv6p2u58yt] .nav-link.active {
    color: var(--deep);
}

[b-fv6p2u58yt] .btn-nav {
    padding: 10px 18px;
    font-size: 14px;
}

@media (min-width: 640px) {
    .navbar[b-fv6p2u58yt] {
        padding: 0 40px;
        gap: 24px;
    }

    [b-fv6p2u58yt] .brand {
        font-size: 20px;
    }

    .navbar-links[b-fv6p2u58yt] {
        gap: 20px;
    }
}

@media (max-width: 639px) {
    .navbar.has-known-registration .brand-text[b-fv6p2u58yt] {
        display: none;
    }
}
/* /Components/Registration/ChildCard.razor.rz.scp.css */
.child-card[b-5pxsyg1gl7] {
    background: var(--white);
    border-radius: 20px;
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.child-card-header[b-5pxsyg1gl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.child-card-title[b-5pxsyg1gl7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
}

.child-card-badge[b-5pxsyg1gl7] {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--soft);
    color: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.child-card-remove[b-5pxsyg1gl7] {
    border: none;
    background: transparent;
    color: #c75c4a;
    font-weight: 800;
    font-size: 13px;
}

.child-card-names[b-5pxsyg1gl7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.child-card-names input[b-5pxsyg1gl7],
.child-card-select select[b-5pxsyg1gl7],
.child-card-age[b-5pxsyg1gl7] {
    width: 100%;
    padding: 13px;
    border: 2px solid var(--soft);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    background: var(--white);
    color: var(--ink);
}

.child-card-select select[b-5pxsyg1gl7] {
    padding: 13px 38px 13px 13px;
    font-weight: 700;
    cursor: pointer;
}

.child-card-names input:focus[b-5pxsyg1gl7],
.child-card-select select:focus[b-5pxsyg1gl7],
.child-card-age:focus[b-5pxsyg1gl7] {
    border-color: var(--primary);
    outline: none;
}

.child-card-class-row[b-5pxsyg1gl7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.child-card-class-row-other[b-5pxsyg1gl7] {
    grid-template-columns: 1fr 1fr;
}

.child-card-select[b-5pxsyg1gl7] {
    position: relative;
}

.child-card-caret[b-5pxsyg1gl7] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--sub);
    font-size: 12px;
}

.child-card-age[b-5pxsyg1gl7] {
    border-color: var(--accent);
}

.child-card-films-hint[b-5pxsyg1gl7] {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--sub);
    margin-bottom: 11px;
}

.child-card-films-grid[b-5pxsyg1gl7] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.film-option[b-5pxsyg1gl7] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px;
    border-radius: 14px;
    background: #fbfdfd;
    border: 2px solid var(--soft);
    text-align: left;
}

.film-option-selected[b-5pxsyg1gl7] {
    background: var(--soft);
    border-color: var(--primary);
}

.film-option-swatch[b-5pxsyg1gl7] {
    flex: 0 0 30px;
    height: 40px;
    border-radius: 8px;
}

.film-option-text[b-5pxsyg1gl7] {
    flex: 1;
    text-align: left;
}

.film-option-title[b-5pxsyg1gl7] {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.film-option-badge[b-5pxsyg1gl7] {
    margin-top: 4px;
    font-size: 11px;
    padding: 4px 9px;
}

.film-option-crowded-note[b-5pxsyg1gl7] {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--amber-ink);
}

.film-option-meta[b-5pxsyg1gl7] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub);
}

.film-option-price[b-5pxsyg1gl7] {
    font-weight: 800;
    font-size: 14px;
    color: var(--primary);
}

.film-option-check[b-5pxsyg1gl7] {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--white);
}

.film-option-check-on[b-5pxsyg1gl7] {
    background: var(--primary);
}

@media (min-width: 768px) {
    .child-card[b-5pxsyg1gl7] {
        padding: 22px;
        border: 2px solid var(--grey-100);
        box-shadow: none;
        border-radius: 20px;
    }

    .child-card-films-grid[b-5pxsyg1gl7] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }
}
/* /Components/Registration/StepChildren.razor.rz.scp.css */
.step-children-list[b-bbbw5grhjw] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.btn-add-child[b-bbbw5grhjw] {
    margin-top: 14px;
    width: 100%;
    padding: 14px;
    border: 2px dashed var(--ring);
    border-radius: 16px;
    background: transparent;
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .step-children-list[b-bbbw5grhjw] {
        gap: 22px;
    }
}
/* /Components/Registration/StepIndicator.razor.rz.scp.css */
.step-indicator[b-6ekms7lnvm] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}

.step-item[b-6ekms7lnvm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Narrowed from 100px (three-step width) so four steps still fit a 375px viewport
       without the row overflowing (FA §3.3.2a added a fourth step). */
    width: 78px;
}

.step-circle[b-6ekms7lnvm] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    background: var(--white);
    color: var(--grey-400);
    border: 2px solid var(--grey-200);
}

.step-circle-on[b-6ekms7lnvm] {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.step-label[b-6ekms7lnvm] {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--grey-400);
    text-align: center;
}

.step-label-active[b-6ekms7lnvm] {
    color: var(--ink);
}

@media (min-width: 768px) {
    .step-item[b-6ekms7lnvm] {
        width: 120px;
    }

    .step-circle[b-6ekms7lnvm] {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .step-label[b-6ekms7lnvm] {
        font-size: 13px;
    }
}
/* /Components/Registration/StepOverview.razor.rz.scp.css */
.overview-card[b-5wrrxge1yo] {
    border: 2px solid var(--grey-100);
    border-radius: 18px;
    padding: 16px;
}

.overview-label[b-5wrrxge1yo] {
    font-size: 12px;
    font-weight: 800;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

.overview-parent[b-5wrrxge1yo] {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 14px;
}

.overview-help-row[b-5wrrxge1yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.overview-help-label[b-5wrrxge1yo] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.overview-help-value[b-5wrrxge1yo] {
    font-weight: 800;
    color: var(--ink);
    font-size: 14.5px;
}

.overview-lines[b-5wrrxge1yo] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.overview-line[b-5wrrxge1yo] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--grey-100);
}

.overview-swatch[b-5wrrxge1yo] {
    flex: 0 0 14px;
    height: 38px;
    border-radius: 5px;
}

.overview-line-text[b-5wrrxge1yo] {
    flex: 1;
}

.overview-child-name[b-5wrrxge1yo] {
    font-weight: 800;
    color: var(--ink);
    font-size: 14.5px;
}

.overview-child-meta[b-5wrrxge1yo] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.overview-price[b-5wrrxge1yo] {
    font-weight: 800;
    color: var(--ink);
    font-size: 14.5px;
}

.overview-tokens-row[b-5wrrxge1yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--grey-100);
}

.overview-tokens-label[b-5wrrxge1yo] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.overview-tokens-value[b-5wrrxge1yo] {
    font-weight: 800;
    color: var(--ink);
    font-size: 14.5px;
}

.overview-total-row[b-5wrrxge1yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
}

.overview-total-label[b-5wrrxge1yo] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
}

.overview-total-value[b-5wrrxge1yo] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--primary);
}

.overview-banner[b-5wrrxge1yo] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--soft);
    border-radius: 14px;
    padding: 13px 15px;
    margin-top: 16px;
}

.overview-banner p[b-5wrrxge1yo] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1.45;
}

@media (min-width: 768px) {
    .overview-card[b-5wrrxge1yo] {
        padding: 22px;
    }

    .overview-parent[b-5wrrxge1yo] {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .overview-help-row[b-5wrrxge1yo] {
        margin-bottom: 16px;
    }

    .overview-help-value[b-5wrrxge1yo] {
        font-size: 15.5px;
    }

    .overview-swatch[b-5wrrxge1yo] {
        height: 40px;
    }

    .overview-child-name[b-5wrrxge1yo],
    .overview-price[b-5wrrxge1yo] {
        font-size: 15.5px;
    }

    .overview-tokens-value[b-5wrrxge1yo] {
        font-size: 15.5px;
    }

    .overview-total-label[b-5wrrxge1yo] {
        font-size: 19px;
    }

    .overview-total-value[b-5wrrxge1yo] {
        font-size: 26px;
    }
}
/* /Components/Registration/StepParent.razor.rz.scp.css */
.step-parent-fields[b-t5aegy11jv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.field label[b-t5aegy11jv] {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--sub);
    margin-bottom: 7px;
}

.field input[b-t5aegy11jv] {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--soft);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    background: #fbfdfd;
    color: var(--ink);
}

.field input:focus[b-t5aegy11jv] {
    border-color: var(--primary);
    outline: none;
}

/* The grid above is built for full-width text fields — the optional helper
   checkbox needs its own row layout and an unstyled, natural-size box. */
.helper-field[b-t5aegy11jv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.helper-field .helper-label[b-t5aegy11jv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.helper-field .helper-label input[b-t5aegy11jv] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.helper-field .helper-hint[b-t5aegy11jv] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sub);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .step-parent-fields[b-t5aegy11jv] {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .field-wide[b-t5aegy11jv] {
        grid-column: 1 / -1;
    }
}
/* /Components/Registration/StepTokens.razor.rz.scp.css */
/* Field + subtotal line layout, matching StepChildren's existing spacing rather than
   inventing a new rhythm (tech-a.md §6.4.10). */
.tokens-card[b-aftzvch3pf] {
    border: 2px solid var(--grey-100);
    border-radius: 18px;
    padding: 16px;
}

.tokens-row[b-aftzvch3pf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tokens-label[b-aftzvch3pf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tokens-label-title[b-aftzvch3pf] {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
}

.tokens-label-price[b-aftzvch3pf] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.tokens-subtotal-row[b-aftzvch3pf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--grey-100);
}

.tokens-subtotal-label[b-aftzvch3pf] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.tokens-subtotal-value[b-aftzvch3pf] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
}

@media (min-width: 768px) {
    .tokens-card[b-aftzvch3pf] {
        padding: 22px;
    }
}
/* /Components/Shared/ColorSwatchPicker.razor.rz.scp.css */
.swatch-current[b-n4hki5hw1c] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.swatch-current-preview[b-n4hki5hw1c] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--soft);
    box-shadow: 0 2px 6px rgba(15, 40, 60, .1);
    flex-shrink: 0;
}

.swatch-current-hex[b-n4hki5hw1c] {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink);
}

.swatch-picker[b-n4hki5hw1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swatch-option[b-n4hki5hw1c] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform .1s;
}

.swatch-option:hover[b-n4hki5hw1c] {
    transform: scale(1.1);
}

.swatch-option-selected[b-n4hki5hw1c] {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--ink);
}

.swatch-check[b-n4hki5hw1c] {
    color: var(--white);
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
/* /Components/Shared/CopyButton.razor.rz.scp.css */
/* Sits on the translucent panel inside PaymentBlock's gradient, so every colour here is
   white at an opacity rather than a token hex — same treatment as .payment-row itself. */
.copy-button[b-nwi1czfhwg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 3px 6px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    color: var(--white);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease;
}

.copy-button:hover[b-nwi1czfhwg] {
    background: rgba(255, 255, 255, .3);
}

.copy-button:focus-visible[b-nwi1czfhwg] {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.copy-button-copied[b-nwi1czfhwg] {
    background: rgba(255, 255, 255, .32);
}

.copy-button-icon[b-nwi1czfhwg] {
    font-size: 12.5px;
}

.copy-button-text[b-nwi1czfhwg] {
    white-space: nowrap;
}
/* /Components/Shared/NumberStepper.razor.rz.scp.css */
.number-stepper[b-rhq5ka9lrs] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.stepper-btn[b-rhq5ka9lrs] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--soft);
    border-radius: 12px;
    background: var(--white);
    color: var(--deep);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.stepper-btn:hover:not(:disabled)[b-rhq5ka9lrs] {
    background: var(--soft);
    border-color: var(--primary);
}

.stepper-btn:focus-visible[b-rhq5ka9lrs] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.stepper-btn:disabled[b-rhq5ka9lrs] {
    color: var(--grey-400);
    border-color: var(--grey-200);
    cursor: not-allowed;
}

.stepper-input[b-rhq5ka9lrs] {
    width: 56px;
    padding: 9px 4px;
    border: 2px solid var(--soft);
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    background: #fbfdfd;
    color: var(--ink);
    /* Hide native spinners — the −/+ buttons are the intended control (FA #111). */
    -moz-appearance: textfield;
}

.stepper-input[b-rhq5ka9lrs]::-webkit-outer-spin-button,
.stepper-input[b-rhq5ka9lrs]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper-input:focus[b-rhq5ka9lrs] {
    border-color: var(--primary);
    outline: none;
}
/* /Components/Shared/PaymentBlock.razor.rz.scp.css */
.payment-block[b-reb5xz9v15] {
    background: linear-gradient(160deg, var(--deep), var(--primary));
    border-radius: var(--r-lg);
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 26px -8px var(--primary);
}

.payment-title[b-reb5xz9v15] {
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 3px;
}

.payment-subtitle[b-reb5xz9v15] {
    color: rgba(255, 255, 255, .85);
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 18px;
}

.payment-qr[b-reb5xz9v15] {
    background: var(--white);
    border-radius: 16px;
    padding: 16px;
    width: 212px;
    margin: 0 auto;
}

.payment-details[b-reb5xz9v15] {
    margin-top: 18px;
    background: rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 13px 15px;
    text-align: left;
}

.payment-row[b-reb5xz9v15] {
    display: flex;
    align-items: center;
    /* flex-end only decides a line that holds neither the label nor the value — in practice the
       copy button alone after a wrap. Every other line has the label on it, and the label's auto
       right margin has already eaten the free space by then, so this has no say there. */
    justify-content: flex-end;
    /* Wrap is the safety net for the copy button's wider "Gekopieerd" state: the block is only
       212px-QR-wide inside a 20px-padded page, so on the narrowest phones the button drops to
       its own line for those two seconds instead of pushing the row past the panel edge. */
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}

.payment-row:last-child[b-reb5xz9v15] {
    margin-bottom: 0;
}

/* Explicit classes rather than :last-child — the IBAN and Mededeling rows carry a copy button
   after the value, so the value is no longer the row's last element. */
.payment-row-label[b-reb5xz9v15] {
    flex: none;
    /* All of the row's free space collects here, on the label's right. That is what lines the
       value boxes up: .payment-row-ref caps its value at 55% so that row has space to spare,
       and putting it before the value instead of after it lands every value's right edge in
       the same place. Absorbing it here rather than on the value keeps the label at the left
       edge when a long value wraps to its own line (Begunstigde at 375px). */
    margin-right: auto;
}

.payment-row-value[b-reb5xz9v15] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--white);
    font-weight: 800;
    text-align: right;
}

.payment-row-iban[b-reb5xz9v15] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 55% rather than the pre-copy-button 60%: at 375px it is what keeps the reference and its
   copy button on one line instead of pushing the button onto a second row. */
.payment-row-ref[b-reb5xz9v15] {
    max-width: 55%;
}

.payment-instructions[b-reb5xz9v15] {
    margin: 16px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
    text-align: left;
}
/* /Components/Shared/QrCodeDisplay.razor.rz.scp.css */
.qr-image[b-kxptw1yy6i] {
    display: block;
    width: 100%;
    aspect-ratio: 1;
}

.qr-placeholder[b-kxptw1yy6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 1;
    background: var(--grey-100);
    border-radius: 12px;
    color: var(--grey-400);
}

.qr-placeholder-icon[b-kxptw1yy6i] {
    font-size: 40px;
}

.qr-placeholder-text[b-kxptw1yy6i] {
    font-size: 12px;
    font-weight: 800;
}
/* /Components/Shared/RegistrationPaidPanel.razor.rz.scp.css */
/* Takes the same slot as PaymentBlock once the payment is received, so it keeps
   the same card treatment (gradient, radius, shadow) to avoid a layout jump. */
.paid-panel[b-8tlqdj0ky5] {
    background: linear-gradient(160deg, var(--deep), var(--primary));
    border-radius: var(--r-lg);
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 10px 26px -8px var(--primary);
}

.paid-panel-icon[b-8tlqdj0ky5] {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
}

.paid-panel-title[b-8tlqdj0ky5] {
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 16px;
}

.paid-panel-total[b-8tlqdj0ky5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 13px 15px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
}

.paid-panel-total-value[b-8tlqdj0ky5] {
    color: var(--white);
    font-weight: 800;
    font-size: 17px;
    text-align: right;
}

.paid-panel-message[b-8tlqdj0ky5] {
    margin: 16px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
    text-align: left;
}
/* /Components/Shared/ResetRegistrationsDialog.razor.rz.scp.css */
.reset-dialog-backdrop[b-i6srvzitar] {
    position: fixed;
    inset: 0;
    background: rgba(12, 59, 55, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
}

.reset-dialog-panel[b-i6srvzitar] {
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.reset-dialog-panel h2[b-i6srvzitar] {
    font-size: 20px;
    margin-bottom: 16px;
}

.reset-dialog-warning[b-i6srvzitar] {
    margin-bottom: 18px;
}

.reset-dialog-downloads[b-i6srvzitar] {
    margin-bottom: 20px;
}

.reset-dialog-confirm-field[b-i6srvzitar] {
    margin-bottom: 18px;
}
/* /Components/Shared/SortControl.razor.rz.scp.css */
.sort-control-icon[b-cyre8moifq] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sub);
}

.sort-control[b-cyre8moifq] {
    display: inline-flex;
    background: var(--white);
    border: 2px solid var(--soft);
    border-radius: var(--r-btn);
    padding: 4px;
    gap: 2px;
    box-shadow: 0 4px 14px rgba(15, 40, 60, .06);
}

.sort-control-btn[b-cyre8moifq] {
    border: none;
    background: transparent;
    color: var(--sub);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.sort-control-btn:hover[b-cyre8moifq] {
    color: var(--ink);
}

.sort-control-btn-active[b-cyre8moifq] {
    background: var(--primary);
    color: var(--white);
}

@media (max-width: 640px) {
    .sort-control[b-cyre8moifq] {
        width: 100%;
    }

    .sort-control-btn[b-cyre8moifq] {
        flex: 1;
        padding: 9px 8px;
    }
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
.status-badge[b-g261i62mb4] {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 22px;
}

.status-badge-pending[b-g261i62mb4] {
    background: #fff3e6;
    color: #cf7d2e;
}

.status-badge-received[b-g261i62mb4] {
    background: #e3f7ea;
    color: #1f9d4e;
}
/* /Pages/Admin/InschrijvingDetail.razor.rz.scp.css */
/* FA §3.4.4e — the inline stepper + save-button row for the token-count correction
   control, same inline-edit family as this page's other rows (e.g. the parent-info
   ✏️ control). */
.admin-tokens-row[b-d765nridi0] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-tokens-current[b-d765nridi0] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* FA §3.4.4f — the textarea + character counter row for the always-editable comment
   control, same inline-edit family as the parent-info ✏️ control and the Jetons row
   above (§3.4.4d, §3.4.4e), but with no read-only-after-payment branch. */
.admin-comment-edit[b-d765nridi0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}

.admin-comment-edit textarea[b-d765nridi0] {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--grey-200);
    border-radius: var(--r-sm);
    color: var(--ink);
}

.admin-comment-counter[b-d765nridi0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    text-align: right;
}
/* /Pages/Admin/Inschrijvingen.razor.rz.scp.css */
/* FA §3.4.4f, decision #116 — the inline-expand row showing a registration's full
   comment text, and the 💬 pill that toggles it. Reuses .admin-pill sizing from
   app.css but renders as a <button> (unlike the other Signalisatie pills, which are
   plain spans), so it needs its own interactive/focus styling. */
.admin-pill-comment[b-knc958qq4i] {
    background: var(--grey-100);
    color: var(--sub);
    border: none;
    cursor: pointer;
    line-height: 1;
}

.admin-pill-comment:hover[b-knc958qq4i] {
    background: var(--grey-200);
}

.admin-pill-comment:focus-visible[b-knc958qq4i] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-comment-row td[b-knc958qq4i] {
    background: var(--grey-100);
    font-weight: 500;
    white-space: pre-wrap;
    color: var(--ink);
}
/* /Pages/Admin/Instellingen.razor.rz.scp.css */
.admin-price-preview p[b-mscj8u577f] {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
}

.admin-skip-list[b-mscj8u577f] {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 13.5px;
    color: var(--sub);
    font-weight: 600;
}

.admin-panel h2:not(:first-child)[b-mscj8u577f] {
    margin-top: 26px;
}
/* /Pages/Admin/Klassen.razor.rz.scp.css */
/*
   The blocked-deactivate message (FA §3.1, #67) renders inside the actions cell of the
   row it concerns, so it drops .error-banner's page-level 18px bottom margin and its
   full-width block behaviour: it sits tight under the row's buttons and only takes the
   width its text needs.
*/
.admin-row-error[b-31bx83gimk] {
    display: block;
    max-width: 320px;
    margin: 8px 0 0;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: normal;
}
/* /Pages/Admin/Login.razor.rz.scp.css */
.login-card[b-lkt04z4qs7] {
    width: 100%;
    max-width: 380px;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 30px rgba(15, 40, 60, .1);
    padding: 32px 28px;
}

.login-brand[b-lkt04z4qs7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 24px;
}

.login-brand-icon[b-lkt04z4qs7] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.login-brand-tag[b-lkt04z4qs7] {
    font-size: 12px;
    font-weight: 800;
    color: var(--sub);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.login-title[b-lkt04z4qs7] {
    font-size: 24px;
    margin-bottom: 4px;
}

.login-subtitle[b-lkt04z4qs7] {
    font-size: 14px;
    color: var(--sub);
    font-weight: 600;
    margin-bottom: 22px;
}

.login-error[b-lkt04z4qs7] {
    background: #fdecea;
    color: #c0392b;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.field[b-lkt04z4qs7] {
    margin-bottom: 16px;
}

.field label[b-lkt04z4qs7] {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--sub);
    margin-bottom: 7px;
}

.field input[b-lkt04z4qs7] {
    width: 100%;
    padding: 13px;
    border: 2px solid var(--soft);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    background: #fbfdfd;
    color: var(--ink);
}

.field input:focus[b-lkt04z4qs7] {
    border-color: var(--primary);
    outline: none;
}

.login-note[b-lkt04z4qs7] {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--sub);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
/* /Pages/Admin/Tickets.razor.rz.scp.css */
/*
   "Alle tickets" card reads as one block: static detail -> order toggle -> hint -> button.
   The hint explains the current toggle selection, so it sits tight under the control (8px)
   while the block as a whole keeps the card's 18px rhythm.
*/
.admin-tickets-order[b-7wzap01j2m] {
    margin: 0 0 8px;
}

.admin-tickets-order-hint[b-7wzap01j2m] {
    font-size: 13.5px;
    color: var(--sub);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 18px;
}

.admin-dummy-tickets-card .admin-report-icon[b-7wzap01j2m] {
    margin: 0 0 14px;
}

.admin-dummy-tickets-card h2[b-7wzap01j2m] {
    margin-bottom: 8px;
}

.admin-dummy-tickets-card p[b-7wzap01j2m] {
    font-size: 13.5px;
    color: var(--sub);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 18px;
}

.admin-dummy-tickets-card .admin-form-grid[b-7wzap01j2m] {
    margin-bottom: 18px;
}
/* /Pages/Confirmation.razor.rz.scp.css */
.not-found[b-9ubc9zmw72] {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ===== Mobile full-bleed banner ===== */

.confirmation-banner-mobile[b-9ubc9zmw72] {
    position: relative;
    overflow: hidden;
    padding: 46px 24px 30px;
    background: linear-gradient(160deg, var(--primary), var(--deep));
    text-align: center;
}

.confirmation-decor[b-9ubc9zmw72] {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.confirmation-banner-mobile .confirmation-icon[b-9ubc9zmw72] {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 40px;
}

.confirmation-banner-mobile h1[b-9ubc9zmw72] {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--white);
}

.confirmation-banner-mobile p[b-9ubc9zmw72] {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
}

/* ===== Shared grid ===== */

.confirmation-grid[b-9ubc9zmw72] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px 60px;
}

.confirmation-intro-desktop[b-9ubc9zmw72] {
    display: none;
}

.confirmation-info-banner[b-9ubc9zmw72] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--soft);
    border-radius: 16px;
    padding: 15px;
}

.confirmation-info-banner p[b-9ubc9zmw72] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1.5;
}

.confirmation-actions[b-9ubc9zmw72] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

@media (min-width: 768px) {
    .confirmation-banner-mobile[b-9ubc9zmw72] {
        display: none;
    }

    .confirmation-grid[b-9ubc9zmw72] {
        max-width: 980px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 34px;
        align-items: start;
        padding: 50px 40px 80px;
    }

    .confirmation-intro-desktop[b-9ubc9zmw72] {
        display: block;
        grid-column: 1;
        grid-row: 1;
    }

    .confirmation-icon-desktop[b-9ubc9zmw72] {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--soft);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        margin-bottom: 20px;
    }

    .confirmation-intro-desktop h1[b-9ubc9zmw72] {
        margin: 0 0 12px;
        font-size: 40px;
        line-height: 1.05;
    }

    .confirmation-intro-desktop p[b-9ubc9zmw72] {
        margin: 0;
        font-size: 16px;
        line-height: 1.6;
        color: #48565c;
        font-weight: 600;
    }

    .confirmation-info-banner[b-9ubc9zmw72] {
        grid-column: 1;
        grid-row: 2;
    }

    .confirmation-actions[b-9ubc9zmw72] {
        grid-column: 1;
        grid-row: 3;
        flex-direction: row;
    }

    .confirmation-actions .btn[b-9ubc9zmw72] {
        width: auto;
    }

    .confirmation-payment[b-9ubc9zmw72] {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}
/* /Pages/Films.razor.rz.scp.css */
.films-page[b-uqkr6wehph] {
    padding: 24px 20px 60px;
}

.films-header[b-uqkr6wehph] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 10px;
}

.films-header h1[b-uqkr6wehph] {
    font-size: 26px;
}

.films-tip[b-uqkr6wehph] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--soft);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 12px 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1.45;
}

.films-tip-icon[b-uqkr6wehph] {
    font-size: 16px;
}

.films-toolbar[b-uqkr6wehph] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.films-empty[b-uqkr6wehph] {
    text-align: center;
    padding: 30px 16px;
    color: var(--sub);
    font-weight: 700;
    font-size: 14px;
}

.grid-films[b-uqkr6wehph] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 18px;
}

.films-cta[b-uqkr6wehph] {
    text-align: center;
    margin-top: 22px;
}

.films-cta .btn[b-uqkr6wehph] {
    padding: 17px 40px;
}

@media (min-width: 768px) {
    .films-page[b-uqkr6wehph] {
        padding: 46px 40px 80px;
    }

    .films-header[b-uqkr6wehph] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .films-header h1[b-uqkr6wehph] {
        font-size: 40px;
    }

    .films-tip[b-uqkr6wehph] {
        background: transparent;
        padding: 0;
        margin: 8px 0 0;
        font-size: 15px;
        color: var(--sub);
    }

    .films-tip-icon[b-uqkr6wehph] {
        display: none;
    }

    .films-empty[b-uqkr6wehph] {
        padding: 60px 16px;
        font-size: 16px;
    }

    .grid-films[b-uqkr6wehph] {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 26px;
    }

    .films-cta[b-uqkr6wehph] {
        margin-top: 38px;
    }
}
/* /Pages/Landing.razor.rz.scp.css */
/* ===== Hero ===== */

.hero[b-6waukk62wg] {
    position: relative;
    overflow: hidden;
    padding: 30px 0 64px;
    background: linear-gradient(160deg, var(--primary), var(--deep));
}

.hero-decor[b-6waukk62wg] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}

.hero-decor-a[b-6waukk62wg] {
    top: -30px;
    right: -20px;
    width: 150px;
    height: 150px;
}

.hero-decor-b[b-6waukk62wg] {
    bottom: 20px;
    left: -30px;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, .08);
}

.hero-inner[b-6waukk62wg] {
    position: relative;
}

.hero-eyebrow[b-6waukk62wg] {
    background: rgba(255, 255, 255, .18);
    color: var(--white);
    font-weight: 700;
}

.hero-title[b-6waukk62wg] {
    margin: 18px 0 6px;
    font-size: 46px;
    line-height: 1;
    color: var(--white);
    letter-spacing: -.01em;
}

.hero-date[b-6waukk62wg] {
    color: rgba(255, 255, 255, .92);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
}

.hero-body[b-6waukk62wg] {
    margin: 14px 0 0;
    display: none;
}

.intro-mobile[b-6waukk62wg] {
    margin: 26px auto 0;
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.55;
    font-weight: 600;
}

.hero-ctas[b-6waukk62wg] {
    display: none;
}

.hero-posters[b-6waukk62wg] {
    display: none;
}

.mobile-cta[b-6waukk62wg] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 26px;
}

/* ===== How it works ===== */

.how-it-works[b-6waukk62wg] {
    padding: 26px 20px 60px;
}

.how-title[b-6waukk62wg] {
    margin: 0 0 14px;
    font-size: 19px;
}

.how-grid[b-6waukk62wg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.how-step[b-6waukk62wg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(15, 40, 60, .05);
}

.how-step-number[b-6waukk62wg] {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--soft);
    color: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

.how-step-title[b-6waukk62wg] {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
}

.how-step-body[b-6waukk62wg] {
    font-size: 13px;
    color: var(--sub);
    font-weight: 600;
}

/* ===== Desktop ===== */

@media (min-width: 768px) {
    .hero[b-6waukk62wg] {
        padding: 64px 0 30px;
        background: none;
    }

    .hero-inner[b-6waukk62wg] {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 60px;
        align-items: center;
    }

    .hero-decor[b-6waukk62wg] {
        display: none;
    }

    .hero-eyebrow[b-6waukk62wg] {
        background: var(--soft);
        color: var(--deep);
    }

    .hero-title[b-6waukk62wg] {
        margin: 20px 0 10px;
        font-size: 68px;
        letter-spacing: -.02em;
        color: var(--ink);
    }

    .hero-date[b-6waukk62wg] {
        margin: 0 0 6px;
        font-size: 22px;
        color: var(--primary);
    }

    .hero-body[b-6waukk62wg] {
        display: block;
        margin: 14px 0 28px;
        font-size: 17px;
        line-height: 1.6;
        color: #48565c;
        font-weight: 600;
        max-width: 460px;
    }

    .hero-ctas[b-6waukk62wg] {
        display: flex;
        gap: 14px;
    }

    .hero-cta-primary[b-6waukk62wg],
    .hero-cta-secondary[b-6waukk62wg] {
        padding: 16px 28px;
        font-size: 17px;
    }

    .mobile-cta[b-6waukk62wg],
    .intro-mobile[b-6waukk62wg] {
        display: none;
    }

    .hero-posters[b-6waukk62wg] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .poster[b-6waukk62wg] {
        position: relative;
        aspect-ratio: 3 / 4;
        border-radius: 20px;
    }

    .poster-image[b-6waukk62wg] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    .poster-initial[b-6waukk62wg] {
        position: absolute;
        left: 16px;
        bottom: 14px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 46px;
        color: rgba(255, 255, 255, .35);
    }

    .poster-a[b-6waukk62wg] {
        background: linear-gradient(150deg, #0d9488, #0a5e57);
        box-shadow: 0 16px 36px -12px rgba(13, 148, 136, .5);
    }

    .poster-b[b-6waukk62wg] {
        background: linear-gradient(150deg, #6366f1, #3f3fa0);
        box-shadow: 0 16px 36px -12px rgba(99, 102, 241, .45);
    }

    .poster-c[b-6waukk62wg] {
        background: linear-gradient(150deg, #16a34a, #0e6630);
        box-shadow: 0 16px 36px -12px rgba(22, 163, 74, .4);
    }

    .poster-d[b-6waukk62wg] {
        background: linear-gradient(150deg, #7c3aed, #4c2191);
        box-shadow: 0 16px 36px -12px rgba(124, 58, 237, .4);
    }

    .how-it-works[b-6waukk62wg] {
        padding: 26px 40px 80px;
    }

    .how-title[b-6waukk62wg] {
        font-size: 26px;
        margin-bottom: 22px;
    }

    .how-grid[b-6waukk62wg] {
        flex-direction: row;
        gap: 22px;
    }

    .how-step[b-6waukk62wg] {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 14px;
        row-gap: 6px;
        padding: 26px;
        border-radius: 20px;
        box-shadow: var(--shadow-card);
    }

    .how-step-number[b-6waukk62wg] {
        width: 46px;
        height: 46px;
        font-size: 22px;
        margin-bottom: 0;
    }

    .how-step-title[b-6waukk62wg] {
        font-size: 19px;
        margin-bottom: 0;
    }

    .how-step-body[b-6waukk62wg] {
        grid-column: 1 / -1;
        font-size: 14.5px;
        line-height: 1.5;
    }
}
/* /Pages/MyRegistration.razor.rz.scp.css */
.not-found[b-yvu2la2y1g] {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.manage-page[b-yvu2la2y1g] {
    padding: 24px 20px 60px;
}

.manage-header[b-yvu2la2y1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.manage-header h1[b-yvu2la2y1g] {
    font-size: 26px;
}

.manage-ref[b-yvu2la2y1g] {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sub);
}

.manage-help[b-yvu2la2y1g] {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--deep);
}

.manage-grid[b-yvu2la2y1g] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.manage-hint[b-yvu2la2y1g] {
    font-size: 13px;
    font-weight: 800;
    color: var(--sub);
    margin: 0 0 12px;
}

.manage-cards[b-yvu2la2y1g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manage-card[b-yvu2la2y1g] {
    background: var(--white);
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 5px 16px rgba(15, 40, 60, .06);
}

.manage-card-row[b-yvu2la2y1g] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.manage-card-swatch[b-yvu2la2y1g] {
    flex: 0 0 14px;
    height: 40px;
    border-radius: 5px;
}

.manage-card-text[b-yvu2la2y1g] {
    flex: 1;
}

.manage-card-name[b-yvu2la2y1g] {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px;
}

.manage-card-class[b-yvu2la2y1g] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sub);
}

.manage-card-price[b-yvu2la2y1g] {
    font-weight: 800;
    color: var(--primary);
    font-size: 15px;
}

.manage-card-select[b-yvu2la2y1g] {
    position: relative;
}

.manage-card-select select[b-yvu2la2y1g] {
    width: 100%;
    padding: 12px 36px 12px 12px;
    border: 2px solid var(--soft);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
}

.manage-card-caret[b-yvu2la2y1g] {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--sub);
    font-size: 11px;
}

.manage-tokens[b-yvu2la2y1g] {
    margin: 16px 2px 0;
    font-size: 13px;
    color: var(--deep);
    font-weight: 800;
}

.manage-disclaimer[b-yvu2la2y1g] {
    margin: 16px 2px 0;
    font-size: 13px;
    color: var(--sub);
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .manage-page[b-yvu2la2y1g] {
        padding: 46px 40px 80px;
    }

    .manage-header h1[b-yvu2la2y1g] {
        font-size: 34px;
    }

    .manage-grid[b-yvu2la2y1g] {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 30px;
        align-items: start;
    }
}
/* /Pages/Register.razor.rz.scp.css */
.register-page[b-u5lyf5xpeo] {
    max-width: 860px;
    padding: 24px 20px 60px;
}

.register-heading[b-u5lyf5xpeo] {
    margin: 0 0 24px;
    font-size: 26px;
    text-align: center;
}

.known-registration-banner[b-u5lyf5xpeo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--soft);
    border-radius: 16px;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep);
}

.known-registration-banner a[b-u5lyf5xpeo] {
    color: var(--deep);
    text-decoration: underline;
}

.known-registration-dismiss[b-u5lyf5xpeo] {
    flex: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1;
    padding: 4px;
}

.register-card[b-u5lyf5xpeo] {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: 0 10px 30px rgba(15, 40, 60, .07);
}

[b-u5lyf5xpeo] .step-title {
    margin: 0 0 4px;
    font-size: 22px;
}

[b-u5lyf5xpeo] .step-subtitle {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--sub);
    font-weight: 600;
}

.register-actions[b-u5lyf5xpeo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .register-heading[b-u5lyf5xpeo] {
        font-size: 34px;
        margin-bottom: 24px;
    }

    .register-card[b-u5lyf5xpeo] {
        padding: 36px;
    }

    [b-u5lyf5xpeo] .step-title {
        font-size: 24px;
    }

    [b-u5lyf5xpeo] .step-subtitle {
        font-size: 15px;
        margin-bottom: 26px;
    }
}