@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Light.woff2') format('woff2'), url('../fonts/Graphik-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Semibold.woff2') format('woff2'), url('../fonts/Graphik-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Regular.woff2') format('woff2'), url('../fonts/Graphik-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Bold.woff2') format('woff2'), url('../fonts/Graphik-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Medium.woff2') format('woff2'), url('../fonts/Graphik-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-RegularItalic.woff2') format('woff2'), url('../fonts/Graphik-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --main-yellow: #FFDD23;
  --main-purple: #5a2b85;
  --main-red: #E84757;
}

a { color: inherit; text-decoration: none; transition: all 0.3s; }
a[role="button"] { cursor: pointer; }
a:hover { color: rgb(23, 25, 26); }

ul { list-style: none; padding: 0; margin: 0; }
.hidden { display: none; }

.row, .row>* { position: relative; margin: 0; padding: 0; }

/* Classes */
.bg-main-green { background-color: var(--main-red); }
.bg-main-purple { background-color: #FFF; }
.main-green { color: var(--main-yellow); }
.main-purple { color: var(--main-yellow); }

.button-main-green{
  background-color: var(--main-red);
  color: var(--main-yellow);
  border: 0;
  border-radius: 100px;
  font-family: 'Graphik';
  font-weight: 600;
}

/* Custom */
header { background-color: var(--main-yellow); padding: 2rem 0; display: flex; align-items: center; justify-content: center; }
header .logo { max-width: 500px; }
.col-md-12 { display: flex; justify-content: center; }

.banner { display: flex; font-family: 'Graphik'; height: auto; flex-direction: column; min-height: 43vw; background: #EFEFEF; position: relative; }
.banner .row { flex-grow: 1; }
.banner .row .left { display: flex; align-items: center; }
.banner h1 { font-size: 3vw; font-weight: bold; color: #000000; width: -moz-fit-content; margin: 0; }
.banner h1 span { color: var(--main-red); }
.banner h2 { font-size: 1.8vw; color: #000000; letter-spacing: 0px; font-weight: normal; }
.banner h2 span { font-weight: bold; }
.banner .line { height: 3px; background-color: var(--main-red); width: 7.3vw; margin: 20px 0; }
.banner .button-main-green { font-size: 2vw; text-transform: uppercase; }
.banner .modelo { position: absolute; height: auto; width: 100%; bottom: 0; right: 0; }
.banner .wrapper { display: block; margin-top: 0; margin-left: 9vw; }
.banner .resgate-seus-pontos { display: block; margin-left: -2.5vw; color: white; font-size: 1.3vw; }

#cadastro { padding: 7vh 0; font-family: 'Graphik'; }
#cadastro a.button-main-green { display: block; width: fit-content; margin: 0 auto 7vh; font-size: 1.5vw; box-shadow: 0 5px 10px rgba(0,0,0,.3); padding: 1rem 4rem; }
#cadastro form { margin: auto; padding: 1.5rem 2.5vw; border-radius: 15px; width: 600px; }
#cadastro form h2 { font-size: 2.35vw; font-weight: 600; color: var(--main-yellow); margin: 0 !important; }

label.error { text-align: left; display: block; margin: 0.5rem; font-size: 12px; font-weight: 600; color: #ffff; }
input[type="radio"]+label.error, input[type="checkbox"]+label.error { position: absolute; margin-top: 0.5rem; color: #ffff; }
input[type="radio"]+label.error { right: 0; }
input[type="checkbox"]+label.error { margin-top: 3rem; }

#cadastro form input:not([type="radio"]):not([type="checkbox"]), #cadastro form select{
  display: block; width: 100%; margin-top: 1rem; padding: .7rem 1rem; border: none; border-radius: 13px; text-transform: uppercase; font-size: 13px; background: #fff; outline: none;
}
#cadastro form .tel{ margin-top: 1rem; }
#cadastro form .tel span{ text-align: left!important; font-size: 14px; color: #FFF; display: block; padding: .4rem 0 0 .4rem; }
#cadastro form select{ padding: 1rem; }

#cadastro form .radio label:not(.error){ display: block; text-align: left; font-weight: 600; color: var(--main-yellow); }
#cadastro form .radio span{ margin: 0 .5rem; color: #FFF; }
#cadastro form .radio input{
  -webkit-appearance:none; width:20px; height:20px; border:none; border-radius:50%; outline:none; background:#fff;
}
#cadastro form .radio input:before{ content:''; display:block; width:60%; height:60%; margin:20% auto; border-radius:50%; }
#cadastro form .radio input:checked:before{ background: var(--main-red); }

#cadastro .servicos-desejados{ display:flex; flex-wrap:wrap; justify-content:space-between; }
#cadastro .servicos-desejados label{ flex:1 1 100%; text-align:left; font-weight:600; color: var(--main-yellow); }
#cadastro .servicos-desejados .servico{ display:flex; flex:0 0 auto; width:40%; justify-content:space-between; align-items:center; margin:1rem 0; }
#cadastro .servicos-desejados .servico span{ width:60%; text-align:left; padding-left:1rem; color:#FFF; font-size:14px; }
#cadastro .servicos-desejados .servico img{ width:30%; height:65px; object-fit:contain; }
#cadastro .servicos-desejados .servico input{
  -webkit-appearance:none; width:20px; height:20px; border:none; border-radius:50%; outline:none; background:#fff;
}
#cadastro .servicos-desejados .servico input:before{ content:''; display:block; width:60%; height:60%; margin:20% auto; border-radius:50%; }
#cadastro .servicos-desejados .servico input:checked:before{ background: var(--main-red); }

#cadastro button{
  background-color: var(--main-yellow); color: var(--main-red); border:0; border-radius:100px; font-family:'Graphik'; font-weight:600; text-transform:uppercase; margin-top:10px;
}
#cadastro .loja_favorita option{text-transform:capitalize;}

footer{ display:block; padding:5vh 0; }
footer .social{ display:inline-flex; }
footer .social a{ margin:.2rem; font-weight:bold; color: var(--main-red); }
footer .social a.link{ color: var(--main-red); }
footer .copyright{ font-size:12px; color:#8d8d8d; }

/* ============================= */
/* =======  MODAIS (OLD+NEW IDs) */
/* ============================= */

#modal-succes,
#modal-success-new,
#modal-success-update,
#modal-confirm-update{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none; /* oculto por padrão */
}

#modal-succes.update,
#modal-succes.confirm-update,
#modal-success-update,
#modal-confirm-update{
  display: none; /* reforço */
}

#modal-succes .container,
#modal-success-new .container,
#modal-success-update .container,
#modal-confirm-update .container{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-succes .box,
#modal-success-new .box,
#modal-success-update .box,
#modal-confirm-update .box{
  width: 100%;
  max-width: 600px;
  height: 387px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  padding: 2rem;
  z-index: 101;
  position: relative;
  margin: auto;

  /* mantém o visual antigo */
  background: linear-gradient(135deg, #ff007f, #ff5f5f, #ffae00);
  background-size: cover;
}

#modal-succes .box .info,
#modal-success-new .box .info,
#modal-success-update .box .info,
#modal-confirm-update .box .info{
  flex-shrink: 0;
  color: white !important;
}

