/* Importar variáveis de cores */
@import 'colors.css';

/* importar customziacoes */
@import 'customizations.css';

/*
* CLASSES UTILITÁRIAS DE CORES
* Substituem classes do Tailwind relacionadas a cores
*/

/* Cores de Texto */
.text-primary {
  color: var(--color-primary);
}

.text-gray {
  color: var(--color-gray-600);
}

.text-gray-light {
  color: var(--color-gray-800);
}

.text-gray-medium {
  color: var(--color-gray-600);
}

.text-gray-dark {
  color: var(--color-gray-900);
}

.text-gray-soft {
  color: var(--color-gray-500);
}

.text-white {
  color: var(--color-white);
}

.text-black {
  color: var(--color-black);
}

.text-red {
  color: var(--color-error);
}

.text-green {
  color: var(--color-success);
}

.text-blue {
  color: var(--color-info);
}

/* Cores de Texto - Dash (Substituem text-dash-*) */
.text-primary-vibrant {
  color: var(--color-primary-vibrant);
}

.text-primary-light {
  color: var(--color-primary-light);
}

.text-gray-ardosia {
  color: var(--color-gray-700);
}

.text-gray-medium-dash {
  color: var(--color-gray-medium-dash);
}

.text-dark-soft {
  color: var(--color-dark-soft);
}

/* Cores de Background */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-white-soft {
  background-color: var(--color-white-soft);
}

.bg-main {
  background-color: var(--color-bg-main);
}

.bg-gray-light {
  background-color: var(--color-gray-50);
}

.bg-gray-soft {
  background-color: var(--color-gray-100);
}

.bg-gray-medium {
  background-color: var(--color-gray-300);
}

.bg-dark {
  background-color: var(--color-dark);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-black-opacity-30 {
  background-color: var(--color-black-opacity-30);
}

.bg-white-opacity-100 {
  background-color: var(--color-white);
}

.bg-dark-footer {
  background-color: var(--color-dark-footer);
}

.bg-dark-bottom {
  background-color: #14141f;
}

.bg-primary-vibrant {
  background-color: var(--color-primary-vibrant);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
}

.bg-gray-soft-light {
  background-color: var(--color-gray-200);
}

.bg-gray-snow {
  background-color: var(--color-gray-100);
}

.bg-dark-soft {
  background-color: var(--color-dark-soft);
}

/* Cores de Borda */
.border-gray {
  border-color: var(--color-gray-200);
}

.border-gray-medium {
  border-color: var(--color-gray-300);
}

.border-light {
  border-color: var(--color-border);
}

/* Alias para compatibilidade */
.border-prata {
  border-color: var(--color-border);
}

/* Estados Hover */
.hover-text-primary:hover {
  color: var(--color-primary);
}

.hover-bg-gray:hover {
  background-color: var(--color-gray-100);
}

.hover-bg-primary:hover {
  background-color: var(--color-primary);
}

.hover-bg-primary-vibrant:hover {
  background-color: var(--color-primary-vibrant);
}

.hover-bg-primary-light:hover {
  background-color: var(--color-primary-light);
}

.hover-underline:hover {
  text-decoration: underline;
}

/*
* Efeitos de texto
*/
.texto-gradiente {  
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));  
  background-clip: text !important; 
  -webkit-background-clip: text !important;  
  color: transparent; 
}

.btn-gradiente {  
  background-image: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-dark) 50%, var(--color-primary-medium) 100%);  
  color: var(--color-white);
  border: none;
  background-size: 200% auto;
  transition: background-position 0.5s ease;
}

.btn-gradiente:hover {
  background-position: right center;
}

/*
* Botoes
*/
.primary-btn {
  background-color: var(--color-primary);
  color           : var(--color-white);
  border-radius   : 8px;
  font-weight     : 500;
  padding         : 12px 30px;
  font-size       : 16px;
  cursor          : pointer;
  border          : none;
  transition      : background-color 0.3s ease;
}

/* Botão Lista de Presentes */
#ver-lista-presentes {
  background-color: var(--color-white) !important;
  color           : var(--color-primary) !important;
  border          : 2px solid var(--color-primary) !important;
  border-radius   : 8px !important;
  font-weight     : 500;
  padding         : 12px 30px !important;
  font-size       : 16px;
  cursor          : pointer;
  transition      : all 0.3s ease;
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  text-decoration : none;
}

#ver-lista-presentes svg {
  width          : 20px;
  height         : 20px;
  stroke         : currentColor;
  transition     : transform 0.3s ease;
}

#ver-lista-presentes:hover {
  background-color: var(--color-primary) !important;
  color           : var(--color-white) !important;
  border-color    : var(--color-primary) !important;
  transform       : translateY(-2px);
  box-shadow      : var(--shadow-primary);
}

