:root {
    --bs-body-bg: #121212;
    --bs-body-color: #fff;
    --bs-navbar-bg: #212529;
    --bs-navbar-border: #2c3237;
}

/* ==========================================================================
   1. Základné nastavenia a globálne štýly
   ========================================================================== */

body {display: flex; flex-direction: column; min-height: 100vh}
footer {background-color: var(--bs-body-bg)}
.content-wrapper {min-height: calc(100vh - 160px); padding-bottom: 60px; flex: 1}
img {image-rendering: -webkit-optimize-contrast; image-rendering: high-quality}

i.bi, .bi {
    font-family: 'bootstrap-icons' !important; font-style: normal !important;
    font-weight: normal !important; font-variant: normal !important;
    text-transform: none !important; line-height: 1 !important;
    vertical-align: -.125em; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. Navigácia
   ========================================================================== */
.navbar {background-color: var(--bs-navbar-bg) !important; box-shadow: 0 2px 10px rgba(33, 37, 41, 0.5); padding: 15px 0}
.navbar-brand {font-weight: 800;color: #0080d4 !important;letter-spacing: -1px;}
.navbar-nav .nav-link {color: #e0e0e0 !important;font-weight: 500;transition: color 0.2s ease;}
.navbar-nav .nav-link:hover {color: #fff !important}
.custom-navbar-logo {height: 35px; width: auto; transition: transform 0.3s ease}
.custom-navbar-logo:hover {transform: scale(1.05)}

/* Dropdown menu */
.dropdown-menu {background-color: #1e2227 !important;border: 1px solid var(--bs-navbar-border);border-radius: 10px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4)}
.dropdown-item {color: #e0e0e0 !important}
.dropdown-item:hover {background-color: #0080d4 !important; color: #fff !important}
.dropdown button { opacity: 100 !important; transition: opacity 0.2s; }
div.d-inline-block:hover .dropdown button { opacity: 0.6 !important; }

/* Responzivita navigácie */
@media (max-width: 991.98px) {
    .navbar-collapse {background-color: #1e2227 !important; border: 1px solid var(--bs-navbar-border);border-radius: 12px; padding: 16px; margin-top: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5)}
    .navbar-nav .nav-link {padding: 10px 14px !important;border-radius: 8px}
    .navbar-nav .nav-link:hover {background-color: rgba(255, 255, 255, 0.05)}}

@media (min-width: 992px) {
    .navbar-collapse {background-color: transparent !important; border: none !important; padding: 0 !important; margin-top: 0 !important; box-shadow: none !important}
    .advanced-collapse {display: contents !important}
}

@media (max-width: 767.98px) {
    .border-bottom-sm { border-bottom: 1px solid var(--bs-border-color) !important; }
    .detail-img-container {height: auto; min-height: 300px}
}

@media (min-width: 768px) {
    .border-end-md { border-right: 1px solid var(--bs-border-color) !important; }
    .img-container-responsive { height: 600px; }
    .img-container-responsive img { max-height: 580px; }
}


/* ==========================================================================
   3. Karty a Inzeráty
   ========================================================================== */
.card {border: none; border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; background-color: #212529 !important; color: #ffffff}
.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1)}
.card-title {font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem}
.card-img-top {width: 100%; height: 250px; object-fit: contain; object-position: center; background-color: #000}
.card-text, .card-title, .card-body {overflow-wrap:anywhere; word-break:break-word}
.price-tag {color: #198754; font-weight: 700; font-size: 1.2rem}

/* Špecifické pre inzeráty */
.inzerat-card {border-radius: 12px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}
.inzerat-card:hover {transform: translateY(-5px); border-color: #0dcaf0 !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important}
.inzerat-img-container {height: 280px; background-color: #212529; overflow: hidden;}
.inzerat-img-container img {object-fit: contain; object-position: center; padding: 5px}
.inzerat-title {max-width: 70%; font-size: 1rem;}
.inzerat-card-popis {display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 4.5em}
.inzerat-card-lokalita{max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom}


/* ==========================================================================
   4. Tlačidlá a Odznaky (Badges)
   ========================================================================== */
.btn-primary {border-radius: 8px; font-weight: 600; padding: 8px 20px}
.btn-logout { background: none; border: none; cursor: pointer; color: #7edaf8; padding: 0;display: inline}
.btn-outline-predaj {color: #0d6efd;border-color: #0d6efd;}
.btn-outline-predaj:hover, 
.btn-check:checked + .btn-outline-predaj {background-color: #0d6efd !important;color: #fff !important;border-color: #0d6efd !important;}
.btn-outline-kupa {color: #ffc107;border-color: #ffc107;}
.btn-outline-kupa:hover, 
.btn-check:checked + .btn-outline-kupa {background-color: #ffc107 !important; color: #000 !important; border-color: #ffc107 !important}

.badge-blue {background-color: #00eaff !important; color: #fff !important}
.badge-location {font-weight: 400; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.05)}
.badge-small {font-size: 0.7rem}
.badge-geo {border-radius: 50px}


/* ==========================================================================
   5. Detail inzerátu, Galérie a Overlay
   ========================================================================== */
.detail-container { padding-bottom: 50px}
.detail-img-container {width: 100%; height: 550px;  background-color: #2c2f33; border-radius: 0; overflow: hidden; display: flex; align-items: center; justify-content: center}
.detail-img-container img {max-width: 100%; max-height: 100%; object-fit: contain; display: block; padding: 10px}

.ebay-thumb-container {cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; padding: 2px; border-radius: 6px}
.ebay-thumb-container.active {opacity: 1}
.ebay-thumb-container.active .ebay-thumb-box {border: 2px solid #0dcaf0 !important}
.ebay-thumb-box {width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #495057; border-radius: 4px}
.ebay-thumb-box img {max-width: 100%; max-height: 100%; object-fit: contain; }

.video-modal {
    position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center;
}

.photo-overlay { 
    position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center
}

.close-overlay {
    position: absolute; top: 20px; right: 35px; color: #fff;
    font-size: 60px; font-weight: bold; cursor: pointer;
}

.video-modal { background-color: rgba(0,0,0,0.9); }
#overlayVideo { max-width: 90%; max-height: 90%; border-radius: 10px; }

.custom-nav { width: 8%; opacity: 0.6; transition: opacity 0.3s ease}
.custom-nav:hover {opacity: 1}

.carousel-control-prev-icon, 
.carousel-control-next-icon {background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; padding: 1.5rem}

.chat-zoom-img:hover {filter: brightness(0.9); transform: scale(1.01); transition: all 0.2s ease-in-out}

#imageModal {background-color: rgba(0, 0, 0, 0.85)}

.video-container { position: relative; width: 200px; cursor: pointer; }
.play-overlay {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: white; opacity: 0.8;}
.overlay-content { max-width: 90%; max-height: 90%; border-radius: 4px}

/* ==========================================================================
   6. Formuláre a Vstupy
   ========================================================================== */
.border-dashed {border-style: dashed !important; border-width: 2px !important;}
.transition-all {transition: all 0.2s ease-in-out}

#previews img {border-width: 2px !important; transition: all 0.3s ease}
#previews img:hover {transform: translateY(-5px); border-color: #0dcaf0 !important}

.form-control, .form-select { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid #495057 !important; color: white !important}

.form-control:focus, .form-select:focus {border-color: #0dcaf0 !important; box-shadow: none !important; background-color: #2b3035 !important;}

.cropper-container {max-width: 100% !important}
.filter-card {border-radius: 15px; overflow: hidden}
.input-group-text {border-color: #495057 !important}

.img-container-responsive { height: 350px; width: 100%}
.img-container-responsive img { max-height: 330px; width: auto; object-fit: contain}




/* ==========================================================================
   7. AI Poradca, Recenzie a Doplnky
   ========================================================================== */

#ai-content {line-height: 1.6; color: #e0e0e0}
#ai-content strong {color: #0dcaf0; font-weight: 600}
#ai-content ul {list-style: none; padding-left: 0; margin-top: 10px}
#ai-content li {background: rgba(13, 202, 240, 0.05); border-radius: 8px; padding: 12px 15px 12px 35px; transition: transform 0.2s ease}
#ai-content p {margin-bottom: 15px}
#ai-content li:hover {transform: translateX(5px); background: rgba(13, 202, 240, 0.1)}

.star-rating {display: flex; flex-direction: row-reverse; justify-content: center}
.star-rating input {display: none}
.star-rating label {cursor: pointer; padding: 0 5px; opacity: 0.2; transition: opacity 0.2s ease}
.star-rating label:hover, 
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { opacity: 1; }

#recenzie-list::-webkit-scrollbar { width: 6px}
#recenzie-list::-webkit-scrollbar-track { background: #222}
#recenzie-list::-webkit-scrollbar-thumb { background: #444; border-radius: 10px}
#recenzie-list::-webkit-scrollbar-thumb:hover {background: #555}

.warning-popover {
    --bs-popover-bg: #ffc107; --bs-popover-body-color: #000; --bs-popover-border-color: #e0a800;
    font-weight: 600; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}

.warning-popover .popover-arrow::after {--bs-popover-bg: #ffc107}