/* ================ MOBILE LAYOUT ================ */
@media (max-width: 768px) {
  :root {
    --leaflet-navbar-height: 56px;
    --leaflet-shell-offset: 64px;
  }

  .leaflet-navbar {
    top: 0;
    height: var(--leaflet-navbar-height);
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 var(--space-sm);
  }

  .leaflet-brand {
    min-width: 40px;
    margin-right: var(--space-md);
  }

  .brand-text {
    display: none;
  }

  .leaflet-search-container {
    margin: 0 var(--space-sm);
  }

  #leaflet-search-input {
    padding: var(--space-sm);
    font-size: 13px;
  }

  .search-btn,
  .btn-control {
    width: 36px;
    height: 36px;
    margin-left: var(--space-sm);
  }

  .btn-control-exit {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 12px;
  }

  .btn-control-exit i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
  }

  .btn-control-exit span {
    display: none;
  }

  .search-results {
    top: 46px;
  }

  .leaflet-explorer-panel {
    top: var(--leaflet-shell-offset);
    left: 10px;
    width: calc(100vw - 72px);
    max-height: calc(var(--leaflet-app-height) - 150px);
    padding: 14px;
    border-radius: 20px;
  }

  .leaflet-explorer-header h2 {
    font-size: 20px;
  }

  .leaflet-explorer-refresh span,
  .explorer-action-btn span {
    display: none;
  }

  .explorer-place-card {
    grid-template-columns: 36px 1fr 28px;
    padding: 12px;
  }

  .explorer-detail-actions {
    flex-wrap: wrap;
  }

  .leaflet-statusbar {
    flex-wrap: wrap;
    gap: 6px;
    padding-right: 68px;
  }
}

/* ================ SMALL MOBILE ================ */
@media (max-width: 480px) {
  :root {
    --leaflet-navbar-height: 52px;
  }

  .leaflet-navbar {
    height: var(--leaflet-navbar-height);
  }

  .leaflet-search-container {
    margin: 0;
  }

  .search-box {
    border-radius: var(--radius-md);
  }

  .leaflet-explorer-panel {
    width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    max-height: calc(var(--leaflet-app-height) - 138px);
  }

  .leaflet-statusbar .status-section.address {
    width: 100%;
  }
}