/* =========================================================
   BOXZILLA – DF
   ========================================================= */


/* =========================================================
   POSITION + DESIGN
   ========================================================= */

div[id^="boxzilla"].boxzilla{

  position:fixed !important;

  left:50% !important;
  transform:translateX(-50%);

  bottom:0 !important;
  top:auto !important;

  width:640px;
  max-width:90vw;

  padding:16px 34px 34px 34px; /* ↓ reduziert */

  border-radius:12px 12px 0 0;

  overflow:hidden;

  z-index:9999;

  background:#fffcfc;

  border:1px solid rgba(147,84,59,0.05);

  box-shadow:
    0 -3px 10px rgba(147,84,59,0.045),
    0 1px 0 rgba(255,255,255,0.6) inset;
}


/* =========================================================
   CONTENT RESET
   ========================================================= */

div[id^="boxzilla"] .boxzilla-content{
  margin-top:0; /* vorher 8px → entfernt */
}


/* =========================================================
   REMOVE MODAL OVERLAY
   ========================================================= */

.boxzilla-overlay,
.boxzilla-overlay-visible,
.boxzilla-modal,
.boxzilla-backdrop{

  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


/* =========================================================
   PREVENT SCROLL LOCK
   ========================================================= */

body.boxzilla-open{
  overflow:auto !important;
}


/* =========================================================
   FORM ROOT
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"]{

  --df-color: rgba(147,84,59,0.92);
  --df-border: rgba(147,84,59,0.14);
  --df-border-hover: rgba(147,84,59,0.28);
  --df-border-focus: rgba(147,84,59,0.55);
  --df-placeholder: rgba(147,84,59,0.48);
  --df-error: rgba(147,84,59,0.72);

  max-width:520px;
  margin:0 auto;
  padding-top:10px;
}


/* =========================================================
   NO LABEL
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-input--label{
  display:none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-group{
  margin-bottom:22px;
}


/* =========================================================
   INPUTS
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-control{

  width:100%;
  border:none;
  border-bottom:1px solid var(--df-border);

  background:transparent;
  border-radius:0;

  padding:14px 0;

  font-size:14px;
  color:var(--df-color);

  transition:border-color .22s ease;
}

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-control::placeholder{
  color:var(--df-placeholder);
}

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-control:hover{
  border-bottom-color:var(--df-border-hover);
}

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-control:focus{
  outline:none;
  border-bottom:1px solid var(--df-border-focus);
}

div[id^="boxzilla"] textarea{
  min-height:110px;
  resize:none;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-check{

  display:flex;
  align-items:flex-start;

  gap:12px;

  text-align:left;
}


/* Checkbox Input */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-check-input{
  margin-top:3px;
}


/* Label / Text */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-form-check-label{

  display:block;

  font-size:13px; /* reduziert */
  line-height:1.6;

  color:var(--df-color);

  text-align:left;
}


/* =========================================================
   CONSENT FIX (BOX + FORM SCOPED)
   ========================================================= */

[id^="boxzilla-"] .boxzilla-content .ff-el-form-check-label{

  font-size:12px !important;
  line-height:1.45 !important;
  letter-spacing:0.02em;

  color: rgba(147,84,59,0.75) !important;
}

/* Textblock innerhalb Label */
[id^="boxzilla-"] .boxzilla-content .ff_t_c{
  font-size:inherit !important;
  line-height:inherit !important;
  color:inherit !important;
}

/* Checkbox vertikal sauber ausrichten */
[id^="boxzilla-"] .boxzilla-content .ff-el-form-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

/* Checkbox selbst */
[id^="boxzilla-"] .boxzilla-content .ff_tc_checkbox{
  margin-top:2px;
}

/* Link Styling */
[id^="boxzilla-"] .boxzilla-content .ff_t_c a{
  color: rgba(147,84,59,0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[id^="boxzilla-"] .boxzilla-content .ff_t_c a:hover{
  color: rgba(147,84,59,1);
}

/* =========================================================
   ERROR
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-error,
div[id^="boxzilla"] [id^="fluentform_"] .text-danger{

  margin-top:6px;

  font-size:12px;

  color:var(--df-error) !important;
}

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-is-error input,
div[id^="boxzilla"] [id^="fluentform_"] .ff-el-is-error textarea{

  border-bottom:1px solid rgba(147,84,59,0.45);

  box-shadow: inset 0 -1px 0 rgba(147,84,59,0.25);
}


/* =========================================================
   LINKS
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] a:not(.df-button):not(.nectar-button){

  color: rgba(147,84,59,0.88) !important;
  text-decoration:none;
}

div[id^="boxzilla"] [id^="fluentform_"] a:not(.df-button):not(.nectar-button):hover{

  color: rgba(147,84,59,1) !important;
}

div[id^="boxzilla"] [id^="fluentform_"] .ff-el-error a:not(.df-button){

  color: rgba(147,84,59,0.82) !important;
}

/* =========================================================
   BUTTON WRAPPER – Reset
   ========================================================= */

div[id^="boxzilla"] [id^="fluentform_"] .ff_submit_btn_wrapper{

  display:flex;
  justify-content:center;   /* horizontal zentrieren */
  align-items:center;

  padding:0;
  background:none;
  border:none;
}

/* =========================================================
   Fluent Submit BUTTON
   ========================================================= */


div[id^="boxzilla"] [id^="fluentform_"] 

.ff-btn.ff-btn-submit {

  display:inline-flex;

  padding:12px 28px;

  border:1px solid rgba(147,84,59,0.05) !important;

  border-radius:10px;

  font-size:14px;
  font-weight:450;
  letter-spacing:.045em;

  line-height:1;

  background: rgba(252,244,245,0.46) !important;

  backdrop-filter: blur(5px) saturate(102%);
  -webkit-backdrop-filter: blur(5px) saturate(102%);

  color: rgba(147,84,59,0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 0 0 0.5px rgba(215,130,140,0.09); /* kein outer shadow mehr */

  cursor:pointer;

  transition:
    transform .14s cubic-bezier(0.33,0,0.2,1),
    background .22s ease,
    box-shadow .28s ease,
    color .22s ease;
}


/* Hover */

div[id^="boxzilla"] [id^="fluentform_"] 
.ff-btn.ff-btn-submit:hover {

  background: rgba(252,244,245,0.54) !important;

  color: rgba(147,84,59,0.92) !important; /* fix gegen weiß */

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 0 0 0.5px rgba(215,130,140,0.12);

  transform: translateY(0.2px);
}


/* Wrapper */

div[id^="boxzilla"] [id^="fluentform_"] 
.ff_submit_btn_wrapper {
align:center;
}



/* =========================================================
   BOXZILLA – DF CLOSE (FINAL COMPLETE)
   ========================================================= */
   
   
/* =========================================================
   BOXZILLA – DF CLOSE (ULTRA SUBTLE FINAL)
   ========================================================= */

/* Box als Bezug */
div[id^="boxzilla"].boxzilla {
  position: relative;
}

/* Default X unsichtbar */
div[id^="boxzilla"] .boxzilla-close-icon {
  font-size: 0 !important;
}

/* Close Container (zentriert oben) */
div[id^="boxzilla"] .boxzilla-close-icon {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 42px;
  height: 42px;

  display: block;
  cursor: pointer;
  z-index: 50;
}


/* =========================================================
   ICON
   ========================================================= */

div[id^="boxzilla"] .boxzilla-close-icon::after {
  content: "";
  position: absolute;
  inset: 0;

  background: url('/wp-content/uploads/df-bluete-boxzilla-close.svg') center no-repeat;
  background-size: 30px 30px;

  opacity: 0.85;
  transition: opacity .18s ease;
}


/* =========================================================
   LABEL (DE DEFAULT)
   ========================================================= */

div[id^="boxzilla"] .boxzilla-close-icon::before {
  content: "schliessen";

  position: absolute;
  left: 50%;
  bottom: -16px;

  transform: translateX(-50%);

  font-size: 10px;
  letter-spacing: 0.08em;

  color: rgba(147,84,59,0.75);
  transition: color .18s ease;

  white-space: nowrap;
}

/* EN Override */
html[lang^="en"] div[id^="boxzilla"] .boxzilla-close-icon::before {
  content: "close";
}


/* =========================================================
   HOVER (ULTRA SUBTLE)
   ========================================================= */

div[id^="boxzilla"] .boxzilla-close-icon:hover::after {
  opacity: 0.9; /* minimaler Unterschied */
}

div[id^="boxzilla"] .boxzilla-close-icon:hover::before {
  color: rgba(147,84,59,0.8);
}


/* =========================================================
   CONTENT SPACING (ICON + LABEL)
   ========================================================= */

div[id^="boxzilla"] .boxzilla-content {
  padding-top: 64px;
}