/*
 * dealer-map.css  —  Dealer Map Plugin v1.0.0
 *
 * Sections:
 *  1.  Brand variables         — change colours here
 *  2.  Wrapper + map           — the full-viewport container
 *  3.  Shared input styles     — search bars (reused on desktop + mobile)
 *  4.  Desktop: hero overlay   — title + centred search
 *  5.  Desktop: sidebar        — slides in from left
 *  6.  Desktop: sidebar cards  — dealer list items
 *  7.  Mobile layout           — full-screen map + floating search
 *  8.  Mobile: result cards    — overlaid on map, max 2
 *  9.  Leaflet overrides       — pins, popups
 *  10. Accessibility           — focus rings, reduced motion
 */


/* ══════════════════════════════════════════════════════════════════════════════
   1. BRAND VARIABLES
   Edit only this section to restyle the entire map component.
══════════════════════════════════════════════════════════════════════════════ */
:root {
    --dm-orange:       #DC5626;
    --dm-orange-hover: #C24A20;
    --dm-orange-bg:    #FEF0E8;   /* light tint for badges + hover fills   */
    --dm-orange-text:  #B8421A;   /* text ON an orange-bg surface          */
    --dm-white:        #FFFFFF;
    --dm-offwhite:     #F7F7F7;
    --dm-border:       #EAEAEA;
    --dm-text-dark:    #12181F;   /* headings, card names                  */
    --dm-text-body:    #3C3C3C;   /* hero subtitle                         */
    --dm-text-meta:    #9E9B96;   /* contact names, secondary info         */
    --dm-text-hint:    #C4C0B8;   /* placeholders                          */
    --dm-sidebar-w:    400px;     /* desktop sidebar width                 */
    --dm-header-h:     180px;     /* your site header height — adjust this */
    --dm-map-padding:  2vw;       /* ← padding around map when sidebar is open. Change this one value. */
    --dm-map-radius:   12px;      /* ← corner radius on the two right corners of the map */
    --dm-transition:   0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ══════════════════════════════════════════════════════════════════════════════
   BREAKDANCE FULL-WIDTH FIX
   Breakdance wraps shortcode content in a .section-container div that has a
   max-width and horizontal padding. These rules strip those constraints so
   the map can fill the full viewport width.

   HOW IT WORKS — two complementary techniques:

   1. :has() selector (modern browsers — Chrome 105+, Safari 15.4+, Firefox 121+)
      Targets .section-container and the Breakdance section element directly
      when they contain #dm-wrapper, and removes their width constraints.
      This is the clean solution with no side effects.

   2. Negative margin breakout (universal fallback)
      If :has() is not supported, #dm-wrapper pulls itself left by 50vw and
      sets its own width to 100vw — escaping the container visually.
      Works in every browser regardless of container structure.

   If the map is still not full width after this, open DevTools (F12),
   inspect #dm-wrapper, and look for a max-width or padding on any parent
   element. Add that parent's class here following the same pattern.
══════════════════════════════════════════════════════════════════════════════ */

/* Layer 1 — strip the container constraints using :has() */
.section-container:has( #dm-wrapper ),
.brxe-section:has( #dm-wrapper ),
.brxe-div:has( #dm-wrapper ) {
    max-width:     none    !important;
    width:         100%    !important;
    padding-left:  0       !important;
    padding-right: 0       !important;
    margin-left:   0       !important;
    margin-right:  0       !important;
}

/* Layer 2 — negative margin breakout (fallback + belt-and-braces) */
#dm-wrapper {
    /* Pull left to escape the container's centre-alignment */
    margin-left:  calc( 50% - 50vw ) !important;
    margin-right: calc( 50% - 50vw ) !important;
    /* Force full viewport width regardless of parent constraints */
    width:        100vw !important;
    max-width:    100vw !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. WRAPPER + MAP
   The wrapper is position:relative so every absolute child is contained.
   The map (position:absolute) fills the wrapper completely.
══════════════════════════════════════════════════════════════════════════════ */
#dm-wrapper {
    position:   relative;
    width:      100%;
    /* 100vh fallback for browsers that don't support svh (all pre-2022) */
    height:     95vh;
    /* 100svh excludes iOS Safari browser chrome — prevents the map being
       cut off when the address bar is visible */
    height:     100svh;
    min-height: 560px;
    overflow:   hidden;
    background: var(--dm-offwhite);
    /* Inherit whatever font your WordPress theme sets */
    font-family: inherit;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Left corners flush (connect to sidebar), right corners rounded.
       Adjust --dm-map-radius in :root to change the radius. */
    border-radius: 0 var(--dm-map-radius) var(--dm-map-radius) 0;
}

#dm-map {
    position: absolute;
    top:      0;
    right:    0;
    bottom:   0;
    left:     0;
    z-index:  0;
    /* Smooth inset transition when sidebar opens/closes */
    -webkit-transition: top var(--dm-transition), right var(--dm-transition),
                        bottom var(--dm-transition), left var(--dm-transition);
            transition: top var(--dm-transition), right var(--dm-transition),
                        bottom var(--dm-transition), left var(--dm-transition);
}

/* Applied by JS (openSidebar / closeSidebar) when the sidebar is open.
   Only the right/top/bottom get the padding — left is flush with the sidebar.
   ↓ Change --dm-map-padding in :root to adjust all four sides at once. */
.dm--map-padded #dm-map {
    top:    var(--dm-map-padding);
    right:  var(--dm-map-padding);
    bottom: var(--dm-map-padding);
    left:   calc(var(--dm-sidebar-w) + var(--dm-map-padding));
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. SHARED INPUT STYLES
   Used by hero search, sidebar search, and mobile search.
   The .dm-input-wrap class is the outer container.
══════════════════════════════════════════════════════════════════════════════ */
.dm-input-wrap {
    display:        flex;
    align-items:    center;
    gap:            8px;
    background:     var(--dm-white);
    border:         1.5px solid var(--dm-border);
    border-radius:  10px;
    padding:        0 14px;
    height:         48px;
    /* Hardware-accelerated transitions for smoother border-colour changes */
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dm-input-wrap:focus-within {
    border-color: var(--dm-orange);
    box-shadow:   0 2px 16px rgba(220, 86, 38, 0.16);
}

/* Search magnifier icon */
.dm-search-icon {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
    color:       var(--dm-text-hint);
    /* Prevent icon from inheriting font cursor */
    pointer-events: none;
}

/* All search inputs — reset browser defaults */
.dm-input-wrap input[type="text"],
.dm-input-wrap input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    flex:        1;
    min-width:   0;
    border:      none;
    outline:     none;
    background:  transparent;
    font-size:   14px;
    font-family: inherit;
    color:       var(--dm-text-dark);
    /* Remove iOS Safari's inner shadow on inputs */
    -webkit-box-shadow: none;
            box-shadow: none;
}

.dm-input-wrap input::placeholder {
    color: var(--dm-text-hint);
}

/* Hide the ✕ icon browsers add to search inputs */
.dm-input-wrap input::-webkit-search-cancel-button,
.dm-input-wrap input::-webkit-search-decoration { display: none; }

/* Clear (✕) button */
.dm-clear-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--dm-text-hint);
    font-size:   13px;
    line-height: 1;
    padding:     2px 4px;
    flex-shrink: 0;
    -webkit-transition: color 0.12s;
            transition: color 0.12s;
    /* Prevent button text from being selected on fast double-tap */
    -webkit-user-select: none;
    -moz-user-select:    none;
    user-select:         none;
}

