#emojiPicker {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  max-width: 528px;
}


.emoji-btn {
  font-size: 24px;
  cursor: pointer;
}

body.loading main,
body.loading footer,
body.loading #quickButtons,
body.loading #smallToggleContainer,
body.loading #shareSection {
  visibility: hidden;
}


body.loading #quickButtons,
body.loading #smallToggleContainer,
body.loading #shareSection {
  display: none;
}

body.loaded * {
  visibility: visible;
}


* {
  box-sizing: border-box;
}
/* só aplica em telas maiores que 768px (desktop) */
@media (min-width: 769px) {
  .center h2,
  .right h2 {
    text-align: center;
  }
}

/* Para telas pequenas */
@media (max-width: 768px) {
  
}



body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: #f0f4f8;
  color: #333;
  max-height: 100vh;  /* adicione isso */
  overflow-x: hidden;
}

header {
  background-color: #0077b6;
  padding: 10px 20px;
  color: white;
  display: flex; /* Add flexbox for layout */
  justify-content: flex-start; /* Align items to the left */
  align-items: center; /* Vertically center items */
  flex-wrap: nowrap; /* Prevent wrapping */
}

.logo {
   font-size: 1.5em;
  font-weight: bold;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto; /* Prevent logo from shrinking/stretching */
    z-index: 1; /* Ensure logo is below timerLink */
  position: relative; /* Ensure z-index applies */
}

/*.logo repetido*/
/*.logo {*/
 
  /*font-size: 1.3em;*/
/*}*/


main:not(.centered-single-column) {
    flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  padding: 10px 20px 20px 20px; /* top | right | bottom | left */
}

 

  



main > .left {
  flex: none;         /* não participe da distribuição de espaço */
  width: 100%;        /* ocupe toda a largura */
  text-align: center; /* centralize o conteúdo */
  margin-bottom: 0px;
}

.container {
  background: transparent;
  display: flex;
  flex-direction: column; /* 🔥 VAI EMPILHAR */
  align-items: center;     /* 🔥 VAI CENTRALIZAR */
  width: 100%;
  max-width: 1000px;
  gap: 20px; /* 🔥 espaço entre o timer e os próximos blocos */
}

.center {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center; /* CENTRALIZA TUDO HORIZONTALMENTE */
  text-align: center;
}







.center, .right {
  flex: 1;
}

.left h2, .center h2, .right h2 {
  margin-bottom: 4px;
}





input[type="datetime-local"] {
  width: 100%;
  padding: 5px;
  font-size: 1em;
}

.ignore-time {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 0.9em;
}

.ignore-time input {
  margin-right: 5px;
}

footer {
  background: #e1e1e1;
  text-align: center;
  padding: 15px;
  position: relative; /* ← corrigido */
  width: 100%;
  margin-top: 40px;    /* opcional: cria espaço entre conteúdo e footer */
}


footer a {
  color: #0077b6;
  text-decoration: none;
  margin: 0 10px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main h1 {
  display: block;
  font-size: 2em;
  margin-bottom: 20px;
  color: #333;
}

.centered-single-column {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

/* style.css */
.centered-single-column h1 {
  font-size: 2.5em;
  margin-bottom: 30px;
  color: #0077b6;
  text-align: center;
}


/* Aumentar o tamanho dos blocos centrais */
.left h2,
.center h2,
.right h2 {
font-size: 2em;
}

.left p,
.right input,
.ignore-time,
#countdown p {
font-size: 1.8em;
}



/* Ajustes no input de data */
input[type="datetime-local"] {
padding: 10px;
font-size: 1.3em;
}



/* Make the countdown values sit in a row */
/* === Opção 1: Block simples, cada <p> empilhado === */
/* === Alinhamento vertical dos números e labels === */
#countdown {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

#countdown p {
  display: grid !important;
  grid-template-columns: 100px auto; /* 100px para número, auto para label */
  align-items: center !important;
  justify-items: start !important;  /* alinha os itens à esquerda */
  margin: 0 !important;
  width: 100%;
}


/* Números com alinhamento centralizado e largura fixa */
#countdown p span {
  width: 100% !important;
  text-align: center !important;
  font-size: 1.8em !important;
  padding-right: 15px; /* Espaço entre número e label */
}

/* Labels com alinhamento consistente */
/* Labels com alinhamento pela primeira letra */
#countdown p strong {
  width: auto !important;
  min-width: 80px !important;   /* assegura uma largura mínima */
  text-align: left !important;
  font-size: 1em !important;
  white-space: nowrap !important;
  margin-left: 8px !important;  /* ajusta esse valor até alinhar perfeitamente */
}


/*regras para controle de visibilidade*/
/* Garante que unidades ocultas sejam realmente escondidas */
#countdown p.hidden-unit {
  display: none !important;
}

/* Mantém o alinhamento vertical para unidades visíveis */
#countdown p:not(.hidden-unit) {
  display: grid;
}







#countdown span {
  color: #0077b6; /* azul oceano */
  font-weight: bold;
  text-align: center !important;
}


#countdown p strong {
  display: block !important;
  width: auto !important;
  min-width: 80px !important; /* garante largura suficiente */
  text-align: left !important;
  font-size: 1em !important;
  font-family: monospace; /* opcional: melhora alinhamento vertical */
  padding-left: 0.4em; /* ajuste fino opcional */
}


