/**
 * IsoFloor Frontend Styles
 * 
 * BEM-scoped styles for theme independence
 * Extracted from index.html and converted to BEM
 *
 * @package IsoFloor
 * @author Granit Nebiu
 * @copyright All rights reserved
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables (Global - can be overridden by backend settings)
   ========================================================================== */

:root {
    /* Colors - defaults, overridden by backend settings */
    --isofloor-bg: #ffffff;
    --isofloor-panel: #f8fafc;
    --isofloor-stroke: #e5e7eb;
    --isofloor-text: #0f172a;
    --isofloor-muted: #6b7280;
    --isofloor-free: #16a34a;
    --isofloor-reserved: #d97706;
    --isofloor-sold: #dc2626;
    --isofloor-rented: #2563eb;
    --isofloor-hover: #2563eb;
    --isofloor-stroke-hover: #000000;
    --isofloor-floor-heading: rgba(186, 151, 120, 0.2);
    --isofloor-card-highlight: rgba(186, 151, 120, 0.3);

    /* Animations - defaults, overridden by backend settings */
    --isofloor-floor-translate: -800px;
    --isofloor-roof-translate: -800px;
    --isofloor-duration: 0.5s;
    --isofloor-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Container
   ========================================================================== */

.isofloor {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--isofloor-text);
    line-height: 1.5;
}

