/* ======================================================
   RichTea Leaflet Compatibility Fix
   Prevent page-wide image rules (for example home.css's
   img { width:100%; }) from resizing Leaflet tiles/icons.
   This stylesheet is loaded AFTER page styles and Leaflet CSS.
====================================================== */

.leaflet-container {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Leaflet positions tiles absolutely. They must keep their native tile size;
   otherwise a global img { width:100% } rule can stretch each 256px tile to
   the full map width, producing the oversized/broken map seen in checkout. */
.leaflet-container .leaflet-tile {
    width: 256px !important;
    height: 256px !important;
    max-width: none !important;
    max-height: none !important;
}

.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
}

/* Default Leaflet marker/shadow dimensions must not inherit global image
   sizing rules either. */
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

/* Controls may contain image assets as well. */
.leaflet-container .leaflet-control img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
}


/* Self-contained marker used by RichTea instead of Leaflet's default image
   marker. This avoids broken marker-image URLs on hosts/CDNs while keeping
   the pin fully local and draggable. */
.rt-leaflet-marker-wrap {
    background: transparent !important;
    border: 0 !important;
}

.rt-leaflet-marker-pin {
    position: absolute;
    left: 4px;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    background: var(--secondary, #C89B5B);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    transform: rotate(-45deg);
}

.rt-leaflet-marker-pin::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: 5px;
    top: 5px;
    border-radius: 50%;
    background: #fff;
}

/* Rider marker -- a small circular badge with a motorcycle icon, distinct
   from the teardrop .rt-leaflet-marker-pin used for the fixed destination,
   so it's obvious at a glance which dot on the map is moving. */
.rt-rider-marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2e7d32;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

/* Keep every RichTea delivery map inside its intended card/modal width. */
#deliveryPickerMap,
#checkoutModalMap,
#deliveryTrackMap,
#deliveryMap,
#rtTrackMap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}