/* ==========================================================================
   XPLORE MOBILE UI

   main.css remains the shared/desktop source of truth. This file owns only
   phone and touch-tablet layout, safe-area, touch-target and mobile GPU-cost
   overrides. Keep it loaded after all static component styles.
   ========================================================================== */

/* The quickbar is a mobile-only portal for the existing live routing buttons. */
.mobile-routing-quickbar {
  display: none;
}

.mobile-primary-navigation,
.mobile-search-panel,
.settings-panel__brand,
.settings-panel__title-mobile,
.mobile-main-menu__section-title {
  display: none;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .mobile-workbench-setting {
    display: none !important;
  }
  :root {
    --app-header-content-height: 0px;
    --app-header-height: var(--safe-area-top);
    --app-controls-top: calc(var(--safe-area-top) + 10px);
    --mobile-edge-left: max(8px, var(--safe-area-left));
    --mobile-edge-right: max(8px, var(--safe-area-right));
    --mobile-edge-bottom: max(8px, var(--safe-area-bottom));
    --mobile-sheet-surface: rgba(12, 24, 36, 0.96);
    --mobile-search-surface: linear-gradient(
      160deg,
      rgba(12, 24, 36, 0.84),
      rgba(12, 24, 36, 0.74)
    );
    --mobile-sheet-border: rgba(255, 255, 255, 0.16);
    --mobile-accent: #728c6c;
    --glass-blur: 10px;
    --glass-shadow: 0 14px 34px rgba(4, 10, 16, 0.42);
  }

  .app-header,
  .app-header *,
  .directions-actions-bar,
  .directions-actions-bar *,
  .directions-dock,
  .directions-dock *,
  .settings-panel,
  .settings-panel *,
  .modal-container,
  .modal-container * {
    box-sizing: border-box;
  }

  /* The desktop header is replaced by two independent map controls on phone. */
  .app-header {
    display: none;
  }

  .mobile-primary-navigation {
    position: fixed;
    z-index: 1160;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .mobile-search-panel,
  .mobile-search-panel * {
    box-sizing: border-box;
  }

  .mobile-primary-navigation__brand,
  .mobile-primary-navigation__search {
    position: absolute;
    top: var(--app-controls-top);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: auto;
    touch-action: manipulation;
  }

  .mobile-primary-navigation__brand {
    left: calc(10px + var(--safe-area-left));
    overflow: visible;
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 5px 14px rgba(4, 10, 16, 0.34);
  }

  .mobile-primary-navigation__brand img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
  }

  .mobile-primary-navigation__brand[aria-expanded='true'] {
    outline: 2px solid rgba(114, 140, 108, 0.92);
    outline-offset: 2px;
  }

  .mobile-primary-navigation__search {
    right: calc(62px + var(--safe-area-right));
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: #fff;
  }

  .mobile-primary-navigation__search svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  .mobile-primary-navigation__search[aria-expanded='true'] {
    border-color: rgba(114, 140, 108, 0.94) !important;
    background: linear-gradient(160deg, rgba(48, 73, 62, 0.99), rgba(25, 49, 43, 0.98)) !important;
    box-shadow: 0 0 0 2px rgba(114, 140, 108, 0.24), 0 8px 20px rgba(4, 10, 16, 0.36);
  }

  .mobile-search-panel {
    position: fixed;
    z-index: 1200;
    top: calc(var(--app-controls-top) + 54px);
    right: calc(62px + var(--safe-area-right));
    left: calc(62px + var(--safe-area-left));
    display: block;
    max-height: calc(100dvh - var(--app-controls-top) - 64px - var(--mobile-edge-bottom));
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top right;
    transition: opacity 150ms ease, transform 170ms ease, visibility 150ms;
    pointer-events: none;
  }

  .mobile-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

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

  .mobile-search-panel__geocoder,
  .mobile-search-panel__geocoder .header-geocoder,
  .mobile-search-panel__geocoder .maplibregl-ctrl-geocoder,
  .mobile-search-panel__geocoder .mapboxgl-ctrl-geocoder {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .mobile-search-panel .header-geocoder .maplibregl-ctrl-geocoder,
  .mobile-search-panel .header-geocoder .mapboxgl-ctrl-geocoder {
    background: var(--mobile-search-surface);
    border-radius: 13px;
  }

  .mobile-search-panel .header-geocoder .maplibregl-ctrl-geocoder--input,
  .mobile-search-panel .header-geocoder .mapboxgl-ctrl-geocoder--input {
    height: 46px !important;
  }

  .mobile-search-panel .header-geocoder .suggestions {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: var(--mobile-search-surface) !important;
    box-shadow: 0 12px 28px rgba(4, 10, 16, 0.32) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-height: min(52dvh, 390px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS overlays its keyboard instead of making CSS viewport units reliably
     follow the visible surface. The navigation controller publishes the real
     VisualViewport dimensions while the input is focused, so results remain
     inside the space above the keyboard and scroll independently. */
  .mobile-search-panel.is-keyboard-open {
    --mobile-search-keyboard-top: calc(var(--app-controls-top) + 54px);
    top: calc(var(--mobile-search-viewport-top, 0px) + var(--mobile-search-keyboard-top));
    height: max(
      180px,
      calc(var(--mobile-search-viewport-height, 100dvh) - var(--mobile-search-keyboard-top) - 6px)
    );
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    transform: none;
    transition: opacity 100ms ease, visibility 100ms;
  }

  .mobile-search-panel.is-keyboard-open .mobile-search-panel__geocoder,
  .mobile-search-panel.is-keyboard-open .header-geocoder {
    min-height: 0;
  }

  .mobile-search-panel.is-keyboard-open .mobile-search-panel__geocoder {
    height: auto;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .mobile-search-panel.is-keyboard-open .header-geocoder {
    height: 100%;
  }

  .mobile-search-panel.is-keyboard-open .maplibregl-ctrl-geocoder,
  .mobile-search-panel.is-keyboard-open .mapboxgl-ctrl-geocoder {
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-search-panel.is-keyboard-open .maplibregl-ctrl-geocoder:focus-within,
  .mobile-search-panel.is-keyboard-open .mapboxgl-ctrl-geocoder:focus-within {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-search-panel.is-keyboard-open .maplibregl-ctrl-geocoder--input,
  .mobile-search-panel.is-keyboard-open .mapboxgl-ctrl-geocoder--input {
    grid-row: 1;
    height: 46px !important;
    min-height: 46px;
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    background: var(--mobile-search-surface);
  }

  .mobile-search-panel.is-keyboard-open .maplibregl-ctrl-geocoder:focus-within
    .maplibregl-ctrl-geocoder--input,
  .mobile-search-panel.is-keyboard-open .mapboxgl-ctrl-geocoder:focus-within
    .mapboxgl-ctrl-geocoder--input {
    border-color: var(--glass-border-strong);
    background: var(--mobile-search-surface);
    box-shadow: 0 0 0 3px rgba(114, 140, 108, 0.45);
  }

  .mobile-search-panel.is-keyboard-open .maplibregl-ctrl-geocoder--icon-search,
  .mobile-search-panel.is-keyboard-open .mapboxgl-ctrl-geocoder--icon-search {
    top: 23px !important;
  }

  .mobile-search-panel.is-keyboard-open .suggestions-wrapper {
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 6px;
  }

  .mobile-search-panel.is-keyboard-open .header-geocoder .suggestions {
    position: static !important;
    width: 100% !important;
    height: auto;
    max-height: 100% !important;
    margin-top: 0 !important;
    overflow-y: auto !important;
  }

  /* Keep moving-map compositing cheap on mobile. These surfaces are already
     dark enough to retain the same visual hierarchy without live sampling of
     the WebGL canvas below them. */
  .header-geocoder .mapboxgl-ctrl-geocoder,
  .header-geocoder .maplibregl-ctrl-geocoder,
  .directions-actions-bar .btn,
  .route-stats__toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .map-action-btn,
  .maplibregl-ctrl-top-right button,
  .maplibregl-ctrl-top-right .xplore-camera-control .xplore-camera-compass {
    background: linear-gradient(160deg, rgba(25, 40, 48, 0.98), rgba(12, 24, 36, 0.96)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.layer-panel-ui-v2 .layer-panel-v2,
  body.layer-panel-ui-v2 .layer-panel-v2-backdrop,
  .settings-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.layer-panel-ui-v2 .layer-panel-v2-backdrop.is-open {
    background: rgba(2, 8, 12, 0.3);
  }

  .bivouac-popup-container .maplibregl-popup-content,
  .wikimedia-popup-content,
  .wikimedia-popup-loading,
  .wikimedia-popup-info-overlay,
  .xplore-webcam-popup .maplibregl-popup-content,
  .webcam-popup__info-panel,
  .xplore-peak-marker__badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .xplore-peak-marker:not(.xplore-peak-marker--panoramic) .xplore-peak-marker__badge {
    background: rgba(28, 35, 38, 0.82);
  }

  .refuge-map-marker,
  .refuge-map-marker:hover,
  .refuge-map-marker:focus-visible {
    filter: none;
  }

  .refuge-map-marker__visual {
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.45);
  }

  .refuge-card {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 300px 162px;
  }

  .header-geocoder,
  .header-geocoder .maplibregl-ctrl-geocoder,
  .header-geocoder .mapboxgl-ctrl-geocoder {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .header-geocoder .maplibregl-ctrl-geocoder--input,
  .header-geocoder .mapboxgl-ctrl-geocoder--input,
  #librarySearchInput,
  .refuge-library__search,
  .offline-zone-lab__text-input,
  .modal-input {
    font-size: 16px !important; /* Prevent Safari focus zoom. */
  }

  /* All map controls derive their vertical origin from the real header height. */
  .ui,
  .imagery-panel {
    top: var(--app-controls-top) !important;
  }

  .ui {
    /* Its routing palette must paint above the right-side map controls when
       both occupy the same narrow phone column. */
    z-index: 1150;
    left: calc(10px + var(--safe-area-left)) !important;
    top: calc(var(--app-controls-top) + 54px) !important;
  }

  .imagery-panel {
    z-index: 1155;
    right: calc(10px + var(--safe-area-right)) !important;
  }

  body.layer-side-panel-enabled .imagery-panel {
    z-index: 1155 !important;
  }

  .maplibregl-ctrl-top-right {
    top: calc(var(--app-controls-top) + 56px) !important;
    right: calc(10px + var(--safe-area-right)) !important;
    gap: 10px !important;
  }

  .map-action-btn,
  .maplibregl-ctrl-top-right button,
  .maplibregl-ctrl-top-right .xplore-camera-control,
  .maplibregl-ctrl-top-right .xplore-camera-control .xplore-camera-compass {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }

  /* ----------------------------------------------------------------------
     Routing tools: compact, labelled palette using the existing live buttons.
     ---------------------------------------------------------------------- */
  .directions-actions-bar {
    position: fixed;
    top: var(--app-controls-top);
    left: calc(62px + var(--safe-area-left));
    width: min(328px, calc(100vw - 72px - var(--safe-area-left) - var(--safe-area-right)));
    max-height: calc(100dvh - var(--app-controls-top) - var(--mobile-edge-bottom));
    padding: 10px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--mobile-sheet-border);
    border-radius: 18px;
    background: var(--mobile-sheet-surface);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 160ms ease, transform 180ms ease, visibility 160ms;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .directions-actions-bar.visible {
    max-height: calc(100dvh - var(--app-controls-top) - var(--mobile-edge-bottom));
    padding: 10px !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .routing-tools-mobile-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .routing-tools-mobile-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .routing-tools-mobile-header__eyebrow,
  .routing-tools-group__title {
    color: rgba(194, 209, 194, 0.58);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .routing-tools-mobile-header strong {
    font-size: 15px;
    line-height: 1.2;
  }

  .routing-tools-mobile-header__close,
  .directions-header__close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.055);
  }

  .routing-tools-mobile-header__close svg,
  .directions-header__close svg {
    width: 19px;
    height: 19px;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .routing-tools-group {
    min-width: 0;
    display: grid;
    gap: 6px;
  }

  .routing-tools-group--modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .routing-tools-group--edit {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .routing-tools-group--files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routing-tools-group__title {
    display: block;
    grid-column: 1 / -1;
    padding: 0 3px 2px;
  }

  .directions-actions-bar__separator {
    display: none;
  }

  .directions-actions-bar .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 3px !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
  }

  .directions-actions-bar .btn:hover:not(:disabled) {
    transform: none !important;
  }

  .directions-actions-bar .btn:active:not(:disabled),
  .directions-actions-bar .route-mode-btn.active,
  .directions-actions-bar .route-freehand-btn.active,
  .directions-actions-bar .route-freehand-btn[aria-pressed='true'] {
    border-color: rgba(114, 140, 108, 0.9) !important;
    background: rgba(114, 140, 108, 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(114, 140, 108, 0.26) !important;
  }

  .directions-actions-bar .route-freehand-btn > svg,
  .mobile-routing-quickbar > .route-freehand-btn > svg {
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .directions-actions-bar .btn img {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px;
  }

  .routing-tool-label {
    width: 100%;
    min-width: 0;
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ----------------------------------------------------------------------
     Shared route bottom-sheet shell.
     ---------------------------------------------------------------------- */
  .directions-dock {
    /* Above the 1100 map-control rail, below the 1190/1200 layer backdrop
       and panel. This prevents compass/3D controls from piercing sheets. */
    z-index: 1180;
    padding: 0 var(--mobile-edge-right) var(--mobile-edge-bottom) var(--mobile-edge-left);
    gap: 0;
  }

  .mobile-sheet-handle {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-sheet-handle > span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
  }

  /* ----------------------------------------------------------------------
     Saved routes: vertical, scrollable, touch-safe.
     ---------------------------------------------------------------------- */
  .route-library-dock {
    width: 100%;
    max-width: none;
    height: 0;
    max-height: 0;
    margin: 0;
    border-radius: 22px 22px 16px 16px;
    background: var(--mobile-sheet-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(24px);
  }

  .route-library-dock.visible {
    height: min(72dvh, 650px);
    max-height: calc(100dvh - var(--app-header-height) - 16px);
    margin: 0;
    overflow: hidden;
    transform: translateY(0);
  }

  .library-header {
    min-height: 102px;
    padding: 0 12px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 44px;
    gap: 4px 8px;
  }

  .library-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
    letter-spacing: 0.07em;
  }

  .library-actions {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
  }

  #libraryImportBtn,
  .library-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  .library-close svg {
    width: 19px;
    height: 19px;
  }

  .search-container {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #librarySearchInput {
    height: 44px;
    padding: 9px 13px;
    text-align: left;
  }

  .library-content {
    min-height: 0;
    padding: 10px 12px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .route-list {
    width: 100%;
    min-width: 0;
    padding: 0 0 var(--safe-area-bottom);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .route-card {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding: 14px;
    gap: 10px;
    border-radius: 16px;
    box-sizing: border-box;
    cursor: default;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: auto 220px;
  }

  .route-card:hover {
    transform: none;
  }

  .route-card__header {
    min-width: 0;
    gap: 7px;
  }

  .route-header {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .route-title {
    min-width: 0;
    margin: 0;
    flex: 1;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .route-title__rename {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
  }

  .route-title__rename img {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);
  }

  .route-card__day-badge {
    flex: 0 0 auto;
  }

  .route-stats-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .route-stat {
    min-width: 0;
  }

  .route-stat__label {
    font-size: 9px;
  }

  .route-stat__value {
    overflow-wrap: anywhere;
    font-size: 11px;
  }

  .route-sparkline-container {
    height: 42px;
    margin: 5px 0 2px;
  }

  .route-sparkline__line {
    filter: none !important;
  }

  .route-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 6px;
  }

  .route-actions .btn--icon-only {
    width: 100%;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  .empty-state {
    width: 100%;
    padding: 42px 16px;
  }

  /* ----------------------------------------------------------------------
     Elevation/profile sheet.
     ---------------------------------------------------------------------- */
  .directions-control {
    width: calc(100% + var(--mobile-edge-left) + var(--mobile-edge-right));
    max-width: none;
    margin-inline-start: calc(0px - var(--mobile-edge-left));
    margin-inline-end: calc(0px - var(--mobile-edge-right));
    border-width: 1px 1px 0;
    border-radius: 22px 22px 0 0;
    background: var(--mobile-sheet-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateY(24px);
  }

  .directions-control.visible {
    max-height: min(72dvh, calc(100dvh - var(--app-header-height) - 10px));
    margin-top: 0;
    margin-bottom: calc(0px - var(--mobile-edge-bottom));
    padding: 0 0 max(6px, var(--safe-area-bottom));
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateY(0);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .directions-control > .directions-header {
    position: sticky;
    z-index: 20;
    top: 0;
    order: -2;
    flex: 0 0 26px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 0;
    background: rgba(12, 24, 36, 0.97);
  }

  .directions-header__title,
  .directions-header__close {
    display: none;
  }

  .directions-swipe-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 92px;
    height: 26px;
    padding: 9px 0 8px;
    display: flex;
    transform: translateX(-50%);
  }

  .directions-swipe-handle__bar {
    width: 38px;
    height: 4px;
  }

  .elevation-section__chart-wrapper {
    padding: 4px 10px 6px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
      'axis chart'
      '. modes';
    align-items: stretch;
    gap: 5px 6px;
  }

  .elevation-section:not(.elevation-section--collapsed) {
    flex: 0 0 auto;
  }

  .elevation-section__y-axis {
    width: 28px;
    min-width: 28px;
    grid-area: axis;
    padding: 3px 0 21px;
    font-size: 9px;
  }

  .elevation-chart {
    min-width: 0;
    min-height: clamp(178px, 23dvh, 220px);
    grid-area: chart;
  }

  .elevation-chart-container {
    min-height: clamp(172px, 22dvh, 214px);
    touch-action: pan-y;
  }

  .profile-mode-sidebar {
    position: relative;
    top: auto;
    right: auto;
    grid-area: modes;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: none;
  }

  .profile-mode-sidebar__item,
  .profile-mode-sidebar__item:hover,
  .profile-mode-sidebar__item.active,
  .profile-mode-sidebar__item.active:hover {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }

  .profile-mode-sidebar__item img {
    width: 18px !important;
    height: 18px !important;
  }

  .profile-legend,
  .profile-legend[aria-hidden='false'] {
    top: auto;
    right: auto;
    bottom: calc(100% + 7px);
    left: 0;
    width: min(280px, calc(100vw - 54px));
    min-width: 0;
    max-width: calc(100vw - 54px);
    transform: translateY(6px);
    transform-origin: bottom left;
  }

  .profile-legend[aria-hidden='false'] {
    transform: translateY(0);
  }

  .elevation-chart-tooltip {
    top: 6px;
    bottom: auto;
    max-width: min(248px, calc(100vw - 60px));
    margin: 0;
    padding: 7px 9px;
    white-space: normal;
    pointer-events: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .elevation-chart-tooltip::after {
    display: none;
  }

  .elevation-chart-tooltip__details {
    flex-wrap: wrap;
    gap: 3px 8px;
  }

  .elevation-chart-tooltip__bivouac {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    display: block;
    border: 1px solid rgba(114, 140, 108, 0.68);
    border-radius: 8px;
    color: #fff;
    background: rgba(114, 140, 108, 0.3);
    font: 700 11px/1 var(--font-ui);
  }

  .route-stats__content {
    padding: 7px 52px 12px 12px;
  }

  .route-stats.has-stats {
    padding: 0;
  }

  .route-stats.has-stats .route-stats-list {
    flex-direction: row;
    align-items: center;
  }

  .route-stats__toggle {
    top: 7px;
    right: 9px;
    bottom: auto;
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.68);
    opacity: 0.78;
  }

  .route-stats__toggle::before {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    content: '';
  }

  .route-stats__toggle:hover,
  .route-stats__toggle:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
  }

  .route-stats__toggle svg {
    width: 15px;
    height: 15px;
  }

  .day-details__metrics,
  .day-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
  }

  .day-details__metric,
  .day-details__item {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: 11px;
  }

  .day-details__metric-label,
  .day-details__item-label {
    font-size: 10px;
  }

  .day-details__metric-value,
  .day-details__item-value {
    max-width: 100%;
    overflow: visible;
    font-size: 11px;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .day-details__poi-row {
    padding-right: 0;
    font-size: 10px;
  }

  .day-timeline {
    padding: 3px 12px 1px;
  }

  .day-tab-wrapper {
    min-width: 118px;
    flex: 1 0 118px;
  }

  .day-tab {
    min-height: 36px;
    padding-block: 3px;
  }

  /* ----------------------------------------------------------------------
     Remaining panels and dialogs: safe-area + reachable touch controls.
     ---------------------------------------------------------------------- */
  .settings-panel {
    position: fixed;
    top: calc(var(--app-controls-top) + 54px);
    right: auto;
    left: var(--mobile-edge-left);
    width: min(340px, calc(100vw - var(--mobile-edge-left) - var(--mobile-edge-right)));
    max-height: calc(100dvh - var(--app-controls-top) - 64px - var(--mobile-edge-bottom));
    border-radius: 18px;
    z-index: 1200;
  }

  .settings-panel__body {
    max-height: calc(100dvh - var(--app-controls-top) - 122px - var(--mobile-edge-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .settings-toggle {
    display: none !important;
  }

  .settings-panel__brand,
  .settings-panel__title-mobile,
  .mobile-main-menu__section-title {
    display: block;
  }

  .settings-panel__title-desktop {
    display: none;
  }

  .settings-panel__title {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .settings-panel__brand {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .settings-panel__title-mobile {
    color: #fff;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: 0.01em;
  }

  .mobile-main-menu__section-title {
    padding: 4px 0 10px;
    color: rgba(164, 188, 157, 0.72);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .settings-panel__close,
  .settings-panel__checkbox,
  .refuge-library__close,
  .refuge-library__filter,
  .refuge-library__amenity-filter,
  .refuge-library__reset {
    min-width: 44px;
    min-height: 44px;
  }

  .modal-overlay {
    padding: calc(12px + var(--safe-area-top)) calc(12px + var(--safe-area-right)) calc(12px + var(--safe-area-bottom)) calc(12px + var(--safe-area-left));
  }

  .modal-container {
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - 24px);
    padding: 18px;
    overflow-y: auto;
    border-radius: 18px;
  }

  .modal-btn {
    min-height: 44px;
    padding-inline: 16px;
  }

  .toast-container {
    max-width: calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 24px);
    padding: 11px 17px;
    font-size: 13px;
  }

  .refuge-library-dock {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 16px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .refuge-library-dock.visible {
    max-height: min(72dvh, calc(100dvh - var(--app-header-height) - 16px));
    margin-bottom: 0;
    overflow: hidden;
  }

  .refuge-library__search,
  .refuge-library__select {
    min-height: 44px;
  }

  .refuge-library__content {
    -webkit-overflow-scrolling: touch;
  }

  .refuge-detail-backdrop {
    padding: calc(8px + var(--safe-area-top)) calc(8px + var(--safe-area-right)) calc(8px + var(--safe-area-bottom)) calc(8px + var(--safe-area-left));
    align-items: stretch;
  }

  .refuge-detail {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 18px;
  }

  .refuge-detail__preference,
  .refuge-detail__close,
  .refuge-detail__source {
    min-width: 44px;
    min-height: 44px;
  }

  body .offline-zone-lab-dock {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 16px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body .offline-zone-lab-dock.visible {
    max-height: min(52dvh, 440px);
    margin-bottom: 0;
  }

  body .offline-zone-lab__body {
    max-height: calc(min(52dvh, 440px) - 55px);
    -webkit-overflow-scrolling: touch;
  }

  .xplore-webcam-popup .maplibregl-popup-content,
  .wikimedia-photo-popup .maplibregl-popup-content {
    max-width: calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 20px);
  }

  .webcam-popup,
  .wikimedia-popup-content {
    max-width: calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 20px);
  }

  .photo-lightbox {
    padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
  }

  .photo-lightbox__container {
    width: calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 12px);
    height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    max-height: none;
    border-radius: 16px;
  }

  .photo-lightbox__close,
  .photo-lightbox__nav {
    min-width: 44px;
    min-height: 44px;
  }

  .waypoint-context-menu__item {
    min-height: 44px;
  }

  .settings-panel__row--action {
    min-height: 58px;
  }

  .settings-panel__action {
    min-width: 82px;
    min-height: 44px;
    border-radius: 12px;
  }

  .settings-panel__action-title {
    font-size: 13px;
  }

  .settings-panel__action-hint {
    font-size: 10px;
  }

  /* Performance diagnostics becomes a reachable bottom sheet. It deliberately
     stays opaque/no-blur so the profiler does not perturb the GPU result. */
  .perfdiag {
    top: auto;
    right: var(--mobile-edge-right);
    bottom: var(--mobile-edge-bottom);
    left: var(--mobile-edge-left);
    width: auto;
    max-height: min(78dvh, calc(100dvh - var(--app-controls-top) - 8px));
    border-radius: 21px 21px 16px 16px;
    background: #101d27;
    transform: translate3d(0, 28px, 0);
  }

  .perfdiag--open {
    transform: translate3d(0, 0, 0);
  }

  .perfdiag__handle {
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .perfdiag__handle span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
  }

  .perfdiag__header {
    min-height: 62px;
    padding: 6px 12px 10px;
  }

  .perfdiag__heading h2 {
    font-size: 15px;
  }

  .perfdiag__close,
  .perfdiag__running button,
  .perfdiag__button {
    min-height: 44px;
  }

  .perfdiag__close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .perfdiag__body {
    padding: 12px 12px calc(12px + var(--safe-area-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .perfdiag__intro {
    font-size: 11px;
  }

  .perfdiag__button {
    border-radius: 13px;
    font-size: 10px;
  }

  .perfdiag__summary {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .perfdiag__finding {
    padding: 11px 12px;
  }

  .perfdiag__finding-head strong {
    font-size: 12px;
  }

  .perfdiag__finding p {
    font-size: 10px;
  }

  .perfdiag--capturing {
    top: auto;
    right: var(--mobile-edge-right);
    bottom: calc(var(--mobile-edge-bottom) + 4px);
    left: var(--mobile-edge-left);
    width: auto;
    max-height: 62px;
    border-radius: 15px;
  }

  .perfdiag--capturing .perfdiag__handle {
    display: none;
  }

  .perfdiag--capturing .perfdiag__header {
    min-height: 60px;
    padding: 8px 9px;
  }

  .perfdiag__running {
    width: 100%;
    font-size: 10px;
  }

  .perfdiag__running button {
    min-width: 82px;
  }
}

/* --------------------------------------------------------------------------
   Compact routing controls inspired by mobile route planners.

   The live route buttons are the original DOM nodes moved here at runtime,
   so disabled/active state and event listeners remain owned by Directions.
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .mobile-routing-quickbar {
    position: relative;
    width: max-content;
    max-width: calc(100vw - var(--mobile-edge-left) - var(--mobile-edge-right));
    min-height: 50px;
    margin: 0 auto 8px;
    padding: 1px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: auto;
    isolation: isolate;
  }

  .mobile-routing-quickbar.is-visible {
    display: flex;
  }

  .mobile-routing-quickbar__button,
  .mobile-routing-quickbar > .btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 12px !important;
    display: inline-flex !important;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.94);
    background: #172733 !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-routing-quickbar__button svg,
  .mobile-routing-quickbar > .btn img,
  .mobile-routing-quickbar > .btn svg {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px;
    fill: currentColor;
    filter: brightness(0) invert(1);
  }

  .mobile-routing-quickbar > .btn .routing-tool-label {
    display: none !important;
  }

  .mobile-routing-quickbar__button:active,
  .mobile-routing-quickbar__button[aria-expanded='true'],
  .mobile-routing-quickbar > .btn.active,
  .mobile-routing-quickbar > .route-freehand-btn[aria-pressed='true'] {
    background: #263c37 !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38) !important;
  }

  .mobile-routing-quickbar > .route-freehand-btn.active,
  .mobile-routing-quickbar > .route-freehand-btn[aria-pressed='true'] {
    background: var(--mobile-accent) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      0 5px 16px rgba(0, 0, 0, 0.38) !important;
  }

  .mobile-routing-quickbar > .route-freehand-btn {
    position: relative;
  }

  .mobile-routing-quickbar > .route-freehand-btn.is-processing > svg,
  .mobile-routing-quickbar > .route-freehand-btn[aria-busy='true'] > svg {
    opacity: 0.18;
  }

  .mobile-routing-quickbar > .route-freehand-btn.is-processing::after,
  .mobile-routing-quickbar > .route-freehand-btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mobile-routing-spin 700ms linear infinite;
  }

  .mobile-routing-quickbar__button:disabled,
  .mobile-routing-quickbar > .btn:disabled {
    opacity: 0.3;
    box-shadow: none !important;
  }

  .mobile-routing-quickbar > .route-freehand-btn.is-processing:disabled,
  .mobile-routing-quickbar > .route-freehand-btn[aria-busy='true']:disabled {
    opacity: 1;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38) !important;
  }

  .mobile-routing-quickbar__button:focus-visible,
  .mobile-routing-quickbar > .btn:focus-visible {
    outline: 2px solid rgba(177, 197, 171, 0.9);
    outline-offset: 3px;
  }

  .mobile-routing-overflow-host {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    width: min(304px, calc(100vw - var(--mobile-edge-left) - var(--mobile-edge-right)));
    pointer-events: none;
  }

  .mobile-routing-overflow-host .directions-actions-bar {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: min(420px, calc(100dvh - var(--app-header-height) - 112px));
    margin: 0;
    padding: 10px !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 17px;
    background: #11212c;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 8px, 0) scale(0.98);
    transform-origin: bottom right;
  }

  .mobile-routing-overflow-host .directions-actions-bar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .mobile-routing-overflow-host .routing-tools-mobile-header,
  .mobile-routing-overflow-host .directions-actions-bar__separator {
    display: none;
  }

  .mobile-routing-overflow-host .routing-tools-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-routing-overflow-host .routing-tools-group--modes,
  .mobile-routing-overflow-host .routing-tools-group--files {
    display: none;
  }

  .mobile-routing-overflow-host .routing-tools-group--edit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-routing-overflow-host .routing-tools-group__title {
    padding: 2px 3px 1px;
    grid-column: 1 / -1;
    font-size: 9px;
  }

  .mobile-routing-overflow-host .directions-actions-bar .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 5px !important;
    gap: 3px;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: manipulation;
  }

  .mobile-routing-overflow-host .directions-actions-bar .btn:hover,
  .mobile-routing-overflow-host .directions-actions-bar .btn:focus-visible {
    background: rgba(255, 255, 255, 0.065) !important;
  }

  .mobile-routing-overflow-host .directions-actions-bar .btn img {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-routing-overflow-host .routing-tool-label {
    display: block;
    font-size: 9px;
  }

  /* The overflow is closed by the three-dot button, outside tap or Escape.
     The route profile uses its compact drag handle instead of a close button. */
  .mobile-routing-overflow-host #directionsActionsClose {
    display: none;
  }

  /* A collapsed route stays a compact peek sheet. Secondary information is
     available after expanding the elevation profile. */
  .directions-control.visible {
    max-height: min(72dvh, calc(100dvh - var(--app-header-height) - 10px));
    transition: opacity 160ms ease, transform 180ms ease;
  }

  .directions-control.visible:has(.route-stats.is-collapsed) {
    max-height: min(
      calc(226px + var(--safe-area-bottom)),
      calc(100dvh - var(--app-header-height) - 60px)
    );
  }

  /* Keep a readable elevation preview above the compact route metrics instead
     of using the graph as a low-contrast background behind the text. */
  .route-stats.is-collapsed {
    flex: 0 0 auto;
  }

  .route-stats.is-collapsed .route-stats__sparkline {
    inset: 2px 42px auto 12px;
    height: 62px;
    opacity: 0.72;
    mask-image: linear-gradient(to bottom, black 8%, rgba(0, 0, 0, 0.8) 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 8%, rgba(0, 0, 0, 0.8) 65%, transparent 100%);
  }

  .route-stats.is-collapsed .route-stats__content {
    padding-top: 62px;
  }

  .route-stats.is-collapsed .day-details__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .route-stats.is-collapsed .day-details__item:nth-child(n + 4),
  .route-stats.is-collapsed .day-details__poi-row {
    display: none;
  }

  .route-stats.is-collapsed .day-details__item {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .route-stats.is-collapsed .day-details__item-label,
  .route-stats.is-collapsed .day-details__item-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .app-header {
    gap: 7px;
    padding-right: calc(8px + var(--safe-area-right));
    padding-left: calc(8px + var(--safe-area-left));
  }

  .app-header__logo-text {
    display: none;
  }

  .app-header__logo-img {
    width: 36px;
    height: 36px;
  }

  .directions-actions-bar {
    left: calc(60px + var(--safe-area-left));
    width: calc(100vw - 70px - var(--safe-area-left) - var(--safe-area-right));
  }

  .route-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-stat:last-child {
    grid-column: 1 / -1;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) and (max-height: 520px) {
  :root {
    --app-header-content-height: 46px;
  }

  .app-header__logo-text {
    display: none;
  }

  .app-header__logo-img {
    width: 32px;
    height: 32px;
  }

  .directions-actions-bar {
    left: calc(60px + var(--safe-area-left));
    width: min(620px, calc(100vw - 70px - var(--safe-area-left) - var(--safe-area-right)));
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.7fr);
    align-items: start;
  }

  .mobile-routing-overflow-host .directions-actions-bar {
    padding: 8px !important;
    gap: 5px;
  }

  .mobile-routing-overflow-host .routing-tools-group {
    gap: 5px;
  }

  .mobile-routing-overflow-host .directions-actions-bar .btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  .routing-tools-mobile-header {
    grid-column: 1 / -1;
  }

  .routing-tools-group--modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .routing-tools-group--edit {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .routing-tools-group--files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-library-dock.visible,
  .refuge-library-dock.visible {
    max-height: calc(100dvh - var(--app-header-height) - 8px);
  }

  .elevation-chart,
  .elevation-chart-container {
    min-height: clamp(178px, 23dvh, 210px);
  }

  body .offline-zone-lab-dock.visible {
    max-height: min(68dvh, 270px);
  }
}

@media (max-width: 350px) {
  .mobile-routing-quickbar {
    gap: 5px;
  }

  .mobile-routing-quickbar__button,
  .mobile-routing-quickbar > .btn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 10px !important;
    flex-basis: 44px;
  }

  .mobile-routing-quickbar > .route-freehand-btn.is-processing::after,
  .mobile-routing-quickbar > .route-freehand-btn[aria-busy='true']::after {
    inset: 10px;
  }
}

@keyframes mobile-routing-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .directions-actions-bar,
  .directions-control,
  .route-library-dock {
    transition-duration: 0.01ms !important;
  }
}