/*
 * Custom CSS
 */

:root {
  --bs-body-bg: #f8f8fa;
    
}

body{
      font-family: "DM Sans", sans-serif;
}

h1,h2,h3{
    font-family:'Syne',sans-serif;
}

a .nav-link{color:#676f7e;}

.navbar-expand-lg {
    height: 80px;
}

.btn-primary,.btn-success{
    background:#591dff;
    border:none;
    font-weight:bold;
    border-radius:999px;
    box-shadow: 0 6px 24px rgba(89, 29, 255, .35);
}

.btn-secondary, .booking-kit_main-panel_35dac99d{background:#fff;
    border:2px solid #591dff;
    color:#591dff;
    border-radius:999px;
}

.btn-primary a{
    color:#fff;
    
}

.bg-main{
    background-image:url("/img/bg-home-gradient.png");
    background-size:cover;
    padding:20px;
}
.highlight{color:#591dff;font-weight:bold;}

.col-pricing{
    border: 1px solid #591dff;
    border-radius:15px;
    background:#fff;
}

.col-pricing ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top:15px;
}

.col-pricing ul li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
}

.col-pricing ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;

  background-color: #591dff;

  -webkit-mask: url("/img/check.svg") no-repeat center / contain;
  mask: url("/img/check.svg") no-repeat center / contain;
}

.price{
    color:#591dff;
    font-family:'Syne',sans-serif;
}

.pakket{font-size:14px;
    color:grey;
}

.navbar-nav{background-color:#f8f8fa;}

.portfolio-scroller{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 28vw, 340px);
    gap: 1.25rem;

    overflow-x: auto;
    padding: 0.75rem 0.25rem 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
  }

  .portfolio-scroller:focus{ outline: none; }

  .phone-card{
    scroll-snap-align: center;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 520px;
  }

  .phone-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    background: #fff;
  }

  .phone-title{ font-weight: 700; line-height: 1.1; }
  .phone-author{ font-size: .9rem; opacity: .7; }
  .phone-dots{ opacity: .6; letter-spacing: 1px; user-select: none; }

  /* Keep vertical ratio */
  .phone-video{
    background: #000;
    aspect-ratio: 9 / 16;
    position: relative;
  }
  .phone-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.phone-bottom .phone-actions{
  display: flex !important;
  flex-direction: row !important;     /* force horizontal */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;               /* spacing between the 4 action groups */
  flex-wrap: nowrap !important;
}

/* Your outlined black icons */
.phone-bottom .icon{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #000;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

  @media (max-width: 576px){
    .portfolio-scroller{ grid-auto-columns: 78vw; gap: 1rem; }
    .phone-card{ min-height: 500px; }
    
      .navbar-brand{font-size:14px;font-weight:bold;}
  }
  

  
  .icon-btn{
    border: 0;
    padding: .25rem .4rem;
    border-radius: 12px;
    line-height: 1;
    font-size: 1.05rem;
    opacity: .85;
    cursor: pointer;
  }

  .icon-btn:active{ transform: translateY(1px); }
  .icon-btn[disabled]{ opacity: .4; cursor: not-allowed; }

  /* Heart toggle */
  .like-btn .heart{
    display: inline-block;
    transform-origin: center;
  }
  .like-btn.is-liked .heart{
    /* "filled" heart look using the emoji */
    content: "♥";
  }

  /* Use emoji switch: we’ll swap text via JS for reliable cross-browser */
  .like-btn.is-liked .heart{ color: #e11d48; } /* rose/red */
  .like-btn.pop .heart{ animation: heartPop 260ms ease-out; }

  @keyframes heartPop{
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35) rotate(-8deg); }
    100% { transform: scale(1); }
  }
  
  
  .usp{
      border-radius:25px !important;
      background-color:#fff;
      border:1px solid lightgrey;
      
  }
  
.main-usp{
  background:#591dff;
  color:#fff;
  border-radius:25px !important;
}

.col-pricing .btn{font-size:18px;font-weight:bold;}
.col-pricing .btn a{text-decoration:none;}

