/* Account widget, auth dialog and the AI reading call to action.
   Uses the site's existing custom properties so it inherits the theme. */

/* ------------------------------------------------------------ header widget */

/* The header is a wrapping flex row with space-between. `margin-left: auto`
   here ate all the free space and pushed .main-nav onto a second line, so the
   widget is ordered last instead and lets space-between do the work. */
.account-widget {
  display: flex;
  align-items: center;
  order: 3;
  padding-left: 0.5rem;
}

/* Keeps the hamburger at the edge on mobile, after the widget. */
.site-header .nav-toggle {
  order: 4;
}

/* Reclaims the room the widget needs. The header content box is 1060px (1100
   minus its 20px padding either side) and the row measured 1079px, so it
   wrapped. Tightening the nav gap and the branding margin buys ~30px back. */
.site-header .main-nav > ul {
  gap: 12px;
}

.site-header .site-branding {
  margin-right: 16px;
}

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--accent-color-rgb), 0.08);
  color: var(--text-color);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.account-button:hover,
.account-button:focus-visible {
  background: rgba(var(--accent-color-rgb), 0.16);
  border-color: var(--accent-color);
}

/* Deslogado, o botao e uma chamada: e a porta para a conta e para os creditos,
   e no roxo do tema ele desaparecia no meio da navegacao. Dourado solido para
   destacar. Logado, ele volta a ser discreto -- ali ja se sabe o caminho, e o
   saldo e que precisa de atencao. */
.account-button:not(.account-button--signed) {
  border-color: var(--gold);
  background: var(--gold);
  color: #1c1508;
  font-weight: 600;
}

.account-button:not(.account-button--signed):hover,
.account-button:not(.account-button--signed):focus-visible {
  background: #e6c87e;
  border-color: #e6c87e;
  color: #1c1508;
}

