:root {
  --background-color: white;
  --dark-blue: #1f3648;
  --blue: #4785ae;

  /* Identidade IT Wheel (referência: itwheel.com.br) */
  --itw-primary: #2e2d7b;
  --itw-primary-dark: #22215e;
  --itw-orange: #ec6608;
  --itw-orange-light: #f7941d;
  --itw-orange-dark: #b14400;
  --itw-teal: #279bb1;
  --itw-teal-light: #58bed1;
  --itw-blue: #0f6fa9;
  --itw-navy: #014a6e;
  --itw-sky-50: #eef7f8;
  --itw-sky-100: #d2eaef;
  --itw-sky-200: #c6ebf6;
  --itw-text: #4a4a4a;
  --itw-muted: #676767;
  --itw-border: #d6e6ea;

  --itw-font-display: "Outfit", "Segoe UI", Roboto, Arial, sans-serif;
  --itw-font-body: "Exo", "Segoe UI", Roboto, Arial, sans-serif;

  --itw-radius-sm: 10px;
  --itw-radius: 20px;
  --itw-radius-pill: 999px;
  --itw-shadow-sm: 0 4px 14px rgba(1, 74, 110, 0.08);
  --itw-shadow: 0 12px 32px rgba(1, 74, 110, 0.12);
  --itw-focus-ring: 0 0 0 0.2rem rgba(39, 155, 177, 0.35);
  --itw-gradient-footer: linear-gradient(180deg, var(--itw-teal-light) 0%, var(--itw-blue) 100%);
}

/* ===== Base: tipografia e cores ===== */
body {
  font-family: var(--itw-font-body);
  color: var(--itw-text);
  background-color: var(--itw-sky-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--itw-font-display);
  font-weight: 600;
  color: var(--itw-primary);
}

/* Títulos sobre fundo escuro ou com cor do Customizer herdam a cor do contexto */
.event-date h4, .event-date h5, .event-date h6,
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3,
.carousel-caption h4, .carousel-caption h5, .carousel-caption h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: inherit;
}

a {
  color: var(--itw-blue);
}

a:hover {
  color: var(--itw-orange-dark);
}

/* ===== Base: botões ===== */
.btn {
  font-family: var(--itw-font-display);
  font-weight: 600;
  border-radius: var(--itw-radius-pill);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:focus,
.btn.focus {
  box-shadow: var(--itw-focus-ring);
}

/* Compra / finalização (btn-success no ft-plugin) = CTA laranja */
.btn-success,
.btn-success:disabled,
.btn-success.disabled {
  color: #fff;
  background-color: var(--itw-orange);
  border-color: var(--itw-orange);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: var(--itw-orange-dark);
  border-color: var(--itw-orange-dark);
}

.btn-outline-success {
  color: var(--itw-orange-dark);
  border-color: var(--itw-orange);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--itw-orange);
  border-color: var(--itw-orange);
}

/* Ações secundárias (btn-primary no ft-plugin) = cor primária da marca */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--itw-primary-dark);
  border-color: var(--itw-primary-dark);
}

.btn-outline-primary {
  color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.btn-success:focus,
.btn-outline-success:focus,
.btn-primary:focus,
.btn-outline-primary:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: var(--itw-focus-ring);
}

/* ===== Base: campos de formulário ===== */
.form-control:focus,
select:focus {
  border-color: var(--itw-teal);
  box-shadow: var(--itw-focus-ring);
  outline: 0;
}

/* ===== Busca + modais do ft-plugin =====
   [form_busca_eventos] imprime a busca e também #modalAlert/#modalConfirm (usados pelo scripts.js do plugin).
   Eles ficam dentro de .collapse.navbar-collapse, que o Bootstrap esconde abaixo de 992px: no celular o alerta
   abria invisível com o fundo escuro "static", travando a tela. Mantém o bloco visível em qualquer largura. */
#searchform > .navbar-collapse {
  display: flex !important;
}

/* Personalizar > Cabeçalho > "Exibir campo de busca" = Não: some o campo, os modais continuam na página */
body > nav.navbar.sem-busca {
  padding: 0 !important;
}

nav.navbar.sem-busca > .container {
  margin-top: 0;
  padding-top: 0 !important;
}

nav.navbar.sem-busca .ga-search {
  display: none !important;
}

/* ===== Imagem do plano (ft-templates-views/productlist.inc.htm, campo plan.background_url) ===== */
#product-list .item.products > [class*="col-"]:first-child {
  display: flow-root;
}

.plan-image {
  float: left;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 12px 4px 0;
  background-color: var(--itw-sky-100);
}

/* ===== Resultados da busca (template-parts/searchlist.php) ===== */
.search-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--itw-border);
}

.search-item:last-child {
  border-bottom: 0;
}

.search-item-title {
  margin-bottom: 0.35rem;
}

.search-item-title a {
  color: var(--itw-primary);
}

.search-item-excerpt {
  margin-bottom: 0.35rem;
  color: var(--itw-muted);
}

.search-item-link {
  font-weight: 600;
}

.navbar-nav li.nav-item {
  margin: 0.25rem !important;
}

.nav-page > .tab-content,
.nav-page > .nav-tabs {
  margin: 0rem !important;
}

.tab-content {
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.accordion .card button.collapsed,
.accordion .card button.btn-link {
  text-decoration: none;
}

.accordion .card button.btn-link.collapsed {
  color: black;
}

.accordion .card button.btn-link {
  color: green;
}

.accordion .card button.collapsed:hover,
.accordion .card button.btn-link:hover {
  color: green;
  text-decoration: none;
}

.finalysale {
  background-color: #eee;
  border-radius: 0.25rem;
}

.nowrap {
  white-space: nowrap !important;
}

.dropdown-menu-right {
  min-width: 20rem;
  padding: 1rem;
}

.card {
  border: 0px;
  border-radius: 0.5rem;
  box-shadow: -2px 8px 18px #0000001a;
  height: 100%;
}

.card-img-top {
  max-height: 16rem;
}

/* Card de evento do ft-plugin (eventcard.inc.htm) usa div.card[href], que não é link.
   O link "Comprar" (mesma URL do card) é esticado para cobrir o card inteiro, sem override do template. */
div.card[href] {
  position: relative;
}

div.card[href] .card-body .row,
div.card[href] .card-body [class*="col-"] {
  position: static;
}

div.card[href] .card-body a.btn-outline-success::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* "Reservar" (eventos com reserva) fica acima da área esticada e continua com o próprio link */
div.card[href] .card-body a.btn-outline-primary {
  position: relative;
  z-index: 2;
}

.carousel-inner {
  border-radius: 0.5rem;
  box-shadow: -2px 8px 18px #0000001a;
}

.carousel-item img {
  height: 20rem;
  width: 100%;
  object-fit: contain;
  background-color: #000;
}

.menu li {
  display: block;
}

.navbar-topo li.menu-item{
  display:inline;
  margin-left:10px;
}

.navbar-topo li.menu-item a{
  color:#000;
}

a:hover {
  text-decoration: none;
}

a.card {
  color: black !important;
}

a.card:hover {
  color: black !important;
  text-decoration: none !important;
}

.card-body p.card-text {
  margin-bottom: 0.75rem;
}

.event-date {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  color: #fff;
  background: #000;
  padding: 10px;
  margin: 3px;
  opacity: 0.8;
  border-radius: 0.25rem;
}

.img-front-cover img {
  height: 22rem;
  width: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
}

.item p {
  margin-bottom: 0 !important;
}

select {
  margin: 0;
  font-family: inherit;
  text-transform: none;
  word-wrap: normal;
  border-color: #6c757d40;
  color: #6c757dcf;
  padding: 0.45rem 0.25rem;
  border-radius: 0.25rem;
  width: 100%;
}

select:not(:-internal-list-box) {
  overflow: visible !important;
}

.address p {
  margin-bottom: 0.2rem;
}

.address {
  word-break: break-word;
}

.form-hr {
  padding-top: 0.5rem;
}

hr:not([size]) {
  height: 0;
}

#button-search {
  border-radius: 0rem 0.25rem 0.25rem 0rem;
}

/** Extra small, small and medium**/
@media (max-width: 767px) {
  #slider {
    flex-direction: row-reverse;
  }
}

@media (max-width: 768px) {
  .carousel-item img {
    height: 14rem !important;
  }
  .img-front-cover img {
    height: auto;
    max-height: 20rem;
    width: 100%;
    object-fit: contain !important;
    border-radius: 0.25rem;
    background:#000;
  }
  .details-text {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
  }
}

@media (max-width: 991px) {
  .itens-head {
    display: none;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1500px !important;
  }
  .details-text {
    max-height: 38rem;
    overflow: auto;
    padding-right: 1rem;
    margin-right: 1rem;
  }
  .text-pickup {
    max-height: 38rem;
    overflow: auto;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 920px;
  }
  .time-list {
    height: 100%;
  }
}

.container {
  margin-top: 20px;
}
/*Bootstrap Calendar*/
.datepicker {
  border-radius: 0;
  padding: 0;
}
.datepicker-days table thead,
.datepicker-days table tbody,
.datepicker-days table tfoot {
  padding: 10px;
  display: block;
}
.datepicker-days table thead,
.datepicker-months table thead,
.datepicker-years table thead,
.datepicker-decades table thead,
.datepicker-centuries table thead {
  background: grey;
  color: #ffffff;
  border-radius: 0.25rem 0.25rem 0rem 0rem;
}
.datepicker-days table thead tr:nth-child(2n + 0) td,
.datepicker-days table thead tr:nth-child(2n + 0) th {
  border-radius: 3px;
}
.datepicker-days table thead tr:nth-child(3n + 0) {
  text-transform: uppercase;
  font-weight: 300 !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
  padding: 11px 13px;
}
.datepicker-months table thead td,
.datepicker-months table thead th,
.datepicker-years table thead td,
.datepicker-years table thead th,
.datepicker-decades table thead td,
.datepicker-decades table thead th,
.datepicker-centuries table thead td,
.datepicker-centuries table thead th {
  border-radius: 0;
}
.datepicker td,
.datepicker th {
  border-radius: 50%;
  padding: 0 12px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-image: none;
}
.datepicker .prev,
.datepicker .next {
  color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
  width: 37px;
  height: 37px;
}
.datepicker .prev:hover,
.datepicker .next:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.99);
  font-size: 21px;
}
.datepicker .datepicker-switch {
  font-size: 24px;
  font-weight: 400;
  transition: 0.3s;
}
.datepicker .datepicker-switch:hover {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.datepicker table tr td span {
  border-radius: 2px;
  margin: 3%;
  width: 27%;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: grey;
  background-image: none;
}
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.datepicker-dropdown.datepicker-orient-top:before {
  border-top: 7px solid rgba(0, 0, 0, 0.1);
}

.datepicker.datepicker-inline td,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.dropdown-menu th {
  padding: 0.35rem 0.75rem !important;
}

.datepicker-inline {
  width: 100% !important;
}

.table-condensed {
  box-shadow: 2px 9px 18px #0000001a;
}

.datepicker table {
  border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.datepicker tfoot {
  text-align: -webkit-center;
}

.datepicker .datepicker-switch {
  white-space: nowrap;
}

.time-list {
  overflow: auto;
  max-height: 26rem;
  box-shadow: 2px 9px 18px #0000001a;
}

::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgb(181 181 181);
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #e0e0e0;
}

/*Calendário */

.datepicker-inline {
  width: 100% !important;
}

.datepicker-days .table-condensed,
.datepicker-months .table-condensed,
.datepicker-years .table-condensed,
.datepicker-centuries .table-condensed,
.datepicker-decades .table-condensed {
  width: 100%;
  max-width: 20rem;
  height: 22rem;
}

.datepicker.datepicker-inline {
  padding: 0 !important;
}

.address iframe,
.midia iframe {
  width: 100% !important;
}

.col.col-data {
  text-align: -webkit-center;
}

#nav-tab {
  flex-flow: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#nav-tab::-webkit-scrollbar {
  height: .5rem;
}

.navbar-brand .img-fluid {
	max-height: 4.5rem
}

ul.menu {
    padding-left: 0rem;
}

.event-date {
	text-transform: uppercase
}

.eventlocaldate {
	text-transform: uppercase
}


/* ==========================================================================
   Etapas 2 a 7 (protótipo aprovado em 09/10/2026): header, home de compra,
   página do ingresso, carrinho, pagamento, área do cliente e rodapé.
   Tudo atua sobre a marcação do tema e do ft-plugin (IDs e classes intactos).
   ========================================================================== */

:root {
  --itw-header-bg: #0b2140;
  --itw-magenta: #c8175d;
}

/* ===== Ajustes de base do tema antigo ===== */
.container {
  margin-top: 0;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1240px !important;
  }
}

.container-page,
body > nav.navbar + .container,
.nav-page {
  margin-top: 8px;
}

