/*  Breakpoints */
/*      Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .BKYC {
        --pg-width: calc(100% - var(--size-02));
        --pg-flex-direction: column;
    }
}

/*      Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .BKYC {
        --pg-width: calc(100% - var(--size-04));
        --pg-flex-direction: column;
    }
}

/*      Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .BKYC {
        --pg-width: 720px;
        --pg-flex-direction: row;
    }
}

/*      Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 960px) {
    .BKYC {
        --pg-width: 800px;
    }
}

/*      Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .BKYC {
        --pg-width: 1000px;
    }
}

@media only screen and (min-width: 1400px) {
    .BKYC {
        --pg-width: 1200px;
    }
}

/* General Styles */
html:has(.cover.active) {
    overflow: hidden;
}
body.BKYC {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* overflow: hidden; */

    --parent-dedicated-height: 0px;
}

.BKYC {
    /* --pg-width: 1200px; */
    font-size: var(--size-01);

    /* Text */
    font-family: var(--text-font-01);

    /* Banner */
    & .banner {
        width: 100%;
        /* height: 0px; */
        background-color: hsl(0, 0%, 95%);
        box-shadow: var(--shadow-01);

        /* margin: 0px 0px var(--size-02) 0px; */

        & img {
            height: 100%;
            width: 100%;
            object-position: center;
            object-fit: cover;
            display: block;
        }

        &.full {
            height: var(--parent-dedicated-height);
        }

        &.h540 {
            height: 540px;
        }
    }

    /* Content Area */
    & .content {
        /* Position */
        position: relative;

        /* Size */
        margin: var(--size-02) var(--size-00) var(--size-04) var(--size-00);
        margin: 0px;
        width: 100vw;
        width: var(--pg-width);
        padding: 0px;
        /* gap: var(--size-03); */
        flex-grow: 2;

        /* Layout */
        display: flex;
        flex-direction: column;
        align-items: center;

        /* Appearance */
        /* overflow: hidden; */
    }

    & .section {
        /* width: 100%; */
        margin: var(--size-00);
        position: relative;
    }

    /* #region Headers */
    /* All Headers */
    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6 {
        margin: 1em 0px 0px 0px;
        text-align: left;
    }

    /* Headers proceeded with a paragraph*/
    & h1:only-child,
    & h2:only-child,
    & h3:only-child,
    & h4:only-child,
    & h5:only-child,
    & h6:only-child {
        margin: 1em 0px;
    }

    /* Each Header */
    & h1 {
        font-size: var(--size-06);
        font-family: 'TrajanPro';
    }

    & h2 {
        font-size: var(--size-05);
        font-family: 'TrajanPro';
    }

    & h3 {
        font-size: var(--size-04);
        font-family: 'TrajanPro';
    }

    & h4 {
        font-size: var(--size-03);
        font-family: 'TrajanPro';
    }

    & h5 {
        font-size: var(--size-02);
        font-family: 'AGaramond';
    }

    & h6 {
        font-size: var(--size-01-5);
        font-family: 'AGaramond';
    }

    /* #endregion Headers */

    /* #region Paragraphs */
    & p {
        text-align: justify;
        /* text-align-last: left; */
        font-size: var(--size-01-5);
        /* margin-top: var(--size-00);
        margin-bottom: var(--size-02); */

        margin-block-start: 0px;
        margin-block-end: 0px;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    & p+p {
        margin-block-start: var(--size-02);
    }

    & h1+p,
    & h2+p,
    & h3+p,
    & h4+p,
    & h5+p,
    & h6+p {
        margin-top: 0.25em;
    }

    /* #endregion Paragraphs */

    /* #region Aspect Ratios */
    & .ar1x1 {
        aspect-ratio: 1;
    }

    & .ar7x5 {
        aspect-ratio: calc(7/5);
    }

    & .ar5x7 {
        aspect-ratio: calc(5/7);
    }

    & .ar4x6 {
        aspect-ratio: calc(4/6);
    }

    /* Video Sizes */
    & .ar16x9 {
        aspect-ratio: calc(16/9);
    }

    /* #endregion Aspect Ratios */

    & .frame {
        /* Position */
        /* Size */
        margin: var(--size-00);
        /* Layout */
        /* Text */
        /* Appearance */
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-01);
        overflow: hidden;
    }

    & img.frame {
        /* Size */
        width: 100%;
        object-fit: cover;
    }

    & a {
        /* Text */
        color: inherit;
        text-decoration: none;
        /* Appearance */
        transform: scale(1.0);

        /* Transition */
        transition:
            color 100ms linear 0ms,
            transform 150ms linear 0ms;

        &:hover {
            /* Text */
            color: var(--col-02-highlight);
            transform: scale(1.0);
        }
    }

    & button,
    .btn {
        font-size: var(--size-01-5);
    }

    & .split {
        /* Position */
        position: relative;

        /* Size */
        width: 100%;

        /* Layout */
        display: flex;
        gap: var(--size-03);

        /* Appearance */

        /* Transition */

        &.flip {
            flex-direction: row-reverse;
        }

        &>div {
            /* Position */
            /* Size */
            /* Layout */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            /* gap: var(--size-01); */
            /* Appearance */
            /* Transition */
        }



        & .center {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    .Accordion {
        width: 100%;
        overflow: visible;

        display: flex;
        flex-direction: column;
        margin: var(--size-01) 0px;
        gap: var(--size-01-5);

        & .bellow {

            box-shadow: var(--shadow-01);

            border-radius: var(--border-radius);
            overflow: hidden;

            & ._head {
                display: flex;
                justify-content: space-between;

                padding: var(--size-01);

                background-color: var(--col-01);
                color: var(--text-color-02);

                cursor: pointer;

                /* Transitions */
                transition:
                    box-shadow 100ms linear 0ms,
                    filter 100ms linear 0ms;


                & .title {
                    /* Position */
                    /* Size */
                    /* Layout */
                    /* Text */
                    font-size: var(--size-02);
                    /* Appearance */
                    /* Transition */
                }

                & .indicator {
                    position: relative;

                    & .plus,
                    .minus {
                        position: absolute;
                        right: 0px;
                        width: var(--size-02);
                        height: var(--size-02);
                        background-position: center;
                        background-size: contain;
                        transition:
                            opacity 300ms linear 300ms,
                            transform 300ms linear 300ms;
                    }

                    & .plus {
                        opacity: 1;
                        transform: rotate(0deg);
                        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA4UlEQVR4nO3RsXEEQBDDsO2/aboEBw6s/wMq0Ih3AAAAAAAAAB+nX/z3vuckyJYE2ZIgWxJkS4JsSZAtCbIlQbYkyJYE2ZIgWxJkS4JsSZAtCbIlQbYkyJYE2ZIgWxJkS4JsSZAtCbIlQbYkyJYE2ZIgfzvo292aHndretyt6XG3psfdmh53a3rcrelx97octCVBtiTIlgTZkiBbEmRLgmxJkC0JsiVBtiTIlgTZkiBbEmRLgmxJkC0JsiVBtiTIlgTZkiBbEmRLgmxJkC0JsiVBtiTIlgQBAAAAAAAA7tv8AGPo8dM0PqxnAAAAAElFTkSuQmCC");
                    }

                    & .minus {
                        opacity: 0;
                        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAVklEQVR4nO3BAREAMBACIPuXdjX+JpAAAAAAAAAAAAAAAAAAAAAAAACf6Lhc03G5puNyTcflmo7LNR2Xazou13RcAAAAAAAAAAAAAAAAAAAAAACA/OEBoIL4arZ4OScAAAAASUVORK5CYII=");
                    }

                }
            }

            & ._head:hover {
                /* Appearance */
                filter: brightness(110%);
                box-shadow: var(--shadow-02);
            }

            &.open ._head .indicator {

                & .plus,
                .minus {
                    transition:
                        opacity 300ms linear 0ms,
                        transform 300ms linear 0ms;
                }

                & .plus {
                    opacity: 0;
                    transform: rotate(90deg);
                }

                & .minus {
                    opacity: 1;
                }
            }

            & .chamber {
                position: relative;

                max-height: 0px;

                transition: max-height 600ms ease-in-out 0ms;
                overflow: hidden;

                background-color: hsl(0, 0%, 95%);
            }
        }
    }

    /* #region      | Text */
    .text_bold {
        font-weight: 600;
    }

    .text_italic {
        font-style: oblique;
    }

    /* #endregion   | Text */

    /* #region      | Cover */
    & div.cover {
        position: fixed;
        inset: unset;
        top: -200%;
        z-index: 1000;

        width: 100%;
        height: 100%;

        margin: 0px;
        border: none;
        padding: 0px;

        display: flex;
        justify-content: center;
        align-items: center;

        --transition-time: 300ms;
        transition:
            backdrop-filter var(--transition-time) linear var(--transition-time),
            background-color var(--transition-time) linear var(--transition-time),
            opacity var(--transition-time) linear var(--transition-time),
            inset 0ms linear 400ms,
            left 0ms linear 350ms;

        backdrop-filter: blur(0px);
        background-color: hsla(0, 0%, 20%, 0.0);
        opacity: 0;

        &.active {
            inset: 0px;

            /* Transition - to active */
            backdrop-filter: blur(var(--size-00));
            background-color: hsla(0, 0%, 20%, 0.5);
            opacity: 1;

            transition:
                backdrop-filter var(--transition-time) linear var(--transition-time),
                background-color var(--transition-time) linear var(--transition-time),
                opacity var(--transition-time) linear var(--transition-time),
                inset 0ms linear 0ms;
        }

        & .header {
            position: relative;
            /* top: 0px;
            left: 0px;
            right: 0px; */

            width: 100%;

            display: inline-flex;
            justify-content: end;


            & button.btn.frame#exit_btn {}
        }

        & .main {
            position: relative;
            display: flex;
            flex-direction: column;
            
            width: 100%;
            /* height: 100%; */
            
            flex-grow: 1;
            flex-shrink: 1;
            overflow: hidden;
            
        }
    }

    /* #endregion   | Cover */

    /* #region Galllery */
    & div.gallery {
        justify-content: flex-start;
        flex-direction: column;
        overflow: hidden;

        & .viewer {
            position: relative;

            margin: 0px;
            border: none;
            padding: var(--size-02);
            padding: 0px;

            /* width: 0%; */
            /* height: 0%; */

            display: none;
            justify-content: center;
            align-items: center;

            /* height: 70%; */

            overflow: hidden;
            flex-grow: 1;


            & img {
                /* height: auto;
                width: auto; */
                width: unset;

                max-width: calc(100% - calc(var(--size-02) * 2));
                max-height: calc(100% - calc(var(--size-02) * 2));

                aspect-ratio: unset;
                overflow: auto;
            }

            &.open {
                display: flex;
                width: 100%;

            }
        }

        & .film {
            width: 100%;

            overflow-x: scroll;
            overflow-y: hidden;

            
            flex-grow: 1;
            &:has(.filmstrip.mini) {
                flex-grow: unset;
            }
            flex-shrink: 0;

            & .filmstrip {
                display: flex;
                justify-content: center;
                align-items: start;
                align-content: center;

                flex-wrap: wrap;

                gap: var(--size-02);
                padding: var(--size-02);

                user-select: none;


                & img {
                    position: relative;    
                    margin: 0px;
                    border: none;
                    padding: 0px;    
                    width: 200px;    
                    background-color: hsl(0, 0%, 95%);
                }

                &.mini {
                    flex-wrap: nowrap;
                    cursor: grab;
                    width: fit-content;

                    user-select: unset;

                }

                &.mini img {
                    width: 150px;

                    user-drag: none;
                    -webkit-user-drag: none;
                    user-select: none;
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;

                }

            }
        }

    }

    /* #endregion Galllery */

    /* #region Forms */
    & .form {
        & iframe {
            width: 100%;
            max-width: 100%;

            height: 100%;
            max-height: 100%;

            overflow: auto;
        }

        & .window {
            position: relative;
            min-width: 0%;
            min-height: 0px;

            display: block;
            background-color: var(--theme-pop-bg);

            /* Transition - from active */
            transition:
                opacity 300ms ease-in 0ms;
            opacity: 0;
        }

        &.active {
            & .window {
                /* Transition - to active */
                transition:
                    opacity 300ms ease-in 600ms;
                opacity: 1;

            }
        }
    }

    /* #endregion Forms */

    /* #region Footer */
    & #footer {
        /* Position */
        /* position: sticky; */
        /* bottom: 0px; */

        /* Size */
        width: 100%;
        min-height: var(--size-02);
        margin: var(--size-06) 0px 0px;
        /* Layout */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* Appearance */
        background-color: var(--col-01);
        box-shadow: var(--shadow-01);

        /* Text */
        color: var(--text-color-02);
        font-size: var(--size-01);

        /* Transition */

        & .row {
            /* Position */
            position: relative;

            /* Size */
            padding: var(--size-02);
            width: calc(var(--pg-width) / 1);

            /* Layout */
            display: flex;
            flex-direction: row;
            gap: var(--size-04);
            flex-wrap: wrap;

            /* Appearance */

            & .logo {
                /* Position */
                position: relative;

                /* Layout */
                display: flex;
                justify-content: center;
                align-items: center;

                & img {
                    width: 100px;
                    height: 100%;
                    box-shadow: none;
                }
            }

            & .col {
                /* Layout */
                display: flex;
                flex-direction: column;
                gap: var(--size-00);

                & .line {
                    /* Size */
                    /* Layout */
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--size-01);
                    /* justify-content: start; */
                    /* Appearance */
                    /* Transition */
                }

            }

            justify-content: start;
        }

        @media only screen and (max-width: 540px) {
            & .row {
                justify-content: center;
            }
        }

        & .accent {
            background-color: var(--col-02);
            width: 100%;
            height: 2px;
        }

        & .bottom {
            /* Position */
            position: relative;

            /* Size */
            width: 100%;
            padding: 1.5em 1em;
            box-sizing: border-box;

            /* Layout */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            /* Appearance */
            background-color: hsla(0, 0%, 0%, 30%);
            /* box-shadow: var(--shadow-01); */

            /* Text */
            font-size: var(--size-00);

            & .col {
                /* Size */
                width: calc(var(--pg-width) / 1);

                /* Layout */
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: var(--size-00);
                justify-content: space-between;

            }

            & .links {
                display: flex;
                gap: 1em;
            }
        }

    }

    /* #endregion Footer */
}