:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-0581ac3 *//* =========================================================
   SCB ▸ UnionPay Referral LP — Freight Forwarder Referral
   Full CSS (incl. glass "Andere code kiezen" button + mobile)
   ========================================================= */

/* ===== FONT ===== */
@font-face{
  font-family:"Futura SCB";
  src:url("https://scombank.sr/wp-content/uploads/2021/10/Futura-Light.woff") format("woff");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Futura SCB";
  src:url("https://scombank.sr/wp-content/uploads/2021/10/Futura-Bold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===== TOKENS ===== */
:root{
  --sp-red:#e02228;
  --sp-red-soft:#d91f25;    /* iets zachter rood voor glass borders */
  --sp-black:#0b0b0b;
  --sp-text:#1a1a1a;
  --sp-muted:#5f6368;
  --sp-border:rgba(0,0,0,.10);
  --sp-card:#fff;
  --sp-bg:#fafafa;

  --sp-radius:16px;
  --sp-radius-lg:22px;
  --sp-gap:clamp(14px,2vw,24px);
  --sp-maxw:1180px;

  --sp-shadow:0 10px 24px rgba(0,0,0,.08);
  --sp-focus-ring:0 0 0 3px rgba(224,34,40,.18);

  /* kaart-tegels: placeholder */
  --placeholder-bg:
    radial-gradient(24px 24px at 16px 16px, rgba(0,0,0,.06) 1px, transparent 0) 0 0/32px 32px,
    linear-gradient(180deg, #fff, #f9f9f9);
}

/* ===== BASE ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--sp-bg);
  color:var(--sp-text);
  font-family:"Futura SCB",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sp-black);text-underline-offset:3px}

h1,h2,h3,h4,h5,h6,
button,input,select,textarea{font-family:inherit}

h1{font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:0 0 12px}
h2{font-size:clamp(22px,3.6vw,32px);margin:0 0 12px}
h3{font-size:clamp(18px,2.6vw,22px);margin:0 0 8px}

.sp-page{padding:0 clamp(16px,4vw,24px)}
.sp-page--light{background:var(--sp-bg)}

.sp-eyebrow{
  letter-spacing:.04em;text-transform:uppercase;color:var(--sp-red);
  font-weight:700;margin:0 0 8px
}
.sp-lead{font-size:clamp(16px,2.4vw,18px);margin:0 0 16px}
.small{font-size:.92rem}
.muted{color:var(--sp-muted)}
.upi-inline{color:var(--sp-red)}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px
}

/* ===== BANNER ===== */
.sp-banner{margin:clamp(12px,2vw,18px) auto clamp(18px,3vw,28px);max-width:var(--sp-maxw)}
.sp-banner__image img{width:100%;height:auto;border-radius:16px;box-shadow:var(--sp-shadow)}

/* ===== HERO ===== */
.sp-hero{max-width:var(--sp-maxw);margin:0 auto}
.sp-hero--split{
  display:grid;gap:var(--sp-gap);
  grid-template-columns:1.05fr .95fr;align-items:stretch
}
.sp-hero__col{
  background:var(--sp-card);border:1px solid var(--sp-border);
  border-radius:var(--sp-radius-lg);padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--sp-shadow);display:flex;flex-direction:column
}

/* ===== FORM ===== */
.ref-form{margin-top:12px}
.ref-label{position:absolute;left:-9999px}
.ref-input-wrap{display:grid;grid-template-columns:1fr auto;gap:10px}
.ref-input{
  height:48px;border-radius:999px;border:1px solid var(--sp-border);
  padding:0 16px;font-size:16px;outline:none
}
.ref-input:focus{box-shadow:var(--sp-focus-ring);border-color:#ddd}
.ref-error{margin-top:10px;color:var(--sp-red);min-height:1.25em}

/* ===== BUTTONS (base) ===== */
.sp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none;
  border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,
  background-color .15s ease,color .15s ease,border-color .15s ease;user-select:none
}
.sp-btn--primary{background:var(--sp-black);color:#fff;border-color:var(--sp-black)}
.sp-btn--primary:hover{background:#141414}

/* ===== GLASS VARIANT (CTA zonder code) ===== */
.sp-btn--glass{
  background:rgba(255,255,255,.25);
  border:1px solid rgba(224,34,40,.30);
  color:var(--sp-red);
  font-weight:700;
  backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 4px 12px rgba(224,34,40,.08);
  transition:all .25s ease;
  padding:.8rem 1.3rem;
}
.sp-btn--glass:hover{
  background:rgba(224,34,40,.08);
  border-color:rgba(224,34,40,.50);
  color:var(--sp-black);
  box-shadow:0 6px 16px rgba(224,34,40,.18);
  transform:translateY(-1px)
}

/* ===== NEW: GLASS GHOST (Andere code kiezen) ===== */
.sp-btn--ghost{
  background:rgba(255,255,255,.18);            /* glas */
  color:var(--sp-black);
  border:1px solid rgba(217,31,37,.55);        /* rode rand */
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(217,31,37,.10);
}
.sp-btn--ghost:hover{
  background:rgba(217,31,37,.10);
  border-color:rgba(217,31,37,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px rgba(217,31,37,.18);
  transform:translateY(-1px)
}

/* ===== LOGO GRID (hero) ===== */
.use-grid{display:grid;gap:16px}
.use-card{border:1px solid var(--sp-border);background:var(--sp-card);border-radius:var(--sp-radius);padding:16px}

.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;margin-top:12px;justify-items:center;align-items:center
}
.logo-card{
  display:grid;place-items:center;aspect-ratio:5 / 2;border-radius:14px;
  background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 8px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.logo-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.10);border-color:rgba(0,0,0,.10)}
.logo-card img{max-width:72%;max-height:60%;object-fit:contain;display:block}
.logo-more{text-align:center;margin:10px 0 0;color:var(--sp-muted);font-size:.95rem}

/* ===== PROGRAM POPUP ===== */
.program{max-width:var(--sp-maxw);margin:clamp(18px,3vw,26px) auto 0}
.program-card{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:var(--sp-radius-lg);box-shadow:var(--sp-shadow);overflow:hidden}
.program-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,18px) clamp(16px,2.2vw,22px);
  border-bottom:1px solid var(--sp-border);
  background:linear-gradient(180deg,#fff,#fafafa)
}
.ph-left{display:flex;align-items:center;gap:14px}
.ph-pill{
  display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;
  font-weight:600;background:rgba(224,34,40,.08);color:var(--sp-red)
}
.ph-logo{
  width:100px;height:100px;flex:0 0 80px;border-radius:12px;border:1px solid var(--sp-border);
  background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.ph-logo img{width:96%;height:96%;object-fit:contain}

.program-body{
  display:grid;gap:var(--sp-gap);
  grid-template-columns:1.2fr .8fr;
  padding:clamp(16px,2.4vw,24px)
}

.program-col--side{display:flex;flex-direction:column;gap:12px}
.program-cta{display:flex;gap:10px;flex-wrap:wrap}

.program-side{border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:#fff;padding:12px}
.code-tile{
  display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:44px;margin-bottom:2px;
  border:1px dashed var(--sp-border);border-radius:12px;background:#fff;font-weight:700
}

/* ===== PROMO STRIP ===== */
.promo-strip{
  display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(224,34,40,.28);
  border-left-width:4px;border-radius:16px;
  background:linear-gradient(180deg,rgba(224,34,40,.06),rgba(224,34,40,.02));
  padding:14px;margin:2px 0 14px;box-shadow:0 8px 22px rgba(224,34,40,.08)
}
.promo-chip{
  flex:0 0 auto;background:var(--sp-red-soft);color:#fff;
  font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:999px;
  box-shadow:0 6px 12px rgba(224,34,40,.18)
}
.promo-text{margin:2px 0 0}

/* ===== FREIGHT FORWARDER TIP + FB ===== */
.ff-tip{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--sp-border);
  border-radius:16px;background:#fff;padding:12px 14px;margin:0 0 14px
}
.ff-tip__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#f3f3f3;font-size:18px}
.ff-tip__content h4{margin:0 0 4px;font-size:1rem}
.ff-tip__content p{margin:0 0 6px}
.ff-social{display:flex;gap:10px;align-items:center;margin-top:6px}
.social-icon{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid var(--sp-border);
  border-radius:12px;padding:8px 10px;background:#fff;transition:transform .15s ease, box-shadow .15s ease
}
.social-icon:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.06)}
.social-icon__svg{width:22px;height:22px;fill:#1877F2;display:block}
.social-icon__label{font-weight:700;color:#0b0b0b}

/* ===== 4 KAART-TEGELS ===== */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card-tile{
  position:relative;border:1px solid var(--sp-border);border-radius:18px;
  background:var(--card-bg, var(--placeholder-bg));
  background-size:contain;background-repeat:no-repeat;background-position:center;
  aspect-ratio:16 / 10; box-shadow:0 10px 20px rgba(0,0,0,.05); overflow:hidden;

  --card-img:none;
  --card-img-opacity:.26;
  --card-img-opacity-hover:.75;
  --card-img-scale:1;
  --card-img-scale-hover:1.03;
  --card-img-saturate:1.02;
  --card-img-contrast:1.02;
  --card-img-position:center;
  --card-img-size:cover;
}
.card-tile::before{
  content:""; position:absolute; inset:0;
  background-image:var(--card-img);
  background-size:var(--card-img-size);
  background-position:var(--card-img-position);
  background-repeat:no-repeat;
  opacity:var(--card-img-opacity);
  transform:scale(var(--card-img-scale));
  filter:saturate(var(--card-img-saturate)) contrast(var(--card-img-contrast));
  transition:opacity .25s ease, transform .25s ease, filter .25s ease; pointer-events:none
}
.card-tile:hover::before{opacity:var(--card-img-opacity-hover);transform:scale(var(--card-img-scale-hover))}
.card-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.00) 35%, rgba(255,255,255,.14) 70%, rgba(255,255,255,.22) 100%);
  pointer-events:none
}
.card-tile__overlay{
  position:absolute; inset:auto 10px 10px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
  border:1px solid rgba(0,0,0,.08); padding:8px 10px;border-radius:12px;
  backdrop-filter:saturate(130%)
}
.card-tile__type{font-weight:700}
.card-tile__price{
  font-weight:700;color:#fff;background:var(--sp-black);
  padding:6px 10px;border-radius:999px;box-shadow:0 6px 12px rgba(0,0,0,.14)
}

