/* =========================================================================
   LOJA DE VOUCHER — pele institucional (estilo Upwage)
   src/pages/schedule/cad-new-schedule-institucional.css

   Carregado por src/pages/schedule/cad-new-schedule.html, por ÚLTIMO:
     institucional.css → cad-new-schedule.css (estados do JS) → este arquivo.
   Usa os tokens e componentes da institucional.css (header, rodapé, .modal,
   .campo, .btn, .chip e a pele dos diálogos/toast do utils.js). Aqui fica o
   que é só da loja: topo, barra da busca, cartões de oferta, os três
   valores, o contato da clínica e o modal pós-compra.

   Tudo em px, como a institucional (a página não carrega mais o base.css).

   Quase tudo daqui pinta marcação GERADA pelo cad-new-schedule.js
   (createOfferCard, blocoDeContato, mostrarPosCompra). Os nomes das classes
   são do JS: dá para reestilizar, não para renomear. Os ícones dos cartões
   são <i data-lucide> que o lucide troca por <svg class="lucide">.
   ========================================================================= */

/* ----- Topo ----- */
.loja-topo .wrap { max-width: var(--largura); }
.loja-topo .display { max-width: 760px; }
.loja-topo__acoes { margin-top: 30px; }
.loja-selos {
  list-style: none;
  margin-top: 28px;
}
.loja-selos .chip { gap: 8px; padding: 8px 15px; font-size: 13.5px; }
.loja-selos .chip svg { width: 16px; height: 16px; flex: none; color: var(--teal); }

/* ----- Barra da busca ativa (fica presa embaixo do header ao rolar) ----- */
.doctor-results-toolbar {
  position: sticky;
  top: var(--altura-header);
  z-index: 110; /* abaixo do header (120) e dos modais */
  background: rgba(247, 245, 238, .96);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.doctor-results-toolbar-inner { padding-block: 12px; }
.doctor-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.doctor-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  background: var(--branco); border: 1px solid var(--linha); color: var(--texto);
}
.doctor-chip:empty { display: none; }
#activeSpecialtyChip { background: rgba(0, 101, 78, .08); border-color: rgba(0, 101, 78, .22); color: var(--teal-profundo); font-weight: 600; }

.doctor-chip-adjust,
.doctor-chip-clear {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.doctor-chip-adjust svg, .doctor-chip-clear svg { width: 16px; height: 16px; flex: none; }
.doctor-chip-adjust { margin-left: auto; background: transparent; border: 1.5px solid var(--tinta); color: var(--tinta); }
.doctor-chip-adjust:hover { background: var(--tinta); color: var(--branco); }
.doctor-chip-clear { background: transparent; border: 1.5px solid transparent; color: var(--texto-2); }
.doctor-chip-clear:hover { color: var(--erro); }

/* ----- Lista de resultados ----- */
.doctor-listing-page { padding: 48px 0 96px; background: var(--creme); }
.doctor-listing-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.doctor-listing-title {
  font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em; color: var(--texto);
}
.doctor-listing-count { font-size: 14px; color: var(--texto-3); }

.doctor-info-alert {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  padding: 12px 16px; border-radius: var(--raio-sm);
  background: rgba(0, 101, 78, .08); color: var(--teal-profundo);
  font-size: 14px; font-weight: 500; line-height: 1.55;
}
.doctor-info-alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.doctor-cards-list { display: grid; gap: 20px; margin-top: 28px; }
/* "Buscando ofertas..." e "Nenhuma oferta…" chegam como <p> solto do JS */
.doctor-cards-list > p {
  padding: 36px 24px; border-radius: var(--raio-lg); text-align: center;
  border: 1px dashed var(--linha-forte); color: var(--texto-2); font-size: 15px;
}

/* ----- Cartão de oferta (createOfferCard) ----- */
/* Grade no próprio cartão (o .doctor-card-main vira display: contents): o
   endereço, que o JS põe FORA do .doctor-card-main, sobe para baixo do nome
   em vez de cair depois da coluna do preço, que é mais alta. */
.doctor-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr auto; column-gap: 32px;
  padding: 28px 32px; border-radius: var(--raio-lg);
  background: var(--creme-claro); border: 1px solid var(--linha);
  transition: border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.doctor-card:hover { border-color: rgba(0, 101, 78, .3); box-shadow: var(--sombra-sm); }
/* oferta para a qual o paciente voltou depois do login */
.doctor-card.is-destaque { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 101, 78, .18), var(--sombra-sm); }

