/* ===========================
   KONTENER NA MAPĘ SVG
   =========================== */

.om-svg-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* przycinanie przy zoomie mapy */
}

.om-svg-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   KSZTAŁTY MIESZKAŃ
   =========================== */

/* Domyślnie niewidoczne, ale klikalne */
.om-flat-shape,
.om-flat-shape * {
    /* domyślnie brak wypełnienia, zaraz nadamy je po statusie */
    fill: transparent;
    fill-opacity: 0;
    stroke: none;
    stroke-width: 0;

    /* kształty mają być widoczne (dla delikatnego wypełnienia) */
    opacity: 1;

    transition:
        opacity 0.18s ease,
        fill 0.18s ease,
        fill-opacity 0.18s ease,
        stroke-width 0.18s ease,
        stroke 0.18s ease;
    pointer-events: all;
}


/* Stałe, delikatne wypełnienie wg statusu (desktop + mobile) */

/* WOLNE – lekko zielone wypełnienie */
.om-flat-shape.om-status-wolne,
.om-flat-shape.om-status-wolne * {
    fill: rgba(0, 180, 0, 0.25) !important;
    fill-opacity: 1 !important;
}

/* REZERWACJA – lekko pomarańczowe */
.om-flat-shape.om-status-rezerwacja,
.om-flat-shape.om-status-rezerwacja * {
    fill: rgba(255, 165, 0, 0.55) !important;
    fill-opacity: 1 !important;
}

/* SPRZEDANE – lekko czerwone */
.om-flat-shape.om-status-sprzedane,
.om-flat-shape.om-status-sprzedane * {
    fill: rgba(200, 0, 0, 0.55) !important;
    fill-opacity: 1 !important;
}




/* Statusy – puste, widoczne dopiero na hoverze */
.om-status-wolne,
.om-status-wolne *,
.om-status-rezerwacja,
.om-status-rezerwacja *,
.om-status-sprzedane,
.om-status-sprzedane * {
    /* celowo nic – przed hoverem brak wypełnienia */
}

/* Hover wg statusu */

/* Wolne – zielone */
.om-flat-shape.om-status-wolne:hover,
.om-flat-shape.om-status-wolne:hover * {
    opacity: 1 !important;
    fill: rgba(0, 180, 0, 0.9) !important;
    fill-opacity: 1 !important;
    stroke: rgba(0, 120, 0, 1) !important;
    stroke-width: 3 !important;
}

/* Rezerwacja – pomarańczowe */
.om-flat-shape.om-status-rezerwacja:hover,
.om-flat-shape.om-status-rezerwacja:hover * {
    opacity: 1 !important;
    fill: rgba(255, 165, 0, 0.9) !important;
    fill-opacity: 1 !important;
    stroke: rgba(230, 125, 0, 1) !important;
    stroke-width: 3 !important;
}

/* Sprzedane – czerwone */
.om-flat-shape.om-status-sprzedane:hover,
.om-flat-shape.om-status-sprzedane:hover * {
    opacity: 1 !important;
    fill: rgba(200, 0, 0, 0.9) !important;
    fill-opacity: 1 !important;
    stroke: rgba(160, 0, 0, 1) !important;
    stroke-width: 3 !important;
}

/* Ogólny hover – gdyby brak statusu */
.om-flat-shape:hover,
.om-flat-shape:hover * {
    opacity: 1 !important;
}

/* ===========================
   PRZYCISKI ZOOM MAPY
   =========================== */

.om-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    gap: 6px;
}

.om-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(19, 49, 91, 0.95);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.om-zoom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.45);
    opacity: 0.95;
}

/* ===========================
   TOOLTIP
   =========================== */

.om-tooltip {
    position: absolute;
    z-index: 9999;
    padding: 14px 18px;
    max-width: 280px;

    background: radial-gradient(circle at top left, rgba(255,255,255,0.9), rgba(255,255,255,0.65));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    pointer-events: none;
}

/* Status w tooltipie */
.om-tooltip-status {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

/* Kolory statusów w tooltipie */
.om-tooltip-status-wolne {
    color: #058c3f;
}

.om-tooltip-status-rezerwacja {
    color: #e69500;
}

.om-tooltip-status-sprzedane {
    color: #c00000;
}

/* Niełamanie wartości typu "113,25 m2" */
.om-nowrap {
    white-space: nowrap;
}

/* ===========================
   MODAL (OVERLAY)
   =========================== */

.om-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.om-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.90));
}

