/* ═══════════════════════════════════════════
   KREMS APARTMENTS v2 — Filter + Accordion + Lightbox
   Brand: #172c41 (navy) · #b29259 (orange)
═══════════════════════════════════════════ */

.krems-wrap {
    --k-navy:        #172c41;
    --k-navy-pale:   #eaf0f5;
    --k-orange:      #b29259;
    --k-orange-pale: #f7f1e8;
    --k-white:       #ffffff;
    --k-bg:          #f8f9fb;
    --k-border:      #e2e8ed;
    --k-text:        #1a2a36;
    --k-muted:       #7a8f9e;
    --k-radius:      4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--k-text);
    background: var(--k-white);
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── FILTER BAR ── */
.krems-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    padding: 1.25rem 1.5rem;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius);
    margin-bottom: 1.25rem;
}
.krems-filter-group { display: flex; flex-direction: column; gap: 5px; }
.krems-filter-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted);
}
.krems-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.krems-chip {
    padding: 5px 13px;
    border: 1.5px solid var(--k-border);
    background: var(--k-white);
    font-size: 12px; font-weight: 500; color: var(--k-text);
    cursor: pointer; border-radius: 20px;
    transition: all 0.15s; font-family: inherit; line-height: 1;
}
.krems-chip:hover  { border-color: var(--k-navy); color: var(--k-navy); }
.krems-chip.active { background: var(--k-navy); border-color: var(--k-navy); color: var(--k-white); }

.krems-select {
    padding: 6px 28px 6px 10px;
    border: 1.5px solid var(--k-border);
    background: var(--k-white);
    font-size: 12px; font-weight: 500; color: var(--k-text);
    font-family: inherit; border-radius: var(--k-radius);
    cursor: pointer; outline: none; min-width: 140px;
    transition: border-color 0.15s; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8f9e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.krems-select:focus { border-color: var(--k-navy); }
.krems-filter-sort  { margin-left: auto; }

.krems-reset {
    padding: 6px 16px; background: transparent;
    border: 1.5px solid var(--k-border);
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--k-muted); cursor: pointer; border-radius: var(--k-radius);
    font-family: inherit; transition: all 0.15s; align-self: flex-end;
}
.krems-reset:hover { border-color: var(--k-orange); color: var(--k-orange); }

/* ── RESULTS META ── */
.krems-results-meta {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 0.75rem; padding: 0 2px;
}
.krems-count { font-size: 13px; color: var(--k-muted); }
.krems-count strong { color: var(--k-navy); font-weight: 700; }

/* ── VIEW TOGGLE ── */
.krems-view-toggle { display: flex; gap: 4px; }
.krems-view-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--k-border); background: var(--k-white);
    color: var(--k-muted); cursor: pointer; border-radius: var(--k-radius); transition: all 0.15s;
}
.krems-view-btn.active            { background: var(--k-navy); border-color: var(--k-navy); color: var(--k-white); }
.krems-view-btn:hover:not(.active){ border-color: var(--k-navy); color: var(--k-navy); }

/* ── VIEW STATES ── */
.krems-view               { display: none; }
.krems-view.active        { display: block; }
.krems-view--cards.active { display: grid; }

/* ── TABLE ── */
.krems-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.krems-table thead th {
    padding: 10px 12px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--k-muted); text-align: left; border-bottom: 2px solid var(--k-border);
    white-space: nowrap; background: var(--k-bg);
}
.krems-table tbody tr.krems-row {
    border-bottom: 1px solid var(--k-border); cursor: pointer; transition: background 0.12s;
}
.krems-table tbody tr.krems-row:hover { background: var(--k-navy-pale); }
.krems-table tbody tr.krems-row.open  { background: var(--k-navy-pale); }
.krems-table tbody td { padding: 10px 12px; vertical-align: middle; }

/* expand icon — now on the RIGHT */
.krems-expand-cell { width: 44px; text-align: center; }

/* thumbnail cell — LEFT */
.krems-thumb-cell { width: 90px; padding: 6px 10px !important; }
.krems-row-thumb {
    width: 76px; height: 52px;
    object-fit: cover; display: block;
    border-radius: 3px;
    border: 1.5px solid var(--k-border);
}
.krems-row-thumb--empty {
    width: 76px; height: 52px;
    background: var(--k-bg);
    border-radius: 3px;
    border: 1.5px solid var(--k-border);
}
.krems-expand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border: 1.5px solid var(--k-border); border-radius: 50%;
    font-size: 14px; color: var(--k-muted);
    transition: all 0.25s; line-height: 1; font-weight: 300;
}
tr.open .krems-expand-icon {
    background: var(--k-navy); border-color: var(--k-navy);
    color: var(--k-white); transform: rotate(45deg);
}