.isofloor *,
.isofloor *::before,
.isofloor *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.isofloor__layout {
    margin: 0 100px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

@media (max-width: 1100px) {
    .isofloor__layout {
        flex-direction: column;
    }

    .isofloor__panel--sidebar {
        width: 100% !important;
    }
}

/* ==========================================================================
   Panels
   ========================================================================== */

.isofloor__panel {
    background: var(--isofloor-panel);
    border: 1px solid var(--isofloor-stroke);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.isofloor__panel--main {
    flex: 1;
    /* min-width: 0; */
    width: 100%;
}

.isofloor__panel--sidebar {
    width: 380px;
    flex-shrink: 0;
}

/* ==========================================================================
   Controls (Filters)
   ========================================================================== */

.isofloor__controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.isofloor__control {
    font-size: 12px;
    color: var(--isofloor-muted);
    display: grid;
    gap: 6px;
}

.isofloor__control-label {
    font-size: 12px;
    color: var(--isofloor-muted);
}

.isofloor__select {
    background: #fff;
    border: 1px solid var(--isofloor-stroke);
    color: var(--isofloor-text);
    border-radius: 10px;
    padding: 8px;
    font-size: 14px;
    width: 100%;
}

/* ==========================================================================
   Legend
   ========================================================================== */

.isofloor__legend {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.isofloor__legend-item {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff !important;
    text-transform: uppercase;
}

.isofloor__legend-item--free {
    background: var(--isofloor-free) !important;
    color: #ffffff !important;
}

.isofloor__legend-item--reserved {
    background: var(--isofloor-reserved) !important;
    color: #ffffff !important;
}

.isofloor__legend-item--sold {
    background: var(--isofloor-sold) !important;
    color: #ffffff !important;
}

.isofloor__legend-item--rented {
    background: var(--isofloor-rented) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SVG Container
   ========================================================================== */

.isofloor__svg-wrap {
    background: #fff;
    border: 1px solid var(--isofloor-stroke);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    overflow: visible;
    border-radius: 14px;
    padding: 150px 20px 100px 20px;
    position: relative;
    margin-top: 12px;
}

.isofloor__svg-wrap svg {
    width: 70%;
    height: auto;
    max-width: 900px;
    background: transparent;
    transform: scale(0.8);
    transform-origin: center top;
    overflow: visible !important;
}

/* ==========================================================================
   SVG Element Styles
   ========================================================================== */

.isofloor svg {
    background: transparent !important;
}

.isofloor svg polygon:not([fill]),
.isofloor svg path:not([fill]) {
    fill: transparent !important;
}

.isofloor svg,
.isofloor svg *,
.isofloor svg line,
.isofloor svg polyline,
.isofloor svg polygon,
.isofloor svg path,
.isofloor svg rect,
.isofloor svg circle,
.isofloor svg ellipse {
    stroke: #000000 !important;
    stroke-width: 2 !important;
}

/* ==========================================================================
   Apartment Elements
   ========================================================================== */

.isofloor [id^="apt_"] {
    cursor: default;
    transition: all 0.3s ease;
}

/* Pointer cursor only when this apartment has detail modal enabled (per-apartment setting) */
.isofloor [id^="apt_"][data-allow-modal="true"] {
    cursor: pointer;
}

.isofloor [id^="apt_"] polygon,
.isofloor [id^="apt_"] line,
.isofloor [id^="apt_"] polyline {
    transition: all 0.25s ease;
}

.isofloor [id^="apt_"]>g[opacity="0"] {
    opacity: 1 !important;
}

/* Default State - White */
.isofloor [id^="apt_"]>g polygon,
.isofloor [id^="apt_"]>g path {
    fill: #ffffff !important;
}

/* Hover States */
.isofloor [id^="apt_"][data-status="free"]:hover>g polygon,
.isofloor [id^="apt_"][data-status="free"]:hover>g path,
.isofloor [id^="apt_"][data-status="free"]:hover>g>polygon,
.isofloor [id^="apt_"][data-status="free"]:hover>g>path {
    fill: var(--isofloor-free) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="reserved"]:hover>g polygon,
.isofloor [id^="apt_"][data-status="reserved"]:hover>g path,
.isofloor [id^="apt_"][data-status="reserved"]:hover>g>polygon,
.isofloor [id^="apt_"][data-status="reserved"]:hover>g>path {
    fill: var(--isofloor-reserved) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="sold"]:hover>g polygon,
.isofloor [id^="apt_"][data-status="sold"]:hover>g path,
.isofloor [id^="apt_"][data-status="sold"]:hover>g>polygon,
.isofloor [id^="apt_"][data-status="sold"]:hover>g>path {
    fill: var(--isofloor-sold) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="rented"]:hover>g polygon,
.isofloor [id^="apt_"][data-status="rented"]:hover>g path,
.isofloor [id^="apt_"][data-status="rented"]:hover>g>polygon,
.isofloor [id^="apt_"][data-status="rented"]:hover>g>path {
    fill: var(--isofloor-rented) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

/* Selected States - Solid Colors */
.isofloor [id^="apt_"].isofloor__apt--selected>g polygon,
.isofloor [id^="apt_"].isofloor__apt--selected>g path {
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="free"].isofloor__apt--selected>g polygon,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--selected>g path,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--selected>g>polygon,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--selected>g>path {
    fill: var(--isofloor-free) !important;
}

.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--selected>g polygon,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--selected>g path,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--selected>g>polygon,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--selected>g>path {
    fill: var(--isofloor-reserved) !important;
}

.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--selected>g polygon,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--selected>g path,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--selected>g>polygon,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--selected>g>path {
    fill: var(--isofloor-sold) !important;
}

.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--selected>g polygon,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--selected>g path,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--selected>g>polygon,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--selected>g>path {
    fill: var(--isofloor-rented) !important;
}

/* Status Highlight */
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--highlight>g polygon,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--highlight>g path,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--highlight>g>polygon,
.isofloor [id^="apt_"][data-status="free"].isofloor__apt--highlight>g>path {
    fill: var(--isofloor-free) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--highlight>g polygon,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--highlight>g path,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--highlight>g>polygon,
.isofloor [id^="apt_"][data-status="reserved"].isofloor__apt--highlight>g>path {
    fill: var(--isofloor-reserved) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--highlight>g polygon,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--highlight>g path,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--highlight>g>polygon,
.isofloor [id^="apt_"][data-status="sold"].isofloor__apt--highlight>g>path {
    fill: var(--isofloor-sold) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--highlight>g polygon,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--highlight>g path,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--highlight>g>polygon,
.isofloor [id^="apt_"][data-status="rented"].isofloor__apt--highlight>g>path {
    fill: var(--isofloor-rented) !important;
    stroke: #000000 !important;
    stroke-width: 3 !important;
}

/* Dimmed State - DISABLED (no opacity changes) */

/* ==========================================================================
   Floor Elements
   ========================================================================== */

.isofloor [id^="floor_"] {
    transition: transform var(--isofloor-duration) var(--isofloor-easing);
}

.isofloor [id^="floor_"].isofloor__floor--dim {
    opacity: 0.15;
}

/* Active floor stays in place */
.isofloor [id^="floor_"].isofloor__floor--active {
    transform: translateY(0px);
}

/* Floors below stay in place */
.isofloor [id^="floor_"].isofloor__floor--below {
    transform: translateY(0px);
}

/* Floors above move up */
.isofloor [id^="floor_"].isofloor__floor--above {
    transform: translateY(var(--isofloor-floor-translate));
}

/* ==========================================================================
   Slab Elements
   ========================================================================== */

.isofloor [id^="slab_"] polygon {
    fill: #ffffff !important;
}

.isofloor [id^="slab_"]>g[opacity] {
    opacity: 1 !important;
}

.isofloor [id^="slab_floor_"] polygon,
.isofloor [id^="slab_floor_"] path {
    fill: #ffffff !important;
}

/* ==========================================================================
   Roof Elements
   ========================================================================== */

.isofloor [id^="roof_"] {
    pointer-events: auto;
    cursor: pointer;
    transition: transform var(--isofloor-duration) var(--isofloor-easing);
}

.isofloor [id^="roof_"]>g[opacity="0"] {
    opacity: 1 !important;
}

.isofloor [id^="roof_"],
.isofloor [id^="roof_"] *,
.isofloor [id^="roof_"] polygon,
.isofloor [id^="roof_"] path,
.isofloor [id^="roof_"] rect,
.isofloor [id^="roof_"] circle,
.isofloor [id^="roof_"] ellipse,
.isofloor [id^="roof_"]>g,
.isofloor [id^="roof_"]>g *,
.isofloor [id^="roof_"]>g polygon,
.isofloor [id^="roof_"]>g path {
    fill: #ffffff !important;
}

/* Roof moves up when floor activated */
.isofloor [id^="roof_"].isofloor__roof--active {
    transform: translateY(var(--isofloor-roof-translate));
}

/* ==========================================================================
   Stats
   ========================================================================== */

.isofloor__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.isofloor__stat {
    text-align: center;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--isofloor-stroke);
}

.isofloor__stat-num {
    font-size: 22px;
    font-weight: 600;
}

.isofloor__stat-label {
    font-size: 11px;
    color: var(--isofloor-muted);
}

.isofloor__stat--free .isofloor__stat-num {
    color: var(--isofloor-free) !important;
}

.isofloor__stat--reserved .isofloor__stat-num {
    color: var(--isofloor-reserved) !important;
}

.isofloor__stat--sold .isofloor__stat-num {
    color: var(--isofloor-sold) !important;
}

.isofloor__stat--rented .isofloor__stat-num {
    color: var(--isofloor-rented) !important;
}

/* ==========================================================================
   Card List
   ========================================================================== */

.isofloor__list {
    display: grid;
    gap: 10px;
    max-height: 800px;
    overflow: auto;
}

.isofloor__floor-heading {
    font-weight: bold;
    font-size: 14px;
    color: #0f172a;
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--isofloor-floor-heading) !important;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.isofloor__floor-heading:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.isofloor__card {
    border: 1px solid var(--isofloor-stroke);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.isofloor__card:hover {
    border-color: #000000;
}

.isofloor__card--highlight {
    border-color: #000000 !important;
    background: var(--isofloor-card-highlight) !important;
}

.isofloor__card-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.isofloor__card-meta {
    font-size: 13px;
    color: var(--isofloor-muted);
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}

.isofloor__card-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.isofloor__card-button {
    width: 100%;
    padding: 8px 12px;
    background: var(--isofloor-button-bg, #ba9778) !important;
    color: var(--isofloor-button-text, #ffffff) !important;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.isofloor__card-button:hover {
    filter: brightness(0.9) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Badge
   ========================================================================== */

.isofloor__badge {
    display: inline-block;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: bold;
    color: #ffffff !important;
}

.isofloor__badge--free {
    background: var(--isofloor-free) !important;
    color: #ffffff !important;
}

.isofloor__badge--reserved {
    background: var(--isofloor-reserved) !important;
    color: #ffffff !important;
}

.isofloor__badge--sold {
    background: var(--isofloor-sold) !important;
    color: #ffffff !important;
}

.isofloor__badge--rented {
    background: var(--isofloor-rented) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Hover Card (Tooltip)
   ========================================================================== */

.isofloor__hover-card {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    min-width: 180px;
    display: none;
    color: #ffffff;
}

.isofloor__hover-card--visible {
    display: block;
}

.isofloor__hover-card--free {
    background: var(--isofloor-free) !important;
}

.isofloor__hover-card--reserved {
    background: var(--isofloor-reserved) !important;
}

.isofloor__hover-card--sold {
    background: var(--isofloor-sold) !important;
}

.isofloor__hover-card--rented {
    background: var(--isofloor-rented) !important;
}

.isofloor__hover-card-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
    color: #ffffff;
}

.isofloor__hover-card-status {
    font-size: 13px;
    font-weight: bold;
    text-transform: capitalize;
    color: #ffffff;
}

.isofloor__hover-card-meta {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.9;
    color: #ffffff;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.isofloor__modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.isofloor__modal--visible {
    display: flex;
}

.isofloor__modal-content {
    background: #fff;
    border-radius: 20px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.isofloor__modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    z-index: 10001;
    transition: all 0.2s;
    line-height: 1;
    color: #000;
}

.isofloor__modal-close:hover {
    transform: scale(1.2);
    opacity: 0.7;
}

.isofloor__modal-contact-wrap {
    padding: 16px 0;
    margin-top: 8px;
    border-top: 1px solid var(--isofloor-stroke);
}

.isofloor__modal-contact-info {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--isofloor-muted);
}

.isofloor__modal-contact-info .isofloor__modal-contact-apt {
    display: block;
    margin-top: 4px;
    color: var(--isofloor-text);
    font-size: 15px;
}

.isofloor__modal-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--isofloor-button-bg, #ba9778);
    color: var(--isofloor-button-text, #ffffff);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.isofloor__modal-contact-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.isofloor__modal-info {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}

.isofloor__modal-plan {
    flex: 1;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 40px;
    border-left: 2px solid #e5e7eb;
    gap: 16px;
}

.isofloor__modal-plan img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.isofloor__modal-media-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.isofloor__modal-media-tab {
    background: #fff;
    border: 1px solid var(--isofloor-stroke);
    color: var(--isofloor-text);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.isofloor__modal-media-tab:hover {
    border-color: #000000;
}

.isofloor__modal-media-tab--active {
    background: var(--isofloor-button-bg, #ba9778);
    color: #ffffff;
    border-color: transparent;
}

.isofloor__modal-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--isofloor-stroke);
    border-radius: 12px;
    padding: 16px;
    min-height: 360px;
}

.isofloor__modal-media iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 12px;
}

.isofloor__modal-plan-placeholder {
    color: var(--isofloor-muted);
    text-align: center;
}

.isofloor__modal-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}

.isofloor__modal-subtitle {
    font-size: 18px;
    color: #6b7280;
    margin-bottom: 30px;
}

.isofloor__modal-section {
    margin-bottom: 30px;
}

.isofloor__modal-app-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.isofloor__modal-app-container .isofloor__modal-section {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    margin-bottom: 0;
}

.isofloor__modal-section--description {
    margin-top: 50px;
}

.isofloor__modal-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.isofloor__modal-value {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
}

.isofloor__modal-status {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-transform: capitalize;
    color: #ffffff !important;
}

.isofloor__modal-status--free {
    background: var(--isofloor-free) !important;
    color: #ffffff !important;
}

.isofloor__modal-status--reserved {
    background: var(--isofloor-reserved) !important;
    color: #ffffff !important;
}

.isofloor__modal-status--sold {
    background: var(--isofloor-sold) !important;
    color: #ffffff !important;
}

.isofloor__modal-status--rented {
    background: var(--isofloor-rented) !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .isofloor__modal-content {
        flex-direction: column;
        max-height: none;
    }

    .isofloor__modal {
        align-items: flex-start;
        padding: 16px;
    }

    .isofloor__modal-plan {
        border-left: none;
        border-top: 2px solid #e5e7eb;
    }

    .isofloor__modal-info {
        flex: 0 0 auto;
        padding: 24px;
        max-height: none;
        overflow-y: visible;
    }

    .isofloor__modal-plan {
        flex: 0 0 auto;
        padding: 20px;
    }

    .isofloor__modal-media {
        min-height: 220px;
    }

    .isofloor__modal-media iframe {
        min-height: 220px;
    }
}

@media(max-width:767px) {
    .isofloor__layout {
        margin: 0 auto;
    }
}

/* ==========================================================================
   CF7 Overlay (above all content, outside .isofloor)
   ========================================================================== */

/* Always use flex so the overlay has real dimensions for reCAPTCHA v2;
   when hidden, use visibility + pointer-events so the widget can render. */
.isofloor__cf7-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
}

.isofloor__cf7-overlay.isofloor__cf7-overlay--visible {
    visibility: visible;
    pointer-events: auto;
}

.isofloor__cf7-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100001;
}

.isofloor__cf7-overlay-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    z-index: 100002;
    padding: 32px;
    margin: auto;
}

.isofloor__cf7-overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.isofloor__cf7-overlay-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.isofloor__cf7-overlay-form {
    margin-top: 8px;
}

.isofloor__cf7-overlay-form .wpcf7-form {
    padding: 0;
}

.isofloor__cf7-overlay-info {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--isofloor-muted, #6b7280);
}

.isofloor__cf7-overlay-info strong {
    display: block;
    margin-top: 4px;
    color: var(--isofloor-text, #0f172a);
    font-size: 15px;
}

body.isofloor__cf7-overlay-open {
    overflow: hidden;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.isofloor--hidden {
    display: none !important;
}