.dm-clear-btn:hover { color: var(--dm-orange); }


/* ══════════════════════════════════════════════════════════════════════════════
   4. DESKTOP: HERO OVERLAY
   Centred over the map. Contains title, subtitle, and search bar.
   Fades out when user clicks the search bar and the sidebar opens.
══════════════════════════════════════════════════════════════════════════════ */
#dm-overlay {
    position:    absolute;
    top:         0;
    right:       0;
    bottom:      0;
    left:        0;
    z-index:     10;
    display:     -webkit-flex;
    display:             flex;
    -webkit-align-items:     center;
            align-items:     center;
    -webkit-justify-content: center;
            justify-content: center;
    /* Push hero content below the fixed site header */
    padding-top: var(--dm-header-h);
    -webkit-transition: opacity var(--dm-transition);
            transition: opacity var(--dm-transition);
    pointer-events: auto;
}

#dm-overlay.dm-overlay--hidden {
    opacity:        0;
    pointer-events: none;
}

#dm-hero {
    display:         -webkit-flex;
    display:                 flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-align-items: flex-start;
            align-items: flex-start;
    max-width: 500px;
    padding:   0 24px;
    width:     100%;
}

/* Title — clamp() ensures it scales between phones and 4K screens */
#dm-title {
    font-size:      clamp(28px, 4.5vw, 54px);
    font-weight:    900;
    color:          var(--dm-text-dark);
    line-height:    1.0;
    letter-spacing: -0.025em;
    margin:         0 0 14px 0;
}

