/* ---------------------------------------------------------------
   Omniplan — Tarieven module
--------------------------------------------------------------- */

.op-desc--rich p,
.op-usp-sub--rich p{
  margin:0;
  padding:0;
  font:inherit;
  color:inherit;
  line-height:inherit;
}


/* ===============================================================
   Variables / root
================================================================ */

.op-pricing{
  --op-navy:#0F0032;
  --op-blue:#3701C6;
  --op-lilac:#7F7ACE;
  --op-grey:#93969B;

  --op-ink:var(--op-navy);
  --op-ink-soft:#615C8C;

  --op-card-top:#E8E5F8;
  --op-card-bot:#F9F8FD;
  --op-card-top-hi:#DEDAF4;

  --op-line:#E2DFF3;
  --op-primary:#2A0E6C;
  --op-usp-bg:#EAF0FE;

  --op-r-card:32px;
  --op-r-btn:16px;
  --op-r-block:24px;

  --op-legend-h:30px;

  width:100%;
  max-width:none;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  color:var(--op-ink);

  -webkit-font-smoothing:antialiased;

  font-feature-settings:
    "cv05" 1,
    "ss01" 1;
}


/* ===============================================================
   Basis
================================================================ */

.op-pricing *{
  box-sizing:border-box;
}


.op-wrap{
  width:100%;
  max-width:none;

  margin:0;
  padding:0;
}


/* ===============================================================
   Controls
================================================================ */

.op-hero{
  padding:80px 0 0;
}


.op-controls{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  width:100%;

  gap:32px;

  flex-wrap:wrap;
}


/* ===============================================================
   Pakket-switch
================================================================ */

.op-seg{
  display:inline-flex;

  background:var(--op-card-top);

  border-radius:var(--op-r-btn);

  padding:5px;
}


.op-seg button{
  font:inherit;

  font-size:15px;
  font-weight:500;

  color:var(--op-ink-soft);

  background:none;

  border:0;

  cursor:pointer;

  padding:11px 22px;

  border-radius:12px;

  transition:
    background .15s,
    color .15s;
}


.op-seg button[aria-pressed="true"]{
  background:#fff;

  color:var(--op-ink);

  font-weight:600;

  box-shadow:
    0 1px 3px rgba(15,0,50,.10);
}


/* ===============================================================
   Focus
================================================================ */

.op-pricing button:focus-visible,
.op-pricing a:focus-visible{
  outline:2px solid var(--op-blue);
  outline-offset:3px;
}


/* ===============================================================
   Maand / jaar wrapper
================================================================ */

.op-billing-wrap{
  position:relative;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  margin-left:auto;

  /*
   * Ruimte wordt altijd gereserveerd voor de callout.
   * Daardoor verspringt de layout niet wanneer deze verschijnt.
   */
  padding-top:30px;
}


/* ===============================================================
   Maand / jaar
================================================================ */

.op-billing{
  display:flex;

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

  gap:10px;

  font-size:15px;

  color:var(--op-ink-soft);

  white-space:nowrap;
}


.op-billing-label{
  white-space:nowrap;
}


/* ===============================================================
   Jaarbetaling besparing
   Desktop/tablet: callout boven "Per jaar"
================================================================ */

.op-billing-save{
  position:absolute;

  top:0;
  right:-2px;

  display:inline-flex;
  align-items:center;

  padding:5px 9px;

  border-radius:7px;

  background:#E8F4EB;
  color:#1D6B32;

  font-size:11px;
  line-height:1.2;
  font-weight:600;

  white-space:nowrap;

  z-index:2;

  /* verborgen state */
  opacity:0;
  visibility:hidden;

  /*
   * Start iets lager.
   * Daardoor lijkt hij uit "Per jaar" omhoog te komen.
   */
  transform:translateY(8px);

  pointer-events:none;

  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .28s;
}


/* Driehoek */

.op-billing-save::after{
  content:"";

  position:absolute;

  right:22px;
  bottom:-5px;

  width:0;
  height:0;

  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #E8F4EB;
}