.box-div {
  background: #fff;
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow-sm);
  padding: 2rem !important;
}

@media (max-width: 767px) {
  .box-div {
    padding: 1.25rem !important;
  }
}

/* Título de página interna no estilo das seções do site institucional */
.box-div > h4:first-child,
.blue-title-search {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  color: var(--itw-orange);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.box-div > h4:first-child em,
.blue-title-search em {
  color: var(--itw-primary);
  font-style: normal;
}

/* ===== Etapa 2: header ===== */
header {
  position: relative;
  background-color: var(--itw-header-bg);
}

/* z-index acima da barra de busca, para o dropdown "Minha conta" abrir por cima dela */
header .navbar {
  background-color: var(--itw-header-bg) !important;
  padding-top: 18px;
  padding-bottom: 6px;
  z-index: 1010;
}

/* Curva de transição para o fundo claro, como no hero do itwheel.com.br */
header::after {
  content: "";
  display: block;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 L0 38 C 260 34 420 0 760 0 L1440 0 L1440 44 Z' fill='%23eef7f8'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* Desktop: a coluna do logo encolhe para o tamanho do logo e os botões ganham o resto da linha */
@media (min-width: 768px) {
  header .navbar > .container > .col-md-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  header .navbar > .container > .col-md-8.navbar-collapse {
    flex: 1 1 auto;
    max-width: none;
  }
}

.navbar-brand .img-fluid {
  max-height: 5rem;
}

@media (max-width: 767px) {
  .navbar-brand .img-fluid {
    max-height: 3.5rem;
  }
}

header .navbar-collapse {
  align-items: center;
}

.navbar-topo .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.navbar-topo .nav-item .btn {
  padding: 0.55rem 1.25rem;
  white-space: nowrap;
}

/* Botões padrão do header sobre fundo escuro (o Customizer, se preenchido, continua tendo prioridade) */
#cadastre-se .btn-outline-primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

#cadastre-se .btn-outline-primary:hover {
  color: var(--itw-header-bg);
  background-color: #fff;
  border-color: #fff;
}

#dropdownMyAccountMenuButton.btn-info {
  color: #fff;
  background-color: var(--itw-teal);
  border-color: var(--itw-teal);
}

#dropdownMyAccountMenuButton.btn-info:hover,
.show > #dropdownMyAccountMenuButton.btn-info {
  background-color: var(--itw-navy);
  border-color: var(--itw-navy);
}

.carrinho_total {
  font-weight: 700;
}

.dropdown-menu {
  border: 0;
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow);
}

.dropdown-menu-right {
  min-width: 21rem;
  padding: 1.25rem;
  margin-top: 10px;
}

.dropdown-item {
  border-radius: var(--itw-radius-sm);
  padding: 0.5rem 0.75rem;
  color: var(--itw-primary);
}

.dropdown-item:hover {
  background-color: var(--itw-sky-50);
  color: var(--itw-orange-dark);
}

.dropdown-item i {
  width: 1.25rem;
  color: var(--itw-teal);
}

/* Menu institucional (posição de menu "institucional" no header.php, só no desktop largo) */
.itw-site-menu {
  display: none;
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0 1.5rem 0 2.5rem;
  gap: 1.5rem;
}

.itw-site-menu a {
  font-family: var(--itw-font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

.itw-site-menu a:hover {
  color: var(--itw-teal-light);
}

@media (min-width: 1200px) {
  .itw-site-menu {
    display: flex;
  }
}

/* Mobile: botão e painel do menu */
header .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--itw-radius-sm);
  padding: 0.45rem 0.6rem;
}

header .navbar-light .navbar-toggler-icon,
header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#navbarMyAccount {
  padding-top: 1rem !important;
  padding-bottom: 0.5rem;
}

#navbarMyAccount .list-group {
  gap: 8px;
  margin-bottom: 12px;
}

#navbarMyAccount .list-group > br {
  display: none;
}

#navbarMyAccount .list-group-item {
  border: 0;
  border-radius: 14px !important;
  color: var(--itw-primary);
  font-family: var(--itw-font-display);
  font-weight: 500;
}

#navbarMyAccount .list-group-item i {
  color: var(--itw-teal);
  margin-right: 6px;
}

#nav-mobile-cart {
  background-color: var(--itw-orange);
  color: #fff !important;
}

#nav-mobile-cart i {
  color: #fff !important;
}

#navbarMyAccount > .list-group-item {
  background: transparent;
  padding: 0;
}

#navbarMyAccount .navbar-topo .menu-item a {
  color: #fff;
}

/* ===== Etapa 3: busca (a lista de categorias saiu do tema) =====
   O #searchform > .navbar-collapse visível em qualquer largura já está no style.css do tema (modais do plugin). */
body > nav.navbar.bg-light {
  background-color: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
}

body > nav.navbar {
  position: relative;
  z-index: 3;
}

body > nav.navbar > .container {
  padding-top: 0 !important;
}

#searchform form.input-group {
  flex-wrap: nowrap;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--itw-border);
  border-radius: var(--itw-radius-pill);
  padding: 4px;
  margin: 0 !important;
}

#searchform .form-control {
  border: 0;
  background: transparent;
  padding-left: 1rem;
  box-shadow: none;
}

#button-search {
  border-radius: var(--itw-radius-pill) !important;
  margin: 0 !important;
  padding: 0.4rem 1.1rem;
}

/* ===== Etapa 4: home ===== */
#slider {
  margin-top: 12px;
}

.carousel-inner {
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow);
  overflow: hidden;
}

.carousel-item img {
  height: clamp(13rem, 36vw, 27rem);
  object-fit: cover;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: clamp(13rem, 50vw, 18rem) !important;
  }
}

.carousel-control-prev,
.carousel-control-next {
  width: 64px;
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(11, 33, 64, 0.55);
  background-size: 40%;
  transition: background-color 0.2s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--itw-orange);
}

/* ===== Home de compra: modelo "Home Ingresso" (body.page-template-home-ingresso) =====
   Foto = imagem destacada da página, atrás do header. Por cima: linha pequena, título e texto
   (Personalizar > Página inicial) e a faixa de informações (widgets "Destaques da home").
   O card de compra ([unidade-negocios ...] no conteúdo da página) vem logo depois, sobre a foto.
   --itw-hero-pad: espaço entre o header e o primeiro texto;
   --itw-hero-gap: espaço entre o header e as abas quando não há texto nem faixa;
   --itw-hero-overlap: quanto a foto continua por trás do card, no mínimo;
   --itw-hero-min: altura mínima da foto. */
:root {
  --itw-home-header-h: 114px;
  --itw-hero-pad: 48px;
  --itw-hero-gap: 100px;
  --itw-hero-overlap: 80px;
  --itw-hero-min: 0px;
}

@media (max-width: 767px) {
  :root {
    --itw-home-header-h: 92px;
    --itw-hero-pad: 30px;
    --itw-hero-gap: 36px;
    --itw-hero-overlap: 80px;
    --itw-hero-min: 520px;
  }
}

/* Header transparente sobre a foto (a cor do Customizer, se preenchida, continua tendo prioridade) */
body.page-template-home-ingresso > header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

body.page-template-home-ingresso > header .navbar {
  background-color: transparent !important;
}

body.page-template-home-ingresso > header::after {
  display: none;
}

/* Menu mobile aberto ganha fundo para não ficar solto sobre a foto */
body.page-template-home-ingresso > header:has(#navbarMyAccount.show) .navbar,
body.page-template-home-ingresso > header:has(#navbarMyAccount.collapsing) .navbar {
  background-color: var(--itw-header-bg) !important;
}

/* Busca logo abaixo do header, sobre a foto */
body.page-template-home-ingresso > nav.navbar {
  position: absolute;
  top: var(--itw-home-header-h);
  left: 0;
  right: 0;
  z-index: 5;
}

.itw-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(var(--itw-home-header-h) + var(--itw-hero-gap));
  padding-top: calc(var(--itw-home-header-h) + var(--itw-hero-pad));
  color: #fff;
}

/* Camada da foto na proporção de uma foto panorâmica (1920x890, como no protótipo): a imagem aparece
   inteira na altura, sem cortar a roda nem os prédios. Só fica mais alta se os textos precisarem
   (aí corta um pouco dos lados); o card, por cima (z-index 2), cobre só o pé da foto. */
.itw-hero-foto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: max(calc(100vw * 890 / 1920), calc(100% + var(--itw-hero-overlap)), var(--itw-hero-min));
  background-color: var(--itw-header-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Computador (a partir de 1200px): zoom na foto para a roda-gigante ficar na lateral direita, saindo de trás
   do card. A foto é ancorada à esquerda e ampliada até o centro da roda cair no ponto-alvo: logo à direita
   da borda do card (borda = metade da tela + 589px) ou, em telas onde a lateral é estreita, 200px antes da
   borda da tela. O topo da roda fica a 90px do topo, logo abaixo dos botões do header.
   Calibrado para a foto atual da home (1920x1080): centro da roda a 69,5% da largura e topo da roda a 220px
   (11,5% da largura). Trocando a foto, ajustar --itw-roda-x e --itw-roda-topo. */
@media (min-width: 1200px) {
  .itw-hero-foto {
    --itw-roda-x: 0.695;
    --itw-roda-topo: 0.115;
    --itw-roda-alvo: min(100vw - 200px, 50vw + 680px);
    --itw-foto-larg: calc(var(--itw-roda-alvo) / var(--itw-roda-x));
    background-size: var(--itw-foto-larg) auto;
    background-position: 0 calc(90px - var(--itw-foto-larg) * var(--itw-roda-topo));
  }
}

/* Véu azul-marinho: mais forte em cima (header) e à esquerda (texto); a foto respira à direita */
.itw-hero-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 33, 64, 0.85) 0%, rgba(11, 33, 64, 0) 32%),
    linear-gradient(90deg, rgba(11, 33, 64, 0.92) 0%, rgba(11, 33, 64, 0.66) 40%, rgba(11, 33, 64, 0.12) 78%);
}

/* Curva de saída para o fundo claro, como no hero do itwheel.com.br */
.itw-hero-foto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 110px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 72 C 300 22 640 8 980 38 C 1180 56 1320 68 1440 58 L1440 110 Z' fill='%23eef7f8'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.itw-hero > .container {
  position: relative;
}

/* Onda colorida da marca no canto direito, saindo de trás do card
   (o fim do container é a linha das abas, onde o card começa) */
.itw-hero > .container::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -90px;
  width: 170px;
  height: 178px;
  background: url("../img/ondas.png") center / contain no-repeat;
  pointer-events: none;
}

/* Textos e faixa alinhados à esquerda das abas do card */
.itw-hero-content {
  max-width: 672px;
  padding: 0 16px 28px;
}

.itw-hero-content > :last-child {
  margin-bottom: 0;
}

.itw-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  font-family: var(--itw-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--itw-teal-light);
}

.itw-hero-kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background-color: var(--itw-orange);
}

.itw-hero-title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.itw-hero-text {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* Faixa de informações (área de widgets "Destaques da home"). Cada widget vira um <li>. */
.itw-hero-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.itw-hero-info i {
  margin-right: 6px;
  color: var(--itw-orange-light);
}

/* O texto do widget (HTML personalizado, texto ou parágrafo) fica na mesma linha do ícone */
.itw-hero-info > li > div,
.itw-hero-info > li p {
  display: inline;
  margin: 0;
}

@media (max-width: 767px) {
  .itw-hero-content {
    padding: 0 0 18px;
  }

  .itw-hero-info {
    gap: 6px 18px;
    font-size: 0.88rem;
  }

  .itw-hero-foto {
    background-position: 72% center;
  }

  .itw-hero-foto::before {
    background: linear-gradient(180deg, rgba(11, 33, 64, 0.85) 0%, rgba(11, 33, 64, 0.55) 45%, rgba(11, 33, 64, 0.7) 100%);
  }

  .itw-hero-foto::after {
    height: 54px;
  }

  .itw-hero > .container::after {
    display: none;
  }
}

/* Card de compra logo depois dos textos/faixa, por cima da foto */
.itw-home-buy {
  position: relative;
  z-index: 2;
  scroll-margin-top: 16px;
}

.itw-home-buy .tab-content {
  box-shadow: var(--itw-shadow);
}

.itw-home-buy .nav-page .nav-tabs .nav-link:not(.active) {
  border-color: transparent;
  box-shadow: var(--itw-shadow-sm);
}

/* A foto já está no fundo: no card ficam só o nome, a classificação e o resumo */
body.page-template-home-ingresso #frm-event .img-front-cover {
  display: none;
}

body.page-template-home-ingresso #frm-event .img-front-cover + .col-lg-5 {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding-bottom: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--itw-border);
}

body.page-template-home-ingresso #frm-event .img-front-cover + .col-lg-5 h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--itw-primary);
}

body.page-template-home-ingresso #frm-event .img-front-cover + .col-lg-5 h6 {
  margin: 0;
}

body.page-template-home-ingresso #frm-event .img-front-cover + .col-lg-5 > p {
  flex-basis: 100%;
  margin: 0;
  color: var(--itw-muted);
}

/* Cards de evento e unidade */
.card {
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow-sm);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.card,
a.card:hover {
  color: var(--itw-text) !important;
}

a.card:hover,
div.card[href]:hover {
  transform: translateY(-4px);
  box-shadow: var(--itw-shadow);
}

.card-img-top {
  border-radius: 0;
}

.card-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.4rem;
}

.card-body .card-title {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.card-body h4.card-title {
  font-size: 1rem;
  color: var(--itw-teal);
}

.card-body p.card-text {
  margin-bottom: 0.35rem;
  color: var(--itw-muted);
}

.card-body small {
  color: var(--itw-muted);
}

.card-body i {
  color: var(--itw-teal);
}

/* Botões ficam no pé do card mesmo com títulos de tamanhos diferentes */
.card-body > .row.mt-4,
.card-body > .btn.mt-4 {
  margin-top: auto !important;
  padding-top: 1.25rem;
}

.card-body > .btn.mt-4 {
  padding-top: 0.6rem;
}

.card-body > .row.mt-4 {
  margin-bottom: -0.5rem;
}

div.card[href]:hover .btn-outline-success {
  color: #fff;
  background-color: var(--itw-orange);
}

/* Selo de data */
.event-date {
  left: 12px;
  right: auto;
  top: 12px;
  margin: 0;
  padding: 8px 12px 6px;
  min-width: 62px;
  color: var(--itw-primary);
  background: #fff;
  opacity: 1;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.event-date h4 {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 2px;
  color: var(--itw-orange);
}

.event-date h5 {
  margin-bottom: 0;
  line-height: 1;
}

.event-date .badge-secondary {
  background: transparent;
  color: var(--itw-primary);
  font-size: 0.8rem;
  padding: 0;
  letter-spacing: 0.06em;
}

.event-date h6 {
  font-size: 0.72rem;
  color: var(--itw-muted);
  margin: 2px 0 0;
}

/* Card de unidade (ingresso com data/horário) não tem botão: CTA gerado em CSS */
a.card[href*="/unit/"] .card-body::after {
  content: "Comprar";
  display: block;
  margin-top: auto;
  padding: 0.375rem 0.75rem;
  text-align: center;
  font-family: var(--itw-font-display);
  font-weight: 600;
  line-height: 1.5;
  color: var(--itw-orange-dark);
  border: 1px solid var(--itw-orange);
  border-radius: var(--itw-radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a.card[href*="/unit/"]:hover .card-body::after {
  color: #fff;
  background-color: var(--itw-orange);
}

a.card[href*="/unit/"] .card-body p.card-text {
  margin-bottom: 1.25rem;
}

/* ===== Etapa 5: página do evento / unidade ===== */
.nav-page > nav {
  margin-bottom: 14px;
}

.nav-page .nav-tabs {
  border-bottom: 0;
  gap: 8px;
}

.nav-page .nav-tabs .nav-link {
  border: 1px solid var(--itw-border);
  border-radius: var(--itw-radius-pill);
  background-color: #fff;
  color: var(--itw-primary);
  font-family: var(--itw-font-display);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.nav-page .nav-tabs .nav-link:hover {
  border-color: var(--itw-teal);
}

.nav-page .nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.tab-content {
  border: 0;
  background-color: #fff;
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow-sm);
}

@media (max-width: 767px) {
  .tab-content > .tab-pane > .row.p-4,
  .tab-content > .tab-pane > form > .row.p-4 {
    padding: 1rem !important;
  }
}

.img-front-cover img {
  height: 24rem;
  object-fit: cover;
  border-radius: var(--itw-radius);
}

@media (max-width: 768px) {
  .img-front-cover img {
    height: 15rem;
    object-fit: cover !important;
    border-radius: 14px;
  }
}

#frm-event h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--itw-orange);
  margin-top: 0.5rem;
}

.badge.classification {
  background-color: var(--itw-sky-100);
  color: var(--itw-navy);
  border-radius: var(--itw-radius-pill);
  padding: 0.45em 0.9em;
  font-weight: 600;
}

#frm-event .col-lg-5 > p {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Etapas numeradas (1 Selecione a data, 2 a hora, 3 o produto) */
#frm-event h4 {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#frm-event h4 > .badge-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--itw-teal);
  font-size: 0.95rem;
  padding: 0;
}

#data_visita_view,
#hora_visita_view {
  color: var(--itw-orange-dark);
}

/* Calendário (bootstrap-datepicker). Prefixo #calendario-agendamento: o unit.htm carrega o CSS do datepicker depois do tema */
#calendario-agendamento {
  background: var(--itw-sky-50);
  border-radius: var(--itw-radius);
  padding: 12px;
}

#calendario-agendamento .datepicker-days .table-condensed,
#calendario-agendamento .datepicker-months .table-condensed,
#calendario-agendamento .datepicker-years .table-condensed,
#calendario-agendamento .datepicker-centuries .table-condensed,
#calendario-agendamento .datepicker-decades .table-condensed {
  max-width: none;
  height: auto;
  box-shadow: none;
}

#calendario-agendamento .datepicker-days table thead,
#calendario-agendamento .datepicker-months table thead,
#calendario-agendamento .datepicker-years table thead,
#calendario-agendamento .datepicker-decades table thead,
#calendario-agendamento .datepicker-centuries table thead {
  background: transparent;
  color: var(--itw-primary);
}

#calendario-agendamento .datepicker-days table thead,
#calendario-agendamento .datepicker-days table tbody,
#calendario-agendamento .datepicker-days table tfoot {
  display: table-row-group;
  padding: 0;
}

#calendario-agendamento .datepicker .datepicker-switch {
  font-family: var(--itw-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: capitalize;
}

#calendario-agendamento .datepicker .prev,
#calendario-agendamento .datepicker .next {
  color: var(--itw-primary);
  border-radius: 50% !important;
}

#calendario-agendamento .datepicker .prev:hover,
#calendario-agendamento .datepicker .next:hover,
#calendario-agendamento .datepicker .datepicker-switch:hover {
  background: #fff !important;
  color: var(--itw-orange);
  font-size: inherit;
}

#calendario-agendamento .datepicker-days table thead tr:nth-child(3n + 0) {
  color: var(--itw-muted);
}

