/* ==========================================================================
   Alma Alentejana: percurso de reserva (vistas da VikBooking Pro)
   Resultado da pesquisa → Extras ("Opções") → Dados e pagamento (Stripe)
   → Reserva confirmada · Pré-check-in · Consultar reserva.
   No WP, estas regras aplicam-se ao HTML gerado pela VikBooking
   (substituir as classes pelos seletores reais do plugin).
   ========================================================================== */

.flow { padding-top: calc(var(--header-height) + var(--space-8)); padding-bottom: var(--space-section); }
.flow__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }

/* Passos ------------------------------------------------------------------ */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 0; margin: 0 0 var(--space-7); list-style: none; counter-reset: step; font-size: var(--text-small); }
.steps li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
  font-size: var(--text-caption);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}
.steps li + li { padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
.steps .is-done::before { content: "✓"; background: var(--oliva-600); border-color: var(--oliva-600); color: var(--white); }
.steps .is-done a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--color-line-strong); }
.steps [aria-current="step"] { color: var(--color-heading); font-weight: var(--weight-semi); }
.steps [aria-current="step"]::before { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-bg); }
@media (max-width: 600px) {
  .steps { flex-wrap: nowrap; gap: var(--space-3); }
  .steps li:not([aria-current="step"]) span { display: none; }
  .steps li + li { padding-left: var(--space-3); }
}

.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--space-8) clamp(var(--space-8), 4vw, var(--space-10)); align-items: start; }
.flow-main { display: grid; gap: var(--space-6); }
@media (max-width: 1024px) {
  .flow-layout { grid-template-columns: minmax(0, 1fr); }
  .flow-layout .summary { position: static; }
}

.flow-side { display: grid; gap: var(--space-5); align-content: start; position: sticky; top: calc(var(--header-height) + var(--space-5)); }
.flow-side .summary { position: static; }
@media (max-width: 1024px) {
  .flow-side { position: static; }
}

.panel { padding: clamp(var(--space-5), 3vw, var(--space-7)); border-radius: var(--radius-lg); background: var(--color-bg-raised); border: 1px solid var(--color-line); }
.panel__title { margin-bottom: var(--space-5); color: var(--color-heading); }
.flow-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* Resumo (lateral) -------------------------------------------------------- */
.summary {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.summary__head { display: flex; gap: var(--space-4); align-items: center; }
.summary__head img { width: 5.5rem; height: 4.25rem; object-fit: cover; border-radius: var(--radius-sm); }
.summary__head .t-h4 { color: var(--color-heading); }
.summary__dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-block: 1px solid var(--color-line-strong); }
.summary__dates div:last-child { grid-column: 1 / -1; }
.summary__dates dt, .summary__lines-title { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--weight-semi); color: var(--color-text-muted); }
.summary__dates dd { font-weight: var(--weight-medium); color: var(--color-heading); font-size: var(--text-small); }
.summary__dates dd.t-caption { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.summary__lines { display: grid; gap: var(--space-2); font-size: var(--text-small); }
.summary__lines div { display: flex; justify-content: space-between; gap: var(--space-4); }
.summary__lines dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--color-line-strong); color: var(--color-heading); font-weight: var(--weight-semi); }
.summary__total strong { font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--weight-regular); font-variant-numeric: lining-nums tabular-nums; }

/* Pesquisa editável ------------------------------------------------------- */
.search-inline { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: var(--space-3); align-items: end; }
.search-inline .stepper { min-height: 3.25rem; padding-inline: var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-bg-raised); }
.search-inline .stepper__btn { border-color: var(--color-line-strong); }
.search-inline .btn { min-height: 3.25rem; }
@media (max-width: 767px) {
  .search-inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-inline .input[type="date"] { padding-inline: 0.75rem; font-size: var(--text-small); }
  .search-inline .stepper { justify-content: space-between; }
  .search-inline .btn { grid-column: 1 / -1; }
}