/* ── ACCORDION ROW ── */
tr.krems-accordion-row > td {
    padding: 0 !important;
    border-bottom: 2px solid var(--k-orange) !important;
}
.krems-accordion-inner {
    overflow: hidden; max-height: 0;
    transition: max-height 0.38s ease;
}
.krems-accordion-inner.open { max-height: 420px; }

.krems-accordion-body {
    display: flex; gap: 1.25rem; align-items: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--k-navy-pale);
}
.krems-accordion-imgs  { display: flex; gap: 12px; flex-wrap: wrap; }
.krems-thumb-wrap      { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.krems-thumb-wrap:hover .krems-thumb { opacity: 0.85; transform: scale(1.02); }
.krems-thumb {
    width: 155px; height: 105px; object-fit: cover;
    border-radius: 3px; display: block;
    border: 1.5px solid rgba(2,60,99,0.15);
    transition: opacity 0.15s, transform 0.15s;
}
.krems-thumb-caption {
    font-size: 11px; color: var(--k-muted); font-weight: 500;
    text-align: center; max-width: 155px; line-height: 1.3;
}

.krems-accordion-details {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px 24px; padding-left: 1.25rem;
    border-left: 2px solid rgba(2,60,99,0.12);
}
.krems-detail-row       { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(2,60,99,0.06); }
.krems-detail-row-label { color: var(--k-muted); }
.krems-detail-row-val   { font-weight: 500; color: var(--k-text); }

.krems-accordion-actions { display: flex; align-items: flex-end; padding-left: 1rem; }
.krems-detail-btn {
    display: inline-block; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--k-orange); text-decoration: none;
    padding: 7px 18px; border: 1.5px solid var(--k-orange);
    border-radius: var(--k-radius); transition: all 0.15s;
    white-space: nowrap; cursor: pointer;
}
.krems-detail-btn:hover { background: var(--k-orange); color: var(--k-white); text-decoration: none; }

