@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --lime: #EDFF4F;
    --blue-basic: #0D58C9;
    --light-teal: #AEE4FF;
}
body{
    background-color: #FFFCF1;
}

body, h1, h2, h3, h4, h5, h6, p,span,a{
    font-family: 'Josefin Sans', sans-serif;
    color: var(--blue-basic);
}
body, #wrapper, .beaches-list-wrapper .beach-wrapper, .beach-page .block, .comment-single, .search-wrapper, .info-window .button {
    background-color: #FFFCF1;
}
.beaches-list-wrapper .beach-wrapper {
    padding: 15px;
}
#wrapper .beach-data{
    color: var(--blue-basic);
    background-color: white;;
}
body, #wrapper, .beach-page .mark-values .min-max-description, #wrapper a, #wrapper .beach-data{
    color: var(--blue-basic);
}
/* Hero/Slider separator - automatically added after slider/hero section */
.home-page .map-wrapper::before {
    content: '';
    display: block;
    background-image: url('./Group\ 5450.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:10%;
    max-height: 159px;
    width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: -90px 0;
}

@media screen and (min-width: 1900px) {
    .home-page .map-wrapper::before {
        max-height: 259px;
    }
}

.beaches-list-wrapper .beach-wrapper.first, .beach-page .specification table .arrow{
    border:none;
}
.beach-data{
    border:4px solid var(--lime);
    border-radius: 10px;
    padding: 25px 25px 0 25px;
    box-sizing: border-box;
}
/* Removed background override to allow custom backgrounds */
.beaches-list-wrapper .beach-wrapper .marker-wrapper{
    bottom:unset;
}
.beach-data-container{
    display: flex;
    gap: 10px;
}
.beaches-list-wrapper .beach-wrapper .beach-list-image{
    width:50%;
}
.beaches-list-wrapper .beach-wrapper .beach-list-image a > img{
    width: 100% !important;
    height:auto;
}
.beaches-list-wrapper .beach-wrapper .beach-data .title a, .beaches-list-wrapper .beach-wrapper .marker-wrapper, .beaches-list-wrapper .beach-wrapper .beach-data .teaser-wrapper{
    padding:0;
}
.beaches-list-wrapper .beach-wrapper p{
    padding:0;
    display: none;
}
.beaches-list-wrapper .beach-wrapper .beach-data{
    width:50%;
}
.weather.widget, .beach-banner h1.title, #wrapper .beach-title a, .map-canvas #wrapper .beach-data, .home-page #search-markers td, #wrapper .submit-mark a, .beach-page .progress-bar, .home-page .map-wrapper .advanced-search, .beaches-list-wrapper .beach-wrapper .progress-bar .percent span, button.load-more{
    color:white;
}
.beaches-list-wrapper .beach-wrapper .progress-bar .percent{
    background-color: var(--blue-basic);
}
.beach-photos-wrapper .file-upload-wrapper{
    
    @media screen and (min-width: 768px) {
        bottom:30px;
    }
}
.home-page .map-wrapper, .beaches-list-wrapper .beach-wrapper .progress-bar .percent, .beach-page .submit-mark, .beaches-list-wrapper .beach-wrapper .submit-mark, #footer, button.load-more, .beach-page .progress-bar .percent, .search-wrapper .btn-search, .info-window .button, .beach-photos-wrapper .file-upload-wrapper, .beach-additional-info .write-review-button{
    background-color: var(--blue-basic);

}
.description .col input[type=text],.textarea-wrapper textarea{
    border:2px solid var(--blue-basic);
    border-radius:5px;
    box-sizing: border-box;
}
.description input[type=text]:first-of-type{
   margin-right:10px;
}
.submit .submit-mark{
background-color: var(--lime)!important;
border:1px solid var(--blue-basic)!important;
border-radius:20px;
max-width:160px;
}
.submit-mark input[type=submit]{
    font-size:16px;

    color:var(--blue-basic);

}
.beaches-list-wrapper .beach-wrapper .submit-mark{
    background:none;
     position: relative;
     bottom:15px;
     vertical-align: text-bottom;
         text-transform: lowercase;
         margin-left:15px;
         right:0;
         float:right;
}
#wrapper .submit-mark a,  button.load-more{
font-size: 16px;
    color: var(--blue-basic);
    background-color: var(--lime);
    border: 1px solid var(--blue-basic);
    border-radius: 20px;
    padding: 10px 15px;
    
   
}
.beaches-list-wrapper .beach-wrapper .marker-wrapper{
    position: relative;
    vertical-align: top;
}
.beaches-list-wrapper .beach-wrapper.first .beach-list-image{
    border: 0 !important;
}
.beaches-list-wrapper .beach-wrapper .marker{
    margin-right:10px;
}
.beaches-list-wrapper .beach-wrapper .beach-list-image a > img{
    border-radius:10px;
}

