/**
 * QuickShipper Delivery — checkout map picker styles.
 *
 * Matches the WC form-field aesthetic (label above, full-width control,
 * light hint below). Map height is controlled here so the layout
 * doesn't jump when Google Maps finishes loading.
 */

.qsd-checkout-map-wrap {
    margin: 12px 0 18px;
    padding: 0;
    width: 100%;
    clear: both;
}

.qsd-checkout-map-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.qsd-checkout-map {
    width: 100%;
    height: 320px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6 linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.04) 50%, transparent 55%) no-repeat;
    background-size: 12px 12px;
}

.qsd-checkout-map-hint {
    margin: 6px 0 0 !important;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

.qsd-checkout-map-wrap[data-qsd-map-pending] .qsd-checkout-map::before {
    content: "Loading map…";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 13px;
}

/* Block Checkout (checkout-blocks.js): the map sits at the top of
   "Shipping options", with its own search box. */
.qsd-checkout-map-wrap--blocks {
    margin: 0 0 16px;
}

.qsd-checkout-map-wrap--blocks .qsd-pin-prompt-text,
.qsd-pin-prompt-text--cart {
    margin: 0 0 10px !important;
}

.qsd-checkout-map-search {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    font: inherit;
    font-size: 14px;
}

.qsd-checkout-map-search:focus {
    outline: 2px solid #111827;
    outline-offset: 1px;
}

/* Google's Places autocomplete dropdown — small tweaks so it matches
   our font + border style instead of its default Material look. */
.pac-container {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-top: 4px;
    font-family: inherit;
    z-index: 100000 !important;
}

.pac-item {
    padding: 8px 10px;
    font-size: 13px;
    border-top-color: #f3f4f6;
    cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
    background: #f9fafb;
}

.pac-item-query {
    font-size: 13px;
    color: #111827;
}

@media (max-width: 600px) {
    .qsd-checkout-map {
        height: 260px;
    }
}