/* MeerPakkers Clean Mobile Home v1
   Locked visie:
   MP+ logo -> zoekbalk -> categorieën -> top 3 deals -> toon meer acties.
   Geen filters op home. Geen uitlegblokken op mobiel.
*/

.mp-clean-mobile-home{
  display:none;
}
/* MeerPakkers Clean Mobile Home v1
   Locked visie:
   MP+ logo -> zoekbalk -> categorieën -> top 3 deals -> toon meer acties.
   Geen filters op home. Geen uitlegblokken op mobiel.
*/

.mp-clean-mobile-home{
  display:none;
}

@media(max-width:768px){
  :root{
    --mp-green:#06483d;
    --mp-gold:#c9952d;
    --mp-bg:#f6efe4;
    --mp-card:#fffdf8;
    --mp-border:#ded0b9;
    --mp-muted:#746b61;
  }

  html,body{
    overflow-x:hidden;
    background:var(--mp-bg)!important;
  }

  /* Verberg bestaande desktop/home experimenten op mobiel */
  body:not(.mp-legal-page) > *:not(.mp-clean-mobile-home):not(.mp-site-footer):not(.mp-legal-footer):not(.mp-cookie-banner):not(script):not(style){
    display:none!important;
  }

  .mp-clean-mobile-home{
    display:block;
    min-height:100vh;
    padding:22px 16px 30px;
    background:
      radial-gradient(circle at 20% 0%, rgba(201,149,45,.12), transparent 34%),
      linear-gradient(180deg,#fbf6ed 0%,#f2e7d7 100%);
    color:var(--mp-green);
  }

  .mp-clean-mobile-header{
    display:flex;
    align-items:center;
    gap:13px;
    padding:4px 0 18px;
    border-bottom:1px solid rgba(6,72,61,.18);
  }

  .mp-logo-mark{
    width:76px;
    height:76px;
    border-radius:24px;
    background:linear-gradient(145deg,#0a5a4c,#04382f);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:950;
    letter-spacing:-1.6px;
    box-shadow:0 18px 32px rgba(6,72,61,.18);
    flex:0 0 auto;
  }

  .mp-logo-mark span{
    color:#f0c15a;
    margin-left:1px;
  }

  .mp-logo-lines{
    color:var(--mp-gold);
    font-size:21px;
    line-height:1.02;
    font-weight:950;
    letter-spacing:-.45px;
  }

  .mp-logo-name{
    color:var(--mp-green);
    font-size:34px;
    line-height:.98;
    font-weight:950;
    letter-spacing:-1.1px;
    margin-top:2px;
  }

  .mp-clean-search{
    margin:20px 0 16px;
    display:flex;
    align-items:center;
    gap:11px;
    min-height:56px;
    border-radius:999px;
    border:1px solid var(--mp-border);
    background:var(--mp-card);
    padding:0 17px;
    box-shadow:0 12px 28px rgba(6,72,61,.055);
  }

  .mp-clean-search span{
    font-size:21px;
    opacity:.78;
  }

  .mp-clean-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--mp-green);
    font-size:16px;
    font-weight:700;
  }

  .mp-clean-search input::placeholder{
    color:#8b8176;
    font-weight:700;
  }

  .mp-clean-categories{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:0 0 24px;
  }

  .mp-clean-categories a{
    text-decoration:none;
    min-width:0;
    border-radius:18px;
    background:rgba(255,253,248,.86);
    border:1px solid var(--mp-border);
    min-height:70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:var(--mp-green);
    font-weight:950;
    box-shadow:0 9px 20px rgba(6,72,61,.04);
  }

  .mp-clean-categories a:first-child{
    background:#eaf4ec;
    border-color:#bfd8c6;
  }

  .mp-clean-categories a span{
    font-size:11.5px;
    line-height:1.05;
    text-align:center;
  }



  /* Optie C: bovenste categorieën platter + twee rustige zoekroutes eronder */
  .mp-clean-categories{
    margin-bottom:10px;
  }

  .mp-clean-categories a{
    min-height:54px;
    border-radius:16px;
    flex-direction:row;
    gap:5px;
    font-size:17px;
  }

  .mp-clean-categories a span{
    font-size:10.5px;
    line-height:1;
  }

  .mp-clean-discovery{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0 0 22px;
  }

  .mp-clean-discovery a{
    min-width:0;
    min-height:42px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-decoration:none;
    color:var(--mp-green);
    background:rgba(255,253,248,.9);
    border:1px solid var(--mp-border);
    box-shadow:0 8px 18px rgba(6,72,61,.035);
    font-weight:950;
    font-size:14px;
    line-height:1;
  }

  .mp-clean-discovery a span{
    display:block;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mp-clean-section-title{
    margin:0 0 14px;
  }

  .mp-clean-section-title h2{
    margin:0 0 5px;
    color:#111;
    font-size:27px;
    line-height:1.05;
    letter-spacing:-.55px;
    font-weight:950;
  }

  .mp-clean-section-title p{
    margin:0;
    color:var(--mp-muted);
    font-size:15px;
    line-height:1.35;
    font-weight:650;
  }

  /* DealCard styling moved to css/deal-card-component.css. */

  .mp-clean-more{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:15px 0 0;
    min-height:56px;
    border-radius:18px;
    background:var(--mp-card);
    border:1px solid var(--mp-border);
    color:var(--mp-green);
    text-decoration:none;
    font-size:18px;
    font-weight:950;
    box-shadow:0 10px 24px rgba(6,72,61,.045);
  }

  @media(max-width:390px){
    .mp-logo-mark{
      width:66px;
      height:66px;
      border-radius:21px;
      font-size:26px;
    }
    .mp-logo-lines{
      font-size:18px;
    }
    .mp-logo-name{
      font-size:29px;
    }
    .mp-clean-categories{
      gap:6px;
    }
    .mp-clean-categories a{
      min-height:64px;
      border-radius:16px;
    }
    .mp-clean-categories a span{
      font-size:10.5px;
    }
  }
}


/* MP+ Logo Clean System v13
   Oude logo-overrides verwijderd. Eén schone regelset.
   Fix: logo is breed, dus width bepaalt de zichtbare hoogte.
*/
.mp-clean-mobile-header{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding-left:0 !important;
  transform:translateX(-18px) !important;
}

.mp-clean-mobile-header .mp-logo-mark{
  width:176px !important;
  height:104px !important;
  margin-right:-22px !important;
  display:block !important;
  flex:0 0 176px !important;
  background-image:url('/assets/brand/mpplus-logo-balanced-v12.png') !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center right !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  color:transparent !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
}

.mp-clean-mobile-header .mp-logo-mark span{
  display:none !important;
}

.mp-clean-mobile-header .mp-logo-copy{
  margin-left:0 !important;
  flex:0 1 auto !important;
}


/* Header Polish v14 - alleen tekstblok dichter naar logo */
.mp-clean-mobile-header .mp-logo-copy{
  margin-left:-10px !important;
}


/* MeerPakkers Final Polish v15 */

/* 1. Home: categorieknoppen mogen niet standaard actief/opgelicht zijn */
body.home-cleanup .mp-clean-categories a,
body.home-cleanup .mp-clean-categories a.active,
body.home-cleanup .mp-clean-categories a.is-active,
body.home-cleanup .mp-clean-categories a[aria-current="page"]{
  background:var(--mp-card) !important;
  border-color:var(--mp-border) !important;
  color:var(--mp-green) !important;
  box-shadow:0 10px 22px rgba(6,72,61,.04) !important;
}

/* 3. Logo groter, zonder tekst/slogan te wijzigen */
.mp-clean-mobile-header{
  transform:translateX(-20px) !important;
}

.mp-clean-mobile-header .mp-logo-mark{
  width:188px !important;
  height:112px !important;
  flex-basis:188px !important;
  margin-right:-28px !important;
  background-size:100% auto !important;
}

.mp-clean-mobile-header .mp-logo-copy{
  margin-left:-10px !important;
}


/* Home Load More v20 */
.mp-clean-more{
  appearance:none;
  border:1px solid var(--mp-border);
  cursor:pointer;
  text-align:center;
}

.mp-clean-more.is-disabled,
.mp-clean-more:disabled{
  opacity:.62;
  cursor:default;
}


/* Home Load More v21 - knop over volledige cardbreedte */
.mp-clean-topdeals .mp-clean-more{
  width:100% !important;
  max-width:none !important;
  min-height:56px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  margin:14px 0 0 !important;
}


/* v22 Header Cleanup - divider verwijderen */
hr,
.mp-header-divider,
.mp-logo-divider,
.header-divider{
  display:none !important;
}


/* v23 Real Header Divider Fix
   De lijn tussen logo/header en zoekbalk bleek geen <hr>, maar border/pseudo styling.
*/
.mp-clean-mobile-header,
.mp-clean-mobile-header::before,
.mp-clean-mobile-header::after{
  border-bottom:0 !important;
  border-top:0 !important;
  box-shadow:none !important;
}

.mp-clean-mobile-home .mp-clean-mobile-header{
  margin-bottom:18px !important;
}


/* v25 Unified Back Buttons
   Categoriepagina + dealdetail dezelfde premium terugknop.
*/
.mp-back,
.mp-detail-header > a,
.mp-detail-header a:first-child{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  flex:0 0 42px !important;
  display:block !important;
  border-radius:16px !important;
  background-color:rgba(255,253,248,.92) !important;
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5L8 12L15 19' stroke='%2306483d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
  border:1px solid rgba(222,208,185,.9) !important;
  box-shadow:0 10px 24px rgba(6,72,61,.08) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
  position:relative !important;
  transform:none !important;
  text-decoration:none !important;
}

.mp-back::before,
.mp-back::after,
.mp-detail-header > a::before,
.mp-detail-header > a::after,
.mp-detail-header a:first-child::before,
.mp-detail-header a:first-child::after{
  content:none !important;
  display:none !important;
}


/* Home Search Filter v26 */
.mp-clean-empty-state{
  border:1px solid var(--mp-border);
  border-radius:22px;
  background:var(--mp-card);
  padding:22px 18px;
  color:var(--mp-green);
  box-shadow:0 14px 30px rgba(6,72,61,.055);
}

.mp-clean-empty-state strong{
  display:block;
  font-size:20px;
  font-weight:950;
  margin-bottom:4px;
}

.mp-clean-empty-state span{
  display:block;
  color:var(--mp-muted);
  font-size:14px;
  font-weight:750;
}


/* Home Controller v31 */
.mp-clean-empty-state{
  border:1px solid var(--mp-border);
  border-radius:22px;
  background:var(--mp-card);
  padding:22px 18px;
  color:var(--mp-green);
  box-shadow:0 14px 30px rgba(6,72,61,.055);
}

.mp-clean-empty-state strong{
  display:block;
  font-size:20px;
  font-weight:950;
  margin-bottom:4px;
}

.mp-clean-empty-state span{
  display:block;
  color:var(--mp-muted);
  font-size:14px;
  font-weight:750;
}


/* v32 Footer Navigation Basis */
.mp-legal-footer{
  margin:28px 0 18px;
  padding:22px 18px 26px;
  border-top:1px solid rgba(6,72,61,.08);
  color:var(--mp-green);
  text-align:left;
}

.mp-legal-footer-brand{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:14px;
}

.mp-legal-footer-brand strong{
  font-size:22px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.6px;
}

.mp-legal-footer-brand span{
  color:var(--mp-muted);
  font-size:13px;
  font-weight:800;
}

.mp-legal-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.mp-legal-footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--mp-border);
  background:rgba(255,253,248,.76);
  color:var(--mp-green);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.mp-legal-footer small{
  display:block;
  color:var(--mp-muted);
  font-size:12px;
  font-weight:750;
}