#countdown p span {
   
  color: #0077b6;
  font-weight: bold;
  min-width: 50px;
  text-align: center !important;
}
.restart-container {
  align-self: flex-end;
  text-align: center;
  margin-top: 30px;
}

/* Replace existing #restartButton2 styles with this */
#restartButton2 {
  padding: 3px 9px;   /*aqui reduz a largura do botão restart*/
  font-size: 14px;
  background-color: #0077b6;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 0; /* Remove any specific margin */
  /* Inherit other properties from .small-button */
}

#colorButton,                 /*aqui reduz a largura dos botões color*/
#colorLabelButton {
  padding: 3px 7px;
  font-size: 13px;
  width: auto;
}

#restartButton2:hover {
  background-color: #005f91;
}

.date-input-wrapper {
  width: 100%;
  flex-grow: 1;
}

.date-input-wrapper input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 1.3em;
  border: 1px solid #000000;
  border-radius: 4px;
  /*max-width: 400px;  ou qualquer valor desejado                               comentei */  
  max-width: none !important;
}
.date-input-wrapper input::placeholder {
text-align: right;
color: #999;
}

.input-hint {
  cursor: pointer; /* Adicione esta linha */
  font-size: 0.8em;
  color: #0077b6;
  margin-right: 10px;
  text-align: left;
  white-space: nowrap;
}
.input-arrow {
  font-size: 2em;
  color: red;
  margin-bottom: 8px;
  text-align: center;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
.container {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 10px;
}

#labelNew {
  font-size: 1.6em;
  max-width: 200px;
}

.left, .center, .right {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.left h2, .center h2, .right h2 {
  font-size: 1.6em;
}

@media (max-width: 768px) {
  #countdown {
    text-align: center;  /* centraliza elementos inline */
  }


}

/*.input-hint {*/
  /*font-size: 1.1em;*/
  /*margin-right: 0;*/
  /*margin-bottom: 8px;*/
/*}*/

/*linha 346*/
/*.input-hint {*/
 /* cursor: pointer; /* Adicione esta linha */
 /* font-size: 1.2em;*/
 /* color: #0077b6;*/
 /* margin-right: 10px;*/
  
 /* white-space: nowrap;*/
/*}*/


/*mais unput hint*/

.input-hint {
  font-size: 1.2em !important;                                          /*mudei o click to create a countdown aqui I*/
  color: #0077b6;
  margin-right: 10px;
  margin-left: 60px;
  margin-top: 0;       /* remove margem superior */
  margin-bottom: 0;    /* remove margem inferior */
  padding: 0;          /* remove padding */
  line-height: 1;      /* igual ao #currentDateTime */
  display: flex;
  align-items: center; /* centra verticalmente */
  white-space: nowrap;
  text-align: left;
}




.date-input-wrapper input {
  font-size: 1.1em;
}

footer {
  position: relative;
  padding: 20px 10px;
}



header {
  text-align: center;
}
}

.popular-countdowns {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: fit-content;    /* ← aqui */
margin: 30px auto;
}

.popular-countdowns strong {
display: block;
font-size: 1.5em;
margin-bottom: 12px;
}
.quick-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.quick-btn {
background-color: #0077b6; /* azul oceano */
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 14px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.2s ease;       
}

.quick-btn:hover {
background-color: #005f91;
}

/* coloca o calendário à direita e o horário à esquerda, ambos centralizados verticalmente */
.left {
  display: flex;
  flex-direction: row;
  align-items: center;      /* centra verticalmente */
  justify-content: flex-end;/* empurra tudo para a direita */
}

#smallToggleContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  padding: 0 10px;
  gap: 15px; /* aumenta o espaço entre o checkbox e o botão */
  box-sizing: border-box;
}

#smallToggleContainer label {
  display: flex;
  align-items: center;
  justify-content: center; /* Alinha o texto certinho */
  font-size: 1.1em;
  gap: 8px;
  margin: 0;
}

#smallToggleContainer span {
  display: inline-block;
}




 /* Add to style.css */
#shareSection {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#shareLabel {
  width: 1000px;      /* largura fixa */
  max-width: 100%;   /* para não estourar em telas menores */
  margin: 0 auto;
  display: block;
}

#shareSection input {
  border: 1px solid #aaa;
  border-radius: 4px;
}
/* #shareIcon {
  color: #0077b6;
}
#shareOptions a {
  color: #0077b6;
  text-decoration: none;
  font-weight: bold;
} */
#shareIcon, #shareOptions {
  text-align: center;
  width: 100%;
}

#shareOptions {
  display: inline-block;
  margin: 10px auto 0;
}
#shareOptions a:hover {
  text-decoration: underline;
}

/* ============================= */
/* Custom Flatpickr time helpers */
/* ============================= */

/* Container da mensagem “Change Time Here” */
.flatpickr-calendar .change-time-container {
  display: flex;
  /*display: none;*/
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  margin-top: 4px;
}

/* Label “Change Time Here” em vermelho                                acho que era esse o change time above*/
/*.flatpickr-calendar .change-time-label {*/
  /*color: red;*/
  /*font-size: 0.9em;*/
  /*display: block;*/
  /*text-align: center;*/
 /* width: 100%;*/