.beaches-list-wrapper{
    max-width: 1140px;
    margin: 0 auto;
}
.slider img, .beach-banner.mark img[alt="Ocena"]{
    max-width:100%;
    height:auto;
}
.slider{
    min-height: 500px;
    max-width: 100%;
}
.slider img{
    object-fit: cover;
    height:100%;
}
.slider .slide-content{width:100%;height:100%;}

#header {
    background-color: transparent;
    position: fixed;
    box-shadow: none;
    z-index: 10;
    height: 130px;
    max-width: 100vw;
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./union.svg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    z-index: -1; /* Behind the header content */
    pointer-events: none; /* Prevent blocking clicks */
}
.single-plaza #header::before {
    background-image: url('./union-teal.svg');
}
.single-plaza .header-video{
    display:none!important;
}
.single-plaza #wrapper{
    background-color: #FFFCF1;
}
.single-plaza .weather.widget{
    display:none;
}
.single-plaza h1.title{
    display:none;}
    .single-plaza .beach-banner{
        display:none;
    }
    .single-plaza #wrapper .trip_advisor_data {
       margin-top:35px
    }
    .single-plaza #wrapper .trip_advisor_data a{
        color:var(--blue-basic);
    }
#wrapper .menu-stoperan-plaza-menu-container a{
    color: var(--blue-basic);
    font-size:16px;
}

#wrapper {
    padding-top: 45px;
}
.single-plaza #wrapper{
    padding-top:95px;
}
.home-page .map-canvas{
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
        height:400px;

}
.home-page .map-wrapper #search-block{
    max-width: 700px;
     width: 100%;
    margin: 0 auto;
        border:1px solid var(--blue-basic);
    border-radius: 5px;
}
.home-page .map-wrapper #search-text{
    max-width:650px;
}
#green-round{
    display: none !important;
}
#menu ul li{
    margin-left:20px;
}
.home-page .map-wrapper{
    background: none;
    padding:0 10px;
    max-width: 1140px;
    margin: 0 auto;
}
#search-form{
margin-top:50px;
}
.home-page #search-markers td{
    color: var(--blue-basic);
}
.home-page .map-panel{
    width:calc(100% - 700px);
    max-width: none;
    margin: 0 auto;
}
.home-page #search-markers .marker{
    background-position: center!important;
}

#footer {
    background-image: url('./footer.svg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position: relative;
    background-color: transparent;
    padding-bottom:50px;
    padding-top:50px;
}

#wrapper footer a{
    color:white;
    position: relative;
    z-index: 1;
}
.beaches-list-wrapper .beach-wrapper .beach-data .teaser{
    margin-top:15px;
    font-size:16px;
}
.tags-container{
    display: none !important;
}
#social-buttons{
    position: absolute;
    top: 12px;
    left: 17px;
    font-size: 35px;
    color: #FFFFFF;
}

#social-buttons a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 125px;
    height: 85px;
    background-image: url('rankingplaz-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#social-buttons a i {
    display: none !important;
}
button.hamburger span{
    background-color: var(--blue-basic);
}
#footer, #wrapper #footer .cell a{
    color:var(--blue-basic);
}
#footer .cell{
    width: auto;
}
#footer .row{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
#footer .row .col-md-6{
    width: auto;
}
#footer .row .cell:nth-of-type(2) ul{
    display:flex;
    gap:10px;
    justify-content: space-between;
}
#footer .row .cell:nth-of-type(3) {
    display:flex;
    flex-direction: column;
    gap:10px;
}
#footer .container-wrapper{
    margin-top:50px;
}
img[loading="eager"]{
    display:none;
}
.home #content{
    max-width: 100%;
    overflow-x: hidden;
}

