/* ============================================================================
   user.css — TEAPOIO (exclusivo de user.html)
   Feed, compositor, cartão de publicação, reações, comentários, perfil e
   telas de autenticação do usuário.
   Importa bootstrap.css obrigatoriamente.
   ============================================================================ */
@import url("bootstrap.css");

/* -- Layout do feed (coluna central + lateral) ------------------------------ */
.feed-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
.feed-column { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.feed-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1.1rem; }

@media (max-width: 991.98px) {
  .feed-layout { grid-template-columns: 1fr; }
  .feed-aside { display: none; }
}

/* -- Compositor ------------------------------------------------------------- */
.composer textarea {
  border: 0; resize: none; box-shadow: none; padding: .25rem 0;
  font-size: 1.05rem; min-height: 56px;
}
.composer textarea:focus { box-shadow: none; }
.composer-toolbar { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.composer-tool {
  border: 0; background: transparent; color: var(--tea-text-muted);
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem;
}
.composer-tool:hover { background: var(--tea-primary-050); color: var(--tea-primary); }
.composer .visibility-select {
  border-radius: var(--tea-radius-pill); border-color: var(--tea-border);
  font-weight: 600; color: var(--tea-primary); max-width: 220px;
  background-color: var(--tea-primary-050);
}

/* -- Cartão de publicação --------------------------------------------------- */
.post-card { padding: 1.1rem 1.25rem; }
.post-head { display: flex; align-items: flex-start; gap: .75rem; }
.post-head .names { line-height: 1.2; min-width: 0; }
.post-head .names .name { font-weight: 700; color: var(--tea-text); }
.post-head .names .meta { font-size: .85rem; color: var(--tea-text-muted); }
.post-head .post-menu { margin-left: auto; }

.post-body { margin: .75rem 0 .25rem; white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; }

.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.post-tag {
  font-size: .82rem; font-weight: 600; color: var(--tea-primary-700);
  background: var(--tea-primary-050); padding: .2rem .6rem; border-radius: var(--tea-radius-pill);
}

.post-media { margin: .65rem 0; border-radius: var(--tea-radius); overflow: hidden; border: 1px solid var(--tea-border); }
.post-media img { width: 100%; display: block; }

.post-location {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--tea-text-muted); margin-top: .25rem;
}

/* -- Barra de reações ------------------------------------------------------- */
.post-actions {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--tea-border);
}
.reaction-btn, .post-action-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: transparent; color: var(--tea-text-muted);
  font-weight: 600; font-size: .92rem;
  padding: .45rem .8rem; border-radius: var(--tea-radius-pill);
}
.reaction-btn:hover, .post-action-btn:hover { background: var(--tea-surface-2); color: var(--tea-primary); }
.reaction-btn.reacted { color: var(--tea-primary); background: var(--tea-primary-050); }
.reaction-btn .bi { font-size: 1.05rem; }

/* Popover de tipos de reação */
.reaction-popover {
  display: flex; gap: .15rem; padding: .3rem;
  background: var(--tea-surface); border: 1px solid var(--tea-border);
  border-radius: var(--tea-radius-pill); box-shadow: var(--tea-shadow);
}
.reaction-option {
  border: 0; background: transparent; border-radius: 50%;
  width: 42px; height: 42px; font-size: 1.2rem; transition: transform .12s;
}
.reaction-option:hover { transform: scale(1.2); background: var(--tea-surface-2); }
.reaction-option[data-kind="like"] { color: var(--tea-primary); }
.reaction-option[data-kind="support"] { color: var(--tea-gold); }
.reaction-option[data-kind="love"] { color: var(--tea-danger); }
.reaction-option[data-kind="inform"] { color: var(--tea-teal); }