/*}

/* Seta para cima em bordô */
.flatpickr-calendar .change-time-arrow {
  color: #800000;
  font-size: 1.2em;
  -webkit-text-stroke: 2px #800000;  /* adiciona contorno da cor bordô */
  margin-right: 20px;  /* ajuste esse valor à vontade */
  margin-left: 4px;
}

/* Container do “Set Time to 00:00” + botão */
.flatpickr-calendar .set-midnight-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  margin-top: 6px;
  gap: 4px; /* espaço entre o texto e o botão */
}


/* Label “Set Time to 00:00” em amarelo */
.flatpickr-calendar .set-midnight-label {
  color: black;
  font-size: 0.9em;
}

/* Botão preto */
.flatpickr-calendar .set-midnight-button {
  background-color: black;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.8em;
  cursor: pointer;
}
/* faz o Select‑Event‑Block ficar centralizado */
.select-event-block {
  display: flex;
  flex-direction: column;
  /*max-width: 600px;                                                                   comentei 1*/                                                             
  width: 100%;
  margin: 0 auto 20px 0;  /* top 0, right auto, bottom 20px, left 0 */
  text-align: center;     /* conteúdo também fica centrado */
}

/* faz o currentDateTime grudar à esquerda */
/* força a ordem: horário primeiro (à esquerda), depois o calendário */
#currentDateTime {
  
  order: 1;
  margin-right: 100px;  /* espaço para o calendário */
  margin-left: 100px;  /* empurra o texto para a direita */
  font-size: 1.6em;    /* igual ao .input-hint */
  font-weight: normal; /* remove negrito */
  line-height: 1;      /* reduz para alinhar com input-hint */
  padding: 0;          /* remove padding para precisão */
  margin-top: 0;       /* remove margem superior */
  margin-bottom: 0;    /* remove margem inferior */
  display: flex;
  align-items: center; /* centra verticalmente o texto */
  height: 100%;        /* garante altura consistente */
  font-weight: bold;
}

.input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 0;
  width: 100%; /* Garante que a .input-row use toda a largura disponível */
}

@media (min-width: 769px) {
  .input-row {
    max-width: 800px; /* Aumenta para suportar o campo maior                                   estava 800px baixei para 600px é aqui mesmo */
  }
}

.input-hint {
  font-size: 1.2em;
  color: #0077b6;
  margin-right: 10px;
  margin-left: 60px;
  margin-top: 0;       /* remove margem superior */
  margin-bottom: 0;    /* remove margem inferior */
  padding: 0;          /* remove padding */
  line-height: 1;      /* igual ao #currentDateTime */
  display: flex;
  align-items: center; /* centra verticalmente */
  white-space: nowrap;
}

@media (max-width: 768px) {

  /* Empilha os elementos da .left em coluna invertida */
  .left {
    flex-direction: column-reverse !important;
    align-items: center;
    justify-content: flex-start;
  }
  .input-row {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
  #currentDateTime {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    text-align: center;
    line-height: 1.2;    /* ajusta para mobile */
  }
  .input-hint {
    margin: 0 auto 8px !important;
    text-align: center !important;
    font-size: 1.2em !important;                               /*mudei o click to create a countdown aqui II*/
    
    line-height: 1.2;    /* ajusta para mobile */
  }
}
/* limita a largura máxima do input de shareLabel */
#shareSection input#shareLabel {
  /* width: auto;               deixa o input no tamanho natural */
  max-width: 550px;          /* opcional: limita o tamanho máximo */
  margin: 0;                 /* remove margem auto que centralizava */
  /*text-align: center;*/
}


#nameItButton {
  background-color: #0077b6;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

#nameItButton:hover {
  background-color: #005f91;
}

#shareSection div:first-child {
  display: inline-flex;      /* encolhe ao redor dos filhos */
  align-items: center;
  gap: 10px;                 /* distancia entre input e botão */
  margin-bottom: 8px;        /* mantém o espaçamento vertical */
}
/* style.css */
.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* destaque só do texto do label */
.label-highlight {
  display: inline-block;      /* fundo “abrange” só o texto */
  background-color: #B0E0E6;  /* cor do quadrado */
  color: #000 !important;     /* texto sempre preto */
  padding: 0.2em 0.5em;       /* ajuste fino do espaçamento */
  border-radius: 0;           /* cantos retos */
}
/* Separador "or" entre ações do calendário */
.flatpickr-calendar .or-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
}

.flatpickr-calendar .or-text {
  font-style: italic;
  color: #666;
  font-size: 0.9em;
}
/* Mensagem no topo do calendário */
.flatpickr-calendar .calendar-top-label {
  font-weight: bold;
  text-align: center;
  font-size: 1em;
  padding: 6px 0 4px 0;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

#add-to-site-btn {
  color: #0077b6;
  text-decoration: none;
  margin-left: 10px;
  font-weight: bold;
}
#add-to-site-btn:hover {
  text-decoration: underline;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  background: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 550px;
  position: relative;
  
  /* ↑ Aumente a altura aqui ↓ */
 /* Force uma altura de 80% da viewport */
  height: 60vh;

  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5em;
  cursor: pointer;
}
/* Preview dentro do modal */
.embed-preview {
  margin-top: 16px;
  text-align: center;
}
.embed-preview iframe {
  width: 300px;
  height: 240px; /* ← atualizado para 240px */
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 4px;
}