#dm-subtitle {
    font-size:   clamp(13px, 1.4vw, 16px);
    color:       var(--dm-text-body);
    line-height: 1.65;
    max-width:   380px;
    margin:      0 0 24px 0;
}

#dm-hero-search {
    width: 100%;
}

/* Hero search bar gets an elevated shadow */
#dm-hero-input-wrap {
    cursor:     text;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
}

#dm-input-hero {
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════════════════
   5. DESKTOP: SIDEBAR
   Slides in from the left. Uses will-change:transform for GPU compositing —
   ensures smooth animation even on lower-end devices.
══════════════════════════════════════════════════════════════════════════════ */
#dm-sidebar {
    position:   absolute;
    top:        0;
    left:       0;
    bottom:     0;
    width:      var(--dm-sidebar-w);
    background: var(--dm-white);
    border-right: 1px solid var(--dm-border);
    display:    -webkit-flex;
    display:            flex;
    -webkit-flex-direction: column;
            flex-direction: column;
   
    z-index:    20;
    /* Start off-screen */
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: -webkit-transform var(--dm-transition);
            transition:         transform var(--dm-transition);
    will-change: transform;
    /* Prevent sidebar from appearing above page headers/navbars */
    overflow: hidden;
}

#dm-sidebar.dm-sidebar--open {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

/* Sidebar search bar — sits at the top, clears the site header */
#dm-sidebar-header {
    padding:      var(--dm-header-h) 14px 10px;
    flex-shrink:  0;
    border-bottom: 1px solid var(--dm-border);
    background:   var(--dm-white);
}

#dm-sidebar-input-wrap {
    background:    var(--dm-offwhite);
    border-color:  var(--dm-border);
    border-radius: 8px;
    height:        40px;
}

#dm-sidebar-input-wrap:focus-within {
    border-color: var(--dm-orange);
    background:   var(--dm-white);
    box-shadow:   none;
}

/* Back arrow button */
#dm-back {
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     5px;
    color:       var(--dm-text-hint);
    flex-shrink: 0;
    display:     -webkit-flex;
    display:             flex;
    -webkit-align-items:     center;
            align-items:     center;
    -webkit-justify-content: center;
            justify-content: center;
    border-radius: 6px;
    -webkit-transition: color 0.12s, background 0.12s;
            transition: color 0.12s, background 0.12s;
    /* Large enough touch target on touch screens */
    min-width:  32px;
    min-height: 32px;
}

#dm-back:hover {
    color:       var(--dm-orange);
    background:  var(--dm-orange-bg);
}