/* Resultado -------------------------------------------------------------- */
.result { display: grid; grid-template-columns: 17rem 1fr; gap: var(--space-6); align-items: start; }
.result__media { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.result__body { display: grid; gap: var(--space-3); }
.result__features { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); }
.result__rate { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); font-size: var(--text-small); }
.result__rate strong { color: var(--color-heading); }
@media (max-width: 767px) { .result { grid-template-columns: 1fr; } }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: var(--weight-semi); }
.badge .icon { width: 1rem; height: 1rem; }
.badge--ok { background: color-mix(in srgb, var(--oliva-600) 14%, transparent); color: var(--oliva-700); }
.badge--no { background: color-mix(in srgb, var(--color-invented) 10%, transparent); color: #A3241C; }

.alert { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--ocre-100); color: var(--terra-800); }
.alert .icon { color: var(--ocre-600); margin-top: 0.1em; }
.alert__body { display: grid; gap: var(--space-3); }
.alert__body ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; list-style: none; }

/* Extras ----------------------------------------------------------------- */
.extras { display: grid; padding: 0; margin: 0; list-style: none; }
.extra { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4) var(--space-5); align-items: center; padding-block: var(--space-5); border-top: 1px solid var(--color-line); }
.extra:first-child { border-top: 0; padding-top: 0; }
.extra__icon { width: 3rem; height: 3rem; padding: 0.75rem; border-radius: 50%; background: var(--ocre-100); color: var(--terra-700); }
.extra__body { display: grid; gap: var(--space-1); }
.extra__body .t-h4 { color: var(--color-heading); }
.extra .stepper__btn { border-color: var(--color-line-strong); }
.extra.is-disabled .extra__body, .extra.is-disabled .extra__icon { opacity: 0.55; }
@media (max-width: 600px) {
  .extra { grid-template-columns: auto 1fr; }
  .extra > :last-child { grid-column: 2; justify-self: start; }
}

/* Pagamento -------------------------------------------------------------- */
.pay { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--terra-800); color: var(--cal-100); }
.pay .t-h3, .pay strong { color: var(--cal-50); }
.pay__amount { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.pay__amount strong { font-family: var(--font-display); font-size: 2.25rem; font-weight: var(--weight-regular); }
.pay__methods { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pay__methods span { padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid rgb(255 255 255 / 0.25); font-size: var(--text-caption); font-weight: var(--weight-semi); letter-spacing: 0.02em; }
.pay .inventado { color: var(--invented-on-dark) !important; }
.pay .t-caption, .pay .t-muted { color: rgb(250 245 239 / 0.75); }
.pay .btn { width: 100%; }
.pay__secure { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-caption); color: rgb(250 245 239 / 0.75); }
.pay__secure .icon { width: 1rem; height: 1rem; }

/* Confirmação ------------------------------------------------------------ */
.success { display: grid; gap: var(--space-4); justify-items: start; }
.success__icon { width: 3.5rem; height: 3.5rem; color: var(--oliva-600); }
@media (prefers-reduced-motion: no-preference) {
  .success__icon { animation: pop var(--dur-slow) var(--ease-out) both; }
  @keyframes pop { from { opacity: 0; transform: scale(0.6); } }
}
.ref { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ref div { padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); background: var(--color-bg-alt); }
.ref dt { font-size: var(--text-caption); color: var(--color-text-muted); }
.ref dd { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-heading); letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; }
.next-steps { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; counter-reset: next; }
.next-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-line); counter-increment: next; }
.next-steps li::before { content: counter(next); grid-row: span 3; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-bg-alt); font-weight: var(--weight-semi); color: var(--color-brand); font-size: var(--text-small); }
.next-steps .t-h4 { color: var(--color-heading); }
.next-steps .btn { justify-self: start; margin-top: var(--space-2); }

.btn--danger { border-color: color-mix(in srgb, #A3241C 45%, transparent); color: #A3241C; }
@media (hover: hover) { .btn--danger:hover { background: color-mix(in srgb, #A3241C 7%, transparent); } }

/* Janela de confirmação (cancelar) */
.modal { width: min(32rem, calc(100% - 2 * var(--gutter))); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-bg-raised); color: var(--color-text); box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgb(31 21 14 / 0.45); }
.modal[open] { animation: modal-in var(--dur-base) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.modal__body { display: grid; gap: var(--space-4); padding: var(--space-7); }
.modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-2); }

/* Pré-check-in ------------------------------------------------------------ */
.guest { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 3vw, var(--space-7)); border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--color-bg-raised); }
.guest legend { float: left; width: 100%; margin-bottom: var(--space-2); font-family: var(--font-serif); font-size: var(--text-h4); color: var(--color-heading); }
.guest legend + * { clear: both; }