/* v32 Legal Placeholder Pages */
.mp-legal-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(201,149,45,.12), transparent 34%),
    linear-gradient(180deg,#fbf6ed 0%,#f2e7d7 100%);
  color:var(--mp-green);
  padding:18px;
}

.mp-legal-shell{
  max-width:560px;
  margin:0 auto;
}

.mp-legal-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

.mp-legal-header h1{
  margin:0;
  font-size:30px;
  line-height:1;
  letter-spacing:-1px;
}

.mp-legal-card{
  border:1px solid var(--mp-border);
  border-radius:24px;
  background:var(--mp-card);
  padding:20px;
  box-shadow:0 16px 36px rgba(6,72,61,.07);
}

.mp-legal-card p{
  margin:0 0 12px;
  color:#2c2a27;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
}

.mp-legal-card p:last-child{
  margin-bottom:0;
}

.mp-legal-card a{
  color:var(--mp-green);
  font-weight:950;
}


/* v35 Responsive footer split
   Desktop keeps the existing green website footer.
   Mobile keeps the new legal test footer. */
@media (min-width: 761px){
  .mp-legal-footer{
    display:none !important;
  }
}

@media (max-width: 760px){
  .footer{
    display:none !important;
  }

  .mp-legal-footer-links{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
  }

  .mp-legal-footer-links a{
    justify-content:center;
    min-height:34px;
    padding:0 6px;
    white-space:nowrap;
    font-size:12px;
  }
}