/* Zichtbaar */

.op-billing-save.is-on{
  opacity:1;
  visibility:visible;

  transform:translateY(0);

  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}


/* ===============================================================
   Toggle
================================================================ */

.op-pricing button.op-switch{
  position:relative;

  display:inline-block;

  flex:0 0 48px;

  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;

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

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

  border:0 !important;

  border-radius:999px !important;

  background:#E2DFF3 !important;
  background-image:none !important;

  box-shadow:none !important;

  appearance:none;
  -webkit-appearance:none;

  overflow:hidden;

  cursor:pointer;

  vertical-align:middle;

  font-size:0;
  line-height:0;

  transition:
    background-color .18s ease;
}


.op-pricing button.op-switch::before{
  content:none !important;
  display:none !important;
}


.op-pricing button.op-switch[aria-checked="true"]{
  background:var(--op-blue) !important;
}


/* Toggle knob */

.op-pricing button.op-switch::after{
  content:"";

  position:absolute;

  top:4px;
  left:4px;

  width:20px;
  height:20px;

  margin:0;
  padding:0;

  border:0;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 1px 2px rgba(15,0,50,.14);

  transform:translateX(0);

  transition:
    transform .18s ease;

  pointer-events:none;
}


.op-pricing button.op-switch[aria-checked="true"]::after{
  transform:translateX(20px);
}


/* Hover */

.op-pricing button.op-switch:hover{
  background:#E2DFF3 !important;

  border:0 !important;

  box-shadow:none !important;

  text-decoration:none !important;
}


.op-pricing button.op-switch[aria-checked="true"]:hover{
  background:var(--op-blue) !important;
}


/* Focus */

.op-pricing button.op-switch:focus{
  border:0 !important;
  box-shadow:none !important;
}


.op-pricing button.op-switch:focus-visible{
  outline:2px solid var(--op-blue);
  outline-offset:3px;
}


/* ===============================================================
   Pricing cards
================================================================ */

.op-cards{
  display:grid;

  grid-template-columns:
    .85fr
    1fr
    1fr;

  gap:20px;

  margin-top:
    calc(
      20px +
      var(--op-legend-h) / 2
    );

  align-items:stretch;
}


.op-card{
  position:relative;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      var(--op-card-top) 0%,
      var(--op-card-bot) 78%
    );

  border-radius:var(--op-r-card);
}


.op-card--featured{
  background:
    linear-gradient(
      180deg,
      var(--op-card-top-hi) 0%,
      var(--op-card-bot) 78%
    );

  box-shadow:
    inset 0 0 0 2px var(--op-lilac);
}


/* ===============================================================
   Meest gekozen
================================================================ */

.op-legend{
  position:absolute;

  top:
    calc(
      var(--op-legend-h) / -2
    );

  left:50%;

  transform:translateX(-50%);

  z-index:1;

  display:inline-flex;

  align-items:center;

  height:var(--op-legend-h);

  padding:0 16px;

  background:var(--op-lilac);

  color:#fff;

  border-radius:999px;

  font-size:13px;

  font-weight:600;

  white-space:nowrap;
}


/* ===============================================================
   Card content
================================================================ */

.op-card-body{
  display:flex;
  flex-direction:column;

  flex:1;

  padding:
    36px
    32px
    32px;
}


.op-card-title{
  margin:0;

  min-height:53px;

  font-size:21px;

  font-weight:600;

  line-height:1.25;

  letter-spacing:-.3px;
}


.op-desc{
  margin:14px 0 0;

  min-height:70px;

  font-size:15px;

  line-height:1.55;

  color:var(--op-ink-soft);
}


/* ===============================================================
   Prijzen
================================================================ */

.op-price-block{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  width:100%;
}


.op-price{
  margin:26px 0 0;

  display:flex;

  align-items:baseline;

  gap:2px;
}


.op-amt{
  font-size:44px;

  font-weight:600;

  letter-spacing:-1.8px;

  line-height:1;

  color:var(--op-primary);
}