#calendario-agendamento .datepicker table tr td.day {
  border-radius: 12px;
  height: 40px;
  font-weight: 500;
}

#calendario-agendamento .datepicker table tr td.day:hover,
#calendario-agendamento .datepicker table tr td.day.focused {
  background: #fff;
}

#calendario-agendamento .datepicker table tr td.today,
#calendario-agendamento .datepicker table tr td.today:hover {
  background: #fff;
  color: var(--itw-orange-dark);
  box-shadow: inset 0 0 0 1px var(--itw-orange);
}

#calendario-agendamento .datepicker table tr td.active,
#calendario-agendamento .datepicker table tr td.active:hover,
#calendario-agendamento .datepicker table tr td.active.disabled,
#calendario-agendamento .datepicker table tr td.active.disabled:hover,
#calendario-agendamento .datepicker table tr td.active.active {
  background: var(--itw-orange) !important;
  color: #fff !important;
  text-shadow: none;
}

#calendario-agendamento .datepicker table tr td.disabled,
#calendario-agendamento .datepicker table tr td.disabled:hover,
#calendario-agendamento .datepicker table tr td.old,
#calendario-agendamento .datepicker table tr td.new {
  color: #b5c2c6;
  background: transparent;
}

#calendario-agendamento .datepicker tfoot th {
  border-radius: var(--itw-radius-pill) !important;
  color: var(--itw-blue);
  font-weight: 600;
}

/* Horários */
.time-list {
  background: var(--itw-sky-50);
  border-radius: var(--itw-radius);
  box-shadow: none;
  padding: 12px 6px;
  max-height: 22rem;
}

.btn-hour {
  border-radius: var(--itw-radius-pill);
  background-color: #fff;
  font-weight: 600;
}

.btn-hour.active,
.btn-hour.active:hover {
  color: #fff !important;
  background-color: var(--itw-orange) !important;
  border-color: var(--itw-orange) !important;
}

/* Lista de produtos */
.field-cupom .input-group-text,
.field-cupom .form-control,
.field-cupom .btn {
  border-color: var(--itw-border);
}

.field-cupom .input-group-text {
  background: var(--itw-sky-50);
  color: var(--itw-teal);
  border-radius: var(--itw-radius-pill) 0 0 var(--itw-radius-pill);
}

.field-cupom .btn {
  border-radius: 0 var(--itw-radius-pill) var(--itw-radius-pill) 0;
}

.itens-head p {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--itw-muted);
  margin-bottom: 0;
}

#product-list .item.products {
  background-color: var(--itw-sky-50);
  border-radius: 14px;
  margin: 0 0 10px;
  padding: 0.6rem 0.25rem !important;
}

#product-list > hr {
  display: none;
}

.plan-name {
  font-family: var(--itw-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--itw-primary);
}

.plan-description a {
  color: var(--itw-teal);
}

.plan-price {
  font-family: var(--itw-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--itw-orange-dark);
}

.plan-price-old {
  color: var(--itw-muted);
}

.plan-exhausted {
  border-radius: var(--itw-radius-pill);
  padding: 0.5em 0.9em;
}

/* Ingresso em duas linhas, como no celular: nome (com a imagem) em cima; preço à esquerda e quantidade à direita
   embaixo. No computador a coluna de produtos é estreita (~450px) e o seletor − 0 + não caberia em 25% dela.
   Sem colunas, o cabeçalho "Nome / Preço / Quantidade" não se alinha mais e sai. */
#product-list .itens-head {
  display: none;
}

#product-list .item.products > [class*="col-"]:first-child {
  flex: 0 0 100%;
  max-width: 100%;
  padding-bottom: 0.5rem !important;
}

#product-list .item.products > .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

#product-list .item.products > .col-6:last-child {
  display: flex;
  justify-content: flex-end;
}

/* Seletor de quantidade − 0 + (ft-templates-views/button-quant.inc.htm, ações do ft-plugin) */
.itw-quant {
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: auto;
}

.itw-quant .btn-card-quant {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50% !important;
  font-size: 0.85rem;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.itw-quant .btn-card-quant:active {
  transform: scale(0.92);
}

.itw-quant .btn-card-quant:focus-visible {
  box-shadow: var(--itw-focus-ring);
}

.itw-quant .btn-card-quant-minus {
  color: var(--itw-primary);
  background-color: #fff;
  border: 1px solid var(--itw-border);
}

.itw-quant .btn-card-quant-minus:hover {
  color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.itw-quant .btn-card-quant-plus {
  color: #fff;
  background-color: var(--itw-teal);
  border: 1px solid var(--itw-teal);
}

.itw-quant .btn-card-quant-plus:hover {
  color: #fff;
  background-color: var(--itw-blue);
  border-color: var(--itw-blue);
}

.itw-quant .plano_quant {
  flex: 0 0 auto;
  width: 2.25rem !important;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-family: var(--itw-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--itw-primary);
  cursor: default;
}

.itw-quant .plano_quant::placeholder {
  color: var(--itw-primary);
  opacity: 1;
}

.form-select {
  border-color: var(--itw-border);
  border-radius: 12px;
  min-height: 46px;
  color: var(--itw-text);
}

/* Totais (finalysale.inc.htm): a caixa ocupa a coluna inteira de produtos, que já é estreita */
#product-list + .row {
  margin-left: 0;
  margin-right: 0;
}

#product-list + .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
  background-color: var(--itw-sky-50);
  border-radius: 16px;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

#product-list + .row h5,
#product-list + .row h6 {
  white-space: nowrap;
}

/* Botões empilhados na largura da coluna */
#product-list + .row + .row > [class*="col-lg-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

#product-list + .row h6 {
  color: var(--itw-muted);
  font-family: var(--itw-font-body);
  font-weight: 500;
}

#product-list + .row h5 {
  font-size: 1.35rem;
  color: var(--itw-primary);
}

#total_compra {
  color: var(--itw-orange-dark) !important;
}

#btn-add-carrinho,
#btn-finalizar-compra,
#btn-pagar,
.cart-totais ~ .row .btn-success {
  padding: 0.8rem 1.25rem;
  font-size: 1.05rem;
}

#btn-add-carrinho i,
#btn-finalizar-compra i {
  margin-right: 6px;
}

/* Detalhes / local */
.details-text {
  font-size: 1.02rem;
  line-height: 1.7;
}

.address h2 {
  color: var(--itw-orange);
  text-transform: uppercase;
}

.address iframe {
  border: 0;
  border-radius: var(--itw-radius);
  min-height: 260px;
}

