@tailwind base;
@layer base {
    img {
        @apply inline-block;
    }
}

@tailwind components;
@tailwind utilities;

body {
    --imcas-blue: #001148;
    --imcas-purple: #221E53;
    --imcas-academy-orange: #ED6F28;
    --imcasacademyintl:#ED6F28;
    --imcas-academy-hover-orange: #F08242F0;
    --counter-text: #859DFF;
    --swiper-pagination-color: var(--imcas-blue);
    --swiper-pagination-bottom: 0;
    --swiper-navigation-top-offset: 85%;
    --swiper-navigation-sides-offset: 0;
    --americas-secondary-light: #4152a4;
    --americas-secondary: #303e99;
    --americas-primary: #FACB0C;
    --asia-secondary-light: #EB9888;
    --asia-secondary: #E78773;
    --asia-primary: #1B8C79;
    --imcas-secondary-light: #292864;
    --imcas-secondary: #221E53;
    --imcas-primary: #001148;
    --china-secondary-light: #E05b70;
    --china-secondary: #C14859;
    --china-primary: #A12235;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;
    --imcasacademyintl-secondary: #FAB18C;
    --india-primary: #229EB8;
    --india-secondary: #F28C18;
    --india-secondary-light: #F49C3A;
    --imcas: #1E3A8A;
    --china: #9f1239;
    --asia: #0f766e;
    --americas: #CCAA00;
    --india: #be185d;
}

.overflow-x-scroll.blue, .overflow-y-scroll.blue, .overflow-y-auto.blue, .overflow-x-auto.blue {
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #eef2ff; /*indigo-50*/
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #a5b4fc; /*indigo-300*/
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #818cf8; /*indigo-400*/
    }
}

.overflow-x-scroll.white, .overflow-y-scroll.white, .overflow-y-auto.white, .overflow-x-auto.white {
    &::-webkit-scrollbar {
        width: 8px;
        height: 4px;
    }
    &::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.5);
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: white;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #e5e5e5;
    }
}

.overflow-x-scroll.gray, .overflow-y-scroll.gray, .overflow-y-auto.gray, .overflow-x-auto.gray {
    &::-webkit-scrollbar {
        width: 8px;
        height: 4px;
    }
    &::-webkit-scrollbar-track {
        background: rgba(148, 163, 184,0.5);
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #64748b;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #475569;
    }
}


.primary-font-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

div[data-raty] img {
    display: inline !important;
}

.primary-font-light {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.primary-font-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.primary-font-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.secondary-font {
    font-family: "ivyora-display", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.secondary-font-bold {
    font-family: "ivyora-display", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.secondary-font-italic {
    font-family: "ivyora-display", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.arrow {
    height: 2px;
    width: 14px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all .4s ease;
    /*//background: {{$arrowColor}};*/
}

button:hover .arrow, .has-arrow:hover .arrow {
    width: 20px;
    margin-right: 5px;
}

.arrow:before,
.arrow:after {
    content: "";
    position: absolute;
    /*   background: {{$arrowColor}};*/
    height: 2px;
    width:9px;
    border-radius: 10%;
}

.arrow:before {
    right: -2px;
    bottom: -3px;
    transform: rotate(-45deg);
}

.arrow:after {
    right: -2px;
    top: -3px;
    transform: rotate(45deg);
}

@media (max-width: 770px) {
    .arrow, .arrow:before,
    .arrow:after {
        background: white;
    }
}

.child {
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 10%);;
    box-shadow: 0px 0px 15px 2px rgb(0 0 0 / 10%);;
}

.nav-button:hover + .hover-border, .nav-button:focus + .hover-border {
    display: block;
}

swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 2000px) {
    .has-big-size-elt {
        bottom: -140px;
        /*        right: -384px;*/
    }

    .no-shift-in-big-size {
        right: -26rem;
        width: 90%;
    }

    #webinar {
        right: -17rem;
    }

    .has-big-width {
        width: 33%;
    }
}

#academy-button-arrow {
    align-self: end;
    position: relative;
    right: 100px;
}

