/* ============================================================
   WCL MOBILE LAYOUT
   Clean Mobile Controller
   Loaded LAST
   ============================================================ */

@media (max-width:768px) and (hover: none) and (pointer: coarse){

/* ============================================================
   GLOBAL SAFARI INPUT FIX
   ============================================================ */

input,
textarea{
  font-size:16px;
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container{
  display:block;
  width:100%;
}

/* ============================================================
   MAIN
   ============================================================ */

.main{
  margin-left:0;
  width:100%;
  padding:100px 1rem 2rem;
  min-height:100vh;

  display:block;              /* 🔥 viktig ändring */
  position:relative;

  overflow-anchor:none;       /* 🔥 stoppar scroll jump */
}
/* ============================================================
   MOBILE HEADER
   ============================================================ */

.mobile-header{

  position:fixed;
  top:0;
  left:0;
  right:0;

  height:64px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:0 14px;

  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.08);

  z-index:var(--z-header);

}

/* ============================================================
   HAMBURGER
   ============================================================ */

.mobile-menu-btn{

  position:fixed;
  top:16px;
  right:14px;

  width:44px;
  height:44px;

  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.4);

  color:#fff;
  font-size:20px;

  display:flex;
  align-items:center;
  justify-content: center;
   
  backdrop-filter:blur(6px);

  z-index:1000;

}

/* ============================================================
   SIDEBAR DRAWER
   ============================================================ */

.sidebar{
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:var(--z-sidebar);
}

.sidebar.open{
  transform:translateX(0);
}

/* ============================================================
   HERO
   ============================================================ */

.hero{

  margin-top:16px;

  width:100%;
  height:30vh;

  border-radius:16px;
  overflow:hidden;

}

.hero img{
  width:100%;
  height:100%;
  object-fit: contain;
  object-position:center;
}

.search-panel{
  position:fixed;
  top:64px;
  left:0;
  right:0;

  width:100%;

  padding:12px 14px;

  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.08);

  z-index:var(--z-search);
}
/* ============================================================
   SEARCH — MOBILE CLEAN (NO CAPSULE UI)
   ============================================================ */
   /* 🔥 HIDE DESKTOP SEARCH IN MOBILE */
.search-panel{
  display:none !important;
}

/* ============================================================
   PLACEHOLDER
   ============================================================ */

#searchInput::placeholder{
  color:rgba(255,255,255,0.4);
}

/* ============================================================
   SEARCH PANEL — REMOVE DOUBLE CONTAINER
   ============================================================ */
/* 🔥 DÖDA OUTER BORDER */
.search-panel::before,
.search-panel::after{
  display:none !important;
}

/* ============================================================
   REMOVE INNER CAPSULE BORDER
   ============================================================ */

.search-capsule{

  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
   
/* ============================================================
   FILTERS (HIDDEN ON MOBILE)
   ============================================================ */

.zone-filters{
  display:none;
}

.zone-divider{
  display:none;
}

/* ============================================================
   MAP BUTTON
   ============================================================ */

.zone-map{
  display:flex;
}

.map-btn{

  height:42px;
  padding:0 14px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);

  background:#050505;
  color:rgb(var(--global));

  font-size:.85rem;
  font-weight:600;

  cursor:pointer;

}

/* ============================================================
   CLEAR BUTTON
   ============================================================ */

.zone-clear{
  display:flex;
}

.clear-btn{

  height:42px;
  padding:0 14px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);

  background:#050505;
  color:rgba(255,255,255,.7);

  font-size:.85rem;

  cursor:pointer;

}

/* ============================================================
   MAP
   ============================================================ */

#mapView{

display:block;

  width:100%;
  height:55vh;

  border-radius:16px;
  overflow:hidden;

  touch-action:pan-x pan-y;

}

/* ============================================================
   LOGIN SCALE MOBILE
   ============================================================ */

.login-box{

  width:92%;
  max-width:360px;

  padding:28px 24px;

}

.login-title{
  font-size:28px;
}

.login-brand{
  font-size:26px;
}

.login-fields input{
  font-size:16px;
}

}

/* ============================================================
   STORE GRID MOBILE — FIXED (FLUID CARDS)
   ============================================================ */

@media (max-width:768px) and (hover: none) and (pointer: coarse){

  #storeGrid{
    grid-template-columns:repeat(2,1fr);
    gap:1.3rem .8rem;
    padding-inline:.5rem;
  }

  /* 🔥 CRITICAL — REMOVE FIXED WIDTH FROM DESKTOP */
  .store-card{
    width:100%;
    height:auto;
  }

}

/* ============================================================
   TOUCH FEEDBACK
   ============================================================ */

@media (max-width:768px) and (hover: none) and (pointer: coarse){

  .store-card:active{
    transform:translateY(-2px) scale(.985);

    box-shadow:
      0 0 0 1px rgba(var(--global),.45),
      0 14px 28px rgba(0,0,0,.85);
  }

}

/* ============================================================
   MOBILE ACTIONS — HIDDEN BY DEFAULT
   ============================================================ */

