/* =========================================================
   IZLEK — COMPONENTS V2
   Serious / editorial / route-culture interface
   ========================================================= */

/* ---------- Typography primitives ---------- */

h1,
h2,
h3{
  margin:0;
  font-family:var(--display);
  color:var(--ink);
  letter-spacing:-.055em;
}

h1{
  font-size:clamp(38px,4.2vw,72px);
  line-height:.92;
  font-weight:900;
}

h2{
  font-size:clamp(24px,2vw,34px);
  line-height:1;
  font-weight:850;
}

h3{
  font-size:18px;
  line-height:1.12;
  font-weight:850;
}

.lead{
  margin:12px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  font-weight:620;
}

.muted{
  color:var(--muted);
}

.kicker{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(197,138,82,.11);
  color:#9a6532;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- Topbar V2 ---------- */

/* =========================================================
   TOPBAR — PREMIUM APP COMMAND BAR
   ========================================================= */

.topbar{
  position:relative;
  z-index:30;
  height:86px;
  width:100%;
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:12px 20px;
  background:transparent;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:8px 14px;
  z-index:-1;
  border:1px solid rgba(20,20,20,.10);
  border-radius:30px;
  background:
    linear-gradient(180deg,rgba(255,253,248,.92),rgba(246,241,231,.86));
  box-shadow:
    0 18px 42px rgba(25,20,14,.08),
    inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.top-nav-left{
  justify-self:start;
  padding-left:12px;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.top-nav a{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 18px;

  border-radius:999px;
  border:1px solid rgba(20,20,20,.07);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(197,138,82,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 0%,
      rgba(30,79,75,.12),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255,253,248,.96),
      rgba(238,233,223,.94)
    );

  color:rgba(20,20,20,.80);

  text-decoration:none;
  font-size:13px;
  font-weight:900;
  letter-spacing:-.015em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 26px rgba(25,20,14,.05);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.top-nav a:hover{
  transform:translateY(-1px);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(197,138,82,.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 0%,
      rgba(30,79,75,.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.98),
      rgba(241,236,228,.96)
    );

  border-color:rgba(20,20,20,.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 14px 30px rgba(25,20,14,.08);

  color:#111827;
}

.top-nav a.active{
  color:#082320;

  border-color:rgba(30,79,75,.24);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(197,138,82,.34),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 0%,
      rgba(30,79,75,.28),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,1),
      rgba(224,237,233,.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 0 0 1px rgba(30,79,75,.08),
    0 18px 38px rgba(30,79,75,.16);

  transform:translateY(-1px);
}

.topbar-logo{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
  min-width:154px;
}

.topbar-logo img{
  display:block;
  width:auto;
  height:56px !important;
  max-height:56px !important;
  object-fit:contain;
}

.topbar-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:12px;
  min-width:0;
}

.top-search{
  width:300px;
  height:44px;
  border:1px solid rgba(20,20,20,.10);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#111827;
  padding:0 16px;
  outline:0;
  font-size:13px;
  font-weight:780;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}

.top-search::placeholder{
  color:rgba(20,20,20,.42);
  font-weight:760;
}

.topbar .btn{
  height:44px;
  padding:0 17px;
  font-size:13px;
  font-weight:920;
}

.topbar .btn.ghost{
  background:rgba(255,255,255,.46);
  border:1px solid rgba(20,20,20,.08);
  color:rgba(20,20,20,.74);
}

.topbar .btn.ghost:hover{
  background:#fff;
  color:#111827;
  box-shadow:0 10px 24px rgba(25,20,14,.08);
}

.topbar .btn.primary{
  background:linear-gradient(135deg,#0f2f2c,#1e4f4b);
  color:#fff;
  box-shadow:0 14px 30px rgba(30,79,75,.20);
}

/* logo conflict killer */

.brand-logo{
  min-height:unset !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ---------- Layout helpers ---------- */

.grid{
  display:grid;
  gap:14px;
}

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

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

.cols-2{
  grid-template-columns:1.1fr .9fr;
}

.cols-even{
  grid-template-columns:1fr 1fr;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.filters{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

/* ---------- Cards / Surfaces ---------- */

.card,
.panel-card{
  min-width:0;
  border:1px solid rgba(20,20,20,.09);
  background:rgba(255,253,248,.72);
  border-radius:24px;
  box-shadow:none !important;
  padding:18px;
}

.panel-card{
  box-shadow:0 14px 34px rgba(25,20,14,.045);
}

.card:hover{
  box-shadow:0 22px 60px rgba(25,20,14,.075);
}

/* ---------- Buttons ---------- */

.btn{
  height:40px;
  border-radius:999px;
  padding:0 15px;
  border:1px solid rgba(20,20,20,.10);
  background:rgba(255,255,255,.70);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(25,20,14,.10);
}

.btn.primary{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#17211f,#1e4f4b);
  box-shadow:0 14px 34px rgba(30,79,75,.18);
}

.btn.primary:hover{
  box-shadow:0 18px 42px rgba(30,79,75,.25);
}

.btn.orange{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#9f5f2e,#c58a52);
  box-shadow:0 14px 34px rgba(197,138,82,.20);
}

.btn.ghost{
  background:transparent;
  border-color:transparent;
  color:rgba(20,20,20,.72);
}

.btn.ghost:hover{
  background:rgba(20,20,20,.045);
  box-shadow:none;
}

.btn.back{
  height:42px;
  padding:0 15px;
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#151515,#32302c);
  box-shadow:0 16px 34px rgba(20,20,20,.18);
}

.btn.small{
  height:34px;
  border-radius:999px;
  padding:0 11px;
  font-size:12px;
}

/* ---------- Pills / Badges ---------- */

.pill{
  height:34px;
  border-radius:999px;
  padding:0 12px;
  border:1px solid rgba(20,20,20,.09);
  background:rgba(255,255,255,.56);
  color:rgba(20,20,20,.58);
  font-weight:850;
  font-size:12px;
  cursor:pointer;
}

.pill.active{
  color:#1e4f4b;
  background:rgba(30,79,75,.09);
  border-color:rgba(30,79,75,.18);
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border-radius:999px;
  padding:0 10px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.teal{
  background:rgba(30,79,75,.10);
  color:#1e4f4b;
}

.orange{
  background:rgba(197,138,82,.13);
  color:#9a6532;
}

.green{
  background:rgba(22,163,74,.11);
  color:#15803d;
}

.blue{
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}

.purple{
  background:rgba(124,58,237,.10);
  color:#6d28d9;
}

.amber{
  background:rgba(180,83,9,.12);
  color:#92400e;
}

.red{
  background:rgba(220,38,38,.10);
  color:#b91c1c;
}

/* ---------- Metrics ---------- */

.metric{
  padding:18px;
}

.metric strong{
  display:block;
  font-size:clamp(28px,2.8vw,44px);
  line-height:.9;
  font-weight:950;
  letter-spacing:-.075em;
}

.metric span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:780;
}

/* ---------- Lists / Items ---------- */

.event-item{
  border:1px solid rgba(20,20,20,.08);
  background:rgba(255,255,255,.62);
  border-radius:18px;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.event-item.clickable{
  cursor:pointer;
}

.event-item:hover{
  box-shadow:0 14px 30px rgba(25,20,14,.07);
}

.event-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.datebox{
  width:52px;
  height:52px;
  border-radius:17px;
  background:rgba(197,138,82,.13);
  color:#9a6532;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:950;
  line-height:1;
}

.datebox small{
  display:block;
  font-size:10px;
  margin-top:4px;
}

.title-strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-weight:900;
}

.sub{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.38;
  font-weight:650;
}

/* ---------- Tables ---------- */

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

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
}

.table th{
  text-align:left;
  color:rgba(20,20,20,.45);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:0 10px;
  font-weight:900;
}

.table td{
  background:rgba(255,255,255,.66);
  border-top:1px solid rgba(20,20,20,.08);
  border-bottom:1px solid rgba(20,20,20,.08);
  padding:12px 10px;
  color:var(--ink);
  font-size:12px;
  font-weight:720;
  vertical-align:middle;
}

.table td:first-child{
  border-left:1px solid rgba(20,20,20,.08);
  border-radius:16px 0 0 16px;
}

.table td:last-child{
  border-right:1px solid rgba(20,20,20,.08);
  border-radius:0 16px 16px 0;
}

/* ---------- Forms ---------- */

.form{
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:7px;
}

.field label{
  color:rgba(20,20,20,.48);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.field input,
.field select,
.field textarea{
  width:100%;
  height:44px;
  border:1px solid rgba(20,20,20,.10);
  border-radius:15px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  padding:0 13px;
  outline:0;
  font-size:13px;
  font-weight:760;
}

.field textarea{
  height:104px;
  padding:13px;
  resize:none;
  line-height:1.5;
}

/* ---------- Modal / Toast ---------- */

.modal-layer{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(15,15,14,.48);
  backdrop-filter:blur(12px);
}

.modal-layer.active{
  display:grid;
}

.modal-card{
  width:min(92vw,640px);
  max-height:88vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  border-radius:30px;
  background:#fbfaf7;
  box-shadow:0 34px 110px rgba(0,0,0,.34);
  padding:26px;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.modal-head > div{
  display:flex;
  align-items:center;
  gap:14px;
}

.modal-head small{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 14px;
  border-radius:999px;

  background:#f3e9dd;
  color:#a36a2b;

  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;

  line-height:1;
}

.modal-head h2{
  margin:0;
}

.icon-close{
  width:40px;
  height:40px;
  border:0;
  border-radius:14px;
  background:#151515;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.toast{
  position:fixed;
  right:28px;
  bottom:26px;
  z-index:90;
  display:none;
  border-radius:18px;
  background:#151515;
  color:#fff;
  padding:14px 16px;
  font-weight:850;
  box-shadow:0 22px 60px rgba(0,0,0,.30);
}

.toast.show{
  display:block;
}

/* ---------- Auth / Register ---------- */

.auth-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-bottom:14px;
}

.auth-steps span{
  min-height:30px;
  border-radius:999px;
  background:rgba(20,20,20,.045);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
}

.auth-steps span.active{
  color:#1e4f4b;
  background:rgba(30,79,75,.10);
}

.auth-step{
  display:none;
}

.auth-step.active{
  display:block;
}

.auth-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.auth-actions .btn{
  flex:1;
}

.checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:760;
  line-height:1.45;
}

.checkline input{
  margin-top:3px;
}

.membership-card{
  padding:34px;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.membership-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.membership-head h2{
  margin:5px 0 0;
  font-size:24px;
}

.membership-tabs{
  height:42px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:4px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:16px;
  background:rgba(255,255,255,.45);
  margin-bottom:12px;
}

.membership-tabs button{
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}

.membership-tabs button.active{
  color:var(--ink);
  background:#fff;
  box-shadow:0 8px 18px rgba(25,20,14,.06);
}

.compact-auth-form,
.register-panel-form{
  gap:10px;
}

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

.elegant-field{
  gap:5px;
}

.elegant-field label{
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
}

.elegant-field input,
.elegant-field select{
  min-height:36px;
  border-radius:13px;
  font-size:13px;
  font-weight:740;
}

.interest-picker{
  display:grid;
  gap:7px;
}

.interest-picker > label{
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
}

.interest-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.interest-grid label{
  min-height:34px;
  border:1px solid rgba(20,20,20,.09);
  border-radius:13px;
  background:rgba(255,255,255,.62);
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  color:var(--ink);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.interest-grid input{
  width:14px;
  height:14px;
  accent-color:#1e4f4b;
}

.compact-consent{
  border:1px solid rgba(30,79,75,.14);
  background:rgba(30,79,75,.075);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:760;
  line-height:1.38;
}

.compact-consent input{
  margin-top:2px;
  accent-color:#1e4f4b;
}

.auth-submit{
  width:100%;
  min-height:40px;
}

/* ---------- Admin / Requests / Members ---------- */

.admin-panel{
  display:grid;
  gap:12px;
}

.request-stack{
  display:grid;
  gap:10px;
}

.request-card{
  border:1px solid rgba(20,20,20,.08);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  padding:13px;
  display:grid;
  gap:10px;
}

.request-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.request-head strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  font-weight:900;
}

.request-head span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.request-actions{
  display:flex;
  gap:8px;
}

.request-actions .btn{
  flex:1;
}

.empty-mini{
  min-height:74px;
  border-radius:18px;
  border:1px dashed rgba(20,20,20,.14);
  background:rgba(255,255,255,.42);
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
  font-weight:760;
}

.member-admin-actions{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  margin-top:12px;
}

.member-role-select{
  height:36px;
  border:1px solid rgba(20,20,20,.10);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  padding:0 10px;
  font-size:12px;
  font-weight:780;
  color:var(--ink);
}

/* ---------- Leaflet / Maps ---------- */

.real-map,
.leaflet-map{
  width:100%;
  height:100%;
  min-height:420px;
  border-radius:28px;
  overflow:hidden;
  background:#dbe3dc;
}

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

.leaflet-container{
  font-family:Inter,sans-serif;
  background:#dbe3dc;
}

.leaflet-control-zoom{
  border:none !important;
  overflow:hidden;
  border-radius:18px !important;
  box-shadow:0 14px 40px rgba(15,23,42,.12) !important;
}

.leaflet-control-zoom a{
  border:none !important;
  background:#fff !important;
  color:#141414 !important;
}

.leaflet-control-zoom a:hover{
  background:#f4f1e8 !important;
}

/* ---------- Legacy fake-map fallback ---------- */

.mapbox{
  height:100%;
  min-height:260px;
  border:1px solid rgba(20,20,20,.09);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  background:#dbe3dc;
  box-shadow:0 12px 28px rgba(25,20,14,.06);
}

.mapbox:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.36) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px);
  background-size:48px 48px;
}

.coast,
.hill,
.route-main,
.pin,
.map-label{
  display:none;
}

/* ---------- Responsive ---------- */

@media (max-width:1100px){
  .topbar{
    height:auto;
    min-height:72px;
    flex-wrap:wrap;
    padding:14px 18px;
  }

  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:space-between;
  }

  .top-nav{
    overflow-x:auto;
    max-width:100%;
    padding-bottom:2px;
  }

  .top-search{
    width:100%;
    flex:1;
  }

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

@media (max-width:720px){
  h1{
    font-size:clamp(34px,12vw,48px);
  }

  .topbar-right{
    flex-wrap:wrap;
  }

  .top-search{
    order:3;
    flex:0 0 100%;
  }

  .card,
  .panel-card{
    border-radius:20px;
    padding:15px;
  }

  .modal-card{
    border-radius:24px;
    padding:18px;
  }

  .mini-grid,
  .interest-grid,
  .member-admin-actions{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   TOPBAR LOGO FIX
   ========================================================= */

.brand-logo{
  min-height:unset !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.topbar-logo img{
  display:block;
  width:auto;
  height:46px !important;
  max-height:46px !important;
  object-fit:contain;
}

.table-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.account-dropdown-wrap{
  position:relative;
}

.account-menu-btn{
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(20,20,20,.09);
  border-radius:999px;
  background:#fffdf8;
  padding:0 13px 0 8px;
  color:var(--ink);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.account-dot{
  width:30px;
  height:30px;
  border-radius:999px;
  background:linear-gradient(135deg,#0f2f2c,#1e4f4b);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
}

.account-chevron{
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
  color:rgba(20,20,20,.55);
}

.account-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:210px;
  display:none;
  padding:8px;
  border:1px solid rgba(20,20,20,.08);
  border-radius:20px;
  background:#fffdf8;
  box-shadow:0 24px 70px rgba(25,20,14,.16);
  z-index:9999;
}

.account-dropdown.active{
  display:grid;
  gap:4px;
}

.account-dropdown button{
  height:38px;
  border:0;
  border-radius:13px;
  background:transparent;
  text-align:left;
  padding:0 11px;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.account-dropdown button:hover{
  background:rgba(30,79,75,.08);
}

.account-dropdown hr{
  width:100%;
  border:0;
  border-top:1px solid rgba(20,20,20,.08);
  margin:5px 0;
}

.account-dot{
  overflow:hidden;
}

.account-dot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.membership-card.is-login{
  min-height:360px;
}

.membership-card.is-register{
  min-height:auto;
  justify-content:flex-start;
}

.membership-card.is-login .field input{
  height:56px;
  border-radius:18px;
}

.membership-card.is-login .auth-submit{
  height:56px;
  border-radius:18px;
  margin-top:8px;
}

.topbar{
  z-index:10000;
}

.leaflet-container{
  z-index:1;
}