.account-button__credits {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

/* A estrela antes do saldo, para o número não ficar solto. */
.account-button__mark {
  color: var(--gold);
  font-size: 0.8rem;
  line-height: 1;
}

.account-menu {
  position: relative;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 16rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px var(--shadow-color);
}

.account-dropdown[hidden] {
  display: none;
}

.account-dropdown__email {
  margin: 0;
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 600;
}

.account-dropdown__mail {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.76rem;
  word-break: break-all;
}

/* O saldo é a informação que a pessoa vem buscar aqui, então ganha o tamanho. */
.account-balance {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(216, 183, 106, 0.35);
  border-radius: 10px;
  background: rgba(216, 183, 106, 0.08);
}

.account-balance__value {
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.account-balance__unit {
  color: var(--gold);
  font-size: 0.82rem;
}

.account-dropdown__hint {
  margin: 0.5rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Ação principal do menu: comprar. */
.account-dropdown__buy {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1c1508;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.account-dropdown__buy:hover {
  filter: brightness(1.08);
  color: #1c1508;
}

.account-dropdown__item {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.account-dropdown__item:hover {
  border-color: var(--accent-color);
  color: var(--accent-hover);
}

@media (max-width: 700px) {
  .account-widget {
    padding-left: 0.5rem;
  }
  .account-button {
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
  }
}

/* ------------------------------------------------------------------- dialog */

.account-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 5, 12, 0.82);
  backdrop-filter: blur(3px);
  animation: account-fade 0.18s ease;
}

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

body.account-modal-open {
  overflow: hidden;
}

.account-modal {
  position: relative;
  width: min(26rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px var(--shadow-color);
  animation: account-rise 0.22s ease;
}

@keyframes account-fade {
  from { opacity: 0; }
}

@keyframes account-rise {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .account-overlay,
  .account-modal {
    animation: none;
  }
}

.account-modal h2 {
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  color: var(--text-color);
}

.account-modal__subtitle {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.account-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.account-modal__close:hover {
  color: var(--text-color);
}

.account-field {
  display: block;
  margin-bottom: 1rem;
}

.account-field span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.account-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-color);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS Safari from zooming on focus */
}

.account-field input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
}

.account-form__error,
.account-form__notice {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.account-form__error {
  color: #f6837f;
}

.account-form__notice {
  color: var(--accent-hover);
}

.account-form__error[hidden],
.account-form__notice[hidden] {
  display: none;
}

.account-form__submit {
  width: 100%;
  padding: 0.8rem;
  border: none;
  border-radius: 999px;
  background: var(--accent-color);
  color: #16112a;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.account-form__submit:hover:not(:disabled) {
  background: var(--accent-hover);
}

.account-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.account-modal__switch {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.1rem;
  text-align: center;
}

.account-modal__switch button {
  padding: 0.45rem;
  border: none;
  background: transparent;
  color: var(--accent-color);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.account-modal__switch button:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------- AI reading block */

.ai-reading {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid rgba(var(--accent-color-rgb), 0.35);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--accent-color-rgb), 0.1), rgba(0, 0, 0, 0.2));
}

.ai-reading__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ai-reading__title {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  color: var(--text-color);
}

.ai-reading__body {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ai-reading__body span {
  display: block;
}

/* The question set apart, so it reads as the thing being answered rather than
   as a phrase that happened to wrap onto its own line. */
.ai-reading__question {
  display: block;
  /* fit-content so the rule hugs the quote instead of floating out at the
     edge of a wide block whose text is centred. */
  width: fit-content;
  max-width: 34rem;
  margin: 0.7rem auto;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2px solid var(--gold);
  color: var(--text-color);
  font-size: 1.02rem;
  font-style: italic;
  text-align: left;
  quotes: '“' '”';
}

/* The reading page styles every button under `#tarot-app-page button`, which
   outranks a bare class. Anchoring on #reading-result wins that back without
   resorting to !important. */
/* Centred with `margin: auto` rather than by inheriting text-align: the page
   forces buttons to display:block, which text-align cannot centre. */
#reading-result .ai-reading__cta,
.ai-reading__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  background-image: none;
  color: #1c1508;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

#reading-result .ai-reading__cta:hover:not(:disabled),
.ai-reading__cta:hover:not(:disabled) {
  filter: brightness(1.08);
  background-image: none;
}

#reading-result .ai-reading__cta:disabled,
.ai-reading__cta:disabled {
  opacity: 0.65;
  cursor: progress;
}

/* Inline textual action ("Já tem conta? Entrar"). Must also outrank the
   page-wide button styling, or it renders as a second large pill. */
#reading-result .link-button,
.ai-reading .link-button {
  display: inline;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  background-image: none;
  color: var(--accent-color);
  font: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  box-shadow: none;
  cursor: pointer;
}

#reading-result .link-button:hover,
.ai-reading .link-button:hover {
  color: var(--accent-hover);
  background-image: none;
}

.ai-reading__note {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.ai-reading__error {
  margin: 0.7rem 0 0;
  color: #f6837f;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* The generated reading itself.
   #reading-result centres its text, which is fine for one-line card notes and
   unreadable for several paragraphs of prose, so the AI block opts out. */
#reading-result .ai-reading__result,
.ai-reading__result {
  text-align: left;
}

/* #reading-result styles its paragraphs directly, so the override has to reach
   the same element rather than rely on inheritance. */
#reading-result .ai-reading__result p,
#reading-result .ai-reading__result h3,
.ai-reading__result p {
  text-align: left;
  text-indent: 0;
}

.ai-reading__result h3 {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--accent-hover);
}

.ai-reading__result p {
  margin: 0 0 0.9rem;
  line-height: 1.7;
}

.ai-reading__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #1c1508;
  border-radius: 50%;
  animation: account-spin 0.7s linear infinite;
}

@keyframes account-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-reading__spinner {
    animation-duration: 2s;
  }
}

/* ------------------------------------------- account readings in the history */

.history-section-label {
  margin: 1.2rem 0 0.6rem;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.history-account-note {
  margin: 1rem 0 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.reading-history-item.is-account {
  border-left: 2px solid var(--gold);
}

.reading-item-full {
  margin-top: 0.6rem;
}

.reading-item-full summary {
  color: var(--accent-color);
  font-size: 0.86rem;
  cursor: pointer;
}

.reading-item-full summary:hover {
  color: var(--accent-hover);
}

.reading-item-text {
  margin-top: 0.7rem;
  text-align: left;
}

.reading-item-text p {
  margin: 0 0 0.8rem;
  line-height: 1.65;
}

.reading-item-text h4 {
  margin: 1rem 0 0.4rem;
  color: var(--accent-hover);
  font-size: 0.95rem;
}

/* ------------------------------------------------------- account deletion */

.account-dropdown__item--danger {
  margin-top: 0.5rem;
  border-color: rgba(246, 131, 127, 0.4);
  color: #f6837f;
}

.account-dropdown__item--danger:hover {
  border-color: #f6837f;
  color: #f6837f;
  background: rgba(246, 131, 127, 0.1);
}

.account-consequences {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.account-warning {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(216, 183, 106, 0.4);
  border-radius: 10px;
  color: var(--gold);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* The exhausted-credits CTA is a link, not a button, so it needs the same
   look without inheriting the page's anchor styles. */
a.ai-reading__cta,
#reading-result a.ai-reading__cta {
  text-decoration: none;
}

/* ------------------------------------------------------------ entrar com Google */

.account-social[hidden] { display: none; }

.account-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-color);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.account-google:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-color);
}

.account-google:disabled { opacity: 0.6; cursor: progress; }

.account-google__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

/* Separador "ou" entre o Google e o formulário de senha. */
.account-or {
  position: relative;
  margin: 1.1rem 0;
  text-align: center;
}

.account-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}

.account-or span {
  position: relative;
  padding: 0 0.7rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------- campo de pergunta fora da página de leitura
   A carta do dia e o tarot do amor têm o bloco da leitura completa, mas não
   herdam os estilos de formulário da página de tiragem — o input caía no
   padrão do navegador, branco e com borda inset. */

.cod-question-block,
.love-reading-setup .love-question-hint {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.cod-question-block {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.cod-question-block label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#cod-question,
#love-question {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-color);
  font: inherit;
  font-size: 1rem; /* 16px evita o zoom automático do Safari no iOS */
  line-height: 1.4;
}

#cod-question::placeholder,
#love-question::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

#cod-question:focus,
#love-question:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
}

/* A dica da página do amor vinha com o tamanho do corpo e centralizada,
   descolada do rótulo logo acima dela. */
.love-reading-setup .love-question-hint {
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.love-reading-setup label[for="love-question"] {
  display: block;
  max-width: 34rem;
  margin: 0 auto 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.love-reading-setup #love-question,
.love-reading-setup #love-question-suggestions {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}