/* Stripe payments guide lines — video library (matches stripe.com/en-ca/payments Guides) */

.theme--White {
    --backgroundColor: #fff;
    --guideSolidColor: rgba(66, 71, 112, 0.06);
    --guideDashedColor: rgba(66, 71, 112, 0.09);
    --textColor: #425466;
}

.Section {
    --sectionPaddingNormalMax: 128;
    --sectionPaddingMin: 72;
    --sectionPaddingTopMax: var(--sectionPaddingNormalMax);
    --sectionPaddingBottomMax: var(--sectionPaddingNormalMax);
    --sectionMarginTop: 0;
    --sectionMarginBottom: 0;
    --sectionOverflow: visible;
    position: relative;
    z-index: 1;
    margin-top: var(--sectionMarginTop);
    margin-bottom: var(--sectionMarginBottom);
    color: var(--textColor);
    --sectionPaddingTop: 3rem;
    --sectionPaddingBottom: calc(var(--sectionPaddingMin) * 1px);
}

@media (min-width: 900px) {
    .Section {
        --sectionPaddingTop: 4rem;
        --sectionPaddingBottom: calc(var(--sectionPaddingTopMax) * 1px);
    }
}

.Section__background {
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--backgroundColor);
    overflow: hidden;
    transform: none;
}

.Section__masked {
    position: relative;
    overflow: var(--sectionOverflow);
}

.Section__container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.Section__layoutContainer {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: var(--stripe-content-margin, 16px);
}

.Section__layout {
    padding: var(--sectionPaddingTop) 0 var(--sectionPaddingBottom);
}

.Section__backgroundMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

/* Dashed horizontal top edge — full width, meets stripe-shell left/right borders.
 * Hidden once this seam reaches the sticky nav so it does not stack under
 * .site-header__border as a second underline. */
.stripe-payments-library--flat-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 1px;
    background: linear-gradient(90deg, var(--guideDashedColor), var(--guideDashedColor) 50%, transparent 0, transparent);
    background-size: 8px 1px;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.stripe-payments-library--flat-top.is-under-nav::before {
    opacity: 0;
}

/* Skip horizontal dash at sidebar divider so it does not stack on the vertical guide */
@media (min-width: 768px) {
    .stripe-payments-library--flat-top::before {
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(var(--library-sidebar-guide-left) - 0.5px),
            transparent calc(var(--library-sidebar-guide-left) - 0.5px),
            transparent calc(var(--library-sidebar-guide-left) + 0.5px),
            #000 calc(var(--library-sidebar-guide-left) + 0.5px),
            #000 100%
        );
        mask-image: linear-gradient(
            90deg,
            #000 0,
            #000 calc(var(--library-sidebar-guide-left) - 0.5px),
            transparent calc(var(--library-sidebar-guide-left) - 0.5px),
            transparent calc(var(--library-sidebar-guide-left) + 0.5px),
            #000 calc(var(--library-sidebar-guide-left) + 0.5px),
            #000 100%
        );
    }
}

/* Stripe-style section guides (not used in the navigation bar) */
:root {
    --guideSolidColor: rgba(66, 71, 112, 0.06);
    --guideDashedColor: rgba(66, 71, 112, 0.09);
}

/* Stripe payments: .Guides (section-level only — not in navigation bar) */
.Guides {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 var(--stripe-content-margin, 16px);
    pointer-events: none;
    box-sizing: border-box;
}

.Guides__container {
    position: relative;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Stripe payments: default vertical guides are dashed */
.Guides__guide {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    display: none;
    background: linear-gradient(
        180deg,
        var(--guideDashedColor),
        var(--guideDashedColor) 50%,
        transparent 0,
        transparent
    );
    background-size: 1px 8px;
}

/* No vertical guide lines inside the navigation bar */
.site-header .Guides,
.site-header .SiteHeader__guidesContainer {
    display: none !important;
}

.stripe-payments-library {
    --library-sidebar-gutter: var(--stripe-content-margin, 16px);
    /*
     * Filter column = equal gutters + button width so chips center between
     * the left content rail and the continuous dashed guide on the right.
     */
    --library-sidebar-total: calc(
        var(--filter-button-width, 13rem) + 2 * var(--library-filter-gutter-x, 0.75rem)
    );
    --library-video-span: calc(100% - var(--library-sidebar-total));
    --library-guide-dash-size: 8px;
    --library-sidebar-guide-top: 0;
    /*
     * Section-relative X of the continuous guide (for top-rule mask):
     * content margin + filter column width
     */
    --library-sidebar-guide-left: calc(var(--stripe-content-margin, 16px) + var(--library-sidebar-total));
}

.stripe-payments-library .Section__masked {
    position: relative;
}

.stripe-payments-library .Section__backgroundMask {
    z-index: 0;
}

.stripe-payments-library .Section__container {
    position: relative;
    z-index: 1;
}

/* Guide lines only — no fill, overlays content without hiding it */
.stripe-payments-library .Guides {
    z-index: 2;
}

/* Outer guides hidden — stripe-shell__column provides left/right margin borders */
.stripe-payments-library .Guides__guide:first-of-type,
.stripe-payments-library .Guides__guide:nth-of-type(n+3) {
    display: none;
}

/*
 * Continuous dashed divider — filter column / video column boundary.
 * Full section height so it reads as one line through the library.
 * left is relative to Guides__container (already inset by content margin).
 */
@media (min-width: 768px) {
    .stripe-payments-library .Guides__guide:nth-of-type(2) {
        display: block;
        left: var(--library-sidebar-total);
        top: 0;
        height: 100%;
        transform: translateX(-50%);
    }
}

/* Video-area column guides removed — only the continuous first guide remains */

.stripe-payments-library.Section {
    z-index: 1;
    isolation: isolate;
    width: 100%;
    --sectionPaddingTop: 1rem;
}

@media (min-width: 900px) {
    .stripe-payments-library.Section {
        --sectionPaddingTop: 1.25rem;
    }
}

.stripe-payments-library .Section__layout {
    padding-top: var(--sectionPaddingTop);
    padding-bottom: 4rem;
}

.stripe-payments-library .video-library-sticky-zone,
.stripe-payments-library .main-content-wrapper {
    position: relative;
}

.stripe-shell__column .stripe-payments-library {
    border-inline: none;
    margin-inline: 0;
    width: 100%;
}