.om-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 94vw);
    max-height: 90vh;
    overflow: auto;
    padding: 24px 32px;
    border-radius: 18px;

    background: linear-gradient(135deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72));
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(255,255,255,0.4) inset;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Przycisk zamknięcia – glass, większy i nad wszystkim */
.om-modal-close {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at top left, rgba(255,255,255,0.95), rgba(226,232,240,0.9));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0f172a;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 60;
}

.om-modal-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.35);
    background: radial-gradient(circle at top left, rgba(255,255,255,1), rgba(226,232,240,1));
}

/* ===========================
   TREŚĆ MIESZKANIA W MODALU
   =========================== */

.om-flat-details h2 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f172a;
}

/* Badge statusu w modalu nad tytułem */
.om-flat-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Kolory statusu w modalu */
.om-flat-status-wolne {
    background: #e6f9ec;
    color: #058c3f;
}

.om-flat-status-rezerwacja {
    background: #fff3da;
    color: #e69500;
}

.om-flat-status-sprzedane {
    background: #ffe2e2;
    color: #c00000;
}

/* Lista parametrów mieszkania */
.om-flat-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.om-flat-meta li {
    margin-bottom: 6px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111827;
}

.om-flat-meta strong {
    font-weight: 600;
}

/* Ceny – bez przekreślania najniższej */
.om-price-old {
    text-decoration: none !important;
    color: #666;
    margin-right: 6px;
    font-weight: 400;
}

.om-price-current {
    font-weight: 700;
    color: #c00;
}

.om-flat-content p:last-child {
    margin-bottom: 0;
}

/* Przyciski do planu PDF w modalu */
.om-flat-plan-link {
    margin-top: 18px;
}

.om-plan-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #13315b;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.om-plan-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
    opacity: 0.95;
}

/* Przebicie kolorów linku planu PDF w modalu */
.om-flat-plan-link .om-plan-btn,
.om-flat-plan-link .om-plan-btn:link,
.om-flat-plan-link .om-plan-btn:visited,
.om-flat-plan-link .om-plan-btn:hover,
.om-flat-plan-link .om-plan-btn:active {
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ===========================
   LAYOUT 2 KOLUMN W MODALU
   =========================== */

/* Desktop – dwie kolumny obok siebie, bez zawijania */
.om-flat-details-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
}

/* lewa kolumna – dane */
.om-flat-col.om-flat-col-left {
    flex: 0 0 55%;
    max-width: 55%;
    min-width: 0;
}

/* prawa kolumna – plan */
.om-flat-col.om-flat-col-right {
    flex: 0 0 45%;
    max-width: 45%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zoomowalny wrapper na obrazek */
.om-flat-thumb-wrap.om-flat-thumb-zoomable {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f3f4f6;
}

.om-flat-thumb-wrap.om-flat-thumb-zoomable img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    transform: scale(1);
    transform-origin: 50% 50%;
}

/* Przyciski zoom +/- na obrazku w modalu – na środku u góry planu */
.om-thumb-zoom-controls {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 6px;
}

.om-thumb-zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(19, 49, 91, 0.95);
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.om-thumb-zoom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.45);
    opacity: 0.95;
}

/* Kursory przy dragowaniu planu */
.om-thumb-draggable {
    cursor: grab;
}

.om-thumb-dragging {
    cursor: grabbing;
}

/* ===========================
   MOBILE – MODAL
   =========================== */