#ver-lista-presentes:hover svg {
  transform: scale(1.1);
}

#ver-lista-presentes:active {
  transform: translateY(0);
  box-shadow: var(--shadow-primary-active);
}

/* Botão Outline (estilo similar ao Lista de Presentes) */
.btn-outline {
  background-color: var(--color-white) !important;
  color           : var(--color-gray-600) !important;
  border          : 2px solid var(--color-gray-600) !important;
  border-radius   : 8px !important;
  font-weight     : 500;
  padding         : 12px 30px !important;
  font-size       : 16px;
  cursor          : pointer;
  transition      : all 0.3s ease;
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  text-decoration : none;
}

.btn-outline:hover {
  background-color: var(--color-primary) !important;
  color           : var(--color-white) !important;
  border-color    : var(--color-primary) !important;
  transform       : translateY(-2px);
  box-shadow      : var(--shadow-primary);
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: var(--shadow-primary-active);
}

/* 
* BARRA FIXA FOOTER 
*/
#stik-bar-evento {
  position        : fixed;
  bottom          : 0;
  left            : 0;
  right           : 0;
  background-color: var(--color-dark-footer);
  color           : var(--color-white);
  z-index         : 9999;
  box-shadow      : 0 -4px 20px rgba(0, 0, 0, 0.3);
  padding         : 12px 20px;
  display         : flex;
  align-items     : center;
  justify-content : center;
}

#stik-bar-evento .flex {
  gap             : 12px;
  width           : 100%;
  max-width       : 1200px;
  justify-content : center;
  align-items     : center;
}

/* Botão Confirmar Presença - Footer */
#confirmar-presenca-footer:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(147, 120, 227, 0.3);
}

@media (min-width: 640px) {
  #confirmar-presenca-footer {
    font-size: 16px;
    padding  : 12px 30px !important;
    min-width: 160px;
  }
}

/* Botão Lista de Presentes - Footer */
#go-to-list-gifts-footer {
  background-color: var(--color-white) !important;
  color           : var(--color-gray-600) !important;
  border          : 2px solid var(--color-border-light-alt) !important;
  border-radius   : 8px !important;
  font-weight     : 500;
  padding         : 12px 20px !important;
  font-size       : 14px;
  cursor          : pointer;
  text-decoration : none;
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  transition      : all 0.3s ease;
  min-width       : 140px;
  white-space     : nowrap;
}

#go-to-list-gifts-footer svg {
  width      : 18px;
  height     : 18px;
  stroke     : currentColor;
  transition : transform 0.3s ease;
  flex-shrink: 0;
}

#go-to-list-gifts-footer span {
  display: inline-block;
}

#go-to-list-gifts-footer:hover {
  background-color: var(--color-primary) !important;
  color           : var(--color-white) !important;
  border-color    : var(--color-primary) !important;
  transform       : translateY(-2px);
  box-shadow      : var(--shadow-primary);
}

#go-to-list-gifts-footer:hover svg {
  transform: scale(1.1);
}

#go-to-list-gifts-footer:active {
  transform: translateY(0);
  box-shadow: var(--shadow-primary-active);
}

@media (min-width: 640px) {
  #go-to-list-gifts-footer {
    font-size: 16px;
    padding  : 12px 30px !important;
    min-width: 180px;
  }
  
  #go-to-list-gifts-footer svg {
    width : 20px;
    height: 20px;
  }
}

/* Ajustes mobile para barra fixa */
@media (max-width: 639px) {
  #stik-bar-evento {
    padding: 10px 12px;
  }
  
  #stik-bar-evento .flex {
    gap: 8px;
    flex-wrap: wrap;
  }
  
  #confirmar-presenca-footer,
  #go-to-list-gifts-footer {
    flex: 1;
    min-width: calc(50% - 4px);
    padding: 10px 16px !important;
    font-size: 13px;
  }
  
  #go-to-list-gifts-footer svg {
    width : 16px;
    height: 16px;
  }
}

/* 
* HEADER STYLES 
*/
#header-container svg {
  width : 80px;
  height: auto;
}

#header-container svg circle {
  fill: var(--color-dark-svg) !important;
}

#header-container svg path {
  fill: var(--color-dark-svg) !important;
}

#evento-header {
  position        : absolute;
  top             : 0;
  right           : 0;
  left            : 0;
  z-index         : 50;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: var(--color-white);
  box-shadow      : var(--shadow-medium);
  height          : 70px;
}

#evento-header img {
  transition: all 0.2s;
}

