/* --------------------- MEDIA  --------------------- */

/* HEADER (mobile menu) */

@media (max-width:900px){
  .ikash-header{
    min-height:0;
  }

  .header-container{
    min-height:0;
    padding:12px 0;
  }

  .header-search-wrap{
    order:3;
    flex:1 1 100%;
    max-width:none;
    align-self:center;
    height:var(--ik-header-search-height, 38px);
    min-height:var(--ik-header-search-height, 38px);
    margin:8px 0 0 20px;
  }

  .ikash-trust-bar--desktop{
    display:none;
  }

  .header-container{
    position:relative;
    display:flex;
    width:calc(100% - 20px);
    max-width:none;
  }

  .logo{
    padding-left:8px;
  }

  .city-banner{
    margin-bottom:22px;
    min-height:clamp(240px, 36vh, 320px);
    max-height:none;
  }

  .city-banner-inner{
    width:calc(100% - 20px);
  }

  .city-text{
    left:0;
    right:0;
    width:auto;
    max-width:none;
    bottom:auto;
    top:18%;
    padding:0 8px;
  }

  .city-hero-title{
    font-size:clamp(28px, 8vw, 40px);
  }

  .city-hero-lead{
    font-size:14px;
  }

  .city-hero-badges{
    gap:8px;
  }

  .city-hero-badges{
    gap:12px 18px;
  }

  .city-hero-feature-icon{
    width:40px;
    height:40px;
    font-size:15px;
    border-radius:50%;
  }

  .city-hero-feature-text strong{
    font-size:14px;
  }

  .city-hero-feature-text > span{
    font-size:12px;
  }

  .categories-wrapper{
    width:calc(100% - 20px);
  }

  .categories-panel{
    border-radius:14px;
    padding:8px 10px;
  }

  .categories-arrow.right{
    display:flex;
  }

  .sort-bar:not(.sort-bar--mobiel){
    margin-top:36px;
  }

  .menu{
    display:none;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    width:100%;
    transform:none;
    background:#23223B;
    flex-direction:column;
    align-items:center;
    padding:20px;
    gap:20px;
    z-index:20;
  }

  .menu.active{
    display:flex;
  }

  .header-buttons-desktop{
    display:none;
  }

  .menu-links{
    flex-direction:column;
    gap:20px;
  }

  .hamburger{
    display:block;
    position:relative;
    z-index:35;
  }
}

/* CATEGORY SCROLLER (phones) */

@media (max-width:600px){
  .categories-wrapper{
    bottom:12px;
  }

  .categories-arrow.right{
    display:none;
  }

  .categories-bar{
    gap:12px;
    padding-left:36px;
    padding-right:36px;
  }

  /* iPhone: allow horizontal swipe on the category bar */
  .categories-bar{
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .category-card{
    width:88px;
    height:78px;
    border-radius:18px;
    margin-top:12px;
  }

  .category-icon{
    width:26px;
    height:34px;
  }

  .category-card span{
    font-size:12px;
  }

  /* Sort bar */
  .sort-bar:not(.sort-bar--mobiel){
    width:calc(100% - 24px);
    margin-left:auto;
    margin-right:auto;
    padding:10px 0;
  }
  .sort-results-summary{
    flex:1 1 100%;
  }
  .sort-bar-controls{
    width:100%;
    justify-content:flex-start;
  }
  .sort-select{
    flex:1;
    min-width:0;
  }
}

/* TILE CONTENT DENSITY (explicit values; no scaling)
 *
 * Let op: volledige kaarten hebben .deal-title direct in .deal-body (geen .deal-title-row).
 * Alleen lite-tegels (.ikash-mobiel-lite-tile) gebruiken .deal-title-row — grotere overrides daaronder.
 * Smalle phones: @media (max-width:420px) komt ná 700px in dit bestand; zelfde .deal-title
 * moet hier ook worden gezet, anders wint 14px weer op 15/19px.
 */

@media (max-width:900px){
  .deal-image-single,
  .deal-images{
    height:190px;
  }

  .deal-front{
    --deal-image-h:190px;
    --deal-fade-extra: 22px;
  }

  .deal-card:not(.deal-card-mobiel-lite) .deal-body{
    padding:10px 12px;
    gap:0;
  }

  .ikash-mobiel-lite-tile .deal-body{
    padding:14px;
    gap:9px;
  }

  .deal-title{
    font-size:16px;
  }

  /* Mobiele app: lite-tegels (#deals) + deal-rij — groter dan algemene .deal-title hierboven */
  .ikash-mobiel-lite-tile .deal-title-row .deal-title{
    font-size:21px;
    line-height:1.28;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-merchant-line{
    font-size:15px;
    line-height:1.3;
    font-weight:500;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:inherit;
  }
  #mobiel-deals-list .mobiel-deal-row-title{
    font-size:17px;
    font-weight:700;
    line-height:1.25;
  }
  #mobiel-deals-list .mobiel-deal-row-merchant{
    font-size:16px;
    font-weight:600;
    line-height:1.3;
  }

  .deal-description{
    font-size:15px;
    line-height:1.25;
  }

  .deal-oldprice{ font-size:16px; }
  .deal-newprice{ font-size:24px; }
}