/* ===== Etapa 6: carrinho, pagamento, login e formulários ===== */
.alert {
  border: 0;
  border-radius: 14px;
}

.alert-info {
  background-color: var(--itw-sky-100);
  color: var(--itw-navy);
}

.alert-warning {
  background-color: #fde9d6;
  color: #7a3300;
}

.alert-success {
  background-color: #dff3ec;
  color: #14553d;
}

.alert-danger {
  background-color: #fbe0e3;
  color: #8a1c2b;
}

.form-control {
  border-color: var(--itw-border);
  border-radius: 12px;
  min-height: 46px;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-prepend + .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-prepend .input-group-text {
  border-color: var(--itw-border);
  background-color: var(--itw-sky-50);
  color: var(--itw-teal);
  border-radius: 12px 0 0 12px;
  min-width: 46px;
  justify-content: center;
}

/* Carrinho */
#btn-clear-carrinho {
  background: transparent;
  border: 1px solid var(--itw-border);
  color: var(--itw-muted);
}

#btn-clear-carrinho:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.cart-event {
  padding: 12px 0 20px;
}

.cart-event-title {
  font-family: var(--itw-font-display);
  font-size: 1.35rem;
  color: var(--itw-primary);
}

.display_date_visit {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--itw-navy);
  background-color: var(--itw-sky-100);
  border-radius: var(--itw-radius-pill);
  padding: 0.3rem 0.9rem;
  margin-bottom: 14px;
}

.cart-event-products-title {
  background-color: var(--itw-sky-50);
  color: var(--itw-muted);
  border-radius: 12px;
  padding: 10px 5px;
  margin: 0 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cart-event-products {
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--itw-border);
}

.cart-product {
  margin-top: 0;
  font-family: var(--itw-font-display);
  font-weight: 500;
  color: var(--itw-primary);
}

.cart-total {
  font-weight: 700;
  color: var(--itw-primary);
}

.cart-quant .input-group {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.btn-menos-carrinho,
.btn-mais-carrinho {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50% !important;
  background-color: var(--itw-sky-100);
  border-color: var(--itw-sky-100);
  color: var(--itw-primary);
  flex: none;
}

.btn-menos-carrinho:hover,
.btn-mais-carrinho:hover {
  background-color: var(--itw-primary);
  border-color: var(--itw-primary);
}

.cart-quant .input-group > .form-control {
  border: 0;
  min-height: 34px;
  max-width: 48px;
  padding: 4px 0;
  font-weight: 700;
  background: transparent;
}

.cart-totais {
  max-width: 380px;
  margin: 18px 0 18px auto;
  border-top: 0;
  padding: 16px 20px;
  background-color: var(--itw-sky-50);
  border-radius: 16px;
  color: var(--itw-muted);
  line-height: 2;
}

.cart-totais div {
  margin: 4px 0;
}

.cart-totais-itens {
  width: auto;
  min-width: 84px;
}

.cart-totais > div:last-child {
  font-family: var(--itw-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--itw-primary);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .cart-totais > div:last-child {
    font-size: 1.05rem;
  }
}

.cart-totais > div:last-child .cart-totais-itens {
  color: var(--itw-orange-dark);
}

/* Pagamento */
.timerContainer {
  background: var(--itw-header-bg);
  font-family: var(--itw-font-display) !important;
  z-index: 1030;
}

#timer {
  font-weight: 600;
  color: var(--itw-orange-light);
}

#frm-pagar {
  padding-bottom: 90px;
}

#frm-pagar h1 {
  font-size: 1.5rem;
  color: var(--itw-primary);
}

#formaPag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

#formaPag > .form-check:first-child {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  font-family: var(--itw-font-display);
  font-weight: 600;
  color: var(--itw-primary);
}

/* .pagamento-cartao também embrulha os blocos do cadastro (client-up / client-register) */
.pagamento-cartao {
  border: 1px solid var(--itw-border);
  border-radius: var(--itw-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

#formaPag .pagamento-cartao {
  margin: 0;
  border-radius: 14px;
  padding: 0.85rem 1.25rem 0.85rem 2.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#formaPag .pagamento-cartao:has(input:checked) {
  border-color: var(--itw-orange);
  box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.15);
}

#formaPag .pagamento-cartao i {
  color: var(--itw-teal);
}

.pagamento-fieldset {
  border: 1px solid var(--itw-border);
  border-radius: var(--itw-radius);
  padding: 1.25rem;
}

.pagamento-fieldset label {
  font-weight: 600;
  color: var(--itw-primary);
}

.termos_compra {
  background-color: var(--itw-sky-50);
  border-radius: 14px;
  padding: 1rem;
}

/* Login */
#frmlogin {
  width: 100%;
  max-width: 900px;
}

#frmlogin .list-group-item {
  border: 0;
  background: transparent;
  padding: 0.5rem 0;
  color: var(--itw-blue);
}

#frmlogin .alert-info {
  padding: 1.5rem;
  height: 100%;
}

.blue-title {
  color: var(--itw-primary);
}

.btn-social {
  border-radius: var(--itw-radius-pill);
}

/* Modais do plugin (#modalAlert / #modalConfirm) */
.modal-content {
  border: 0;
  border-radius: var(--itw-radius);
  box-shadow: var(--itw-shadow);
}

.modal-header,
.modal-footer {
  border: 0;
}

