@charset "UTF-8";

.disabled {
    pointer-events: auto;
    opacity: .4;
    transition: .3s;
}

.download-box {
    position: relative;
    margin-top: 2rem;
}

.download-box.blurred {
    min-height: 19rem;
}

.no-files {
    padding: 2rem;
}

.download-box.blurred .whitepaper-files {
    padding: 1rem;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.download-box.blurred .whitepaper-files .badge {
    display: none;

}

.download-box.blurred .file-list-item {
    box-shadow: unset;
    border: unset;
}

.download-box.blurred:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff0f;
    z-index: 2;
    border-radius: 2.2rem;
    backdrop-filter: blur(3px);
    border: 1px solid var(--c-neutral-200);
    box-shadow: 0 2rem 2rem #d1d1e0;
    width: 100%;
}

.download-box.blurred .download-box__header {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.download-box__header .title {
    font-size: var(--fs-20);
    font-variation-settings: var(--fw-500);
    color: var(--c-primary);
    text-align: center;
    margin: 0 0 1.6rem;
}

.whitepaper-files {
    background: var(--c-white);
    border-radius: 10px;
}

.file-item__info {
    display: flex;
    align-items: center;
}

.whitepaper-files .file-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    padding: 1.5rem 2rem 1.5rem 2.5rem;
}

.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* box-shadow: inset 0px 0px 0px 1px var(--c-neutral-250); */
    border-radius: 1.4rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--c-neutral-250);
}

.file-list-item:last-child {
    margin-bottom: 0;
}

.file-list-item:hover {
    color: var(--c-primary-400);
    border-color: var(--c-primary-400);
}



.whitepaper-files .badge {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    aspect-ratio: 1 / 2;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="51" height="97" fill="none" viewBox="0 0 51 97"><path fill="%23dddce5" d="M14.8 17.2A16 16 0 0 0 .5 33v30.3a16 16 0 0 0 14.3 16l10.7 1.1 12 1.3c7.4.8 13 7 13 14.5V.3c0 7.4-5.6 13.7-13 14.4l-12 1.3-10.7 1.2Z"/></svg>');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: right center;
    pointer-events: none;
    user-select: none;
    font-family: var(--ff-en);
}

.file-item__size {
    font-size: var(--fs-14);
    color: var(--c-neutral-400);
}

.file-item__type {
    font-size: var(--fs-14);
    font-variation-settings: var(--fw-200);
    margin-right: 0.8rem;
    background: var(--c-neutral-150);
    padding: .5rem 1rem;
    border-radius: 1rem;
    line-height: 1;
    color: var(--c-primary);
}

.file-item__dl {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.file-item__name {
    font-size: var(--fs-16);
    line-height: 1.8;
    font-variation-settings: var(--fw-500);
}

.file-item__dl .ic-arrow-down-noline {
    transform: rotate(90deg);
    font-size: 1.4rem;
    color: var(--c-neutral-300);
    margin-right: 1rem;
    transition: color .3s;
}

.file-list-item:hover .ic-arrow-down-noline {
    color: var(--c-primary-400);
}

.whitepaper-post .download-btn-modal {
    text-align: center;
    margin-top: 2rem;
}

.download-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    /* Remove opacity and transition - let GSAP handle animations */
}

.download-modal .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 2rem;
    height: 100%;
    padding: 9rem 1rem 3rem;
    z-index: 1000;
    pointer-events: none;
}

.download-modal .modal-overlay {
    position: fixed;
    z-index: 30;
    background: #050033eb;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    inset: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.download-modal .body-modal {

    background-color: var(--c-white);
    padding: 4rem;
    border-radius: 3.2rem;
    z-index: 1000;
    width: 90%;
    max-width: 40rem;
    overflow-y: auto;
    pointer-events: auto;
}

.download-modal .close {
    cursor: pointer;
    flex: none;
    opacity: 0;
    transform: translateY(-3rem);
    width: 4rem;
    height: 4rem;
    background: var(--c-white);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
    pointer-events: auto;
    flex: none;
}

.download-modal .close:hover i {
    transform: rotate(-90deg);
}

.download-modal .close i {
    transition: 0.5s var(--ease3);
    display: block;
}

.download-modal .user-info-form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.download-modal .otp-section {
    text-align: center;
}

.download-modal .user-info-form .btn-submit {
    display: flex;
    justify-content: center;
}

.download-modal .otp-fields {
    display: flex;
    gap: .8rem;
    justify-content: center;
    direction: ltr;
}

.download-modal .otp-fields input {
    width: 6rem;
    height: 6rem;
    text-align: center;
    font-size: 18px;
    border: 1px solid var(--c-neutral-300);
    border-radius: 1rem;
}

.download-modal .btn-verify {
    margin-top: 2rem;
}

.download-modal .input-group {
    height: 5rem;
}

.download-modal .otp-title {
    font-size: var(--fs-20);
    font-variation-settings: var(--fw-500);
    text-align: center;
    margin-bottom: 1.5rem;
}

.download-modal .otp-fields input:focus {
    border-color: var(--c-primary-400);
}

.download-modal .resend-otp {
    margin-top: 2rem;
    cursor: pointer;
    color: var(--c-primary-400);
    font-size: var(--fs-16);
    font-variation-settings: var(--fw-600);
    transition: .3s;
}

.download-modal #timer {
    margin-right: .5rem;
    display: inline-block;
}

.download-modal .resend-otp:hover {
    color: var(--c-secondary);
}

.download-modal .resend-otp:disabled {
    background-color: unset;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--c-neutral-400);
    font-variation-settings: var(--fw-300);
}

.download-modal .resend-otp span#timer {}