/* =========================================================
   FEEDBACK MODULE – CLEANED CSS
   ========================================================= */

:root {
  --rn-feedback-bg-rgb: 255, 228, 203;
  --rn-feedback-bg-opacity: 0.82;
  --rn-feedback-blur: 10px;

  --rn-feedback-text: #262626;
  --rn-feedback-orange: #ee7202;

  --rn-feedback-size-closed: 60px;
  --rn-feedback-size-open: 500px;

  --rn-feedback-left: 30px;
  --rn-feedback-bottom: 30px;

  --rn-feedback-radius-closed: 30px;
  --rn-feedback-radius-open: 20px;

  --rn-feedback-border: #262626;

  /* Verlaagd zodat Themify-laadscherm en overlays boven de feedbackmodule blijven. */
  --rn-feedback-z-index: 900;
  --rn-feedback-back-z-index: 901;
}


/* =========================================================
   1. Basis: button/panel
   ========================================================= */

.rn-feedback-widget {
  position: fixed;
  left: var(--rn-feedback-left);
  bottom: var(--rn-feedback-bottom);

  width: var(--rn-feedback-size-closed);
  height: var(--rn-feedback-size-closed);

  z-index: var(--rn-feedback-z-index) !important;

  box-sizing: border-box;
  overflow: hidden;

  border: 1px solid var(--rn-feedback-border);
  border-radius:
    var(--rn-feedback-radius-closed)
    var(--rn-feedback-radius-closed)
    var(--rn-feedback-radius-closed)
    0;

  background: rgba(var(--rn-feedback-bg-rgb), var(--rn-feedback-bg-opacity));
  backdrop-filter: blur(var(--rn-feedback-blur));
  -webkit-backdrop-filter: blur(var(--rn-feedback-blur));

  padding: 0;

  transition:
    width 1s ease,
    height 1s ease,
    border-radius 1s ease,
    padding 0s linear 1s;
}

.rn-feedback-widget.is-open {
  width: var(--rn-feedback-size-open);
  height: var(--rn-feedback-size-open);

  border-radius:
    var(--rn-feedback-radius-open)
    var(--rn-feedback-radius-open)
    var(--rn-feedback-radius-open)
    0;

  padding-left: 50px;
  padding-right: 50px;
}

.rn-feedback-widget.is-closing {
  padding-left: 0;
  padding-right: 0;

  transition:
    padding 0s linear,
    width 0.5s ease,
    height 0.5s ease,
    border-radius 0.5s ease;
}


/* =========================================================
   2. Trigger + uitroepteken
   ========================================================= */

.rn-feedback-widget .rn-feedback-trigger {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  inset: auto auto 0 0 !important;

  width: var(--rn-feedback-size-closed) !important;
  height: var(--rn-feedback-size-closed) !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius:
    var(--rn-feedback-radius-closed)
    var(--rn-feedback-radius-closed)
    var(--rn-feedback-radius-closed)
    0 !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;
  outline: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  z-index: 2;
}