.op-per{
  font-size:16px;

  font-weight:400;

  color:var(--op-ink-soft);
}


/* ===============================================================
   FFP ledenkorting
================================================================ */

.op-save-row{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  margin-top:10px;

  min-height:26px;
}


.op-save-context{
  display:none;

  padding:5px 10px;

  border:1px solid var(--op-lilac);

  border-radius:999px;

  font-size:12px;

  line-height:1.2;

  font-weight:600;

  color:var(--op-primary);

  background:transparent;

  white-space:nowrap;
}


.op-save-context.is-on{
  display:inline-flex;

  align-items:center;
}


/* ===============================================================
   Prijsnotitie
================================================================ */

.op-billed{
  margin:9px 0 0;

  min-height:38px;

  font-size:13.5px;

  line-height:1.5;

  color:var(--op-ink-soft);
}


/* ===============================================================
   Features
================================================================ */

.op-feats{
  list-style:none;

  margin:22px 0 0 !important;

  padding:0 !important;

  display:flex !important;

  flex-direction:column;

  gap:12px;

  justify-content:flex-start;

  align-items:stretch;

  align-self:start;

  width:100%;

  height:auto !important;

  min-height:0;
}


.op-feats li{
  display:flex !important;

  align-items:flex-start;

  gap:11px;

  margin:0 !important;

  padding:0 !important;

  min-height:0 !important;

  font-size:15px;

  line-height:1.45;

  font-weight:500;

  color:var(--op-ink);
}


.op-feats li + li{
  margin-top:0 !important;
}


.op-feats li::before,
.op-feats li::after{
  margin:0;
}


.op-feats svg{
  flex:none;

  width:18px;
  height:18px;

  margin:2px 0 0;

  color:var(--op-blue);
}


.op-feats li span{
  display:block;

  margin:0 !important;

  padding:0 !important;

  line-height:1.45;
}


/* ===============================================================
   Ruimte tot CTA
================================================================ */

.op-spacer{
  flex:1;

  min-height:26px;
}


/* ===============================================================
   Primary CTA
================================================================ */

.op-pricing a.op-cta,
.op-pricing a.op-cta:link,
.op-pricing a.op-cta:visited{
  display:block;

  width:100%;

  text-align:center;

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-family:inherit;

  font-size:16px;

  line-height:1.2;

  font-weight:600 !important;

  color:#fff !important;

  background:var(--op-primary);

  border:0;

  border-radius:var(--op-r-btn);

  padding:20px 24px;

  cursor:pointer;

  box-shadow:none;

  transition:
    background .15s,
    color .15s,
    box-shadow .15s;
}


.op-pricing a.op-cta:hover{
  background:#fff;

  color:var(--op-primary) !important;

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;

  box-shadow:
    inset 0 0 0 2px var(--op-primary);
}


.op-pricing a.op-cta:focus,
.op-pricing a.op-cta:active{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;
}


/* ===============================================================
   Ghost CTA
================================================================ */

.op-pricing a.op-cta--ghost,
.op-pricing a.op-cta--ghost:link,
.op-pricing a.op-cta--ghost:visited{
  background:transparent;

  color:var(--op-primary) !important;

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;

  box-shadow:
    inset 0 0 0 2.5px var(--op-primary);
}


.op-pricing a.op-cta--ghost:hover{
  background:var(--op-primary);

  color:#fff !important;

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;

  box-shadow:none;
}


/* ===============================================================
   USP's
================================================================ */

.op-usps{
  margin:0;

  display:grid;

  grid-auto-flow:column;

  grid-auto-columns:
    minmax(0,1fr);

  background:var(--op-usp-bg);

  border-radius:var(--op-r-block);

  overflow:hidden;
}


.op-usp{
  display:flex;

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

  gap:16px;

  padding:20px 24px;

  min-width:0;

  box-shadow:
    inset -1px 0 0 rgba(15,0,50,.08);
}


.op-usps > .op-usp:last-child{
  box-shadow:none;
}