/* 
* STICKY STYLES 
*/
#evento-header.is-sticky {
  position        : fixed;
  box-shadow      : var(--shadow-large);
  padding         : 8px 0;
  background-color: var(--color-white-rgba);
  backdrop-filter : blur(10px);
  animation       : slideDown 0.35s ease-out;
  height          : 60px;
}

#evento-header.is-sticky img {
  max-width: 80%;
}

#evento-header.is-sticky button {
  font-size: 14px;
  padding  : 7px 10px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

#nav-header a.current {
  color      : var(--color-primary);
  font-weight: bold;
}

/* 
* Pane effect 
*/
@-webkit-keyframes pane-in {
  0% {
    opacity          : 0;
    -webkit-transform: translateX(-100%);
  }

  100% {
    opacity          : 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes pane-in {
  0% {
    opacity       : 0;
    -moz-transform: translateX(-100%);
  }

  100% {
    opacity       : 1;
    -moz-transform: translateX(0);
  }
}

@keyframes pane-in {
  0% {
    opacity  : 0;
    transform: translateX(-100%);
  }

  100% {
    opacity  : 1;
    transform: translateX(0);
  }
}

.fadepane {
  -webkit-animation-name: pane-in;
  animation-name        : pane-in;
  display               : block !important;
}

@-webkit-keyframes pane-out {
  0% {
    opacity          : 1;
    -webkit-transform: translateX(0);
  }

  100% {
    opacity          : 0;
    -webkit-transform: translateX(-100%);
  }
}

@-moz-keyframes pane-out {
  0% {
    opacity       : 1;
    -moz-transform: translateX(0);
  }

  100% {
    opacity       : 0;
    -moz-transform: translateX(-100%);
  }
}

@keyframes pane-out {
  0% {
    opacity  : 1;
    transform: translateX(0);
  }

  100% {
    opacity  : 0;
    transform: translateX(-100%);
  }
}

.fadepane-out {
  -webkit-animation-name: pane-out;
  animation-name        : pane-out;
}

.animate-pane {
  -webkit-animation-duration: 0.6s;
  animation-duration        : 0.6s;
}

#wrap-sidebar.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

#wrap-sidebar:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: var(--color-dark);
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#galeria-content .swiper-button-next:after,
#galeria-content .swiper-button-prev:after {
  font-size: 28px;
}

#galeria-content .swiper-slide .group .cursor-grab {
  cursor: grab;
}

#galeria-content .swiper-slide .group .cursor-grab:active {
  cursor: grabbing;
}

#galeria-content .swiper-slide .group a[aria-label="Abrir imagem em tela cheia"] {
  cursor: pointer;
}

/* 
* Footer 
*/
#mc-embedded-subscribe-form {
  display       : flex;
  flex-direction: column;
}

#mc-embedded-subscribe-form label {
  color      : var(--color-white);
  font-size  : 16px;
  font-weight: 400;
}

#mc-embedded-subscribe-form #mce-response {
  color      : var(--color-white);
  font-size  : 16px;
  font-weight: 500;
}

#mc-embedded-subscribe-form #mce-EMAIL {
  font-size       : 16px;
  font-weight     : 500;
  border-radius   : 8px 8px 8px 8px;
  padding         : 12px 25px 12px 25px;
  background-color: var(--color-white);
  color           : var(--color-gray-800);
  width           : 100%;
  max-width       : 360px;
  margin-top      : 10px;
  min-height      : 40px;
}

#mc-embedded-subscribe-form #mc-embedded-subscribe {
  font-size       : 18px;
  font-weight     : 500;
  border          : none;
  border-radius   : 8px 8px 8px 8px;
  padding         : 12px 25px 12px 25px;
  background-color: var(--color-primary);
  color           : var(--color-white);
  width           : 100%;
  max-width       : 260px;
  margin-top      : 20px;
  margin-bottom   : 10px;
  min-height      : 40px;
}

#mc-embedded-subscribe-form #mc-embedded-subscribe:hover {
  background-color: var(--color-secondary);
}

#footer-menus .footer-title {
  color         : var(--color-white);
  font-size     : 21px;
  font-weight   : 600;
  margin-bottom : 16px;
  letter-spacing: 1px;
  font-family   : Roboto, ui-sans-serif, system-ui, sans-serif;
}

#footer-menus .link-footer {
  color      : var(--color-white);
  font-size  : 16px;
  font-weight: 400;
  display    : inline-flex;
  align-items: center;
  width      : auto;
}

#footer-menus .link-footer:hover {
  color: var(--color-secondary);
}

@media (max-width: 600px) {
  #footer-parallax h2 {
    font-size  : 28px;
    line-height: 32px;
    margin     : 0 0 10px 0;
  }
}

/*
* Popup de Confirmar Presenca
*/
#popup-confirmar.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

