/* Acciones compartidas: dimensiones y estados. Colores desde palette.css y
   variantes de cada página. Se carga después de los estilos de página. */
:root {
  --action-size-compact: 44px;
  --action-size-standard: 56px;
  --action-size-hero: 64px;
  --action-radius: 10px;
  --action-focus-color: var(--color-ink);
}

.button, .continue-button, .dialog-confirm {
  align-items: center;
  justify-content: center;
  min-height: var(--action-size-standard);
  padding-block: 12px;
  border-radius: var(--action-radius);
  gap: 12px;
  text-align: center;
  transition: filter 150ms ease-out, scale 150ms ease-out, background-color 150ms ease-out;
}
/* Landing buttons keep their menu and floating visibility rules. */
.continue-button, .dialog-confirm { display: inline-flex; }
.button.header-quote, .button.mobile-quote {
  min-height: var(--action-size-compact);
  padding-block: 10px;
}
.button.button-large {
  min-height: var(--action-size-hero);
  padding-block: 16px;
}
.continue-button > svg, .continue-button > img, .button > svg, .button > img {
  display: block;
  flex-shrink: 0;
}
.action-button, .confirmation-actions button, .add-car { border-radius: var(--action-radius); }
.add-car { min-height: var(--action-size-standard); }
.dialog-confirm.dialog-secondary { padding-block: 11px; }
.header-back, .dialog-close { min-width: var(--action-size-compact); min-height: var(--action-size-compact); }
.brand { display: inline-flex; align-items: center; min-height: var(--action-size-compact); }
.text-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--action-size-compact); }
.main-navigation a:not(.button) { display: inline-flex; align-items: center; min-height: var(--action-size-compact); }

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover,
  .continue-button:not(:disabled):hover,
  .dialog-confirm:not(:disabled):hover { filter: brightness(.96); }
  .button.button-secondary:hover { background: #ffffff45; filter: none; }
  .closing-actions .button.button-secondary:hover { background: #e8f7f830; }
  .dialog-confirm.dialog-secondary:hover { background: var(--page); filter: none; }
  .continue-button:hover .budget-arrow path { transform: translateX(3px); }
}
.budget-arrow path { transition: transform 150ms ease-out; }
.button:not(:disabled):active,
.continue-button:not(:disabled):active,
.dialog-confirm:not(:disabled):active { scale: .98; }
.button:disabled, .continue-button:disabled, .dialog-confirm:disabled, .add-car:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: none;
  scale: none;
}

/* Double ring remains visible on both pale and dark surfaces. */
:is(.button, .continue-button, .dialog-confirm, .add-car, .action-button,
.header-back, .brand-home, .brand, .menu-toggle, .dialog-close, .text-link,
.main-navigation a, .confirmation-actions button):focus-visible {
  outline: 3px solid var(--action-focus-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-white);
}

@media (max-width: 720px) {
  :root { --action-size-hero: 60px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .hero-actions .button { min-height: var(--action-size-standard); padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .continue-button, .dialog-confirm { transition: none; }
  .button:not(:disabled):active, .continue-button:not(:disabled):active,
  .dialog-confirm:not(:disabled):active { scale: none; }
  .continue-button:hover .budget-arrow path { transform: none; transition: none; }
}