/* v38 Mobile footer final polish
   Mobile-only UX polish. Desktop green footer remains untouched. */
@media (max-width: 760px){
  .mp-legal-footer{
    margin:0;
    padding:14px 16px 18px;
    border-top:1px solid rgba(6,72,61,.06);
    background:rgba(255,250,241,.58);
  }

  .mp-legal-footer-brand{
    margin-bottom:11px;
    gap:2px;
  }

  .mp-legal-footer-brand strong{
    font-size:22px;
    letter-spacing:-.7px;
  }

  .mp-legal-footer-brand span{
    font-size:12px;
    color:rgba(48,43,36,.78);
    font-weight:850;
  }

  .mp-legal-footer-links{
    grid-template-columns:repeat(5, 1fr);
    gap:7px;
    margin-bottom:10px;
  }

  .mp-legal-footer-links a{
    width:100%;
    min-height:36px;
    padding:0 4px;
    justify-content:center;
    text-align:center;
    font-size:11.5px;
    line-height:1;
    border-radius:18px;
    border-color:rgba(192,173,142,.58);
    background:rgba(255,253,248,.88);
    box-shadow:0 8px 18px rgba(6,72,61,.028);
  }

  .mp-legal-footer small{
    font-size:10.5px;
    color:rgba(48,43,36,.48);
    font-weight:650;
  }
}