#modal-succes .box p,
#modal-success-new .box p,
#modal-success-update .box p,
#modal-confirm-update .box p{
  font-size: 22px;
  color: white;
}

#modal-succes .box p span,
#modal-success-new .box p span,
#modal-success-update .box p span,
#modal-confirm-update .box p span{
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

#modal-succes .box .modelo,
#modal-success-new .box .modelo,
#modal-success-update .box .modelo,
#modal-confirm-update .box .modelo{
  position: absolute;
  top: 0;
  right: 0;
}

#modal-succes .box .fechar,
#modal-success-new .box .fechar,
#modal-success-update .box .fechar,
#modal-confirm-update .box .fechar{
  width: 63px;
  height: 63px;
  background: var(--main-yellow);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -25px;
  right: -25px;
  z-index: 101;
  cursor: pointer;
}

#modal-succes .box .fechar p,
#modal-success-new .box .fechar p,
#modal-success-update .box .fechar p,
#modal-confirm-update .box .fechar p{
  font-size: 43px;
  color: var(--main-red);
  font-weight: 500;
  display: block;
}

/* ======= FIX: mapear novos IDs para o mesmo overlay antigo ======= */
#modal-success-new,
#modal-success-update{
  display: none;                            /* oculto por padrão */
  position: fixed !important;               /* vira overlay */
  inset: 0 !important;                      /* top/right/bottom/left: 0 */
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,.6) !important;    /* backdrop */
  z-index: 9999 !important;                 /* acima de tudo */
}

/* Container centralizador */
#modal-success-new .container,
#modal-success-update .container{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Caixa do modal – igual ao estilo antigo (#modal-succes .box) */
#modal-success-new .box,
#modal-success-update .box{
  width: 100%;
  max-width: 600px;
  height: 387px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  padding: 2rem;
  position: relative;
  margin: auto;
  z-index: 10000;

  /* mesmo visual do antigo */
  background: linear-gradient(135deg, #ff007f, #ff5f5f, #ffae00);
  background-size: cover;
}

/* Texto e destaques */
#modal-success-new .box .info,
#modal-success-update .box .info{ color:#fff !important; }
#modal-success-new .box p,
#modal-success-update .box p{ font-size:22px; color:#fff; margin:0; }
#modal-success-new .box p span,
#modal-success-update .box p span{
  color:#000; font-weight:bold; text-transform:uppercase;
}

/* Imagem à direita (mesmo posicionamento do antigo) */
#modal-success-new .box .modelo,
#modal-success-update .box .modelo{
  position:absolute; top:0; right:0;
}
#modal-success-new .box .modelo img,
#modal-success-update .box .modelo img{
  display:block; width:100%; height:auto;
}

/* Botão fechar (X) – mesmo estilo antigo */
#modal-success-new .box .fechar,
#modal-success-update .box .fechar{
  width:63px; height:63px; background:var(--main-yellow);
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  position:absolute; top:-25px; right:-25px; cursor:pointer; z-index:10001;
}
#modal-success-new .box .fechar p,
#modal-success-update .box .fechar p{
  font-size:43px; color:var(--main-red); font-weight:500; display:block;
}