/* =========================================================
   Global / Base
   ========================================================= */
html {
  font-size: 20px;                   /* predictable rem math */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 19px;
  padding-top: 70px;                 /* adjust if navbar height changes */
}

/* Type scale */
p, li { font-size: 19px; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

/* Bootstrap text utilities that often override body */
.lead { font-size: 19px !important; }
.small, small { font-size: 14px !important; }

/* Common UI bits */
.btn      { font-size: 19px; font-weight: bold; }
.badge    { font-size: 14px; }
.nav-link { font-size: 19px; }
.table    { font-size: 15px; }

/* If you used .fs-* utilities anywhere and want hard px control */
[class^="fs-"], [class*=" fs-"] { font-size: inherit !important; }

/* Emphasis */
strong, b { font-weight: bold !important; }
em, i     { font-style: italic; }

/* Fix for lead + muted text */
.lead.text-muted strong { font-weight: bold !important; color: #212529 !important; }

/* Footer */
footer {
  margin-top: 30px;
  font-size: 14px;
  color: #6c757d;
}

/* =========================================================
   Badges (pill style)
   ========================================================= */
.badge {
  font-size: 17px;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}
.badge + .badge { margin-left: 8px; }
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

/* =========================================================
   Capsulink Feature Section
   ========================================================= */
#features { scroll-margin-top: 80px; }
#features .lead { max-width: 820px; margin: 0 auto; }

/* Cards */
#features .card {
  border-radius: 16px;
  border: 1px solid #eef1f4;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
#features .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10);
}

/* Headings row */
#features h2 { letter-spacing: -.3px; }
#features h5 { margin: 0; }

/* Icon chip */
#features .card-body .d-flex i {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #f5f7fb;
  border: 1px solid #e7ebf3;
}

/* Copy */
#features .card-body p { line-height: 1.6; }
#features .card-body ul { padding-left: 1.1rem; margin-bottom: 0; }
#features .card-body li { margin: .25rem 0; }

/* Trust badges */
#features .badge {
  font-weight: 600;
  padding: .55rem .8rem;
  border-radius: 10px;
  letter-spacing: .2px;
}
#features .badge.bg-secondary {
  background: #eef1f4 !important;
  color: #263238 !important;
}

/* CTA */
#features .btn.btn-primary.btn-lg {
  padding: .9rem 1.6rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(13,110,253,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
#features .btn.btn-primary.btn-lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(13,110,253,.35);
}

/* Responsive tweaks for features */
@media (max-width: 991.98px) {
  #features .card-body .d-flex { align-items: flex-start; }
  #features .card-body .d-flex i { width: 40px; height: 40px; }
}
@media (max-width: 575.98px) {
  #features .lead { padding: 0 10px; }
  #features .badge { margin-bottom: .25rem; }
}

/* Optional section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e9edf3, transparent);
  margin: 2.5rem 0;
}

/* Navbar primary button */
.navbar .btn.btn-primary {
  padding: .4rem .9rem;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* =========================================================
   Video Stage
   ========================================================= */
.video-stage{ position: relative; background:#000; }
.video-stage > #remoteVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; object-position:center; background:#000;
}
.video-stage > .stage-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; background:transparent; z-index:2;
}
.video-stage.is-live > .stage-placeholder{ display:none; }

/* PiP (local video) */
.video-stage > .pip{
  position:absolute; right:1rem; bottom:1rem;
  width:min(22vw, 320px); aspect-ratio:16/9;
  border-radius:12px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.45); z-index:3;
}
.video-stage > .pip > #localVideo{
  width:100%; height:100%;
  object-fit: cover;
  transform: scaleX(-1);               /* mirror; remove if undesired */
}

/* Fullscreen */
.video-stage:fullscreen{
  width:100vw; height:100vh; border-radius:0; background:#000;
}
.video-stage:fullscreen .stage-placeholder,
.video-stage:fullscreen .ui,
.video-stage:fullscreen .watermark{ display:none !important; }

/* Hide controls row while fullscreen (JS toggles this class) */
#callControls.hide-in-fs { display:none !important; }

/* iOS/Safari quirks */
video{ max-width: unset; }

/* =========================================================
   Control Bar — Icon-only buttons
   ========================================================= */

/* Container — desktop default */
#callControls{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  overflow:visible !important;         /* no scrollbars on desktop */
  gap:60px;                            /* even wide spacing */
  padding:24px 0;
}

/* Icon buttons (ALL controls, incl. #hangupBtn) */
#callControls .btn-icon{
  flex:0 0 auto;
  width:90px; height:90px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, filter .15s ease;
  font-size:0 !important;              /* hide any accidental text */
  letter-spacing:-.3em;                 /* collapses stray text nodes on Android */
  border:none;
}
#callControls .btn-icon i{
  font-size:2.4rem; line-height:1; letter-spacing:normal;
}
#callControls .btn-icon span:not(#chatBadge){ display:none !important; } /* keep badge only */
#callControls .btn-icon:hover{ transform:scale(1.08); filter:brightness(1.1); }

/* Variants */
#callControls .btn-icon.btn-outline-light{
  background:#1a223c; color:#fff; border:1px solid rgba(255,255,255,.2);
}
#callControls .btn-icon.btn-outline-light:hover{ background:#27304a; }
#callControls .btn-icon.btn-primary{ background:#4f8cff; color:#fff; }
#callControls .btn-icon.btn-warning{ background:#f39c12; color:#fff; }
#callControls .btn-icon.btn-danger{ background:#e74c3c; color:#fff; }
#callControls .btn-icon.active{
  box-shadow:0 0 0 6px rgba(79,140,255,.3);
  background:#4f8cff; color:#fff;
}

/* Hang Up — behave like the rest (no special positioning) */
#hangupBtn{
  position:static !important;
  margin:0 !important;
  inset:auto !important;
  transform:none !important;
  z-index:auto !important;
  flex:0 0 auto;
}
/* Guard if old markup had ms-auto */
#hangupBtn.ms-auto{ margin-left:0 !important; }

/* ---------- Responsive scroll rail ---------- */
@media (max-width: 991.98px){
  #callControls{
    justify-content:flex-start;
    overflow-x:auto !important; overflow-y:hidden;
    gap:24px; padding:16px 12px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* subtle edge fade */
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  #callControls::-webkit-scrollbar{ display:none; }
  #callControls .btn-icon{ width:76px; height:76px; }
  #callControls .btn-icon i{ font-size:2rem; }
  #callControls .btn-icon{ scroll-snap-align:center; }
}

@media (max-width: 575.98px){
  #callControls{ gap:16px; padding:12px 10px; }
  #callControls .btn-icon{
    width:64px; height:64px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  #callControls .btn-icon i{ font-size:1.8rem; }
}


/* Icon-only guards (Chrome Android safe) */
#callControls .btn-icon { font-size:0 !important; letter-spacing:-0.3em; }
#callControls .btn-icon i { font-size:2.4rem; line-height:1; letter-spacing:normal; }
#callControls .btn-icon span:not(#chatBadge) { display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }