.pb-wrap{
  max-width:900px;
  padding:18px;
  border:1px solid #e5e5e5;
  border-radius:12px;
  background:#fff;
}

.pb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.pb-grid label{
  display:flex;
  flex-direction:column;
  font-size:14px;
  gap:6px;
}

.pb-grid input{
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
}

.pb-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
}

.pb-btn{
  padding:10px 14px;
  border:0;
  border-radius:10px;
  cursor:pointer;
}

.pb-slots{ margin-top:16px; }

.pb-day{
  margin-top:14px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}

.pb-day-title{
  font-weight:600;
  margin-bottom:10px;
}

.pb-slotlist{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pb-slot{
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
}

.pb-slot.is-active{
  border-color:#111;
}

.pb-confirm{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #eee;
}

.pb-result{ margin-top:10px; }

.pb-empty{
  padding:12px;
  border:1px dashed #ddd;
  border-radius:10px;
}


/* =========================================================
   ✅ Loading UI (voor "Afspraakmogelijkheden zoeken...")
   Gebruikt door front.js: <div class="pb-loading">...</div>
   ========================================================= */

.pb-loading{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;

  position:relative;
  overflow:hidden;
}

/* subtiele “shimmer” balk bovenin */
.pb-loading::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:3px;
  width:50%;
  background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.16), rgba(0,0,0,0.06));
  transform:translateX(-60%);
  animation: pbShimmer 1.2s infinite ease-in-out;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}

/* spinner (links van tekst) */
.pb-loading::after{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.45);
  animation: pbSpin 0.9s linear infinite;

  /* plaatsing binnen flex */
  flex:0 0 auto;
}

/* tekst */
.pb-loading-text{
  font-size:14px;
  line-height:1.3;
  color:#111;
}

/* animated dots (werkt met jouw HTML: <span class="pb-dots">...</span>) */
.pb-dots{
  display:inline-block;
  width:1.6em;
  text-align:left;
  color:#111;
  opacity:0.9;
  animation: pbDots 1.1s infinite steps(4, end);
}

/* Animations */
@keyframes pbSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes pbShimmer{
  0%   { transform:translateX(-60%); opacity:0.4; }
  50%  { transform:translateX(120%); opacity:0.9; }
  100% { transform:translateX(220%); opacity:0.4; }
}

@keyframes pbDots{
  0%   { transform:translateY(0); opacity:0.55; }
  50%  { transform:translateY(0); opacity:1; }
  100% { transform:translateY(0); opacity:0.55; }
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce){
  .pb-loading::before,
  .pb-loading::after,
  .pb-dots{
    animation:none !important;
  }
}


/* Mobile */
@media (max-width: 720px){
  .pb-grid{ grid-template-columns:1fr; }
  .pb-actions{ flex-direction:column; align-items:stretch; }
  .pb-btn{ width:100%; }

  .pb-loading{
    gap:8px;
    padding:12px 10px;
  }
  .pb-loading-text{
    font-size:14px;
  }
}
/* =========================
   Plantenga Booking – primaire knoppen
   (override theme styles)
   ========================= */

.pb-wrap .pb-btn,
.pb-wrap button.pb-btn,
.pb-wrap #pb-book{
  background-color: rgb(221,0,0) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none !important;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.pb-wrap .pb-btn:hover,
.pb-wrap button.pb-btn:hover,
.pb-wrap #pb-book:hover{
  background-color: rgb(190,0,0) !important;
}

.pb-wrap .pb-btn:active,
.pb-wrap #pb-book:active{
  transform: translateY(1px);
}

.pb-wrap .pb-btn:disabled,
.pb-wrap #pb-book:disabled{
  background-color: rgb(221,0,0) !important;
  opacity: 0.6;
  cursor: not-allowed;
}