.slider .logo-overlay,
.beach-banner .logo-overlay {
    position: absolute;
    top: 0;
    left: unset;
    right: 10px;
    background: url('rankingplaz-badge.svg') top center no-repeat;
    width: 16.5%;
    height: 320px;
    background-size: contain;
    z-index: 10000;
}
.menu-oryal-logo{
    display:none !important;
}
#footer .container-wrapper > .row:first-of-type > .cell:first-child {
    background-image: url('rankingplaz-zasila.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 80px;
    margin-bottom:20px;
   
    @media screen and (max-width: 1140px) {
        margin-right:auto!important;
    margin-left:auto!important;
    }
}
.footer-oryal-logo {
    display: none;
}
.beach-banner video{
    border-radius: 25px;
    display: block!important;
    min-height: 590px;
    max-height:40vh;
    object-fit: cover;
}
.beach-banner h1.title{
    left:25px;
    top:140px;
    bottom: unset;
    transform: unset;
    width:160px;
    font-size: 0;
    padding:0;
    margin-bottom:10px;
    border-radius: 10px;

}
.beach-banner .beach-name{
    font-size: 32px;
}

.beach-banner .weather.widget{
    left:25px;
    margin-top:10px;
    box-sizing: border-box;
    right: unset;
    width:160px;
    border-radius: 10px;
}

.weather.widget .widget-title{
    display:block;
}
.beach-banner .rank-overlay{top:25px;
left:25px;
bottom:unset;}
.beach-banner .rank-overlay .rank{
    background-color: var(--lime);
    left:15px;
    border-color:var(--lime);
    border-left-color:var(--lime)!important;
}
.beach-banner .rank-overlay .rank .rank-number{
    color: var(--blue-basic);
}
#beach-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#beach-content .beach-banner{
    grid-column: 1 / -1;
    order: 1;
}
#beach-content h1{
    grid-column: 1 / -1;
    order: 2;
}
#beach-content .beach-description{
    grid-column: 1;
    order: 3;
}
#beach-content .your-rating{
    grid-column: 2;
    box-sizing: border-box;
    order: 3;
    padding:0;
}
#beach-content .map-canvas,
#beach-content .beach-photos-wrapper,
#beach-content .beach-additional-info,
#beach-content .comments-wrapper,
#beach-content .gallery{
    grid-column: 1 / -1;
    box-sizing: border-box;
    padding:0;
}
#beach-content .map-canvas{
    order:5;
   
}
#comments-list{
    width:100%;
}
#gmap{
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
   
   
}
.single-plaza #gmap{
    border-radius:25px;
}
.gallery img{
    border-radius:25px;
}
.specification{
    background-color:white;
    border-radius:25px;
    padding:15px;
    border:4px solid var(--lime);
    margin-bottom:25px!important;
}
.submit-mark a{
    margin-top:25px!important;
}
#beach-content .beach-photos-wrapper{
    order:6;
}
#beach-content .beach-additional-info{
    order:7;
}
#beach-content .comments-wrapper{
    order:8;
}
#beach-content .gallery{
    order:9;
}

/* Desktop layout: Comments and Gallery side by side */
#beach-content .comments-wrapper {
    grid-column: 1;
    grid-row: 6;
}

#beach-content .gallery {
    grid-column: 2;
    grid-row: 6;
}

