/* Obecné styly */
body {
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

a {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

h2 {
    color: var(--primary-color);
    font-weight: bold;
    margin: 3px 0 !important;
    padding: 0 55px;
}


.container {
    position: relative;
    display: flex;
    /*gap: 20px;*/
    min-height: 80vh;
    text-align: center;
    flex-direction: column;
}

.col-md-12 {
    margin: 0 100px;
}

@media (max-width: 768px) {
    .col-md-12 {
        margin: 0 20px;
    }

    .navbar-items {
        margin: 0 !important;
    }
}

.zoom-img {
    cursor: pointer;
    transition: transform 0.5s ease;
}

.grid-item:hover .zoom-img {
    transform: scale(0.95);
}

.search-product:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.header-section {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%),
    url("../../img/test/background2.jpg");
    margin: 0 !important;
    min-height: 100vh;
    width: 100%;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.header-section > h1 {
    color: var(--text-color);
    margin-top: 150px;
}

.top-search-bar {
    width: -webkit-fill-available;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 15px;
    border-radius: 0.5rem;
}

.header-section > a {
    font-size: 26px;
    font-weight: bold;
    margin-top: 40px;
}

.bounce-button {
    padding: 15px 30px;
    font-size: 18px;
    color: var(--secondary-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 1;
    animation: bounce 2s infinite cubic-bezier(.68, -0.55, .27, 1.55);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}

.header-section > span {
    color: #FFFFFF;
    font-size: 26px;
}

.start {
    align-items: flex-start;
}

.w-100 {
    width: 100% !important;
}

.max-w-500 {
    max-width: 500px;
    width: 100%;
}

.home {
    display: flex;
    flex-direction: column;
    margin: 110px 0 150px 0;
    justify-content: center;
    z-index: 10;
    width: 100%;
    align-content: center;
}

.mar-t-20 {
    margin: 20px 0;
}

.green {
    color: var(--primary-color) !important;
    margin-right: 5px;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.box-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    gap: 20px;
}

.wrap-box {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

.home-left {
    flex: 1;
}

.home-right {
    flex: 1;
}

.home-h1 {
    font-size: 4.5rem;
    color: var(--primary-color);
    font-weight: bold;
    line-height: 114% !important;
    max-width: 50%;
    z-index: 10;
}

.home-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.add-box {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary-color);
    height: 290px;
    margin: 100px 0;
    border-radius: 1rem;
    justify-content: center;
}

.home-box-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.white {
    color: var(--secondary-color);
}

.search-bar {
    z-index: 10;
    gap: 15px;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    justify-content: space-between;
}

.search-box {
    position: sticky;
    top: 40px;
    right: 76px;
    border: 1px solid #ddd;
    z-index: 10;
    gap: 15px;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
}

.mar-t-50 {
    margin-top: 50px;
}

.carousel-root {
    width: 100% !important;
}

.favourite-place {
    width: 100%;
    z-index: 10;
    height: 75px;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
}

.favourite-box {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.favourite-two {
    display: flex;
    flex: 2;
}

.favourite-one {
    display: flex;
    flex: 1;
}

.housemain {
    position: absolute;
    top: 80px;
    left: 80px;
    max-width: 450px;
    width: 100%;
}

.hut {
    position: absolute;
    top: 120px;
    max-width: 455px;
    left: 0;
}

.login_background {
    position: absolute;
    top: 100px;
    left: 0;
    width: 650px;
}
.footer-link{
    text-underline: none !important;
}
.house {
    position: absolute;
    top: -50px;
    right: 67px;
    width: 350px;
}

.graph {
    position: absolute;
    top: -100px;
    left: 30px;
    width: 300px;
}

.width-100 {
    width: 100%;
}

.button-60 {
    align-items: center;
    appearance: none;
    min-width: 170px;
    background-color: #ffffff;
    border: 1px solid #dbdbdb;
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: .375em;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1rem;
    height: 2.5em;
    justify-content: center;
    line-height: 1.5;
    padding: calc(.5em - 1px) 1em;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
}

.button-60:active {
    border-color: #4a4a4a;
    outline: 0;
}

.button-60:focus {
    border-color: #485fc7;
    outline: 0;
}

.button-60:hover {
    border-color: #b5b5b5;
    color: black;
}

.button-60:focus:not(:active) {
    box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}

.search-btn {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.home-box-left {
    padding: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}

.box-padding {
    padding: 0 55px;
}

.box-padding-add {
    padding: 0 75px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
}

.grid-item img {
    width: 100%;
    height: auto;
}

.carousel-img {
    height: 300px !important;
    border-radius: 1rem;
}

.types-img {
    width: 100% !important;
    height: 200px !important;
    border-radius: 1rem;
}

.carousel-text {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: var(--secondary-color);;
    text-align: left;
}

.product-header {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: var(--secondary-color);
    text-align: left;
}

.favourite-carousel-box {
    position: relative;
}

.properties-text {
    bottom: 15px !important;
    left: 30px !important;
}

.relative {
    position: relative;
}

.product-box {
    border: solid 1px #111827;
    margin: -15px 0 15px 0;
    border-radius: 0 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.product-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
    display: flex;
    min-height: 500px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
    height: 100%;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.product-image {
    width: auto;
    height: 200px !important;
    object-fit: cover;
}

.product-info {
    min-height: 250px;
    padding: 15px;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.product-title {
    font-size: 1.5em;
    margin: 0 0 10px 0;
    color: #111827;
}

.product-description {
    color: #666;
    font-size: 0.9em;
    flex-grow: 1;
}

.product-price {
    font-size: 1.2em;
    color: #333;
    font-weight: bold;
    margin: 0;
}

.grid-item-product {
    width: 100%;
    max-width: 300px !important;
}

.item {
    cursor: pointer;
}

.properties-carousel .carousel {
    height: 238px;
}

.favourite-carousel .carousel {
    height: 649px;
}

.products-carousel .carousel {
    height: 565px;
}

.carousel .control-dots .dot {
    transition: opacity .25s ease-in;
    opacity: .3;
    filter: alpha(opacity=30);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    background: #111827 !important;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    cursor: pointer;
    display: inline-block;
    margin: 0 8px;
}

.carousel .control-next.control-arrow:before {
    border-left: 8px solid var(--primary-color) !important;
}

.carousel .control-prev.control-arrow:before {
    border-right: 8px solid var(--primary-color) !important;
}

.labels-box {
    position: absolute;
    top: 10px;
    left: 10px;
    gap: 7px;
    display: flex;
    flex-direction: row;
}

.heart-icon {
    position: absolute;
    top: 5px;
    width: 24px !important;
    height: 24px !important;
    right: 10px;
    z-index: 15;
}

.heart-icon, .heart-icon-nav {
    width: 20px;
    height: 20px;
}


.heart-icon:hover {
    width: 50px !important;
}

.max-w-80 {
    max-width: 80% !important;
}

.label {
    width: auto;
    padding: 6px 8px;
    border-radius: 1rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.carousel.carousel-slider .control-arrow:hover {
    background: transparent !important;
}

button:hover {
    background-color: var(--primary-color);
}

/* Responzivní styly */
@media (max-width: 768px) {
    .housemain {
        display: none;
    }

    .properties-carousel .carousel {
        height: 100%;
    }

    .products-carousel .carousel {
        height: 100%;
    }

    .container {
        margin: 0 20px;
    }

    .favourite-carousel .carousel {
        height: 100%;
    }

    h2 {
        padding: 0 20px;
    }

    .box-padding, .box-padding-add {
        padding: 0 20px;
    }

    .home-h1 {
        font-size: 2.5rem;
        max-width: 100%;
    }

    .product-grid, .image-grid {
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }

    .types-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        min-height: 400px;
    }


    .carousel-img, .types-img {
        height: auto;
    }

    .search-bar, .favourite-place, .favourite-box {
        flex-direction: column;
        width: 80%;
        align-items: center;

        padding: 20px;
    }

    .grid-item {
        grid-column: span 1 !important;
    }

    .home {
        margin: 80px 0 30px 0;
    }
}

@media (max-width: 480px) {
    .container {
        margin: 0 10px;
    }

    h2 {
        padding: 0;
    }

    .home-h1 {
        font-size: 2rem;
    }

    .product-grid, .image-grid {
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }

    .types-grid {
        grid-template-columns: 1fr;
    }

    .search-bar {
        height: auto;
    }

    .product-card {
        min-height: 300px;
    }

    .button-60 {
        min-width: 150px;
        font-size: 0.9rem;
    }

    .product-info {
        min-height: 150px;
    }
}

.text-block {
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 20px;
    align-items: flex-start;
    width: 100%;
    padding: 30px;
    margin-top: 20px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}


.grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Zajistí, že obrázek pokryje celý box bez deformace */
    display: block;
}

.css-hlgwow {
    display: flex !important;
}

.mar-0 {
    margin: 0 !important;
}

.mar-10 {
    margin: 10px 0 !important;
}

.css-13cymwt-control {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-height: 38px;
    outline: 0 !important;
    position: relative;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    background-color: hsl(0, 0%, 100%);
    border: none !important;
    border-radius: 4px;
    border-style: none !important;
    border-width: 1px;
    box-sizing: border-box;
}

.css-13cymwt-control:hover {
    border: none !important;
    border-color: transparent !important;
}

footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 20px 0;
    text-align: center;
    margin-top: 50px;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
    margin: 0 120px;
}

.footer-section {
    flex: 1;
    padding: 20px;
    min-width: 250px;
}

.footer-section h2 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

.footer-section p, .footer-section ul, .footer-section li {
    margin: 5px 0;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section a {
    color: #fff;
    text-decoration: none;
}

.footer-section a:hover {
    text-decoration: underline;
}

.footer-bottom {
    padding: 10px 0;
    border-top: 1px solid #555;
}

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.login-form {
    padding: 2rem;
    border-radius: 8px;
    width: 100%;
    margin: 150px auto 0 auto;
}

.login-form h1 {
    color: #FFFFFF;
    margin: 20px !important;
}

.white {
    color: #FFFFFF;;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input {
    width: -webkit-fill-available;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.width-auto {
    width: auto !important;
}

.mar-20 {
    margin: 0 0 15px 0;
}

.mypage-container {
    padding: 20px;
    min-height: 80vh;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 100px 0 60px 0;
}

.add-chat-button {
    background-color: #007bff;
    color: var(--secondary-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.add-chat-button:hover {
    background-color: var(--primary-color);
}

.product-list {
    list-style-type: none;
    padding: 0;
    display: grid
;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    max-width: 505px;
    width: 100%;
}

/* Media query pro max-width 1200px */
@media (max-width: 1200px) {
    .product-item {
        max-width: 100%;
    }
}


.actions button:hover {
    color: var(--primary-color);
}

.error-message {
    color: red;
}

/* mypage.css */
.mypage-container {
    padding: 20px;
}

.mypage-header {
    margin-bottom: 20px;
}

.add-chat-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: var(--secondary-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.chat-image {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
}

.actions button {
    margin-left: 10px;
    padding: 5px 10px;
    border: none;
    background-color: #007bff;
    color: var(--secondary-color);
    border-radius: 5px;
    cursor: pointer;
}

.actions {
    display: flex;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 20px;
    height: -webkit-fill-available;
    position: absolute;
    gap: 10px;
    right: 10px;
    text-align: left;
    top: 0;
    flex-direction: column;
}

.error-message {
    color: red;
}

.product-image-container {
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    width: 100%;
    max-width: 650px;
    height: 300px;
    position: relative;
}

.product-name {
    color: #000000;
    max-width: 70%;
    border-radius: 0.5rem;
    background-color: #ffffff85;
    backdrop-filter: blur(10px);
    left: 10px;

    top: 10px;
    padding: 10px;
    position: absolute;
    text-align: left;
    width: 100%;
}

.action-button {
    margin-left: auto;
    height: 30px;
    width: 30px;
}

.show-info {
    bottom: 10px;
    font-size: 15px;
    color: #000000;
    max-width: 70%;
    border-radius: 0.5rem;
    background-color: #ffffff85;
    backdrop-filter: blur(10px);
    padding: 10px;
    left: 10px;
    position: absolute;
    text-align: left;
    width: 100%;
}

.navbar-left {
    align-items: center;
    display: flex;
    justify-content: start;
}

.logo {
    height: 60px;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar-right i {
    margin-left: 15px;
    cursor: pointer;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar-right i {
    margin-left: 15px;
    cursor: pointer;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #0e0e0e;
    margin: 3px 0 3px 5px;
}

/* Mobile styles */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .menu {
        flex-direction: column;
        position: absolute;
        top: 60px; /* Adjust based on your navbar height */
        left: 0;
        right: 0;
        background-color: transparent;
        color: #4f4f4f;
        align-items: center;
        padding: 0;
        margin: 0;
        display: none; /* Hidden by default */
    }

    .menu.open {
        display: flex; /* Display menu when open */
    }

    .menu li {
        margin: 15px 0; /* Spacing between items in the mobile menu */
    }
}

.icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    cursor: pointer;
}

.arrow-icon {
    width: 14px;
    height: 14px;
    color: var(--primary-color);
    cursor: pointer;
    transition: transform 0.5s ease;
}

.menu li:hover > .arrow-icon {
    transform: rotate(180deg);
}

.arrow-icon:hover {
    transform: rotate(180deg);
}

.icon-box {
    width: 30px;
}

.icon:hover {
    width: 25px;
    height: 25px;
}

.register-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    flex-direction: column;
}

.max-w-100 {
    max-width: 100% !important;
}

.aling-start {
    align-items: flex-start;
}

.register-box {
    border-radius: 8px;
    margin: 20px 0;
    width: 100%;
    padding: 30px;
    background-color: #ffffff8a;
}

.centered {
    text-align: center !important;
}

.p-0 {
    padding: 0;
}

.p-search {
    padding: 0 15px !important;
}

.register-h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #333;
}

.package-selection {
    display: flex;
    justify-content: space-between;
    margin: 4.5rem 0;
}

.package-column {
    flex: 1;
    padding: 0 1rem;
    text-align: left;

}

#payment-period {
    max-width: 70%;
    margin-left: 10px;
}

.form-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.display-no {
    display: none;
}

.m-auto {
    margin: auto;
}

.mar-1 {
    margin: 1rem 0 !important;
}

.package-first {
    min-width: 397px;
}

.package-column h3 {
    margin-top: 0;
}

.h-19 {
    height: 19px;
}

.icon-2 {
    width: 20px;
    height: 20px;
}

.package-column button:hover {
    background-color: var(--primary-color);
}

.simple-container {
    max-width: 1200px;
}

.payment-summary {
    margin-top: 1rem;
}

.payment-summary h4 {
    margin: 0;
    font-size: 1.2rem;
}

.form-group:nth-child(2n) {
    margin-right: 0;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

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

.flex {
    display: flex;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}


.error-message {
    color: red;
    margin-top: 10px;
}

.registration-form {
    margin-top: 2rem;
}

.registration-form fieldset {
    border: none;
    margin-bottom: 1.5rem;
}

.registration-form legend {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.registration-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.registration-form input,
.registration-form select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.registration-form button {
    margin-top: 1rem;
}

.reg-form {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.form {
    width: 68%;
    margin: 63px auto;
}

.box-reg {
    width: 100%;
    text-align: start;
}

.h-211 {
    height: 132px;
    max-width: 482px !important;
}

.text-start {
    text-align: start;
}

.w-available {
    width: -webkit-fill-available;
}

.form-group-grouped {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-group-grouped .form-group {
    width: 31%;
    margin-right: 0;
}

.form-group-grouped .form-group.small {
    width: 20%;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.back-button {
    background-color: #6c757d;
}

.back-button:hover {
    background-color: #5a6268;
}

.add-product-form {
    display: flex;
    margin-top: 100px;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center
}

.product-detail {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-top: 80px;
}


.product-body {
    display: flex;
    justify-content: space-between;
}

.detail-img {
    border-radius: 1rem;
    max-height: 700px;
    height: auto;
}

.product-left {
    flex: 3;
}

.product-properties {
    margin-top: 20px;
}

.product-right {
    flex: 1;
    display: grid;
    gap: 20px;
    padding: 0 20px;
}

.reservation-box {
    display: flex;
    flex-direction: column;
}

.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.reservation-box label {
    margin-bottom: 10px;
}

.reservation-box button {
    margin-top: 20px;
    padding: 10px;
    background-color: #007bff;
    color: var(--secondary-color);
    border: none;
    cursor: pointer;
}

.reservation-box button:hover {
    background-color: var(--primary-color);
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 60px 0 0 0;
    padding: 0 55px;
}

.modal-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-button.confirm {
    background-color: red;
    color: var(--secondary-color);
}

/* Obecné styly pro dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .button-60 {
    position: relative;
    z-index: 1;
}

/* Styly pro submenu u lokalit */
.location-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    width: 100%; /* Nastavte šířku podle potřeby */
}

.search-input {
    max-width: max-width: -webkit-fill-available;
    width: -webkit-fill-available !important;
    height: 40px;
    font-size: 16px;
    border: none !important;
    border-bottom: solid 1px #f9f9f9 !important;
    border-radius: 0 !important;
}

.location-submenu.active {
    display: block;
}

.location-submenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-submenu li {
    padding: 8px 12px;
    cursor: pointer;
}

.location-submenu li:hover {
    background-color: #f0f0f0;
}

.location-submenu .show-all {
    border-top: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
}

.location-submenu .show-all:hover {
    background-color: #e0e0e0;
}

/* Styly pro submenu u data */
.date-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    width: 200px; /* Nastavte šířku podle potřeby */
}

.date-submenu.active {
    display: block;
}

.date-submenu input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Styly pro submenu u hostů */
.guests-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    width: 99%;
}

.guests-submenu.active {
    display: block;
}

.guests-submenu .group {
    padding: 8px 12px;
    display: flex;
    border-bottom: 1px solid #ddd;
    flex-direction: column;
    align-items: center;
}

.guests-submenu .group:last-child {
    border-bottom: none;
}

.guests-submenu .group label {
    display: flex;
    margin-bottom: 4px;
    justify-content: center;
    align-items: center;
}

.label-group {
    width: auto !important;
    display: flex !important;
    justify-content: space-between !important;
}

.guests-submenu .group .count {
    display: flex;
    align-items: center;
}

.carousel .slider-wrapper {
    overflow: hidden;
    margin: auto;
    width: 100%;
    height: 100%;
    transition: height .15s ease-in;
}

.guests-submenu .group .count button {
    border: none;
    color: var(--primary-color);
    font-size: 20px;
    background-color: transparent;
    padding: 4px 8px;
    cursor: pointer;
}

.guests-submenu .group .count span {
    margin: 0 8px;
}

/* Styly pro submenu u typu ubytování */
.accommodation-type-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    width: 99%;
}

.accommodation-type-submenu.active {
    display: block;
}

.accommodation-type-submenu label {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
}

.accommodation-type-submenu label:hover {
    background-color: #f0f0f0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
}

.footer-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    padding: 0 20px;
}

.footer-column p {
    margin: 5px 0;
    font-size: 15px;
}

.footer-column a {
    color: var(--secondary-color);;
    font-size: 15px;
}

.footer-column a:hover {
    color: #d5d5d5;
    font-size: 15px;
}

.footer-column.border-left {
    border-left: 1px solid #ccc;
    padding-left: 20px;
}

.social-icon {
    margin: 0 10px;
    color: var(--secondary-color);
}

.add-accommodation-page {
    padding: 20px;
}

.add-accommodation-form {
    max-width: 800px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.my-header h2 {
    margin: 0;
}

.add-chat-button {
    background: #007bff;
    color: var(--secondary-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.add-product-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 15px;
}

input[type="text"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea {
    height: 100px;
    resize: vertical;
}

input[type="file"] {
    margin: 5px 0;
}

.main-image-preview {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

button {
    background: #28a745;
    color: var(--secondary-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.error-message {
    color: red;
    margin-top: 10px;
}

.success-message {
    color: green;
    margin-top: 10px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.article-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-card h2 {
    margin-top: 0;
}

.article-card p {
    margin: 0;
}

.main-form {
    display: flex;
    flex-direction: row;
    gap: 30px
}

.auto {
    width: auto !important;
}

.mar-30-0 {
    margin: 50px 0;
}

.dropzone {
    width: 300px;
    height: 300px;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    background-repeat: no-repeat;
    margin-top: 24px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-row {
    flex-direction: row;
}

.gap-20 {
    gap: 20px
}

.dropzone p {
    font-size: 16px;
    color: #888;
}

.dropzone.active {
    background-color: #e0e0e0;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.suggestions-list {
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    z-index: 1000;
}

.suggestions-list li {
    padding: 8px;
    cursor: pointer;
}

.w-300 {
    width: 300px;
}

.suggestions-list li:hover {
    background: #eee;
}

.beetween {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.switch {
    background-color: var(--primary-color)3b;
    display: flex;
    position: relative;
    width: 255px;
    height: 34px;
    border-radius: 1rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.ck.ck-editor__editable_inline > :last-child {
    min-height: 300px;
    margin-bottom: var(--ck-spacing-large);
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
    touch-action: none;
    border-radius: 0.5rem;
}

.slider {
    width: 61px;
    height: 33px;
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: transparent;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.switchLabel {
    height: 34px;
    margin-top: 8px;
    text-align: end;
}


.mar-t-20 {
    margin-top: 20px;
}

.number-input {
    display: flex;
    align-items: center;
}

.number-input input {
    display: flex;
    text-align: center;
    width: 37px;
    padding: 0;
    border: none;
    background: transparent;
    align-items: center;
}

.number-input button {
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 27px;
    font-weight: bold;
}

.gap-40 {
    gap: 40px
}

.save-button {
    margin: auto 0 auto auto;
    width: 200px;
    height: 38px;
}

.number-input button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.numbered-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.dropzone {
    border: 2px dashed #ccc;
    width: 100%;
    min-height: 333px;
    height: 100%;
    background-size: cover !important;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

.min-w-100 {
    MIN-WIDTH: 100px;
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    border-color: var(--ck-color-base-border);
    min-height: 300px;
}

.min-w-300 {
    min-width: 333px;
    max-height: 333px;
}

.thumbs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.thumb {
    display: flex;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
    width: 197px;
    height: 240px;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
}

.thumb img {
    width: 100%;
    height: auto;
    max-height: 200px;
}

.max-w-300 {
    max-width: 300px;
}

/* Styl pro formulář */
.search-form {
    background-color: #f8f9fa; /* Světle šedé pozadí */
    border-radius: 8px; /* Zaoblené rohy */
    padding: 20px; /* Padding kolem obsahu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Jemný stín */
    max-width: 600px; /* Maximální šířka formuláře */
    margin: 20px auto; /* Vycentrování formuláře */
}

/* Styl pro nadpis formuláře */
.search-form h2 {
    margin-bottom: 15px; /* Mezera pod nadpisem */
    color: #333; /* Tmavě šedá barva textu */
    font-size: 24px; /* Velikost textu */
    text-align: center; /* Vycentrování textu */
}

/* Styl pro vstupy */
.search-form input[type="text"],
.search-form input[type="number"] {
    width: 100%; /* Šířka 100% */
    padding: 10px; /* Padding uvnitř vstupu */
    margin-bottom: 15px; /* Mezera pod vstupem */
    border: 1px solid #ced4da; /* Světle šedý okraj */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 16px; /* Velikost textu */
    transition: border-color 0.3s; /* Hladký přechod pro barvu okraje */
}

/* Styl pro vstupy při zaostření */
.search-form input[type="text"]:focus,
.search-form input[type="number"]:focus {
    border-color: #007bff; /* Barva okraje při zaostření */
    outline: none; /* Odebrání defaultního rámečku */
}

/* Styl pro zaškrtávací políčka */
.search-form label {
    display: block; /* Blokové zobrazení */
    margin-bottom: 10px; /* Mezery pod zaškrtávacím políčkem */
    font-size: 16px; /* Velikost textu */
}

/* Styl pro tlačítko */
.search-form-button {
    background-color: #007bff; /* Modré pozadí */
    color: var(--secondary-color); /* Bíla barva textu */
    border: none; /* Odebrání okraje */
    border-radius: 5px; /* Zaoblené rohy */
    padding: 10px 15px; /* Padding uvnitř tlačítka */
    font-size: 16px; /* Velikost textu */
    cursor: pointer; /* Ukazatel myši při najetí */
    transition: background-color 0.3s; /* Hladký přechod pro barvu pozadí */
}

/* Styl pro tlačítko při najetí myší */
.search-form-button:hover {
    background-color: #0056b3; /* Tmavší modrá při najetí */
}

/* Styl pro mobilní zařízení */
@media (max-width: 600px) {
    .search-form {
        padding: 15px; /* Menší padding pro mobil */
    }
}

.modal {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Poloprůhledné pozadí */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff; /* Bílá barva pozadí pro modální okno */
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px; /* Maximální šířka modálního okna */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Stín */
}

.close {
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 10px;
    right: 15px;
}

.modal-section {
    margin-bottom: 20px; /* Mezery mezi sekcemi */
}

.modal-section h3 {
    margin-bottom: 10px; /* Mezery pod nadpisy sekcí */
}

.modal-section label {
    display: block; /* Zobrazení checkboxů pod sebou */
    margin-bottom: 10px; /* Mezery mezi checkboxy */
}

.modal-submit-button {
    background-color: #007BFF; /* Barva pozadí tlačítka */
    color: #fff; /* Barva textu tlačítka */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.modal-submit-button:hover {
    background-color: #0056b3; /* Tmavší modrá při najetí myší */
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* Mezery nad tlačítky */
}

.modal-submit-button {
    background-color: #007BFF; /* Barva pozadí tlačítka */
    color: #fff; /* Barva textu tlačítka */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.modal-submit-button:hover {
    background-color: #0056b3; /* Tmavší modrá při najetí myší */
}

.modal-reset-button {
    background-color: #dc3545; /* Barva pozadí pro reset */
    color: #fff; /* Barva textu */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.modal-reset-button:hover {
    background-color: #c82333; /* Tmavší červená při najetí myší */
}

.search-product {
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
    display: flex;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
    height: 250px;
    flex-direction: row;
    justify-content: flex-start;
}

.favourite-button {
    position: absolute;
    left: 190px;
    top: 0px;
    background-color: transparent;
}

.search-info {
    padding: 20px;
    text-align: start;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.search-image {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
}

.product-info > h3 {
    color: var(--primary-color);
}

.product-info > p {
    color: var(--primary-color);
}


/* Hlavní kontejner pro seznam produktů */
.products-list {
    gap: 20px;
}

/* Box pro každý produkt */
.search-product {
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* Efekt pro hover na produkt */
.search-product:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}


/* Box pro štítky (např. vyprodáno, sleva) */
.labels-box {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 1;
}

/* Styl pro štítky */
.search-label {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}

/* Box pro informace o produktu */
.search-info {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Název produktu */
.product-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f5a623;
    margin: 0;
}

/* Popis produktu */
.product-description {
    font-size: 0.9rem;
    color: #777;
}

/* Hodnocení produktu */
.recenze {
    background-color: #f5a623;
    color: #fff;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

/* Cena produktu */
.product-price {
    font-size: 15px;
    font-weight: bold;
    color: #f5a623;
}

/* Flexbox pro ikony vybavení */
.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* Každá ikona */
.amenity {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    border-radius: 50%;
    padding: 6px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Efekt pro hover na ikonu */
.amenity:hover {
    background-color: #f5a623;
}

/* Ikona pro srdíčko (přidání do oblíbených) */
.heart-button {
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 5px;
    padding: 0 !important;
    right: 5px;
    transition: transform 0.3s ease;
}

.heart-button:hover {
    transform: scale(1);
}

/* Font Awesome ikony pro vybavení */
.amenity .fa {
    font-size: 18px;
    color: #333;
}

.search-box h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #333;
}


.input-small {
    width: calc(50% - 10px); /* Polovina šířky s mezerami */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.input-small:focus {
    border-color: #007bff;
    outline: none;
}

.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amentity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.amentity-icon:hover {
    background-color: #f5a623;
    color: #fff;
    border-color: #f5a623;
}

.amentity-icon svg {
    width: 20px;
    height: 20px;
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 16px 0;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
}

.input-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.input-label {
    font-size: 1rem;
    color: #333;
    flex: 1;
    text-align: left;
}

.input-counter {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-number {
    width: 50px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 4px !important;
    font-size: 1rem !important;
    background-color: transparent !important;
}

.btn-decrement,
.btn-increment {
    background-color: transparent;
    border-radius: 4px;
    width: 24px;
    color: black;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.2s ease;
}

.btn-decrement:hover,
.btn-increment:hover {
    background: transparent !important;
    color: #f5a623;
}

/* Kontejner posuvníku */
.slider-container {
    position: relative;
    width: 100%;
    height: 50px; /* Prostor pro slider a kolečka */
    margin: 20px 0;
}

/* Posuvník */
.slider {
    appearance: none;
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 4px;
    z-index: 0 !important;
    pointer-events: none; /* Umožňuje interakci pouze s thumbs */
}

/* Vyplněná část mezi thumbs */
.slider-range {
    position: absolute;
    height: 11px;
    background: #f5a623;
    z-index: 1; /* Pod kolečky */
    border-radius: 4px;
    transition: left 0.1s, right 0.1s; /* Smooth transition */
}

/* Proměnná pro velikost kolečka */
:root {
    --thumb-size: 36px; /* Šířka kolečka */
}

/* Thumb styly */
.slider::-webkit-slider-thumb {
    appearance: none;
    pointer-events: auto;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border: 2px solid #f5a623;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3; /* Thumb vždy vepředu */
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Thumb pro Mozilla (Firefox) */
.slider::-moz-range-thumb {
    width: 36px;
    height: 36px;
    background-color: #fff;
    border: 2px solid #f5a623;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4; /* Thumb vždy vepředu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Styly pro hover efekt */
.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

/* Zajištění správného z-indexu pro levý a pravý posuvník */
.slider-container input[type="range"].thumb-left {
    z-index: 3; /* Levé kolečko vpředu */
}

.slider-container input[type="range"].thumb-right {
    z-index: 4; /* Pravé kolečko ještě více vpředu */
}

/* Vyřešení problému s překrýváním */
.slider-container .slider-range {
    left: 0; /* Půjde z levé strany */
    right: 0; /* Půjde z pravé strany */
    margin-left: calc(50% - 18px); /* Polovina šířky kolečka (36px) */
    margin-right: calc(50% - 18px); /* Polovina šířky kolečka (36px) */
}

/* Styl pro celý label */
.switch-container {
    display: flex;
    padding: 7px 10px;
    align-items: center;
    margin-bottom: 15px;
    flex-direction: row;
    justify-content: space-between;
}


/* Vzhled většího checkboxu */
.checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: var(--secondary-color);
    position: relative;
    transition: background-color 0.3s ease;
}

/* Vzhled, když je checkbox aktivní */
input:checked + .checkbox {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

/* Styl pro zaoblené rohy při zaškrtnutí */
input:checked + .checkbox::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background-color: var(--secondary-color);
    border-radius: 50%;
}

/* Text vedle checkboxu */
.switch-label {
    font-size: 14px;
    margin-left: 10px;
    color: #333;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 50px;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #ddd;
    outline: none;
    position: absolute;
    left: 0;
}

input[type="range"]:focus {
    background: #ccc;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

input[type="range"]:nth-of-type(2) {
    z-index: 1;
}

.range-value {
    font-weight: bold;
    margin-left: 10px;
}

input[type="range"]:nth-of-type(1) {
    z-index: 3;
}

.layout-grid {
    display: grid;
    grid-template-columns: 60% 35%;
    gap: 30px;
    width: 100%;
    margin-top: 30px;
    align-items: start;
    justify-content: space-between;
}

/* levá část */
.products-list {
    display: grid;
    gap: 20px;
}

/* pravá část */
.search-box {
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 20px;
    position: sticky;
    top: 20px; /* sticky panel při scrollu */
}

/* responzivita */
@media (max-width: 992px) {
    .layout-grid {
        grid-template-columns: 1fr; /* jeden sloupec */
    }

    .search-box {
        position: relative; /* už ne sticky */
        top: auto;
    }
}

/* Kontejner */
.lang-select {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

/* Tlačítko */
.lang-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.lang-button:hover {
    background: #f9f9f9;
}

/* Text + vlajka */
.lang-label {
    display: flex;
    align-items: center;
}

.lang-flag {
    width: 20px;
    height: 14px;
    margin-right: 6px;
    object-fit: cover;
}

/* Šipka */
.lang-arrow {
    width: 16px;
    height: 16px;
    stroke: #555;
}

/* Dropdown */
.lang-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.lang-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.lang-dropdown li {
    display: flex;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
    justify-content: center;
}

.lang-dropdown li:hover {

}

/* Kontejner switch */
.switch-container {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* mezera mezi přepínačem a textem */
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

/* Skryj checkbox */
.switch-container input[type="checkbox"] {
    display: none;
}

/* Vlastní switch (dráha) */
.switch-container .switch-label {
    position: relative;
    display: inline-block;
    width: 50px;  /* šířka switch */
    height: 26px; /* výška switch */
    background-color: #ccc;
    border-radius: 50px;
    transition: background-color 0.3s;
}

/* Kulaté kolečko */
.switch-container .switch-label::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Zapnutý stav */
.switch-container input[type="checkbox"]:checked + .switch-label {
    background-color: #4caf50;
}

.switch-container input[type="checkbox"]:checked + .switch-label::after {
    transform: translateX(24px);
}

.custom-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 150px;
    border: 2px dashed var(--primary-color);
    border-radius: 1rem;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
    position: relative;
}

.custom-file-label:hover {
    background-color: #e0f0e0;
}

.custom-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

#file-label-text {
    pointer-events: none;
}

.switch-container {
    display: flex;
    justify-content: space-between; /* text vlevo, switch vpravo */
    align-items: center; /* vertikální vycentrování */
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    width: 200px; /* nebo podle potřeby */
}

/* Skrytí checkboxu */
.switch-container input[type="checkbox"] {
    display: none;
}

/* Dráha switch */
.switch-slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 50px;
    transition: background-color 0.3s;
    flex-shrink: 0;
}

/* Kulaté tlačítko */
.switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Zapnutý stav */
.switch-container input[type="checkbox"]:checked + .switch-slider {
    background-color: #4caf50;
}

.switch-container input[type="checkbox"]:checked + .switch-slider::after {
    transform: translateX(24px);
}
.owner-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.owner-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.owner-info i {
    font-size: 2.5rem;
    color: #b4c0cb;
}

.owner-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
}

.owner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.share-icon {
    font-size: 1.3rem;
    color: #666;
    transition: color 0.2s ease;
}
.share-icon:hover {
    color: #3498db;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: #3498db;
    color: #fff;
}
.btn-primary:hover {
    background-color: #2980b9;
}

.btn-outline {
    background: transparent;
    border: 1px solid #3498db;
    color: #3498db;
}
.btn-outline:hover {
    background: #eaf4fb;
}

.btn-success {
    background-color: #2ecc71;
    color: #fff;
}
.btn-success:hover {
    background-color: #27ae60;
}

/* Mobilní zobrazení */
@media (max-width: 640px) {
    .owner-card {
        flex-direction: column;
        align-items: stretch;
    }
    .owner-actions {
        justify-content: flex-start;
    }
    .btn, .share-icon {
        flex: 1 1 auto;
        text-align: center;
    }
}
.gallery-square {
    display: grid;
    grid-template-columns: 2fr 1.5fr; /* levá fotka větší */
    gap: 10px;
    height: auto;
}

.gallery-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-square img:hover {
    transform: scale(1.03);
}

.gallery-big {
    border-radius: 10px;
    overflow: hidden;
}

.gallery-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.gallery-right div {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
}

.gallery-right .more .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}
.product-grid {
    display: flex;
    gap: 20px; /* mezera mezi levým a pravým sloupcem */
    align-items: stretch; /* důležité: děti se roztáhnou na stejnou výšku */
}

.product-left, .product-right {
    display: flex;
    flex-direction: column;
}

.gallery-square {
    flex: 1 1 auto; /* galerie zabírá celou výšku levého sloupce */
}

.product-right {
    flex: 0 0 400px; /* fixní šířka pravého boxu, můžeš upravit */
}