/* Sidebar scrollable body */
#dm-sidebar-body {
    -webkit-flex: 1;
            flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    display:         -webkit-flex;
    display:                 flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    /* Custom scrollbar — subtle */
    scrollbar-width: thin;
    scrollbar-color: var(--dm-border) transparent;
}

#dm-sidebar-body::-webkit-scrollbar       { width: 3px; }
#dm-sidebar-body::-webkit-scrollbar-track { background: transparent; }
#dm-sidebar-body::-webkit-scrollbar-thumb { background: var(--dm-border); border-radius: 2px; }

/* Empty state */
#dm-empty-state {
    -webkit-flex: 1;
            flex: 1;
    display:     -webkit-flex;
    display:             flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-align-items:     center;
            align-items:     center;
    -webkit-justify-content: center;
            justify-content: center;
    gap:     12px;
    padding: 32px 24px;
    text-align: center;
}

#dm-empty-state svg { opacity: 0.3; }

#dm-empty-state p {
    font-size:  12px;
    color:      var(--dm-text-hint);
    line-height: 1.65;
    max-width:  175px;
    margin:     0;
}

/* Results count label */
#dm-results-label {
    padding:         10px 14px 4px;
    font-size:       10px;
    font-weight:     700;
    color:           var(--dm-text-hint);
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    flex-shrink:     0;
    margin:          0;
}

/* Card list container */
#dm-list {
    padding: 4px 8px 16px;
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    gap:     3px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. DESKTOP: SIDEBAR CARDS
   Shared base styles also used by mobile cards (.dm-mobile-card).
══════════════════════════════════════════════════════════════════════════════ */
.dm-card,
.dm-mobile-card {
    display:     -webkit-flex;
    display:             flex;
    -webkit-align-items: center;
            align-items: center;
    padding:     11px 12px;
    border-radius: 8px;
    cursor:      pointer;
    border:      1px solid transparent;
    -webkit-transition: background 0.12s, border-color 0.12s, -webkit-transform 0.1s;
            transition: background 0.12s, border-color 0.12s,         transform 0.1s;
    text-decoration: none;
    color:       inherit;
    /* Remove grey tap flash on iOS */
    -webkit-tap-highlight-color: rgba(220, 86, 38, 0.08);
}

.dm-card:hover,
.dm-mobile-card:hover {
    background:   var(--dm-orange-bg);
    border-color: #F5C4A8;
}

.dm-card--active,
.dm-mobile-card--active {
    background:        var(--dm-orange-bg);
    border-color:      var(--dm-orange);
    border-left-width: 3px;
}

/* Shared card internals */
.dm-card-body {
    -webkit-flex: 1;
            flex: 1;
    min-width: 0;   /* enables text-overflow: ellipsis */
}

.dm-card-name {
    font-size:      13px;
    font-weight:    700;
    color:          var(--dm-text-dark);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    margin-bottom:  3px;
}

.dm-card-region {
    display:         inline-block;
    font-size:       10px;
    font-weight:     700;
    background:      var(--dm-orange-bg);
    color:           var(--dm-orange-text);
    padding:         1px 7px;
    border-radius:   10px;
    margin-bottom:   4px;
}

