:root{
  --rr-main:#2271b1;
  --rr-radius:16px;
  --rr-btn-text:#fff;
}

/* FAB */
.rr-fab{
  position:fixed;
  bottom:20px;
  z-index:9999;
  padding:12px 16px;
  border-radius:999px;
  background:var(--rr-main);
  color:#fff;
  font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  cursor:pointer;
}

/* Posities */
.rr-fab--right{ right:20px; }
.rr-fab--left{ left:20px; }
.rr-fab--center{ left:50%; transform:translateX(-50%); }

/* Modal */
.rr-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center; justify-content:center;
  z-index:99999;
}
.rr-modal.rr-open{ display:flex; } /* <-- hierdoor centreert de kaart netjes */

.rr-card{
  background:#fff;
  max-width:560px; width:92%;
  border-radius:var(--rr-radius);
  padding:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  position:relative;
}
.rr-close{
  position:absolute; top:10px; right:12px;
  border:none; background:transparent;
  font-size:22px; cursor:pointer;
}

/* Form */
.rr-field{ margin:10px 0; }
.rr-row{ display:flex; gap:12px; }
.rr-row>div{ flex:1; }
.rr-field label{ display:block; font-weight:600; margin-bottom:6px; }
.rr-field input, .rr-field select, .rr-field textarea{
  width:100%; padding:10px; border:1px solid #ddd; border-radius:10px;
}
.rr-submit{
  margin-top:12px; background:#161616; color:var(--rr-btn-text);
  padding:12px 14px; border:none; border-radius:12px; font-weight:700; cursor:pointer;
}

/* Zet datum & tijd naast elkaar */
#rr_form #rr_date,
#rr_form #rr_time_select { width: 100%; }

@media (min-width: 560px){
  #rr_form #rr_date { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
  #rr_form #rr_time_select { width: calc(50% - 8px); display: inline-block; vertical-align: top; margin-left: 16px; }
  /* labels erboven houden */
  #rr_form label[for="rr_date"],
  #rr_form label[for="rr_time_select"] { display:block; }
}

/* === Extra: Datum + tijd naast elkaar op >= 560px === */
@media (min-width:560px){
  #rr_date,
  #rr_time_select {
    width: calc(50% - 8px);
    display: inline-block;
    vertical-align: top;
  }
  #rr_time_select {
    margin-left: 16px;
  }
}

.rr-msg{ margin-top:10px; font-weight:600; }
.rr-hidden{ display:none !important; }

/* Kleine quality-of-life tweaks */
body.trend-modal-open{ overflow:hidden; }