:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d1ae733 */.upsell{
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 18px;

  background: linear-gradient(
    180deg,
    rgba(224,34,40,.08),
    rgba(224,34,40,.04)
  );

  border: 1px solid rgba(224,34,40,.22);
  font-family: var(--font-main);
}

.upsell h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.upsell p{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(18,19,22,.75);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f0226f1 *//* ================================
   FONTS – SCOM FUTURA LIGHT
================================ */
@font-face{
  font-family:"FuturaSCOM";
  src:url("https://scombank.sr/wp-content/uploads/2021/10/Futura-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* ================================
   ROOT TOKENS
================================ */
:root{
  --bg:#ffffff;
  --card:#fafafa;
  --stroke:#e6e6e6;
  --stroke-soft:#ededed;

  --text:#1e1e1e;
  --muted:#6b6b6b;
  --muted-soft:#8a8a8a;

  --radius-sm:12px;
  --radius:16px;
  --radius-lg:18px;

  --shadow:0 10px 26px rgba(0,0,0,.08);

  --scom-red:#e02228;

  --wrap-max:1200px;
}

/* ================================
   BASE
================================ */
*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"FuturaSCOM", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ================================
   WRAPPER
================================ */
.info-only{
  padding:12px;
}

.info-card{
  max-width:var(--wrap-max);
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px;
}

.info-title{
  margin:0 0 16px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.2px;
}

/* ================================
   GRID – 4 kolommen, 2 rijen
   (2 vragen per kolom)
================================ */
.dd-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(2, auto);
  grid-auto-flow:column;
  gap:12px;
  align-items:start;
}

/* ================================
   DETAILS / DROPDOWN
================================ */
.dd{
  background:#ffffff;
  border:1px solid var(--stroke-soft);
  border-radius:var(--radius);
  overflow:hidden;
  min-width:0;
}

/* summary */
.dd__sum{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:12px;
  cursor:pointer;
  user-select:none;

  font-size:13px;
  font-weight:400;
  color:var(--text);
}

.dd__sum::-webkit-details-marker{ display:none; }

/* focus ring */
.dd__sum:focus{ outline:none; }
.dd__sum:focus-visible{
  outline:2px solid rgba(224,34,40,.30);
  outline-offset:2px;
  border-radius:12px;
}

/* Chevron bubble */
.chev{
  width:34px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--stroke-soft);
  background:#f4f4f4;
  position:relative;
  flex-shrink:0;
}

.chev::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-right:2px solid #666;
  border-bottom:2px solid #666;
  transform:translate(-50%,-60%) rotate(45deg);
}

/* ✅ FIX: draai alleen de chevron van de eigen summary (niet alle descendants) */
.dd[open] > .dd__sum .chev::before{
  transform:translate(-50%,-35%) rotate(-135deg);
}

/* ================================
   DROPDOWN BODY
================================ */
.dd__body{
  padding:10px 12px 12px;
  border-top:1px solid var(--stroke-soft);
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* ================================
   CONTENT STYLES
================================ */
.info-list,
.info-ol{
  margin:0;
  padding-left:18px;
}

.info-list li,
.info-ol li{
  margin:6px 0;
}

.info-text{
  margin:0;
}

.note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted-soft);
}

.note-inline{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted-soft);
}

/* ================================
   IMPORTANT NOTE (in dropdown)
================================ */
.note.important{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(224,34,40,.55);
  background:rgba(224,34,40,.06);
  border-radius:12px;
  color:var(--text);
}

.important__title{
  font-size:12px;
  font-weight:600;
  color:var(--scom-red);
  margin-bottom:6px;
  letter-spacing:.2px;
}

.important__text{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.55;
}

.important__flow{
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(224,34,40,.35);
  background:rgba(224,34,40,.08);
  color:var(--text);
}

/* ================================
   NESTED (Limieten) – forced dropdown behavior
================================ */
.dd-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.dd--nested{
  display:block;
  border-radius:var(--radius-sm);
  border:1px solid var(--stroke-soft);
  background:#fff;
  overflow:hidden;
}

.dd__sum--nested{
  padding:11px 12px;
  font-size:13px;
}