/* -- Comentários ------------------------------------------------------------ */
.comment-thread { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--tea-border); display: flex; flex-direction: column; gap: .85rem; }
.comment { display: flex; gap: .6rem; }
.comment .bubble {
  background: var(--tea-surface-2); border-radius: var(--tea-radius);
  padding: .55rem .8rem; min-width: 0; flex: 1;
}
.comment .bubble .name { font-weight: 700; font-size: .9rem; }
.comment .bubble .text { white-space: pre-wrap; word-wrap: break-word; }
.comment .comment-meta { display: flex; gap: 1rem; font-size: .8rem; margin-top: .25rem; padding-left: .25rem; }
.comment .replies { margin-top: .75rem; padding-left: 1.4rem; border-left: 2px solid var(--tea-border); display: flex; flex-direction: column; gap: .75rem; }
.comment-form { display: flex; gap: .6rem; align-items: flex-start; margin-top: .25rem; }
.comment-form .form-control { border-radius: var(--tea-radius); background: var(--tea-surface-2); }

/* -- Perfil ----------------------------------------------------------------- */
.profile-cover {
  height: 180px; border-radius: var(--tea-radius) var(--tea-radius) 0 0;
  background: linear-gradient(120deg, var(--tea-primary), var(--tea-secondary));
}
.profile-header { padding: 0 1.5rem 1.25rem; position: relative; }
.profile-header .tea-avatar {
  width: 112px; height: 112px; font-size: 2.4rem; margin-top: -56px;
  border: 4px solid var(--tea-surface); box-shadow: var(--tea-shadow-sm);
}
.profile-header .display-name { font-size: 1.5rem; font-weight: 800; margin: .5rem 0 0; }
.profile-header .username { color: var(--tea-text-muted); }
.profile-stats { display: flex; gap: 1.5rem; margin: .85rem 0; }
.profile-stats .stat strong { font-size: 1.1rem; }
.profile-stats .stat span { color: var(--tea-text-muted); margin-left: .25rem; }

/* -- Cartão informativo lateral --------------------------------------------- */
.aside-card-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tea-text-muted); font-weight: 700; margin-bottom: .65rem; }

