/* =========================================================
   IZLEK — PAGES V3 CLEAN
   Cleaned page-level styles for home, listings, details,
   profile, route maps and route builder.
   ========================================================= */

/* =========================================================
   01. Base page flow
   ========================================================= */

.page{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  gap:14px;
  overflow:hidden;
}

.stack-list{
  display:grid;
  gap:10px;
  min-width:0;
}

.table-wrap{
  height:100%;
  min-height:0;
  overflow:auto;
}

.table-wrap::-webkit-scrollbar,
.community-grid::-webkit-scrollbar,
.detail-body.scrollable::-webkit-scrollbar,
.detail-content-scroll::-webkit-scrollbar,
.profile-sections::-webkit-scrollbar{
  width:6px;
}

.table-wrap::-webkit-scrollbar-thumb,
.community-grid::-webkit-scrollbar-thumb,
.detail-body.scrollable::-webkit-scrollbar-thumb,
.detail-content-scroll::-webkit-scrollbar-thumb,
.profile-sections::-webkit-scrollbar-thumb{
  background:rgba(30,79,75,.18);
  border-radius:999px;
}

/* =========================================================
   02. Home
   ========================================================= */

.home-page{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr);
  gap:14px;
  overflow:hidden;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:clamp(26px,4vw,58px);
  border:1px solid rgba(20,20,20,.08);
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(197,138,82,.20), transparent 32%),
    radial-gradient(circle at 12% 0%, rgba(30,79,75,.13), transparent 36%),
    linear-gradient(135deg,#fffdf8,#eee9df);
  box-shadow:none !important;
}

.hero:after{
  content:"";
  position:absolute;
  right:-160px;
  bottom:-190px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,20,20,.08),transparent 62%);
  pointer-events:none;
}

.izlek-hero{
  padding:clamp(30px,4.5vw,64px);
}

.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:start;
}

.hero-copy{
  max-width:780px;
}

.hero-copy h1{
  max-width:840px;
}

.hero .lead,
.hero-copy .lead{
  max-width:720px;
  font-size:15px;
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}

.hero-panel{
  width:min(520px,34vw);
  min-width:420px;
  align-self:stretch;
  max-height:100%;
  padding:14px;
  border:1px solid rgba(20,20,20,.09);
  border-radius:30px;
  background:rgba(255,255,255,.62);
  box-shadow:0 24px 70px rgba(25,20,14,.075);
}

.hero-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.hero-route-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:12px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:20px;
  background:#fffdf8;
}

.hero-route-card strong{
  display:block;
  font-size:14px;
  font-weight:900;
}

.hero-route-card span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}

.hero-map-shell{
  height:360px;
  overflow:hidden;
  border-radius:24px;
}

.hero-map-shell .leaflet-map{
  min-height:360px;
}

.home-lower{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:14px;
  overflow:hidden;
}

.home-lower > .card{
  min-height:0;
  overflow:hidden;
}

.home-lower .stack-list{
  min-height:0;
  overflow:auto;
  padding-right:4px;
}

/* =========================================================
   03. Community listing
   ========================================================= */

.communities-page{
  grid-template-rows:auto minmax(0,1fr);
}

.community-scroll-shell{
  position:relative;
  height:100%;
  min-height:0;
  overflow:hidden;
  padding-right:14px;
}

.community-scroll-shell .community-grid,
.community-grid{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:330px;
  gap:18px;
  overflow:auto;
  overflow-x:hidden;
  padding-right:6px;
}

.community-scroll-shell .community-grid::-webkit-scrollbar,
.community-grid::-webkit-scrollbar{
  width:0;
  height:0;
}

.custom-scroll-rail{
  position:absolute;
  top:4px;
  right:2px;
  bottom:4px;
  width:7px;
  border-radius:999px;
  background:rgba(30,79,75,.10);
  pointer-events:none;
}

.custom-scroll-thumb{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:34px;
  border-radius:999px;
  background:rgba(30,79,75,.36);
  opacity:1;
  transform:translateY(0);
}