@media screen and (max-width: 768px) {
    #beach-content{
        grid-template-columns: 1fr;
    }
    #beach-content .beach-description,
    #beach-content .your-rating{
        grid-column: 1;
    }
}
#beach-content h1{
    order:2;
}
.your-rating .col{
    width:100%;
    max-width:100%;
    box-sizing: border-box;
    padding:0;
}
.your-rating span{
    font-size:16px;
}
.percent span{
    color:white;
}
.your-rating h3{
    display:none;
}
.your-rating .min-max-description{
    font-size:14px;
}
.beach-banner{
    max-height:100%
}
.beach-page .block.progress-container{
    margin-top:0;
}
#wrapper .slider .desc-overlay{
    right: unset;
    bottom: 25%;
    left:25px;
    top: unset;
    color: #FFF;
    font-size: 28px;
    line-height: 1.5;
    order: 1;
    text-align: left;
    max-height: 100%;
    display:block;
}
#wrapper .slider .title-overlay span{
    font-size: 16px;
    line-height: 1.5;
    font-weight:normal;
}
.search-wrapper{
    padding-top:50px;
    padding-bottom:50px;
}
.slick-slider.slider-nav .slick-track .slick-slide img{
    padding-left:0;
    margin-left:5px;
}
#wrapper .slider .title-overlay{
    font-family: 'josefin sans';
    right: unset;
    bottom: 14%;
    left:25px;
    top: unset;
    color: var(--blue-basic);
    background-color: var(--lime);
    border:1px solid var(--blue-basic);
    border-radius:10px;
    padding:10px;
    font-size: 16px;
    line-height: 1.5;
    order: 1;
    width: fit-content;
    text-align: left;
    max-height: 100%;
    display:block;
    @media screen and (max-width: 768px) {
        bottom: 17%;
    }
}
#wrapper .slider .desc-overlay .title,#wrapper .slider .desc-overlay .highlight{
    color:white;
}
.beach-additional-info .visit-button{
    background:transparent
}
footer#footer .container-wrapper .cell:nth-of-type(3){
    /* Nested media query removed - will be added separately */
}
#menu-stoperan-footer-menu{
    /* Nested media query removed - will be added separately */
}
.trip_advisor_data h1{
    font-size:40px;
}
.trip_advisor_data{
    display:grid;
}
.trip_advisor_data .row:not(.with-map){
    order:3;
}
.trip_advisor_data .row .with-map{
    order:2;
}
.trip_advisor_data .beach-additional-info-wrapper{
    order:1;
}

/* Visit button styling - transparent with blue border */
.visit-button {
    margin: 20px 0;
}

.visit-button a {
    display: inline-block;
    background-color: transparent;
    color: var(--blue-basic);
    border: 2px solid var(--blue-basic);
    border-radius: 25px;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: center;
    max-width:180px;

}
.single-plaza .beach-page .block{
    background-color: transparent;
}
.single-plaza .beach-additional-info .title{
    color:var(--blue-basic);
}
.write-review-button a{
    display: inline-block;
    background-color: transparent;
    color: var(--blue-basic);
    border: 2px solid var(--blue-basic);
    border-radius: 25px;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: center;
    max-width:180px;
    background-color: var(--lime);
    margin-top:10px;
}
.visit-button a:hover {
    background-color: var(--blue-basic);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(13, 88, 201, 0.3);
}
.beach-additional-info .write-review-button a, .beach-additional-info .visit-button a{
    font-size:16px;
}
.beach-additional-info .write-review-button{
    background-color: transparent!important;
}
.beach-additional-info{
    display:flex;
    flex-direction: column;
   
}
.beach-additional-info .col:last-of-type{
    width:200px;
}
.beach-additional-info .col{
    width:auto;
}
.single-plaza #footer{
    background-color: transparent;
}

.beach-additional-info {}
/* ===== COMPREHENSIVE THEME OVERRIDE ===== */
body.uspCenterDebugToggle {
  background-color: red;
}

body.uspCenterDebugToggle, body.uspCenterDebugToggle #wrapper,body.uspCenterDebugToggle .beaches-list-wrapper .beach-wrapper,body.uspCenterDebugToggle .beach-page .block,body.uspCenterDebugToggle .comment-single,body.uspCenterDebugToggle .search-wrapper, body.uspCenterDebugToggle .info-window .button{
    background-color: #FFFCF1;
}

.beach-page .submit-mark.uspCenterDebugToggle,
.beaches-list-wrapper .beach-wrapper .submit-mark.uspCenterDebugToggle {
  background-color: red !important;
}

/* Theme Override Styles */
body {
  font-family: 'DIN W02 Cond' !important;
}

h1 span, h2 span {
  font-family: 'josefin sans' !important;
}

h1, h2, h3, h4, .beach-banner .title-overlay span, .slider .title-overlay span {
  font-family: 'josefin sans' !important;
}

#menu ul li {
  border: 0;
}

/* BLUE COLOR */
body {
  color: #0055b9;
}