#popup-confirmar:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: var(--color-dark);
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#popup-presentear:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: var(--color-dark);
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#popup-presentear.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

#popup-identificacao:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: var(--color-dark);
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#popup-identificacao.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

.animate-popup {
  -webkit-animation-duration: 0.6s;
  animation-duration        : 0.6s;
}

.qty-btn-minus,
.qty-btn-plus {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 32px;
  height          : 32px;
  font-size       : 21px;
  border-radius   : 100%;
  cursor          : pointer;
  color           : var(--color-gray-medium-alt);
  background-color: var(--color-white);
  border          : 1px solid var(--color-border-light-alt);
}

.qty-btn-minus:hover,
.qty-btn-plus:hover {
  cursor          : pointer;
  color           : var(--color-white);
  background-color: var(--color-primary);
  border          : 1px solid var(--color-primary);
}

.quantity {
  opacity       : 1;
  color         : var(--color-gray-900);
  text-align    : center;
  padding-top   : 0.25rem;
  padding-bottom: 0.25rem;
  padding-left  : 0.5rem;
  padding-right : 0.5rem;
  border-width  : 1px;
  border-radius : 0.25rem;
  width         : 5rem;
}

/* 
* Popup de Login 
*/
#popup-login.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

#popup-login:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: var(--color-dark);
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#popup-login .title-popup {
  font-size  : 26px;
  font-weight: 600;
  text-align : center;
  margin     : 20px 0 10px;
  padding    : 0;
}

#popup-login input {
  padding         : 10px 14px 10px 14px;
  color           : var(--color-gray-600);
  background-color: var(--color-white);
  border          : 1px solid var(--color-border);
  border-radius   : 8px;
  width           : 100%;
}

#popup-login .button {
  background-color: var(--color-primary);
  color           : var(--color-white);
  border-radius   : 8px;
  font-weight     : 400;
  padding         : 12px 30px;
  font-size       : 16px;
  width           : 100%;
  cursor          : pointer;
}

#popup-login .button:hover {
  background-color: var(--color-primary-light);
  color           : var(--color-white);
  border-radius   : 8px;
}

#popup-login p {
  margin-bottom: 12px;
}

/*
* Popup effect
*/
@-webkit-keyframes popup-in {
  0% {
    opacity          : 0;
    -webkit-transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity          : 1;
    -webkit-transform: scale(1) translateY(0);
  }
}

@-moz-keyframes popup-in {
  0% {
    opacity       : 0;
    -moz-transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity       : 1;
    -moz-transform: scale(1) translateY(0);
  }
}

@keyframes popup-in {
  0% {
    opacity  : 0;
    transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity  : 1;
    transform: scale(1) translateY(0);
  }
}

.popup-in {
  -webkit-animation-name     : popup-in;
  -moz-animation-name        : popup-in;
  animation-name             : popup-in;
  display                    : block !important;
  -webkit-animation-duration : 0.3s;
  animation-duration         : 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

@-webkit-keyframes popup-out {
  0% {
    opacity          : 1;
    -webkit-transform: scale(1) translateY(0);
  }

  100% {
    opacity          : 0;
    -webkit-transform: scale(0.8) translateY(-20%);
  }
}

@-moz-keyframes popup-out {
  0% {
    opacity       : 1;
    -moz-transform: scale(1) translateY(0);
  }

  100% {
    opacity       : 0;
    -moz-transform: scale(0.8) translateY(-20%);
  }
}

@keyframes popup-out {
  0% {
    opacity  : 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity  : 0;
    transform: scale(0.8) translateY(-20%);
  }
}

.popup-out {
  -webkit-animation-name     : popup-out;
  -moz-animation-name        : popup-out;
  animation-name             : popup-out;
  display                    : block !important;
  -webkit-animation-duration : 0.3s;
  animation-duration         : 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

/*
* Preloader
*/
.sbl-circ-path {
  height            : 48px;
  width             : 48px;
  color             : var(--color-gray-dark-rgba);
  position          : relative;
  display           : inline-block;
  border            : 5px solid;
  border-radius     : 50%;
  border-right-color: var(--color-gray-dark-alt);
  animation         : rotate 1s linear infinite;
}

#preload-response .sbl-circ-path {
  height            : 60px;
  width             : 60px;
  color             : var(--color-gray-dark-rgb);
  position          : relative;
  display           : inline-block;
  border            : 5px solid;
  border-radius     : 50%;
  border-right-color: var(--color-primary-light);
  animation         : rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Animação de flutuação */
@keyframes flutuar {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.flutuar {
  animation: flutuar 3s ease-in-out infinite;
}

/* Ajuste do Fancybox */
.fancybox__container {
  z-index: 99999 !important;
}

/* Animação de giro */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }