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

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

#cp-cupom-posthaus h1,h2,h3,h4,p,a{
    font-family: 'Poppins', sans-serif;
}

#cp-cupom-posthaus p, h1, h2, h3{
    color: #ffffff;
}

#cp-cupom-posthaus p{
    font-size: 14px;
    margin-bottom: 0;
}

#cp-cupom-posthaus h1{ font-size: 28px; font-weight: bold;}

#cp-cupom-posthaus h2{ font-size: 24px;font-weight: bold;}

#cp-cupom-posthaus h3{ font-size: 18px; font-weight: bold;}

.img-adicionar-desktop{border-radius: 16px;}



/*----Header----*/
.cp-bg-banner{
    background-image: url("https://ph-cdn3.ecosweb.com.br/web/cp-urls/posthaus/nova-id/2023/cupom-posthaus/img/banner-mobile.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color:#181818;
    color: #ffffff;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
   
}

.cp-bg-banner h1{
    font-size: 42px!important;
    
}

.ajust-content-collumn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
       
}

.cp-social-icons a{
    text-decoration: none;
}

.btn-outline-cp{
    width: 100%;
    max-width: 240px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: rgba(10, 57, 107, 0.1);
    font-weight: 600;
    margin: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}
a.btn-outline-cp{
    text-decoration: none;
    color: #ffffff;
}

.coupon-style{
    width: 100%;
    max-width: 1230px;
    height: 275px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0 auto;
    border: 1px solid #E9E9E9;
    border-radius: 8px;
}
 
.coupon-content{
    width: 100%;
    max-width: 1230px;
    height: 275px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 15px 0 15px 0;
}