/* v40 Legal content polish */
.mp-legal-card h2{
  margin:22px 0 8px;
  color:var(--mp-green);
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.35px;
}
.mp-legal-card h2:first-child{margin-top:0;}
.mp-legal-card h3{
  margin:16px 0 7px;
  color:var(--mp-green);
  font-size:16px;
  line-height:1.2;
}
.mp-legal-card ul{
  margin:0 0 14px 18px;
  padding:0;
  color:#2c2a27;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
}
.mp-legal-card li{margin:0 0 6px;}
.mp-legal-note{
  margin-top:22px!important;
  border-top:1px solid rgba(6,72,61,.10);
  padding-top:14px;
  color:#06483d!important;
}
.mp-company-block{
  border:1px solid rgba(192,173,142,.58);
  border-radius:18px;
  background:rgba(255,250,241,.72);
  padding:14px;
  margin:14px 0;
}
@media(max-width:760px){
  .mp-legal-footer-links a{font-size:10.5px;padding:0 2px;}
}


/* v41 Mobile legal pages visibility fix
   Keep mobile-only home isolation on the homepage, but never hide legal page content. */
@media(max-width:768px){
  body.mp-legal-page{
    padding:16px;
  }
  body.mp-legal-page .mp-legal-shell{
    display:block!important;
  }
}

/* Saved Deals UI v47 - mobile-first adapter */
.mp-save-deal-btn-v47{
  appearance:none;
  border:1px solid rgba(34, 84, 61, .18);
  background:rgba(255,255,255,.86);
  color:#24523d;
  border-radius:999px;
  padding:8px 10px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(26, 45, 33, .06);
}
.mp-save-deal-btn-v47.is-saved{
  background:#eef7ef;
  border-color:rgba(34, 84, 61, .28);
  color:#1f6b43;
}
.mp-save-deal-btn-v47 span{
  display:inline-block;
  transform:translateY(-.5px);
}



/* Desktop fallback: extra mobiele zoekroutes alleen in mobiele clean home-flow tonen */
@media (min-width: 769px){
  .mp-clean-discovery{
    display:none;
  }
}

/* Mobile Discovery Option B polish: keep layout, make bottom pill text fit */
@media (max-width: 768px){
  .mp-clean-discovery a{
    font-size:12px;
    gap:5px;
    padding:0 8px;
  }

  .mp-clean-discovery a span{
    letter-spacing:-.15px;
  }
}


/* v82 Home footer spacing */
@media(max-width:768px){
  body:not(.mp-legal-page) > .mp-site-footer{
    margin-top:0!important;
  }
}