/* ==========================================================================
   auth.css — shared across every page
   Auth-aware nav chip, toasts, and the motion language for forms/buttons.
   Include this AFTER styles.css (and after any page's own <style> block)
   on every page: index.html, login.html, registration.html, meetings.html,
   donations.html, polls.html, chat.html, gallery.html, profile.html.
   ========================================================================== */

:root{
  --xc-gold: var(--gold, #c99a3f);
  --xc-gold-2: var(--gold-2, #e8c976);
  --xc-forest: var(--forest, #0f2e20);
  --xc-paper: var(--paper, #ffffff);
}

/* ---------- Page-level entrance ---------- */
body{ animation: pageFadeIn .5s ease both; }
@keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Auth nav area ---------- */
.auth-area{ display:flex; align-items:center; gap:10px; }

.guest-tag{
  font-family:'Oswald', sans-serif; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted, #5c7a6f); display:none; align-items:center; gap:6px; margin-right:2px;
}
.guest-tag::before{ content:"●"; font-size:0.5rem; color:var(--muted, #9aa79f); }
[data-auth-state="guest"] .guest-tag{ display:inline-flex; }

/* User chip (logged-in) */
.user-chip{
  position:relative;
  display:none;
  align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(201,154,63,0.12), rgba(15,46,32,0.06));
  border:1px solid rgba(15,46,32,0.1);
  cursor:pointer;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  animation: chipPop .4s cubic-bezier(.2,.8,.3,1.3) both;
}
.user-chip:hover{ box-shadow:0 8px 20px rgba(15,46,32,0.14); transform:translateY(-1px); border-color:var(--xc-gold); }
[data-auth-state="member"] .user-chip{ display:flex; }
@keyframes chipPop{ from{ opacity:0; transform:scale(.85) translateY(-4px); } to{ opacity:1; transform:scale(1) translateY(0); } }

.user-chip__avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--xc-forest), #163d2a);
  color:var(--xc-gold-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:0.95rem;
  box-shadow:0 0 0 2px var(--xc-paper), 0 0 0 3px rgba(201,154,63,0.4);
}
.user-chip__text{ line-height:1.2; text-align:left; }
.user-chip__name{ font-family:'Oswald', sans-serif; font-size:0.86rem; font-weight:600; color:var(--xc-forest); display:block; }
.user-chip__badge{
  font-family:'Oswald', sans-serif; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--xc-gold); font-weight:700; display:inline-flex; align-items:center; gap:3px;
}
.user-chip__badge::before{ content:"🎖"; font-size:0.72rem; }
.user-chip__caret{ color:var(--muted,#9aa79f); font-size:0.7rem; transition:transform .2s ease; margin-left:2px; }
.user-chip.is-open .user-chip__caret{ transform:rotate(180deg); }

.user-chip__menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
  background:var(--xc-paper); border-radius:14px; border:1px solid rgba(15,46,32,0.08);
  box-shadow:0 18px 40px rgba(15,46,32,0.18);
  padding:8px; z-index:80;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.user-chip.is-open .user-chip__menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.user-chip__menu a, .user-chip__menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:9px; font-family:'Source Sans 3', sans-serif; font-size:0.92rem;
  color:var(--body-text,#17332A); background:none; border:none; cursor:pointer;
  transition:background .15s ease;
}
.user-chip__menu a:hover, .user-chip__menu button:hover{ background:rgba(15,46,32,0.06); }
.user-chip__menu .logout-item{ color:#c0392b; }
.user-chip__menu hr{ border:none; border-top:1px solid rgba(15,46,32,0.08); margin:6px 2px; }

/* Guest / member conditional visibility, used site-wide */
[data-auth-state="unknown"] [data-guest-only],
[data-auth-state="unknown"] [data-member-only]{ visibility:hidden; }
[data-auth-state="guest"] [data-member-only]{ display:none !important; }
[data-auth-state="member"] [data-guest-only]{ display:none !important; }

/* ---------- Toast (used for the login welcome message etc.) ---------- */
.xc-toast{
  position:fixed; top:20px; right:20px; z-index:999;
  background:linear-gradient(135deg, var(--xc-forest), #163d2a);
  color:var(--xc-paper); padding:16px 20px; border-radius:14px;
  box-shadow:0 20px 44px rgba(15,46,32,0.35);
  display:flex; align-items:center; gap:12px; max-width:min(360px, calc(100vw - 40px));
  transform:translateX(120%); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
.xc-toast.is-visible{ transform:translateX(0); opacity:1; }
.xc-toast__icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(201,154,63,0.25); color:var(--xc-gold-2);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.xc-toast__title{ font-family:'Oswald', sans-serif; font-weight:700; font-size:0.92rem; letter-spacing:0.02em; }
.xc-toast__body{ font-size:0.84rem; color:rgba(255,255,255,0.85); margin-top:2px; }
@media (max-width:480px){ .xc-toast{ left:16px; right:16px; top:14px; max-width:none; } }

/* ---------- Form motion language (login / registration) ---------- */
.card{ animation: cardRise .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardRise{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }

form .field-row, form > label{ animation: fieldRise .5s ease both; }
form > label:nth-of-type(1), form .field-row:nth-of-type(1){ animation-delay:.05s; }
form > label:nth-of-type(2), form .field-row:nth-of-type(2){ animation-delay:.11s; }
form > label:nth-of-type(3), form .field-row:nth-of-type(3){ animation-delay:.17s; }
form > label:nth-of-type(4), form .field-row:nth-of-type(4){ animation-delay:.23s; }
form > label:nth-of-type(5){ animation-delay:.29s; }
form > button[type="submit"]{ animation: fieldRise .5s ease both; animation-delay:.34s; }
@keyframes fieldRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

input, select, textarea{ transform:translateZ(0); }
input:focus, select:focus, textarea:focus{ transform:translateY(-1px); }

.btn{ transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:active{ transform:translateY(0) scale(.96); }

/* shake on validation error */
.shake{ animation: shakeX .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX{
  10%,90% { transform:translateX(-1px); }
  20%,80% { transform:translateX(2px); }
  30%,50%,70% { transform:translateX(-4px); }
  40%,60% { transform:translateX(4px); }
}

/* animated check icon inside confirm-box on success */
.confirm-box{ display:flex; align-items:flex-start; gap:10px; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .35s ease, max-height .35s ease, padding .35s ease, margin .35s ease; }
.confirm-box.show, .confirm-box.error{ opacity:1; max-height:200px; }
.confirm-box .check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:#2e8b57; position:relative; margin-top:1px;
}
.confirm-box .check::after{
  content:""; position:absolute; left:6px; top:3px; width:6px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  animation: checkPop .3s ease .1s forwards;
}
@keyframes checkPop{ to{ transform:rotate(45deg) scale(1); } }

/* spinner inside submit buttons while loading */
.btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation: spin .7s linear infinite;
}
.btn-outline.is-loading::after{ border-color:rgba(15,46,32,0.25); border-top-color:var(--xc-forest); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Member-only redirect overlay (login/registration pages) ---------- */
.redirect-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--xc-forest), #163d2a);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.redirect-overlay.is-visible{ opacity:1; visibility:visible; }
.redirect-overlay__box{ text-align:center; color:var(--xc-paper); padding:0 24px; }
.redirect-overlay__badge{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:rgba(201,154,63,0.2); display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  animation: badgePulse 1.4s ease-in-out infinite;
}
@keyframes badgePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.redirect-overlay__box h2{ color:var(--xc-paper); font-size:1.5rem; margin-bottom:8px; }
.redirect-overlay__box p{ color:rgba(255,255,255,0.78); font-size:0.95rem; }
.redirect-overlay__dots span{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--xc-gold-2); margin:16px 3px 0;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.redirect-overlay__dots span:nth-child(2){ animation-delay:.15s; }
.redirect-overlay__dots span:nth-child(3){ animation-delay:.3s; }
@keyframes dotBounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-6px); opacity:1; } }


/* ==========================================================================
   Theme v2 — deep amber accent, high-visibility Login / Logout, sleek note box
   ========================================================================== */
:root{
  --amber:#00B875;        /* deep yellow */
  --amber-deep:#008F5A;   /* darker, for text/hover */
  --amber-dark:#06402B;   /* darkest, for text on light amber */
  --amber-soft:#E4F8EE;   /* tint for backgrounds */
}

/* ---- Header buttons: always clearly visible on the light header ---- */
.auth-area .btn{ border-radius:999px !important; padding:9px 18px !important; font-size:0.74rem; font-weight:700; letter-spacing:0.06em; white-space:nowrap; margin-right:0 !important; }
.auth-area{ flex-shrink:0; }
@media (min-width:861px){ .nav{ gap:14px; } nav.links{ gap:18px; } .guest-tag{ display:none !important; } }
.auth-area .btn.btn-outline{            /* LOGIN */
  background:var(--xc-forest) !important; color:#fff !important;
  border:2px solid var(--xc-forest) !important;
  box-shadow:0 6px 16px rgba(15,46,32,0.28);
}
.auth-area .btn.btn-outline:hover{
  background:#163d2a !important; color:var(--xc-gold-2) !important; transform:translateY(-2px);
}
.auth-area .btn.btn-gold{               /* REGISTER */
  background:linear-gradient(135deg, #12D08A, var(--amber-deep)) !important; color:#fff !important;
  border:2px solid var(--amber-deep) !important;
  box-shadow:0 6px 16px rgba(0,143,90,0.38);
  text-shadow:0 1px 1px rgba(0,0,0,0.25);
}
.auth-area .btn.btn-gold:hover{ filter:brightness(1.08); transform:translateY(-2px); }

/* ---- LOGOUT: solid, unmistakable ---- */
.user-chip__menu .logout-item{
  background:linear-gradient(135deg, #C0392B, #8E2316); color:#fff !important;
  font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  justify-content:center; box-shadow:0 6px 14px rgba(142,35,22,0.3); margin-top:2px;
}
.user-chip__menu .logout-item:hover{ background:linear-gradient(135deg, #D14536, #9E2819); filter:none; }
.user-chip__badge{ color:var(--amber-deep); }
.user-chip:hover{ border-color:var(--amber); }

/* ---- Sleek "anything you'd like the association to know" box ---- */
.note-box{
  position:relative; margin-top:22px; padding:20px 20px 14px;
  border-radius:18px; border:1px solid rgba(0,143,90,0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(0,184,117,0.14), transparent 55%),
    linear-gradient(160deg, #fffdf6 0%, #fff7e0 100%);
  box-shadow:0 10px 26px rgba(111,74,0,0.10), inset 0 1px 0 #fff;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.note-box::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, #12D08A, var(--amber-deep));
}
.note-box:focus-within{ border-color:var(--amber); box-shadow:0 14px 34px rgba(0,143,90,0.22), 0 0 0 4px rgba(0,184,117,0.16); }
.note-box__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding-left:6px; }
.note-box__icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #12D08A, var(--amber-deep)); color:#fff;
  box-shadow:0 6px 14px rgba(0,143,90,0.35);
}
.note-box__title{
  font-family:'Oswald', sans-serif !important; font-size:0.95rem !important; font-weight:600 !important;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--amber-dark) !important;
  margin:0 !important; padding:0; display:block;
}
.note-box__hint{ display:block; font-size:0.82rem; color:#8a7440; text-transform:none; letter-spacing:0; font-family:'Source Sans 3', sans-serif; font-weight:500; margin-top:1px; }
.note-box textarea{
  display:block; width:100%; min-height:112px; resize:vertical; margin:0 !important;
  padding:14px 16px !important; border:1.5px solid rgba(0,143,90,0.22) !important; border-radius:12px !important;
  background:rgba(255,255,255,0.92) !important; color:#2a2008; font-family:'Source Sans 3', sans-serif; font-size:1rem; line-height:1.55;
  transition:border-color .2s ease, background .2s ease;
}
.note-box textarea::placeholder{ color:#b3a37a; }
.note-box textarea:focus{ outline:none !important; border-color:var(--amber) !important; background:#fff !important; box-shadow:none !important; transform:none; }
.note-box__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:0 4px; flex-wrap:wrap; }
.note-box__count{ font-family:'Oswald', sans-serif; font-size:0.72rem; letter-spacing:0.08em; color:#8a7440; }
.note-box__count.is-near{ color:#b4491a; }
.note-btn{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:0.8rem; letter-spacing:0.09em; text-transform:uppercase;
  color:#fff; border:none; cursor:pointer; padding:12px 26px; border-radius:999px;
  background:linear-gradient(135deg, #12D08A, var(--amber-deep)); box-shadow:0 8px 18px rgba(0,143,90,0.35);
  transition:transform .15s ease, filter .2s ease;
}
.note-btn:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.note-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.note-status{ margin:10px 4px 0; font-size:0.9rem; display:none; }
.note-status.ok{ display:block; color:#1c6b43; } .note-status.err{ display:block; color:#a8321f; }

.note-history{ margin-top:18px; border-top:1px dashed rgba(0,143,90,0.3); padding-top:14px; }
.note-history h4{ font-family:'Oswald', sans-serif; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-dark); margin:0 0 10px 4px; }
.note-item{ background:rgba(255,255,255,0.8); border:1px solid rgba(0,143,90,0.16); border-radius:12px; padding:11px 14px; margin-bottom:8px; font-size:0.94rem; color:#33280c; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-item time{ display:block; font-family:'Oswald', sans-serif; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:#9a8654; margin-bottom:3px; }