/* MeerPakkers Discovery Card Component v1
   One shared mobile card contract for Providers + Kies je Meepakker.
   Provider cards now use only mp-discovery-card; legacy provider-card classes are not rendered.
   It does not touch dealcards.
*/
@media(max-width:760px){
  .mp-discovery-card-grid,
  .meepakker-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .mp-discovery-card,
  .meepakker-card{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    min-height:112px!important;
    height:112px!important;
    padding:14px!important;
    border-radius:18px!important;
    background:rgba(255,253,248,.94)!important;
    border:1px solid rgba(87,70,45,.14)!important;
    box-shadow:0 10px 26px rgba(68,51,27,.06)!important;
    color:#06483d!important;
    text-decoration:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    transform:none!important;
  }

  .mp-discovery-card::after,
  .meepakker-card::after{
    content:""!important;
    position:absolute!important;
    right:-18px!important;
    bottom:-18px!important;
    width:76px!important;
    height:76px!important;
    border-radius:50%!important;
    background:rgba(238,226,207,.74)!important;
    pointer-events:none!important;
  }

  .mp-discovery-card-main,
  .meepakker-card > div{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    min-width:0!important;
  }

  .mp-discovery-card-icon,
  .meepakker-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:13px!important;
    background:#f7edcf!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
    line-height:1!important;
  }

  .mp-discovery-card strong,
  .meepakker-card h3{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    color:#06483d!important;
    font-family:inherit!important;
    font-size:15.5px!important;
    line-height:1.08!important;
    font-weight:950!important;
    letter-spacing:-.035em!important;
  }

  .mp-discovery-card small{
    position:relative!important;
    z-index:1!important;
    margin:0!important;
    color:#7a6a58!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:850!important;
    font-style:normal!important;
  }

  .meepakker-card p{
    display:none!important;
  }

  .mp-discovery-card em,
  .meepakker-card span:last-child{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    margin-top:auto!important;
    color:#06483d!important;
    font-style:normal!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:950!important;
  }

  .mp-discovery-card:hover,
  .mp-discovery-card:focus-visible,
  .meepakker-card:hover,
  .meepakker-card:focus-visible{
    transform:none!important;
    outline:none!important;
    border-color:rgba(6,72,61,.18)!important;
  }

  .mp-discovery-card:active,
  .meepakker-card:active{
    transform:none!important;
    translate:none!important;
  }

  .mp-discovery-card,
  .meepakker-card{
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }

}