#countdown div {
  margin: 4px 0;
  font-size: 1.2em;
}

#embed-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

#add-to-site-btn {
  background-color: #0077b6; /* Azul Oceano */
  color: black;              /* Letras pretas */
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

#add-to-site-btn:hover {
  background-color: #005f91; /* Tom mais escuro no hover */
}

/* frase centralizada em Azul Oceano */
.flatpickr-calendar .change-time-below {
  text-align: center;
  color: #0077b6;       /* Azul Oceano */
  font-size: 0.9em;
  padding: 4px 0;
}

/* container do selector 12/24h */
.flatpickr-calendar .time-format-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* label 12/24 Time Selector */
.flatpickr-calendar .time-toggle-label {
  font-size: 0.9em;
  color: #0077b6;
}

/* botão de alternar */
.flatpickr-calendar .time-format-button {
  padding: 2px 6px;
  font-size: 0.9em;
  border: 1px solid #0077b6;
  background: white;
  color: #0077b6;
  border-radius: 3px;
  cursor: pointer;
}

.flatpickr-calendar .time-format-button:hover {
  background: #0077b6;
  color: white;
}

/* Garante que os elementos de AM/PM sejam visíveis */
.flatpickr-am-pm {                                         /*removi !important*/
  display: inline-block;
}

/* Garante exibição do AM/PM */
.flatpickr-time .flatpickr-am-pm {
  display: inline-block;                                     /*removi !important*/
  color: #666;
  margin-left: 6px;
}

/* Ajusta posicionamento */
.flatpickr-time-separator {
  margin: 0 2px;
}

/* No arquivo style.css */


@media (min-width: 769px) {
  .center h2,
  .right h2 {
    text-align: center;
  }

  /* Campo de data ampliado */
  

  /* Remove limitação do container-pai */
  .date-input-wrapper input[type="text"] {
    max-width: none !important;
  }
}




@media (min-width: 769px) {
  
}

.flatpickr-input {
  white-space: nowrap; /* Evita que o texto seja cortado */
  overflow: visible; /* Garante que o texto completo seja visível */
}

/* Estiliza o container do calendário flatpickr */
/* Estilo mais restritivo para o calendário */
.flatpickr-calendar {
  width: auto !important;      /* não usa 100% da largura do pai */
  max-width: 320px !important; /* limite máximo real */
  min-width: 260px;             /* largura mínima para não quebrar */
  margin: 0 auto !important;    /* centraliza */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: white;
  overflow: hidden;             /* 🔵 evita estouro interno */
}

/* Corrige a largura interna */
.flatpickr-innerContainer {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* Deixa os dias e os weekdays mais ajustados */
.flatpickr-days, .flatpickr-weekdays {
  padding: 0 8px;
}




.info-sections {
  margin-top: 2em;
  padding: 1em;
  background: transparent; /* 🔥 Muda de #f9f9f9 para transparente */
  border-radius: 0.5em;
}



.info-sections section {
  margin-bottom: 2em !important;
}






.info-sections h2 {
  margin-bottom: 0.5em;
  font-size: 1.25em;
  color: #0077b6;
}
.info-sections p {
  line-height: 1.6;
  color: #333;
}



.emoji-btn {
  background: none;
  border: none;
  font-size: 0.8em;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  transition: transform 0.1s;
}

.emoji-btn:hover {
  transform: scale(1.2);
}

/* style.css */
.quick-btn.coachella {
  padding: 12px 24px;
  font-size: 1.3em;
  margin-top: 30px;
  background-color: #ff6b6b;
  transition: transform 0.2s;
}

.quick-btn.coachella:hover {
  transform: scale(1.05);
  background-color: #ff5252;
}

/* style.css */
.coachella-description {
  font-size: 1.2em;
  line-height: 1.8;
  max-width: 800px;
  margin: 40px auto;
  padding: 25px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.coachella-description p {
  margin-bottom: 1.5em;
}

.hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.centered-single-column .quick-btn {
  display: inline-block;
  margin: 20px auto;
  text-align: center;
  font-size: 1.2em;
}

.centered-single-column .event-description {
  margin-top: 30px;
  font-size: 1.2em;
  line-height: 1.6;
  color: #333;
  text-align: left;
}


.countdown-wrapper {
  background: white;
  padding: 5px 20px; /* 🔵 ajuste interno para ficar mais compacto */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
width: 100%;
  min-width: 260px;
  max-width: 450px;                                            /* largura contador de números*/
  transition: none;
  text-align: center;
  /*transition: background-color 0.3s ease; eliminei para melhorar o desempenho*/ 
  overflow: hidden;        /* 🔵 protege contra estouros */
}

/* Quando clicado, muda a cor */
.countdown-wrapper.alt-background {
  background: linear-gradient(to bottom, #001f3f, #003366); /* fundo azul escuro */
  color: white; /* letras brancas para contraste */
}






.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

/* Corrigido: Aplica largura de forma consistente, com ou sem classe flatpickr-input */
#eventDate,
#eventDate.flatpickr-input {
   max-width: 100%;
  padding: 12px 15px;
  font-size: 1.2em !important;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  #eventDate,
  #eventDate.flatpickr-input {
    width: 400px !important;
    max-width: none !important;
  }
}

/* Estilo padrão já existente no body */

body.alt-background {
  background: linear-gradient(to bottom, #001f3f, #003366); /* Exemplo: azul escuro bonito */
  color: white; /* opcional: se quiser mudar o texto também */
}

/* Ajuste para o fundo dos números */
body.alt-background .countdown-wrapper {
  background-color: rgba(255, 255, 255, 0.1); /* deixa os números ainda com um fundo suave */
}

/* Força o Seconds ficar preto */
#seconds, #seconds + strong {
  color: black !important;
}
.small-button {
  padding: 6px 12px;
  font-size: 14px;
  background-color: #0077b6;
  color: white;
  border: none;
  border-radius: 5px;
  margin-left: 1px !important;
  cursor: pointer;
   line-height: 1;
  min-height: 30px;
}

.small-button:hover {
  background-color: #005f8a;
}
.button-group {
  display: flex;
  gap: 4px; /* 🔥 agora controle fino da distância entre Restart e Color */
  align-items: center;
  position: relative;
}

.color-popup {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  justify-content: center;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
}
@media (max-width: 600px) {
  .container {
    padding: 0 10px;
    align-items: center;
  }

  #shareSection {
    text-align: center;
  }

  #shareLabel {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  #colorPopup {
    justify-content: center;
  }