.doctor-card-main { display: contents; }
.doctor-info-area { grid-column: 1; grid-row: 1; }
.doctor-address-row { grid-column: 1; grid-row: 2; align-self: start; }
.doctor-price-action-area { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.doctor-schedule-area { grid-column: 1 / -1; grid-row: 3; }

.doctor-info-area { display: flex; align-items: center; gap: 18px; min-width: 0; }
.doctor-avatar {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 101, 78, .1); color: var(--teal-profundo);
  font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .02em;
}
.doctor-info-content { min-width: 0; }
.doctor-name-row h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--texto);
  overflow-wrap: anywhere;
}
.doctor-specialty { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.doctor-specialty span { margin-inline: 4px; color: var(--texto-3); }
/* o nome vem do antigo sistema de avaliação; hoje só leva o nome da clínica */
.doctor-rating-row { margin-top: 2px; }
.doctor-clinic-name { font-size: 14px; font-weight: 600; color: var(--texto); }

.doctor-address-row {
  display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-left: 82px;
  font-size: 13.5px; color: var(--texto-3);
}
.doctor-address-row svg { width: 15px; height: 15px; flex: none; color: var(--teal); }

/* preço + compra */
.doctor-price-action-area { display: grid; gap: 10px; }
/* O JS escreve "sem voucher" ANTES de "com voucher"; o column-reverse põe o
   preço com voucher em cima, grande, e o "de" riscado numa linha embaixo. */
.doctor-price-card {
  display: flex; flex-direction: column-reverse; gap: 10px;
  padding: 16px 18px; border-radius: var(--raio);
  background: var(--branco); border: 1px solid var(--linha);
}
.doctor-price-current { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.doctor-price-old {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--linha);
}
.doctor-price-old span, .doctor-price-current span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.doctor-price-current span { color: var(--teal); }
.doctor-price-old strong { font-size: 14px; font-weight: 500; color: var(--texto-3); text-decoration: line-through; }
.doctor-price-current strong { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--texto); }
.doctor-price-current small {
  margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0, 101, 78, .1); color: var(--teal-profundo); font-size: 12px; font-weight: 600;
}

/* "Comprar voucher" (.btn--teal) e "Pagar no cartão" (.btn--contorno) */
.doctor-card-schedule-button,
.voucher-card-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 48px; padding: 12px 22px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva), transform .25s var(--curva), opacity .2s;
}
.doctor-card-schedule-button svg, .voucher-card-secondary svg { width: 18px; height: 18px; flex: none; }
.doctor-card-schedule-button { border: 1.5px solid var(--teal); background: var(--teal); color: var(--branco); box-shadow: 0 10px 26px rgba(0, 101, 78, .26); }
.doctor-card-schedule-button.is-visible:hover:not(:disabled) { background: var(--teal-profundo); border-color: var(--teal-profundo); transform: translateY(-2px); }
.voucher-card-secondary { border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); }
.voucher-card-secondary:hover:not(:disabled) { background: var(--tinta); color: var(--branco); }
.doctor-card-schedule-button:disabled, .voucher-card-secondary:disabled { cursor: progress; opacity: .6; box-shadow: none; }

/* ----- Os três valores (.voucher-breakdown) ----- */
.doctor-schedule-area { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linha); display: grid; gap: 16px; }
.voucher-breakdown { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.voucher-breakdown-item {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 14px 16px; border-radius: var(--raio);
  background: var(--branco); border: 1px solid var(--linha);
}
.voucher-breakdown-item small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.voucher-breakdown-item strong { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--texto); }
.voucher-breakdown-item span { font-size: 12.5px; line-height: 1.45; color: var(--texto-2); }
.voucher-breakdown-item.is-total { background: var(--tinta); border-color: var(--tinta); }
.voucher-breakdown-item.is-total small { color: var(--teal-claro); }
.voucher-breakdown-item.is-total strong { color: var(--dourado-claro); }
.voucher-breakdown-item.is-total span { color: rgba(247, 245, 238, .72); }
.voucher-breakdown-sign {
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--texto-3);
}

/* ----- Contato da clínica (.voucher-contact; o mesmo contato e os links
   aparecem de novo no modal pós-compra) ----- */