@media (max-width: 768px) {

    .om-modal-dialog {
        width: 94vw;
        max-height: 94vh;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .om-flat-details h2 {
        font-size: 20px;
    }

    .om-flat-meta li {
        font-size: 14px;
    }

    .om-flat-details-inner {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .om-flat-col.om-flat-col-left,
    .om-flat-col.om-flat-col-right {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .om-flat-col.om-flat-col-right {
        justify-content: flex-start;
    }

    .om-flat-thumb-wrap.om-flat-thumb-zoomable {
        max-width: 100%;
        max-height: 420px;
    }
}

/* ===========================
   TABELA MIESZKAŃ
   =========================== */

.om-table-wrapper {
    max-width: 1200px;
    margin: 30px auto 0;
    overflow-x: auto;
}

.om-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.om-table th,
.om-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e1e1e1;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.om-table th {
    font-weight: 600;
    background: #f7f7f7;
}

/* Wiersze wg statusu (delikatne tło) */
.om-row-status-wolne td {
    background: #f3fff3;
}

.om-row-status-rezerwacja td {
    background: #fff8eb;
}

.om-row-status-sprzedane td {
    background: #ffecec;
}

/* Link / status w ostatniej kolumnie */
.om-table-link {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    background: #13315b;
    text-decoration: none;
    font-size: 13px;
}

/* przebicie kolorów linków z motywu */
.om-table-wrapper .om-table-link,
.om-table-wrapper .om-table-link:link,
.om-table-wrapper .om-table-link:visited,
.om-table-wrapper .om-table-link:hover,
.om-table-wrapper .om-table-link:active {
    color: #ffffff !important;
    text-decoration: none;
}

.om-table-link:hover {
    opacity: 0.9;
}

.om-table-sold {
    font-size: 13px;
    font-weight: 600;
    color: #c00;
}

/* Sortowalne nagłówki */
.om-table-sortable thead th {
    cursor: pointer;
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.om-table-sortable thead th.om-sort-asc::after,
.om-table-sortable thead th.om-sort-desc::after {
    position: absolute;
    right: 8px;
    font-size: 10px;
    opacity: 0.7;
}

.om-table-sortable thead th.om-sort-asc::after {
    content: "^";
}

.om-table-sortable thead th.om-sort-desc::after {
    content: "ˇ";
}


@media (max-width: 768px) {
    .om-tooltip {
        display: none !important;
    }
}

/* Kursor przy dragowaniu głównej mapy */
.om-svg-wrapper svg {
    cursor: default;
}

.om-svg-wrapper svg.om-map-dragging {
    cursor: grabbing;
}

/* ===========================
   MOBILE – STAŁE PODŚWIETLENIE MIESZKAŃ
   =========================== */
@media (max-width: 768px) {

    /* bazowo wszystkie kształty lekko widoczne */
    .om-flat-shape,
    .om-flat-shape * {
        opacity: 1 !important; /* żeby w ogóle było widać */
        transition:
            opacity 0.18s ease,
            fill 0.18s ease,
            fill-opacity 0.18s ease,
            stroke-width 0.18s ease,
            stroke 0.18s ease;
    }

    /* WOLNE – delikatna zieleń */
    .om-flat-shape.om-status-wolne,
    .om-flat-shape.om-status-wolne * {
        fill: rgba(0, 180, 0, 0.25) !important;
        fill-opacity: 1 !important;
        stroke: rgba(0, 120, 0, 0.7) !important;
        stroke-width: 2 !important;
    }

    /* REZERWACJA – delikatny pomarańcz */
    .om-flat-shape.om-status-rezerwacja,
    .om-flat-shape.om-status-rezerwacja * {
        fill: rgba(255, 165, 0, 0.25) !important;
        fill-opacity: 1 !important;
        stroke: rgba(230, 125, 0, 0.7) !important;
        stroke-width: 2 !important;
    }

    /* SPRZEDANE – delikatna czerwień */
    .om-flat-shape.om-status-sprzedane,
    .om-flat-shape.om-status-sprzedane * {
        fill: rgba(200, 0, 0, 0.25) !important;
        fill-opacity: 1 !important;
        stroke: rgba(160, 0, 0, 0.7) !important;
        stroke-width: 2 !important;
    }

    /* jeśli chcesz BARDZIEJ podświetlić przy tap/hover, można wzmocnić: */
    .om-flat-shape.om-status-wolne:hover,
    .om-flat-shape.om-status-wolne:hover * {
        fill: rgba(0, 180, 0, 0.5) !important;
    }
    .om-flat-shape.om-status-rezerwacja:hover,
    .om-flat-shape.om-status-rezerwacja:hover * {
        fill: rgba(255, 165, 0, 0.5) !important;
    }
    .om-flat-shape.om-status-sprzedane:hover,
    .om-flat-shape.om-status-sprzedane:hover * {
        fill: rgba(200, 0, 0, 0.5) !important;
    }

    /* tooltip i tak mamy wyłączony na mobile – zostaw to jeśli już dodałeś: */
    .om-tooltip {
        display: none !important;
    }
}