.emoji-picker {
  display: flex;
  flex-wrap: nowrap;       /* ❌ impede quebra de linha */
  overflow-x: auto;        /* ✅ permite rolagem horizontal */
  gap: 10px;
  justify-content: flex-start; /* ❗️alinha à esquerda para evitar quebra centralizada */
  padding: 5px 0;
}
/* Color Label Popup */
#colorLabelPopup {
  position: absolute;
  margin-top: 10px;
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-radius: 6px;
  z-index: 999;
}

#colorLabelPopup .color-option {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #aaa;
}

}
body.timerleft-page .flatpickr-calendar {
  min-width: 340px !important;
  box-sizing: content-box !important;
}

body.timerleft-page .flatpickr-days {
  min-width: 340px !important;
  box-sizing: border-box !important;
}
.popular-events-text {
  background-color: #ffffff;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-family: Arial, sans-serif;
}

.popular-events-text h2 {
  font-size: 1.6em;
  color: #0077b6;
  margin-bottom: 16px;
  text-align: center;
}

.popular-events-text p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 12px;
  text-align: center;
}

.popular-events-text ul {
  list-style-type: none;
  padding-left: 0;
}

.popular-events-text li {
  margin-bottom: 10px;
  font-size: 1em;
  line-height: 1.6;
}

.popular-events-text a {
  color: #0077b6;
  font-weight: bold;
  text-decoration: none;
}

.popular-events-text a:hover {
  text-decoration: underline;
}


.see-also {
  margin-top: 40px;
  padding: 24px;
  background-color: #f8f8f8;
  border-top: 2px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  text-align: left; /* 👈 Alinha todo o conteúdo à esquerda */
}

.see-also h2 {
  margin-bottom: 16px;
  font-size: 1.5em;
  color: #333;
}

.see-also ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.see-also ul li {
  margin-bottom: 12px;
  font-size: 1em;
  line-height: 1.6;
  color: #444;
}

.see-also ul li a {
  color: #003366;
  font-weight: bold;
  text-decoration: none;
}

.see-also ul li a:hover {
  text-decoration: underline;
}

/* Estiliza o container principal do Flatpickr para suportar layout lado a lado */
.flatpickr-calendar {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  max-width: 660px !important; /* Acomoda calendário + controles de tempo */
  min-width: 600px !important; /* Garante espaço suficiente */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: white;
  overflow: visible !important; /* Evita corte de elementos */
}

/* Container do calendário (esquerda) */
.flatpickr-innerContainer {
  width: 340px !important; /* Mantém a largura do calendário */
  padding: 8px;
  box-sizing: border-box;
}

.flatpickr-days, .flatpickr-weekdays {
  width: 340px !important;
  padding: 0 8px;
}

/* Novo container para controles de tempo (direita) */
.time-controls-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 320px !important; /* Mesma largura do calendário para consistência */
  background: #f9f9f9 !important;
  padding: 16px !important;
  border-left: 1px solid #ccc !important;
  box-sizing: border-box !important;
}

/* Estilo para "Change the time below" no topo */
.flatpickr-calendar .change-time-below {
  text-align: center !important;
  color: #0077b6 !important;
  font-size: 1.2em !important; /* Aumentado */
  font-weight: bold !important;
  padding: 8px 0 !important;
  width: 100% !important;
  border-bottom: 1px solid #ccc !important;
}

/* Container do relógio (hora, minuto, AM/PM) */
.flatpickr-calendar .time-controls-container .flatpickr-time {
  height: auto !important;
  font-size: 2em !important; /* Aumenta o tamanho geral */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: transparent !important;
  padding: 20px 0 !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1px solid #0077b6 !important; /* Para depuração */
  box-sizing: border-box !important;
}

/* Inputs de hora e minuto */
.flatpickr-calendar .time-controls-container .flatpickr-time input.flatpickr-hour,
.flatpickr-calendar .time-controls-container .flatpickr-time input.flatpickr-minute {
  width: 60px !important; /* Maior para destaque                                       AUMENTA SÓ INTERNAMENTE*/
  height: 40px !important;
  font-size: 1.8em !important; /* Texto grande                                      /////////////////////////////*/                                                  
  text-align: center !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  line-height: 60px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
   font-weight: bold !important; /* ← aplica negrito nos minutos */
}

/*TENTATIVA DE AUMENTAR A BOX OU QUADRADO EM VOLTA DAS HORAS MIN E AM PM*/
.flatpickr-calendar .time-controls-container .flatpickr-time {
  width: 300px !important;   /* Aumenta a largura total do relógio */
  height: 100px !important;  /* Aumenta a altura total da box */
  padding: 10px !important;  /* Espaço interno */
  box-sizing: border-box !important;
  background: #f0f0f0;       /* Opcional: só para ver a caixa claramente */
  border: 2px solid #0077b6; /* Opcional: destaca a borda da caixa */
  border-radius: 8px !important;
}


/* AM/PM */
.flatpickr-calendar .time-controls-container .flatpickr-time .flatpickr-am-pm {
  font-size: 1.8em !important; /* Maior para combinar */
  height: 60px !important;
  line-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 10px !important;
  color: #333 !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Separador dois-pontos */
.flatpickr-calendar .time-controls-container .flatpickr-time .flatpickr-time-separator {
  font-size: 2em !important;
  line-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  visibility: visible !important;
  opacity: 1 !important;
}



.flatpickr-calendar {
  font-size: 0.6em !important; /* aumenta textos, datas, tudo */
  transform: scale(1.4);       /* aumenta proporcionalmente o calendário */
}


/* Setas de incremento/decremento */
/* Centraliza as setas verticalmente e alinha ao lado */
/* Setas de incremento/decremento empilhadas com espaço */
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
  width: 16px !important;
  height: 16px !important;
  background: #0077b6 !important;
  color: white !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8em !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  flex-direction: row !important; /* ← usado caso o conteúdo interno fosse icônico, pode ser mantido */
  margin: 0 !important; /* limpa margens conflitantes */
 margin-left: 8px !important; /* Espaço extra à esquerda */
  
}

/* Posiciona as setas no grid */
.flatpickr-time .numInputWrapper .arrowUp {
  grid-area: up;
}

.flatpickr-time .numInputWrapper .arrowDown {
  grid-area: down;
}

.flatpickr-time .numInputWrapper input {
  grid-area: input;
  height: 100%;
  min-width: 50px; /* Aumente esse valor conforme necessário */
}




.flatpickr-time .numInputWrapper span.arrowUp {
  margin-bottom: 6px !important;
}

.flatpickr-time .numInputWrapper span.arrowDown {
  margin-top: 0 !important;
}

.flatpickr-calendar .flatpickr-time {
  min-height: 80px !important; /* Aumenta a altura mínima da caixa do relógio */
}



/* Wrapper com altura adequada */
/* Redefine o layout do wrapper para linha */
.flatpickr-time .numInputWrapper {
  display: grid !important;
  grid-template-columns: 1fr auto; /* Input ocupa espaço, setas em coluna */
  grid-template-rows: 1fr 1fr; /* Duas linhas para as setas */
  grid-template-areas:
    "input up"
    "input down";
  align-items: center;
  gap: 2px 12px; /* Espaço vertical/horizontal */
  height: 100% !important;
  margin-left: 8px !important;
   min-width: 90px !important; /* Ajuste conforme necessário                                       aquipia1 */
}

/* Container do 12/24 Time Selector */
.flatpickr-calendar .time-format-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  width: 100% !important;
  border-top: 1px solid #ccc !important;
}

/* Label do 12/24 Time Selector */
.flatpickr-calendar .time-toggle-label {
  font-size: 1.2em !important; /* Aumentado */
  color: #0077b6 !important;
}

/* Botão do 12/24 Time Selector */
.flatpickr-calendar .time-format-button {
  padding: 6px 12px !important;
  font-size: 1.1em !important;
  border: 1px solid #0077b6 !important;
  background: white !important;
  color: #0077b6 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.flatpickr-calendar .time-format-button:hover {
  background: #0077b6 !important;
  color: white !important;
}

/* Container do Set Here to Midnight */
.flatpickr-calendar .set-midnight-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
  width: 100% !important;
  
}

/* Botão do Set Here to Midnight */
.flatpickr-calendar .set-midnight-button {
  background-color: black !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-size: 1.1em !important; /* Aumentado */
  cursor: pointer !important;
  width: 80% !important;
  text-align: center !important;
  
  
   display: flex !important;            /* ← NOVO */
  justify-content: center !important;  /* ← NOVO */
  align-items: center !important;      /* ← NOVO */
}

/* Remove o separador "or" (não necessário no layout lateral) */
.flatpickr-calendar .or-divider {
  display: none !important;
}
#widget {
  transition: margin-top 0.3s ease;
}

#widget.shifted-down {
  margin-top: 320px; /* ajuste conforme o tamanho do calendário popup */
}

/* Estilo básico para mover o contador para baixo */
.shifted-down {
  margin-top: 280px; /* ajuste esse valor conforme o tamanho do seu calendário */
}
/*esconde o quadradinho azul do #countdownTitle*/

.label-highlight:empty {
  display: none;
}