.has-linear-gradient {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 11.69%, #000000 22.64%, #000000 50.56%, #000000 78.72%, rgba(0, 0, 0, 0.5) 88.28%, rgba(196, 196, 196, 0) 100%);
}

.hide-r {
    display: none !important;
}


.loader {
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.wechat-icon-modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.wechat-icon-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    min-width: 340px;
    position: relative;
    top: 40%;
    right: 0;
    transform: translateY(-50%);
}

.infinite {
    background: linear-gradient(90deg, rgb(198, 166, 91) 0%, rgb(231, 210, 130) 26%, rgb(254, 252, 188) 44%, rgb(204, 166, 86) 65%, rgb(165, 112, 43) 100%);
}

.background-only-on-text, .with-gold-text > span {
    -webkit-text-fill-color: transparent;
}

@keyframes scaleIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.7);
    }
}

.scale-slides {
    .swiper-slide {
        transform-origin: top center;
        transition: transform 0.5s ease;
    }

    .swiper-slide-prev, .swiper-slide-next {
        animation: scaleIn 0.5s forwards;
    }
}

body .anchor:before {
    content: "";
    display: block;
    height: 90px;
    margin: -90px 0 0;
    visibility: hidden;
    pointer-events: none;
}


body .anchor-with-submenu:before {
    content: "";
    display: block;
    height: 140px;
    margin: -140px 0 0;
    visibility: hidden;
    pointer-events: none;
}

@media screen and (max-width: 1024px) {
    .anchor:before {
        height: 72px;
        margin: -72px 0 0;
    }

    .anchor-with-submenu:before {
        height: 120px;
        margin: -120px 0 0;
    }
}


a, button, video {
    cursor: pointer;
}

.position-relative {
    padding: 1rem 0 1rem 0;
    display: flex;
    font-weight: 500;
}

.position-relative::before {
    content: '-';
}

.list > li {
    list-style-type: disc;
    margin-left: 2rem;
}

.custom-shadow-key-moments-box {
    box-shadow: -18px 9px 45px 0px #0000001A,
    -73px 37px 82px 0px #00000017,
    -165px 84px 111px 0px #0000000D,
    -292px 150px 131px 0px #00000003,
    -457px 234px 144px 0px #00000000;
}

.custom-shadow-key-moments-button {
    box-shadow: 3px 3px 9px 0px #0000001A,
    11px 13px 17px 0px #00000017,
    25px 28px 23px 0px #0000000D,
    44px 50px 27px 0px #00000003,
    69px 79px 29px 0px #00000000;

}

.custom-venue-and-getting-there-shadow {
    box-shadow: 0px 30px 66px 0px #0000001A,
    0px 119px 119px 0px #00000017,
    0px 268px 161px 0px #0000000D,
    0px 477px 191px 0px #00000003,
    0px 746px 209px 0px #00000000;
}

.boxed-content {
    max-width: 1440px;
    width: 100%;
}

.custom-shadow-for-buttons {
    &.light {
        box-shadow: 2px 5px 10px #e4e4e4;
    }

    &.dark {
        box-shadow: 2px 5px 10px #000E3D;
    }
}

.text-3xl-transparency {
    --s: 2px; /* set this as a CSS var to modify in MQ later */
    --o: calc(0.5 * var(--s));
    --border-text-color: white;
    font: 1.875rem/ .75 Poppins;

    @supports (line-height: 1cap) {
        line-height: 1cap
    }
    color: #0000;
    -webkit-text-stroke: var(--border-text-color) calc(var(--o));
}

