/* ============================================================
   Royal DS International — CV-generator call-to-action
   - Floating Action Button (FAB) rechtsonder, op alle pagina's
   - Hero-CTA naast bestaande "Plan een kennismaking"-knop
   ============================================================ */

:root {
  --cv-cta-red: #e30613;
  --cv-cta-red-dark: #b20000;
}

/* =============================================================
   Floating Action Button (sticky, rechtsonder)
   ============================================================= */
.cv-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem .8rem .9rem;
  background: var(--cv-cta-red);
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;

  box-shadow:
    0 4px 14px rgba(227, 6, 19, .35),
    0 2px 6px rgba(0, 0, 0, .15);
  transition: transform .2s, box-shadow .2s, background .15s;
  animation: cv-fab-in .5s ease .8s both;
}

.cv-fab:hover {
  background: var(--cv-cta-red-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(227, 6, 19, .45),
    0 3px 8px rgba(0, 0, 0, .2);
}

.cv-fab:active {
  transform: translateY(0);
}

.cv-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.cv-fab__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Op mobiel: alleen icoon, geen tekst — minder schermreal estate */
@media (max-width: 640px) {
  .cv-fab {
    padding: .85rem;
    border-radius: 50%;
  }
  .cv-fab__label {
    display: none;
  }
}

/* Subtle entry-animatie bij eerste paint */
@keyframes cv-fab-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =============================================================
   Hero-CTA — tweede knop in de hero, naast "Plan een kennismaking"
   In stijl van glowing-button maar met witte rand i.p.v. fill,
   zodat de twee knoppen visueel "primair + secundair" voelen.
   ============================================================= */
.cv-hero-cta {
  display: inline-block;
  margin: 1rem .75rem 0;
  padding: .55rem 1.4rem;
  background: rgba(255, 255, 255, .95);
  color: var(--cv-cta-red) !important;
  border: 2px solid #fff;
  border-radius: 50px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: all .25s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}

.cv-hero-cta:hover {
  background: var(--cv-cta-red);
  color: #fff !important;
  border-color: var(--cv-cta-red);
  box-shadow: 0 4px 18px rgba(227, 6, 19, .4);
  transform: translateY(-1px);
}

.cv-hero-cta__arrow {
  display: inline-block;
  margin-left: .35rem;
  transition: transform .25s;
}
.cv-hero-cta:hover .cv-hero-cta__arrow {
  transform: translateX(4px);
}