#fullscreenButton {
  padding: 3px 8px;
  font-size: 13px;
  background-color: #0077b6;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#fullscreenButton:hover {
  background-color: #005f91;
}




 @media (max-width: 768px) {
  .fullscreen-container {
    padding-top: 5vh !important;
    padding-bottom: 5vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .fullscreen-container h2 {
    margin-bottom: 6px !important;
    font-size: 1.2em !important;
  }

  .fullscreen-container #countdown {
    font-size: 1.2em !important;
  }

  .fullscreen-container p {
    margin: 0.3em auto !important;
    gap: 2em !important; /* reduz o espaço entre número e label */
  }

  .fullscreen-container button {
    margin: 20px 0 30px 0 !important;
  }
}
/* 🔧 Estiliza o conteúdo do modo fullscreen para desktop */
@media (min-width: 769px) {
  .fullscreen-container {
     padding: 60px 20px !important;
    padding-bottom: 60px !important;
    overflow-y: auto !important;
      max-width: none !important;   /* impede limitação lateral */
     margin: 0 !important;         /* remove margem automática */
     display: flex;
  flex-direction: column;
 justify-content: center !important;
    align-items: center !important;
  }

  .fullscreen-container h2 {
    font-size: 2.2em !important;
    margin-bottom: 20px !important;
  }

  .fullscreen-container #countdown {
    font-size: 2em !important;
    gap: 10px !important;
  }

  .fullscreen-container p {
    margin: 8px auto !important;
  }

  .fullscreen-container button {
    margin: 40px 0 50px 0 !important;
  }
}
.fullscreen-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: white !important; /* ou use a cor de fundo do contador */
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 60px 20px !important;
  box-sizing: border-box !important;
}
body.fullscreen-open {
  overflow: hidden !important;
}
body.fullscreen-open {
  overflow: hidden !important;
  display: block !important;  /* ← impede o flex do body de afetar fullscreen */
}

.site-credit {
  font-size: 0.8em;
  color: #666;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}
/*forçar exibição 3 elementos*/
#shareSection {
  display: block;
}

#shareLabel {
  display: inline;
}

#toggleEmojiBtn {
  display: inline;
}

#shareIcon {
  display: block;
}
/*fim forçar exibição*/

.fullscreen-container .site-credit {
  font-size: 0.9em;
  color: #444;
  margin-top: 20px;
}

/*para editar as LABELS das Seções*/
.category-label-container {
  margin-top: 10px;
  margin-bottom: 4px;
  padding-left: 0;       /* Removido o recuo da esquerda */
  width: 100%;
}

.category-label-seasons {
  font-weight: bold;
  font-size: 1.25em;        /* Aumenta o tamanho da fonte */
  color: #003366;
  display: inline-block;
  margin-bottom: 8px;       /* Adiciona espaço entre a label e os botões */
}

/*começa a adicionar botoes a direita das seções, aqui Seasons of the Year*/
.season-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.category-label-seasons {
  font-weight: bold;
  font-size: 1.25em;
  color: #003366;
  min-width: 160px;
}

.season-buttons,
.other-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-label-holidays {
  font-weight: bold;
  font-size: 1.25em;
  color: #660000;
  min-width: 220px;
  margin-bottom: 8px;
}

.holiday-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.holiday-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sports Events label and layout */
.category-label-sports {
  font-weight: bold;
  font-size: 1.25em;
  color: #003366;
  min-width: 120px;
}

.sports-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.sports-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-label-festivals {
  font-weight: bold;
  font-size: 1.25em;
  color: #003366;
  min-width: 240px;
  margin-bottom: 8px;
}

.festivals-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.festivals-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-btn.lollapalooza {
  padding: 12px 24px;
  font-size: 1.3em;
  margin-top: 30px;
  background-color: #8e44ad;
  transition: transform 0.2s;
}
.quick-btn.lollapalooza:hover {
  transform: scale(1.05);
  background-color: #732d91;
}

h2#countdownTitle {
  font-size: 2.2em !important;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
}



/*ajustar espaçamento entre número e label em mobile*/

@media (max-width: 600px) {
  #countdown p {
    grid-template-columns: 80px auto;
  }

  #countdown p span {
    font-size: 1.6em !important;
  }

  #countdown p strong {
    font-size: 1em !important;
  }
}

.title-container {
  margin-bottom: 24px;
  text-align: center;
}

/*para alinhar os números no Edge mobile*/
@media (max-width: 768px) {
  #countdown p {
    grid-template-columns: 80px auto; /* reduz a largura do bloco dos números */
  }

  #countdown p span {
    font-size: 1.4em !important;
    padding-right: 8px;
  }

  #countdown p strong {
    font-size: 0.9em !important;
    margin-left: 6px !important;
  }
}
/*para alinhar os números no Edge mobile FIM*/



#timerLink {
    font-size: 1.4em !important; /* ⬅️ AUMENTE AQUI */
  background-color: #0077b6;
  color: white !important;
  border-radius: 4px;
  padding: 8px 16px;
  text-decoration: none;
  flex: 0 0 auto; /* Prevent timerLink from shrinking/stretching */
  pointer-events: auto; /* Ensure clickability */
  transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transitions */
    margin-left: 10px; /* Gap between TIMERLEFT and TIMER */
      z-index: 2; /* Ensure timerLink is above logo */
  position: relative; /* Ensure z-index applies */
}

