/* ==========================================================================
   Profile Map — assets/style.css  v3.0.0
   Full 100vw width, 16:9 aspect-ratio, loading spinner, error state.
   100% Google-free — designed for Leaflet + OpenStreetMap tiles.
   ========================================================================== */

/* ── Wrapper: full viewport-width breakout ───────────────────────────────── */
.profile-map-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: 18px;
    margin-bottom: 6px;
    overflow: hidden;
    background: #e8e8e8;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    box-sizing: border-box;
}

/* ── 16:9 canvas — the map renders here, not in the wrapper ───────────────
   Dedicated child element so Leaflet never destroys the wrapper's
   loading overlay or data-* attributes.                                  */
.profile-map-canvas {
    display: block;
    width: 100%;
    /* Modern browsers: true 16:9 */
    aspect-ratio: 16 / 9;
    /* Older browser fallback — padding-top trick */
    min-height: 0;
    background: #e2ddd5;
}

/* Ensure Leaflet's inner panes fill the canvas div exactly */
.profile-map-canvas > .leaflet-container,
.profile-map-canvas > div,
.profile-map-canvas iframe {
    width:  100% !important;
    height: 100% !important;
}

/* Leaflet attribution should stay readable on profile pages */
.profile-map-canvas .leaflet-control-attribution {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.85);
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.profile-map-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(250, 250, 250, 0.92);
    color: #555;
    font-size: 14px;
    pointer-events: none;
}

/* Spinner ring */
.profile-map-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid #ccc;
    border-top-color: #5a9b3e; /* OSM/Leaflet green */
    border-radius: 50%;
    animation: profile-map-spin 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes profile-map-spin {
    to { transform: rotate(360deg); }
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.profile-map-canvas--error {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff8e1;
    color: #795548;
    font-size: 14px;
    border: 1px dashed #ffca28;
}

.profile-map-error-pin {
    font-size: 22px;
    line-height: 1;
}

/* ── WP Admin user-edit.php: map contained inside admin layout ───────────── */
.profile-map-admin-row td {
    padding: 0 !important;
}

.profile-map-admin-row .profile-map-wrapper {
    /* Cancel the full-bleed breakout inside narrow admin columns */
    position: static;
    width: 100%;
    left: auto;
    margin-left: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .profile-map-canvas {
        min-height: 180px;
    }
}

/* ── General WP-admin containment (profile page, non-table context) ──────── */
.wp-admin .profile-map-wrapper:not(.profile-map-admin-row .profile-map-wrapper) {
    position: static;
    width: 100%;
    left: auto;
    margin-left: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

/* ============================================================================
   BuddyPress "Map" Profile Tab
   ============================================================================ */

.profile-map-tab {
    padding: 8px 0 24px;
}

.profile-map-notice {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.profile-map-notice--success {
    background: #e7f5ea;
    border: 1px solid #5a9b3e;
    color: #2e5d22;
}

/* Inline edit form (owner / admin only) */
.profile-map-edit-form {
    margin-bottom: 18px;
}

.profile-map-edit-label {
    display: none;
}

/* Unified horizontal flex row — input + button stay side-by-side on every
   viewport width. The input flex-grows/shrinks to absorb available space;
   the button keeps its natural width. On narrow mobile screens, the input
   shrinks down (text scrolls inside it) but the row never wraps to two lines. */
.profile-map-edit-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.profile-map-edit-input {
    flex: 1 1 0;            /* grow + shrink, basis 0 → takes all remaining space */
    min-width: 0;           /* allow shrinking below content size on narrow screens */
    height: 40px;
    max-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 38px;      /* height − 2×border → vertically centers single-line text */
    border: solid 1px #527293 !important;
    border-radius: 25px;
    background: #fff;
    box-sizing: border-box;
}

.profile-map-edit-input:focus {
    outline: none;
    border-color: #527293 !important;
    box-shadow: 0 0 0 2px rgba(82, 114, 147, 0.25);
}

/* High-specificity selector defeats theme/BP button styles (margin-top, etc.)
   that would otherwise push the button below the input. */
div.profile-map-edit-row button.button.profile-map-edit-submit {
    flex: 0 0 auto;
    margin: 5px 0px 0px 0px;
    margin-top: 0;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1;
    background: #84b370;
    color: #fff;
    border: 1px solid #4a8233;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

div.profile-map-edit-row button.button.profile-map-edit-submit:hover,
div.profile-map-edit-row button.button.profile-map-edit-submit:focus {
    background: #4a8233;
}

.profile-map-edit-help {
    margin: 10px 0 0;
    font-size: 12px;
    color: #6c7884;
}

/* Empty state when no address is set yet */
.profile-map-empty {
    padding: 28px 20px;
    text-align: center;
    color: #6c7884;
    background: #fafbfc;
    border: 1px dashed #c3c4c7;
    border-radius: 6px;
    font-size: 14px;
}

/* Inside the tab, cancel the full-viewport-width breakout — the map should
   fit inside the tab content area, not blast through it edge-to-edge. */
.profile-map-wrapper--tab {
    position: relative;
    width: 100%;
    left: auto;
    margin-left: 0;
    margin-top: 0;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    margin-bottom: -20px;
}

/* ============================================================================
   Profile nav — SVG icon prefix for the "Map" tab
   ============================================================================ */
.profile-map-tab-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    width: 16px;
    height: 16px;
    position: relative;
    top: -1px; /* optical alignment with x-height of link text */
}

/* ============================================================================
   Hide the auto-generated "Map" sub-nav on the Map tab page.
   BP creates this internally because we set `default_subnav_slug` so the
   screen function can fire — but it's visually redundant since the main tab
   already says "Map". The body class is added in screen() via body_class filter.
   ============================================================================ */
body.profile-map-tab-active #buddypress #subnav,
body.profile-map-tab-active #buddypress .item-list-tabs.item-subnav,
body.profile-map-tab-active #buddypress div.item-list-tabs.no-ajax.item-subnav {
    display: none !important;
}