/* ============================================================
   TeachingChess — achievement-card.css
   Styling for the shareable achievement card + its modal.
   Same brand variables as booking-ticket.css - load after main.css.
   ============================================================ */

.ach-modal-backdrop{
  position:fixed;inset:0;background:rgba(4,6,10,.72);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;padding:20px;
}
.ach-modal{
  width:100%;max-width:520px;display:flex;flex-direction:column;gap:16px;
}

.ach-card{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--accent-dim);
  border-radius:18px;
  padding:36px 28px;
  text-align:center;
  box-shadow:0 22px 50px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(204,165,100,.15) inset;
}
.ach-card-watermark{
  position:absolute;right:-24px;bottom:-40px;
  font-size:11rem;line-height:1;color:var(--accent);opacity:.06;
  pointer-events:none;user-select:none;
}
.ach-card[dir="rtl"] .ach-card-watermark{right:auto;left:-24px}

.ach-card-brand-name{font-weight:800;color:var(--text-strong);font-size:1.1rem}
.ach-card-brand-tag{font-size:.62rem;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-bottom:18px}

.ach-card-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin:6px 0 10px}
.ach-card-eyebrow .dot{width:5px;height:5px;border-radius:50%}

.ach-card-icon{font-size:3.2rem;color:var(--accent-hi);margin:6px 0}
.ach-card-title{font-size:1.6rem;font-weight:800;color:var(--text-strong);margin-bottom:8px}
.ach-card-desc{font-size:.9rem;color:var(--text-dim)}

.ach-modal-actions{display:flex;justify-content:center;gap:10px}

@media (max-width:480px){
  .ach-card{padding:28px 18px}
  .ach-card-title{font-size:1.3rem}
}