/*
 * North Production — ecrã de evento e reserva (RSVP).
 * "Reserva Evento North Production.dc.html".
 *
 * O Event Tickets traz a sua própria marcação; aqui ela é reescrita para a
 * linguagem do site: campos underline, sem raios, sem sombras.
 */

/* ── CTA "[ RESERVAR LUGAR ]" no masthead ───────────────────────────── */

.np-reservar-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 4vh, 44px);
}
.np-reservar-cta .np-btn--tinta{
  background: var(--np-tinta);
  color: #E3D9C8;
}
.np-reservar-nota{
  font: 500 11px/1.4 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--np-sec-txt);
}

/* ── Secção "CONFIRMA A TUA PRESENÇA" ───────────────────────────────── */

.np-reserva__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 899px){
  .np-reserva__grid{ grid-template-columns: 1fr; }
}

.np-reserva__titulo{
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5.6vw, 88px);
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--np-branco-quente);
  margin: 0;
  max-width: 12ch;
}
.np-reserva__lead{
  font: 300 clamp(16px, 1.6vw, 21px)/1.55 'Archivo', sans-serif;
  color: #9A9892;
  margin: clamp(24px, 4vh, 40px) 0 0;
  max-width: 40ch;
}
.np-reserva__limite{
  font: 500 11px/1.5 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--np-branco-quente);
  margin: clamp(20px, 3vh, 32px) 0 0;
  border-top: 1px solid #232322;
  padding-top: 16px;
  max-width: 32ch;
}

.np-reserva__form{
  border-top: 1px solid #232322;
  padding-top: clamp(24px, 4vh, 40px);
}

/* ── Reescrita do RSVP do Event Tickets ─────────────────────────────── */

/*
 * O Event Tickets é todo construído sobre variáveis próprias. Reapontá-las
 * para os tokens da North é mais estável do que lutar com a especificidade
 * de cada selector — e sobrevive às actualizações do plugin.
 */
.np-reserva,
.np-reserva .tribe-common{
  /* Atenção: o Event Tickets usa `--tec-color-background` como cor do TEXTO
     dos botões primários (invertem fundo e texto). Tem de ser o preto. */
  --tec-color-background: var(--np-preto);
  --tec-color-background-events: transparent;
  --tec-color-text-primary: var(--np-branco-quente);
  --tec-color-text-primary-light: #9A9892;
  --tec-color-text-secondary: #9A9892;
  --tec-color-text-events-title: var(--np-branco-quente);
  --tec-color-border-default: #232322;
  --tec-color-border-secondary: #3A3A37;
  --tec-color-border-tertiary: #3A3A37;
  --tec-color-button-primary: var(--np-branco-quente);
  --tec-color-button-primary-hover: var(--np-branco-quente);
  --tec-color-button-primary-active: var(--np-branco-quente);
  --tec-color-button-text: var(--np-preto);
  --tec-color-accent-primary: var(--np-branco-quente);
  --tec-color-accent-primary-hover: var(--np-branco-quente);
  --tec-color-accent-primary-active: var(--np-branco-quente);
  --tec-color-link-primary: var(--np-branco-quente);
  --tec-color-link-accent: var(--np-branco-quente);
  --tec-border-radius-default: 0;
  --tec-box-shadow-default: none;
  --tec-font-family-sans-serif: 'Archivo', sans-serif;
}

.np-reserva__form .tribe-common,
.np-reserva__form .tribe-tickets__rsvp-wrapper,
.np-reserva__form .tribe-tickets__rsvp{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-family: 'Archivo', sans-serif;
  color: var(--np-branco-quente);
  max-width: none;
}

.np-reserva__form .tribe-tickets__rsvp{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 36px);
}

/* O plugin divide em "details" (esquerda) e "form" (direita); no desenho
   é tudo uma coluna só. */
.np-reserva__form .tribe-tickets__rsvp-details-wrapper,
.np-reserva__form .tribe-tickets__rsvp-form-wrapper{
  width: 100%;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

/* Cabeçalho do bilhete: o título já está na coluna da esquerda. */
.np-reserva__form .tribe-tickets__rsvp-details{ padding: 0; }
.np-reserva__form .tribe-tickets__rsvp-title{
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--np-branco-quente);
  margin: 0 0 10px;
}
.np-reserva__form .tribe-tickets__rsvp-description,
.np-reserva__form .tribe-tickets__rsvp-availability{
  font: 400 clamp(14px, 1.3vw, 16px)/1.6 'Archivo', sans-serif;
  color: #9A9892;
  margin: 0;
}

/* Botões "Vou / Não vou" → linguagem do site.
   Três classes de especificidade para ganhar às folhas do plugin sem
   depender da ordem de carregamento. */
.np-reserva .tribe-common .tribe-common-c-btn,
.np-reserva .tribe-common .tribe-tickets__rsvp-actions-button-going,
.np-reserva .tribe-common .tribe-tickets__rsvp-form-button--submit,
.np-reserva__form .tribe-tickets__rsvp-actions-button-going,
.np-reserva__form .tribe-common-c-btn,
.np-reserva__form .tribe-tickets__rsvp-form-button--submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--np-branco-quente);
  color: var(--np-preto);
  font: 500 12px/1 'Archivo', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 18px 26px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity .25s;
  width: auto;
}
.np-reserva .tribe-common .tribe-common-c-btn:hover,
.np-reserva .tribe-common .tribe-common-c-btn:focus,
.np-reserva__form .tribe-tickets__rsvp-actions-button-going:hover,
.np-reserva__form .tribe-common-c-btn:hover,
.np-reserva__form .tribe-tickets__rsvp-form-button--submit:hover{
  opacity: .78;
  background: var(--np-branco-quente);
  color: var(--np-preto);
}