.dm-card-contact {
    font-size:     11px;
    color:         var(--dm-text-meta);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.dm-card-arrow {
    font-size:   18px;
    color:       var(--dm-border);
    flex-shrink: 0;
    margin-left: 6px;
    -webkit-transition: color 0.12s, -webkit-transform 0.12s;
            transition: color 0.12s,         transform 0.12s;
}

.dm-card:hover     .dm-card-arrow,
.dm-card--active   .dm-card-arrow,
.dm-mobile-card:hover    .dm-card-arrow,
.dm-mobile-card--active  .dm-card-arrow {
    color:            var(--dm-orange);
    -webkit-transform: translateX(2px);
        -ms-transform: translateX(2px);
            transform: translateX(2px);
}


/* ══════════════════════════════════════════════════════════════════════════════
   7. MOBILE LAYOUT  (max-width: 768px)
   - Map fills 100% of the viewport (no sidebar)
   - Hero overlay is hidden
   - Floating search bar sits below the site header
   - Desktop sidebar is hidden completely
══════════════════════════════════════════════════════════════════════════════ */

/* Mobile elements hidden on desktop */
#dm-mobile-bar     { display: none; }
#dm-mobile-results { display: none; }

@media (max-width: 768px) {

    /* Map fills the full screen */
    #dm-wrapper {
        height:     100vh;
        height:     100svh;
        min-height: 480px;
    }

    #dm-map {
        position: absolute;
        top:      0;
        right:    0;
        bottom:   0;
        left:     0;
    }

    /* Hide desktop-only elements */
    #dm-overlay { display: none; }
    #dm-sidebar { display: none; }

    /* ── Floating search bar ─────────────────────────────────────────────── */
    #dm-mobile-bar {
        display:  block;
        position: absolute;
        top:      var(--dm-header-h);   /* sits just below the site header */
        left:     12px;
        right:    12px;
        z-index:  20;
    }

    #dm-mobile-input-wrap {
        height:     46px;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
    }

    /* ── Mobile results overlay ─────────────────────────────────────────── */
    #dm-mobile-results {
        position:        absolute;
        top:             calc(var(--dm-header-h) + 60px);  /* below search bar */
        left:            12px;
        right:           12px;
        z-index:         20;
        display:         -webkit-flex;
        display:                 flex;
        -webkit-flex-direction: column;
                flex-direction: column;
        gap:             4px;
    }

}


/* ══════════════════════════════════════════════════════════════════════════════
   8. MOBILE: RESULT CARDS
   Overlaid on the map. Max 2 shown, then a hint to scroll down.
══════════════════════════════════════════════════════════════════════════════ */
.dm-mobile-card {
    background:   var(--dm-white);
    border:       1px solid var(--dm-border);
    border-radius: 10px;
    box-shadow:   0 2px 10px rgba(0, 0, 0, 0.09);
}

.dm-mobile-card:active {
    background:   var(--dm-orange-bg);
    border-color: var(--dm-orange);
}

/* "No results" message */
.dm-mobile-no-results {
    background:   rgba(255, 255, 255, 0.92);
    border:       1px solid var(--dm-border);
    border-radius: 10px;
    padding:      14px;
    text-align:   center;
    font-size:    12px;
    color:        var(--dm-text-hint);
}

/* "+N more — scroll down" hint */
.dm-mobile-more {
    background:   rgba(255, 255, 255, 0.90);
    border:       1px solid var(--dm-border);
    border-radius: 8px;
    padding:      8px 14px;
    font-size:    11px;
    color:        var(--dm-text-meta);
    text-align:   center;
}