/* ===== VOORWAARDEN ===== */
.terms-callout{
  position:relative;margin:14px 0;border:1px solid rgba(224,34,40,.35);border-left-width:4px;
  border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(224,34,40,.14);padding:14px;overflow:hidden
}
.terms-callout__head{
  display:flex;align-items:center;gap:12px;border-bottom:1px dashed rgba(224,34,40,.35);
  padding-bottom:10px;margin-bottom:10px
}
.terms-callout__flag{
  width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;color:#fff;
  background:linear-gradient(180deg, rgba(224,34,40,.85), rgba(224,34,40,.75));
  box-shadow:0 6px 14px rgba(224,34,40,.28), inset 0 1px 0 rgba(255,255,255,.25);
  font-weight:800;font-size:18px
}
.terms-callout__title{margin:0 0 2px;font-size:1rem}
.terms-callout__sub{margin:0;color:rgba(0,0,0,.6);font-size:.92rem}
.terms-callout__count{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:28px;padding:0 10px;border-radius:999px;
  color:#fff;background:linear-gradient(180deg, rgba(224,34,40,.92), rgba(224,34,40,.78));
  border:1px solid rgba(224,34,40,.45);box-shadow:0 6px 14px rgba(224,34,40,.25);font-weight:700
}
.terms-callout__list{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:10px}
.terms-callout__list li{
  position:relative;padding:10px 12px 10px 42px;border-radius:12px;border:1px solid rgba(224,34,40,.25);
  background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.35)
}
.terms-callout__list li::before{
  content:"!";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;display:grid;place-items:center;border-radius:5px;line-height:1;
  font-weight:800;font-size:.8rem;color:#fff;background:rgba(224,34,40,.95);box-shadow:0 4px 10px rgba(224,34,40,.28)
}
.terms-callout.is-pop{animation:termsPop .9s ease}
@keyframes termsPop{
  0%{transform:scale(.985);box-shadow:0 0 0 rgba(224,34,40,0)}
  35%{transform:scale(1.005);box-shadow:0 14px 28px rgba(224,34,40,.22)}
  100%{transform:scale(1);box-shadow:0 8px 24px rgba(224,34,40,.14)}
}