/* ============================================================================
   Autenticação (entrar / cadastro)
   ============================================================================ */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
}
.auth-aside {
  background: linear-gradient(150deg, var(--tea-primary), var(--tea-secondary));
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center;
}
.auth-aside .lead-mark { height: 56px; margin-bottom: 2rem; filter: brightness(0) invert(1); }
.auth-aside h2 { font-weight: 800; font-size: 2rem; line-height: 1.2; max-width: 460px; }
.auth-aside p { font-size: 1.05rem; opacity: .92; max-width: 460px; margin-top: 1rem; }
.auth-aside .values { display: flex; flex-direction: column; gap: .9rem; margin-top: 2.2rem; }
.auth-aside .values .v { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.auth-aside .values .v .bi { font-size: 1.3rem; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand-row { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.auth-card .brand-row img { height: 40px; }
.auth-card h1 { font-size: 1.6rem; font-weight: 800; text-align: center; }
.auth-card .subtitle { text-align: center; color: var(--tea-text-muted); margin-bottom: 1.5rem; }
.auth-consent { background: var(--tea-primary-050); border-radius: var(--tea-radius-sm); padding: .85rem 1rem; font-size: .9rem; }

@media (max-width: 767.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* ============================================================================
   Eventos e mapa de encontros
   ============================================================================ */
.event-card { padding: 0; overflow: hidden; }
.event-date-badge {
  flex: none; width: 60px; text-align: center; border-radius: var(--tea-radius-sm);
  background: var(--tea-primary-050); color: var(--tea-primary-700); padding: .4rem 0; line-height: 1.1;
}
.event-date-badge .day { font-size: 1.4rem; font-weight: 800; }
.event-date-badge .mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

.event-type-chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: var(--tea-radius-pill);
}
.event-type-chip.online { background: var(--tea-secondary-050); color: var(--tea-secondary); }
.event-type-chip.in_person { background: var(--tea-gold-050); color: #9a6a12; }

#events-map, #event-map-single {
  width: 100%; border-radius: var(--tea-radius); border: 1px solid var(--tea-border);
}
#events-map { height: 480px; }
#event-map-single { height: 260px; }
.map-fallback {
  height: 100%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .5rem; color: var(--tea-text-muted); text-align: center; padding: 2rem;
}
.gm-style .gm-iw { border-radius: var(--tea-radius) !important; }
.event-pin-card { min-width: 200px; }
.event-pin-card h4 { font-size: .95rem; font-weight: 700; margin: 0 0 .25rem; }

/* ============================================================================
   Mensagens privadas (DM)
   ============================================================================ */
.dm-layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  height: calc(100vh - 64px - 3rem);
  border: 1px solid var(--tea-border); border-radius: var(--tea-radius);
  overflow: hidden; background: var(--tea-surface);
}
.dm-list { border-right: 1px solid var(--tea-border); overflow-y: auto; }
.dm-conv {
  display: flex; gap: .65rem; align-items: center; padding: .75rem 1rem;
  border-bottom: 1px solid var(--tea-border); width: 100%; border-left: 3px solid transparent;
  background: transparent; text-align: left;
}
.dm-conv:hover { background: var(--tea-surface-2); }
.dm-conv.active { background: var(--tea-primary-050); border-left-color: var(--tea-primary); }
.dm-conv .preview { font-size: .85rem; color: var(--tea-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-conv .unread-pill { margin-left: auto; background: var(--tea-primary); color: #fff; border-radius: 999px; font-size: .7rem; padding: .1rem .45rem; }

.dm-thread { display: flex; flex-direction: column; min-width: 0; }
.dm-thread-head { padding: .85rem 1.1rem; border-bottom: 1px solid var(--tea-border); display: flex; align-items: center; gap: .6rem; }
.dm-messages { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--tea-bg); }
.dm-bubble { max-width: 72%; padding: .55rem .85rem; border-radius: var(--tea-radius); line-height: 1.4; word-wrap: break-word; }
.dm-bubble.them { background: var(--tea-surface); border: 1px solid var(--tea-border); align-self: flex-start; border-bottom-left-radius: 4px; }
.dm-bubble.me { background: var(--tea-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.dm-bubble .time { font-size: .68rem; opacity: .7; display: block; margin-top: .2rem; }
.dm-compose { padding: .75rem 1rem; border-top: 1px solid var(--tea-border); display: flex; gap: .6rem; align-items: center; }

.dm-empty { display: flex; align-items: center; justify-content: center; height: 100%; }

@media (max-width: 767.98px) {
  .dm-layout { grid-template-columns: 1fr; }
  .dm-layout.thread-open .dm-list { display: none; }
  .dm-layout:not(.thread-open) .dm-thread { display: none; }
}

/* ============================================================================
   Premium / planos / checkout
   ============================================================================ */
.plan-card { border: 2px solid var(--tea-border); border-radius: var(--tea-radius-lg); padding: 1.5rem; height: 100%; background: var(--tea-surface); }
.plan-card.featured { border-color: var(--tea-gold); box-shadow: 0 8px 30px rgba(var(--tea-gold-rgb), .18); position: relative; }
.plan-card.featured::before {
  content: 'Apoie a causa'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--tea-gold); color: #3a2a07; font-weight: 700; font-size: .75rem; padding: .2rem .8rem; border-radius: 999px;
}
.plan-price { font-size: 2.2rem; font-weight: 800; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--tea-text-muted); }
.plan-features { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .5rem; }
.plan-features li { display: flex; gap: .5rem; align-items: flex-start; }
.plan-features li .bi { color: var(--tea-success); margin-top: .15rem; }

.method-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.method-tab { flex: 1; border: 2px solid var(--tea-border); border-radius: var(--tea-radius); padding: .75rem; background: var(--tea-surface); font-weight: 600; }
.method-tab.active { border-color: var(--tea-primary); background: var(--tea-primary-050); color: var(--tea-primary-700); }
.pix-box { text-align: center; padding: 1rem; }
.pix-code { word-break: break-all; font-family: monospace; font-size: .8rem; background: var(--tea-surface-2); padding: .75rem; border-radius: var(--tea-radius-sm); }
.checkout-timer { font-weight: 700; color: var(--tea-danger); }