.voucher-contact { padding: 18px 20px; border-radius: var(--raio); background: rgba(14, 31, 51, .04); }
.voucher-contact h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--texto); }
.voucher-contact h3 svg { width: 18px; height: 18px; flex: none; color: var(--teal); }
.voucher-contact-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.voucher-contact-line svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal); }
.voucher-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.voucher-contact-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; max-width: 100%;
  padding: 8px 15px; border-radius: 999px;
  background: var(--branco); border: 1px solid var(--linha-forte); color: var(--texto);
  font-size: 13.5px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere;
  transition: border-color .2s, color .2s, background-color .2s;
}
.voucher-contact-link svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
a.voucher-contact-link:hover { border-color: var(--teal); color: var(--teal); }
/* o WhatsApp é o caminho mais curto até a clínica: verde reconhecível */
.voucher-contact-link.is-whatsapp { background: #E8F6EE; border-color: rgba(18, 140, 74, .35); color: #0E6B3B; }
.voucher-contact-link.is-whatsapp svg { color: #128C4A; }
a.voucher-contact-link.is-whatsapp:hover { background: #128C4A; border-color: #128C4A; color: var(--branco); }
a.voucher-contact-link.is-whatsapp:hover svg { color: var(--branco); }
.voucher-contact-link.is-plain { background: transparent; }
.voucher-contact-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--texto-3); }

/* ----- Modal de filtros (#scheduleModal = .modal da institucional) ----- */
.schedule-modal .modal__corpo > p { margin-top: 0; }
.schedule-modal .campos { margin-top: 20px; }
.voucher-explainer {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--raio);
  background: rgba(0, 101, 78, .07); border: 1px solid rgba(0, 101, 78, .18);
}
.voucher-explainer strong {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-profundo);
}
.voucher-explainer ul { list-style: none; margin-top: 8px; display: grid; gap: 6px; }
.voucher-explainer li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.voucher-explainer li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.voucher-explainer b { font-weight: 600; color: var(--texto); }

/* ----- Modal pós-compra (mostrarPosCompra monta tudo com el()) ----- */
.voucher-result-overlay {
  position: fixed; inset: 0; z-index: 9999; /* acima do header (120) e abaixo do toast do utils.js */
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 31, 51, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: inst-modal-fundo .2s ease both;
}
.voucher-result-modal {
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 3.2vw, 36px); border-radius: var(--raio-lg);
  background: var(--creme-claro); color: var(--texto);
  border: 1px solid var(--linha); box-shadow: var(--sombra-forte);
  animation: inst-modal-caixa .3s var(--curva) both;
}
.voucher-result-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--texto); cursor: pointer;
  font-family: inherit; font-size: 22px; line-height: 1;
  transition: background-color .2s, border-color .2s, color .2s;
}
.voucher-result-close:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.voucher-result-title {
  padding-right: 48px; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; line-height: 1.2; text-wrap: balance;
}
.voucher-result-subtitle { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--texto-2); }

.voucher-result-qr {
  display: block; width: 208px; height: 208px; margin: 22px auto 0; padding: 10px;
  border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha);
}
.voucher-result-pix {
  display: block; width: 100%; min-height: 84px; margin-top: 16px; padding: 12px 14px; resize: none;
  border-radius: var(--raio-sm); border: 1px solid var(--linha-forte); background: var(--branco); color: var(--texto);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; word-break: break-all;
}
.voucher-result-pix:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 101, 78, .16); }

/* linha de situação do PIX: o laço de cad-new-schedule.js reescreve o texto e
   troca a variante quando o pagamento cai ou quando a cobrança morre. */
.voucher-result-status {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--raio-sm);
  font-size: 14px; font-weight: 500; line-height: 1.55;
  background: rgba(217, 163, 33, .16); color: var(--dourado-texto);
}
.voucher-result-status.is-ok {
  background: rgba(0, 101, 78, .12); color: var(--teal);
}
.voucher-result-status.is-erro {
  background: rgba(163, 57, 43, .12); color: var(--erro);
}
.voucher-result-status.is-espera {
  background: rgba(217, 163, 33, .16); color: var(--dourado-texto);
}

