/* -- PAGE WRAP -- */
        .page-wrap {
            max-width: 1160px;
            margin: 0 auto;
            padding: 1.5rem 1.25rem 4rem;
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 1.75rem;
            align-items: start;
        }
        @media (max-width: 900px) {
            .page-wrap { grid-template-columns: 1fr; }
        }
.main-col {min-width:0;}
        /* -- BREADCRUMB -- */
        .breadcrumb {
            max-width: 1160px;
            margin: 1rem auto 0;
            padding: 0 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.78rem;
            color: var(--muted);
            flex-wrap: wrap;
        }
        .breadcrumb a { color: var(--muted); text-decoration: none; }
        .breadcrumb a:hover { color: var(--red); }
        .breadcrumb i { font-size: 0.55rem; color: var(--muted-light); }
        .breadcrumb span { color: var(--text-2); font-weight: 600; }

        /* -- GALLERY -- */
        .gallery {
            border-radius: var(--radius);
            overflow: hidden;
            background: #f3f4f6;
            margin-bottom: 1.25rem;
        }

        .gallery-main {
            position: relative;
            aspect-ratio: 16/10;
            background: #e5e7eb;
            cursor: zoom-in;
            overflow: hidden;
        }

        .gallery-main-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .gallery-main:hover .gallery-main-img { transform: scale(1.02); }

        /* Placeholder when no real image */
        .gallery-main-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
            color: #d1d5db;
            background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
        }

        .gallery-zoom-hint {
            position: absolute;
            bottom: 0.75rem;
            right: 0.75rem;
            background: rgba(0,0,0,0.5);
            color: white;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.3rem 0.7rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            pointer-events: none;
        }

        .gallery-counter {
            position: absolute;
            bottom: 0.75rem;
            left: 0.75rem;
            background: rgba(0,0,0,0.5);
            color: white;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.3rem 0.7rem;
            border-radius: 9999px;
        }

        /* Nav arrows on main image */
        .gallery-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.9);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: var(--text);
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            z-index: 2;
        }
        .gallery-arrow:hover { background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .gallery-arrow.prev { left: 0.75rem; }
        .gallery-arrow.next { right: 0.75rem; }

        /* Thumbnails */
        .gallery-thumbs {
            display: flex;
            gap: 0.5rem;
            padding: 0.5rem;
            background: #f3f4f6;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .gallery-thumbs::-webkit-scrollbar { display: none; }

        .gallery-thumb {
            flex-shrink: 0;
            width: 72px;
            height: 54px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2.5px solid transparent;
            transition: all 0.18s;
            background: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #d1d5db;
        }
        .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .gallery-thumb.active { border-color: var(--red); }
        .gallery-thumb:hover { border-color: #9ca3af; }
        .gallery-thumb.active:hover { border-color: var(--red); }

        /* -- LIGHTBOX -- */
        .lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 500;
            align-items: center;
            justify-content: center;
        }
        .lightbox.open { display: flex; }

        .lightbox-inner {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-img {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 8px;
        }

        .lightbox-placeholder {
            width: 80vw;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8rem;
            color: rgba(255,255,255,0.2);
        }

        .lightbox-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.12);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .lightbox-close:hover { background: rgba(255,255,255,0.25); }

        .lightbox-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.12);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .lightbox-arrow:hover { background: rgba(255,255,255,0.25); }
        .lightbox-arrow.prev { left: 1rem; }
        .lightbox-arrow.next { right: 1rem; }

        .lightbox-counter {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.7);
            font-size: 0.82rem;
            font-weight: 600;
        }

        /* -- AD TITLE BLOCK -- */
        .ad-header { margin-bottom: 1.25rem; }

        .ad-cats {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.6rem;
            flex-wrap: wrap;
        }

        .ad-cat-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            background: #fef2f2;
            color: var(--red);
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.22rem 0.65rem;
            border-radius: 9999px;
            text-decoration: none;
        }
        .ad-cat-badge:hover { background: var(--red); color: white; }
        .ad-cat-badge i { font-size: 0.68rem; }

        .ad-cat-sep { color: var(--muted-light); font-size: 0.8rem; }

        .ad-main-title {
            font-size: clamp(1.35rem, 3vw, 1.75rem);
            font-weight: 800;
            color: var(--text);
            line-height: 1.25;
            margin-bottom: 0.75rem;
        }

        .ad-meta-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            font-size: 0.8rem;
            color: var(--muted);
        }

        .ad-meta-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .ad-meta-item i { font-size: 0.75rem; }

        /* -- PRICE BOX -- */
        .ad-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem 1.25rem;
            background: white;
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 1.25rem;
        }

        .ad-price-main {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--red);
            line-height: 1;
        }
        .ad-price-main small {
            font-size: 1rem;
            font-weight: 500;
            color: var(--muted);
        }

        .ad-price-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-fav-lg {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.55rem 1.1rem;
            border: 1.5px solid var(--border);
            border-radius: 9999px;
            background: white;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-fav-lg:hover, .btn-fav-lg.active { border-color: var(--red); color: var(--red); }
        .btn-fav-lg.active i { font-weight: 900; }

        .btn-share {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.55rem 1.1rem;
            border: 1.5px solid var(--border);
            border-radius: 9999px;
            background: white;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-share:hover { border-color: var(--text-2); color: var(--text); }

        /* -- DESCRIPTION -- */
        .ad-section {
            background: white;
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 1.25rem;
            overflow: hidden;
        }

        .ad-section-head {
            padding: 0.9rem 1.25rem;
            border-bottom: 1px solid var(--border);
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .ad-section-head i { color: var(--muted); font-size: 0.82rem; }

        .ad-section-body { padding: 1.1rem 1.25rem; }

        .ad-description {
            font-size: 0.92rem;
            color: var(--text-2);
            line-height: 1.75;
            white-space: pre-line;
            word-break: break-all;
    overflow-wrap: break-word;
    word-wrap: break-word; /* IE fallback */
        }

        /* Read more toggle */
        .desc-collapsed { max-height: 140px; overflow: hidden; position: relative; }
        .desc-collapsed::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 48px;
            background: linear-gradient(transparent, white);
        }
        .btn-read-more {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 0.75rem;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--red);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        .btn-read-more:hover { text-decoration: underline; }

        /* -- DETAILS TABLE -- */
        .details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }
        @media (max-width: 480px) {
            .details-grid { grid-template-columns: 1fr; }
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--border);
        }
        .detail-item:nth-last-child(-n+2) { border-bottom: none; }
        @media (max-width: 480px) {
            .detail-item:last-child { border-bottom: none; }
            .detail-item:nth-last-child(2) { border-bottom: 1px solid var(--border); }
        }

        .detail-label {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .detail-value {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .detail-value i { font-size: 0.78rem; color: var(--red); }

        /* -- LOCATION MAP PLACEHOLDER -- */
        .map-placeholder {
            height: 180px;
            background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
            border-radius: var(--radius-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: var(--muted);
            font-size: 0.85rem;
            font-weight: 500;
        }
        .map-placeholder i { font-size: 2rem; color: var(--red); opacity: 0.6; }

        /* -- SIDEBAR -- */
        .sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1rem; }

        .sidebar-card {
            background: white;
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .sidebar-card-head {
            padding: 0.9rem 1.25rem;
            border-bottom: 1px solid var(--border);
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .sidebar-card-head i { color: var(--muted); font-size: 0.82rem; }

        .sidebar-card-body { padding: 1.1rem 1.25rem; }

        /* Seller info */
        .seller-row {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .seller-avatar {
            width: 48px;
            text-transform:uppercase;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--red), var(--red-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 800;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .seller-name, .seller-name a { text-decoration:none;font-weight: 700; font-size: 0.95rem; color: var(--text); }
        .seller-since { font-size: 0.75rem; color: var(--muted); margin-top: 0.1rem; }
        .seller-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            background: #ecfdf5;
            color: #059669;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 9999px;
            margin-top: 0.2rem;
        }

        /* Contact details */
        .contact-detail {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.7rem 0;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: var(--text);
            transition: color 0.2s;
        }
        .contact-detail:last-of-type { border-bottom: none; }
        .contact-detail:hover { color: var(--red); }

        .contact-icon {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            background: #fef2f2;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--red);
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .contact-label { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
        .contact-value { font-size: 0.88rem; font-weight: 700; color: var(--text); }

        /* CTA buttons */
        .btn-call {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.8rem;
            background: var(--red);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s;
            margin-bottom: 0.5rem;
        }
        .btn-call:hover { background: var(--red-dark); }

        .btn-msg {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.8rem;
            background: white;
            color: var(--red);
            border: 1.5px solid var(--red);
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s;
        }
        .btn-msg:hover { background: var(--red); color: white; }

        /* Phone reveal */
        .phone-reveal {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.65rem 0.9rem;
            background: #f9fafb;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .phone-reveal:hover { border-color: var(--red); }
        .phone-number {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--text);
            letter-spacing: 0.5px;
        }
        .phone-number.hidden {
            filter: blur(5px);
            user-select: none;
        }
        .phone-reveal-btn {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--red);
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* -- CONTACT FORM -- */
        .contact-form-wrap { display: none; }
        .contact-form-wrap.open { display: block; }

        .contact-form { display: flex; flex-direction: column; gap: 0.75rem; }
        .form-control {
            width: 100%;
            padding: 0.65rem 0.9rem;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 0.88rem;
            color: var(--text);
            background: white;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-control:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
        textarea.form-control { resize: vertical; min-height: 100px; }
        .form-label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.3rem; display: block; }

        .btn-send {
            width: 100%;
            padding: 0.75rem;
            background: var(--red);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        .btn-send:hover { background: var(--red-dark); }

        /* -- REPORT -- */
        .report-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            color: var(--muted);
            cursor: pointer;
            background: none;
            border: none;
            font-family: inherit;
            padding: 0;
            margin-top: 0.5rem;
            width: 100%;
        }
        .report-link:hover { color: var(--red); }

        /* -- SIMILAR ADS -- */
        .similar-section {
            max-width: 1160px;
            margin: 0 auto 3rem;
            padding: 0 1.25rem;
        }

        .similar-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .similar-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
        }

        /* Reuse ad-card styles from listings.css */
        .similar-section .ad-card .ad-img { height: 145px; }

        /* -- TOAST -- */
        .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #111827; color: white; padding: 0.75rem 1.25rem; border-radius: 10px; font-size: 0.88rem; font-weight: 500; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 999; transform: translateY(120%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
        .toast.show { transform: translateY(0); }
        .toast i { color: #4ade80; }

        /* -- FAB -- */
        .fab { display: none; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; width: 56px; height: 56px; background: var(--red); border: none; border-radius: 50%; color: white; font-size: 1.35rem; cursor: pointer; box-shadow: 0 4px 20px rgba(196,30,58,0.5); align-items: center; justify-content: center; transition: transform 0.2s; }
        .fab:hover { transform: scale(1.1); }
        @media (max-width: 640px) { .fab { display: flex; } }

        /* Mobile sidebar comes after main on mobile */
        @media (max-width: 900px) {
            .sidebar { position: static; }
        }

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

@media (max-width: 480px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}

.detail-item {
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* Desna kolona na desktopu ima border-left */
.details-grid .detail-item:nth-child(even) {
    border-left: 1px solid var(--border);
}

/* Zadnja dva nemaju border-bottom */
.details-grid .detail-item:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Na mobilnom svaki ima border-bottom osim zadnjeg */
@media (max-width: 480px) {
    .details-grid .detail-item:nth-child(even) {
        border-left: none;
    }
    .details-grid .detail-item:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }
    .details-grid .detail-item:last-child {
        border-bottom: none;
    }
}

.ad-price-actions {
    position: relative;
}

.share-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 190px;
    z-index: 50;
    overflow: hidden;
}

.share-dropdown.open { display: block; }

.share-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: var(--text-2);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.share-item:last-child { border-bottom: none; }
.share-item:hover { background: var(--bg); color: var(--text); }
.share-item i { width: 18px; text-align: center; font-size: 1rem; flex-shrink: 0; }

.share-sep {
    height: 1px;
    background: var(--border);
    margin: 0;
}