.rn-feedback-widget .rn-feedback-trigger:hover,
.rn-feedback-widget .rn-feedback-trigger:focus,
.rn-feedback-widget .rn-feedback-trigger:active {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.rn-feedback-widget .rn-feedback-icon,
.rn-feedback-widget .rn-feedback-icon:hover,
.rn-feedback-widget .rn-feedback-icon:focus,
.rn-feedback-widget .rn-feedback-icon:active {
  display: block !important;

  width: 8px !important;
  height: 32px !important;

  object-fit: contain !important;

  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;

  pointer-events: none !important;

  opacity: 1;
  transition: opacity 0.5s ease;
}

.rn-feedback-widget.is-open .rn-feedback-icon,
.rn-feedback-widget.is-content-ready .rn-feedback-icon,
.rn-feedback-widget.is-closing .rn-feedback-icon {
  opacity: 0;
}

.rn-feedback-widget.is-icon-return .rn-feedback-icon {
  opacity: 1;
}


/* =========================================================
   3. Panel + views
   ========================================================= */

.rn-feedback-panel {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.5s ease;
}

.rn-feedback-widget.is-content-ready .rn-feedback-panel {
  opacity: 1;
  pointer-events: auto;
}

.rn-feedback-content {
  position: relative;

  width: 100%;
  max-width: 400px;

  box-sizing: border-box;

  color: var(--rn-feedback-text);
  text-align: center;
}

.rn-feedback-view {
  display: none;
  opacity: 0;

  transition: opacity 0.5s ease;
}

.rn-feedback-view.is-active {
  display: block;
  opacity: 1;
}

.rn-feedback-view.is-fading {
  opacity: 0;
}


/* =========================================================
   4. Typografie
   ========================================================= */

.rn-feedback-view h2 {
  margin: 0 0 26px 0;

  color: var(--rn-feedback-text);

  font-family: "cabin-bold", Cabin-Bold, Cabin, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.rn-feedback-view h2 span {
  color: var(--rn-feedback-orange);

  font-size: 34px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rn-feedback-view p {
  margin: 0 0 30px 0;

  color: var(--rn-feedback-text);

  font-family: Cabin, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}


/* Formulier-schermen compacter */
.rn-feedback-widget .rn-feedback-view[data-view="report"],
.rn-feedback-widget .rn-feedback-view[data-view="suggestion"] {
  position: relative !important;
}

.rn-feedback-widget .rn-feedback-view[data-view="report"] h2,
.rn-feedback-widget .rn-feedback-view[data-view="suggestion"] h2 {
  margin: 0 0 12px 0 !important;
  line-height: 1 !important;
}

.rn-feedback-widget .rn-feedback-view[data-view="report"] h2 span,
.rn-feedback-widget .rn-feedback-view[data-view="suggestion"] h2 span {
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
}

.rn-feedback-widget .rn-feedback-view[data-view="report"] > p,
.rn-feedback-widget .rn-feedback-view[data-view="suggestion"] > p {
  margin: 0 0 20px 0 !important;

  font-size: 17px !important;
  line-height: 1.3 !important;
}


/* =========================================================
   5. Keuzeknoppen
   ========================================================= */

.rn-feedback-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rn-feedback-widget .rn-feedback-actions button,
.rn-feedback-widget .rn-feedback-actions a,
.rn-feedback-widget .rn-feedback-reset {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;

  padding: 8px 22px !important;

  border: 1px solid var(--rn-feedback-orange) !important;
  border-radius: 999px !important;

  background: transparent !important;
  background-color: transparent !important;

  color: var(--rn-feedback-text) !important;

  font-family: "cabin-bold", Cabin-Bold, Cabin, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}

.rn-feedback-widget .rn-feedback-actions button:hover,
.rn-feedback-widget .rn-feedback-actions button:focus,
.rn-feedback-widget .rn-feedback-actions a:hover,
.rn-feedback-widget .rn-feedback-actions a:focus,
.rn-feedback-widget .rn-feedback-reset:hover,
.rn-feedback-widget .rn-feedback-reset:focus {
  border-color: #262626 !important;

  background: #262626 !important;
  background-color: #262626 !important;

  color: var(--rn-feedback-orange) !important;

  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   6. Terug-driehoek
   ========================================================= */

.rn-feedback-widget .rn-feedback-back {
  position: fixed !important;

  left: calc(var(--rn-feedback-left) - 21px) !important;
  bottom: calc(var(--rn-feedback-bottom) + var(--rn-feedback-size-open) - 79px) !important;

  z-index: var(--rn-feedback-back-z-index) !important;

  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;
  outline: none !important;

  cursor: pointer !important;

  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

.rn-feedback-widget .rn-feedback-back::before {
  content: "" !important;

  position: absolute !important;
  left: 12px !important;
  top: 0 !important;

  width: 0 !important;
  height: 0 !important;

  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 12px solid var(--rn-feedback-orange) !important;
}

.rn-feedback-widget .rn-feedback-back:hover,
.rn-feedback-widget .rn-feedback-back:focus,
.rn-feedback-widget .rn-feedback-back:active {
  border: 0 !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;
  outline: none !important;
}

.rn-feedback-widget .rn-feedback-back:hover::before,
.rn-feedback-widget .rn-feedback-back:focus::before {
  border-right-color: #262626 !important;
}