/* Pickup spots on a Toronto map (pickup_spots.py, static/js/pickup-map.js): the order form,
   the "Pickup spot" card on /account and the staff map in Settings > Team. Square corners like the rest of the site. */
.pickup-spots {
    margin-top: var(--space-md, 16px);
    text-align: left;
}
.pickup-spots[hidden] { display: none; }
.pickup-spots__hint {
    margin: 4px 0 10px;
    color: var(--color-text-3, #959dbb);
    font-size: 0.82rem;
    line-height: 1.45;
}
.pickup-map {
    width: 100%;
    height: 280px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    background: var(--color-bg-raised, #22103a);
    z-index: 0;   /* keep Leaflet's panes under the site's sticky nav and modals */
}
.pickup-map--tall { height: 360px; }
.pickup-map--pickable { cursor: crosshair; }
.pickup-map .leaflet-tile-pane {
    /* Dark map to sit on the dark page; the Daniels theme is white, so it keeps the normal map */
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6);
}
[data-theme="daniels"] .pickup-map .leaflet-tile-pane { filter: none; }
.pickup-map .leaflet-control-attribution {
    font-size: 0.68rem;
}
.pickup-map .leaflet-tooltip {
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.3;
}
.pickup-spots__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 8px;
    margin: 10px 0;
}
.pickup-spot {
    position: relative;
    display: block;
    cursor: pointer;
    min-width: 0;
}
.pickup-spot input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pickup-spot__face {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pickup-spot__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pickup-spot__face strong {
    color: var(--color-text, #f5f3ff);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}
.pickup-spot__face small {
    color: var(--color-text-3, #959dbb);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}
.pickup-spot input:checked + .pickup-spot__face {
    border-color: var(--color-accent, #6366f1);
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.14));
}
.pickup-spot[hidden] { display: none; }
.pickup-spot input:focus-visible + .pickup-spot__face {
    outline: 2px solid var(--color-focus-ring, #a5b4fc);
    outline-offset: 2px;
}

/* /account: a staff member's own spot */
.pickup-own__status {
    margin: 0 0 var(--space-md, 16px);
    font-size: 0.9rem;
    line-height: 1.45;
}
.pickup-own__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
    align-items: flex-end;
    margin-bottom: var(--space-md, 16px);
}
.pickup-own__row .input { flex: 1 1 200px; min-width: 0; }
.pickup-own__switch {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: var(--space-md, 16px);
    cursor: pointer;
}
.pickup-own__switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-accent, #6366f1); flex-shrink: 0; }

/* Person cards above a staff map (Settings > Team): a click moves the map to that person */
.pickup-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.pickup-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    background: var(--color-glass, rgba(255, 255, 255, 0.04));
    color: var(--color-text, #f5f3ff);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.pickup-person span { overflow-wrap: anywhere; min-width: 0; }
.pickup-person:hover, .pickup-person[aria-pressed="true"] {
    border-color: var(--color-accent, #6366f1);
    background: var(--color-accent-soft, rgba(99, 102, 241, 0.14));
}
.pickup-person:disabled { cursor: default; opacity: 0.6; }
.pickup-person:focus-visible { outline: 2px solid var(--color-focus-ring, #a5b4fc); outline-offset: 2px; }

/* Settings > Team: everyone's spot */
.pickup-team__list {
    list-style: none;
    margin: var(--space-sm, 8px) 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 0.85rem;
}
.pickup-team__list li { overflow-wrap: anywhere; }

/* Order form: "Only show areas that stock my material", with a ? that explains it on hover, focus or tap */
.pickup-spots__filter {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
}
.pickup-spots__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-2, #c7cbe0);
    cursor: pointer;
    user-select: none;
}
.pickup-spots__check input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-accent, #6366f1);
    cursor: pointer;
}
.pickup-spots__tip-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    background: transparent;
    color: var(--color-text-3, #959dbb);
    font: inherit;
    font-size: 0.72rem;
    line-height: 1;
    cursor: help;
}
.pickup-spots__tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    width: min(320px, 100%);
    padding: 8px 10px;
    border: 1px solid var(--color-border, rgba(165, 180, 252, 0.14));
    background: var(--color-bg-raised, #22103a);
    color: var(--color-text, #f5f3ff);
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.pickup-spots__filter:hover .pickup-spots__tip,
.pickup-spots__tip-btn:focus-visible ~ .pickup-spots__tip,
.pickup-spots__tip-btn:focus ~ .pickup-spots__tip {
    visibility: visible;
    opacity: 1;
}
[data-theme="daniels"] .pickup-spots__tip { background: #ffffff; color: #111111; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.pickup-spots__empty {
    margin: 10px 0;
    color: var(--color-text-3, #959dbb);
    font-size: 0.82rem;
    line-height: 1.45;
}
.pickup-spots__empty[hidden] { display: none; }