.btn-next-style {
    background-color: #6366f1; /*indigo-500*/
    border: 1px solid #6366f1;
    color: white;

    &:hover {
        background-color: #3A53BB;
        border-color: #3A53BB;
    }

    &:active {
        border-color: #3A53BB;
        background-color: #3A53BB;
        color: white;
    }

    &:focus {
        border-color: #3A53BB;
        background-color: #3A53BB;
        outline-offset: -3px;
        outline-style: solid;
        color: white;
        outline-color: #E0E7FF; /*indigo-100*/
    }
}

.btn-submit-style {
    background-color: #10b981; /*emerald-500*/
    border: 1px solid #10b981;
    color: white;

    &:hover {
        background-color: #3A8F6F;
        border-color: #3A8F6F;
    }

    &:active {
        border-color: #3A8F6F;
        background-color: #3A8F6F;
        color: white;
    }

    &:focus {
        border-color: #3A8F6F;
        background-color: #3A8F6F;
        outline-offset: -3px;
        outline-style: solid;
        color: white;
        outline-color: #A7E6D5;
    }
}

.custom-button-account-shadow {
    box-shadow: 0 2px 6px 0 #13124200;

}

.custom-exhibit-button-shadow {
    box-shadow: 5px 4px 7px 2px #00000008;
}

.custom-exhibit-product-shadow {
    box-shadow: 0 4px 20px 0 #00000012;
}

.container-exhibit-product:hover > div > a > .add-to-cart-exhibit-product {
    display: block;
}

.tag-new-product {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 86.3%, 0% 100%);
    background: linear-gradient(5.53deg, #00FFF2 -25.49%, #009991 127.55%, #00BBB2 237.01%);
}

.tag-new-product-text {
    transform: rotate(90deg);
}

.custom-shadow-for-pps-opening-date {
    box-shadow: 5px 5px 10px 0 #00000005;
}

.sponsorship_level_modal {
    &:before, &:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    &:after {
        border-color: rgba(255, 250, 255, 0);
        border-bottom-color: white;
        border-width: 12px;
        margin-left: -12px;
    }

    &:before {
        border-color: rgba(220, 220, 222, 0);
        border-bottom-color: var(--imcas-blue);
        border-width: 15px;
        margin-left: -15px;
    }


}

@media screen and (max-width: 1024px) {
    .sponsorship_level_modal {
        &:before, &:after {
            left: 20%;
        }
    }
}

.contact-custom-shadow {
    box-shadow: 0 4px 10px 0 #0000001A;
}

#additional_inquiry_infos {
    & a {
        text-decoration: underline;
        font-weight: 600;
        color: var(--imcas-purple);
    }
}

.speaker-picture:hover {
    & > .speaker-picture-hover-content {
        display: flex;
    }
}

.speaker-picture {
    & > .speaker-picture-hover-content {
        display: none;
    }
}

.custom-shadow-congress-card-dashboard {
    box-shadow: 0 4px 15px 0 #0000002E;
}

.body-message a {
    text-decoration: underline;
    color: var(--imcas-purple);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.custom-company-account-card-shadow {
    box-shadow: 0px 2px 6px 0px #13124212;
}

.tab-bordered {
    color: #94a3b8; /*slate-400*/

    &:hover {
        background-color: #f9fafb;
        color: #374151;
    }
}

.tab-bordered-active {
    color: #a5b4fc;
}

.tab {
    color: #94a3b8; /*slate-400*/

    &:hover {
        color: var(--imcas-blue);
    }
}

.tab-active {
    background-color: #E0E7FF; /*indigo-100*/
    color: var(--imcas-blue);
}

.modal-shadows {
    box-shadow: 0 4px 6px -2px #10182808, 0 12px 16px -4px #10182814;
}

.badge-container.selected {
    border-width: 0.5px;
    border-color: #a5b4fc;

    & > div.badge-content {
        background-color: #E0E7FFE5; /*indigo-100*/
    }
}

.has-rounded-arrow-tooltip {
    width: 20px;
    height: 20px;
    background-color: inherit;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    transform: rotate(-45deg);
    border-radius: 0 0 0 0.25em;
}

.inset-shadows-guidelines {
    box-shadow: 0 1px 4px 0 #00000024 inset, 0 2px 4px 0 #00000014 inset;
}

.gala-filter {
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.3) 0%, rgba(3, 7, 18, 0.9) 100%);
}