/* ===== TRUST & FOOTER ===== */
.trust{max-width:var(--sp-maxw);margin:clamp(18px,3vw,26px) auto}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.trust-badge{display:grid;place-items:center;height:56px;border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:#fff;font-weight:700}
.sp-footer{max-width:var(--sp-maxw);margin:0 auto clamp(24px,3vw,40px);color:var(--sp-muted)}

/* ===== NO-CODE CTA (modern glass-outline) ===== */
.no-code-cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;
  padding:12px 16px;border-radius:16px;backdrop-filter:blur(12px) saturate(140%);
  background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 22px rgba(0,0,0,.05)
}
.no-code-text{margin:0;font-size:.95rem;color:var(--sp-muted);font-weight:500}

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

/* <= 980px: stack columns, simplify */
@media (max-width:980px){
  .sp-hero--split{grid-template-columns:1fr}
  .program-body{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .ph-logo{width:84px;height:84px}
  .program-head{gap:12px}
}

/* <= 720px: inputs & buttons stack nicely, tighten paddings */
@media (max-width:720px){
  .ref-input-wrap{grid-template-columns:1fr}          /* Enter-button onder input */
  .sp-btn{width:100%}                                  /* knoppen full-width */
  .no-code-cta{flex-direction:column;align-items:stretch;gap:10px}
  .no-code-text{text-align:center}
  .program-head{flex-direction:column;align-items:flex-start}
  .ph-left{width:100%}
  .ph-logo{width:76px;height:76px}
  .logo-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}

/* <= 520px: smaller radii, tighter grid gaps, readable tiles */
@media (max-width:520px){
  :root{ --sp-radius:14px; --sp-radius-lg:18px }
  .sp-banner__image img{border-radius:12px}
  .sp-hero__col{padding:14px}
  .logo-grid{gap:10px}
  .logo-card{border-radius:12px}
  .card-tile{border-radius:14px}
  .card-tile__overlay{inset:auto 8px 8px 8px;padding:8px}
  .card-tile__price{padding:6px 9px}
  .ph-logo{width:68px;height:68px}
  .promo-strip{flex-direction:column;align-items:stretch}
}

/* High-contrast tap states for accessibility */
@media (hover:none){
  .sp-btn--glass:active,
  .sp-btn--ghost:active{transform:translateY(0);box-shadow:0 0 0 3px rgba(224,34,40,.18)}
}

/* ==== Mobile fix: program-head tidy on small screens ==== */
.ph-left > div { 
  /* container voor pill + titel */
  min-width: 0;               /* laat ellipsis werken */
  display: flex; 
  flex-direction: column; 
  gap: 6px;
}

@media (max-width: 720px) {
  .program-head{ padding: 12px 14px; gap: 10px; }
  .ph-left{ align-items: flex-start; gap: 12px; }

  /* Logo iets kleiner en niet laten rekken */
  .ph-logo{ width: 64px; height: 64px; flex: 0 0 auto; }

  /* Partner pill: op één regel met ellipsis zodat hij niet op de titel valt */
  .ph-pill{
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;              /* niet forceren naar 28px op kleine schermen */
    line-height: 1.2;
    padding: 4px 8px;          /* compacter */
    font-size: .9rem;          /* iets kleiner op mobiel */
    background: rgba(224,34,40,.10);  /* iets lichter voor leesbaarheid */
    border: 1px solid rgba(224,34,40,.25);
  }

  /* Titel: kleiner, mag afbreken op woorden */
  #prog-title{
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.2;
    word-break: break-word;
  }
}

/* Extra kleine schermen: nog wat strakker */
@media (max-width: 420px){
  .ph-logo{ width: 56px; height: 56px; }
  .ph-pill{ font-size: .85rem; padding: 3px 7px; }
  #prog-title{ font-size: clamp(17px, 5.6vw, 20px); }
}

/* ===== Mobile fix ===== */
@media (max-width: 720px){

 
  .program-body{
    display:flex;
    flex-direction:column; 
    gap:var(--sp-gap);
  }

  .program-col--side{
    order:-1;                
    margin-bottom:1rem;
  }

  #prog-apply{
    width:100%;
    text-align:center;
  }

  .program-card{
    position:relative;
    padding-bottom:72px;     
  }

  .ph-right{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:10;
    display:flex;
    justify-content:center;
    padding:10px 14px;
    background:linear-gradient(180deg,#fffffffa,#fff);
    border-top:1px solid var(--sp-border);
  }

  #prog-reset{
    width:100%;
    text-align:center;
  }
}/* End custom CSS */