/* ============================================================================
   webcall.css — client-schil voor in-browser WebRTC (audio/chat/video)
   ----------------------------------------------------------------------------
   Hoort bij Views/Shared/_Webcall.cshtml + Scripts/webcall.client.js en wordt
   door die partial zelf ingeladen, dus op ELK white-label dat webcall/video
   aanbiedt (Namastic: audio/chat/video — hoofdsite: videobellen).

   Stond eerder alleen in Content/whitelabels/namastic/theme.css; daardoor was
   de overlay buiten Namastic ongestyled. De klassenamen blijven .nm-wc* zodat
   webcall.client.js en de bestaande Namastic-markup ongemoeid blijven.

   KLEUREN: elke var() heeft een fallback, zodat het geheel ook werkt zonder de
   Namastic-thematokens. Zet een white-label z'n eigen --sage-deep/--surface enz.
   dan wint dat automatisch. Let op: dit is een los CSS-bestand (géén .less-bron,
   net als Content/Chat.css) — hier bewerken is de bedoeling.
   ========================================================================== */

/* Modale schil (saldo-popup) */
.nm-wc-modal[hidden], .nm-wc-call[hidden] { display: none !important; }
.nm-wc-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nm-wc-modal-backdrop { position: absolute; inset: 0; background: rgba(44,37,32,.45); backdrop-filter: blur(2px); }
.nm-wc-modal-card { position: relative; background: var(--surface, #fff); border: 1px solid var(--hairline, #e5e0d8); border-radius: 18px; max-width: 420px; width: 100%; padding: 34px 30px 28px; text-align: center; box-shadow: 0 30px 60px -30px rgba(44,37,32,.45); }
.nm-wc-modal-x { position: absolute; top: 14px; right: 16px; background: transparent; border: 0; color: var(--ink-muted, #6b6b6b); font-size: 1rem; cursor: pointer; }
.nm-wc-modal-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(110,119,110,.12); color: var(--sage, #6e776e); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 16px; }
.nm-wc-modal-title { font-family: var(--serif, inherit); color: var(--ink, #2c2520); font-size: 1.5rem; margin: 0 0 .5rem; }
.nm-wc-modal-text { color: var(--ink-muted, #6b6b6b); line-height: 1.6; margin: 0 0 22px; }
.nm-wc-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.nm-wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 10px; padding: 13px 20px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-size: .95rem; }
.nm-wc-btn-primary { background: var(--sage-deep, var(--brand-primary, #e2725b)); color: #F6F3EC !important; }
.nm-wc-btn-primary:hover { background: var(--sage-deeper, var(--brand-primary-dark, #c85f4a)); color: #fff !important; }
.nm-wc-btn-ghost { background: transparent; color: var(--ink-muted, #6b6b6b) !important; border-color: var(--hairline, #e5e0d8); }
.nm-wc-btn-ghost:hover { color: var(--ink, #2c2520) !important; border-color: var(--sand, #cfc4b0); }

/* Oproep-overlay (verbinden / wachten / in gesprek) */
.nm-wc-call { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #3a4038, #2C2520); }
.nm-wc-call-inner { text-align: center; color: #F6F3EC; padding: 30px; max-width: 360px; }
.nm-wc-call-avatar { width: 110px; height: 110px; border-radius: 50%; background: rgba(246,243,236,.10); border: 1px solid rgba(246,243,236,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #F6F3EC; margin-bottom: 20px; animation: nmWcPulse 2.4s ease-in-out infinite; }
@keyframes nmWcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(138,154,134,.45); } 50% { box-shadow: 0 0 0 18px rgba(138,154,134,0); } }
.nm-wc-call-name { font-family: var(--serif, inherit); font-size: 1.7rem; margin-bottom: 2px; }
.nm-wc-call-kind { color: var(--sand-soft, #d8d0c2); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 22px; }
.nm-wc-call-status { color: #E9E2D4; font-size: 1rem; margin-bottom: 8px; min-height: 1.4em; }
.nm-wc-call-timer { font-family: var(--serif, inherit); font-size: 2.2rem; letter-spacing: .04em; margin: 4px 0; }
.nm-wc-call-remaining { color: var(--sand-soft, #d8d0c2); font-size: .82rem; margin-bottom: 6px; }
.nm-wc-call-controls { display: flex; gap: 18px; justify-content: center; margin-top: 26px; }
.nm-wc-cbtn { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(246,243,236,.25); background: rgba(246,243,236,.10); color: #F6F3EC; font-size: 1.2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.nm-wc-cbtn:hover { background: rgba(246,243,236,.20); }
.nm-wc-cbtn.is-muted { background: var(--sand, #cfc4b0); border-color: var(--sand, #cfc4b0); }
.nm-wc-cbtn-end { background: #B4503E; border-color: #B4503E; }
.nm-wc-cbtn-end:hover { background: #9B4030; }
body.nm-wc-open { overflow: hidden; }

/* Pauze-paneel — tegoed op tijdens een gesprek: aanvul-knop + 3-min afteller */
.nm-wc-paused[hidden] { display: none; }
.nm-wc-paused { margin: 14px auto 4px; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
.nm-wc-paused-msg { color: #E9E2D4; font-size: .92rem; line-height: 1.5; }
.nm-wc-paused-countdown { color: var(--sand-soft, #d8d0c2); font-size: .82rem; }

/* Terugkeer-banner — gepauzeerd gesprek staat klaar (bv. na terugkeer van de betaling) */
.nm-wc-resume-banner[hidden] { display: none; }
.nm-wc-resume-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; margin: 0 auto; max-width: 560px;
    display: flex; align-items: center; gap: 12px; background: var(--surface, #fff); border: 1px solid var(--hairline, #e5e0d8);
    border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 40px -20px rgba(44,37,32,.5); }
.nm-wc-resume-text { color: var(--ink, #2c2520); font-size: .9rem; flex: 1; }
.nm-wc-resume-banner .nm-wc-btn { padding: 10px 16px; flex: 0 0 auto; }
.nm-wc-resume-x { background: transparent; border: 0; color: var(--ink-muted, #6b6b6b); font-size: 1rem; cursor: pointer; flex: 0 0 auto; }

/* Video-stage (video-consult): groot remote-beeld + eigen camera als PiP. */
.nm-wc-video[hidden] { display: none; }
.nm-wc-video { position: relative; width: min(78vw, 520px); aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto 18px; border-radius: 18px; overflow: hidden; background: #1d1a16; box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); }
.nm-wc-video #nmWcRemoteVideo { width: 100%; height: 100%; object-fit: cover; display: block; background: #1d1a16; }
.nm-wc-video #nmWcLocalVideo { position: absolute; right: 12px; bottom: 12px; width: 30%; max-width: 130px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 2px solid rgba(246,243,236,.85); background: #000; transform: scaleX(-1); }

/* ── Videobellen-knop op de hoofdsite ────────────────────────────────────────
   De coachkaart en de detailpagina hergebruiken de bestaande .btn/.cta-button
   stijlen; hier staan alleen de dingen die daar nog niet in zaten. */

/* Detailpagina: de andere CTA's zijn <a>, deze is een <button> — die erft van
   zichzelf geen font/breedte, dus dat zetten we gelijk. font-size komt van
   .cta-button zelf, daarom alleen de family. */
.cta-button.cta-video-call { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; border: 0; cursor: pointer; font-family: inherit; text-align: center; }
.cta-button.cta-video-call .cta-video-call-rate { opacity: .85; font-size: .8em; font-weight: 400; }

/* Coachkaart: .buttons-section is een raster van 1fr 1fr auto (twee actieknoppen
   + profiel). Video is een DERDE actieknop en zou het raster laten schuiven; hij
   krijgt daarom een eigen volle regel eronder. Is de coach offline dan staat de
   knop op display:none en neemt hij geen rasterruimte in. */
.buttons-section .btn-item[class*="coach_videonu_button_"] { grid-column: 1 / -1; }