/* Botão secundário ("Não vou", "cancelar") em texto sublinhado. */
.np-reserva__form .tribe-tickets__rsvp-actions-button-not-going,
.np-reserva__form .tribe-tickets__rsvp-form-button--cancel{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 1px solid #3A3A37;
  border-radius: 0;
  padding: 0;
  font: 500 12px/1 'Archivo', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--np-branco-quente);
  cursor: pointer;
  transition: opacity .25s;
}
.np-reserva__form .tribe-tickets__rsvp-actions-button-not-going:hover,
.np-reserva__form .tribe-tickets__rsvp-form-button--cancel:hover{ opacity: .7; }

/* Quantidade de lugares. */
.np-reserva__form .tribe-tickets__rsvp-actions-quantity{
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
}
.np-reserva__form .tribe-tickets__rsvp-actions-quantity-input{
  background: transparent;
  border: none;
  border-bottom: 1px solid #3A3A37;
  border-radius: 0;
  color: var(--np-branco-quente);
  font: 400 clamp(15px, 1.4vw, 17px)/1.6 'Archivo', sans-serif;
  min-height: 44px;
  width: 72px;
  text-align: center;
  padding: 10px 0;
  transition: border-color .25s;
}
.np-reserva__form .tribe-tickets__rsvp-actions-quantity-input:focus{
  outline: none;
  border-bottom-color: var(--np-branco-quente);
}
.np-reserva__form .tribe-tickets__rsvp-actions-quantity-input-number{
  background: none;
  border: none;
  color: var(--np-branco-quente);
  min-height: 44px;
  min-width: 44px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 0;
}

/* Campos do formulário: underline, como o resto do site. */
.np-reserva__form .tribe-tickets__form-field,
.np-reserva__form .tribe-tickets__rsvp-form-field{
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(24px, 3.5vh, 34px);
}
.np-reserva__form .tribe-tickets__form-field-label,
.np-reserva__form label{
  font: 500 10px/1 'Archivo', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9A9892;
  margin-bottom: 12px;
}
.np-reserva .tribe-common input[type="text"],
.np-reserva .tribe-common input[type="email"],
.np-reserva .tribe-common input[type="number"],
.np-reserva .tribe-common select,
.np-reserva__form input[type="text"],
.np-reserva__form input[type="email"],
.np-reserva__form input[type="number"],
.np-reserva__form select,
.np-reserva__form textarea,
.np-reserva__form .tribe-tickets__form-field-input{
  background: transparent;
  border: none;
  border-bottom: 1px solid #3A3A37;
  border-radius: 0;
  box-shadow: none;
  color: var(--np-branco-quente);
  font: 400 clamp(15px, 1.4vw, 17px)/1.6 'Archivo', sans-serif;
  padding: 10px 0;
  min-height: 44px;
  width: 100%;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.np-reserva__form input:focus,
.np-reserva__form select:focus,
.np-reserva__form textarea:focus,
.np-reserva__form .tribe-tickets__form-field-input:focus{
  outline: none;
  border-bottom-color: var(--np-branco-quente);
  box-shadow: none;
}

/* Nome e Email lado a lado, como no desenho. */
.np-reserva__form .tribe-tickets__rsvp-form-fields,
.np-reserva__form .tribe-tickets__attendee-tickets-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vh, 40px) clamp(24px, 3vw, 40px);
  border: none;
  background: transparent;
  padding: 0;
}
@media (max-width: 599px){
  .np-reserva__form .tribe-tickets__rsvp-form-fields,
  .np-reserva__form .tribe-tickets__attendee-tickets-item{ grid-template-columns: 1fr; }
}

/* Estado de sucesso: "Presença confirmada." */
.np-reserva__form .tribe-tickets__rsvp-message--success,
.np-reserva__form .tribe-tickets__rsvp-message{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--np-branco-quente);
  font: 400 clamp(15px, 1.4vw, 18px)/1.65 'Archivo', sans-serif;
}
.np-reserva__form .tribe-tickets__rsvp-message--success::before,
.np-reserva__form .tribe-tickets__rsvp-message svg{ display: none; }

.np-reserva__form .tribe-tickets__rsvp-ar-guest-list,
.np-reserva__form .tribe-tickets__rsvp-ar-sidebar{ display: none; }

/* O plugin usa ícones e caixas que o desenho não tem. */
.np-reserva__form .tribe-tickets__rsvp-actions-success,
.np-reserva__form .tribe-tickets__rsvp-details-availability{ border: none; background: transparent; }

.np-reserva__form *{ box-shadow: none !important; border-radius: 0 !important; }

/* Mensagem quando as reservas fecham. */
.np-reserva__esgotado{
  font: 500 12px/1.5 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9A9892;
  border-top: 1px solid #232322;
  padding-top: 16px;
}

/* Nota do limite de lugares, por baixo do formulário. */
.np-reserva__nota{
  font: 400 11px/1.5 'Archivo', sans-serif;
  letter-spacing: .06em;
  color: #9A9892;
  margin: 16px 0 0;
}