/* body moet altijd onder summary komen (dropdown) */
.dd--nested > .dd__body{
  border-top:1px solid var(--stroke-soft);
  border-bottom:none;
}

/* ================================
   RESPONSIVE
================================ */

/* 3 kolommen */
@media (max-width: 1200px){
  .dd-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:auto;
    grid-auto-flow:row;
  }
}

/* 2 kolommen */
@media (max-width: 980px){
  .dd-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:auto;
    grid-auto-flow:row;
  }
}

/* 1 kolom */
@media (max-width: 620px){
  .info-only{ padding:10px; }
  .info-card{ padding:14px; }

  .dd-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-auto-flow:row;
  }

  .dd__sum{ padding:11px; }
  .dd__body{ padding:9px 11px 11px; }
  .note{ font-size:11.5px; }
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ec398b8 *//* ======================================================
   FONTS – SCOM FUTURA LIGHT (ONLY)
   (geen Roboto/Segoe/Helvetica fallback)
====================================================== */
@font-face{
  font-family:"FuturaSCOM";
  src:url("https://scombank.sr/wp-content/uploads/2021/10/Futura-Light.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* Zelfde bestand “gemapt” als 600 zodat de headline iets bolder kan */
@font-face{
  font-family:"FuturaSCOM";
  src:url("https://scombank.sr/wp-content/uploads/2021/10/Futura-Light.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ======================================================
   ROOT VARIABLES
====================================================== */
:root{
  --bg:#ffffff;
  --text:#141518;
  --muted:rgba(20,21,24,.72);
  --line:rgba(20,21,24,.10);
  --shadow:0 18px 55px rgba(0,0,0,.08);
  --shadow2:0 10px 24px rgba(0,0,0,.06);
  --red:#e02228;
  --radius:22px;
  --max:1120px;
}

/* ======================================================
   RESET / BASE
====================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"FuturaSCOM", sans-serif; /* geen Roboto fallback */
  font-weight:300;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ======================================================
   LAYOUT
====================================================== */
.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:28px 20px 56px;
}

/* ======================================================
   CARD
====================================================== */
.confirm{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  width:100%;
}

.confirm__top{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:22px 22px 16px;
}

.icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--red);
  box-shadow:0 14px 26px rgba(224,34,40,.18);
  flex:0 0 auto;
  color:#fff;
}

.icon svg{ width:24px; height:24px; }
.icon path{ stroke:currentColor; }

.heading h1{
  margin:0;
  font-size:26px;
  letter-spacing:-0.02em;
  line-height:1.12;
  font-weight:600; /* headline iets bolder */
}

.sub{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:14.8px;
  max-width:90ch;
}

.divider{
  height:1px;
  background:rgba(0,0,0,.06);
  margin:0 22px;
}

.confirm__body{
  padding:18px 22px 22px;
  display:grid;
  gap:14px;
}

/* ======================================================
   NOTE
====================================================== */
.note{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow2);
}

.note h2{
  margin:0 0 8px;
  font-size:15.5px;
  letter-spacing:-0.01em;
  font-weight:600;
}

.note p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14.6px;
}

.note strong{
  font-weight:600;
}

/* ======================================================
   STATUS
====================================================== */
.status{
  background:rgba(224,34,40,.06);
  border:1px solid rgba(224,34,40,.18);
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.status__text h2{
  margin:0 0 6px;
  font-size:15.5px;
  letter-spacing:-0.01em;
  font-weight:600;
}

.status__text p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:14.6px;
}

/* ======================================================
   BUTTON
====================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(224,34,40,.22);
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14.2px;
  letter-spacing:.01em;
  transition:transform .15s ease, filter .15s ease;
  white-space:nowrap;
  min-width:190px;
  text-align:center;
}

.btn:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.btn:active{ transform:translateY(0); }

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width:760px){
  .wrap{ padding:18px 14px 44px; }
  .confirm__top{ padding:18px 16px 14px; }
  .divider{ margin:0 16px; }
  .confirm__body{ padding:14px 16px 16px; }
  .status{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; min-width:0; }
}/* End custom CSS */