/* BLUE BACKGROUND - Removed to allow custom backgrounds */
/* RED BACKGROUND */
.beach-page .submit-mark, .beaches-list-wrapper .beach-wrapper .submit-mark {
  background-color: #e40029;
}

.beach-page .progress-bar .percent .bottom-arrow {
  border-color: transparent;
}

.beach-banner.first .rank-overlay {
  border-left-color: transparent;
  height: 42px;
  border-left: 0;
  background-color: transparent;
  left: 20px;
  color: white;
  padding-top: 5px; 
}

.beach-banner .rank-overlay .rank {
  border-color: #e40029;
  border-radius: 100%;
  border-width: 18px;
}

.beach-banner .rank-overlay .rank-number {
  top: 6px;
  left: 64px;
}

.beach-banner .rank-overlay .rank {
  left: 50px;
}

.beach-page .marker {
  margin: 0 auto;
  width: 63px;
}

.marker-desc {
  text-align: center;
}



.beaches-list-wrapper .beach-wrapper .beach-list-image {
  margin-right: 0;
}

#menu ul li.menu-oryal-logo {
  padding: 0;
}

.menu-oryal-logo img {
  max-height: 42px;
}

#menu ul li {
  vertical-align: middle;
}

.beach-page .webcam .submit-mark {
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-page .map-panel {
  margin-top: -40px;
}

#comments-list {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}

.beach-page .specification table .arrow {
  border-color: #e40029;
  border-radius: 100%;
}

.home-page #search-markers td {
  text-align: center;
}

/* Custom Font Faces */
@font-face {
  font-family: "DIN W02 Cond";
  src: url("/sand/Fonts//5611657/45962307-414d-451c-8f82-35fc7d534e2e.eot?#iefix");
  src: url("/sand/Fonts//5611657/45962307-414d-451c-8f82-35fc7d534e2e.eot?#iefix") format("eot"),
       url("/sand/Fonts//5611657/29d0f7c6-38f8-401b-bcbf-4a5c84a5fae4.woff2") format("woff2"),
       url("/sand/Fonts//5611657/0aff2c61-8416-4be0-863f-3129f9dee69e.woff") format("woff"),
       url("/sand/Fonts//5611657/2aa6b6d1-fcd8-4f65-8c8d-47e53f158086.ttf") format("truetype"); 
}

@font-face {
  font-family: "DIN W02 Cond Medium";
  src: url("/sand/Fonts//5611678/4c2ee8d2-deef-4c0a-a123-84a69c8097d8.eot?#iefix");
  src: url("/sand/Fonts//5611678/4c2ee8d2-deef-4c0a-a123-84a69c8097d8.eot?#iefix") format("eot"),
       url("/sand/Fonts//5611678/e2dcb329-0d3d-46c4-bfff-c5ae88e3e2a9.woff2") format("woff2"),
       url("/sand/Fonts//5611678/55a1b086-549c-4762-bafa-5d28c7c44036.woff") format("woff"),
       url("/sand/Fonts//5611678/b3e4b9bb-9687-4f10-a0d4-9d9fe592ce0e.ttf") format("truetype"); 
}

/* Lime Green Theme Colors - Removed background override to allow custom backgrounds */

.beaches-list-wrapper .beach-wrapper.first, .beach-page .specification table .arrow {
  border-color: #b7d43b; /* lime border */
}

.beach-banner .title-overlay, .slider .title-overlay, .comments-pager span.current, .menu-watch span {
  color: #b7d43b; /* lime color */
}



.beach-banner .title-overlay, .slider .title-overlay {
  background-color: rgba(255,255,255,.9); /* white .9 background */
}

.visit-button {
  background-color: #e40029;  /* malina color */
}

#result-block >span > a {
  color: #00A4FF !important;
}

#footer {
  margin-top: 0;
}

#green-round {
  transform: rotate(180deg);
  transform-origin: center center;
  margin-bottom: -1px;
}

#green-round, #green-round svg {
  width: 100%;
  height: 10vh;
}

#green-round svg path {
  fill: #b7d43b;
}

button {
  font-family: 'DIN W02 Cond Medium';
}



