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

/* HEADER (mobile menu) */

@media (max-width:900px){
  .header-container{
    position:relative;
  }

  .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{
    display:none;
  }

  .categories-arrow{
    width:32px;
    height:32px;
    font-size:18px;
  }

  .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:10px;
  }

  /* Sort bar */
  .sort-bar{
    justify-content:flex-start;
    gap:8px;
  }
  .sort-select{
    flex:1;
  }
}

/* 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-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{
    font-size:18px;
    line-height:1.3;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:14px;
  }
  #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-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{
    font-size:18px;
    line-height:1.3;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:14px;
  }
  #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-button,
  .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-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{
    font-size:18px;
    line-height:1.3;
    font-weight:600;
  }
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    font-size:14px;
  }
  #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;
    line-clamp:3;
    -webkit-line-clamp:3;
    height:auto;
  }

  .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: op smalle schermen veilig binnen viewport + safe area */
@media (max-width:900px){
  #login-modal.auth-modal.active,
  #signup-modal.auth-modal.active{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      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{
    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{
    max-height:min(88dvh, calc(100dvh - 16px));
  }
  .auth-title{
    font-size:20px;
  }
}