/* aviso de cobrança sem meio de pagamento (p.voucher-contact-note solto na caixa) */
.voucher-result-modal > .voucher-contact-note {
  margin-top: 18px; padding: 12px 16px; border-radius: var(--raio-sm);
  background: rgba(217, 163, 33, .16); color: var(--dourado-texto); font-size: 14px; font-weight: 500;
}

/* botões do modal: primário teal, secundário em contorno (pílula de 48px) */
.voucher-result-primary,
.voucher-result-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; cursor: pointer; text-align: center;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
}
.voucher-result-primary { border: 1.5px solid var(--teal); background: var(--teal); color: var(--branco); }
.voucher-result-primary:hover { background: var(--teal-profundo); border-color: var(--teal-profundo); }
.voucher-result-secondary { border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); }
.voucher-result-secondary:hover { background: var(--tinta); color: var(--branco); }
/* soltos na caixa (copiar o PIX, abrir a fatura do cartão): linha cheia */
.voucher-result-modal > .voucher-result-primary,
.voucher-result-modal > .voucher-result-secondary { display: flex; width: 100%; margin-top: 12px; }

.voucher-code-box {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 20px;
  padding: 18px 20px; border-radius: var(--raio); text-align: center;
  background: var(--tinta); color: var(--creme-claro);
}
.voucher-code-box small { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-claro); }
.voucher-code { font-size: 26px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; color: var(--dourado-claro); overflow-wrap: anywhere; }
.voucher-code-box .voucher-code-note { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(247, 245, 238, .75); }

.voucher-next-steps { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linha); }
.voucher-next-steps h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--texto); }
.voucher-next-steps ol { margin-top: 12px; padding-left: 22px; display: grid; gap: 8px; }
.voucher-next-steps li { padding-left: 4px; font-size: 14.5px; line-height: 1.6; color: var(--texto-2); }
.voucher-next-steps li::marker { color: var(--teal); font-weight: 600; }

.voucher-result-contact {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--raio);
  background: var(--branco); border: 1px solid var(--linha);
}
.voucher-result-contact strong { display: block; font-size: 15px; font-weight: 600; color: var(--texto); }
.voucher-result-contact p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.voucher-result-contact .voucher-contact-actions { margin-top: 10px; }

.voucher-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 26px; }

/* ----- Responsivo ----- */
@media (max-width: 1024px) {
  .doctor-card { grid-template-columns: minmax(0, 1fr) 270px; column-gap: 24px; }
}

@media (max-width: 860px) {
  /* uma coluna: nome, endereço, preço e compra, os três valores */
  .doctor-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .doctor-info-area { grid-column: 1; grid-row: 1; }
  .doctor-address-row { grid-column: 1; grid-row: 2; margin-top: 12px; padding-left: 0; }
  .doctor-price-action-area { grid-column: 1; grid-row: 3; margin-top: 18px; }
  .doctor-schedule-area { grid-column: 1; grid-row: 4; }
}

@media (max-width: 760px) {
  .loja-topo__acoes .btn { flex: 0 1 auto; }
  .loja-selos { gap: 8px; }
  .loja-selos .chip { font-size: 13px; padding: 7px 12px; }

  /* a barra presa fica numa linha só e rola de lado */
  .doctor-results-toolbar-inner { padding-block: 10px; }
  .doctor-active-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--respiro) * -1); padding-inline: var(--respiro); }
  .doctor-active-chips::-webkit-scrollbar { display: none; }
  .doctor-chip-adjust { margin-left: 0; }

  .doctor-listing-page { padding: 32px 0 72px; }
  .doctor-cards-list { gap: 16px; margin-top: 22px; }
  .doctor-card { padding: 20px 18px; border-radius: 20px; }
  .doctor-avatar { width: 52px; height: 52px; font-size: 18px; }
  .doctor-info-area { gap: 14px; }
  .doctor-name-row h2 { font-size: 22px; }
  .doctor-price-current strong { font-size: 26px; }

  .voucher-breakdown { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .voucher-breakdown-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; }
  .voucher-breakdown-item small { grid-column: 1; }
  .voucher-breakdown-item strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; }
  .voucher-breakdown-item span { grid-column: 1; }
  .voucher-breakdown-sign { font-size: 18px; line-height: 1; }
  .voucher-contact { padding: 16px; }

  .voucher-result-overlay { padding: 12px; align-items: flex-end; }
  .voucher-result-actions { flex-direction: column-reverse; }
  .voucher-result-actions > * { width: 100%; }
}