#timerLink:hover {
  background-color: #005f91; /* Darker blue */
  border: 2px solid red; /* Red border on hover */
  color: white !important; /* Ensure text stays white */
}



/*cor em TIMER DE TIMERLEFT, cinco primeiras letras*/
.logo-green {
  color: #90ee90; /* Verde claro (LightGreen) */
}

.logo-white {
  color: white;
}
/*cor em TIMER DE TIMERLEFT, cinco primeiras letras FIM*/


/*Estilização das miniaturas e layout da janela:*/
.bg-popup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  max-width: 600px;
}
.bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 80px;
}
.bg-option img {
  width: 80px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}
.bg-option span {
  font-size: 0.8em;
  margin-top: 4px;
  text-align: center;
}

/*Estilização das miniaturas e layout da janela: FIM*/



/*regras para background image autumn.html*/
#bgImagePopup {
  position: relative;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /*margin: 10px auto;*/
  max-width: 560px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
}

.bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  cursor: pointer;
}

.bg-option img {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 4px;
}

.bg-option span {
  font-size: 0.85em;
  text-align: center;
  color: #333;
}
/*regras para background image autumn.html*/


/*grudar o footer da pagina contact no final da página*/

main.centered-single-column {
  flex: 1; /* ← Este valor força o <main> a ocupar o espaço entre header e footer */
}


/* centralizar verticalmente o conteudo da pagina contact*/

.centered-single-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centraliza verticalmente */
  align-items: center;      /* Centraliza horizontalmente */
  text-align: center;
  padding: 0px 20px;                                              /*espaço entre a faixa azul e a palavra stopwatch*/
}

.centered-single-column h1 {
  font-size: 4em;            /* Aumenta título */
  margin-bottom: 10px;                                               /*espaço entre o relógio ou contador de núemeros e a palavra stopwatch*/
  color: #0077b6;
}

.centered-single-column p {
  font-size: 2em;          /* Aumenta parágrafo */
  max-width: 700px;
}

/* Aplica especificamente na página privacy.html */
.privacy-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 40px 20px;
  line-height: 1.8;
  font-size: 1.6em;
}

.privacy-content h1,
.privacy-content h2 {
  text-align: left;
  margin-top: 40px;
  color: #003366;
}

.privacy-content p {
  text-align: justify; /* Espalha o texto horizontalmente */
  margin-bottom: 20px;
}
/* Corrige o alinhamento indevido herdado de main:not(.centered-single-column) */
main.privacy-content {
  display: block !important;         /* Remove flexbox que força alinhamento */
  align-items: initial !important;
  justify-content: initial !important;
  text-align: left !important;
}


main.privacy-content h1,
main.privacy-content h2 {
  text-align: left;
  margin-top: 40px;
  color: #003366;
}

main.privacy-content p {
  text-align: justify;
  margin-bottom: 20px;
}
.terms-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 40px 20px;
  line-height: 1.8;
  font-size: 1.5em;
}

.terms-content h1,
.terms-content h2 {
  text-align: left;
  margin-top: 40px;
  color: #003366;
}

.terms-content p {
  text-align: justify;
  margin-bottom: 20px;
}
/* Corrige o layout flex herdado de main */
main.terms-content {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  text-align: left !important;
}

#stopwatchLink {
  font-size: 1.4em !important;
  background-color: #0077b6;
  color: white !important;
  border-radius: 4px;
  padding: 8px 16px;
  text-decoration: none;
  flex: 0 0 auto;
  pointer-events: auto;
  transition: background-color 0.3s ease, border 0.3s ease;
  margin-left: 10px;
  z-index: 2;
  position: relative;
}

#stopwatchLink:hover {
  background-color: #005f91;
  border: 2px solid red;
  color: white !important;
}

/*footer aumentar desempenho*/
footer a {
  color: #000000; /* Preto para garantir contraste */
  font-weight: bold;
  text-decoration: underline; /* melhora visibilidade e acessibilidade */
}

/*TIMERLEFT no topo da pagina inicial*/

.logo a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/*AUTUMN COUNTDOWN H1 */
.page-title {
  font-size: 1.5em;
  font-weight: bold;
  color: white; /* ou a cor que preferir */
  text-align: center; /* opcional */
  margin-top: 10px; /* opcional para espaçamento */
}

/*arrumando o black friday conteúdo todo à esquerda*/
.main-header {
  width: 100%;
  background-color: #0077b6;
  padding: 12px 20px;
  color: white;
  display: flex;
  flex-direction: row;       /* ✅ ALINHA LADO A LADO */
  align-items: center;       /* ✅ ALINHA VERTICALMENTE */
  gap: 12px;                 /* ✅ ESPAÇO ENTRE LOGO E TÍTULO */
}



.page-title {
  margin-top: 8px;
  font-size: 1.5em;
  color: white;
  text-align: left;
}
/*arrumando o black friday conteúdo todo à esquerdaFIM*/


.green-plus-button {
  background-color: #90ee90; /* Mesmo verde do TIMER */
  color: white;
  font-size: 1.4em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
   position: relative;
  z-index: 10;
}

.green-plus-button:hover {
  background-color: #005f91; /* Tom mais escuro no hover */
}


.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.input-row .green-plus-button {
  flex-shrink: 0;
}