.dm-mobile-more span {
    color:       var(--dm-orange);
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════════
   9. LEAFLET OVERRIDES
══════════════════════════════════════════════════════════════════════════════ */

/* Map background colour while tiles load */
.leaflet-container { background: #DDD8CE !important; }

/* Remove tile seam lines — browsers sometimes render a 1px gap between tiles.
   Extending each tile by 1px and hiding overflow covers the gap. */
.leaflet-tile {
    border:  0 !important;
    padding: 0 !important;
}
.leaflet-tile-pane {
    /* Slight overdraw hides sub-pixel rounding gaps between tiles */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

/* Zoom controls */
.leaflet-control-zoom a {
    color:        var(--dm-text-dark) !important;
    border-color: var(--dm-border)    !important;
    background:   var(--dm-white)     !important;
    font-size:    16px !important;
    line-height:  1 !important;
}

.leaflet-control-zoom a:hover {
    background: var(--dm-orange-bg) !important;
    color:      var(--dm-orange)    !important;
}

/* Keep attribution readable but unobtrusive */
.leaflet-control-attribution {
    font-size: 9px !important;
    background: rgba(255, 255, 255, 0.75) !important;
}

/* ── Custom pin ──────────────────────────────────────────────────────────── */
.dm-pin {
    background:  transparent !important;
    border:      none !important;
    display:     -webkit-flex;
    display:             flex;
    -webkit-align-items:     center;
            align-items:     center;
    -webkit-justify-content: center;
            justify-content: center;
    cursor: pointer;
}

.dm-pin-dot {
    width:         13px;
    height:        13px;
    background:    var(--dm-orange);
    border:        2.5px solid var(--dm-white);
    border-radius: 50%;
    box-shadow:    0 1px 5px rgba(0, 0, 0, 0.28);
    -webkit-transition: -webkit-transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
            transition:         transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Active state — inverted colours, slightly larger */
.dm-pin-dot--active {
    background:    var(--dm-white);
    border-color:  var(--dm-orange);
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}

/* ── Map popup ───────────────────────────────────────────────────────────── */
.dm-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 10px !important;
    border:        1px solid var(--dm-border) !important;
    box-shadow:    0 4px 18px rgba(0, 0, 0, 0.09) !important;
    padding:       0 !important;
    overflow:      hidden !important;
}

/* Hide the default arrow tip */
.dm-popup-wrap .leaflet-popup-tip-container { display: none !important; }

.dm-popup-wrap .leaflet-popup-content {
    margin:      0 !important;
    font-family: inherit !important;
}

.dm-popup-wrap .leaflet-popup-close-button {
    top:   8px  !important;
    right: 10px !important;
    color: #AAAAAA !important;
}

/* Popup inner layout */
.dm-popup { padding: 14px 16px; min-width: 195px; }

.dm-popup-logo {
    display:     block;
    width:       100%;
    max-height:  52px;
    object-fit:  contain;
    margin-bottom: 8px;
    border-radius: 4px;
}

.dm-popup-name {
    font-size:     14px;
    font-weight:   700;
    color:         var(--dm-text-dark);
    margin-bottom: 5px;
}

.dm-popup-region {
    display:       inline-block;
    font-size:     10px;
    font-weight:   700;
    background:    var(--dm-orange-bg);
    color:         var(--dm-orange-text);
    padding:       2px 8px;
    border-radius: 10px;
    margin-bottom: 7px;
}

.dm-popup-contact {
    display:       block;
    font-size:     12px;
    color:         var(--dm-text-meta);
    margin-bottom: 3px;
}

.dm-popup-email {
    display:       block;
    font-size:     12px;
    color:         var(--dm-orange-text);
    text-decoration: none;
    margin-bottom: 3px;
}

.dm-popup-email:hover { text-decoration: underline; }

.dm-popup-btn {
    display:       block;
    margin-top:    10px;
    text-align:    center;
    background:    var(--dm-orange);
    color:         var(--dm-white) !important;
    font-size:     12px;
    font-weight:   600;
    padding:       8px;
    border-radius: 6px;
    text-decoration: none;
    -webkit-transition: background 0.12s;
            transition: background 0.12s;
}

.dm-popup-btn:hover { background: var(--dm-orange-hover); }


/* ══════════════════════════════════════════════════════════════════════════════
   10. ACCESSIBILITY
══════════════════════════════════════════════════════════════════════════════ */

/* Visible focus rings for keyboard navigation */
.dm-card:focus-visible,
.dm-mobile-card:focus-visible {
    outline:        2px solid var(--dm-orange);
    outline-offset: 2px;
}

#dm-back:focus-visible,
.dm-clear-btn:focus-visible {
    outline:        2px solid var(--dm-orange);
    outline-offset: 2px;
}

/* Respect the user's preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
    #dm-overlay,
    #dm-sidebar,
    .dm-card,
    .dm-mobile-card,
    .dm-card-arrow,
    .dm-pin-dot {
        -webkit-transition: none !important;
                transition: none !important;
    }
}