@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    /* font sizes */
    --cookieHeadlineFontSize: 15px;
    --cookieHeadlineFontWeight: 700;
    --cookieHeadlineLineHeight: 24px;

    --cookieDescriptionFontSize: 13px;
    --cookieDescriptionFontWeight: 500;
    --cookieDescriptionLineHeight: 22px;
    --buttonFontSize: 14px;

    --cookieTotalFontSize: 11px;

    --bannerFont: "Urbanist", sans-serif;

    --cookieHeadlineColor: rgb(20, 20, 20);
    --cookieDescriptionColor: rgb(4, 5, 9);


    --bannerAccentColor: #aa102d;
    --bannerColorWhite: rgb(255, 255, 255);


    --mainCookieBgColor: rgb(242, 242, 242);
    --InsideBorderColor: rgb(217, 217, 217);

    --noCookieFontSize: 12px;

    --cookieValueWeight: 400;

    --cookieTotalColor: white;

    --normalButtonColor: rgb(20, 20, 20);
    --activeButtonHoveColor: white;
}


/* optional */
.bannerHeadlineLogo img {
    background: white;
    border-radius: 5px;
}

.cookieValue {
    font-weight: var(--cookieValueWeight);
    color: var(--cookieDescriptionColor);
}

.rotate{
    transform: rotate(180deg);
}


/* for banner global headlines */
.cookieHeadline{
    font-size: var(--cookieHeadlineFontSize) !important;
    color: var(--cookieHeadlineColor) !important;
    font-family: var(--bannerFont) !important;
    font-weight: var(--cookieHeadlineFontWeight) !important;
    line-height: var(--cookieHeadlineLineHeight);
    display: block !important;
}

/* for banner global descriptions */
.cookieDescription{
    font-size: var(--cookieDescriptionFontSize) !important;
    color: var(--cookieDescriptionColor) !important;
    font-family: var(--bannerFont);
    font-weight: var(--cookieDescriptionFontWeight) !important;
    line-height: var(--cookieDescriptionLineHeight) !important;
}

.mainCookieDescription{
    font-size: var(--cookieDescriptionFontSize) !important;
    color: var(--cookieDescriptionColor) !important;
    font-family: var(--bannerFont);
    font-weight: var(--cookieDescriptionFontWeight) !important;
    line-height: var(--cookieDescriptionLineHeight) !important;
}

/* main banner box */
.cookieBannerWrapper{
    width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid;
    background: var(--bannerColorWhite);
    animation: opacity 0.5s;
    display: none;
    z-index: 99999;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}


/* banner logo */
.bannerHeadlineLogo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(217, 217, 217);;
}

.bannerHeadlineLogo svg{
    cursor: pointer;
}

/* banner nav */
.bannerSectionHeadlineWrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--InsideBorderColor);
}

.bannerSectionHeadlineWrapper div{
    width: 100%;
    text-align: center;
    border: var(--InsideBorderColor);
    padding: 20px 0px;
    cursor: pointer;
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
}

/* activating border bottom on the nav click */
.activeHeadlineBorder{
    border-bottom: 2px solid var(--bannerAccentColor) !important;
}

/* middle section banner content */
.bannerContent{
    padding: 20px 0px;
    border: var(--textBorder);
    display: none;
}

.cookieInfoSection{
    overflow-y: scroll;
    height: 35vh;
}

/* handle content section hide and show */
.bannerContentActive{
    display: flex;
}

.bannerContentInactive{
    display: none;
}


/* banner bottom buttons */
.bannerBottomSectionWrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 20px;
    padding-top: 25px;
/*     box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */
    border-top: 1px solid var(--InsideBorderColor);
}

.bannerBottomSectionWrapper button{
    width: 100%;
    font-size: var(--buttonFontSize);
    font-family: var(--bannerFont);
    padding: 15px 0px;
    border-radius: 5px;
    outline: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    background: var(--bannerColorWhite);
    transition: background 0.3s, color 0.3s;
    border: 1px solid var(--bannerAccentColor);
    color: var(--normalButtonColor);
}

.bannerBottomSectionWrapper .active{
    background: var(--bannerAccentColor);
    color: var(--activeButtonHoveColor);
}

.bannerBottomSectionWrapper .active:hover{
    background: var(--bannerAccentColor);
    color: var(--activeButtonHoveColor);
    opacity: 0.9;
}

.bannerBottomSectionWrapper button:hover{
    background: var(--bannerAccentColor);
    color: var(--activeButtonHoveColor);
}


.visibleFlex{
    display: flex;
}


.cookieSectionWrapper{
    display: flex;
    flex-direction: column;
    margin-top: -20px;
    padding: 0px 10px;
}

.cookieCategoryWrapper{
    border-bottom: 1px solid var(--InsideBorderColor);
    padding-bottom: 20px;
    padding-top: 20px;
}

.cookieCategoryTitle{
    display: flex;
    justify-content: space-between;
    row-gap: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

.cookieCategoryTitleLeft{
    display: flex;
    align-items: center;
    column-gap: 8px;
    width: 50%;
}

.arrowDown #SVGRepo_iconCarrier path{
    fill: var(--cookieHeadlineColor);
}