/* Modal */
.jquery-modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 48rem;
    background: #fff;
    /*
    padding: 15px 30px;
    */
    padding: 40px 30px 15px 30px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: left
}

.jquery-modal a.close-modal {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNi43LjIgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTMyNC41IDQxMS4xYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwczYuMi0xNi40IDAtMjIuNkwyMTQuNiAyNTYgMzQ3LjEgMTIzLjVjNi4yLTYuMiA2LjItMTYuNCAwLTIyLjZzLTE2LjQtNi4yLTIyLjYgMEwxOTIgMjMzLjQgNTkuNiAxMDAuOWMtNi4yLTYuMi0xNi40LTYuMi0yMi42IDBzLTYuMiAxNi40IDAgMjIuNkwxNjkuNCAyNTYgMzYuOSAzODguNWMtNi4yIDYuMi02LjIgMTYuNCAwIDIyLjZzMTYuNCA2LjIgMjIuNiAwTDE5MiAyNzguNiAzMjQuNSA0MTEuMXoiLz48L3N2Zz4=');
}

#global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0D1631DB;
    z-index: 99999999;
    display: none;
}

.blocker {
    background-color: #0D1631DB;
    padding-top:50px;
    z-index: 99999;
}


.form-was-submitted .custom-input:invalid,
.form-was-submitted .custom-input-group:has(input:invalid) .custom-input-select,
.form-was-submitted .custom-input-group:has(input:invalid) .custom-input-checkbox,
.form-was-submitted .custom-input-group:has(input:invalid) .custom-input-radio {
    border: 1px solid #ef4444 !important;
}

.loader-pagination {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    box-sizing: border-box;
    animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
    33% {
        background: #FFF;
        box-shadow: -24px 0 var(--imcas-blue), 24px 0 #FFF;
    }
    66% {
        background: var(--imcas-blue);
        box-shadow: -24px 0 #FFF, 24px 0 #FFF;
    }
    100% {
        background: #FFF;
        box-shadow: -24px 0 #FFF, 24px 0 var(--imcas-blue);
    }
}

.fancybox__container {
    --fancybox-bg: #0D1631DB;
    margin-top: 6rem;
}

.fancybox__content>.f-button.is-close-btn {
    background-color: white;
    color: black;
    top:0;
}

@media screen and (max-width: 1024px) {
    .fancybox__container {
        margin-top: 80px;
    }
}

.text-with-shadow {
    text-shadow: 2px 2px 11px #00000029;

}


.checkbox-exhibit-product-option-container {
    .checkbox-exhibit-product-option {
        background-color: transparent;
        color:transparent;
    }
    & input[type="checkbox"]:checked + .checkbox-exhibit-product-option{
        background-color: #10b981;
        color: white;
    }
}

.note-modal-content {
    top:30%;
}


.custom-backdrop-filter {
    background: rgba(255, 255, 255, 0); /* fond semi-transparent */
    backdrop-filter: blur(4px); /* flou sur l’arrière-plan */
    -webkit-backdrop-filter: blur(4px); /* compatibilité Safari */
}
.session-thumb {
    & .session-template-hover {
        display:none;
    }
    &:hover .session-template-hover {
        display:flex;
        color: var(--imcas-blue);
    }
    &:hover {
        color:transparent;
        & .border-sympo {
            border-color: transparent;
        }
    }
}
.grid-centered {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    justify-content: center;
    margin: 0 auto;
}

.card-container-intro:hover {
    & .display-card-content {
        display:none !important;
    }
    & .hover-container-card {
        display:flex !important;
    }
}

@-webkit-keyframes gradient{
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes gradient{
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    animation: gradient 20s ease infinite;
    background-size: 400% 400%;
}