/* =========================================================
   shared.css — คอมโพเนนต์ร่วมสำหรับหน้า invite / privacy / terms
   ให้ใช้ธีมและตัวแปรสีเดียวกับ index.html (style.css)
   ต้อง include style.css ก่อนไฟล์นี้เสมอ
   ========================================================= */

/* ---------- โครงหน้า (เว้นที่ให้ nav แบบ fixed) ---------- */
.page-wrap {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 110px 1.5rem 4rem;
}
.page-wrap-top {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 110px 1.5rem 4rem;
}

/* ---------- INVITE CARD ---------- */
.invite-card {
  background: linear-gradient(145deg,#fff5fa,#fff8ff);
  border: 2px solid rgba(255,179,209,0.25);
  border-radius: 32px;
  padding: 2.6rem 2.2rem 2.2rem;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 10px 50px rgba(255,133,179,0.12);
  position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.invite-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,133,179,0.45);
  box-shadow: 0 16px 44px rgba(255,133,179,0.2);
}
.invite-card::before {
  content: ''; position: absolute; top: -20px; right: -20px; width: 120px; height: 120px;
  background: linear-gradient(135deg,rgba(255,179,209,0.3),rgba(201,184,255,0.3));
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: blob-morph 7s ease-in-out infinite; z-index: 0;
}
.invite-card::after {
  content: ''; position: absolute; bottom: -15px; left: -15px; width: 90px; height: 90px;
  background: linear-gradient(135deg,rgba(184,240,224,0.35),rgba(184,224,255,0.35));
  border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%;
  animation: blob-morph 9s ease-in-out infinite reverse; z-index: 0;
}

.invite-avatar-wrap { position: relative; width: 130px; height: 130px; margin: 0 auto 1.3rem; z-index: 1; }
.invite-avatar-wrap .av-blob-ring  { position: absolute; inset: -14px; }
.invite-avatar-wrap .av-blob-ring2 { position: absolute; inset: -5px; }
.invite-avatar-img-wrap {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--white); box-shadow: 0 6px 24px rgba(255,133,179,0.2);
}
.invite-avatar-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.invite-status-dot {
  position: absolute; bottom: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: #5dda9b; border: 3px solid var(--white); box-shadow: 0 0 8px rgba(93,218,155,.6);
  animation: pulse-green 2s infinite; z-index: 2;
}

.invite-name { font-family: 'Kanit', sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--text); position: relative; z-index: 1; }
.invite-tag {
  display: inline-block; margin: .5rem 0 1rem;
  background: rgba(255,179,209,0.2); border: 1.5px solid rgba(255,133,179,0.3);
  color: var(--pink2); font-size: .74rem; font-weight: 700;
  padding: .25rem .9rem; border-radius: 20px; position: relative; z-index: 1;
}
.invite-desc { font-size: .86rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.6rem; position: relative; z-index: 1; }
.invite-btns { display: flex; flex-direction: column; gap: .7rem; position: relative; z-index: 1; }
.invite-btns .btn { width: 100%; justify-content: center; }
.invite-btns .btn svg { flex-shrink: 0; }

/* ---------- MODAL (ยืนยันก่อนไปลิงก์ OAuth) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(90,62,95,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 2000;
  backdrop-filter: blur(3px);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--white); border: 2px solid rgba(255,179,209,0.3);
  border-radius: 24px; padding: 2rem; width: 400px; max-width: 90%;
  text-align: center; transform: scale(.85); transition: all .3s ease;
  box-shadow: 0 20px 60px rgba(255,133,179,0.25);
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-title { font-family: 'Kanit', sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--text); margin-bottom: .6rem; }
.modal-text { font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }
.modal-link {
  display: block; font-size: .78rem; color: var(--pink2); word-break: break-all;
  background: rgba(255,179,209,0.12); border: 1.5px solid rgba(255,133,179,0.25);
  padding: .7rem; border-radius: 12px; margin-bottom: 1.4rem;
}
.modal-buttons { display: flex; justify-content: center; gap: .8rem; }
.modal-btn {
  padding: .6rem 1.5rem; border-radius: 24px; border: 2px solid transparent; cursor: pointer;
  font-family: 'Itim', cursive; font-size: .9rem; transition: all .2s;
}
.modal-btn.btn-confirm { background: linear-gradient(135deg,var(--pink),var(--lav)); color: var(--white); box-shadow: 0 4px 14px rgba(255,133,179,0.35); }
.modal-btn.btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,133,179,0.5); }
.modal-btn.btn-cancel { background: rgba(255,179,209,0.15); color: var(--text); }
.modal-btn.btn-cancel:hover { opacity: .8; }

/* ---------- LEGAL PAGES (privacy / terms) ---------- */
.legal-card {
  background: linear-gradient(145deg,#fff5fa,#fff8ff);
  border: 2px solid rgba(255,179,209,0.25);
  border-radius: 28px;
  padding: 2.4rem 2.2rem;
  max-width: 720px; width: 100%;
  box-shadow: 0 10px 50px rgba(255,133,179,0.1);
  position: relative; overflow: hidden;
}
.legal-card::before {
  content: ''; position: absolute; top: -20px; right: -20px; width: 120px; height: 120px;
  background: linear-gradient(135deg,rgba(255,179,209,0.25),rgba(201,184,255,0.25));
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: blob-morph 7s ease-in-out infinite; z-index: 0;
}
.legal-card > * { position: relative; z-index: 1; }
.legal-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; color: var(--white); text-decoration: none;
  background: linear-gradient(135deg, var(--pink), var(--lav));
  padding: .5rem 1.2rem; border-radius: 24px;
  box-shadow: 0 4px 16px rgba(255,133,179,0.3); transition: all .25s; margin-bottom: 1.6rem;
}
.legal-back:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 22px rgba(255,133,179,0.45); }
.legal-updated { font-size: .78rem; color: var(--muted); margin-bottom: 1.6rem; }
.legal-card h2 {
  font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--pink2);
  border-left: 4px solid var(--pink); padding-left: .6rem; margin: 1.6rem 0 .6rem;
}
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card p, .legal-card li { font-size: .87rem; color: var(--muted); line-height: 1.8; }
.legal-card ul { padding-left: 1.3rem; margin-top: .3rem; }
.legal-card code {
  background: rgba(255,133,179,0.15); color: var(--pink2); padding: .15rem .5rem; border-radius: 8px; font-size: .82rem;
}
.legal-footer-note { text-align: center; margin-top: 2rem; font-size: .78rem; color: var(--muted); }

@media (max-width: 560px) {
  .legal-card { padding: 1.8rem 1.4rem; }
  .invite-card { padding: 2.1rem 1.5rem 1.8rem; }
}

/* ---------- DARK MODE (ให้เข้าธีมเดียวกับ index.html) ---------- */
html[data-theme="dark"] .invite-card,
html[data-theme="dark"] .legal-card {
  background: linear-gradient(145deg,#1a1520,#17131d);
  border-color: rgba(255,111,176,0.18);
}
html[data-theme="dark"] .modal-box {
  background: #17131d;
  border-color: rgba(255,111,176,0.25);
}
html[data-theme="dark"] .invite-tag {
  background: rgba(255,111,176,0.15);
  border-color: rgba(255,111,176,0.3);
}
html[data-theme="dark"] .modal-btn.btn-cancel {
  background: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .modal-link {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,111,176,0.25);
}