.cookietotal{
    background: var(--bannerAccentColor);
    color: var(--cookieTotalColor) !important;
    border-radius: 50%;
    font-size: var(--cookieTotalFontSize) !important;
    height: 18px;
    width: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}


.allCookieDetails{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.displayNone{
    display: none !important;
}

.displayBlock{
    display: block;
}

.displayFlex{
    display: flex;
}

.allCookieWrapperTitle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}

.allCookiesWrapper{
    padding: 20px;
    border: 1px solid var(--InsideBorderColor);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    animation: opacity 0.5s ;
}

@keyframes opacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.allCookieTitleLeft{
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    align-items: center;
    width: 50%;
}

.cookieProviderLearnMore{
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.cookieProviderLearnMore a{
    text-decoration: underline;
    color: var(--bannerAccentColor) !important;
}

.cookieProviderLearnMore a:hover{
    text-decoration: none;
}

.cookieProviderLearnMore svg *{
    fill: var(--cookieHeadlineColor);
    stroke: var(--cookieHeadlineColor)
}


.mainCookiesDetails{
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.mainCookieWrapper{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 20px;
    border-radius: 10px;
    font-family: var(--bannerFont);
    background-color: var(--mainCookieBgColor);
}

.bannerhr{
    border-top: 1px solid var(--InsideBorderColor);
}


.allCookiesOuter {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 15px;
}

/* toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 5px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: var(--bannerAccentColor);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
/*     -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px); */
    transform: translateX(26px);
    left: -3px;
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }


/* width */
::-webkit-scrollbar {
    width: 3px;
}
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--bannerColorWhite); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--bannerAccentColor);
    border-radius: 10px;
  }

.miniCookieIcon{
    display: none;
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: var(--bannerColorWhite);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    /* animation: fromBottom 0.5s; */
    animation: opacity 0.5s;
    z-index: 99999;
}

@keyframes fromBottom {
    from{
        bottom: -100px;
    }to{
        bottom: 10px;
    }
}

.miniCookieIcon svg{
    fill: var(--bannerAccentColor);
    width: 50px;
    border: 2px solid var(--bannerAccentColor);
    border-radius: 50%;
    cursor: pointer;
}

.NoCookieWarning{
    padding: 20px;
    border-radius: 10px;
    font-family: var(--bannerFont);
    background-color: var(--mainCookieBgColor);
    font-size: var(--noCookieFontSize);
}


.NoCookieWarning span{
    color: var(--cookieHeadlineColor) !important;
    font-family: var(--bannerFont) !important;
    font-weight: var(--cookieHeadlineFontWeight) !important;
    display: block !important;
}

.bannerLoader {
    position: fixed;
    width: 50px;
    height: 50px;
    border: 5px solid var(--mainCookieBgColor);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-bottom-color: var(--bannerAccentColor);
    border-radius: 50%;
    z-index: 10;
    display: none;
    animation: loader 1s linear infinite;
    transform-origin: center; /* Ensures rotation is centered */
}

.darkModeWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.darkModeWrapper svg{
    fill: var(--cookieHeadlineColor);
}

div#dark svg {
    width: 28px;
    margin-right: -5px;
}



.doubleCheckPopUp{
    width: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid;
    background: var(--bannerColorWhite);
    animation: opacity 0.5s;
    z-index: 99999;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    display: none;
    flex-direction: column;
    row-gap: 15px;
}


.secondBannerBtnWrapper{
    display: flex;
    column-gap: 20px;
}

.secondBannerBtn{
    width: 100%;
    font-size: var(--buttonFontSize);
    font-family: var(--bannerFont);
    padding: 15px 0px;
    border-radius: 5px;
    outline: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s, color 0.3s, opacity 0.3s;
    border: 1px solid var(--bannerAccentColor);
    background: var(--bannerColorWhite);
    color: var(--normalButtonColor);
}

.secondBannerBtn.active{
    background: var(--bannerAccentColor);
    color: var(--bannerColorWhite);
}

.secondBannerBtn.active:hover{
    opacity: 0.8;
}

.secondBannerBtn.declined:hover{
    opacity: 0.8;
    background: var(--bannerAccentColor);
    color: var(--bannerColorWhite);
}


@keyframes loader {
    from {
        transform: translate(-50%, -50%) rotate(0deg); /* Maintain initial position */
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg); /* Maintain initial position */
    }
}

.blur{
    filter: blur(1px);
}

/* medias */
/* medias */
@media only screen and (max-width: 900px) {
    .cookieBannerWrapper{
        width: 90%;
        border: 1px solid #a7a7a7;
    }
}


@media only screen and (max-width: 660px) {
    .doubleCheckPopUp{
        width: 90%;
        text-align: center;
    }
}


@media only screen and (max-width: 600px) {
    .bannerBottomSectionWrapper{
        display: flex;
        flex-direction: column;
        row-gap: 12px;
    }
}

@media only screen and (max-width: 500px) {

    .NoCookieWarning{
        padding: 15px;
    }

    :root{
        --cookieHeadlineFontSize: 12px;
        --cookieDescriptionFontSize: 10px;
        --cookieTotalFontSize: 10px;
        --noCookieFontSize: 13px;
        --buttonFontSize: 10px;
        --noCookieFontSize: 11px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 25px;
    }

    input:checked + .slider:before {
        transform: translateX(26px);
        left: -9px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 5px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
}