/* ==========================================================================
   Audirium Academy — deelmodal (share.js)

   Draait in twee omgevingen met verschillende themabestanden (academy.css in de
   ingelogde app, consumer.css op de publieke pagina's). Daarom: eigen namespace
   `ashare-`, en elke kleur via een CSS-variabele MET fallback — zo neemt de modal
   het thema over waar dat er is, en staat hij er los ook goed op.
   ========================================================================== */

.ashare-ov{
  position:fixed; inset:0; z-index:10000;
  background:rgba(10,14,39,.55); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px 24px; overflow-y:auto;
}
.ashare-box{
  position:relative; width:100%; max-width:520px;
  background:var(--paper, #fff); color:var(--ink, #1c2033);
  border-radius:14px; box-shadow:0 24px 60px rgba(10,14,39,.34);
  font-family:inherit; font-size:.94rem; line-height:1.55;
  animation:ashare-in .16s ease-out;
}
@keyframes ashare-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.ashare-x{
  position:absolute; top:10px; right:12px; z-index:2;
  border:0; background:transparent; color:var(--stone, #6b7085);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.ashare-x:hover{ background:var(--mist, #eceef4); }

.ashare-head{ padding:22px 24px 16px; border-bottom:1px solid var(--mist, #eceef4); }
.ashare-eyebrow{
  font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bronze-ink, #8a5c22); font-weight:700; margin-bottom:5px;
}
.ashare-head h2{ margin:0; font-size:1.16rem; line-height:1.3; padding-right:30px; }
.ashare-stats{ margin:6px 0 0; font-size:.82rem; color:var(--stone, #6b7085); }

.ashare-sec{ padding:18px 24px; border-bottom:1px solid var(--mist, #eceef4); }
.ashare-sec h3{ margin:0 0 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--stone, #6b7085); font-weight:700; }
.ashare-hint{ margin:0 0 10px; font-size:.82rem; color:var(--stone, #6b7085); }

.ashare-btns{ display:flex; flex-direction:column; gap:8px; }
.ashare-btn{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  border:1px solid var(--mist, #dfe2ec); border-radius:10px; padding:11px 14px;
  color:inherit; background:var(--paper, #fff); transition:border-color .15s, background .15s;
}
.ashare-btn:hover{ border-color:var(--bronze, #b08a4e); background:var(--sand, #faf9f6); }
.ashare-btn b{ display:block; font-size:.9rem; }
.ashare-btn small{ display:block; font-size:.76rem; color:var(--stone, #6b7085); }
.ashare-ic{ display:inline-flex; width:34px; height:34px; flex:0 0 34px; border-radius:8px;
  align-items:center; justify-content:center; background:var(--mist, #eceef4); color:var(--navy, #0a0e27); }
.ashare-btn-li .ashare-ic{ background:#0a66c2; color:#fff; }

.ashare-copytext{ margin-top:12px; }
.ashare-copytext label{ display:block; font-size:.76rem; color:var(--stone, #6b7085); margin-bottom:4px; }
.ashare-copytext textarea, .ashare-invite textarea, .ashare-linkrow input{
  width:100%; box-sizing:border-box; font:inherit; font-size:.85rem;
  border:1px solid var(--mist, #dfe2ec); border-radius:8px; padding:8px 10px;
  background:var(--sand, #faf9f6); color:inherit; resize:vertical;
}
.ashare-copytext textarea:focus, .ashare-invite textarea:focus, .ashare-linkrow input:focus{
  outline:2px solid var(--bronze, #b08a4e); outline-offset:1px;
}
.ashare-linkrow{ display:flex; gap:8px; align-items:stretch; }
.ashare-linkrow input{ flex:1 1 auto; font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.78rem; }

.ashare-mini{
  border:1px solid var(--mist, #dfe2ec); background:var(--paper, #fff); color:inherit;
  border-radius:8px; padding:7px 12px; font:inherit; font-size:.8rem; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s;
}
.ashare-mini:hover{ background:var(--mist, #eceef4); }
.ashare-mini.is-done{ border-color:var(--good, #2e7d4f); color:var(--good, #2e7d4f); }
.ashare-copytext .ashare-mini{ margin-top:6px; }

.ashare-alt{ display:flex; gap:14px; margin-top:9px; font-size:.82rem; }
.ashare-alt a{ color:var(--stone, #6b7085); text-decoration:underline; }
.ashare-alt a:hover{ color:var(--bronze-ink, #8a5c22); }

.ashare-optin{
  display:flex; gap:10px; align-items:flex-start; margin-top:14px;
  padding:10px 12px; border:1px dashed var(--mist, #dfe2ec); border-radius:9px; cursor:pointer;
}
.ashare-optin input{ margin-top:3px; flex:0 0 auto; }
.ashare-optin small{ display:block; font-size:.76rem; color:var(--stone, #6b7085); }
.ashare-optin-state{ margin-left:auto; font-size:.74rem; color:var(--stone, #6b7085); white-space:nowrap; }

.ashare-invite{ display:flex; flex-direction:column; gap:8px; }
.ashare-inviterow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ashare-count{ font-size:.76rem; color:var(--stone, #6b7085); }
.ashare-count.is-over{ color:var(--bad, #b3261e); font-weight:600; }
.ashare-btn-send{
  border:0; border-radius:8px; padding:9px 18px; font:inherit; font-size:.85rem; font-weight:600;
  background:var(--bronze, #b08a4e); color:#fff; cursor:pointer;
}
.ashare-btn-send:hover{ filter:brightness(1.06); }
.ashare-btn-send:disabled{ opacity:.6; cursor:default; }
.ashare-msg{ margin:2px 0 0; font-size:.8rem; min-height:1em; }
.ashare-msg.is-ok{ color:var(--good, #2e7d4f); }
.ashare-msg.is-err{ color:var(--bad, #b3261e); }

.ashare-foot{ padding:14px 24px; display:flex; justify-content:flex-end; }

/* Deelknop in kaarten/lijsten (buttonHtml) */
.ashare-trigger{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--mist, #dfe2ec); background:transparent; color:var(--stone, #6b7085);
  border-radius:999px; padding:4px 11px; font:inherit; font-size:.76rem; font-weight:600;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.ashare-trigger:hover{ border-color:var(--bronze, #b08a4e); color:var(--bronze-ink, #8a5c22); }

@media (max-width:560px){
  .ashare-ov{ padding:0; align-items:stretch; }
  .ashare-box{ max-width:none; border-radius:0; min-height:100%; }
  .ashare-linkrow{ flex-direction:column; }
}