/* Detail bytu - Back Button Section */
.detail_zpet_sekce {
    width: 100%;
    padding: 24px 20px;
    background-color: #FFFFFF;
    padding-bottom: 0;
}

.detail_container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

.detail_zpet_button {
    display: inline-flex;
    align-items: center;
    width: 186px;
    gap: 6px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid #F0EAE7;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #0B3D77;
    text-decoration: none;
    transition: all 0.3s ease;
    justify-content: center;
    white-space: nowrap;
}

.detail_zpet_button:hover {
    background-color: #F6F2F0;
}

/* Detail bytu - Main Section */
.detail_hlavni_sekce {
    width: 100%;
    padding: 25px 20px 80px 20px;
    background-color: #FFFFFF;
}

.detail_obsah {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Image Gallery - Left Side (50%) */
.detail_galerie {
    flex: 1;
    max-width: 596px;
}

.detail_hlavni_obrazek {
    width: 596px;
    height: 373px;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 20px;
}

.detail_nahledove_obrazky {
    display: flex;
    gap: 20px;
}

.detail_nahled {
    width: 150px;
    height: 93px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.detail_nahled:hover {
    opacity: 0.8;
}

/* Apartment Info - Right Side (50%) */
.detail_info {
    flex: 1;
    max-width: 544px;
}

.detail_hlavicka {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.detail_nazev {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    color: #0B3D77;
    margin: 0;
}

.detail_lokace_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 166px;
    height: 40px;
    padding: 0 16px;
    border-radius: 30px;
    background-color: #E8F4FA;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4CA7DD;
    flex-shrink: 0;
}

.detail_lokace_badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.detail_popis {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0%;
    color: #0B3D77;
    margin: 0 0 32px 0;
}

/* Parameters */
.detail_parametry {
    width: 112px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.detail_parametr {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail_parametr_ikona {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.detail_parametr svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.detail_parametr_info {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.detail_parametr_label {
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0B3D77;
}

.detail_parametr_hodnota {
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0B3D77;
}

/* Price */
.detail_cena {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
    padding: 20px 0;
}

.detail_cena_hodnota {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    color: #0B3D77;
}

.detail_cena_popis {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #0B3D77;
}

/* Interest Button */
.detail_zajem_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 61px;
    background-color: #4CA7DD;
    color: #FFFFFF;
    border-radius: 10px;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.detail_zajem_button:hover {
    background-color: #3a8fc7;
}

/* Tabs Section */
.detail_tabs_sekce {
    width: 100%;
    margin-top: 60px;
}

.detail_tabs_header {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.detail_tab_button {
    padding: 16px 32px;
    background-color: transparent;
    border: none;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px 10px 0 0;
}

.detail_tab_button:hover {
    color: #0B3D77;
}

.detail_tab_button.active {
    color: #0B3D77;
    font-weight: 700;
    background-color: #F6F2F0;
}

.detail_tab_content {
    display: none;
}

.detail_tab_content.active {
    display: block;
    background-color: #F7F2F0;
    padding-left: 120px;
    padding-top: 60px;
    padding-bottom: 90px;
    width: 1440px;
    margin-left: calc((1200px - 1440px) / 2);
}

.detail_tab_inner {
    max-width: 100%;
}

.detail_tab_layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.detail_tab_left {
    flex: 1;
}

.detail_tab_right {
    flex: 0 0 40%;
}

.detail_tab_nadpis {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0B3D77;
    margin: 0 0 24px 0;
}

.detail_tab_podnadpis {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #0B3D77;
    margin: 32px 0 16px 0;
}

.detail_tab_popis {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0%;
    color: #0B3D77;
    margin: 0 0 24px 0;
}

/* Services List */
.detail_tab_sluzby {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 24px 0 40px 0;
}

.detail_tab_sloupec {
    display: flex;
    flex-direction: column;
}

.detail_tab_seznam {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail_tab_seznam li {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 180%;
    color: #0B3D77;
    padding-left: 24px;
    position: relative;
}

.detail_tab_seznam li:before {
    content: "•";
    position: absolute;
    left: 8px;
    color: #0B3D77;
    font-weight: 700;
}

/* Details Table */
.detail_tab_tabulka {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail_tab_radek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 439px;
    height: 36px;
    padding: 0 16px;
    border-radius: 5px;
}

.detail_tab_radek:nth-child(odd) {
    background-color: #FAF8F7;
}

.detail_tab_radek:nth-child(even) {
    background-color: #F6F2F0;
}

.detail_tab_label {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #0B3D77;
}

.detail_tab_hodnota {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0B3D77;
    text-align: right;
}

/* Similar Apartments Section */
.podobne_byty_sekce {
    width: 100%;
    padding: 0px 20px 80px 20px;
    background-color: #FFFFFF;
}

.podobne_byty_hlavicka {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.podobne_byty_nadpis {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #0B3D77;
    margin: 0;
}

.carousel_sipky {
    display: flex;
    gap: 16px;
}

.carousel_sipka {
    width: 48px;
    height: 48px;
    border: 1px solid #E0E0E0;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel_sipka:hover {
    background-color: #F6F2F0;
    border-color: #0B3D77;
}

.podobne_byty_carousel {
    overflow: hidden;
    margin-bottom: 40px;
}

.podobne_byty_track {
    display: flex;
    gap: 30px;
    transition: transform 0.3s ease;
}

.podobny_byt_karta {
    flex: 0 0 387px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    transition: transform 0.3s ease;
}

.podobny_byt_karta:hover {
    transform: translateY(-5px);
}

.podobny_byt_badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: #FF6B6B;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 14px;
    z-index: 1;
}

.podobny_byt_obrazek {
    width: 387px;
    height: 242px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 16px;
}

.podobny_byt_info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.podobny_byt_nazev {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #0B3D77;
    margin: 0;
}

.podobny_byt_parametry {
    display: flex;
    gap: 20px;
}

.podobny_byt_parametr {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #0B3D77;
}

.podobny_byt_parametr svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.podobny_byt_cena {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #0B3D77;
}

.podobne_byty_button_wrapper {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.podobne_byty_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 50px;
    background-color: #4CA7DD;
    color: #FFFFFF;
    border-radius: 10px;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.podobne_byty_button:hover {
    background-color: #3a8fc7;
}

/* Responsive */
@media (max-width: 1024px) {
    .detail_obsah {
        flex-direction: column;
        gap: 40px;
    }
    
    .detail_galerie,
    .detail_info {
        max-width: 100%;
    }
    
    .detail_hlavni_obrazek {
        width: 100%;
        height: auto;
        aspect-ratio: 596 / 373;
    }
    
    .detail_nahledove_obrazky {
        justify-content: flex-start;
    }
    
    .detail_nahled {
        flex: 0 0 calc(33.333% - 14px);
        height: auto;
        aspect-ratio: 150 / 93;
    }
}

@media (max-width: 768px) {
    .detail_zpet_button {
        width: auto;
        padding: 0 16px;
    }
    
    .detail_hlavni_sekce {
        padding: 30px 20px 60px 20px;
    }
    
    .detail_nazev {
        font-size: 32px;
    }
    
    .detail_parametry {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .detail_cena_hodnota {
        font-size: 28px;
    }
}