.info-window .indicator {
  border-color: #0055b9;
  border-radius: 100%;
}
#form-submit-mark .mark .col:nth-of-type(2){
background-color: white;
border:4px solid var(--lime);
border-radius:10px;
padding:15px;
box-sizing: border-box;
margin-top:20px;
}
.beach-page .progress-bar{
    margin-top:10px;
}
.beach-page .mark-values .min-max-description, #beach-markers td, .home-page #search-markers td {
  font-size: 16px;
  line-height: 1.2;
}
.fileUpload{
    margin:15px 0;
}
.fileUpload span{
    color:white;
}
#footer .cell {
  font-size: 15px;
}

#beach-markers td {
  text-align: center;
}

.footer-oryal-logo {
    margin-top: -40px;
}

.row.submit {
    text-align: right;
    margin-bottom: 30px;
}

.row.submit .submit-mark {
    position: initial;
}

div.slider {
    height: auto !important;
    aspect-ratio: 3.2/1;
}
/* Banner images before load-more-wrapper */
.load-more-wrapper::after {
    content: '';
    display: block;
    width: 100%;
    height: 500px;
    background-image: url('banner-desktop-suplementy.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 40px;
}
.beach-page .webcam .submit-mark{
    background:transparent;
}
#wrapper .submit-mark {
    background:transparent;
}
.beach-page .col{
    margin-left:0;
}
.beach-page .col:first-of-type{

}
/* Mobile column layout will be added to main media query */
.mobile-left-padding{
    display:none;
}
.gallery .col{
    width:100%;
}
.your-rating .marker-wrapper{
    display:flex;
}
.beach-page .single-marker{
    min-width:35px;
}
.beach-page .single-marker .marker-desc{
    font-size:14px;
}
.your-rating > .row:first-of-type{
    background-color:white;
    border:4px solid var(--lime);
    border-radius:10px;
    padding:15px;
   
}
.beach-page .mark-values{
    margin-top:0;
}

/* Media Queries - Mobile Responsive */
@media screen and (max-width: 768px) {
    .beach-data-container {
        flex-direction: column;
    }
    
    .beaches-list-wrapper .beach-wrapper .beach-list-image,
    .beaches-list-wrapper .beach-wrapper .beach-data {
        width: 100%;
    }
    
    .beaches-list-wrapper .beach-wrapper .submit-mark {
        float: none;
        margin-left: 0;
    }
    
    .beaches-list-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }
    .home-page .map-wrapper #search-text {
        max-width: 400px;
    }
    
    #footer .row {
        grid-template-columns: 1fr;
    }
    .home-page .slide-content{
        display: block!important;
    }
    #footer .row .col-md-6,
    #footer .cell {
        width: 100%;
        margin: 0 auto;
    }
    
    #footer .row .cell:nth-of-type(2) ul {
        flex-direction: column;
    }
    .beach-banner{
        max-width:100vw;
    }
    .map-canvas{
        max-width:100vw;
        width:100%;
    }
    .gallery{
        width:100%;
    }
    .your-rating{
        max-width:100vw;
    }
    .beach-description{
        max-width:100vw;
    }
    .slider{
        max-width:100vw;
    }
    .beach-banner video{
        max-width:100vw;
    }
    .beach-banner h1.title {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        margin-top: 10px;
    }
    
    #beach-content {
        grid-template-columns: 1fr; /* Single column - elements in separate rows */
        gap: 15px;
    }
    
    #beach-content .beach-description,
    #beach-content .your-rating {
        grid-column: 1 / -1; /* Span full width on mobile for main content */
    }
    
    /* Ensure other elements also span full width except gallery and comments */
    #beach-content .map-canvas,
    #beach-content .beach-photos-wrapper,
    #beach-content .beach-additional-info {
        grid-column: 1 / -1;
    }
    
    /* Gallery and comments will use specific column positioning below */
    
    footer#footer .container-wrapper .cell:nth-of-type(3) {
        display: flex !important;
    }
    
    #menu-stoperan-footer-menu {
        justify-content: center;
    }
    
    .load-more-wrapper::after {
        background-image: url('banner-mobile-suplementy.png');
        height: 205px;
    }
    
    /* Mobile: Stack comments and gallery vertically */
    #beach-content .comments-wrapper {
        grid-row: 6;
        grid-column: 1;
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }
    
    #beach-content .gallery {
        grid-row: 7; /* Different row on mobile */
        grid-column: 1;
        width: 100%;
        padding: 0;
    }
}

