/* =========================================================
   Withdraw-from-contract popup — scoped styles
   All selectors are prefixed with .wfc- so nothing here can
   collide with existing Braun Publishing CSS classes.
   No global resets (*, html, body, bare element selectors)
   are used, so this will not affect the rest of the site.
   ========================================================= */

/* ---------- Trigger button ---------- */

.wfc-trigger-btn{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#ffffff;
  color:#111111;
  border:1px solid #111111;
  border-radius:6px;
  padding:14px 26px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wfc-trigger-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.wfc-trigger-btn:focus-visible{
  outline:3px solid #5c6b1c;
  outline-offset:3px;
}

/* ---------- Overlay ---------- */

.wfc-overlay{
  position:fixed;
  inset:0;
  background:rgba(30,30,30,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:64px 16px;
  overflow-y:auto;
  z-index:1000;
  box-sizing:border-box;
}
.wfc-overlay.wfc-open{ display:flex; }
.wfc-overlay, .wfc-overlay *{ box-sizing:border-box; }

/* ---------- Modal shell ---------- */

.wfc-modal{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#ffffff;
  color:#111111;
  width:100%;
  max-width:600px;
  border-radius:2px;
  padding:44px 48px 36px;
  position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  animation:wfc-modal-in .18s ease-out;
  -webkit-font-smoothing:antialiased;
}
@keyframes wfc-modal-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.wfc-modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:#eeeeee;
  color:#111111;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wfc-modal-close:hover{ background:#d8d8d8; }

.wfc-modal h2{
  font-size:26px;
  font-weight:600;
  margin:0 0 8px;
  line-height:1.25;
}
.wfc-modal .wfc-subtitle{
  font-size:15px;
  color:#4a4a4a;
  margin:0 0 26px;
}

/* ---------- Tabs ---------- */

.wfc-tabs{
  display:flex;
  gap:10px;
  margin-bottom:28px;
}
.wfc-tab{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  border:none;
  border-radius:20px;
  padding:10px 20px;
  background:#eeeeee;
  color:#111111;
  cursor:default;
}
.wfc-tab.wfc-active{
  background:#111111;
  color:#ffffff;
}

/* ---------- Form fields ---------- */

.wfc-field{ margin-bottom:22px; }
.wfc-field label{
  display:block;
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
}
.wfc-field label .wfc-req{ color:#4a4a4a; font-weight:400; }

.wfc-field input[type="text"],
.wfc-field input[type="email"],
.wfc-field textarea{
  width:100%;
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  padding:13px 14px;
  border:1px solid #d8d8d8;
  border-radius:6px;
  outline:none;
  color:#111111;
  background:#ffffff;
}
.wfc-field input:focus,
.wfc-field textarea:focus { border-color:#111111; }

.wfc-error-text{
  display:none;
  color:#b3261e;
  font-size:13px;
  margin-top:6px;
}
.wfc-field.wfc-has-error .wfc-error-text{ display:block; }
.wfc-field.wfc-has-error input{ border-color:#b3261e; }

.wfc-checkbox-row{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  margin-bottom:18px !important;
  cursor:pointer !important;
  position:relative !important;
}

/* The real checkbox stays in the DOM (so forms + screen readers + keyboard
   focus all still work) but is made visually invisible and stacked exactly
   over the custom box below. This sidesteps any host-site rule targeting
   input[type="checkbox"] directly (display:none, appearance:none, custom
   ::before/::after skins, etc.) since we never rely on its native paint. */
.wfc-checkbox-row .wfc-checkbox-input{
  position:absolute !important;
  opacity:0 !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;
  top:0 !important;
  left:0 !important;
  cursor:pointer !important;
  z-index:2 !important;
  appearance:auto !important;
}

.wfc-checkbox-row .wfc-checkbox-box{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  border:2px solid #111111 !important;
  border-radius:4px !important;
  background:#ffffff !important;
  flex-shrink:0 !important;
  position:relative !important;
  margin-top:1px !important;
  box-sizing:border-box !important;
  display:block !important;
}
.wfc-checkbox-row .wfc-checkbox-box::after{
  content:"" !important;
  position:absolute !important;
  display:none !important;
  left:5px !important;
  top:1px !important;
  width:5px !important;
  height:10px !important;
  border:solid #ffffff !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}
.wfc-checkbox-row .wfc-checkbox-input:checked ~ .wfc-checkbox-box{
  background:#111111 !important;
  border-color:#111111 !important;
}
.wfc-checkbox-row .wfc-checkbox-input:checked ~ .wfc-checkbox-box::after{
  display:block !important;
}
.wfc-checkbox-row .wfc-checkbox-input:focus-visible ~ .wfc-checkbox-box{
  outline:3px solid #5c6b1c !important;
  outline-offset:2px !important;
}

.wfc-checkbox-row span{ font-size:15px; font-weight:600; }

/* ---------- Buttons inside modal ---------- */

.wfc-btn-row{ display:flex; gap:12px; margin-top:8px; }
.wfc-btn{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  border-radius:6px;
  padding:14px 22px;
  border:none;
  cursor:pointer;
}
.wfc-btn-primary{ background:#111111; color:#ffffff; flex:1; }
.wfc-btn-primary:hover{ opacity:.9; }
.wfc-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.wfc-btn-secondary{ background:#eeeeee; color:#111111; }
.wfc-btn-secondary:hover{ background:#d8d8d8; }

.wfc-disclaimer{
  margin-top:18px;
  font-size:13px;
  font-style:italic;
  color:#4a4a4a;
  line-height:1.5;
}

/* ---------- Review (confirmation) table ---------- */

.wfc-review-table{ margin-bottom:26px; }
.wfc-review-row{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid #eeeeee;
  font-size:15px;
}
.wfc-review-row .wfc-k{ font-weight:700; color:#111111; }
.wfc-review-row .wfc-v{ color:#111111; }

/* ---------- Success / failure status view ---------- */

.wfc-status-view{ text-align:center; padding:8px 0 4px; }
.wfc-status-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  font-size:30px;
  color:#ffffff;
}
.wfc-status-icon.wfc-success{ background:#1f7a3d; }
.wfc-status-icon.wfc-failure{ background:#b3261e; }
.wfc-status-view h2{ margin-bottom:10px; }
.wfc-status-view p{
  font-size:15px;
  color:#4a4a4a;
  margin:0 auto 28px;
  max-width:400px;
  line-height:1.6;
}
.wfc-status-meta{
  background:#f7f7f7;
  border-radius:6px;
  padding:16px 18px;
  text-align:left;
  font-size:14px;
  margin-bottom:26px;
}
.wfc-status-meta div{ display:flex; justify-content:space-between; padding:4px 0; }
.wfc-status-meta .wfc-k{ color:#4a4a4a; }
.wfc-status-meta .wfc-v{ font-weight:600; }

.wfc-spinner{
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  vertical-align:-3px;
  margin-right:8px;
  animation:wfc-spin .7s linear infinite;
}
@keyframes wfc-spin{ to{ transform:rotate(360deg); } }

/* ---------- Step panel visibility ---------- */

.wfc-step-panel{ display:none; }
.wfc-step-panel.wfc-active{ display:block; }

/* ---------- Responsive ---------- */

@media (max-width:600px){
  .wfc-modal{ padding:32px 22px 26px; }
}