/* ── TABLE CELL HELPERS ── */
.krems-apt-name   { font-weight: 600; color: var(--k-navy); font-size: 13px; margin-bottom: 3px; }
.krems-type-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
}
.krems-badge-garden    { background: #e8f5e9; color: #2e7d32; }
.krems-badge-balcony   { background: #e3f2fd; color: #1565c0; }
.krems-badge-penthouse { background: var(--k-orange-pale); color: var(--k-orange); }
.krems-floor-badge     { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 3px; }
.krems-floor-eg  { background: #e8f5e9; color: #2e7d32; }
.krems-floor-og  { background: #e3f2fd; color: #1565c0; }
.krems-floor-dg  { background: var(--k-orange-pale); color: var(--k-orange); }
.krems-rooms-num  { font-size: 26px; font-weight: 700; color: var(--k-navy); line-height: 1; }
.krems-price-main { font-weight: 700; color: var(--k-navy); font-size: 14px; white-space: nowrap; }
.krems-price-tbd  { font-size: 12px; color: var(--k-muted); font-style: italic; }
.krems-price-psm  { font-size: 11px; color: var(--k-muted); margin-top: 1px; }
.krems-outdoor    { font-size: 12px; color: var(--k-muted); line-height: 1.5; }
.krems-outdoor span {
    display: inline-block; background: var(--k-bg);
    border: 1px solid var(--k-border); border-radius: 3px;
    padding: 1px 6px; margin: 1px 2px 1px 0; font-size: 11px;
}

/* ── CARDS ── */
.krems-view--cards { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.krems-card {
    background: var(--k-white); border: 1px solid var(--k-border);
    border-radius: 6px; overflow: hidden; cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}
.krems-card:hover { box-shadow: 0 4px 20px rgba(23,44,65,.12); transform: translateY(-2px); }
.krems-card.open  { box-shadow: 0 4px 20px rgba(23,44,65,.15); border-color: var(--k-orange); transform: none; }
.krems-card-body  { padding: 1rem; }

/* desktop top layout */
.krems-card-top--desktop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.krems-card-top--mobile  { display: none; }
.krems-card-label-row    { display: none; }

.krems-card-rooms { font-size: 36px; font-weight: 800; color: var(--k-navy); line-height: 1; }
.krems-card-rooms-label { font-size: 10px; color: var(--k-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.krems-card-price { font-size: 17px; font-weight: 700; color: var(--k-orange); white-space: nowrap; text-align: right; }
.krems-card-psm   { font-size: 11px; color: var(--k-muted); text-align: right; margin-top: 1px; }
.krems-card-divider { height: 1px; background: var(--k-border); margin: 0.75rem 0; }
.krems-card-row   { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; gap: 8px; }
.krems-card-row-label { color: var(--k-muted); }
.krems-card-row-val   { color: var(--k-text); font-weight: 500; text-align: right; }
/* hide price row on desktop (already shown in top) */
.krems-card-rows-mobile { display: none; }

/* card accordion */
.krems-card-accordion { overflow: hidden; max-height: 0; transition: max-height 0.38s ease; background: var(--k-navy-pale); }
.krems-card-accordion.open { max-height: 500px; }
.krems-card-accordion-body { padding: 1rem; }
.krems-card-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.75rem; }
.krems-card-thumb-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.krems-card-thumb-wrap:hover img { opacity: 0.85; }
.krems-card-thumb { width: 118px; height: 78px; object-fit: cover; border-radius: 3px; border: 1.5px solid var(--k-border); transition: opacity 0.15s; }
.krems-card-thumb-cap { font-size: 10px; color: var(--k-muted); text-align: center; max-width: 118px; }
.krems-card-detail-btn {
    display: block; text-align: center; padding: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--k-orange); border: 1.5px solid var(--k-orange); border-radius: var(--k-radius);
    text-decoration: none; transition: all 0.15s; cursor: pointer; margin-top: 0.5rem;
}
.krems-card-detail-btn:hover { background: var(--k-orange); color: var(--k-white); text-decoration: none; }

/* ── EMPTY STATE ── */
.krems-empty {
    text-align: center; padding: 3rem 1.5rem; color: var(--k-muted);
    font-size: 14px; border: 1px dashed var(--k-border); border-radius: var(--k-radius);
}
.krems-empty p { margin-bottom: 1rem; }

/* ── LIGHTBOX ── */
.krems-lightbox {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.93);
    align-items: center; justify-content: center;
}
.krems-lightbox.active { display: flex; }
.krems-lb-inner { display: flex; flex-direction: column; align-items: center; }
.krems-lb-img   { max-width: 85vw; max-height: 78vh; object-fit: contain; border-radius: 3px; display: block; user-select: none; }
.krems-lb-caption { color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 10px; letter-spacing: 0.05em; }
.krems-lb-counter { color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 4px; }
.krems-lb-close {
    position: fixed; top: 1.5rem; right: 1.5rem;
    background: transparent; border: none; color: rgba(255,255,255,0.7);
    font-size: 28px; cursor: pointer; line-height: 1; transition: color 0.15s; z-index: 100000;
}
.krems-lb-close:hover { color: #fff; }
.krems-lb-prev, .krems-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 40px; cursor: pointer;
    padding: 0.25rem 0.9rem; line-height: 1;
    transition: background 0.15s; z-index: 100000; border-radius: 3px;
}
.krems-lb-prev { left: 1.5rem; }
.krems-lb-next { right: 1.5rem; }
.krems-lb-prev:hover, .krems-lb-next:hover { background: rgba(255,255,255,0.2); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .krems-wrap { padding: 1rem; }
    .krems-filters { gap: 0.75rem; }
    .krems-filter-sort { margin-left: 0; }
    .krems-view--table { display: none !important; }
    .krems-view--cards { display: grid !important; grid-template-columns: 1fr 1fr; }
    .krems-view-btn[data-view="table"] { display: none; }
    .krems-accordion-body { flex-direction: column; }
    .krems-accordion-details { border-left: none; padding-left: 0; border-top: 1px solid var(--k-border); padding-top: 0.75rem; margin-top: 0.5rem; grid-template-columns: 1fr; }

    /* Mobile card layout */
    .krems-card-top--desktop { display: none; }
    .krems-card-top--mobile {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 0.75rem;
        align-items: center;
        margin-bottom: 0;
    }
    .krems-card-label-row {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--k-navy);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--k-border);
        line-height: 1.3;
    }
    .krems-card-divider { display: block; margin: 0.5rem 0; }
    .krems-card-rows-mobile { display: flex; }

    .krems-card-thumb-mobile {
        display: block;
        width: 80px; height: 60px;
        object-fit: cover;
        border-radius: 3px;
        border: 1.5px solid var(--k-border);
    }
    .krems-card-thumb-mobile--empty {
        display: block;
        width: 80px; height: 60px;
        background: var(--k-bg);
        border-radius: 3px;
        border: 1.5px solid var(--k-border);
    }
    .krems-card-top-right {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .krems-card-top-right .krems-card-rooms { font-size: 28px; }
    .krems-card-body { padding: 0.75rem; }
}
@media (max-width: 480px) {
    .krems-view--cards { grid-template-columns: 1fr !important; }
    .krems-lb-prev { left: 0.5rem; }
    .krems-lb-next { right: 0.5rem; }
}

/* ── INQUIRY POPUP ── */
.krems-popup-overlay {
    display: none !important;
    position: fixed !important; inset: 0 !important; z-index: 99998 !important;
    background: rgba(23,44,65,0.65) !important;
    align-items: center !important; justify-content: center !important;
    padding: 1rem !important;
}
.krems-popup-overlay.active { display: flex !important; }

.krems-popup {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 2rem 2rem 1.5rem !important;
    width: 100% !important; max-width: 480px !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(23,44,65,0.3) !important;
    animation: kremsPop 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
@keyframes kremsPop {
    from { opacity:0; transform: scale(0.96) translateY(10px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}

.krems-popup-close {
    position: absolute !important; top: 1rem !important; right: 1rem !important;
    background: transparent !important; border: none !important;
    font-size: 20px !important; color: #7a8f9e !important;
    cursor: pointer !important; line-height: 1 !important;
    width: 28px !important; height: 28px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; transition: color 0.15s !important;
}
.krems-popup-close:hover { color: #172c41 !important; }

.krems-popup-eyebrow {
    font-size: 10px !important; font-weight: 600 !important;
    letter-spacing: 0.15em !important; text-transform: uppercase !important;
    color: #b29259 !important; margin: 0 0 0.35rem !important;
    text-align: center !important;
}
.krems-popup-title {
    font-size: 20px !important; font-weight: 700 !important;
    color: #172c41 !important; margin: 0 0 1.5rem !important;
    line-height: 1.2 !important; text-align: center !important;
}

.krems-popup-form {
    display: flex !important; flex-direction: column !important; gap: 1rem !important;
    margin: 0 !important; padding: 0 !important;
}
.krems-popup-row {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important;
}

.krems-popup-field {
    display: flex !important; flex-direction: column !important; gap: 5px !important;
}
.krems-popup-field label {
    font-size: 12px !important; font-weight: 600 !important;
    color: #1a2a36 !important; letter-spacing: 0.02em !important;
    text-align: left !important; display: block !important;
    margin: 0 !important; padding: 0 !important;
    text-transform: none !important;
}
.krems-popup-field .req { color: #c0392b !important; }
.krems-popup-field input {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8ed !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #1a2a36 !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.krems-popup-field input:focus {
    border-color: #172c41 !important;
    box-shadow: 0 0 0 3px rgba(23,44,65,0.08) !important;
}
.krems-popup-field input.error { border-color: #c0392b !important; }

.krems-popup-submit {
    display: block !important;
    width: 100% !important; padding: 13px !important;
    background: #b29259 !important;
    border: none !important; border-radius: 4px !important;
    font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: 0.05em !important; color: #fff !important;
    cursor: pointer !important; font-family: inherit !important;
    transition: background 0.15s, transform 0.1s !important;
    margin-top: 0.25rem !important; text-align: center !important;
}
.krems-popup-submit:hover   { background: #c4a469 !important; transform: translateY(-1px) !important; }
.krems-popup-submit:active  { transform: translateY(0) !important; }
.krems-popup-submit:disabled{ opacity: 0.65 !important; cursor: not-allowed !important; transform: none !important; }

.krems-popup-fine {
    text-align: center !important; font-size: 12px !important;
    color: #7a8f9e !important; margin: 0.25rem 0 0 !important;
}

.krems-popup-status {
    font-size: 13px !important; border-radius: 4px !important;
    text-align: center !important; transition: all 0.2s !important;
    padding: 0 !important; min-height: 0 !important;
}
.krems-popup-status.success {
    background: #eaf5ea !important; color: #2e7d32 !important;
    padding: 10px !important; border: 1px solid #c8e6c9 !important;
}
.krems-popup-status.error {
    background: #fdecea !important; color: #c0392b !important;
    padding: 10px !important; border: 1px solid #f5c6cb !important;
}

@media (max-width: 480px) {
    .krems-popup { padding: 1.5rem 1.25rem 1.25rem !important; }
    .krems-popup-row { grid-template-columns: 1fr !important; }
}