.op-usp-icon{
  flex:none;

  width:52px;
  height:52px;

  border-radius:15px;

  display:inline-flex;

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

  background:#fff;

  color:var(--op-blue);
}


.op-usp-text{
  display:flex;

  flex-direction:column;

  gap:3px;

  min-width:0;
}


.op-usp-title{
  font-size:16px;

  font-weight:600;

  line-height:1.3;

  letter-spacing:-.2px;
}


.op-usp-sub{
  font-size:14px;

  line-height:1.35;

  color:var(--op-ink-soft);
}


/* ===============================================================
   BTW
================================================================ */

.op-btw{
  margin:18px 0 0;

  text-align:center;

  font-size:13px;

  color:var(--op-ink-soft);
}


/* ===============================================================
   Secties
================================================================ */

.op-section{
  padding:64px 0 0;
}


.op-h2{
  margin:0;

  font-size:28px;

  font-weight:600;

  letter-spacing:-.6px;
}


.op-sub{
  margin:10px 0 0;

  max-width:660px;

  font-size:16px;

  line-height:1.55;

  color:var(--op-ink-soft);
}


/* ===============================================================
   Optionele modules
================================================================ */

.op-modlist{
  margin-top:26px;

  display:grid;

  gap:12px;
}


.op-mod{
  display:flex;

  align-items:center;

  gap:24px;

  padding:22px 28px;

  margin:0;

  background:
    linear-gradient(
      180deg,
      var(--op-card-top) 0%,
      var(--op-card-bot) 100%
    );

  border-radius:var(--op-r-block);
}


.op-mod-main{
  flex:1;

  min-width:0;
}


.op-mod-name{
  display:block;

  font-size:17px;

  font-weight:600;

  letter-spacing:-.2px;
}


.op-mod-why{
  display:block;

  margin-top:3px;

  font-size:14.5px;

  line-height:1.45;

  color:var(--op-ink-soft);
}


.op-mod-price{
  font-size:20px;

  font-weight:600;

  white-space:nowrap;

  letter-spacing:-.5px;
}


.op-mod-price small{
  font-size:13px;

  font-weight:400;

  letter-spacing:0;

  color:var(--op-ink-soft);
}


/* ===============================================================
   Optional module CTA
================================================================ */

.op-pricing a.op-mod-cta,
.op-pricing a.op-mod-cta:link,
.op-pricing a.op-mod-cta:visited{
  display:inline-flex;

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

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-family:inherit;

  font-size:15px;

  line-height:1.2;

  font-weight:600 !important;

  color:#fff !important;

  background:var(--op-primary);

  border-radius:var(--op-r-btn);

  padding:14px 30px;

  white-space:nowrap;

  box-shadow:none;

  transition:
    background .15s,
    color .15s,
    box-shadow .15s;
}


.op-pricing a.op-mod-cta:hover{
  background:#fff;

  color:var(--op-primary) !important;

  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;

  box-shadow:
    inset 0 0 0 2px var(--op-primary);
}


.op-pricing a.op-mod-cta:focus,
.op-pricing a.op-mod-cta:active{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;

  font-weight:600 !important;
}


/* ===============================================================
   Tablet
================================================================ */

@media (max-width:1000px){

  .op-cards{
    grid-template-columns:
      1fr
      1fr;
  }


  .op-card:first-child{
    grid-column:1 / -1;
  }


  .op-card:first-child .op-card-title,
  .op-card:first-child .op-desc{
    min-height:0;
  }

}


/* ===============================================================
   Mobile
================================================================ */