/* V19.7 Providers Desktop Cards Restore
   Desktop-only: provider discovery cards need their own card contract.
   Mobile remains locked by the existing max-width:760px rules above.
*/
@media (min-width: 761px){
  body.mp-provider-discovery-page .mp-discovery-card-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:104px!important;
    padding:20px!important;
    border-radius:22px!important;
    background:rgba(255,253,248,.96)!important;
    border:1px solid rgba(87,70,45,.14)!important;
    box-shadow:0 14px 34px rgba(68,51,27,.07)!important;
    color:#06483d!important;
    text-decoration:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    transform:none!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card::after{
    content:""!important;
    position:absolute!important;
    right:-22px!important;
    bottom:-22px!important;
    width:92px!important;
    height:92px!important;
    border-radius:50%!important;
    background:rgba(238,226,207,.70)!important;
    pointer-events:none!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card-main{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
    min-width:0!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card strong{
    display:block!important;
    margin:0!important;
    color:#06483d!important;
    font-family:inherit!important;
    font-size:22px!important;
    line-height:1.05!important;
    font-weight:950!important;
    letter-spacing:-.035em!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card small{
    display:block!important;
    margin:0!important;
    color:#7a6a58!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:850!important;
    font-style:normal!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-top:8px!important;
    padding:10px 14px!important;
    border-radius:999px!important;
    background:#0d4b3f!important;
    color:#fffaf1!important;
    font-style:normal!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:950!important;
    box-shadow:0 10px 22px rgba(6,72,61,.15)!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card:hover,
  body.mp-provider-discovery-page .mp-discovery-card:focus-visible{
    transform:translateY(-2px)!important;
    border-color:rgba(6,72,61,.20)!important;
    box-shadow:0 18px 42px rgba(68,51,27,.10)!important;
    outline:none!important;
  }
}

/* V20.4 Providers Card Polish
   Desktop-only: compact provider cards and let the CTA subtly hook into the bottom-right half circle.
   Mobile remains locked; provider data/JS remains unchanged.
*/
@media (min-width: 761px){
  body.mp-provider-discovery-page .mp-discovery-card{
    min-height:88px!important;
    padding:16px 16px!important;
    border-radius:20px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card::after{
    right:-24px!important;
    bottom:-26px!important;
    width:88px!important;
    height:88px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card-main{
    gap:6px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card strong{
    font-size:21px!important;
    line-height:1.04!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card small{
    font-size:13.5px!important;
    line-height:1.12!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-top:6px!important;
    padding:10px 15px!important;
    min-height:34px!important;
    border-radius:999px!important;
    background:#0d4b3f!important;
    color:#fffaf1!important;
    box-shadow:0 10px 22px rgba(6,72,61,.15)!important;
    font-size:0!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:950!important;
    transform:translateX(14px)!important;
    position:relative!important;
    z-index:2!important;
    white-space:nowrap!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em::before{
    content:"Bekijk deals"!important;
    font-size:13px!important;
    line-height:1!important;
  }
}

/* V12 Providers Mobile CTA Circle Polish
   Safe mobile-only polish: places the provider-card "Bekijk" CTA into the beige half circle.
   No data, JS, topbar, footer or desktop layout changes.
*/
@media(max-width:760px){
  body.mp-provider-discovery-page .mp-discovery-card{
    position:relative!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card .mp-discovery-card-main{
    position:relative!important;
    z-index:1!important;
    height:100%!important;
    padding-right:44px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    position:absolute!important;
    right:14px!important;
    bottom:14px!important;
    z-index:3!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    color:#06483d!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em::after{
    content:"›"!important;
    display:inline-block!important;
    margin-left:6px!important;
    font-size:18px!important;
    line-height:.8!important;
    font-weight:950!important;
    transform:translateY(-.5px)!important;
  }
}

/* v13 Provider CTA Circle Align
   Mini-fix only: places the provider-card CTA over/against the beige half-circle,
   matching the visual contract of the regular deal cards. No HTML/JS/data changes.
*/
@media(max-width:760px){
  body.mp-provider-discovery-page .mp-discovery-card{
    padding-right:14px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card-main{
    padding-right:58px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    position:absolute!important;
    right:10px!important;
    bottom:11px!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:72px!important;
    height:30px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#0d4b3f!important;
    color:#fffaf1!important;
    font-style:normal!important;
    font-size:11.5px!important;
    line-height:1!important;
    font-weight:950!important;
    box-shadow:0 10px 22px rgba(6,72,61,.15)!important;
    white-space:nowrap!important;
  }
}

@media(min-width:761px){
  body.mp-provider-discovery-page .mp-discovery-card{
    padding-right:154px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card-main{
    padding-right:0!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    position:absolute!important;
    right:22px!important;
    bottom:18px!important;
    z-index:3!important;
    min-width:112px!important;
    height:36px!important;
    margin:0!important;
    padding:0 16px!important;
  }
}

/* v14 Provider CTA Circle Position Hard Fix
   Regression fix after v13: the CTA lives inside .mp-discovery-card-main, so absolute positioning
   must be relative to the card, not to the text column. This keeps title/count left and CTA on the
   bottom-right circle. No JS/data/topbar/footer changes.
*/
body.mp-provider-discovery-page .mp-discovery-card{
  position:relative!important;
  overflow:hidden!important;
}

body.mp-provider-discovery-page .mp-discovery-card .mp-discovery-card-main{
  position:static!important;
  z-index:auto!important;
  min-width:0!important;
}

body.mp-provider-discovery-page .mp-discovery-card strong,
body.mp-provider-discovery-page .mp-discovery-card small{
  position:relative!important;
  z-index:2!important;
  max-width:calc(100% - 132px)!important;
}

body.mp-provider-discovery-page .mp-discovery-card em{
  position:absolute!important;
  z-index:4!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#0d4b3f!important;
  color:#fffaf1!important;
  font-style:normal!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 10px 22px rgba(6,72,61,.15)!important;
  white-space:nowrap!important;
  transform:none!important;
}

@media(min-width:761px){
  body.mp-provider-discovery-page .mp-discovery-card{
    padding:16px 150px 16px 16px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    right:18px!important;
    bottom:16px!important;
    min-width:112px!important;
    height:34px!important;
    padding:0 16px!important;
    font-size:0!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em::before{
    content:"Bekijk deals"!important;
    font-size:13px!important;
    line-height:1!important;
  }
}

@media(max-width:760px){
  body.mp-provider-discovery-page .mp-discovery-card{
    padding:14px 82px 14px 14px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card strong,
  body.mp-provider-discovery-page .mp-discovery-card small{
    max-width:100%!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    right:10px!important;
    bottom:11px!important;
    min-width:72px!important;
    height:30px!important;
    padding:0 10px!important;
    font-size:11.5px!important;
  }
}

/* v15 Provider CTA Arrow Remove
   Removes the decorative arrow from provider-card CTA only. No layout, JS, data, topbar or footer changes.
*/
body.mp-provider-discovery-page .mp-discovery-card em::after{
  content:none!important;
  display:none!important;
}

/* v16 Provider Name No-Wrap Fix
   Keeps provider names such as Budget Thuis and Prime Video on one line so all provider cards stay visually equal.
   Scoped to Providers overview only. No JS/data/topbar/footer changes.
*/
body.mp-provider-discovery-page .mp-discovery-card .mp-discovery-card-main{
  width:100%!important;
  max-width:100%!important;
}

body.mp-provider-discovery-page .mp-discovery-card strong{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

@media(min-width:761px){
  body.mp-provider-discovery-page .mp-discovery-card strong{
    max-width:calc(100% - 132px)!important;
  }
}

@media(max-width:760px){
  body.mp-provider-discovery-page .mp-discovery-card strong{
    max-width:100%!important;
  }
}

/* v17 Provider Mobile Full Name Fix
   Mobile-only: do not reserve the CTA width across the whole card. The CTA stays bottom-right,
   while provider names can use the full top row so names like Budget Thuis, Prime Video and
   hollandsnieuwe remain readable. No JS/data/topbar/footer changes.
*/
@media(max-width:760px){
  body.mp-provider-discovery-page .mp-discovery-card{
    padding:14px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card .mp-discovery-card-main{
    width:100%!important;
    max-width:100%!important;
    padding-right:0!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card strong{
    max-width:calc(100% - 4px)!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:15px!important;
    letter-spacing:-.04em!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card small{
    max-width:calc(100% - 84px)!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    right:10px!important;
    bottom:11px!important;
  }
}

/* v18 Provider Desktop Card Height + Full Name Fix
   Desktop/tablet only: make provider cards slightly taller and stop double-reserving CTA space,
   so full provider names stay visible while mobile v17 remains untouched.
*/
@media(min-width:761px){
  body.mp-provider-discovery-page .mp-discovery-card{
    min-height:102px!important;
    padding:18px 150px 18px 18px!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card .mp-discovery-card-main{
    width:auto!important;
    max-width:100%!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card strong{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card small{
    max-width:100%!important;
  }

  body.mp-provider-discovery-page .mp-discovery-card em{
    right:18px!important;
    bottom:18px!important;
  }
}