.community-card{
  height:330px;
  min-height:330px;
  overflow:hidden;
  display:grid;
  grid-template-rows:138px minmax(0,1fr);
  border:1px solid rgba(20,20,20,.075);
  border-radius:28px;
  background:rgba(255,253,248,.92);
  box-shadow:
    0 18px 42px rgba(20,20,20,.055),
    inset 0 1px 0 rgba(255,255,255,.74);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.community-card:hover{
  transform:translateY(-3px);
  border-color:rgba(30,79,75,.16);
  box-shadow:
    0 24px 62px rgba(20,20,20,.085),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.community-cover{
  position:relative;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.community-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  pointer-events:none;
}

.community-cover.moto{ background-image:url('/assets/covers/moto.svg'); }
.community-cover.atv{ background-image:url('/assets/covers/atv.svg'); }
.community-cover.bike{ background-image:url('/assets/covers/bike.svg'); }
.community-cover.walk{ background-image:url('/assets/covers/walk.svg'); }
.community-cover.car{ background-image:url('/assets/covers/car.svg'); }
.community-cover.mixed{
  background-image:linear-gradient(135deg,#1e4f4b,#c58a52);
}

.community-body{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:10px;
  padding:18px 18px 16px;
}

.community-body h3{
  margin:0;
  font-size:22px;
  line-height:1;
  letter-spacing:-.055em;
}

.community-body .sub{
  display:block;
  margin-top:2px;
  max-width:92%;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
  font-weight:720;
}

.community-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:0;
}

.card-bottom{
  margin-top:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding-top:8px;
}

.card-bottom .btn,
.card-bottom button{
  white-space:nowrap;
}

.avatar-stack{
  display:flex;
  align-items:center;
}

.avatar-stack span{
  width:28px;
  height:28px;
  margin-left:-7px;
  border:2px solid #fffdf8;
  border-radius:999px;
  background:#1e4f4b;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:900;
}

.avatar-stack span:first-child{
  margin-left:0;
}

/* =========================================================
   04. Detail pages
   ========================================================= */

.detail-page{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.detail-side,
.detail-main{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(20,20,20,.08);
  border-radius:28px;
  background:rgba(255,253,248,.82);
  box-shadow:none !important;
}

.detail-side{
  position:sticky;
  top:0;
  align-self:start;
}

.detail-main{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.detail-main .detail-body{
  min-height:520px;
}

.detail-head{
  padding:18px;
  border-bottom:1px solid rgba(20,20,20,.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(197,138,82,.13), transparent 48%),
    rgba(255,253,248,.86);
}

.detail-backbar{
  margin-bottom:14px;
}

.detail-eyebrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.detail-title{
  margin:12px 0 10px;
  font-size:34px;
  line-height:.96;
}

.detail-body{
  min-width:0;
  padding:18px;
}

.detail-body.scrollable{
  max-height:calc(100vh - 230px);
  overflow:auto;
  padding-right:12px;
}

.detail-content-scroll{
  max-height:calc(100vh - 230px);
  overflow:auto;
  padding-right:8px;
}

.tabs{
  display:flex;
  gap:7px;
  padding:13px 15px;
  border-bottom:1px solid rgba(20,20,20,.08);
  background:rgba(255,253,248,.66);
  overflow-x:auto;
}

.tabs button{
  height:36px;
  border:1px solid transparent;
  border-radius:999px;
  padding:0 12px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
}

.tabs button.active{
  color:#1e4f4b;
  background:rgba(30,79,75,.09);
  border-color:rgba(30,79,75,.16);
  box-shadow:0 8px 18px rgba(30,79,75,.07);
}

.detail-dashboard{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:16px;
}

.detail-dashboard .card{
  min-height:0;
}

.detail-mini-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.mini-stat,
.detail-mini-meta .mini-stat{
  border:1px solid rgba(20,20,20,.08);
  border-radius:16px;
  background:rgba(255,255,255,.58);
  padding:11px;
}

.mini-stat b,
.detail-mini-meta .mini-stat b{
  display:block;
  color:var(--ink);
  font-size:21px;
  line-height:1;
  font-weight:920;
  letter-spacing:-.045em;
}

.mini-stat span,
.detail-mini-meta .mini-stat span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:740;
}

.panel-fill{
  min-height:540px;
}

.timeline{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.tl{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
}

.tl-dot{
  width:36px;
  height:36px;
  border-radius:14px;
  background:rgba(30,79,75,.10);
  color:#1e4f4b;
  display:grid;
  place-items:center;
  font-weight:900;
}

.tl-box{
  border:1px solid rgba(20,20,20,.08);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  padding:11px;
}

.tl-box b{
  font-size:12px;
  font-weight:900;
}

.tl-box p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  font-weight:640;
}

.role-list{
  display:grid;
  gap:9px;
  margin-top:12px;
}

.role-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:16px;
  background:rgba(255,255,255,.62);
}

.role-row b{
  display:block;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
}

.role-row span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:720;
}

.route-memory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

/* =========================================================
   05. Events / routes / split pages
   ========================================================= */

.events-page,
.routes-page{
  grid-template-rows:auto minmax(0,1fr);
}

.split-main{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  overflow:hidden;
}

.split-main > .card,
.split-main > .mapbox,
.split-main > .leaflet-map{
  height:100%;
  min-height:0;
}

.events-page > .card.table-wrap{
  height:100%;
  min-height:0;
}

.editorial-metric{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.editorial-metric p{
  margin:18px 0 0;
  color:var(--ink);
  font-size:15px;
  line-height:1.45;
  font-weight:760;
  letter-spacing:-.02em;
}

/* =========================================================
   06. Route Builder layout and side panel
   ========================================================= */

.builder-layout{
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}

.builder-side{
  max-height:calc(100vh - 174px);
  overflow:auto;
}

.builder-map{
  min-height:680px;
}

.builder-hint-card{
  padding:16px;
  border:1px solid rgba(30,79,75,.12);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(197,138,82,.16), transparent 42%),
    rgba(255,253,248,.86);
}

.builder-hint-card h3{
  margin:8px 0 6px;
  font-size:18px;
  letter-spacing:-.04em;
}

.builder-hint-card p{
  margin:0;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

.builder-option-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.builder-option{
  height:38px;
  border:1px solid rgba(30,79,75,.12);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#17231f;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  text-align:left;
  padding:0 14px;
}

.builder-option.active{
  background:rgba(30,79,75,.10);
  color:#1e4f4b;
  border-color:rgba(30,79,75,.22);
}

/* =========================================================
   07. Account / login legacy blocks
   ========================================================= */

.login-card{
  background:
    radial-gradient(circle at 0% 0%, rgba(197,138,82,.13), transparent 40%),
    #fffdf8;
}

.login-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:12px 0;
}

.login-switch button{
  height:36px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:var(--muted);
  font-weight:850;
}

.login-switch button.active{
  color:#fff;
  background:#151515;
  border-color:#151515;
}

.account-mini{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  margin-top:12px;
  padding:11px;
  border-radius:16px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(20,20,20,.08);
}

.account-page{
  height:100%;
  min-height:0;
  overflow:hidden;
}

.account-shell{
  height:100%;
  min-height:0;
  display:grid;
  gap:14px;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}

.account-hero{
  padding:24px;
}

.account-hero h1{
  margin-top:10px;
  font-size:clamp(32px,3vw,52px);
}

.account-grid{
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  overflow:hidden;
}

.account-list{
  min-height:0;
  overflow:auto;
}

/* =========================================================
   08. Profile page
   ========================================================= */

.profile-page{
  height:100%;
  min-height:0;
  overflow:hidden;
}

.profile-shell{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:16px;
  overflow:hidden;
}

.profile-top{
  border:1px solid rgba(20,20,20,.07);
  border-radius:30px;
  background:
    radial-gradient(circle at 88% 12%, rgba(197,138,82,.18), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(30,79,75,.11), transparent 38%),
    linear-gradient(135deg, rgba(255,253,248,.92), rgba(238,233,223,.86));
  padding:24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.profile-avatar-block{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.profile-avatar-xl,
.profile-avatar-upload{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#0f2f2c,#1e4f4b);
  color:#fff;
  box-shadow:none;
}

.profile-avatar-xl,
.profile-avatar-upload span{
  font-size:28px;
  font-weight:950;
}

.profile-avatar-upload{
  cursor:pointer;
  position:relative;
}

.profile-avatar-upload img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-avatar-upload input{
  display:none;
}

.profile-title{
  margin:10px 0 0;
  font-size:clamp(38px,4vw,66px);
  line-height:.9;
  letter-spacing:-.075em;
}

.profile-sections{
  min-height:0;
  overflow:auto;
  display:grid;
  gap:10px;
  padding-right:6px;
}

.profile-collapse{
  overflow:hidden;
  border:1px solid rgba(20,20,20,.07);
  border-radius:24px;
  background:rgba(255,253,248,.72);
}

.profile-collapse-head{
  width:100%;
  min-height:66px;
  padding:14px 18px;
  border:0;
  background:
    radial-gradient(circle at 94% 0%, rgba(197,138,82,.12), transparent 36%),
    rgba(255,253,248,.80);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  text-align:left;
}

.profile-collapse-head > div{
  display:flex;
  align-items:center;
  gap:12px;
}

.profile-collapse-head h3{
  font-size:20px;
  letter-spacing:-.045em;
}

.profile-collapse-head > span{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(30,79,75,.08);
  color:#1e4f4b;
  font-size:18px;
  font-weight:950;
  transition:.16s ease;
}

.profile-collapse.active .profile-collapse-head > span{
  transform:rotate(180deg);
}

.profile-collapse-body{
  display:none;
  padding:0 18px 18px;
}

.profile-collapse.active .profile-collapse-body{
  display:grid;
  gap:14px;
}

.profile-collapse .field input,
.profile-collapse .field select,
.profile-collapse .field textarea{
  background:rgba(255,255,255,.78);
}

.profile-collapse .field textarea{
  min-height:110px;
}

.profile-collapse .grid{
  gap:12px;
}

.profile-collapse .cols-2{
  grid-template-columns:1fr 1fr;
}

.profile-collapse .cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* =========================================================
   09. Discover / after
   ========================================================= */

.after-page,
.discover-page{
  grid-template-rows:minmax(0,.9fr) minmax(0,1fr);
}

.placeholder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

/* =========================================================
   10. Generic maps
   ========================================================= */

.real-map,
.leaflet-map{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:24px;
  overflow:hidden;
}

.map-card{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.map-card .leaflet-map,
.map-card .real-map{
  min-height:0;
}

#fuelMap{
  min-height:520px;
}

.map-shell{
  position:relative;
  overflow:hidden;
}

.map-shell.is-fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:800;
  border-radius:0 !important;
}

.map-shell.is-fullscreen .real-map,
.map-shell.is-fullscreen .leaflet-map{
  height:100vh !important;
  border-radius:0 !important;
}

.map-layer-control{
  display:flex;
  gap:8px;
}

.map-layer-btn{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  color:#17231f;
  font-weight:800;
  font-size:12px;
  border-radius:999px;
  padding:8px 12px;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.map-layer-btn.active{
  background:#1e4f4b;
  color:#fff;
}

/* =========================================================
   11. Route map / POI services
   ========================================================= */

.route-detail-v2 .detail-main{
  overflow:hidden;
}

.route-map-layout{
  display:block;
  height:calc(100vh - 245px);
  min-height:520px;
  padding:16px;
}

.route-map-panel{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.route-map-shell{
  position:relative;
  flex:1;
  height:100%;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(30,79,75,.14);
  border-radius:24px;
  background:#eef3ec;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.route-map-shell .real-map,
.route-map-shell .mapbox,
.route-map-shell #routeMap,
.route-map-shell #routeBuilderMap{
  width:100%;
  height:100%;
  min-height:520px;
  border:0;
  border-radius:0;
}

.route-map-toolbar{
  position:absolute;
  z-index:700;
  top:16px;
  left:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  border:1px solid rgba(30,79,75,.14);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 44px rgba(15,23,42,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.map-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(30,79,75,.12);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(247,244,238,.88);
  color:#17231f;
  font-size:12px;
  font-weight:850;
  letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.map-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.map-chip.active{
  background:#1e4f4b;
  color:#fff;
  border-color:#1e4f4b;
  box-shadow:0 14px 30px rgba(30,79,75,.25);
}

.route-map-expand{
  position:absolute;
  top:14px;
  right:14px;
  z-index:720;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:14px;
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.route-map-layout.is-fullscreen{
  position:fixed;
  inset:0;
  z-index:800;
  display:block;
  width:100vw;
  height:100vh;
  min-height:0;
  padding:0;
  margin:0;
  background:#eef3ec;
  border-radius:0;
}

.route-map-layout.is-fullscreen .route-map-panel,
.route-map-layout.is-fullscreen .route-map-shell,
.route-map-layout.is-fullscreen .real-map,
.route-map-layout.is-fullscreen .mapbox,
.route-map-layout.is-fullscreen #routeMap,
.route-map-layout.is-fullscreen #routeBuilderMap{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:0;
}

.route-map-layout.is-fullscreen .route-poi-panel{
  display:none !important;
}

.route-map-layout.is-fullscreen .route-map-toolbar{
  top:18px;
  left:18px;
  z-index:820;
}

.route-map-layout.is-fullscreen .route-map-expand{
  top:18px;
  right:18px;
  z-index:830;
}

body.route-map-open{
  overflow:hidden;
}

body.route-map-open .topbar,
body.route-map-open .app-topbar,
body.route-map-open header,
body.route-map-open .site-header,
body.route-map-open .brandbar,
body.route-map-open .main-header{
  display:none !important;
}

.route-poi-panel{
  min-height:0;
}

.route-poi-scroll{
  flex:1;
  min-height:0;
  overflow-y:scroll;
  padding:16px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,79,75,.34) rgba(30,79,75,.08);
}

.route-poi-scroll::-webkit-scrollbar{
  width:12px;
}

.route-poi-scroll::-webkit-scrollbar-track{
  background:rgba(30,79,75,.08);
  border-radius:999px;
}

.route-poi-scroll::-webkit-scrollbar-thumb{
  background:rgba(30,79,75,.36);
  border:3px solid rgba(255,255,255,.75);
  border-radius:999px;
}

.route-poi-scroll .poi-card{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.route-poi-scroll .poi-card + .poi-card{
  margin-top:10px;
}

.route-poi-scroll .poi-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:rgba(30,79,75,.10);
  color:#1e4f4b;
  font-size:21px;
}

.route-poi-scroll .poi-content{
  min-width:0;
  flex:1;
}

.route-poi-scroll .poi-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.route-poi-scroll .poi-row strong{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.02em;
}

.route-poi-scroll .poi-distance{
  color:#1e4f4b;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.route-poi-scroll .poi-sub,
.route-poi-scroll .poi-location{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.poi-count:empty{
  display:none;
}

/* =========================================================
   12. Builder floating controls and stats
   ========================================================= */

.builder-top-controls,
.builder-bottom-controls{
  position:absolute;
  z-index:730;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.builder-top-controls{
  top:14px;
  right:14px;
}

.builder-bottom-controls{
  left:16px;
  bottom:16px;
  z-index:730;
}

.builder-icon-tool{
  position:relative !important;
  width:42px;
  height:42px;
  min-width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(15,23,42,.13);
  border-radius:15px;
  background:rgba(255,253,248,.88);
  color:#17231f;
  font-size:18px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
  user-select:none;
  box-shadow:
    0 14px 30px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.builder-icon-tool:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.96);
  border-color:rgba(30,79,75,.22);
  box-shadow:
    0 18px 38px rgba(15,23,42,.17),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.builder-icon-tool:active{
  transform:translateY(0) scale(.97);
}

.builder-icon-tool.active{
  background:#1e4f4b;
  color:#fff;
  border-color:#1e4f4b;
  box-shadow:
    0 18px 38px rgba(30,79,75,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.builder-icon-tool.danger{
  color:#8f2f24;
}

.builder-icon-tool.danger:hover{
  background:rgba(255,248,246,.96);
  color:#7f241c;
  border-color:rgba(143,47,36,.26);
}

.builder-icon-tool.route-map-expand{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:15px !important;
  border:1px solid rgba(15,23,42,.13) !important;
  background:rgba(15,23,42,.84) !important;
  color:#fff !important;
  font-size:18px !important;
  box-shadow:
    0 16px 34px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.builder-icon-tool.route-map-expand:hover{
  background:rgba(15,23,42,.92) !important;
}

.route-map-layout.is-fullscreen .builder-top-controls{
  top:18px;
  right:18px;
  z-index:840;
}

.route-map-layout.is-fullscreen .builder-bottom-controls{
  left:18px;
  bottom:18px;
  z-index:840;
}

.route-map-layout.is-fullscreen .builder-icon-tool{
  width:44px;
  height:44px;
  min-width:44px;
}

.builder-map-stats{
  position:absolute;
  z-index:710;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border:1px solid rgba(30,79,75,.14);
  border-radius:999px;
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 44px rgba(15,23,42,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.builder-map-stats span{
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.builder-map-stats b{
  color:#1e4f4b;
  font-size:12px;
  font-weight:950;
}

.route-map-layout.is-fullscreen .builder-map-stats{
  bottom:18px;
  z-index:810;
}

/* smart tooltips */

.builder-icon-tool[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  z-index:850;
  width:max-content;
  max-width:180px;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.94);
  color:#fff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.01em;
  opacity:0;
  pointer-events:none;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  transition:opacity .16s ease, transform .16s ease;
}

.builder-icon-tool[data-tip]::before{
  content:"";
  position:absolute;
  z-index:850;
  border:6px solid transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}

.builder-icon-tool[data-tip]::after{
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
}

.builder-icon-tool[data-tip]::before{
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%);
  border-top-color:rgba(15,23,42,.94);
}

.builder-icon-tool[data-tip-pos="bottom"]::after{
  top:calc(100% + 10px);
  bottom:auto;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
}

.builder-icon-tool[data-tip-pos="bottom"]::before{
  top:calc(100% + 4px);
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  border-top-color:transparent;
  border-bottom-color:rgba(15,23,42,.94);
}

.builder-icon-tool[data-tip-pos="bottom-left"]::after{
  top:calc(100% + 10px);
  bottom:auto;
  right:0;
  left:auto;
  transform:translateY(-4px);
}

.builder-icon-tool[data-tip-pos="bottom-left"]::before{
  top:calc(100% + 4px);
  bottom:auto;
  right:14px;
  left:auto;
  transform:none;
  border-top-color:transparent;
  border-bottom-color:rgba(15,23,42,.94);
}

.builder-icon-tool[data-tip-pos="top-right"]::after{
  left:0;
  bottom:calc(100% + 10px);
  transform:translateY(4px);
}

.builder-icon-tool[data-tip-pos="top-right"]::before{
  left:14px;
  bottom:calc(100% + 4px);
  transform:none;
  border-top-color:rgba(15,23,42,.94);
}

.builder-icon-tool[data-tip]:hover::after,
.builder-icon-tool[data-tip]:hover::before{
  opacity:1;
}

.builder-icon-tool[data-tip]:hover::after{
  transform:translateX(-50%) translateY(0);
}

.builder-icon-tool[data-tip-pos="bottom"]:hover::after{
  transform:translateX(-50%) translateY(0);
}

.builder-icon-tool[data-tip-pos="bottom-left"]:hover::after,
.builder-icon-tool[data-tip-pos="top-right"]:hover::after{
  transform:translateY(0);
}

/* =========================================================
   13. Leaflet zoom controls — Izlek floating style
   ========================================================= */

.route-map-shell .leaflet-bar,
.route-map-shell .leaflet-control-zoom{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.route-map-shell .leaflet-control-zoom{
  background:transparent !important;
  display:flex !important;
  flex-direction:column;
  gap:8px;
  padding:0 !important;
  margin-right:14px !important;
  margin-bottom:14px !important;
}

.route-map-shell .leaflet-control-zoom a{
  width:42px !important;
  height:42px !important;
  line-height:40px !important;
  border:1px solid rgba(15,23,42,.13) !important;
  border-radius:15px !important;
  background:rgba(255,253,248,.88) !important;
  color:#17231f !important;
  font-size:19px !important;
  font-weight:950 !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.route-map-shell .leaflet-control-zoom a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(30,79,75,.22) !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,.17),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.route-map-shell .leaflet-control-zoom-in,
.route-map-shell .leaflet-control-zoom-out{
  border-bottom:0 !important;
}

.route-map-layout.is-fullscreen .route-map-shell .leaflet-control-zoom{
  margin-right:18px !important;
  margin-bottom:18px !important;
}

/* =========================================================
   14. Fuel list
   ========================================================= */

.fuel-list-card{
  position:relative;
  overflow:hidden;
  max-height:430px;
  padding:0;
}

.fuel-list-scroll{
  height:100%;
  max-height:430px;
  overflow-y:scroll;
  padding:28px 28px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,79,75,.34) rgba(30,79,75,.10);
}

.fuel-list-scroll::-webkit-scrollbar{
  width:10px;
}

.fuel-list-scroll::-webkit-scrollbar-track{
  background:rgba(30,79,75,.10);
  border-radius:999px;
  margin:12px 0;
}

.fuel-list-scroll::-webkit-scrollbar-thumb{
  background:rgba(30,79,75,.34);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}

.fuel-list-scroll::-webkit-scrollbar-thumb:hover{
  background:rgba(30,79,75,.52);
  border:3px solid transparent;
  background-clip:content-box;
}

/* =========================================================
   15. Toast safety
   ========================================================= */

/* =========================================================
   15. Toast
   ========================================================= */

#toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:11000;

  max-width:360px;
  min-height:46px;

  display:flex;
  align-items:center;

  padding:13px 16px;

  border:1px solid rgba(30,79,75,.16);
  border-radius:18px;

  background:
    radial-gradient(circle at 0% 0%, rgba(30,79,75,.10), transparent 44%),
    rgba(255,253,248,.96);

  color:#17231f;

  box-shadow:
    0 18px 44px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.78);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
  line-height:1.35;

  opacity:0;
  pointer-events:none;

  transform:translateY(10px) scale(.98);
  transition:
    opacity .18s ease,
    transform .18s ease;
}

#toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* =========================================================
   16. Responsive
   ========================================================= */

@media(max-width:1320px){
  .community-grid,
  .community-scroll-shell .community-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .home-lower{
    grid-template-columns:1fr;
  }
}

@media(max-width:1180px){
  .hero-inner{
    grid-template-columns:1fr;
  }

  .hero-panel{
    width:100%;
    min-width:0;
  }
}

@media(max-width:1080px){
  .detail-page{
    grid-template-columns:1fr;
  }

  .detail-side{
    position:relative;
    top:auto;
  }

  .detail-body.scrollable,
  .detail-content-scroll{
    max-height:none;
    overflow:visible;
  }

  .detail-dashboard{
    grid-template-columns:1fr;
  }

  .builder-layout{
    grid-template-columns:1fr;
  }

  .builder-side{
    max-height:none;
  }

  .builder-map{
    min-height:560px;
  }

  .account-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  .profile-top{
    flex-direction:column;
  }

  .profile-avatar-block{
    align-items:flex-start;
  }

  .profile-collapse .cols-2,
  .profile-collapse .cols-3{
    grid-template-columns:1fr;
  }
}

@media(max-width:860px){
  .hero-inner{
    grid-template-columns:1fr;
  }

  .hero-actions{
    justify-content:flex-start;
  }

  .community-grid,
  .community-scroll-shell .community-grid,
  .placeholder-grid,
  .route-memory-grid{
    grid-template-columns:1fr;
  }

  .cols-4,
  .cols-3,
  .cols-2,
  .cols-even{
    grid-template-columns:1fr;
  }

  .detail-mini-meta{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .hero{
    border-radius:26px;
    padding:24px;
  }

  .community-card{
    height:330px;
    min-height:330px;
    grid-template-rows:126px minmax(0,1fr);
  }

  .detail-side,
  .detail-main{
    border-radius:24px;
  }

  .detail-title{
    font-size:30px;
  }

  .detail-main .detail-body{
    min-height:auto;
  }

  .builder-map{
    min-height:460px;
  }
}

/* =========================================================
   17. MODAL SYSTEM / AUTH GATE
   ========================================================= */

#modalLayer{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:rgba(15,18,20,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#modalLayer.active{
  display:flex;
}

#modalLayer > *{
  position:relative;
  z-index:10001;
}

#modalClose{
  z-index:10002;
}

/* Auth gate modal */

#modalLayer.auth-gate-open #modalBody{
  width:min(560px, calc(100vw - 72px));
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}

#modalLayer.auth-gate-open #modalBody > *{
  width:100%;
}

.auth-gate-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin:0 0 16px;
  padding:6px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:999px;
  background:rgba(247,244,238,.76);
}

.auth-gate-tabs button{
  height:38px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.auth-gate-tabs button.active{
  background:#1e4f4b;
  color:#fff;
  box-shadow:0 12px 24px rgba(30,79,75,.22);
}

.auth-gate-single{
  width:100%;
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:28px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(197,138,82,.14), transparent 42%),
    rgba(255,253,248,.90);
}

.auth-gate-single h2{
  margin:10px 0 10px;
  font-size:32px;
  line-height:.95;
  letter-spacing:-.065em;
}

.auth-gate-single .lead{
  margin:0 0 20px;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
}

.auth-gate-single .field{
  width:100%;
  margin-top:14px;
}

.auth-gate-single .field label{
  margin-bottom:7px;
}

.auth-gate-single input{
  width:100%;
  height:48px;
  padding:0 15px;
  border-radius:16px;
}

.auth-gate-single .btn{
  align-self:flex-start;
  margin-top:18px;
  min-height:44px;
  padding-inline:20px;
}

@media(max-width:820px){
  #modalLayer{
    padding:18px;
  }

  #modalLayer.auth-gate-open #modalBody{
    width:calc(100vw - 36px);
    min-height:auto;
  }

  .auth-gate-single{
    min-height:auto;
    padding:22px;
  }
}

.routes-preview-layout{
  height:100%;
  min-height:0;
  padding:0;
}

.routes-preview-shell{
  min-height:0;
}

.routes-preview-shell .leaflet-map,
.routes-preview-shell #routesPreviewMap{
  min-height:0;
  height:100%;
  border-radius:0;
}

.routes-preview-controls{
  z-index:730;
}

/* Routes preview service markers */

.izlek-service-marker{
  background:transparent;
  border:0;
}

.izlek-service-marker-inner{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(30,79,75,.18);
  border-radius:14px;
  background:rgba(255,253,248,.94);
  box-shadow:
    0 12px 28px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:17px;
}

.service-popup strong{
  display:block;
  font-size:13px;
  font-weight:900;
  color:#17231f;
}

.service-popup span{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.routes-preview-pulse-dot{
  filter:drop-shadow(0 0 10px rgba(30,79,75,.45));
}

/* =========================================================
   PAGE TRANSITIONS
   ========================================================= */

#viewFrame{
  will-change:opacity, transform;
}

#viewFrame.view-enter{
  animation:izlekViewEnter .22s ease both;
}

@keyframes izlekViewEnter{
  from{
    opacity:.72;
    transform:translateY(6px) scale(.997);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.communities-title{
  margin-top:8px;
  padding-left:4px;
}