@media (max-width:760px){

  .op-wrap{
    padding-left:20px;
    padding-right:20px;
  }


  /* Controls */

  .op-controls{
    flex-direction:column;

    align-items:stretch;

    gap:20px;
  }


  /* Segmented control */

  .op-pricing .op-seg{
    width:100%;

    display:flex;
  }


  .op-pricing .op-seg button{
    flex:1 1 50%;

    width:50%;

    display:flex !important;

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

    text-align:center !important;

    padding-left:12px !important;
    padding-right:12px !important;
  }

/* =============================================================
   Billing mobile

   Op mobiel geen tooltip/callout.
   De groene pill staat gewoon onder de toggle.
============================================================== */

.op-billing-wrap{
  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  margin-left:0;

  padding-top:0;

  gap:6px;
}


.op-billing{
  display:flex;

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

  gap:8px;

  font-size:14px;

  color:var(--op-ink-soft);

  white-space:nowrap;
}


.op-billing-save{
  position:static;

  display:inline-flex;
  align-items:center;

  margin:0;

  padding:4px 7px;

  border-radius:999px;

  background:#E8F4EB;

  color:#1D6B32;

  font-size:10.5px;

  line-height:1.2;

  font-weight:600;

  white-space:nowrap;

  /*
   * Verborgen state
   * De pill blijft in de DOM zodat opacity/transform
   * netjes geanimeerd kunnen worden.
   */
  opacity:0;

  visibility:hidden;

  transform:translateY(-5px);

  pointer-events:none;

  transition:
    opacity .20s ease,
    transform .24s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .24s;
}


.op-billing-save::after{
  display:none;
}


.op-billing-save.is-on{
  opacity:1;

  visibility:visible;

  transform:translateY(0);

  transition:
    opacity .20s ease,
    transform .24s cubic-bezier(.22, 1, .36, 1),
    visibility 0s;

  pointer-events:auto;
}


/* Cards */

.op-cards{
  grid-template-columns:1fr;
}


.op-card:first-child{
  grid-column:auto;
}


.op-card-title,
.op-desc,
.op-billed{
  min-height:0;
}


.op-card-body{
  padding:
    28px
    24px
    24px;
}


/* FFP */

.op-save-row{
  gap:7px;
}


.op-save-context{
  font-size:11.5px;
}


/* Features */

.op-feats{
  gap:10px;
}


/* USP's */

.op-usps{
  grid-auto-flow:row;

  grid-auto-columns:auto;

  grid-template-columns:1fr;
}


.op-usp{
  justify-content:flex-start;

  padding:18px 22px;

  box-shadow:
    inset 0 -1px 0 rgba(15,0,50,.08);
}


.op-usps > .op-usp:last-child{
  box-shadow:none;
}


/* Optionele modules */

.op-mod{
  flex-wrap:wrap;

  gap:16px 20px;

  padding:22px;
}


.op-mod-main{
  flex:1 0 100%;
}


.op-mod-cta{
  margin-left:auto;
}

}


/* ===============================================================
   Extra kleine schermen
================================================================ */

@media (max-width:420px){

  .op-billing{
    gap:6px;

    font-size:13px;
  }


  .op-pricing button.op-switch{
    flex-basis:44px;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }


  .op-pricing button.op-switch[aria-checked="true"]::after{
    transform:translateX(16px);
  }


  .op-billing-save{
    font-size:10px;

    padding:4px 6px;
  }

}


/* ===============================================================
   Desktop card alignment
================================================================ */

@media (min-width:1001px){

  @supports (grid-template-rows:subgrid){

    .op-cards{
      grid-template-rows:
        auto
        auto
        auto
        auto
        auto
        1fr
        auto;
    }


    .op-cards .op-card{
      grid-row:span 7;

      display:grid;

      grid-template-rows:subgrid;
    }


    .op-cards .op-card-body{
      grid-row:span 7;

      display:grid;

      grid-template-rows:subgrid;
    }


    .op-cards .op-card-title,
    .op-cards .op-desc,
    .op-cards .op-price-block,
    .op-cards .op-billed,
    .op-cards .op-spacer{
      min-height:0;
    }


    .op-cards .op-feats{
      align-self:start;

      height:max-content !important;

      min-height:0;
    }


    .op-cards .op-feats li{
      align-self:auto;

      height:auto !important;

      min-height:0 !important;
    }

  }

}


/* ===============================================================
   Reduced motion
================================================================ */

@media (prefers-reduced-motion:reduce){

  .op-pricing *{
    transition:none !important;
  }

}