/* Floor plan styling for the villascc.com detail page (dark glass theme).
   The SVG from villabuchung.lib.floorplan carries only geometry + fp-* classes;
   everything visual lives here.  Keep this file identical to
   villacc/villacc-ng/css/floorplan.css -- the editor's website preview loads
   this copy. */

.fp-wrap {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    background: rgba(52, 58, 64, 0.35);
}
.fp-wrap .fp-floor {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    font-family: 'Varela', sans-serif;
}

/* rooms: translucent tints on the dark glass */
.fp-room { fill: rgba(255, 255, 255, 0.07); stroke: none; }
.fp-room.fp-bedroom  { fill: rgba(255, 255, 255, 0.13); }
.fp-room.fp-bathroom { fill: rgba(140, 200, 230, 0.16); }
.fp-room.fp-kitchen  { fill: rgba(255, 220, 150, 0.12); }
.fp-room.fp-dining   { fill: rgba(255, 220, 150, 0.08); }
.fp-room.fp-living,
.fp-room.fp-family   { fill: rgba(255, 255, 255, 0.09); }
.fp-room.fp-office   { fill: rgba(255, 255, 255, 0.10); }
.fp-room.fp-laundry,
.fp-room.fp-closet,
.fp-room.fp-hallway,
.fp-room.fp-entry    { fill: rgba(255, 255, 255, 0.05); }
.fp-room.fp-garage   { fill: rgba(255, 255, 255, 0.04); }
.fp-room.fp-lanai,
.fp-room.fp-terrace  { fill: rgba(160, 220, 170, 0.10); }
.fp-room.fp-pool     { fill: rgba(160, 220, 170, 0.07); }
.fp-room.fp-dock     { fill: rgba(120, 180, 220, 0.10); }
.fp-room.fp-garden   { fill: rgba(160, 220, 170, 0.12); }

/* items */
.fp-item { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.fp-item-pool { fill: rgba(90, 170, 220, 0.45); stroke: rgba(170, 215, 245, 0.8); }
.fp-item-spa  { fill: rgba(90, 170, 220, 0.55); stroke: rgba(170, 215, 245, 0.8); }
.fp-item-stairs { fill: rgba(255, 255, 255, 0.06); }
.fp-stairs-tread { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.fp-item-bbq, .fp-item-island, .fp-item-tub, .fp-item-shower { fill: rgba(255, 255, 255, 0.14); }
.fp-item-label { fill: rgba(255, 255, 255, 0.85); font-size: 10px; }

/* walls */
.fp-wall { stroke: rgba(255, 255, 255, 0.85); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fp-wall-exterior { stroke-width: 4; }
.fp-wall-interior { stroke-width: 1.6; stroke: rgba(255, 255, 255, 0.6); }
.fp-wall-free.fp-wall-full { stroke-width: 2.2; stroke: rgba(255, 255, 255, 0.7); }
.fp-wall-free.fp-wall-half { stroke-width: 1.4; stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 6 3; }

/* openings */
.fp-door-leaf  { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.4; }
.fp-door-swing { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.fp-window-pane { stroke: rgba(170, 215, 245, 0.9); stroke-width: 1.2; }
.fp-window-sill { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.fp-slider-pane { stroke: rgba(170, 215, 245, 0.95); stroke-width: 2; stroke-linecap: round; }
.fp-passage { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; stroke-dasharray: 2 3; }

/* labels */
.fp-label { fill: #ffffff; font-weight: bold; }
.fp-sublabel { fill: rgba(255, 255, 255, 0.7); }
.fp-area { fill: rgba(255, 255, 255, 0.5); }
.fp-bed-body { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.25; }
.fp-bed-pillow { fill: rgba(255, 255, 255, 0.35); stroke: none; }
.fp-bed-line { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.2; }

/* fixtures (beds, TVs) -- only rendered with the composition option */
.fp-fixture .fp-tv-body { fill: rgba(255, 255, 255, 0.25); stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.08; }
.fp-fixture .fp-tv-screen { stroke: rgba(170, 215, 245, 0.95); stroke-width: 0.16; }

/* floor switcher + legend around the plan */
.fp-floors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fp-floors .fp-floor-btn {
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50rem;
    padding: 6px 16px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.fp-floors .fp-floor-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
.fp-floors .fp-floor-btn.active { color: #fff; background: rgba(52, 58, 64, 0.85); border-color: rgba(255, 255, 255, 0.6); }
.fp-pane { display: none; }
.fp-pane.active { display: block; }
.fp-nojs .fp-pane { display: block; margin-bottom: 20px; }
.fp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.fp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fp-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid rgba(170, 215, 245, 0.95); }
.fp-legend i.fp-legend-door { border-top: 1.4px solid rgba(255, 255, 255, 0.8); }
.fp-legend i.fp-legend-wall { border-top: 4px solid rgba(255, 255, 255, 0.85); }
.fp-legend i.fp-legend-half { border-top: 1.4px dashed rgba(255, 255, 255, 0.5); }
.fp-hint { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); margin-top: 10px; }
.fp-zoom { cursor: zoom-in; }