@media (max-width:700px){
  .deal-image-single,
  .deal-images{
    height:175px;
  }

  .deal-front{
    --deal-image-h:175px;
    --deal-fade-extra: 20px;
  }

  .deal-card:not(.deal-card-mobiel-lite) .deal-body{
    padding:10px 12px;
    gap:0;
  }

  .ikash-mobiel-lite-tile .deal-body{
    padding:12px;
    gap:8px;
  }

  /* Basis: alle kaarten (ook volle flip-card zonder .deal-title-row) */
  .deal-title{
    font-size:19px;
  }

  .deal-merchant,
  .deal-location{
    font-size:16px;
  }

  /* Lite-tegel: nóg iets groter (heeft .deal-title-row) */
  .ikash-mobiel-lite-tile .deal-title-row .deal-title{
    font-size:21px;
    line-height:1.28;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-merchant-line{
    font-size:15px;
    line-height:1.3;
    font-weight:500;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:inherit;
  }
  #mobiel-deals-list .mobiel-deal-row-title{
    font-size:17px;
    font-weight:700;
    line-height:1.25;
  }
  #mobiel-deals-list .mobiel-deal-row-merchant{
    font-size:16px;
    font-weight:600;
    line-height:1.3;
  }

  .deal-description{
    font-size:14px;
    line-height:1.22;
  }

  .deal-buy{
    padding:12px 14px;
    font-size:15px;
  }

  .deal-oldprice{ font-size:15px; }
  .deal-newprice{ font-size:22px; }
}

@media (max-width:420px){
  .ikash-grid{
    gap:12px;
    padding:10px 30px;
    grid-template-columns:1fr;
    justify-content:stretch;
    min-height:500px;
  }

  .deal-card{
    height:500px;
    max-height:500px;
  }

  .deal-image-single,
  .deal-images{
    height:160px;
  }

  .deal-front{
    --deal-image-h:160px;
    --deal-fade-extra: 18px;
  }

  .deal-card:not(.deal-card-mobiel-lite) .deal-body{
    padding:10px 12px;
    gap:0;
  }

  .ikash-mobiel-lite-tile .deal-body{
    padding:10px;
    gap:7px;
  }

  /* Zelfde basis als ≤700px — anders overschrijft dit blok de 19px van 700px weer met 14px */
  .deal-title{
    font-size:19px;
  }

  /* Lite-tegel blijft groter dan basis */
  .ikash-mobiel-lite-tile .deal-title-row .deal-title{
    font-size:21px;
    line-height:1.28;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-merchant-line{
    font-size:15px;
    line-height:1.3;
    font-weight:500;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:inherit;
  }
  #mobiel-deals-list .mobiel-deal-row-title{
    font-size:17px;
    font-weight:700;
    line-height:1.25;
  }
  #mobiel-deals-list .mobiel-deal-row-merchant{
    font-size:16px;
    font-weight:600;
    line-height:1.3;
  }

  .deal-description{
    font-size:15px;
    line-height:1.2;
  }

  .deal-oldprice{ font-size:14px; }
  .deal-newprice{ font-size:20px; }
}

/* IMAGE VIEWER + iPhone/Safari flip-fix */
@media (max-width:768px){
  .deal-card-inner{
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
  }
  .deal-back{
    background:#fff !important;
    background-color:#fff !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .image-viewer{
    padding:8px;
  }
  .viewer-image{
    max-width:98vw;
    max-height:92vh;
    width:auto;
    height:auto;
    object-fit:contain;
  }
}

/* Inloggen / aanmelden: zelfde ~1/3 vanaf boven als desktop; veilig binnen viewport + safe area */
@media (max-width:900px){
  #login-modal.auth-modal.active,
  #signup-modal.auth-modal.active,
  #forgot-password-modal.auth-modal.active{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:max(33vh, env(safe-area-inset-top, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    box-sizing:border-box;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    min-height:100dvh;
    min-height:100vh;
  }
  #login-modal.auth-modal.active .auth-dialog,
  #signup-modal.auth-modal.active .auth-dialog,
  #forgot-password-modal.auth-modal.active .auth-dialog{
    width:min(520px, calc(100vw - 24px));
    max-width:100%;
    max-height:min(92dvh, 92vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px));
    margin:0 auto;
    flex-shrink:0;
    align-self:center;
  }
}

@media (max-width:900px) and (max-height:520px){
  #login-modal.auth-modal.active .auth-dialog,
  #signup-modal.auth-modal.active .auth-dialog,
  #forgot-password-modal.auth-modal.active .auth-dialog{
    max-height:min(88dvh, calc(100dvh - 16px));
  }
  .auth-title{
    font-size:20px;
  }
}

/* Desktop: geen max-width-blokken actief — expliciet zelfde .deal-body als ondernemers .v6-tile */
@media (min-width: 901px){
  .deal-card:not(.deal-card-mobiel-lite) .deal-front .deal-body{
    padding:10px 12px;
    gap:0;
  }
}