/* iKash mobiele app-shell (≤900px). Desktop blijft .ikash-desktop-shell */

.ikash-mobiel-app{
  display:none;
}

/* Korte melding (fullscreen / PWA-tip) */
.ikash-mobiel-toast{
  position:fixed;
  left:50%;
  bottom:max(24px, env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(120%);
  max-width:min(92vw, 360px);
  padding:12px 16px;
  border-radius:14px;
  background:rgba(15,23,42,0.94);
  color:#f1f5f9;
  font-size:13px;
  line-height:1.4;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  z-index:300000;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .3s ease;
}

.ikash-mobiel-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:900px){
  /* Bovenkant bij overscroll: zelfde kleur als header */
  html:not(.map-root){
    background-color:#23223B;
  }

  html, body{
    overflow:hidden;
    height:100%;
    height:100dvh;
    margin:0;
  }

  .ikash-desktop-shell{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
    pointer-events:none !important;
  }

  /* Plaatsen-dropdown boven app-shell (ook bij body overflow:hidden) */
  .steden-popover.active{
    z-index:200000 !important;
  }

  .ikash-mobiel-app{
    --mobiel-chrome-row-h:56px;
    display:flex;
    flex-direction:column;
    min-height:100%;
    min-height:100dvh;
    max-height:100dvh;
    position:relative;
    z-index:1;
    background:
      /* Zachte “spot” boven het midden (iKash-blauw) */
      radial-gradient(ellipse 130% 85% at 50% -5%, rgba(59, 130, 246, 0.18) 0%, transparent 52%),
      /* Warme accent-fade rechts (oranje, subtiel) */
      radial-gradient(ellipse 75% 55% at 102% 28%, rgba(188, 105, 0, 0.14) 0%, transparent 48%),
      /* Diepte links-onder */
      radial-gradient(ellipse 85% 60% at -5% 72%, rgba(35, 34, 59, 0.45) 0%, transparent 50%),
      /* Onderkant iets lichter voor overgang naar footer */
      radial-gradient(ellipse 140% 55% at 50% 108%, rgba(30, 41, 59, 0.35) 0%, transparent 45%),
      /* Midden: lichte “gloed” */
      radial-gradient(ellipse 90% 70% at 50% 42%, rgba(100, 116, 139, 0.08) 0%, transparent 55%),
      /* Basis: verticale fade met kleurvariatie */
      linear-gradient(
        168deg,
        #06090e 0%,
        #0a1018 18%,
        #0e1622 38%,
        #0b121c 58%,
        #080d14 78%,
        #060a0f 100%
      );
    color:#f1f5f9;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    /* Safe area: inhoud onder statusbalk; shell-blauw vult via padding (border-box) */
    padding-top:env(safe-area-inset-top, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  html:fullscreen .ikash-mobiel-app,
  html:-webkit-full-screen .ikash-mobiel-app{
    padding-top:max(env(safe-area-inset-top, 0px), 28px);
  }

  /* Dunne gloedlijn: zelfde stijl boven body (onder header) en boven footer */
  .mobiel-edge-fade-line{
    flex:0 0 auto;
    height:2px;
    margin:0 12px;
    border-radius:2px;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(147,197,253,0.15) 20%,
      rgba(255,255,255,0.35) 50%,
      rgba(147,197,253,0.15) 80%,
      transparent 100%
    );
    box-shadow:0 0 12px rgba(147,197,253,0.25);
  }

  /* Header — zelfde rijhoogte als footer */
  .mobiel-app-header{
    flex:0 0 var(--mobiel-chrome-row-h);
    height:var(--mobiel-chrome-row-h);
    min-height:var(--mobiel-chrome-row-h);
    max-height:var(--mobiel-chrome-row-h);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:0 16px;
    box-sizing:border-box;
    background:linear-gradient(180deg, #23223B 0%, #1e1d36 100%);
    box-shadow:0 8px 24px rgba(35, 34, 59, 0.35);
  }

  /* Al geïnstalleerd als app: geen browser-fullscreen knop nodig */
  @media (display-mode: standalone){
    .mobiel-fullscreen-btn{
      display:none !important;
    }
  }

  .mobiel-app-logo img{
    height:26px;
    width:auto;
    display:block;
  }

  /* Logo links, acties rechts */
  .mobiel-header-right{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
  }

  /* Account staat in de footer (Mijn iKash + dropdown); header alleen logo/acties */

  .mobiel-fullscreen-btn{
    flex:0 0 auto;
    width:34px;
    height:34px;
    padding:0;
    border:none;
    border-radius:10px;
    cursor:pointer;
    color:rgba(255,255,255,0.9);
    background:rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    transition:background .15s ease, color .15s ease;
  }

  .mobiel-fullscreen-btn:hover{
    background:rgba(255,255,255,0.16);
  }

  .mobiel-fullscreen-btn:active{
    transform:scale(0.96);
  }

  .mobiel-locatie-pill{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    max-width:min(55vw, 100%);
    padding:5px 12px 5px 10px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg, #8b2942 0%, #5c1a2e 100%);
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
  }

  .mobiel-locatie-pill .fa-location-dot{
    color:#ffb4c0;
    font-size:14px;
  }

  .mobiel-locatie-pill span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobiel-locatie-chev{
    font-size:11px;
    opacity:0.85;
  }

  /* Chips (categorieën) */
  .mobiel-chips-wrap{
    flex:0 0 auto;
    padding:10px 0 6px;
    background:rgba(10,14,20,0.5);
  }

  .mobiel-chips-scroll{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:4px 16px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }

  .mobiel-chips-scroll::-webkit-scrollbar{
    height:0;
  }

  .mobiel-chip{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }

  .mobiel-chip.mobiel-chip-active{
    background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color:rgba(147,197,253,0.6);
    box-shadow:0 4px 14px rgba(37,99,235,0.35);
  }

  /* Deal-lijst */
  .mobiel-deals-scroll{
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px 14px 88px;
    -webkit-overflow-scrolling:touch;
  }

  /* Onderaan scrolllijst: triggert volgende pagina deals (IntersectionObserver) */
  .mobiel-deals-load-sentinel{
    min-height:32px;
    width:100%;
    flex:0 0 auto;
    pointer-events:none;
  }

  /* Zelfde deep-link highlight als desktop-tegels (zichtbare lijst op mobiel) */
  .mobiel-deal-row.deal-link-highlight{
    position:relative;
    z-index:2;
    outline:3px solid #e65100;
    outline-offset:2px;
    border-radius:14px;
    box-shadow:
      0 0 0 2px rgba(255, 152, 0, 0.95),
      0 0 0 6px rgba(255, 140, 0, 0.35),
      0 0 20px 6px rgba(255, 120, 0, 0.45);
    animation:ikash-mobiel-deal-link-pulse 0.5s ease-in-out 10 forwards;
  }

  @keyframes ikash-mobiel-deal-link-pulse{
    0%, 100%{
      box-shadow:
        0 0 0 2px rgba(255, 152, 0, 0.95),
        0 0 0 6px rgba(255, 140, 0, 0.35),
        0 0 20px 6px rgba(255, 120, 0, 0.45);
    }
    50%{
      box-shadow:
        0 0 0 3px rgba(255, 193, 7, 1),
        0 0 0 8px rgba(255, 152, 0, 0.5),
        0 0 28px 10px rgba(255, 140, 0, 0.65);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .mobiel-deal-row.deal-link-highlight{
      animation:none;
    }
  }

  .mobiel-deal-row{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:12px;
    margin-bottom:12px;
    padding:10px 12px;
    text-align:left;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:inherit;
    font:inherit;
    background:linear-gradient(145deg, rgba(30,41,59,0.92) 0%, rgba(15,23,42,0.95) 100%);
    box-shadow:0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
  }

  .mobiel-deal-row:active{
    transform:scale(0.99);
  }

  .mobiel-deal-row-img{
    flex:0 0 76px;
    width:76px;
    height:76px;
    border-radius:12px;
    overflow:hidden;
    background:#1e293b;
  }

  .mobiel-deal-row-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .mobiel-deal-row-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .mobiel-deal-row-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }

  .mobiel-deal-row-main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .mobiel-deal-row-title{
    font-size:17px;
    font-weight:700;
    line-height:1.25;
    color:#fff;
    margin:0;
  }

  .mobiel-deal-row-merchant{
    font-size:16px;
    font-weight:600;
    line-height:1.3;
    color:rgba(226,232,240,0.78);
    margin:0;
  }

  .mobiel-deal-row-price{
    flex:0 0 auto;
    font-size:22px;
    font-weight:800;
    color:#fff;
    white-space:nowrap;
    line-height:1.15;
    letter-spacing:-0.02em;
    align-self:flex-start;
    padding-top:1px;
  }

  .mobiel-deal-row-meta{
    font-size:12px;
    color:rgba(226,232,240,0.65);
    margin:0;
  }

  /*
   * Footer: zelfde rijhoogte als header (56px).
   * Safe area hoort alleen op .ikash-mobiel-app (padding-bottom), niet hier —
   * anders dubbele inset op beginscherm / PWA en lijkt de footer 2× zo hoog.
   */
  .mobiel-app-footer{
    flex:0 0 auto;
    position:relative;
    background:linear-gradient(180deg, #1e1d36 0%, #23223B 40%, #23223B 100%);
    padding-bottom:0;
    box-shadow:0 -12px 32px rgba(35, 34, 59, 0.45);
  }

  .mobiel-footer-inner{
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    height:var(--mobiel-chrome-row-h);
    min-height:var(--mobiel-chrome-row-h);
    max-height:var(--mobiel-chrome-row-h);
    padding:0 4px;
    box-sizing:border-box;
    gap:0;
    overflow:visible;
  }

  /* Vierde kolom: Inloggen (gast) of Mijn iKash-menu */
  .mobiel-footer-slot{
    flex:1 1 0;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:stretch;
  }
  .mobiel-footer-slot .mobiel-footer-btn{
    width:100%;
    max-width:none;
  }

  .mobiel-footer-btn{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:2px 2px;
    border:none;
    background:transparent;
    color:rgba(255,255,255,0.72);
    font-size:9px;
    font-weight:600;
    line-height:1.1;
    cursor:pointer;
    max-width:none;
    min-width:0;
    min-height:0;
  }

  .mobiel-footer-btn i{
    font-size:17px;
    opacity:0.9;
    line-height:1;
  }

  .mobiel-footer-btn.mobiel-footer-btn-active{
    color:#93c5fd;
  }

  .mobiel-footer-btn.mobiel-footer-btn-active i{
    color:#60a5fa;
  }

  .mobiel-footer-btn.mobiel-chip-dichtbij-active,
  .mobiel-footer-btn.mobiel-footer-btn-active.mobiel-dichtbij-on{
    color:#fbbf24;
  }

  .mobiel-footer-btn.mobiel-footer-btn-active.mobiel-dichtbij-on i{
    color:#f5b041;
  }

  .mobiel-footer-two-lines{
    line-height:1.08;
    text-align:center;
    font-size:8.5px;
  }

  /* Mijn iKash in footer: zelfde lay-out als Home / Dichtbij / Kaart */
  .mobiel-footer-account.ikash-user-menu{
    position:relative;
    z-index:5;
    justify-content:center;
  }
  .mobiel-footer-account:has(.ikash-user-menu-trigger[aria-expanded="true"]){
    z-index:150001;
  }
  .mobiel-footer-user-trigger{
    flex:1;
    height:100%;
    width:100%;
    min-height:0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:2px 2px;
    border:none !important;
    border-radius:10px;
    background:transparent !important;
    color:rgba(255,255,255,0.72);
    font-size:9px;
    font-weight:600;
    line-height:1.1;
    box-shadow:none !important;
    max-width:100%;
  }
  .mobiel-footer-user-trigger:hover{
    background:rgba(255,255,255,0.08) !important;
    color:#fff;
  }
  .mobiel-footer-user-trigger .fa-circle-user{
    font-size:17px;
    opacity:0.9;
    line-height:1;
  }
  .mobiel-footer-user-trigger .ikash-header-user-name{
    font-size:8px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-height:2.5em;
  }
  .mobiel-footer-user-chevron{
    display:none !important;
  }
  /* Dropdown omhoog boven de footer (fixed i.v.m. scroll/stacking) */
  .mobiel-footer-account .ikash-user-menu-dropdown{
    position:fixed;
    top:auto !important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 58px + 8px);
    right:max(8px, env(safe-area-inset-right, 0px));
    left:auto;
    width:min(280px, calc(100vw - 24px));
    z-index:150000;
    max-height:min(48vh, 320px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  @media (max-width:360px){
    .mobiel-footer-btn,
    .mobiel-footer-user-trigger{
      font-size:8px;
    }
    .mobiel-footer-user-trigger .ikash-header-user-name{
      font-size:7px;
    }
    .mobiel-footer-two-lines{
      font-size:7.5px;
    }
  }

  /* Deal modal: auth-stijl + flip (boven steden-popover) */
  .mobiel-deal-modal{
    z-index:100500 !important;
  }

  /* Verticaal (en horizontaal) centreren; backdrop vult scherm */
  .mobiel-deal-modal.active{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
    box-sizing:border-box;
  }

  .mobiel-deal-modal .auth-backdrop{
    position:absolute;
    inset:0;
    z-index:0;
  }

  /* Alleen de tegel: geen witte auth-dialog-kaart / schaduw / rand om de deal */
  .mobiel-deal-dialog{
    position:relative;
    z-index:1;
    width:min(520px, calc(100vw - 16px));
    max-width:100%;
    margin:0 !important;
    max-height:min(90dvh, 92vh, 720px);
    overflow:visible;
    display:flex;
    flex-direction:column;
    padding:0 !important;
    flex-shrink:1;
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
  }

  .mobiel-deal-dialog::before{
    content:none !important;
    display:none !important;
  }

  .mobiel-deal-modal-body{
    position:relative;
    z-index:1;
    padding:0 !important;
    overflow:auto;
    overflow-x:hidden;
    max-height:min(90vh, 720px);
    -webkit-overflow-scrolling:touch;
    background:transparent;
  }

  .mobiel-deal-modal-body .tile-wrapper{
    width:100%;
    max-width:100%;
    min-height:0;
  }

  /* Vaste hoogte: .deal-front / .deal-back zijn position:absolute — height:auto klapt in tot 0 */
  .mobiel-deal-modal-body .deal-card{
    height:min(560px, min(78vh, 78dvh)) !important;
    min-height:min(520px, min(72vh, 72dvh)) !important;
    max-height:min(560px, min(78vh, 78dvh)) !important;
    perspective:2000px;
  }

  /* Lage / smalle schermen: compactere tegel in modal */
  @media (max-height:520px){
    .mobiel-deal-modal.active{
      padding:
        max(6px, env(safe-area-inset-top, 0px))
        max(10px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(10px, env(safe-area-inset-left, 0px));
    }
    .mobiel-deal-modal-body .deal-card{
      height:min(440px, min(72vh, 70dvh)) !important;
      min-height:min(400px, min(66vh, 64dvh)) !important;
      max-height:min(440px, min(72vh, 70dvh)) !important;
    }
    .mobiel-deal-modal-body .deal-image-single,
    .mobiel-deal-modal-body .deal-images{
      height:clamp(120px, 28vh, 180px) !important;
    }
    .mobiel-deal-modal-body .deal-title-row .deal-title,
    .ikash-mobiel-lite-tile .deal-title-row .deal-title{
      font-size:18px;
    }
    .mobiel-deal-modal-body .deal-meta-sub .deal-merchant,
    .ikash-mobiel-lite-tile .deal-meta-sub .deal-merchant{
      font-size:16px;
    }
  }

  @media (max-width:380px){
    .mobiel-deal-dialog{
      width:calc(100vw - 12px);
    }
    .mobiel-deal-modal-body .deal-title-row .deal-title,
    .ikash-mobiel-lite-tile .deal-title-row .deal-title{
      font-size:19px;
    }
  }

  .mobiel-deal-modal-body .deal-card-inner{
    height:100% !important;
    min-height:100% !important;
  }

  .mobiel-deal-modal-body .deal-front,
  .mobiel-deal-modal-body .deal-back{
    position:absolute;
  }

  .mobiel-deal-modal-body .deal-image-single,
  .mobiel-deal-modal-body .deal-images{
    height:clamp(160px, 38vw, 220px) !important;
  }

  /* Afstand op voorkant tegel: body mag intern scrollen als vaste kaarthoogte tekst afsnijdt */
  .mobiel-deal-modal-body .deal-front .deal-body,
  .ikash-mobiel-lite-tile .deal-front .deal-body{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* Iets compactere verticale rhythm (titel ↔ bedrijf) dan desktop gap:10px */
    gap:5px;
    padding:12px 14px;
  }
  .mobiel-deal-modal-body .deal-front .deal-body::-webkit-scrollbar,
  .ikash-mobiel-lite-tile .deal-front .deal-body::-webkit-scrollbar{
    display:none;
  }

  /* Titel bovenaan; bedrijfsnaam + plaats + afstand direct eronder (zelfde blok) */
  .mobiel-deal-modal-body .deal-title-row,
  .ikash-mobiel-lite-tile .deal-title-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    min-width:0;
    width:100%;
    /* Extra lucht onder bedrijfsnaam/plaats vóór prijsblok (lite heeft geen description) */
    margin-bottom:10px;
  }

  .mobiel-deal-modal-body .deal-title-row .deal-title,
  .ikash-mobiel-lite-tile .deal-title-row .deal-title{
    flex:0 0 auto;
    width:100%;
    margin:0;
    font-size:21px;
    line-height:1.28;
    font-weight:600;
  }

  .mobiel-deal-modal-body .deal-meta-sub,
  .ikash-mobiel-lite-tile .deal-meta-sub{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    min-width:0;
    width:100%;
  }

  .mobiel-deal-modal-body .deal-meta-sub .deal-merchant,
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-merchant{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
  }

  .mobiel-deal-modal-body .deal-meta-sub .deal-distance,
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance{
    flex:0 0 auto;
    align-self:flex-start;
    margin:0;
    padding-top:1px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    color:#333;
  }

  .mobiel-deal-modal-body .deal-meta-sub .deal-distance i,
  .ikash-mobiel-lite-tile .deal-meta-sub .deal-distance i{
    color:#BC6900;
  }
}