/* 
 * ------------------------
 * General newsletter styles 
 * -------------------------
*/

.newsletter-header {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.heading {
    font-size: 1.2rem;
    margin: 0;
}

.heading span {
    color: #757575;
}

.sub-heading {
    font-size: .9rem;
    margin-top: .4rem;
    color: #757575;
}

input,
select {
    border: 1px solid #D9D9D9;
    border-radius: var(--border-radius);
    height: 1.9rem;
    padding-left: .5rem;
}

input {
    padding-left: .8rem;
}


/* 
 * ------------------------
 * Latest newsletter styles 
 * -------------------------
*/

.latest-newsletter-container {
    width: 100%;
    justify-content: center;
    aspect-ratio: 16/9;
    /* revise */

    scroll-snap-type: x mandatory;
}

@media (min-width: 950px) {
    .latest-newsletter-container {
        height: 70vh;
    }
}

.latest-newsletter-container a {
    display: flex;
    width: 100%;
    height: 100%;


    scroll-snap-stop: always;
    scroll-snap-align: start;
}

.latest-newsletter-container a img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 
 * ------------------------
 * Archive newsletter styles 
 * -------------------------
*/

.newsletters-container .newsletter-item a {
    display: flex;
    width: 100%;
    height: 100%;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.newsletters-container .newsletter-item {
    border-radius: 5px;
    user-select: none;
    -webkit-user-select: none;
}

.newsletters-container .newsletter-item img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.arrow-navigation {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.arrow-navigation .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #001430;
    border-radius: var(--border-radius);
    color: #EFF4FA;
    transition: all 300ms;
}

.arrow-navigation .arrow:hover {
    background-color: #EFF4FA;
    color: #001430;
}

.arrow-navigation .left {
    transform: rotate(180deg);
}

button.disabled,
.arrow.disabled {
    pointer-events: none;
    background-color: #D3D3D3;

    /* opacity: 0.5; */
}


@media (max-width: 768px) {

    .newsletters-container {
        display: flex;
        width: 100%;
        overflow-x: scroll;
        flex-wrap: nowrap;
        gap: 1rem;
        scrollbar-width: none;
        /* For Internet Explorer and Edge */
        -ms-overflow-style: none;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    /* For Chrome, Safari, and Opera */
    .newsletters-container::-webkit-scrollbar {
        display: none;
    }

    .newsletters-container .newsletter-item {
        display: flex;
        flex-shrink: 0;
        width: 60%;
    }

    .newsletters-container .newsletter-item a img {
        object-fit: cover;
        width: 100%;
        height: 100%;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media (min-width: 768px) {
    .newsletters-container {
        /* display: grid; */
        margin-top: 2rem;

        display: flex;
        flex-wrap: wrap;

        /* grid-template-columns: repeat(6, minmax(40px, 1fr)); */
        width: 100%;
        gap: 1rem;
        overflow: hidden;
        justify-content: center;
        background-color: transparent;
    }

    .latest-newsletter-container,
    .newsletter-item {
        overflow: hidden;
    }

    .newsletter-item {
        flex: 0 0 calc((100% - (5 * 1rem + 30px)) / 6);
    }

    .newsletter-item:nth-child(9),
    .newsletter-item:nth-child(3) {
        margin-right: 30px;
    }

    .latest-newsletter-container a img,
    .newsletter-item a img {
        transition: transform 800ms;
    }

    .latest-newsletter-container:hover a img,
    .newsletter-item:hover a img {
        transform: scale(1.09);

    }

    .arrow-navigation {
        display: none;
    }
}

/* 
 * ------------------------
 * Search newsletter styles 
 * -------------------------
*/

.search-nl-container {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    align-items: flex-start;
    max-width: 650px;
    /* revise */
    /* border: 1px solid red;   */

    /* Local variables */
    --border-radius: 8px;
    overflow: hidden;
}



.section-results,
.section-form {
    flex: 1 1 0;
    /* height: set on js (ex: 240px) */
}

.section-results {
    display: flex;
    justify-content: center;
    position: relative;
}

.searched-nl-item {
    position: absolute;

}



.searched-nl-item,
.loader-section {
    height: 100%;
    /* (ex: to -> 240) */
}

.loader-section {
    transition-property: opacity;
    transition-duration: 1200ms;
}

.searched-nl-item a {
    display: flex;
    height: 100%;
    /* (ex: to -> 240)*/
}

.searched-nl-item a img {
    width: 100%;
    object-fit: contain;
}

.section-form {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.loader-section {
    display: flex;
    justify-content: center;
    /* background-color: #EAEAEA; */
    z-index: 99;
}

.input-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .2rem;
}

.input-field label {
    font-size: 1rem;
}

.input-field .tooltip {
    margin: 0;
    margin-bottom: .4rem;
    font-size: .6rem;
    color: #757575;
}

.input-field input {
    font-size: 1rem;
}

.button-field {
    margin-top: .8rem;
    width: 100%;
}

.button-field button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    border: none;
    width: 100%;
    height: 1.9rem;
    background-color: #001430;
    color: white;
    border-radius: var(--border-radius);
    transition: all 330ms;
}


.button-field button:hover {
    background-color: #EFF4FA;
    color: #001430;
}

.button-field button:hover svg {
    color: #001430;
}

.button-field .label-button {
    font-size: 1rem;
    margin: 0;
}

.button-field button.disabled {
    pointer-events: none;
    background-color: #D3D3D3;
    /* opacity: 0.5; */
}

.loader-svg {
    width: 100%;
    height: 100%;
    fill: white;
    position: absolute;
}

.button-field button:hover .loader-svg {
    fill: #001430;
}

@keyframes circles {
    0% {
        transform: translateY(-60%)
    }

    100% {
        transform: translateY(60%)
    }
}

.loader-svg.hidden,
.search-svg.hidden,
.label-button.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-svg .circle {
    transform: translateY(-60%);
    transform-box: fill-box;
    animation: circles 500ms ease-in alternate infinite;
}

.circle.c2 {
    animation-delay: 200ms;
}

.circle.c3 {
    animation-delay: 400ms;
}


.searched-nl-item {
    position: relative;
}

.searched-nl-item svg {
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
}

.searched-nl-item .text {
    font-size: .16rem;
    fill: #212121;
    transform-box: fill-box;
    transform: translateX(-50%);
}

.searched-nl-item a.hidden,
.searched-nl-item .item-placeholder.hidden,
.searched-nl-item .not-found-svg.hidden {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}