/* ==========================================================================
   Modals
   .ds-modal-card é promovido de design-system.css (visual inalterado).
   .modal-overlay/.modal-dialog são novos: a página estática só tinha o
   card sempre visível dentro de uma demo; aqui o padrão real de abrir/
   fechar é o atributo [hidden] (JS só faz toggle, sem estado em classe) —
   controle de foco/Escape fica para o módulo JS de modal (Fase 3).
   ========================================================================== */

.modal-overlay {
  align-items: center;
  background: rgba(0, 0, 0, .55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-4);
  position: fixed;
  z-index: 1400;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay.is-opening .ds-modal-card {
  animation: ds-blur-up .35s ease-out both;
}

.ds-modal-card {
  background: var(--color-surface-elevated);
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  max-height: calc(100vh - var(--space-8));
  max-width: 480px;
  overflow-y: auto;
  padding: var(--space-7);
  width: 100%;
}

.modal-overlay--share-verse {
  align-items: flex-start;
  overflow-y: auto;
  padding-bottom: calc(var(--share-verse-safe-bottom, 0px) + var(--space-4));
  padding-top: calc(var(--zt-nav-height, 0px) + var(--space-4));
}

.modal-overlay--share-verse .ds-modal-card {
  max-height: calc(100vh - var(--zt-nav-height, 0px) - var(--share-verse-safe-bottom, 0px) - var(--space-8));
}

.ds-modal-card h4,
.ds-modal-card__title {
  font-family: var(--zt-font-display);
  font-size: 1.2rem;
  letter-spacing: .1em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

.ds-modal-card p,
.ds-modal-card__body {
  color: var(--color-text-secondary);
  font-family: var(--zt-font-serif);
  margin: 0 0 var(--space-5);
}

.ds-modal-card__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  float: right;
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: var(--space-1);
}

.ds-modal-card__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .ds-modal-card__actions {
    flex-direction: column-reverse;
  }

  .ds-modal-card__actions .ds-btn {
    width: 100%;
  }
}

.share-verse-modal__lang {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.share-verse-modal__lang[hidden] {
  display: none;
}

/* O visual de botão (borda, cor, hover com glow) já vem do .ds-btn
   (ds-btn--solid quando ativo, ds-btn--ghost quando inativo — ver
   updateShareVerseLanguageUI em app.js); aqui só o ajuste de layout
   pra caber 3 lado a lado no grupo. */
.share-verse-modal__lang-btn {
  flex: 1 1 0;
  font-size: .68rem;
  padding: var(--space-2) var(--space-3);
}

.share-verse-modal__actions {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.share-verse-modal__preview {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  margin: 0 0 var(--space-4);
  padding: var(--space-2);
}

.share-verse-modal__preview img {
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  width: 100%;
}

#share-article-preview img {
  aspect-ratio: 1200 / 630;
}

.share-verse-modal__actions .ds-btn {
  justify-content: center;
  width: 100%;
}

.share-verse-modal__social {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.share-verse-modal__social-button {
  align-items: center;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-family: var(--zt-font-display);
  font-size: var(--font-size-xs);
  gap: var(--space-1);
  justify-content: center;
  letter-spacing: 0;
  min-height: calc(var(--space-12) + var(--space-3));
  padding: var(--space-3) var(--space-2);
  text-transform: uppercase;
  transition: background var(--transition-normal), border-color var(--transition-normal),
    box-shadow var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal);
}

.share-verse-modal__social-button:hover,
.share-verse-modal__social-button:focus-visible {
  background: var(--color-surface-elevated);
  border-color: var(--color-action-primary);
  box-shadow: var(--shadow-glow-gold);
  color: var(--color-action-primary-hover);
}

.share-verse-modal__social-button:disabled {
  cursor: wait;
  opacity: .58;
}

.share-verse-modal__social-button .material-icons {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.share-verse-modal__social-button.is-loading .material-icons {
  animation: ds-btn-spin .8s linear infinite;
}

.share-verse-modal__status {
  color: var(--color-text-secondary);
  font-family: var(--zt-font-serif);
  font-size: .9rem;
  margin: var(--space-4) 0 0;
  min-height: 1.4em;
  text-align: center;
}

.share-verse-modal__status[hidden],
.share-verse-modal__status:empty {
  display: none;
}

@media (max-width: 520px) {
  .share-verse-modal__social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}