/*----Reset----*/

body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    }

#cp-cupom-quintess h1,h2,h3,h4,p,a{font-family: 'Open Sans', sans-serif; color: #212121;}

#cp-cupom-quintess p{font-size: 1rem;line-height: 24px;}

#cp-cupom-quintess h1{ font-size: 2.25rem; font-weight: bold;}

#cp-cupom-quintess h2{ font-size: 1.25rem;font-weight: 600;}

#cp-cupom-quintess h3{ font-size: 1.25rem; font-weight: 600; line-height: 32px;}

/*-Padrão para Botões-*/
#cp-cupom-quintess a.button-cp{
    width: 100%;
    height: 48px;
    cursor: pointer;
    display: flex;
    flex-direction: row;justify-content: center; align-items: center; text-align: center;
    font-weight: 600;
    outline: none;
    text-decoration: none;
    border-radius: 4px;
    margin: 8px;
}

.button-cp:hover{transition: 0.2s ease-in-out; opacity: 0.9;}

/*-Variações de Botões da Página-*/
.call-center{background-color: #212121; color: #ffffff!important; max-width: 290px; margin: 0!important;}
.copy{background-color: #212121; color: #ffffff!important; max-width: 240px;}
.use{background-color: #2BB981; color: #ffffff!important; max-width: 240px; }



.controller-width{width: 100%; max-width: 1280px; padding: 16px;}


/*Banner*/
.cp-bg-banner{
    background-image: url("https://ph-cdn3.ecosweb.com.br/web/cp-urls/quintess/2025/cupons/img/desktop.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #ffffff;
    color: #ffffff;
    height: 650px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-bottom: 72px;
}

.cp-bg-banner h1{color: #B26157!important; font-size: 3.5rem!important; font-family: 'Clarity-City',Arial, Helvetica, sans-serif;}

.flag-name{
    width: 100%;
    max-width: 320px;
    height: 42px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex; flex-direction: row; justify-content: start; align-items: center; 
    margin-bottom: 36px;
    box-shadow: 8px 32px 32px rgba(0, 0, 0, 0.1);
}

.flag-name:hover{
    transition: cubic-bezier(1, 0, 0, 1);
}

.flag-name p{ color: #B26157;}
.flag-name div{
    width: 100%;
    max-width: 48px;
    height: 42px;
    background: linear-gradient(90deg, #FF9900, #B26157, #FF9900);
    border-radius: 8px 0 0 8px; 

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

    -webkit-animation: waves 5s ease infinite;
    -moz-animation: waves 5s ease infinite;
    background-size: 300%;
    animation: waves 3s ease infinite;
    
}

@-webkit-keyframes waves {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes waves {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes waves { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.flag-name p{font-size: 1.25rem!important; padding: 16px 0 0 8px}

.coupon-content{
    width: 100%;
    max-width: 1280px;
    height: 200px;
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    margin: 0 auto;
}
 
.coupon-value{
    width: 100%;
    max-width: 320px;
    height: 200px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background-color: #B26157;
    border-radius: 16px;
}
.coupon-value h3{font-size: 3.5rem!important; font-weight: bold!important; color: #ffffff;  margin-top: 16px;}
.coupon-value p{ color: #ffffff; width: 100%; max-width: 200px; text-align: center; margin-top: 16px;}


.coupon-code{
   width: 100%;
   height: 200px;
   display: flex; flex-direction: row; justify-content: center; align-items: center;
   background-color: #FBFAFA;
   border-radius: 16px;
   border: 1px solid #CECECE;
}

.name-coupon{
  width: 100%;
  max-width: 320px;
  height: 200px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  margin: 0 32px;
}


.name-coupon textarea{
    width: 100%;
    max-width: 320px;
    height: 48px;
    outline: 1px dashed #B26157;
    border: none;
    text-align: center;
    color: #B26157;
    font-weight: bold;
    font-size: 1.5rem;
    resize: none;
    padding-top: 4px;
    border-radius: 4px;
    overflow: auto;
}

/*Botões*/
.button-area{
    width: 100%;
    height: 200px;
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    margin-right: 32px;
}

 .coupon-conditions p{
    font-size: 12px!important;
    color: #727272!important;
     }

.arrow-toggle{
    padding: 0 24px 0 0px;
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: 24px;
    cursor: pointer;
    transition: 0.2s;
}

.arrow-toggle:hover{
    transition: 0.2s ease-in-out;
    padding: 0 0 0 16px;
    border-bottom: 1px solid #270c22;
    
}




@media screen and (max-width: 768px) {
    #cp-cupom-quintess h3{ font-size: 1.15rem;}

    .cp-bg-banner{
        width: 100%!important;
        max-width: 100%;
        height: 720px;
        margin: 0 auto;
        background-image: url("https://ph-cdn3.ecosweb.com.br/web/cp-urls/quintess/2025/cupons/img/mobile.jpg");
        align-items: baseline;
        padding-top: 48px;
    }

    .cp-bg-banner h1{font-size: 2.5rem!important;}
    .flag-name {max-width: 256px;}
    .flag-name div{max-width: 36px;}
    .flag-name img{height: 18px;}
    .flag-name p{font-size: 1rem!important;}

    .controller-width{
        max-width: none;
    }

    .coupon-content{
        flex-direction: column;
        height: auto;
    }

    .coupon-code{
        flex-direction: column;
        padding: 0 16px;
    }

    .coupon-value{
        max-width: none;
    }

    .button-area{
        margin-right: 0px
    }

}

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

    .arrow-toggle{display: block;}
}