.mobile-actions{
  display:none;
}
/* ============================================================
   MOBILE ACTION BUTTONS (MAP + CLEAR)
   ============================================================ */

@media (max-width:768px) and (hover: none) and (pointer: coarse){

  /* dölj map + clear i kapseln */
  .zone-map,
  .zone-clear{
    display:none;
  }

  /* ny rad med knappar */
  .mobile-actions{
    display:flex;
    gap:10px;
    margin-top:8px;
  }

  .mobile-actions button{
    flex:1;
    height:42px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);

    background:#050505;

    font-size:.9rem;
    font-weight:600;
  }

  .mobile-actions .map-btn{
    color:rgb(var(--global));
  }

  .mobile-actions .clear-btn{
    color:rgba(255,255,255,.7);
  }

}


/* ============================================================
   MOBILE FILTER BAR — ANIMATED (CLEAN)
   ============================================================ */

.mobile-filters{

  display:flex;
  justify-content:space-between;

  margin-top:12px;

  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);

  /* 🔥 START STÄNGD */
  max-height:0;
  opacity:0;
  overflow:hidden;

  padding:0;

  transform:translateY(-6px);

  transition:
    max-height .25s ease,
    opacity .2s ease,
    transform .2s ease,
    padding .2s ease;

}

/* OPEN */
.mobile-filters.open{

  max-height:60px;
  opacity:1;

  padding:10px 0;

  transform:translateY(0);

}

/* ============================================================
   ITEMS
   ============================================================ */

.filter-item{

  flex:1;

  text-align:center;

  font-size:.9rem;
  font-weight:500;

  color:rgba(255,255,255,0.6);

  background:none;
  border:none;

  padding:6px 0;

  position:relative;

  transition:color .15s ease;

}

/* ACTIVE */
.filter-item.active{
  color:rgb(var(--global));
}

/* UNDERLINE */
.filter-item.active::after{

  content:"";

  position:absolute;
  bottom:-10px;
  left:20%;
  right:20%;

  height:2px;
  border-radius:2px;

  background:rgb(var(--global));
}

/* ============================================================
   FILTER BUTTON (MATCH MAP)
   ============================================================ */

.filter-btn{

  height:42px;
  padding:0 14px;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);

  background:#050505;

  font-size:.9rem;
  font-weight:600;

  color:rgba(255,255,255,.75);

  cursor:pointer;

  transition:all .15s ease;

}

/* HOVER / TAP */
.filter-btn:active{
  transform:scale(.97);
}

/* ACTIVE */
.filter-btn.active{
  color:rgb(var(--global));
  border-color:rgba(var(--global),0.6);
  box-shadow:0 0 0 1px rgba(var(--global),0.25);
}

.mobile-actions{
  align-items:center;
}

/* ============================================================
   HIDE SEARCH ICON ON DESKTOP (HARD LOCK)
   ============================================================ */

@media (min-width:769px){
  #searchSubmitMobile{
    display:none !important;
  }
}
/* ============================================================
   MENU MODE (SIDEBAR FOCUS)
   ============================================================ */

.menu-open .hero,
.menu-open .search-panel,
.menu-open .mobile-actions,
.menu-open #storeGrid,
.menu-open #mapView,
.menu-open .results-toolbar{
  display:none !important;
}

/* OPTIONAL: gör sidebar full-height känsla */
.menu-open .sidebar{
  z-index:2000;
}

.search-submit-mobile {
  display: none;
}

/* ============================================================
   SEARCH ICON (WCL SVG)
   ============================================================ */

.search-submit-mobile{
  display:flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;

  background:none !important;
  border:none !important;

  color:rgb(var(--global));   /* 🔥 styr SVG */
  cursor:pointer;
}

/* SVG styling */
.search-submit-mobile svg{
  width:22px;
  height:22px;
}

/* stroke via currentColor */
.search-submit-mobile .ink{
  fill:none;
  stroke:currentColor;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* interaction */
.search-submit-mobile:active{
  transform:scale(.9);
  opacity:.7;
}


/* ============================================================
   MOBILE SEARCH (ISOLATED)
   ============================================================ */

@media (max-width:768px) and (hover: none) and (pointer: coarse){

  .mobile-search{
    margin-top:6px;
  }

  .mobile-search-input-wrap{
    position:relative;
    width:100%;
  }

  #searchInputMobile{

    width:100%;
    height:48px;

    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.04);

    padding:0 44px 0 16px;

    font-size:16px;

    color:rgb(var(--global));
    caret-color:rgb(var(--global));

  }

  #searchInputMobile::placeholder{
    color:rgba(255,255,255,0.4);
  }

  .mobile-search .search-submit-mobile{

    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);

    width:36px;
    height:36px;

  }

}

/* ============================================================
   HARD DESKTOP LOCK (NO MOBILE LEAK)
   ============================================================ */

@media (min-width:769px){

  .mobile-search{
    display:none !important;
  }

  #searchInputMobile{
    display:none !important;
  }

  #searchSubmitMobileNew{
    display:none !important;
  }

}