.coupon-value{
    width: 100%;
    max-width: 320px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.value-data-desconto{
   
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
    width: 100%;
    max-width: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #181818;
    color: #ffffff;
    height: 72px;
    border-radius: 8px;
    font-size: 42px;
    text-align: center;
    padding-top: 5px;
    font-family: 'Poppins', sans-serif;
}

.value-data-frete{
    background-image: url("https://ph-cdn3.ecosweb.com.br/web/cp-urls/posthaus/nova-id/2023/cupom-posthaus/img/cp-frete.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
    width: 100%;
    max-width: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: #181818;
    color: #ffffff;
    height: 72px;
    border-radius: 8px;
    font-size: 42px;
    text-align: center;
    padding-top: 5px;
}

.code-coupon{
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:10px 40px
}

.code-coupon textarea{
    width: 100%;
    max-width: 260px;
    height: 52px;
    outline: 2px dashed #5070E3;
    border: none;
    padding-top: 8px;
    text-align: center;
    color: #5070E3;
    font-weight: bold;
    font-size: 24px;
    resize: none;
    overflow: auto;
    border-radius: 8px;
}

/*Botões*/
.button-area{
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
   
}
.btn-copy-cp{
    width: 100%;
    max-width: 160px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #181818;
    color: #181818!important;
    background-color: #ffffff;
    font-weight: 600;
    outline: none;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

a.btn-copy-cp{
    text-decoration: none;
    color: #181818;
}

.btn-copy-cp:focus {outline:0;}

.btn-use-cp{
    width: 100%;
    max-width: 160px;
    height: 48px;
    border-radius: 8px;
    border: none;
    color: #ffffff;
    background-color: #5070E3;
    font-weight: 600;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
a.btn-use-cp{
    text-decoration: none;
    color: #ffffff;
}
.btn-use-cp:focus {outline:0;}
.btn-use-cp:hover{background-color:#181818;}

.btn-defeault-blue-cp{
    width: 100%;
    max-width: 290px!important;
    height: 48px;
    border-radius: 8px;
    border: none;
    color: #ffffff;
    background-color: #181818;
    font-weight: 600;
    margin: 10px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

a.btn-defeault-blue-cp {
    text-decoration: none;
    color: #ffffff;
}

.duvidas{margin: 0;}

.btn-use-cp:focus {outline:0;}

.coupon-conditions{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color: #F8F8F8;
    text-align: center;
    padding: 15px;

}

.coupon-conditions p{
    font-size: 12px!important;
}
.cp-subscribe{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.cp-text-content{
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
    }

.cp-paragraph{line-height: 24px;}

.title-h3{
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
}
.arrow-toggle{
    display: none;
    right: 0;
    position: relative;
    cursor: pointer;
}
.cp-img-ajust{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}

.faq-content p{
    text-align: justify;
}



.line{
    width: 100%;
    height: 1px;
    background-color: #E9E9E9;
    margin: 20px 0;
}


@media screen and (max-width: 768px) {
    .cp-bg-banner{
        height: auto;
        flex-direction: column;
        text-align: center;
        padding: 60px 0 60px 0;
    }

    .cp-bg-banner h1{
        text-align: center!important;
    }
   
    .coupon-style{
        height: auto;
        flex-direction: column;
        max-width: none;
        border: none;
    }
    .coupon-content{
        height: auto;
        flex-direction: column;
        max-width: none;
    }

    .value-data{
        border-radius: 4px 4px 0 0;
    }

    .coupon-value{
        max-width: 380px;
    }
    .value-data-desconto{
        max-width: 380;
    }
    .value-data-frete{
        max-width: 380;
    }

    .cp-subscribe{
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .title-h3 img{position: none; float: right; margin-right: 15px;}
  }

  @media screen and (max-width: 425px) {
  
   
    
    .btn-defeault-blue-cp{
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
    }
    .duvidas{
        margin: 0 auto
    }
    .arrow-toggle{display: block;}
  }

  @media screen and (max-width: 320px) {
    .button-area{
        flex-direction: column;
    }

    .btn-copy-cp,.btn-use-cp{max-width: none;}
  }
  /* ===== Layout responsivo 4 colunas no desktop ===== */
.coupon-content {
  /* mobile default (mantém seu comportamento atual) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Logo: controla tamanho e centralização */
.coupon-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.coupon-logo img {
  max-width: 140px;  /* ajuste conforme necessidade */
  width: 100%;
  height: auto;
}

/* Borda do CUPOM (textarea) — contorno preto fino e arredondado */
#cp-cupom-posthaus .code-coupon textarea,
.code-coupon textarea {
  border: 1px solid #000 !important;   /* contorno preto fino */
  outline: none !important;            /* remove outline/dashed */
  border-radius: 8px !important;       /* cantos arredondados */
  background: #fff;
  padding-top: 8px;
}

/* Desktop ≥ 992px: Grid 4 colunas e botões em coluna */
@media (min-width: 992px) {
  .coupon-content {
    display: grid;
    grid-template-columns: 180px 1fr 260px 200px; /* logo | desconto | cupom | botões */
    gap: 16px;
    align-items: center;
    justify-items: center; /* centraliza conteúdo em cada célula */
    padding: 15px 24px;    /* um pouco mais de respiro lateral */
  }

  /* Ajustes individuais por coluna */
  .coupon-logo { justify-self: center; }
  .coupon-value { justify-self: center; text-align: center; }
  .code-coupon { justify-self: center; }

  /* Botões em COLUNA no desktop (copiar em cima, utilizar abaixo) */
  .button-area {
    display: flex;
    flex-direction: column;       /* empilha verticalmente */
    align-items: stretch;         /* botões ocupam a largura da coluna */
    justify-content: center;
    gap: 10px;
    max-width: 200px;             /* casa com a largura da coluna */
    width: 100%;
  }
  .button-area .btn-copy-cp,
  .button-area .btn-use-cp {
    max-width: none;              /* libera largura total da coluna */
    width: 100%;
  }
}

/* Mobile < 992px: garante botões lado a lado (seu padrão) */
@media (max-width: 991.98px) {
  .button-area {
    display: flex;
    flex-direction: row;     /* lado a lado */
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
}
/* ===== Anti-overlap no mobile ===== */
@media (max-width: 991.98px) {
  /* Garante espaçamento após a chamada/banner do topo */
  .ph-top-banner-wrap,
  .cp-bg-banner {
    margin-bottom: 24px !important;
  }

  /* Reseta layout dos cupons e evita qualquer posicionamento que cause sobreposição */
  .coupon-style, .coupon-content, .value-data-desconto {
    position: static !important;
  }

  /* Dá um respiro no primeiro cupom (caso a chamada use posição fora do fluxo) */
  .coupon-style:first-of-type {
    margin-top: 12px;
  }

  /* Ajuste de tamanho do selo de desconto para não “invadir” a área acima */
  .value-data-desconto {
    font-size: 28px !important;   /* estava muito grande em alguns casos */
    line-height: 1.1 !important;
    padding: 10px 12px !important;
  }
}
.coupon-logo img{
  display:block;
  max-width:100%;
  height:auto !important;
  width:var(--logo-w-desktop,140px) !important;
}
@media (max-width:767.98px){
  .coupon-logo img{
    width:var(--logo-w-mobile,96px) !important;
    height:auto !important;
  }
}
/* === Centralizar títulos e o botão "Tire suas dúvidas" === */

/* H2 da seção "Como usar..." e do bloco de FAQ */
.cp-text-content h2,
.faq-content h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Títulos H3 dentro das linhas com seta */
.faq-content .title-h3 {
  display: flex;                /* mantém a seta */
  align-items: center;
}
.faq-content .title-h3 > div:first-child {
  flex: 1;                      /* ocupa a linha */
  text-align: center;           /* centraliza o h3 */
}
.faq-content .title-h3 h3 {
  margin: 0;                    /* remove deslocamentos */
}

/* Centraliza o botão "Tire suas dúvidas" */
.faq-content {
  text-align: center;           /* centraliza conteúdo inline */
}
.faq-content .duvidas {
  display: inline-block;        /* permite centralização pelo text-align do pai */
}