/* Additional adjustments for very small screens */
@media screen and (max-width: 480px) {
    #beach-content {
        gap: 10px; /* Smaller gap on very small screens */
    }
    
    #beach-content .comments-wrapper {
        margin-bottom: 15px; /* Reduced spacing */
    }
}

@media screen and (max-width: 1024px) {
    #wrapper .menu-stoperan-plaza-menu-container a {
        font-size: 14px;
    }
    
    .home-page .map-panel {
        width: 100%;
        max-width: none;
    }
}

@media screen and (max-width: 1140px) {
    #footer .container-wrapper > .row:first-of-type > .cell:first-child {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Gallery/Slider Layout Fixes - Prevent Layout Shifts */
.beach-photos-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Hide uninitialized slider to prevent FOUC */
.slider-for:not(.slick-initialized),
.slider-nav:not(.slick-initialized) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-for.slick-initialized,
.slider-nav.slick-initialized {
    opacity: 1;
}

/* Main slider container */
.slider-for {
    width: 100%;
    max-width: 100%;
    height: 400px; /* Reserve space to prevent layout shift */
    overflow: hidden;
}

/* Navigation slider container */
.slider-nav {
    width: 100%;
    max-width: 100%;
    height: 120px; /* Reserve space for thumbnails */
    overflow: hidden;
    margin-top: 10px;
}

/* Slick slider overrides to prevent layout shifts */
.slick-track {
    display: flex !important;
    align-items: center;
}

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

.slick-slide img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

/* Main slider images */
.slider-for .slick-slide {
    height: 400px;
}

.slider-for .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Navigation thumbnails */
.slider-nav .slick-slide {
    height: 100px;
    margin: 0 5px;
}

.slider-nav .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* Mobile styles - Fixed from invalid nested media queries */
@media screen and (max-width: 768px) {
    /* Footer navigation */
    #footer .row .cell:nth-of-type(2) ul {
        flex-direction: column;
    }
    
    /* Weather widget mobile styles */
    .beach-banner .weather.widget {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        margin-top: 10px;
    }
    
    /* Footer cell display */
    footer#footer .container-wrapper .cell:nth-of-type(3) {
        display: flex !important;
    }
    #wrapper .submit-mark a{
        margin-bottom:15px;
    }
    /* Footer menu centering */
    #menu-stoperan-footer-menu {
        justify-content: center;
    }
    
    /* Banner mobile image */
    .load-more-wrapper::after {
        background-image: url('banner-mobile-suplementy.png');
        height: 205px;
    }
    
    /* Mobile slider adjustments */
    .slider-for {
        height: 250px; /* Smaller height on mobile */
    }
    
    .slider-for .slick-slide {
        height: 250px;
    }
    
    .slider-nav {
        height: 80px; /* Smaller thumbnails on mobile */
    }
    
    .slider-nav .slick-slide {
        height: 70px;
        margin: 0 2px;
    }
}

/* Additional layout shift prevention */
.slick-list {
    overflow: hidden !important;
}

.slick-track {
    will-change: transform;
}

/* Prevent horizontal scrolling caused by slider */
.gallery {
    overflow-x: hidden;
}

/* Loading state for sliders */
.slider-for:not(.slick-initialized) .beach-photo,
.slider-nav:not(.slick-initialized) .beach-photo {
    display: none;
}

.slider-for:not(.slick-initialized) .beach-photo:first-child,
.slider-nav:not(.slick-initialized) .beach-photo:first-child,
.slider-nav:not(.slick-initialized) .beach-photo:nth-child(2),
.slider-nav:not(.slick-initialized) .beach-photo:nth-child(3) {
    display: block;
}

/* Ensure images don't cause overflow */
.beach-photo img {
    max-width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 872px) {
    #menu > div {
        top: 85px;
        height: 100vh;
        padding-top: 45px;
        z-index:-2;
        background-color: #AEE4FF;
    }
}
.beaches-list-wrapper .beach-wrapper .submit-mark {

    @media screen and (max-width: 710px) {
        margin-top: 10px;
}
}
@media screen and (min-width: 1024px) {
    .description .row{
        display: flex;
        
            flex-direction: row;
            gap: 10px;
            justify-content: space-around;
    }
}