/* Meus pedidos ([pedidos] → orders.htm): cada pedido vira um cartão clicável */
a[title^="Abrir o pedido"] {
  display: block;
  height: 100%;
  padding: 16px 18px;
  background-color: #fff;
  border: 1px solid var(--itw-border);
  border-radius: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a[title^="Abrir o pedido"]:hover {
  border-color: var(--itw-teal);
  box-shadow: var(--itw-shadow-sm);
  transform: translateY(-2px);
}

a[title^="Abrir o pedido"] > .row {
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
}

a[title^="Abrir o pedido"] .rounded-circle {
  flex: 0 0 60px;
  max-width: 60px;
  height: 60px;
  margin: 0 16px 0 0 !important;
  padding: 0;
}

a[title^="Abrir o pedido"] .rounded-circle .fa-3x {
  font-size: 1.5rem;
}

a[title^="Abrir o pedido"] .rounded-circle.bg-warning {
  background-color: var(--itw-orange-light) !important;
}

a[title^="Abrir o pedido"] .col-10 {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

a[title^="Abrir o pedido"] .text-truncate {
  font-family: var(--itw-font-display);
  color: var(--itw-primary);
}

a[title^="Abrir o pedido"] .badge {
  border-radius: var(--itw-radius-pill);
  padding: 0.35em 0.7em;
  font-size: 0.8rem;
  vertical-align: 2px;
}

a[title^="Abrir o pedido"] .fa-ticket,
a[title^="Abrir o pedido"] .fa-calendar,
a[title^="Abrir o pedido"] .fa-clock {
  color: var(--itw-teal);
}

/* Cadastro ([cadastro] → client-up.htm / client-register.htm) */
form[name="frm_cadastro_email"] h1,
form[name="frm_cadastro_email"] h3 {
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}

form[name="frm_cadastro_email"] .form-label,
form[name="frm_cadastro_email"] label {
  font-weight: 600;
  color: var(--itw-primary);
}

form[name="frm_cadastro_email"] .form-check-label {
  font-weight: 400;
  color: var(--itw-text);
}

form[name="frm_cadastro_email"] .form-control,
form[name="frm_cadastro_email"] .form-select {
  margin-top: 6px;
}

form[name="frm_cadastro_email"] .input-group .form-control {
  margin-top: 0;
}

#btn-excluir {
  background: transparent;
  color: #b42335;
  border-color: #e7b8bf;
}

#btn-excluir:hover {
  background-color: #b42335;
  border-color: #b42335;
  color: #fff;
}

/* ===== Etapa 7: páginas internas, busca e footer ===== */
.sidebar-lateral {
  margin-bottom: 16px;
}

#carouselbanner .carousel-item img {
  height: 26rem;
}

footer {
  position: relative;
  margin: 72px 0 0 clamp(0px, 4vw, 64px);
  padding: 56px 0 40px !important;
  border-radius: 320px 0 0 320px;
  background-image: var(--itw-gradient-footer);
  color: #fff;
}

footer .container {
  margin-top: 0;
}

/* Onda colorida da marca saindo do canto do rodapé */
footer::before {
  content: "";
  position: absolute;
  right: 5%;
  top: -86px;
  width: 120px;
  height: 126px;
  background: url("../img/ondas.png") center / contain no-repeat;
  pointer-events: none;
}

@media (max-width: 991px) {
  footer::before {
    width: 80px;
    height: 84px;
    top: -58px;
  }
}

footer a,
footer a:hover {
  color: #fff;
}

footer a:hover {
  color: #ffd2a8;
}

.footer-logo img {
  max-width: 190px;
}

.footer-logo small {
  display: block;
  margin-top: 6px;
  opacity: 0.85;
}

footer h6 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

footer .sb-footer ul.menu li {
  margin-bottom: 0.9rem;
}

footer .sb-footer ul.menu a {
  font-family: var(--itw-font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

footer .btn-success {
  padding: 0.35rem 1.2rem;
  font-size: 0.85rem;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  footer {
    margin-left: 0;
    border-radius: 48px 48px 0 0;
    padding-top: 32px !important;
  }

  footer .text-right {
    text-align: left !important;
  }
}

/* Unidade/evento dentro dos modelos internos (page-event.php, Interna Padrão…):
   a moldura branca do tema sai e fica só o card do ft-plugin, sem "card dentro de card" */
.box-div:has(.nav-page) {
  background: transparent;
  box-shadow: none;
  padding: 0 !important;
}

/* Widgets do "Navbar Topo" no header escuro.
   - O widget de texto com [botoes-minha-conta] embrulha a lista num <p> (parágrafos automáticos): o <p> vazio sai.
   - Um widget de menu ali (ex.: "Início") segue o estilo do menu institucional, em branco, e vai para a
     esquerda, ao lado do logo. A linha do header é invertida (row-reverse no header.php): a margem
     automática à direita empurra o widget para a ponta esquerda. Sem suporte a :has (navegador antigo),
     ele só continua ao lado dos botões. */
.navbar-topo > p:empty {
  display: none;
}

header .navbar-collapse > .navbar-topo:has(.menu) {
  margin-right: auto;
  padding-left: 2.5rem;
}

header .navbar-collapse .navbar-topo .menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

header .navbar-collapse > .navbar-topo:has(.menu) .menu {
  margin-right: 0;
}

header .navbar-collapse .navbar-topo li.menu-item {
  display: block;
  margin: 0;
}

header .navbar-collapse .navbar-topo li.menu-item a {
  font-family: var(--itw-font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

header .navbar-collapse .navbar-topo li.menu-item a:hover {
  color: var(--itw-teal-light);
}

/* Calendário em telas estreitas: as 7 colunas cabem no card (o tema base fixava 0,75rem de respiro por dia) */
@media (max-width: 575px) {
  #calendario-agendamento .datepicker.datepicker-inline td,
  #calendario-agendamento .datepicker.datepicker-inline th {
    padding: 0.35rem 0.2rem !important;
  }

  #calendario-agendamento .datepicker table {
    width: 100%;
    table-layout: fixed;
  }

  #calendario-agendamento {
    padding: 8px;
  }
}

/* ===== Header fixo ao rolar (assets/js/header.js põe body.itw-header-fixo) =====
   O menu do topo sai do fluxo e fica preso no alto da tela, com fundo azul-marinho, sombra e um pouco
   mais compacto. O header guarda a altura que o menu tinha (--itw-navbar-h), para o conteúdo não pular.
   Na home o header já fica sobre a foto (position: absolute), então lá ele só ganha o fundo. */
html {
  scroll-padding-top: 96px;
}

header .navbar {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

.navbar-brand .img-fluid {
  transition: max-height 0.25s ease;
}

body.itw-header-fixo > header {
  padding-top: var(--itw-navbar-h, 0px);
}

body.page-template-home-ingresso.itw-header-fixo > header {
  padding-top: 0;
}

body.itw-header-fixo > header .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--itw-header-bg) !important;
  box-shadow: 0 6px 24px rgba(11, 33, 64, 0.28);
}

body.itw-header-fixo .navbar-brand .img-fluid {
  max-height: 3.25rem;
}

/* Menu do celular aberto com o header preso: rola por dentro se for maior que a tela */
body.itw-header-fixo #navbarMyAccount {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

@media (max-width: 767px) {
  body.itw-header-fixo .navbar-brand .img-fluid {
    max-height: 2.75rem;
  }
}

/* Usuário logado no WordPress: o menu fica abaixo da barra preta do admin */
body.admin-bar.itw-header-fixo > header .navbar {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar.itw-header-fixo > header .navbar {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar.itw-header-fixo > header .navbar {
    top: 0;
  }
}