/* ─────────────────────────────────────────────
   Floor Plan Overlay — Styles
   ───────────────────────────────────────────── */

/* ── Container ── */
.fpo-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: #333;
}
.fpo-property-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.fpo-notes {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* ── Legend ── */
.fpo-legend {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.fpo-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.fpo-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.15);
}
.fpo-legend-available .fpo-legend-swatch { background: rgba(34, 139, 34, 0.25); border-color: #228B22; }
.fpo-legend-leased   .fpo-legend-swatch { background: rgba(200, 50, 50, 0.2);  border-color: #c83232; }
.fpo-legend-pending  .fpo-legend-swatch { background: rgba(218, 165, 32, 0.25); border-color: #DAA520; }
.fpo-legend-amenity  .fpo-legend-swatch { background: rgba(90, 90, 200, 0.2);  border-color: #5a5ac8; }

/* ── Floor Plan Wrapper ── */
.fpo-floor-plan {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0; /* removes gap below image */
}
.fpo-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Hotspot ── */
.fpo-hotspot {
    position: absolute;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}
.fpo-hotspot:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* Status colors — semi-transparent overlays */
.fpo-status-available {
    background: rgba(34, 139, 34, 0.12);
    border: 2px solid rgba(34, 139, 34, 0.5);
}
.fpo-status-available:hover,
.fpo-status-available:focus {
    background: rgba(34, 139, 34, 0.25);
    box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.2);
}

.fpo-status-leased {
    background: rgba(200, 50, 50, 0.08);
    border: 2px solid rgba(200, 50, 50, 0.35);
}
.fpo-status-leased:hover,
.fpo-status-leased:focus {
    background: rgba(200, 50, 50, 0.18);
    box-shadow: 0 0 0 3px rgba(200, 50, 50, 0.15);
}

.fpo-status-pending {
    background: rgba(218, 165, 32, 0.12);
    border: 2px solid rgba(218, 165, 32, 0.5);
}
.fpo-status-pending:hover,
.fpo-status-pending:focus {
    background: rgba(218, 165, 32, 0.25);
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.2);
}

.fpo-status-amenity {
    background: rgba(90, 90, 200, 0.08);
    border: 2px dashed rgba(90, 90, 200, 0.4);
}
.fpo-status-amenity:hover,
.fpo-status-amenity:focus {
    background: rgba(90, 90, 200, 0.16);
    box-shadow: 0 0 0 3px rgba(90, 90, 200, 0.15);
}

/* ── Invisible mode: hotspots transparent until hover ── */
.fpo-invisible-mode .fpo-hotspot {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.fpo-invisible-mode .fpo-hotspot:hover,
.fpo-invisible-mode .fpo-hotspot:focus {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4) !important;
}
/* Status-specific reveal colors still apply on hover in invisible mode */
.fpo-invisible-mode .fpo-status-available:hover,
.fpo-invisible-mode .fpo-status-available:focus {
    background: rgba(34, 139, 34, 0.18) !important;
    border-color: rgba(34, 139, 34, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.15) !important;
}
.fpo-invisible-mode .fpo-status-leased:hover,
.fpo-invisible-mode .fpo-status-leased:focus {
    background: rgba(200, 50, 50, 0.18) !important;
    border-color: rgba(200, 50, 50, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(200, 50, 50, 0.15) !important;
}
.fpo-invisible-mode .fpo-status-pending:hover,
.fpo-invisible-mode .fpo-status-pending:focus {
    background: rgba(218, 165, 32, 0.2) !important;
    border-color: rgba(218, 165, 32, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.15) !important;
}
.fpo-invisible-mode .fpo-status-amenity:hover,
.fpo-invisible-mode .fpo-status-amenity:focus {
    background: rgba(90, 90, 200, 0.18) !important;
    border-color: rgba(90, 90, 200, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(90, 90, 200, 0.15) !important;
}

/* ── Tooltip ── */
.fpo-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    white-space: nowrap;
    font-size: 0.82rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 10;
}
/* Arrow */
.fpo-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}
.fpo-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #ddd;
}

.fpo-hotspot:hover .fpo-tooltip,
.fpo-hotspot:focus .fpo-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip if hotspot is near the top — flip below */
.fpo-hotspot[data-tooltip-flip="true"] .fpo-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
}
.fpo-hotspot[data-tooltip-flip="true"] .fpo-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
}
.fpo-hotspot[data-tooltip-flip="true"] .fpo-tooltip::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ddd;
}

.fpo-tooltip strong {
    font-size: 0.9rem;
}
.fpo-tooltip-sqft {
    color: #777;
}
.fpo-tooltip-price {
    font-weight: 600;
    color: #228B22;
}

/* Status badges */
.fpo-badge-available { color: #228B22; font-weight: 600; }
.fpo-badge-leased    { color: #c83232; font-weight: 600; }
.fpo-badge-pending   { color: #DAA520; font-weight: 600; }
.fpo-badge-amenity   { color: #5a5ac8; font-weight: 600; }

/* ── Modal Overlay ── */
.fpo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.fpo-modal-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* ── Modal ── */
.fpo-modal {
    background: #fff;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
    overflow: hidden; /* so photo clips to rounded corners */
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.fpo-modal-overlay[aria-hidden="false"] .fpo-modal {
    transform: translateY(0);
}

/* Photo strip at the top */
.fpo-modal-photo-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f0f0f0;
}
.fpo-modal-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inner padding area (below photo if present) */
.fpo-modal-inner {
    padding: 1.75rem 2rem 2rem;
}

.fpo-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: #555;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.fpo-modal-close:hover { background: #fff; color: #111; }

.fpo-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.fpo-modal-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.fpo-modal-details .fpo-detail-label {
    font-weight: 600;
    color: #555;
}
.fpo-modal-details .fpo-detail-value {
    color: #333;
}
.fpo-modal-description {
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.fpo-modal-description:empty { display: none; }

.fpo-modal-notes {
    font-size: 0.78rem;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.fpo-modal-notes:empty { display: none; }

/* CTA buttons */
.fpo-modal-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.fpo-modal-cta:empty { display: none; }

.fpo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s;
}
.fpo-btn:active { transform: scale(0.97); }

.fpo-btn-primary {
    background: #228B22;
    color: #fff;
}
.fpo-btn-primary:hover { background: #1e7a1e; }

.fpo-btn-secondary {
    background: #f0f0f0;
    color: #333;
}
.fpo-btn-secondary:hover { background: #e0e0e0; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .fpo-tooltip {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }
    .fpo-modal-photo-wrap {
        height: 150px;
    }
    .fpo-modal-inner {
        padding: 1rem 1.25rem 1.25rem;
    }
    .fpo-modal-title {
        font-size: 1.1rem;
    }
    .fpo-legend {
        font-size: 0.72rem;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
}

/* ── Error state ── */
.fpo-error {
    padding: 1rem;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    font-size: 0.9rem;
}