.col-pricing {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.col-pricing .btn {
  margin-top: auto;
}

.bottom ul{list-style:none;}
.bottom p{color:grey;}
.bottom-buttons .btn a{text-decoration:none;}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #000;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn {
  display: flex;
  flex-direction: row; /* 👈 was column */
  align-items: center;
  gap: 6px;
}


.icon-btn:hover .icon {
  transform: scale(1.1);
}

.heart {
  transition: stroke .2s ease, transform .15s ease;
}

.like-btn[aria-pressed="true"] .heart {
  stroke: #ff2f55;
  transform: scale(1.15);
}

.count {
  font-size: 11px;
  color: #777;
}

/* PHONE CARD WRAPPER (inside your scroller) */
.phone-card{
  width: 320px;              /* adjust if needed */
  flex: 0 0 auto;
}

/* THE ACTUAL PHONE */
.phone-frame{
  background:#fff;
  border: 6px solid #0f1115;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Status bar */
.phone-status{
  height: 46px;
  background:#0f1115;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 16px;
  font-weight: 600;
  font-size: 13px;
}

/* Publisher bar */
.phone-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.publisher{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0ea5a5;   /* change per brand if you want */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
}

.publisher-meta{
  min-width:0;
  line-height: 1.1;
}
.publisher-name{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.publisher-sub{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dots-btn{
  border:0;
  background:transparent;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
}
.dots-btn:hover{ background: rgba(0,0,0,.05); }

/* Media area */
.phone-media{
  position: relative;
  background: #eef2f6;
}

.phone-media video{
  width: 100%;
  height: 420px;            /* keeps the phone feel */
  object-fit: cover;
  display:block;
}

/* duration pill */
.duration-pill{
  position:absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Bottom area */
.phone-bottom{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.actions-row{
  display:flex;
  align-items:center;
  gap: 14px;
}

/* Outlined black icons + subtle counters */
.icon-btn{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 6px;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius: 10px;
}
.icon-btn:hover{ background: rgba(0,0,0,.05); }

.icon{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #000;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.count{
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* Like toggle: keep outlined, just change stroke */
.like-btn[aria-pressed="true"] .heart{ stroke: #ff2f55; }
.like-btn[aria-pressed="true"] .count{ color: rgba(255,47,85,.85); }

/* Caption */
.caption{
  margin-top: 8px;
  font-size: 13px;
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}
.username{
  font-weight: 800;
  color: #111;
}
.caption-text{
  color: rgba(0,0,0,.65);
}


.hero {
  padding: 60px 0 120px 0;
  background: radial-gradient(circle at right, #eaf3ff, #ffffff);
}

.pill {
  display: inline-block;
  background: #e7f0ff;
  color: #2b6fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 14px;
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.1;
}

.hero-title span {
  color: #591dff;
}

.hero-sub {
  font-size: 1.1rem;
  color: #555;
  max-width: 520px;
}

/* PHONE */
.phone-mock {
  width: 300px;
  margin: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.25));
  border:10px solid #000;
  border-radius:35px;
}

/* FLOATING CARDS */
.float-card {
  position: absolute;
  background: white;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  animation: float 4s ease-in-out infinite;
}

.float-left {
  left: -20px;
  top: 30%;
}

.float-right {
  right: -10px;
  top: 20%;
}

.float-bottom {
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}



.phone-mock {
  width: 300px;
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}

.phone-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  box-shadow: inset 0 0 0 8px #0f1115;
  pointer-events: none;
}

/* make right column a stacking context */
.hero .col-lg-6.position-relative {
  position: relative;
  z-index: 1;
}

/* PHONE */
.phone-mock {
  position: relative;
  z-index: 2; /* phone base */
}

/* FLOATING CARDS */
.float-card {
  position: absolute;
  z-index: 5; /* 👈 force above the phone */
}

/* if you have text near the phone */
.hero .hero-text-float {
  position: absolute;
  z-index: 6;
}

.avatar-1{background-color:#352776;}
.avatar-2{background-color:#ffed00;color:#000;}
.avatar-3{background-color:#262f3d;}
.avatar-4{background-color:#cfd957;}
.avatar-5{background-color:#f08321;}

.bas-card{
    padding-left: 170px;        /* ruimte voor het portret */
    background: #fff;
}

/* afbeelding container */
.bas-image{
    position: absolute;
    left: 20px;
    top: -45px;                /* ← hierdoor steekt hij boven de div uit */
    z-index: 2;
}

/* de PNG zelf */
.bas-image img{
    width: 140px;
    height: auto;
    display: block;
}

/* tekst blok */
.bas-content{
    position: relative;
    z-index: 1;
}

/* mobiel */
@media (max-width: 768px){
    
    .hero-title{font-size:2.2rem;}

    .bas-card{
        padding-left: 1.5rem;
        padding-top: 120px;
        text-align: center;
    }

    .bas-image{
        left: 50%;
        transform: translateX(-50%);
        top: -70px;
    }

    .bas-image img{
        width: 120px;
    }
}

/* kaart zelf */
.bas-card{
    background:#fff;
}

/* kolom waar de foto in staat */
.bas-portrait-col{
    min-height:160px;
}

/* de PNG */
.bas-portrait{
    max-width: 290px;
    left: 50px;
    height: auto;
    top: -146px;
    z-index: 2;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .25));
}


/* mobiel gedrag */
@media (max-width: 768px){

    .bas-portrait{
left:50px;
        max-width:180px;
        top:-80px;
    }

    .bas-portrait-col{
        margin-top:80px;
    }
}

.pricing-card{
    background:#fff;
    border-radius:16px;
    padding:45px 28px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    position:relative;
    transition:all .25s ease;
}

.pricing-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.price{
    font-size:42px;
    font-weight:700;
    margin:12px 0 20px;
}

.features{
    padding:0;
    margin:0 0 20px;
    margin-left:10px;
}

.features li{
    margin-bottom:10px;
}

.time{
    font-size:14px;
    color:#666;
    border-top:1px solid #eee;
    padding-top:15px;
}

.badge{
    position:absolute;
    top:18px;
    right:18px;
    background:#c1abff;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    font-style:italic;
}



.premium-badge{
    background:#591eff;
    color:#fff;
}

.premium{
    color:#fff;
    background-color:#591dff;
}

.premium .price,.premium .time{color:#fff;}

.premium .btn-primary, .premium .btn-success{color:#591dff !important;background-color:#fff;}
.premium li::before{background-color:#fff !important;}
.premium .premium-badge {
    color: #591eff;
    background: #fff;
}

.special{
    background:linear-gradient(135deg,#f7fff8,#ecfff0);
}

.koffie {
    background: linear-gradient(135deg,#fffbeb,#fef3c7);
    border-color: rgba(217,119,6,.2);
}

.koffie .price,.koffie li::marker{color:#d97706;}
.liveshopping .price,.liveshopping li::marker{color:#16a34a}
.koffie a.btn.btn-success.w-100.mt-4{background:#d97706;}
.liveshopping a.btn.btn-success.w-100.mt-4{background:#16a34a;}


.special-badge{
    background:#28a745;
    color:#fff;
}

li::marker{color:#591dff;}

.heart{
  fill: transparent;
  transition: fill .2s ease, stroke .2s ease, transform .15s ease;
}

.like-btn[aria-pressed="true"] .heart{
  fill: #ff2f55;
  stroke: #ff2f55;
  transform: scale(1.15);
}

/* smooth drag while mouse down */
#portfolioScroller.is-dragging {
  scroll-snap-type: none !important;
}
#portfolioScroller.is-dragging .phone-card {
  scroll-snap-align: none !important;
}

.btn-secondary{padding:1px 10px;border-radius:999px;transition: .2s ease;}
.btn-secondary:hover{background-color:#fff;font-weigth:bold;color:#591dff;border-width:4px;}
button.navbar-toggler{padding:1px 10px;}
.contact{bottom:0px;position:absolute;font-style:italic;}