<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Archívy Wellness - Hotel Chopok</title>
	<atom:link href="https://www.hotelchopok.sk/en/stay-category/wellness-en/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.hotelchopok.sk/en/stay-category/wellness-en/</link>
	<description></description>
	<lastBuildDate>Mon, 07 Jul 2025 14:14:03 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.hotelchopok.sk/wp-content/uploads/2025/06/cropped-Chopok_fav_195x195_2-png-32x32.webp</url>
	<title>Archívy Wellness - Hotel Chopok</title>
	<link>https://www.hotelchopok.sk/en/stay-category/wellness-en/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Cleansing therapy</title>
		<link>https://www.hotelchopok.sk/en/stays/cleansing-therapy/</link>
		
		<dc:creator><![CDATA[Jiří Kolínský]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 16:19:57 +0000</pubDate>
				<guid isPermaLink="false">https://www.hotelchopok.sk/pobyty/cleansing-therapy/</guid>

					<description><![CDATA[<p>A wellness retreat focused on harmonizing the body and mind includes relaxing treatments that help restore balance between physical and mental well-being. Massages and therapies are designed to relieve physical blockages and restore the natural flow of energy in your body.  </p>
<p>Článok <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/">Cleansing therapy</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="pl-2545"  class="panel-layout" ><div id="pg-2545-0"  class="panel-grid panel-has-style" ><div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-2545-0" id="hero-wrapper" data-stretch-type="full-width-stretch" ><div id="pgc-2545-0-0"  class="panel-grid-cell" ><div id="panel-2545-0-0-0" class="so-panel widget widget_sow-hero panel-first-child panel-last-child" data-index="0" ><div class="hero-img panel-widget-style panel-widget-style-for-2545-0-0-0" id="hero-img" ><div
			
			class="so-widget-sow-hero so-widget-sow-hero-default-844de1f37420-2545 so-widget-fittext-wrapper"
			 data-fit-text-compressor="0.85"
		>				<div class="sow-slider-base" style="display: none" tabindex="0">
					<ul
					class="sow-slider-images"
					data-settings="{&quot;pagination&quot;:true,&quot;speed&quot;:400,&quot;timeout&quot;:8000,&quot;paused&quot;:false,&quot;pause_on_hover&quot;:false,&quot;swipe&quot;:true,&quot;nav_always_show_desktop&quot;:&quot;&quot;,&quot;nav_always_show_mobile&quot;:&quot;&quot;,&quot;breakpoint&quot;:&quot;780px&quot;,&quot;unmute&quot;:false,&quot;anchor&quot;:null}"
										data-anchor-id=""
				>		<li class="sow-slider-image  sow-slider-image-cover" style="visibility: visible;;background-color: #333333" >
					<div class="sow-slider-image-container">
			<div class="sow-slider-image-wrapper">
				<h1 style="text-align: center">Cleansing therapy</h1>
			</div>
		</div>
		<div class="sow-slider-image-overlay sow-slider-image-cover" style="opacity: 0.6;background-image: url(https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_205.webp)"  ></div>		</li>
		</ul>				<ol class="sow-slider-pagination">
											<li><a href="#" data-goto="0" aria-label="Display slide 1"></a></li>
									</ol>

				<div class="sow-slide-nav sow-slide-nav-next">
					<a href="#" data-goto="next" aria-label="Next slide" data-action="next">
						<em class="sow-sld-icon-thin-right"></em>
					</a>
				</div>

				<div class="sow-slide-nav sow-slide-nav-prev">
					<a href="#" data-goto="previous" aria-label="Previous slide" data-action="prev">
						<em class="sow-sld-icon-thin-left"></em>
					</a>
				</div>
				</div></div></div></div></div></div></div><div id="pg-2545-1"  class="panel-grid panel-no-style" ><div id="pgc-2545-1-0"  class="panel-grid-cell" ><div id="panel-2545-1-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="1" ><div
			
			class="so-widget-sow-editor so-widget-sow-editor-base"
			
		><h3 class="widget-title">Come and unwind with a wellness retreat designed to harmonize your entire body. </h3>
<div class="siteorigin-widget-tinymce textwidget">
	<p>&nbsp;</p>
<p>Through various techniques such as deep tissue massage and foot reflexology, blocked areas are released, stress and tension are reduced, and your mind is calmed. These treatments stimulate energy pathways that support the natural regeneration process, leaving you feeling refreshed and full of energy. </p>
<p>&nbsp;</p>
<h3><strong>What Experiences You Can Look Forward To:</strong></h3>
<ul>
<li>1 x Classic Massage (25 min.) – Relieves tension throughout the body.</li>
<li>1 x Mud Wrap (40 min.) – Detoxifies and improves blood circulation throughout the body.</li>
<li>1 x Salt Scrub (20 min.) – Enhances circulation and releases energy pathways.</li>
<li>1 x Foot Reflexology Massage (20 min.) – Awakens chakras through reflex points on the feet.</li>
<li>unlimited access to the PLESNIVEC pool and sauna world</li>
<li>unlimited access to the fitness center</li>
<li>stylish and spacious rooms with a forest view</li>
<li>1 x Welcome drink per person</li>
<li>gourmet Experience – Buffet breakfast and served dinners.</li>
</ul>
<p>ffff</p>
</div>
</div></div></div><div id="pgc-2545-1-1"  class="panel-grid-cell" ><div id="panel-2545-1-1-0" class="so-panel widget widget_form_top_offer_widget panel-first-child panel-last-child" data-index="2" ><style>
    /* 
    .input-visitor::before {
        min-width: 30px !important;
        height: 100% !important;
    }
    .input-date::before {
        min-width: 22px !important;
        height: 100% !important;
    } */
    /* 
    #rezervacia-form .btn.btn-yellow,
    #rezervacia-form .btn span {
        max-width: fit-content !important;
    } */
    @media screen and (max-width: 480px) {
        #rezervacia-form .btn.btn-yellow,
        #rezervacia-form .btn span {
            max-width: 100%;
        }
    }

    .booking-engine-container_horizontal {
        background-color: var(--light-project); /* Light background color */
        padding: 30px 0 25px;
        width: 90%;
        max-width: 1440px;
        margin: 0 auto; /* Center the form */
        margin-top: -104px;
        z-index: 99;
        position: relative;
    }
    .booking-engine-container_horizontal > div {
        width: 90%;
        margin: 0 auto;
    }

    .booking-engine-container_horizontal form {
        display: flex;
        flex-wrap: nowrap;
    }

    .booking-engine-container_horizontal label {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        color: var(--text); /* Dark text color */
        position: absolute;
        top: -15px;
        padding-top: 10px;
    }

    .input-wrapper.input-visitor.label-visible label {
        display: block;
    }

    .booking-engine-container_horizontal input[type="text"],
    .booking-engine-container_horizontal input[type="number"] {
        width: 100%;
        font-size: 14px;
        color: var(--text);
        background-color: var(--white);
        transition: border-color 0.3s ease;

        background: transparent;
        border: none;
        border-radius: 0 !important;

        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);

        height: 20px;
        width: 100%;
    }
    .booking-engine-container_horizontal input[type="number"].vek-input {
        border: none;
    }
    .booking-engine-container_horizontal input[name="promocode"] {
        border: none;
    }

    .booking-engine-container_horizontal input[type="text"]:focus,
    .booking-engine-container_horizontal input[type="number"]:focus {
        border-color: var(--project); /* Highlight color when focused */
        outline: none;
    }

    .booking-engine-container_horizontal a {
        display: block;
        margin-top: 20px;
        color: var(--white);
        text-align: center;
        font-size: 14px;
        text-decoration: none;
    }

    .booking-engine-container_horizontal a:hover {
        text-decoration: underline;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 500px) {
        .booking-engine-container_vertical {
            padding: 15px;
        }

        .booking-engine-container_vertical input,
        .booking-engine-container_vertical button {
            font-size: 13px;
        }
    }


    .booking-engine-container_horizontal button span {
        margin: 0 auto;
    }

    .booking-engine-container_horizontal .form-post-contact-wrapper {
        display: flex;
        flex-direction: row;
        /* align-items: flex-start; */
        justify-content: center;
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
            align-items: center;
        }
    }

    .booking-engine-container_vertical a {
        text-align: left;
        box-sizing: border-box;
        white-space: normal;
        height: 45px;
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;

        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .booking-engine-container_vertical a span {
        padding: 0;
    }

    .booking-engine-container_horizontal .input-wrapper {
        position: relative;
        height: 65px;
        flex: 1;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    .booking-engine-container_vertical .input-wrapper::before {
        content: url(); /* Tvoje URL ikony */
        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(0);
        padding-right: 10px;
    }

    .input-hotel label {
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }
    .input-hotel select {
        border: none;
        background: transparent;
        width: fit-content;
        cursor: pointer;
        padding-right: 20px;
        border-right: 1px solid var(--text);
    }

    .input-wrapper select {
        -webkit-appearance: none; /* Pre Chrome, Safari, Edge */
        -moz-appearance: none; /* Pre Firefox */
        appearance: none; /* Štandardné skrytie */
        background: transparent; /* Priehľadné pozadie */
        padding-right: 30px; /* Priestor pre vlastnú ikonu */
    }

    .input-wrapper.input-hotel {
        position: relative;
        /* display: inline-block; */
    }
    .input-wrapper.input-hotel::after {
        content: '';
        background: transparent
         url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5H7z%22%2F%3E%3C%2Fsvg%3E')
         no-repeat center center;
        background-size: 100%;
        position: absolute;
        right: 25px; /* Vzdialenosť od pravej strany */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Nezasahuje do kliknutia na select */
        width: 22px;
        height: 22px;
    }


    @media screen and (max-width: 1280px) {
        .booking-engine-container_horizontal form {
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
    }
    @media screen and (max-width: 991px) {
        .booking-engine-container_horizontal {
            margin-top: 0;
            width: 100vw;
        }
        
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 50%;
            border-bottom: 1px solid var(--text);
        }
        .booking-engine-container_horizontal .input-wrapper.input-present{
            flex-basis: 100%;
        }
        
        .booking-engine-container_horizontal label {
            top: -10px;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
        .input-hotel select,
        .booking-engine-container_horizontal input[type="text"],
        .booking-engine-container_horizontal input[type="number"] {
            border-right:  none;
        }
        .booking-engine-container_horizontal button {
            margin-top: 30px;
        }
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
        }
        .booking-engine-container_horizontal .form-post-contact-wrapper a {
            margin-top: 0;
            height: 45px;
        }
    }
    @media screen and (max-width: 479px) {
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 100%;
        }
    }

    /* Flash messages */
    
    .flash-message-wrapper {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -10px);
        z-index: 9;
    }
    .flash-message-wrapper > div {
        display: none;
        font-size: 13px;
        width: 200px;
        font-weight: 500;
        border-radius: 15px;
        padding: 9px;
       
        color: var(--white);
    }
    .childrens-error {
        background: var(--project);
    }

    .childrens-flash {
        margin-top: 7px;
        background: var(--green);
    }


    /* KALENDAR NOVY */
    /* LEN NOVÉ ŠTÝLY PRE KALENDÁR MODAL - NEOVPLYVŇUJÚ TVOJE ŠTÝLOVANIE */
    .children-modal,
    .calendar-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .children-popup,
    .calendar-popup {
        width: 90vw;
        max-width: 350px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        overflow: hidden;
    }

    .calendar-header {
        background: var(--project);
        color: white;
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-year {
        font-size: 18px;
        font-weight: 600;
    }

    .nav-button {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.2s;
    }

    .nav-button:hover {
        background: rgba(255,255,255,0.2);
    }

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
    }

    .weekday {
        padding: 12px 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }

    .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: #eee;
        padding: 1px;
    }

    .day {
        background: white;
        border: none;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.2s;
        position: relative;
    }

    .day:hover {
        background: #f0f0f0;
    }

    .day.other-month {
        color: #ccc;
        background: #fafafa;
    }

    .day.selected-start {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.selected-end {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.in-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.hover-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.today {
        position: relative;
    }

    .day.today::after {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--project);
        border-radius: 50%;
    }

    .calendar-footer {
        padding: 20px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-footer .button-wrapper {
        width: 50%;
        display: flex;
        justify-content: right;
        gap: 5px;
    }

    .confirm-button {
        background: var(--light-project-2);
        color: var(--text);
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
    }

    .confirm-button:hover {
        background: var(--purple);
        color: var(--white)

    }

    .confirm-button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .cancel-button {
        background: none;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        padding: 10px;
        color: var(--gray);
        box-shadow: none !important
    }

    .date-range-display {
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: lighter;
        color: rgba(0, 0, 0, 0.3);
        background: transparent;
        border: none;
        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);
        height: 20px;
        width: 100%;
    }

    /* ŠTÝLY PRE TLAČIDLÁ */
    .btn {
        display: inline-block;
        padding: 12px 24px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-yellow {
        background-color: #f4c430;
        color: #333;
    }

    .btn-yellow:hover {
        background-color: #e6b82a;
    }

    /* 
    .btn-transparent {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--text);
    } */

    .btn.btn-transparent:hover span {
        background: transparent !important;
        color: var(--white);
    }

    .selection-info {
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
    }

    #dateRangeDisplay {
        white-space: nowrap;
    }

    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    @media screen and (max-width: 991px) {
        .input-hotel select,
        .booking-engine-container_horizontal select,
        .booking-engine-container_horizontal input[type="text"], 
        .booking-engine-container_horizontal input[type="number"],
        .date-range-display {
            border-right: none !important;
        }
    }

    .booking-engine-container_horizontal select {
        font-size: 14px;
        font-weight: bold;
        color: black;
        background: transparent;
        border: none;
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid var(--text);
        cursor: pointer;
        appearance: none; /* odstráni natívny vzhľad */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* fallback ak nepoužiješ ::after */
    }
    .booking-engine-container_horizontal select option {
        font-weight: normal;
        color: var(--text);
    }

    .input-wrapper.active span,
    .input-wrapper.active input,
    .input-wrapper.active select option[selected] {
        font-weight: bold !important;
        color: black !important;
    }


    #booking-button.btn-yellow:hover {
        background: unset;
    }
    #booking-button.btn-yellow:hover span {
        background: var(--project);
    }

    /* Side FORM */
    .single .booking-engine-container_horizontal,
    .single-room .booking-engine-container_horizontal,
    .single-stay .booking-engine-container_horizontal {
        max-width: 400px;
    }
    .single .booking-engine-container_horizontal form,
    .single-room .booking-engine-container_horizontal form,
    .single-stay .booking-engine-container_horizontal form {
        flex-direction: column;
    }
    .single .booking-engine-container_horizontal .input-wrapper,
    .single-room .booking-engine-container_horizontal .input-wrapper,
    .single-stay .booking-engine-container_horizontal .input-wrapper {
        border-bottom: 1px solid black;
        padding-bottom: 35px;
        margin-bottom: 35px;
    }
    .single .date-range-display,
    .single-room .date-range-display,
    .single-stay .date-range-display,
    .single .input-hotel select,
    .single-room .input-hotel select,
    .single-stay .input-hotel select {
        border: none !important;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child {
        margin-top: 0;
    }
    .single .input-wrapper.input-hotel::after,
    .single-room .input-wrapper.input-hotel::after,
    .single-stay .input-wrapper.input-hotel::after {
        transform: translateY(-30px);
    }
    #rezervacia-form h5 {
        display: none;
    }
    .single #rezervacia-form h5,
    .single-room #rezervacia-form h5,
    .single-stay #rezervacia-form h5 {
        display: block;
        margin-bottom: 33px;
    }
</style>

<script>
    /* <![CDATA[ */

    
    // function updateHotelChoice(selectElement) {
    //     const adresa_chopok = "";
    //     const adresa_apartmany = "";

    //     const selectedValue = jQuery(selectElement).val();
    //     const form = jQuery(selectElement).closest("form");

    //     if (selectedValue == "0") {
    //         form.attr("action", adresa_chopok);
    //     } else if (selectedValue == "1") {
    //         form.attr("action", adresa_apartmany);
    //     }
    // } 

    /* ]]&gt; */


    function updateFieldClasses() {
        // DÁTUMY
        const dateDisplay = document.getElementById('dateRangeDisplay');
        const dateWrapper = dateDisplay.closest('.input-wrapper');
        if (dateDisplay.textContent.trim() !== "Vyberte termín") {
            dateWrapper.classList.add('active');
        } else {
            dateWrapper.classList.remove('active');
        }

        // DETI
        const childrenDisplay = document.getElementById('childrens');
        const childrenWrapper = childrenDisplay.closest('.input-wrapper');

        const value = childrenDisplay.textContent.trim();

        // Regex: povoľuje formát ako "1", "1,2", "1, 2", "2, 14", atď.
        const containsAge = /^\d+(,\s*\d+)*$/.test(value);

        if (containsAge) {
            childrenWrapper.classList.add('active');
        } else {
            childrenWrapper.classList.remove('active');
        }


        // DOSPELÍ
        const adultsDisplay = document.getElementById('adultsDisplay');
        const adultsWrapper = adultsDisplay.closest('.input-wrapper');

        if (adultsDisplay) {
            // Získa len čísla (napr. "2" alebo "👤 2", aj s NBSP)
            const digitsOnly = adultsDisplay.textContent.replace(/[^\d]/g, '').trim();
            const adultCount = parseInt(digitsOnly, 10);

            if (!isNaN(adultCount) && adultCount > 0) {
                adultsWrapper.classList.add('active');
            } else {
                adultsWrapper.classList.remove('active');
            }
        }


        // INPUTY (dospelí, promokód atď.)
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            const wrapper = input.closest('.input-wrapper');
            if (!wrapper) return;

            if (input.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });

        // SELECT (hotelchoice)
        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            const wrapper = select.closest('.input-wrapper');
            if (!wrapper) return;

            if (select.value && select.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        updateFieldClasses(); // inicializácia

        // Dynamická aktualizácia pri zmene
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            input.addEventListener('input', updateFieldClasses);
        });

        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            select.addEventListener('change', updateFieldClasses);
        });
    });
</script>


<div class="booking-engine-container_horizontal">
    <div>
        <form id="rezervacia-form" 
            method="POST">

            <h5>Check availability</h5>

            <div class="input-wrapper input-hotel">
                <select name="hotelchoice"><option value="52">Wellness Hotel Chopok ****</option><option value="617">Apartments and Studios Lúčky</option></select>            </div>

            <!-- UPRAVENÝ INPUT PRE DÁTUMY - TERAZ JEDEN NAMIESTO DVOCH -->
            <div class="input-wrapper input-date">
                <!-- <label for="dateRange">Date of stay</label> -->
                <span class="date-range-display" id="dateRangeDisplay" onclick="openCalendar()">Select dates</span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="adults">Number of guests:</label> -->
                <!-- <input placeholder="Adults" 
                    type="number" id="adults" name="1_adultCount" class="booking-input" min="1" value="" required> -->
                <span id="adultsDisplay" class="booking-input date-range-display" onclick="openAdultsModal()">
                    Adults                </span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="childrens">Children's age::</label> -->
                <span 
                    id="childrens" 
                    class="booking-input date-range-display" 
                    onclick="openChildrenModal()"
                >
                    Children                </span>
            </div>

            <div class="input-wrapper input-present">
                <!-- <label for="promo">Promo code:</label> -->
                <input placeholder="Promo code" 
                    type="text" id="promo" name="promocode" class="booking-input">
            </div>

            <button id="booking-button" type="button" class="btn btn-yellow">
                <span>Check the price</span>
            </button>

            <!-- HIDDEN INPUTY S PÔVODNÝMI NAME ATRIBÚTMI -->
            <input type="hidden" id="arrival" name="dateFrom" class="booking-input" required>
            <input type="hidden" id="departure" name="dateTo" class="booking-input" required>

                        <input type="hidden" id="tr-data__r" name="redirect" value="0">
            <input type="hidden" id="tr-data__l" name="lang" value="en">

        </form>


        <!-- Optional link to the contact information or other services -->
        <div class="form-post-contact-wrapper">
            <a href="tel:+421911611386" title="Rezervácie Hotel Chopok telefón" class="btn btn-transparent">
                <span class="post-icon icon-tel">+421 / 911 611 386</span>
            </a>
            <a href="mailto:recepcia@hotelchopok.sk" title="Reception Hotel Chopok mail" class="btn btn-transparent">
                <span class="post-icon icon-mail">recepcia@hotelchopok.sk</span>
            </a>
        </div>
    </div>
</div>

<!-- KALENDÁR MODAL -->
<div class="calendar-modal" id="calendarModal" onclick="closeCalendarOnBackdrop(event)">
    <div class="calendar-popup">
        <div class="calendar-header">
            <button class="nav-button" onclick="changeMonth(-1)">‹</button>
            <div class="month-year" id="monthYear"></div>
            <button class="nav-button" onclick="changeMonth(1)">›</button>
        </div>

        <div class="weekdays">
            <div class="weekday">Mon</div>
            <div class="weekday">Tue</div>
            <div class="weekday">Wed</div>
            <div class="weekday">Thu</div>
            <div class="weekday">Fri</div>
            <div class="weekday">Sat</div>
            <div class="weekday">Sun</div>
        </div>

        <div class="days-grid" id="daysGrid"></div>

        <div class="calendar-footer">
            <div class="selection-datums"></div>
                        <div class="button-wrapper">
                <button class="cancel-button" onclick="closeCalendar()"><span class="icon">✖</span></button>
                <button class="confirm-button" id="confirmButton" onclick="confirmDates()" disabled>
                    Confirm                </button>
            </div>
        </div>
    </div>
    <script>
        // KALENDÁR LOGIKA
        let currentDate = new Date();
        let selectedStart = null;
        let selectedEnd = null;
        let isSelectingEnd = false;

        const monthNames = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];

        const monthNamesShort = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ];

        function formatDate(date) {
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        }

        function formatDateForDisplay(date) {
            const day = date.getDate();
            const monthShort = monthNamesShort[date.getMonth()];
            return `${day} ${monthShort}`;
        }

        function openCalendar() {
            document.getElementById('calendarModal').style.display = 'flex';
            renderCalendar();
        }

        function closeCalendar() {
            document.getElementById('calendarModal').style.display = 'none';
        }

        function closeCalendarOnBackdrop(event) {
            if (event.target === event.currentTarget) {
                closeCalendar();
            }
        }

        function renderCalendar() {
            const monthYear = document.getElementById('monthYear');
            const daysGrid = document.getElementById('daysGrid');

            monthYear.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const firstDayOfWeek = (firstDay.getDay() + 6) % 7;

            daysGrid.innerHTML = '';

            const today = new Date();
            today.setHours(0, 0, 0, 0);

            // Pridáme prázdne bunky pre dni pred 1. dňom mesiaca
            for (let i = 0; i < firstDayOfWeek; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            // Pridáme LEN dni aktuálneho mesiaca
            for (let day = 1; day <= lastDay.getDate(); day++) {
                const cellDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);

                const dayButton = document.createElement('button');
                dayButton.className = 'day';
                dayButton.textContent = day;

                if (cellDate.getTime() === today.getTime()) {
                    dayButton.classList.add('today');
                }

                if (cellDate < today) {
                    dayButton.disabled = true;
                    dayButton.style.color = '#ccc';
                    dayButton.style.cursor = 'not-allowed';
                }

                // Označenie vybraných dátumov - LEN ak sú v aktuálnom mesiaci
                if (selectedStart && 
                    cellDate.getTime() === selectedStart.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-start');
                }
                
                if (selectedEnd && 
                    cellDate.getTime() === selectedEnd.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-end');
                }

                // Označenie rozsahu - LEN ak sú oba dátumy v aktuálnom mesiaci alebo špecifické prípady
                if (selectedStart && selectedEnd) {
                    // Len ak je aktuálny deň medzi start a end a všetko je v tom istom mesiaci
                    if (cellDate > selectedStart && cellDate < selectedEnd) {
                        // EXTRA kontrola - označuj LEN ak sú start a end v rámci tohto mesiaca alebo logicky pokračujú
                        const startInThisMonth = selectedStart.getMonth() === currentDate.getMonth() && selectedStart.getFullYear() === currentDate.getFullYear();
                        const endInThisMonth = selectedEnd.getMonth() === currentDate.getMonth() && selectedEnd.getFullYear() === currentDate.getFullYear();
                        
                        if (startInThisMonth && endInThisMonth) {
                            // Oba v aktuálnom mesiaci
                            dayButton.classList.add('in-range');
                        } else if (startInThisMonth && !endInThisMonth && selectedEnd > cellDate) {
                            // Start v aktuálnom, end v budúcom - označuj od start do konca mesiaca
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && endInThisMonth && selectedStart < cellDate) {
                            // Start v minulom, end v aktuálnom - označuj od začiatku mesiaca po end
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && !endInThisMonth && selectedStart < cellDate && selectedEnd > cellDate) {
                            // Start v minulom, end v budúcom - označuj celý mesiac
                            dayButton.classList.add('in-range');
                        }
                    }
                }

                if (!dayButton.disabled) {
                    dayButton.onclick = () => selectDate(cellDate);
                    dayButton.onmouseenter = () => highlightRange(cellDate);
                    dayButton.onmouseleave = () => clearHoverRange();
                }
                
                daysGrid.appendChild(dayButton);
            }

            // Pridáme prázdne bunky na koniec len ak je potrebné pre grid (LEN neviditeľné)
            const totalCells = daysGrid.children.length;
            const remainingCells = 42 - totalCells;
            for (let i = 0; i < remainingCells; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            updateConfirmButton();
            updateSelectionDisplay();
        }

        function selectDate(date) {
            if (date < new Date().setHours(0, 0, 0, 0)) return;

            if (!selectedStart) {
                // Prvý klik - vyber start dátum
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            } else if (isSelectingEnd && !selectedEnd) {
                // Druhý klik - vyber end dátum
                if (date <= selectedStart) {
                    // Ak klikneme na skorší dátum, resetuj start
                    selectedStart = new Date(date);
                    selectedEnd = null;
                } else {
                    // Normálny výber end dátumy
                    selectedEnd = new Date(date);
                    isSelectingEnd = false;
                }
            } else {
                // Reset - začni odznova
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            }

            renderCalendar();
        }

        function updateSelectionDisplay() {
            // Aktualizuj info v kalendári ak máš vybrané dátumy
            const footerInfo = document.querySelector('.calendar-footer .selection-info');
            if (footerInfo) footerInfo.remove();
            
            if (selectedStart) {
                const footer = document.querySelector('.selection-datums');
                const info = document.createElement('div');
                info.className = 'selection-info';
                
                if (selectedEnd) {
                    info.textContent = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
                } else {
                    info.textContent = `Start: ${formatDateForDisplay(selectedStart)}`;
                }
                
                footer.insertBefore(info, footer.firstChild);
            }
        }

        function highlightRange(hoverDate) {
            if (!selectedStart || selectedEnd || !isSelectingEnd) return;
            if (hoverDate < new Date().setHours(0, 0, 0, 0)) return;
            if (hoverDate <= selectedStart) return;

            clearHoverRange();

            // Hover efekt funguje len v aktuálnom mesiaci
            const allDays = document.querySelectorAll('.day');
            allDays.forEach(day => {
                if (day.style.visibility === 'hidden') return;
                
                const dayText = parseInt(day.textContent);
                if (isNaN(dayText)) return;
                
                const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayText);
                
                // Ak je start v inom mesiaci, zvýrazni od začiatku aktuálneho mesiaca
                if (selectedStart < new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)) {
                    if (dayDate <= hoverDate) {
                        day.classList.add('hover-range');
                    }
                }
                // Normálny hover v rámci mesiaca
                else if (dayDate > selectedStart && dayDate < hoverDate) {
                    day.classList.add('hover-range');
                }
            });
        }

        function clearHoverRange() {
            const hoverDays = document.querySelectorAll('.hover-range');
            hoverDays.forEach(day => {
                day.classList.remove('hover-range');
            });
        }

        function changeMonth(direction) {
            currentDate.setMonth(currentDate.getMonth() + direction);
            renderCalendar();
        }

        function updateConfirmButton() {
            const confirmButton = document.getElementById('confirmButton');
            confirmButton.disabled = !(selectedStart && selectedEnd);
        }

        function confirmDates() {
            if (!selectedStart || !selectedEnd) return;

            // Aktualizácia hidden inputov
            document.getElementById('arrival').value = formatDate(selectedStart);
            document.getElementById('departure').value = formatDate(selectedEnd);

            // Aktualizácia zobrazenia
            const displayText = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
            document.getElementById('dateRangeDisplay').textContent = displayText;

            closeCalendar();
            updateFieldClasses();
        }
    </script>
</div>

<!-- Modal Dospelí -->
<div class="children-modal" id="adultsModal" onclick="closeAdultsOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of adults:</p>

        <div class="deti-counter">
            <button type="button" id="minus-adults">−</button>
            <input type="number" id="adults-count-input" min="1" max="10" value="2" class="vek-input" />
            <button type="button" id="plus-adults">+</button>
        </div>

        <div id="adults-error" style="display:none; color: red; margin-top:10px;">
            Minimum is 1, maximum is 10.        </div>

        <div style="text-align:right; margin-top: 15px;">
            <button type="button" class="cancel-button" onclick="closeAdultsModal()"><span class="icon">✖</span></button>
            <button type="button" class="confirm-button" onclick="saveAdults()">Confirm</button>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const adultsModal = document.getElementById("adultsModal");
            const plusBtn = document.getElementById("plus-adults");
            const minusBtn = document.getElementById("minus-adults");
            const input = document.getElementById("adults-count-input");
            const displaySpan = document.getElementById("adultsDisplay");
            const errorBox = document.getElementById("adults-error");
            const form = document.getElementById("rezervacia-form");

            let adultsCount = 2;
            const minAdults = 1;
            const maxAdults = 10;

            window.openAdultsModal = () => {
                adultsModal.style.display = "flex";
                input.value = adultsCount;
                errorBox.style.display = "none";
            };

            window.closeAdultsModal = () => {
                adultsModal.style.display = "none";
            };

            window.closeAdultsOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                    closeAdultsModal();
                }
            };

            window.showAlertModal = function(message) {
                const modal = document.getElementById("alertModal");
                const text = document.getElementById("alertModalText");

                text.textContent = message;
                modal.style.display = "flex";
            };

            window.closeAlertModal = function() {
                const modal = document.getElementById("alertModal");
                modal.style.display = "none";
            };

            window.closeAlertOnBackdrop = function(event) {
                if (event.target === event.currentTarget) {
                    closeAlertModal();
                }
            };


            plusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val < maxAdults) {
                    val++;
                    input.value = val;
                }
            });

            minusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val > minAdults) {
                    val--;
                    input.value = val;
                }
            });

            input.addEventListener("input", () => {
                let val = parseInt(input.value) || 0;
                if (val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                } else {
                    errorBox.style.display = "none";
                }
            });

            window.saveAdults = () => {
                let val = parseInt(input.value);
                if (isNaN(val) || val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                    return;
                }

                adultsCount = val;

                // Odstrániť predchádzajúci input ak existuje
                form.querySelectorAll("input[name='1_adultCount']").forEach(el => el.remove());

                const hiddenInput = document.createElement("input");
                hiddenInput.type = "hidden";
                hiddenInput.name = "1_adultCount";
                hiddenInput.value = adultsCount;
                form.appendChild(hiddenInput);

                // Aktualizovať span
                displaySpan.textContent = adultsCount;

                closeAdultsModal();
                updateFieldClasses(); // aktualizuje .active class
            };
        });
    </script>
</div>

<!-- ALERT MODAL (napr. pre "Zadajte počet dospelých") -->
<div class="children-modal" id="alertModal" onclick="closeAlertOnBackdrop(event)">
    <div class="children-popup">
        <p id="alertModalText" style="margin-bottom: 15px;">Tu bude hláška</p>
        <div style="text-align: right;">
            <button type="button" class="confirm-button" onclick="closeAlertModal()">OK</button>
        </div>
    </div>
</div>


<!-- Pocet a vek detí -->
<div class="children-modal" id="childrenModal" onclick="closeChildrenOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of children:</p>

        <div class="deti-counter">
            <button type="button" id="minus-btn">−</button>
            <span id="deti-count">0</span>
            <button type="button" id="plus-btn">+</button>
        </div>

        <p style="margin: 0 !important;">Children's age:</p>
        <div id="vek-deti-wrapper"></div>

        <div id="children-error" style="display:none; color: red; margin-top:10px;">
            Maximálny vek dieťaťa je 13 rokov.        </div>

        <div style="text-align:right; margin-top: 15px;">
        <!-- <button type="button" class="btn btn-transparent" onclick="closeChildrenModal()">Cancel</button> -->
        <button type="button" class="cancel-button" onclick="closeChildrenModal()"><span class="icon">✖</span></button>
        <button type="button" class="confirm-button" onclick="saveChildren()">Confirm</button>
        </div>
    </div>
    <style>
        .children-popup {
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            padding: 20px;
            max-width: 350px;
            width: 90vw;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: inherit;
        }

        .deti-counter {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 500;
        }

        .deti-counter button,
        .deti-counter button:focus {
            background: var(--project);
            border: none;
            color: var(--white);
            width: 32px;
            height: 32px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s ease;

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
        }

        .deti-counter button:hover {
            background: var(--light-project-2);
        }

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


        #vek-deti-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
        }

        .vek-input {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            width: 100%;
            box-sizing: border-box;
            background-color: #f9f9f9;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .vek-input:focus {
            outline: none;
            border-color: var(--project);
            background-color: #fff;
        }

        /* Tlačidlá v spodnej časti popupu */
        .children-popup .btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            background: var(--project);
        }

        .btn-yellow {
            background: var(--project);
            color: white;
            border: none;
        }

        .btn-yellow:hover {
            background: var(--purple);
        }

        /* .btn-transparent {
            background: none;
            color: #666;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        .btn-transparent:hover {
            background: #f0f0f0;
        } */

        .vek-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .vek-input {
            flex: 1;
            padding-right: 30px;
        }

        .delete-vek {
            position: absolute;
            right: 10px;
            background: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            color: var(--light-project-2);
            outline: none;
            border: none;
            box-shadow: none;
        }

        .delete-vek:hover {
            color: var(--text);
            background: none !important;
            box-shadow: none !important;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById('childrenModal');
            const plusBtn = document.getElementById("plus-btn");
            const minusBtn = document.getElementById("minus-btn");
            const countSpan = document.getElementById("deti-count");
            const wrapper = document.getElementById("vek-deti-wrapper");
            const errorBox = document.getElementById("children-error");
            const outputInput = document.getElementById("childrens");

            let detiCount = 0;
            const maxDeti = 10;

            plusBtn.addEventListener("click", () => {
                if (detiCount < maxDeti) {
                detiCount++;
                renderInputs();
                }
            });

            minusBtn.addEventListener("click", () => {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const emptyInputs = inputs.filter(el => el.value.trim() === "");

                if (emptyInputs.length > 0 && detiCount > 0) {
                detiCount--;
                renderInputs();
                }
            });

            function updateButtonStates() {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const hasEmpty = inputs.some(el => el.value.trim() === "");

                minusBtn.disabled = detiCount === 0 || !hasEmpty;
                plusBtn.disabled = detiCount >= maxDeti;
            }

            function renderInputs(prefillValues = []) {
                countSpan.textContent = detiCount;

                const currentWrappers = Array.from(wrapper.querySelectorAll(".vek-wrapper"));
                const currentValues = currentWrappers.map(w => w.querySelector("input").value.trim());

                wrapper.innerHTML = "";
                errorBox.style.display = "none";

                const usedValues = prefillValues.length ? prefillValues : currentValues;

                for (let i = 0; i < detiCount; i++) {
                const value = usedValues[i] || "";

                const inputWrapper = document.createElement("div");
                inputWrapper.classList.add("vek-wrapper");

                const input = document.createElement("input");
                input.type = "number";
                input.name = `vek_dieta_${i + 1}`;

                // input.placeholder = `Vek ${i + 1}. dieťaťa`;
                const placeholderTemplate = "Age of child %d.";
                input.placeholder = placeholderTemplate.replace('%d', i + 1);

                input.min = 0;
                input.max = 13;
                input.required = true;
                input.className = "vek-input";
                input.value = value;

                input.addEventListener("input", updateButtonStates);

                const removeBtn = document.createElement("button");
                removeBtn.type = "button";
                removeBtn.innerHTML = "✕";
                removeBtn.className = "delete-vek";
                removeBtn.addEventListener("click", () => {
                    inputWrapper.remove();
                    detiCount--;
                    renderInputs();
                });

                inputWrapper.appendChild(input);
                inputWrapper.appendChild(removeBtn);

                wrapper.appendChild(inputWrapper);
                }

                updateButtonStates();
            }

            window.openChildrenModal = () => {
                modal.style.display = "flex";

                const existing = outputInput.textContent.trim(); // 💥 tu bola chyba (value → textContent)

                if (existing !== "") {
                    const values = existing.split(",").map(v => v.trim());
                    detiCount = values.length;
                    renderInputs(values);
                } else {
                    renderInputs();
                }
            };


            window.closeChildrenModal = () => {
                modal.style.display = "none";
            }

            window.closeChildrenOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                closeChildrenModal();
                }
            }

            window.saveChildren = () => {
                const inputs = wrapper.querySelectorAll("input");
                const values = [];

                for (const input of inputs) {
                    const rawVal = input?.value ?? ''; // ochrana pred undefined
                    const val = rawVal.trim();

                    if (val === "") {
                        errorBox.textContent = "Fill in the child’s age.";
                        errorBox.style.display = "block";
                        return;
                    }

                    const parsed = parseInt(val, 10);
                    if (isNaN(parsed) || parsed > 13 || parsed < 0) {
                        errorBox.textContent = "Maximálny vek dieťaťa je 13 rokov.";
                        errorBox.style.display = "block";
                        return;
                    }

                    values.push(parsed);
                }

                // Zobrazenie textu do <span>
                outputInput.textContent = values.join(", ");

                // Aktivuj label len ak nie je prázdny
                const label = document.querySelector("label[for='childrens']");
                if (label) {
                    label.style.display = "block";
                }

                // Vymazanie predchádzajúcich hidden inputov
                document.querySelectorAll("input[name^='1_child']").forEach(el => el.remove());

                // Vloženie 1_childCount a 1_child1...1_child6
                const form = document.getElementById("rezervacia-form");
                const childCountInput = document.createElement("input");
                childCountInput.type = "hidden";
                childCountInput.name = "1_childCount";
                childCountInput.value = values.length;
                form.appendChild(childCountInput);

                for (let i = 0; i < 6; i++) {
                    const childInput = document.createElement("input");
                    childInput.type = "hidden";
                    childInput.name = `1_child${i + 1}`;
                    childInput.value = values[i] !== undefined ? values[i] : -1;
                    form.appendChild(childInput);
                }

                closeChildrenModal();
                updateFieldClasses();
            };

        });
    </script>
</div>

</div></div></div><div id="pg-2545-2"  class="panel-grid panel-no-style" ><div id="pgc-2545-2-0"  class="panel-grid-cell" ><div id="panel-2545-2-0-0" class="so-panel widget widget_stay_list_widget panel-first-child panel-last-child" data-index="3" ><style>
    .stay-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stay-list-wrapper {
        overflow-x: auto;
        scroll-behavior: smooth;
        width: 100%;
        /* max-width: 800px; /* Adjust based on your design */
    }
    .stay-list-wrapper h4 {
        margin: 13px 0 15px;
    }

    .stay-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .stay-list-horizontal {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .stay-list-horizontal li {
        /* margin: 10px;
        padding: 15px; */
        /* background-color: #f4f4f4; */
        /* border: 1px solid #ddd; */
        /* width: 250px; /* Width of each stay item */
        width: 25.4%;
        flex-shrink: 0;
        text-align: left;
        
    }
    .stay-list-horizontal li .stay-thumbnail {
        overflow: hidden;
    }
    .stay-list-horizontal li .stay-thumbnail > div {
        transition: transform 1.2s ease;
    }
    .stay-list-horizontal li:hover .stay-thumbnail > div {
        transform: scale(1.2);
    }
    .stay-list-horizontal li:not(:last-child) {
        margin-right: 40px;
    }
    @media screen and (max-width: 1280px) {
        .stay-list-horizontal li {
            width: 35%;
        }
    }
    @media screen and (max-width: 767px) {
        .stay-list-horizontal li {
            width: 60%;
        }
    }
    @media screen and (max-width: 479px) {
        .stay-list-horizontal li {
            width: 80%;
        } 
    }

    .stay-list-horizontal li a {
        text-decoration: none;
        color: var(--text);
    }


    .stay-thumbnail img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    @media screen and (max-width: 1280px) {
        .stay-thumbnail {
            aspect-ratio: 1 / 1.5;
        }
    }

    .scroll-button {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        color: var(--text);
        border: none;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        z-index: 10;
        width: 40px;
        border-radius: 50%;
        aspect-ratio: 1;
        background: var(--white);
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--black);
        margin-bottom: 4px;
        font-size: 26px;
        font-weight: 300;

    }

    .scroll-button:hover {
        opacity: 1;
    }

    .scroll-button.left {
        left: -40px;
    }

    .scroll-button.right {
        right: -40px;
    }
    @media screen and (max-width: 479px) {
        .scroll-button.left {
            left: -15px;
        }

        .scroll-button.right {
            right: -15px;
        }
    }

    .scroll-button.disabled {
        display: none;
    }

    .stay-texts-wrapper {
        margin-top: 1vw;
        margin-bottom: 25px;
    }

    .stay-category {
        background-color: var(--light-yellow);
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 9px 15px 10px;
        display: inline-block;
    }
    .stay-category:not(:last-child) {
        margin-right: 10px;
    }

    .info-post-row {
        display: flex;
        align-items: center;
        margin: 25px 0;
    }
    .info-post-row span {
        margin: 0 15px;
    }
    .post-icon {
        display: flex;
        align-items: center;
    }
    /* .post-date::before {
        content: '';
        width: 16px;
        height: 20px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/calendar.png)
            center no-repeat;
        background-size: 100%;
    }
    .post-visitor::before {
        content: '';
        width: 19px;
        height: 22px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/person.png)
            center no-repeat;
        background-size: 100%;
    } */

    .btn.btn-fake span,
    .btn.btn-fake:hover span {
        color: var(--text) !important;
        padding-left: 0;
        background-color: transparent;
    } 
    .stay-list-horizontal li:hover .btn-fake span {
        text-decoration: underline;
    }
    .btn.btn-fake.btn-icon-dark:hover span::before {
        background: transparent url(./wp-content/uploads/2024/09/btn_arr-dark.png) center center no-repeat;
        background-size: cover;
    }
</style>


<section class="headline-container" style="margin-top: 1vw; margin-bottom: 2vw !important;">
    <h2 class="header-animated" style="color: var(--project);">More attractive offers.</h2>
</section>

<div class="stay-container">
    <button class="scroll-button left" id="left-arrow" aria-label="Scroll left">&lt;</button>
    <div class="stay-list-wrapper">
        <ul class="stay-list-horizontal">
            
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/childrens-day-at-chopok/" 
                        title="Children&#8217;s Day on ChopokZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-hotel-Chopok-leto-rodina-2023_74-1024x478.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Children&#8217;s Day on Chopok</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        29. 05. - 31. 05.                                    </div>
                                </div>

                                <p>Celebrate Children's Day at Chopok and treat your children to an unforgettable experience full of fun and adventure with our favourite Chopik. This weekend will be full of joy, laughter and beautiful memories.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/may-weekends-with-animation/" 
                        title="May long weekends with animationsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-34-1024x580.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>May long weekends with animations</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 05. - 03. 05.                                    </div>
                                </div>

                                <p>If you're looking for a place that offers the perfect combination of comfort, first-class wellness, excellent gastronomy and the opportunity to enjoy a fun-filled weekend with family or friends, our May long weekend break is the perfect choice.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:3;">
                    <a href="https://www.hotelchopok.sk/en/stays/summer-family-stays/" 
                        title="Summer Family StaysZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-36-1024x542.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Summer Family Stays</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 07. - 31. 08.                                    </div>
                                </div>

                                <p>Come and experience an unforgettable summer at Chopok, where fun for kids meets perfect relaxation for the whole family. Book your summer family stay now and secure a season full of adventures at the best price with our exclusive FIRST MOMENT offer! </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/" 
                        title="Ladies rideZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_119-1024x587.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Ladies ride</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>This stay is ideal for ladies who want to spend time together and enjoy a wellness experience in luxurious surroundings. Whether you're craving a break from the stress of everyday life or a time of laughter together, the Ladies' Ride package will give you everything you need to revitalise your body and soul.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/" 
                        title="Romantic stay for twoZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/15-1024x562.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Romantic stay for two</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A romantic getaway for two. Perfect choice for those who wish to spend moments of reunion, relaxation and regeneration in the luxurious surroundings of the Tatras. A romantic stay at Chopok offers a unique opportunity to create beautiful memories in the company of the one you care about most.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:8;">
                    <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/" 
                        title="Wellness stay for seniorsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Seniorske-pobyty-1-web.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Wellness stay for seniors</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>Treat yourself to a carefree stay that will fill you with joy and satisfaction. Our care, unique wellness services and quality gastronomy are here to make sure you enjoy every moment of your stay.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:9;">
                    <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/" 
                        title="Cleansing therapyZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_205-1024x611.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Cleansing therapy</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A wellness retreat focused on harmonizing the body and mind includes relaxing treatments that help restore balance between physical and mental well-being. Massages and therapies are designed to relieve physical blockages and restore the natural flow of energy in your body.  </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                        </ul>
    </div>
    <button class="scroll-button right" id="right-arrow" aria-label="Scroll right">&gt;</button>
</div></div></div></div><div id="pg-2545-3"  class="panel-grid panel-no-style" ><div id="pgc-2545-3-0"  class="panel-grid-cell" ><div id="panel-2545-3-0-0" class="so-panel widget widget_newsletter_chopok_widget panel-first-child panel-last-child" data-index="4" ><style>
    .dynamic-block__newsletter .dynamic-block-center-line__content p {
        margin-bottom: 10px;
    }
    /* @media screen and (min-width: 991px) {
        .dynamic-block-center-line.dynamic-block__newsletter {
            height: 60vh;
        }
    } */
    @media screen and (max-width: 991px) {
        .dynamic-block-center-line.dynamic-block__image-right.dynamic-block__newsletter {
            min-width: 100vw;
            left: 50%;
            transform: translate(-50%, 0);
            flex-direction: column;
        }        
    }


    .btn-form {
        position: absolute !important;
        bottom: 0;
        left: 100%;
    }

    .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content {
        background-color: var(--light-project);
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form {
        z-index: 2;
        position: relative;
        
        margin-top: 15px;
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form input {
        border: none;
        min-height: 50px;
        background-color: var(--white);
        width: 100%;
        height: 65px;
        padding-left: 15px;
        font-size: 18px;
    }

    .newsletter-title {
        font-size: 2.7vw;
        font-weight: 500;
    }
    @media screen and (max-width: 991px) {
        .newsletter-title {
            font-size: 6vw;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content--wrapper {
            margin: 10% auto 0% !important;
            text-align: center;
        }

        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images {
            min-height: 30vh;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images .img-wrapper {
            height: 30vh !important;
        }

        .btn-form {
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .widget.widget_newsletter_chopok_widget {
            margin-bottom: 0 !important;
        }
    }
    @media screen and (max-width: 479px) {
        .newsletter-title {
            font-size: 11vw;
        }
    }

    .dynamic-block_newsletter {
        opacity: 0;
        transform: scale(0.1); /* Začína veľmi malý */
    }

    .ec-v-form-input input[type="checkbox"] + label::before {
        border: 2px solid #333 !important;
    }

    @media (max-width: 991px) {
        .ec-v-form-column div:last-child {
            top: -30px;
            text-align: left;
        }
    }
</style>

<div class="dynamic-block-center-line dynamic-block__image-right dynamic-block__newsletter">

    <div class="dynamic-block-center-line__content">
        <div class="dynamic-block-center-line__content--wrapper" >
                            <h3 class="h3 newsletter-title">News and special offers</h3>
            
            <div class="ecomail-form__wrapper">
                                    <!-- EN form Ecomail -->
                    <script>
                        (function (w,d,s,o,f,js,fjs) {
                            w['ecm-widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                            js.id = '8-0ff8f206695a872edfb6fade7b6458ba'; js.dataset.a = 'hotelchopok'; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                        }(window, document, 'script', 'ecmwidget', 'https://d70shl7vidtft.cloudfront.net/widget.js'));
                    </script>
                    <div id="f-8-0ff8f206695a872edfb6fade7b6458ba"></div>

                
            </div>
        </div>
    </div>
    
    <div class="dynamic-block-center-line__images ">
                    <div class="img-wrapper img-wrapper__up"
                style="background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/66b5fa7b072c3687d4279d86_F-10.jpg');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 100%;
                    height: 100%;
                    ">
            </div>
            </div>

</div>
</div></div></div></div><p>Článok <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/">Cleansing therapy</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Wellness stay for seniors</title>
		<link>https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/</link>
		
		<dc:creator><![CDATA[Jiří Kolínský]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 16:16:24 +0000</pubDate>
				<guid isPermaLink="false">https://www.hotelchopok.sk/pobyty/wellness-retreat-for-seniors/</guid>

					<description><![CDATA[<p>Treat yourself to a carefree stay that will fill you with joy and satisfaction. Our care, unique wellness services and quality gastronomy are here to make sure you enjoy every moment of your stay.</p>
<p>Článok <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/">Wellness stay for seniors</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="pl-2546"  class="panel-layout" ><div id="pg-2546-0"  class="panel-grid panel-has-style" ><div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-2546-0" id="hero-wrapper" data-stretch-type="full-width-stretch" ><div id="pgc-2546-0-0"  class="panel-grid-cell" ><div id="panel-2546-0-0-0" class="so-panel widget widget_sow-hero panel-first-child panel-last-child" data-index="0" ><div class="hero-img panel-widget-style panel-widget-style-for-2546-0-0-0" id="hero-img" ><div
			
			class="so-widget-sow-hero so-widget-sow-hero-default-844de1f37420-2546 so-widget-fittext-wrapper"
			 data-fit-text-compressor="0.85"
		>				<div class="sow-slider-base" style="display: none" tabindex="0">
					<ul
					class="sow-slider-images"
					data-settings="{&quot;pagination&quot;:true,&quot;speed&quot;:400,&quot;timeout&quot;:8000,&quot;paused&quot;:false,&quot;pause_on_hover&quot;:false,&quot;swipe&quot;:true,&quot;nav_always_show_desktop&quot;:&quot;&quot;,&quot;nav_always_show_mobile&quot;:&quot;&quot;,&quot;breakpoint&quot;:&quot;780px&quot;,&quot;unmute&quot;:false,&quot;anchor&quot;:null}"
										data-anchor-id=""
				>		<li class="sow-slider-image  sow-slider-image-cover" style="visibility: visible;;background-color: #333333" >
					<div class="sow-slider-image-container">
			<div class="sow-slider-image-wrapper">
				<h1 style="text-align: center">Wellness stay for seniors</h1>
			</div>
		</div>
		<div class="sow-slider-image-overlay sow-slider-image-cover" style="opacity: 0.6;background-image: url(https://www.hotelchopok.sk/wp-content/uploads/2025/02/Seniorske-pobyty-1-web.webp)"  ></div>		</li>
		</ul>				<ol class="sow-slider-pagination">
											<li><a href="#" data-goto="0" aria-label="Display slide 1"></a></li>
									</ol>

				<div class="sow-slide-nav sow-slide-nav-next">
					<a href="#" data-goto="next" aria-label="Next slide" data-action="next">
						<em class="sow-sld-icon-thin-right"></em>
					</a>
				</div>

				<div class="sow-slide-nav sow-slide-nav-prev">
					<a href="#" data-goto="previous" aria-label="Previous slide" data-action="prev">
						<em class="sow-sld-icon-thin-left"></em>
					</a>
				</div>
				</div></div></div></div></div></div></div><div id="pg-2546-1"  class="panel-grid panel-no-style" ><div id="pgc-2546-1-0"  class="panel-grid-cell" ><div id="panel-2546-1-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="1" ><div
			
			class="so-widget-sow-editor so-widget-sow-editor-base"
			
		><h3 class="widget-title">We look forward to being a part of your journey to perfect relaxation. Wellness stay for seniors is designed to provide you with maximum comfort and well-being.  </h3>
<div class="siteorigin-widget-tinymce textwidget">
	<p>&nbsp;</p>
<p>With relaxing treatments and unlimited access to the wellness centre and swimming pool, you will enjoy moments of regeneration and relaxation in a quiet and pleasant atmosphere. In addition, you can relax with a fun game of billiards or enjoy the culinary delights of our chef.</p>
<h3></h3>
<h3>What experiences you can look forward to:</h3>
<ul>
<li>1 x relaxing massage /20 min./</li>
<li>1 x reflex foot massage /20 min./</li>
<li>fun playing billiards /60 min./</li>
<li>unlimited access to the pool and sauna world DANCER</li>
<li>unlimited access to fitness</li>
<li>stylish and spacious rooms overlooking the forests</li>
<li>1 x welcome drink</li>
<li>experiential gastronomy /buffet breakfast, served dinner/</li>
</ul>
</div>
</div></div></div><div id="pgc-2546-1-1"  class="panel-grid-cell" ><div id="panel-2546-1-1-0" class="so-panel widget widget_form_top_offer_widget panel-first-child panel-last-child" data-index="2" ><style>
    /* 
    .input-visitor::before {
        min-width: 30px !important;
        height: 100% !important;
    }
    .input-date::before {
        min-width: 22px !important;
        height: 100% !important;
    } */
    /* 
    #rezervacia-form .btn.btn-yellow,
    #rezervacia-form .btn span {
        max-width: fit-content !important;
    } */
    @media screen and (max-width: 480px) {
        #rezervacia-form .btn.btn-yellow,
        #rezervacia-form .btn span {
            max-width: 100%;
        }
    }

    .booking-engine-container_horizontal {
        background-color: var(--light-project); /* Light background color */
        padding: 30px 0 25px;
        width: 90%;
        max-width: 1440px;
        margin: 0 auto; /* Center the form */
        margin-top: -104px;
        z-index: 99;
        position: relative;
    }
    .booking-engine-container_horizontal > div {
        width: 90%;
        margin: 0 auto;
    }

    .booking-engine-container_horizontal form {
        display: flex;
        flex-wrap: nowrap;
    }

    .booking-engine-container_horizontal label {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        color: var(--text); /* Dark text color */
        position: absolute;
        top: -15px;
        padding-top: 10px;
    }

    .input-wrapper.input-visitor.label-visible label {
        display: block;
    }

    .booking-engine-container_horizontal input[type="text"],
    .booking-engine-container_horizontal input[type="number"] {
        width: 100%;
        font-size: 14px;
        color: var(--text);
        background-color: var(--white);
        transition: border-color 0.3s ease;

        background: transparent;
        border: none;
        border-radius: 0 !important;

        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);

        height: 20px;
        width: 100%;
    }
    .booking-engine-container_horizontal input[type="number"].vek-input {
        border: none;
    }
    .booking-engine-container_horizontal input[name="promocode"] {
        border: none;
    }

    .booking-engine-container_horizontal input[type="text"]:focus,
    .booking-engine-container_horizontal input[type="number"]:focus {
        border-color: var(--project); /* Highlight color when focused */
        outline: none;
    }

    .booking-engine-container_horizontal a {
        display: block;
        margin-top: 20px;
        color: var(--white);
        text-align: center;
        font-size: 14px;
        text-decoration: none;
    }

    .booking-engine-container_horizontal a:hover {
        text-decoration: underline;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 500px) {
        .booking-engine-container_vertical {
            padding: 15px;
        }

        .booking-engine-container_vertical input,
        .booking-engine-container_vertical button {
            font-size: 13px;
        }
    }


    .booking-engine-container_horizontal button span {
        margin: 0 auto;
    }

    .booking-engine-container_horizontal .form-post-contact-wrapper {
        display: flex;
        flex-direction: row;
        /* align-items: flex-start; */
        justify-content: center;
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
            align-items: center;
        }
    }

    .booking-engine-container_vertical a {
        text-align: left;
        box-sizing: border-box;
        white-space: normal;
        height: 45px;
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;

        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .booking-engine-container_vertical a span {
        padding: 0;
    }

    .booking-engine-container_horizontal .input-wrapper {
        position: relative;
        height: 65px;
        flex: 1;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    .booking-engine-container_vertical .input-wrapper::before {
        content: url(); /* Tvoje URL ikony */
        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(0);
        padding-right: 10px;
    }

    .input-hotel label {
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }
    .input-hotel select {
        border: none;
        background: transparent;
        width: fit-content;
        cursor: pointer;
        padding-right: 20px;
        border-right: 1px solid var(--text);
    }

    .input-wrapper select {
        -webkit-appearance: none; /* Pre Chrome, Safari, Edge */
        -moz-appearance: none; /* Pre Firefox */
        appearance: none; /* Štandardné skrytie */
        background: transparent; /* Priehľadné pozadie */
        padding-right: 30px; /* Priestor pre vlastnú ikonu */
    }

    .input-wrapper.input-hotel {
        position: relative;
        /* display: inline-block; */
    }
    .input-wrapper.input-hotel::after {
        content: '';
        background: transparent
         url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5H7z%22%2F%3E%3C%2Fsvg%3E')
         no-repeat center center;
        background-size: 100%;
        position: absolute;
        right: 25px; /* Vzdialenosť od pravej strany */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Nezasahuje do kliknutia na select */
        width: 22px;
        height: 22px;
    }


    @media screen and (max-width: 1280px) {
        .booking-engine-container_horizontal form {
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
    }
    @media screen and (max-width: 991px) {
        .booking-engine-container_horizontal {
            margin-top: 0;
            width: 100vw;
        }
        
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 50%;
            border-bottom: 1px solid var(--text);
        }
        .booking-engine-container_horizontal .input-wrapper.input-present{
            flex-basis: 100%;
        }
        
        .booking-engine-container_horizontal label {
            top: -10px;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
        .input-hotel select,
        .booking-engine-container_horizontal input[type="text"],
        .booking-engine-container_horizontal input[type="number"] {
            border-right:  none;
        }
        .booking-engine-container_horizontal button {
            margin-top: 30px;
        }
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
        }
        .booking-engine-container_horizontal .form-post-contact-wrapper a {
            margin-top: 0;
            height: 45px;
        }
    }
    @media screen and (max-width: 479px) {
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 100%;
        }
    }

    /* Flash messages */
    
    .flash-message-wrapper {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -10px);
        z-index: 9;
    }
    .flash-message-wrapper > div {
        display: none;
        font-size: 13px;
        width: 200px;
        font-weight: 500;
        border-radius: 15px;
        padding: 9px;
       
        color: var(--white);
    }
    .childrens-error {
        background: var(--project);
    }

    .childrens-flash {
        margin-top: 7px;
        background: var(--green);
    }


    /* KALENDAR NOVY */
    /* LEN NOVÉ ŠTÝLY PRE KALENDÁR MODAL - NEOVPLYVŇUJÚ TVOJE ŠTÝLOVANIE */
    .children-modal,
    .calendar-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .children-popup,
    .calendar-popup {
        width: 90vw;
        max-width: 350px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        overflow: hidden;
    }

    .calendar-header {
        background: var(--project);
        color: white;
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-year {
        font-size: 18px;
        font-weight: 600;
    }

    .nav-button {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.2s;
    }

    .nav-button:hover {
        background: rgba(255,255,255,0.2);
    }

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
    }

    .weekday {
        padding: 12px 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }

    .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: #eee;
        padding: 1px;
    }

    .day {
        background: white;
        border: none;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.2s;
        position: relative;
    }

    .day:hover {
        background: #f0f0f0;
    }

    .day.other-month {
        color: #ccc;
        background: #fafafa;
    }

    .day.selected-start {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.selected-end {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.in-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.hover-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.today {
        position: relative;
    }

    .day.today::after {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--project);
        border-radius: 50%;
    }

    .calendar-footer {
        padding: 20px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-footer .button-wrapper {
        width: 50%;
        display: flex;
        justify-content: right;
        gap: 5px;
    }

    .confirm-button {
        background: var(--light-project-2);
        color: var(--text);
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
    }

    .confirm-button:hover {
        background: var(--purple);
        color: var(--white)

    }

    .confirm-button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .cancel-button {
        background: none;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        padding: 10px;
        color: var(--gray);
        box-shadow: none !important
    }

    .date-range-display {
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: lighter;
        color: rgba(0, 0, 0, 0.3);
        background: transparent;
        border: none;
        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);
        height: 20px;
        width: 100%;
    }

    /* ŠTÝLY PRE TLAČIDLÁ */
    .btn {
        display: inline-block;
        padding: 12px 24px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-yellow {
        background-color: #f4c430;
        color: #333;
    }

    .btn-yellow:hover {
        background-color: #e6b82a;
    }

    /* 
    .btn-transparent {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--text);
    } */

    .btn.btn-transparent:hover span {
        background: transparent !important;
        color: var(--white);
    }

    .selection-info {
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
    }

    #dateRangeDisplay {
        white-space: nowrap;
    }

    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    @media screen and (max-width: 991px) {
        .input-hotel select,
        .booking-engine-container_horizontal select,
        .booking-engine-container_horizontal input[type="text"], 
        .booking-engine-container_horizontal input[type="number"],
        .date-range-display {
            border-right: none !important;
        }
    }

    .booking-engine-container_horizontal select {
        font-size: 14px;
        font-weight: bold;
        color: black;
        background: transparent;
        border: none;
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid var(--text);
        cursor: pointer;
        appearance: none; /* odstráni natívny vzhľad */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* fallback ak nepoužiješ ::after */
    }
    .booking-engine-container_horizontal select option {
        font-weight: normal;
        color: var(--text);
    }

    .input-wrapper.active span,
    .input-wrapper.active input,
    .input-wrapper.active select option[selected] {
        font-weight: bold !important;
        color: black !important;
    }


    #booking-button.btn-yellow:hover {
        background: unset;
    }
    #booking-button.btn-yellow:hover span {
        background: var(--project);
    }

    /* Side FORM */
    .single .booking-engine-container_horizontal,
    .single-room .booking-engine-container_horizontal,
    .single-stay .booking-engine-container_horizontal {
        max-width: 400px;
    }
    .single .booking-engine-container_horizontal form,
    .single-room .booking-engine-container_horizontal form,
    .single-stay .booking-engine-container_horizontal form {
        flex-direction: column;
    }
    .single .booking-engine-container_horizontal .input-wrapper,
    .single-room .booking-engine-container_horizontal .input-wrapper,
    .single-stay .booking-engine-container_horizontal .input-wrapper {
        border-bottom: 1px solid black;
        padding-bottom: 35px;
        margin-bottom: 35px;
    }
    .single .date-range-display,
    .single-room .date-range-display,
    .single-stay .date-range-display,
    .single .input-hotel select,
    .single-room .input-hotel select,
    .single-stay .input-hotel select {
        border: none !important;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child {
        margin-top: 0;
    }
    .single .input-wrapper.input-hotel::after,
    .single-room .input-wrapper.input-hotel::after,
    .single-stay .input-wrapper.input-hotel::after {
        transform: translateY(-30px);
    }
    #rezervacia-form h5 {
        display: none;
    }
    .single #rezervacia-form h5,
    .single-room #rezervacia-form h5,
    .single-stay #rezervacia-form h5 {
        display: block;
        margin-bottom: 33px;
    }
</style>

<script>
    /* <![CDATA[ */

    
    // function updateHotelChoice(selectElement) {
    //     const adresa_chopok = "";
    //     const adresa_apartmany = "";

    //     const selectedValue = jQuery(selectElement).val();
    //     const form = jQuery(selectElement).closest("form");

    //     if (selectedValue == "0") {
    //         form.attr("action", adresa_chopok);
    //     } else if (selectedValue == "1") {
    //         form.attr("action", adresa_apartmany);
    //     }
    // } 

    /* ]]&gt; */


    function updateFieldClasses() {
        // DÁTUMY
        const dateDisplay = document.getElementById('dateRangeDisplay');
        const dateWrapper = dateDisplay.closest('.input-wrapper');
        if (dateDisplay.textContent.trim() !== "Vyberte termín") {
            dateWrapper.classList.add('active');
        } else {
            dateWrapper.classList.remove('active');
        }

        // DETI
        const childrenDisplay = document.getElementById('childrens');
        const childrenWrapper = childrenDisplay.closest('.input-wrapper');

        const value = childrenDisplay.textContent.trim();

        // Regex: povoľuje formát ako "1", "1,2", "1, 2", "2, 14", atď.
        const containsAge = /^\d+(,\s*\d+)*$/.test(value);

        if (containsAge) {
            childrenWrapper.classList.add('active');
        } else {
            childrenWrapper.classList.remove('active');
        }


        // DOSPELÍ
        const adultsDisplay = document.getElementById('adultsDisplay');
        const adultsWrapper = adultsDisplay.closest('.input-wrapper');

        if (adultsDisplay) {
            // Získa len čísla (napr. "2" alebo "👤 2", aj s NBSP)
            const digitsOnly = adultsDisplay.textContent.replace(/[^\d]/g, '').trim();
            const adultCount = parseInt(digitsOnly, 10);

            if (!isNaN(adultCount) && adultCount > 0) {
                adultsWrapper.classList.add('active');
            } else {
                adultsWrapper.classList.remove('active');
            }
        }


        // INPUTY (dospelí, promokód atď.)
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            const wrapper = input.closest('.input-wrapper');
            if (!wrapper) return;

            if (input.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });

        // SELECT (hotelchoice)
        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            const wrapper = select.closest('.input-wrapper');
            if (!wrapper) return;

            if (select.value && select.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        updateFieldClasses(); // inicializácia

        // Dynamická aktualizácia pri zmene
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            input.addEventListener('input', updateFieldClasses);
        });

        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            select.addEventListener('change', updateFieldClasses);
        });
    });
</script>


<div class="booking-engine-container_horizontal">
    <div>
        <form id="rezervacia-form" 
            method="POST">

            <h5>Check availability</h5>

            <div class="input-wrapper input-hotel">
                <select name="hotelchoice"><option value="52">Wellness Hotel Chopok ****</option><option value="617">Apartments and Studios Lúčky</option></select>            </div>

            <!-- UPRAVENÝ INPUT PRE DÁTUMY - TERAZ JEDEN NAMIESTO DVOCH -->
            <div class="input-wrapper input-date">
                <!-- <label for="dateRange">Date of stay</label> -->
                <span class="date-range-display" id="dateRangeDisplay" onclick="openCalendar()">Select dates</span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="adults">Number of guests:</label> -->
                <!-- <input placeholder="Adults" 
                    type="number" id="adults" name="1_adultCount" class="booking-input" min="1" value="" required> -->
                <span id="adultsDisplay" class="booking-input date-range-display" onclick="openAdultsModal()">
                    Adults                </span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="childrens">Children's age::</label> -->
                <span 
                    id="childrens" 
                    class="booking-input date-range-display" 
                    onclick="openChildrenModal()"
                >
                    Children                </span>
            </div>

            <div class="input-wrapper input-present">
                <!-- <label for="promo">Promo code:</label> -->
                <input placeholder="Promo code" 
                    type="text" id="promo" name="promocode" class="booking-input">
            </div>

            <button id="booking-button" type="button" class="btn btn-yellow">
                <span>Check the price</span>
            </button>

            <!-- HIDDEN INPUTY S PÔVODNÝMI NAME ATRIBÚTMI -->
            <input type="hidden" id="arrival" name="dateFrom" class="booking-input" required>
            <input type="hidden" id="departure" name="dateTo" class="booking-input" required>

                        <input type="hidden" id="tr-data__r" name="redirect" value="0">
            <input type="hidden" id="tr-data__l" name="lang" value="en">

        </form>


        <!-- Optional link to the contact information or other services -->
        <div class="form-post-contact-wrapper">
            <a href="tel:+421911611386" title="Rezervácie Hotel Chopok telefón" class="btn btn-transparent">
                <span class="post-icon icon-tel">+421 / 911 611 386</span>
            </a>
            <a href="mailto:recepcia@hotelchopok.sk" title="Reception Hotel Chopok mail" class="btn btn-transparent">
                <span class="post-icon icon-mail">recepcia@hotelchopok.sk</span>
            </a>
        </div>
    </div>
</div>

<!-- KALENDÁR MODAL -->
<div class="calendar-modal" id="calendarModal" onclick="closeCalendarOnBackdrop(event)">
    <div class="calendar-popup">
        <div class="calendar-header">
            <button class="nav-button" onclick="changeMonth(-1)">‹</button>
            <div class="month-year" id="monthYear"></div>
            <button class="nav-button" onclick="changeMonth(1)">›</button>
        </div>

        <div class="weekdays">
            <div class="weekday">Mon</div>
            <div class="weekday">Tue</div>
            <div class="weekday">Wed</div>
            <div class="weekday">Thu</div>
            <div class="weekday">Fri</div>
            <div class="weekday">Sat</div>
            <div class="weekday">Sun</div>
        </div>

        <div class="days-grid" id="daysGrid"></div>

        <div class="calendar-footer">
            <div class="selection-datums"></div>
                        <div class="button-wrapper">
                <button class="cancel-button" onclick="closeCalendar()"><span class="icon">✖</span></button>
                <button class="confirm-button" id="confirmButton" onclick="confirmDates()" disabled>
                    Confirm                </button>
            </div>
        </div>
    </div>
    <script>
        // KALENDÁR LOGIKA
        let currentDate = new Date();
        let selectedStart = null;
        let selectedEnd = null;
        let isSelectingEnd = false;

        const monthNames = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];

        const monthNamesShort = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ];

        function formatDate(date) {
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        }

        function formatDateForDisplay(date) {
            const day = date.getDate();
            const monthShort = monthNamesShort[date.getMonth()];
            return `${day} ${monthShort}`;
        }

        function openCalendar() {
            document.getElementById('calendarModal').style.display = 'flex';
            renderCalendar();
        }

        function closeCalendar() {
            document.getElementById('calendarModal').style.display = 'none';
        }

        function closeCalendarOnBackdrop(event) {
            if (event.target === event.currentTarget) {
                closeCalendar();
            }
        }

        function renderCalendar() {
            const monthYear = document.getElementById('monthYear');
            const daysGrid = document.getElementById('daysGrid');

            monthYear.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const firstDayOfWeek = (firstDay.getDay() + 6) % 7;

            daysGrid.innerHTML = '';

            const today = new Date();
            today.setHours(0, 0, 0, 0);

            // Pridáme prázdne bunky pre dni pred 1. dňom mesiaca
            for (let i = 0; i < firstDayOfWeek; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            // Pridáme LEN dni aktuálneho mesiaca
            for (let day = 1; day <= lastDay.getDate(); day++) {
                const cellDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);

                const dayButton = document.createElement('button');
                dayButton.className = 'day';
                dayButton.textContent = day;

                if (cellDate.getTime() === today.getTime()) {
                    dayButton.classList.add('today');
                }

                if (cellDate < today) {
                    dayButton.disabled = true;
                    dayButton.style.color = '#ccc';
                    dayButton.style.cursor = 'not-allowed';
                }

                // Označenie vybraných dátumov - LEN ak sú v aktuálnom mesiaci
                if (selectedStart && 
                    cellDate.getTime() === selectedStart.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-start');
                }
                
                if (selectedEnd && 
                    cellDate.getTime() === selectedEnd.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-end');
                }

                // Označenie rozsahu - LEN ak sú oba dátumy v aktuálnom mesiaci alebo špecifické prípady
                if (selectedStart && selectedEnd) {
                    // Len ak je aktuálny deň medzi start a end a všetko je v tom istom mesiaci
                    if (cellDate > selectedStart && cellDate < selectedEnd) {
                        // EXTRA kontrola - označuj LEN ak sú start a end v rámci tohto mesiaca alebo logicky pokračujú
                        const startInThisMonth = selectedStart.getMonth() === currentDate.getMonth() && selectedStart.getFullYear() === currentDate.getFullYear();
                        const endInThisMonth = selectedEnd.getMonth() === currentDate.getMonth() && selectedEnd.getFullYear() === currentDate.getFullYear();
                        
                        if (startInThisMonth && endInThisMonth) {
                            // Oba v aktuálnom mesiaci
                            dayButton.classList.add('in-range');
                        } else if (startInThisMonth && !endInThisMonth && selectedEnd > cellDate) {
                            // Start v aktuálnom, end v budúcom - označuj od start do konca mesiaca
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && endInThisMonth && selectedStart < cellDate) {
                            // Start v minulom, end v aktuálnom - označuj od začiatku mesiaca po end
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && !endInThisMonth && selectedStart < cellDate && selectedEnd > cellDate) {
                            // Start v minulom, end v budúcom - označuj celý mesiac
                            dayButton.classList.add('in-range');
                        }
                    }
                }

                if (!dayButton.disabled) {
                    dayButton.onclick = () => selectDate(cellDate);
                    dayButton.onmouseenter = () => highlightRange(cellDate);
                    dayButton.onmouseleave = () => clearHoverRange();
                }
                
                daysGrid.appendChild(dayButton);
            }

            // Pridáme prázdne bunky na koniec len ak je potrebné pre grid (LEN neviditeľné)
            const totalCells = daysGrid.children.length;
            const remainingCells = 42 - totalCells;
            for (let i = 0; i < remainingCells; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            updateConfirmButton();
            updateSelectionDisplay();
        }

        function selectDate(date) {
            if (date < new Date().setHours(0, 0, 0, 0)) return;

            if (!selectedStart) {
                // Prvý klik - vyber start dátum
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            } else if (isSelectingEnd && !selectedEnd) {
                // Druhý klik - vyber end dátum
                if (date <= selectedStart) {
                    // Ak klikneme na skorší dátum, resetuj start
                    selectedStart = new Date(date);
                    selectedEnd = null;
                } else {
                    // Normálny výber end dátumy
                    selectedEnd = new Date(date);
                    isSelectingEnd = false;
                }
            } else {
                // Reset - začni odznova
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            }

            renderCalendar();
        }

        function updateSelectionDisplay() {
            // Aktualizuj info v kalendári ak máš vybrané dátumy
            const footerInfo = document.querySelector('.calendar-footer .selection-info');
            if (footerInfo) footerInfo.remove();
            
            if (selectedStart) {
                const footer = document.querySelector('.selection-datums');
                const info = document.createElement('div');
                info.className = 'selection-info';
                
                if (selectedEnd) {
                    info.textContent = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
                } else {
                    info.textContent = `Start: ${formatDateForDisplay(selectedStart)}`;
                }
                
                footer.insertBefore(info, footer.firstChild);
            }
        }

        function highlightRange(hoverDate) {
            if (!selectedStart || selectedEnd || !isSelectingEnd) return;
            if (hoverDate < new Date().setHours(0, 0, 0, 0)) return;
            if (hoverDate <= selectedStart) return;

            clearHoverRange();

            // Hover efekt funguje len v aktuálnom mesiaci
            const allDays = document.querySelectorAll('.day');
            allDays.forEach(day => {
                if (day.style.visibility === 'hidden') return;
                
                const dayText = parseInt(day.textContent);
                if (isNaN(dayText)) return;
                
                const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayText);
                
                // Ak je start v inom mesiaci, zvýrazni od začiatku aktuálneho mesiaca
                if (selectedStart < new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)) {
                    if (dayDate <= hoverDate) {
                        day.classList.add('hover-range');
                    }
                }
                // Normálny hover v rámci mesiaca
                else if (dayDate > selectedStart && dayDate < hoverDate) {
                    day.classList.add('hover-range');
                }
            });
        }

        function clearHoverRange() {
            const hoverDays = document.querySelectorAll('.hover-range');
            hoverDays.forEach(day => {
                day.classList.remove('hover-range');
            });
        }

        function changeMonth(direction) {
            currentDate.setMonth(currentDate.getMonth() + direction);
            renderCalendar();
        }

        function updateConfirmButton() {
            const confirmButton = document.getElementById('confirmButton');
            confirmButton.disabled = !(selectedStart && selectedEnd);
        }

        function confirmDates() {
            if (!selectedStart || !selectedEnd) return;

            // Aktualizácia hidden inputov
            document.getElementById('arrival').value = formatDate(selectedStart);
            document.getElementById('departure').value = formatDate(selectedEnd);

            // Aktualizácia zobrazenia
            const displayText = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
            document.getElementById('dateRangeDisplay').textContent = displayText;

            closeCalendar();
            updateFieldClasses();
        }
    </script>
</div>

<!-- Modal Dospelí -->
<div class="children-modal" id="adultsModal" onclick="closeAdultsOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of adults:</p>

        <div class="deti-counter">
            <button type="button" id="minus-adults">−</button>
            <input type="number" id="adults-count-input" min="1" max="10" value="2" class="vek-input" />
            <button type="button" id="plus-adults">+</button>
        </div>

        <div id="adults-error" style="display:none; color: red; margin-top:10px;">
            Minimum is 1, maximum is 10.        </div>

        <div style="text-align:right; margin-top: 15px;">
            <button type="button" class="cancel-button" onclick="closeAdultsModal()"><span class="icon">✖</span></button>
            <button type="button" class="confirm-button" onclick="saveAdults()">Confirm</button>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const adultsModal = document.getElementById("adultsModal");
            const plusBtn = document.getElementById("plus-adults");
            const minusBtn = document.getElementById("minus-adults");
            const input = document.getElementById("adults-count-input");
            const displaySpan = document.getElementById("adultsDisplay");
            const errorBox = document.getElementById("adults-error");
            const form = document.getElementById("rezervacia-form");

            let adultsCount = 2;
            const minAdults = 1;
            const maxAdults = 10;

            window.openAdultsModal = () => {
                adultsModal.style.display = "flex";
                input.value = adultsCount;
                errorBox.style.display = "none";
            };

            window.closeAdultsModal = () => {
                adultsModal.style.display = "none";
            };

            window.closeAdultsOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                    closeAdultsModal();
                }
            };

            window.showAlertModal = function(message) {
                const modal = document.getElementById("alertModal");
                const text = document.getElementById("alertModalText");

                text.textContent = message;
                modal.style.display = "flex";
            };

            window.closeAlertModal = function() {
                const modal = document.getElementById("alertModal");
                modal.style.display = "none";
            };

            window.closeAlertOnBackdrop = function(event) {
                if (event.target === event.currentTarget) {
                    closeAlertModal();
                }
            };


            plusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val < maxAdults) {
                    val++;
                    input.value = val;
                }
            });

            minusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val > minAdults) {
                    val--;
                    input.value = val;
                }
            });

            input.addEventListener("input", () => {
                let val = parseInt(input.value) || 0;
                if (val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                } else {
                    errorBox.style.display = "none";
                }
            });

            window.saveAdults = () => {
                let val = parseInt(input.value);
                if (isNaN(val) || val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                    return;
                }

                adultsCount = val;

                // Odstrániť predchádzajúci input ak existuje
                form.querySelectorAll("input[name='1_adultCount']").forEach(el => el.remove());

                const hiddenInput = document.createElement("input");
                hiddenInput.type = "hidden";
                hiddenInput.name = "1_adultCount";
                hiddenInput.value = adultsCount;
                form.appendChild(hiddenInput);

                // Aktualizovať span
                displaySpan.textContent = adultsCount;

                closeAdultsModal();
                updateFieldClasses(); // aktualizuje .active class
            };
        });
    </script>
</div>

<!-- ALERT MODAL (napr. pre "Zadajte počet dospelých") -->
<div class="children-modal" id="alertModal" onclick="closeAlertOnBackdrop(event)">
    <div class="children-popup">
        <p id="alertModalText" style="margin-bottom: 15px;">Tu bude hláška</p>
        <div style="text-align: right;">
            <button type="button" class="confirm-button" onclick="closeAlertModal()">OK</button>
        </div>
    </div>
</div>


<!-- Pocet a vek detí -->
<div class="children-modal" id="childrenModal" onclick="closeChildrenOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of children:</p>

        <div class="deti-counter">
            <button type="button" id="minus-btn">−</button>
            <span id="deti-count">0</span>
            <button type="button" id="plus-btn">+</button>
        </div>

        <p style="margin: 0 !important;">Children's age:</p>
        <div id="vek-deti-wrapper"></div>

        <div id="children-error" style="display:none; color: red; margin-top:10px;">
            Maximálny vek dieťaťa je 13 rokov.        </div>

        <div style="text-align:right; margin-top: 15px;">
        <!-- <button type="button" class="btn btn-transparent" onclick="closeChildrenModal()">Cancel</button> -->
        <button type="button" class="cancel-button" onclick="closeChildrenModal()"><span class="icon">✖</span></button>
        <button type="button" class="confirm-button" onclick="saveChildren()">Confirm</button>
        </div>
    </div>
    <style>
        .children-popup {
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            padding: 20px;
            max-width: 350px;
            width: 90vw;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: inherit;
        }

        .deti-counter {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 500;
        }

        .deti-counter button,
        .deti-counter button:focus {
            background: var(--project);
            border: none;
            color: var(--white);
            width: 32px;
            height: 32px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s ease;

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
        }

        .deti-counter button:hover {
            background: var(--light-project-2);
        }

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


        #vek-deti-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
        }

        .vek-input {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            width: 100%;
            box-sizing: border-box;
            background-color: #f9f9f9;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .vek-input:focus {
            outline: none;
            border-color: var(--project);
            background-color: #fff;
        }

        /* Tlačidlá v spodnej časti popupu */
        .children-popup .btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            background: var(--project);
        }

        .btn-yellow {
            background: var(--project);
            color: white;
            border: none;
        }

        .btn-yellow:hover {
            background: var(--purple);
        }

        /* .btn-transparent {
            background: none;
            color: #666;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        .btn-transparent:hover {
            background: #f0f0f0;
        } */

        .vek-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .vek-input {
            flex: 1;
            padding-right: 30px;
        }

        .delete-vek {
            position: absolute;
            right: 10px;
            background: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            color: var(--light-project-2);
            outline: none;
            border: none;
            box-shadow: none;
        }

        .delete-vek:hover {
            color: var(--text);
            background: none !important;
            box-shadow: none !important;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById('childrenModal');
            const plusBtn = document.getElementById("plus-btn");
            const minusBtn = document.getElementById("minus-btn");
            const countSpan = document.getElementById("deti-count");
            const wrapper = document.getElementById("vek-deti-wrapper");
            const errorBox = document.getElementById("children-error");
            const outputInput = document.getElementById("childrens");

            let detiCount = 0;
            const maxDeti = 10;

            plusBtn.addEventListener("click", () => {
                if (detiCount < maxDeti) {
                detiCount++;
                renderInputs();
                }
            });

            minusBtn.addEventListener("click", () => {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const emptyInputs = inputs.filter(el => el.value.trim() === "");

                if (emptyInputs.length > 0 && detiCount > 0) {
                detiCount--;
                renderInputs();
                }
            });

            function updateButtonStates() {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const hasEmpty = inputs.some(el => el.value.trim() === "");

                minusBtn.disabled = detiCount === 0 || !hasEmpty;
                plusBtn.disabled = detiCount >= maxDeti;
            }

            function renderInputs(prefillValues = []) {
                countSpan.textContent = detiCount;

                const currentWrappers = Array.from(wrapper.querySelectorAll(".vek-wrapper"));
                const currentValues = currentWrappers.map(w => w.querySelector("input").value.trim());

                wrapper.innerHTML = "";
                errorBox.style.display = "none";

                const usedValues = prefillValues.length ? prefillValues : currentValues;

                for (let i = 0; i < detiCount; i++) {
                const value = usedValues[i] || "";

                const inputWrapper = document.createElement("div");
                inputWrapper.classList.add("vek-wrapper");

                const input = document.createElement("input");
                input.type = "number";
                input.name = `vek_dieta_${i + 1}`;

                // input.placeholder = `Vek ${i + 1}. dieťaťa`;
                const placeholderTemplate = "Age of child %d.";
                input.placeholder = placeholderTemplate.replace('%d', i + 1);

                input.min = 0;
                input.max = 13;
                input.required = true;
                input.className = "vek-input";
                input.value = value;

                input.addEventListener("input", updateButtonStates);

                const removeBtn = document.createElement("button");
                removeBtn.type = "button";
                removeBtn.innerHTML = "✕";
                removeBtn.className = "delete-vek";
                removeBtn.addEventListener("click", () => {
                    inputWrapper.remove();
                    detiCount--;
                    renderInputs();
                });

                inputWrapper.appendChild(input);
                inputWrapper.appendChild(removeBtn);

                wrapper.appendChild(inputWrapper);
                }

                updateButtonStates();
            }

            window.openChildrenModal = () => {
                modal.style.display = "flex";

                const existing = outputInput.textContent.trim(); // 💥 tu bola chyba (value → textContent)

                if (existing !== "") {
                    const values = existing.split(",").map(v => v.trim());
                    detiCount = values.length;
                    renderInputs(values);
                } else {
                    renderInputs();
                }
            };


            window.closeChildrenModal = () => {
                modal.style.display = "none";
            }

            window.closeChildrenOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                closeChildrenModal();
                }
            }

            window.saveChildren = () => {
                const inputs = wrapper.querySelectorAll("input");
                const values = [];

                for (const input of inputs) {
                    const rawVal = input?.value ?? ''; // ochrana pred undefined
                    const val = rawVal.trim();

                    if (val === "") {
                        errorBox.textContent = "Fill in the child’s age.";
                        errorBox.style.display = "block";
                        return;
                    }

                    const parsed = parseInt(val, 10);
                    if (isNaN(parsed) || parsed > 13 || parsed < 0) {
                        errorBox.textContent = "Maximálny vek dieťaťa je 13 rokov.";
                        errorBox.style.display = "block";
                        return;
                    }

                    values.push(parsed);
                }

                // Zobrazenie textu do <span>
                outputInput.textContent = values.join(", ");

                // Aktivuj label len ak nie je prázdny
                const label = document.querySelector("label[for='childrens']");
                if (label) {
                    label.style.display = "block";
                }

                // Vymazanie predchádzajúcich hidden inputov
                document.querySelectorAll("input[name^='1_child']").forEach(el => el.remove());

                // Vloženie 1_childCount a 1_child1...1_child6
                const form = document.getElementById("rezervacia-form");
                const childCountInput = document.createElement("input");
                childCountInput.type = "hidden";
                childCountInput.name = "1_childCount";
                childCountInput.value = values.length;
                form.appendChild(childCountInput);

                for (let i = 0; i < 6; i++) {
                    const childInput = document.createElement("input");
                    childInput.type = "hidden";
                    childInput.name = `1_child${i + 1}`;
                    childInput.value = values[i] !== undefined ? values[i] : -1;
                    form.appendChild(childInput);
                }

                closeChildrenModal();
                updateFieldClasses();
            };

        });
    </script>
</div>

</div></div></div><div id="pg-2546-2"  class="panel-grid panel-no-style" ><div id="pgc-2546-2-0"  class="panel-grid-cell" ><div id="panel-2546-2-0-0" class="so-panel widget widget_stay_list_widget panel-first-child panel-last-child" data-index="3" ><style>
    .stay-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stay-list-wrapper {
        overflow-x: auto;
        scroll-behavior: smooth;
        width: 100%;
        /* max-width: 800px; /* Adjust based on your design */
    }
    .stay-list-wrapper h4 {
        margin: 13px 0 15px;
    }

    .stay-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .stay-list-horizontal {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .stay-list-horizontal li {
        /* margin: 10px;
        padding: 15px; */
        /* background-color: #f4f4f4; */
        /* border: 1px solid #ddd; */
        /* width: 250px; /* Width of each stay item */
        width: 25.4%;
        flex-shrink: 0;
        text-align: left;
        
    }
    .stay-list-horizontal li .stay-thumbnail {
        overflow: hidden;
    }
    .stay-list-horizontal li .stay-thumbnail > div {
        transition: transform 1.2s ease;
    }
    .stay-list-horizontal li:hover .stay-thumbnail > div {
        transform: scale(1.2);
    }
    .stay-list-horizontal li:not(:last-child) {
        margin-right: 40px;
    }
    @media screen and (max-width: 1280px) {
        .stay-list-horizontal li {
            width: 35%;
        }
    }
    @media screen and (max-width: 767px) {
        .stay-list-horizontal li {
            width: 60%;
        }
    }
    @media screen and (max-width: 479px) {
        .stay-list-horizontal li {
            width: 80%;
        } 
    }

    .stay-list-horizontal li a {
        text-decoration: none;
        color: var(--text);
    }


    .stay-thumbnail img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    @media screen and (max-width: 1280px) {
        .stay-thumbnail {
            aspect-ratio: 1 / 1.5;
        }
    }

    .scroll-button {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        color: var(--text);
        border: none;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        z-index: 10;
        width: 40px;
        border-radius: 50%;
        aspect-ratio: 1;
        background: var(--white);
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--black);
        margin-bottom: 4px;
        font-size: 26px;
        font-weight: 300;

    }

    .scroll-button:hover {
        opacity: 1;
    }

    .scroll-button.left {
        left: -40px;
    }

    .scroll-button.right {
        right: -40px;
    }
    @media screen and (max-width: 479px) {
        .scroll-button.left {
            left: -15px;
        }

        .scroll-button.right {
            right: -15px;
        }
    }

    .scroll-button.disabled {
        display: none;
    }

    .stay-texts-wrapper {
        margin-top: 1vw;
        margin-bottom: 25px;
    }

    .stay-category {
        background-color: var(--light-yellow);
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 9px 15px 10px;
        display: inline-block;
    }
    .stay-category:not(:last-child) {
        margin-right: 10px;
    }

    .info-post-row {
        display: flex;
        align-items: center;
        margin: 25px 0;
    }
    .info-post-row span {
        margin: 0 15px;
    }
    .post-icon {
        display: flex;
        align-items: center;
    }
    /* .post-date::before {
        content: '';
        width: 16px;
        height: 20px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/calendar.png)
            center no-repeat;
        background-size: 100%;
    }
    .post-visitor::before {
        content: '';
        width: 19px;
        height: 22px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/person.png)
            center no-repeat;
        background-size: 100%;
    } */

    .btn.btn-fake span,
    .btn.btn-fake:hover span {
        color: var(--text) !important;
        padding-left: 0;
        background-color: transparent;
    } 
    .stay-list-horizontal li:hover .btn-fake span {
        text-decoration: underline;
    }
    .btn.btn-fake.btn-icon-dark:hover span::before {
        background: transparent url(./wp-content/uploads/2024/09/btn_arr-dark.png) center center no-repeat;
        background-size: cover;
    }
</style>


<section class="headline-container" style="margin-top: 1vw; margin-bottom: 2vw !important;">
    <h2 class="header-animated" style="color: var(--project);">More attractive offers.</h2>
</section>

<div class="stay-container">
    <button class="scroll-button left" id="left-arrow" aria-label="Scroll left">&lt;</button>
    <div class="stay-list-wrapper">
        <ul class="stay-list-horizontal">
            
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/childrens-day-at-chopok/" 
                        title="Children&#8217;s Day on ChopokZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-hotel-Chopok-leto-rodina-2023_74-1024x478.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Children&#8217;s Day on Chopok</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        29. 05. - 31. 05.                                    </div>
                                </div>

                                <p>Celebrate Children's Day at Chopok and treat your children to an unforgettable experience full of fun and adventure with our favourite Chopik. This weekend will be full of joy, laughter and beautiful memories.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/may-weekends-with-animation/" 
                        title="May long weekends with animationsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-34-1024x580.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>May long weekends with animations</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 05. - 03. 05.                                    </div>
                                </div>

                                <p>If you're looking for a place that offers the perfect combination of comfort, first-class wellness, excellent gastronomy and the opportunity to enjoy a fun-filled weekend with family or friends, our May long weekend break is the perfect choice.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:3;">
                    <a href="https://www.hotelchopok.sk/en/stays/summer-family-stays/" 
                        title="Summer Family StaysZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-36-1024x542.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Summer Family Stays</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 07. - 31. 08.                                    </div>
                                </div>

                                <p>Come and experience an unforgettable summer at Chopok, where fun for kids meets perfect relaxation for the whole family. Book your summer family stay now and secure a season full of adventures at the best price with our exclusive FIRST MOMENT offer! </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/" 
                        title="Ladies rideZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_119-1024x587.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Ladies ride</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>This stay is ideal for ladies who want to spend time together and enjoy a wellness experience in luxurious surroundings. Whether you're craving a break from the stress of everyday life or a time of laughter together, the Ladies' Ride package will give you everything you need to revitalise your body and soul.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/" 
                        title="Romantic stay for twoZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/15-1024x562.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Romantic stay for two</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A romantic getaway for two. Perfect choice for those who wish to spend moments of reunion, relaxation and regeneration in the luxurious surroundings of the Tatras. A romantic stay at Chopok offers a unique opportunity to create beautiful memories in the company of the one you care about most.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:8;">
                    <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/" 
                        title="Wellness stay for seniorsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Seniorske-pobyty-1-web.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Wellness stay for seniors</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>Treat yourself to a carefree stay that will fill you with joy and satisfaction. Our care, unique wellness services and quality gastronomy are here to make sure you enjoy every moment of your stay.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:9;">
                    <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/" 
                        title="Cleansing therapyZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_205-1024x611.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Cleansing therapy</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A wellness retreat focused on harmonizing the body and mind includes relaxing treatments that help restore balance between physical and mental well-being. Massages and therapies are designed to relieve physical blockages and restore the natural flow of energy in your body.  </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                        </ul>
    </div>
    <button class="scroll-button right" id="right-arrow" aria-label="Scroll right">&gt;</button>
</div></div></div></div><div id="pg-2546-3"  class="panel-grid panel-no-style" ><div id="pgc-2546-3-0"  class="panel-grid-cell" ><div id="panel-2546-3-0-0" class="so-panel widget widget_newsletter_chopok_widget panel-first-child panel-last-child" data-index="4" ><style>
    .dynamic-block__newsletter .dynamic-block-center-line__content p {
        margin-bottom: 10px;
    }
    /* @media screen and (min-width: 991px) {
        .dynamic-block-center-line.dynamic-block__newsletter {
            height: 60vh;
        }
    } */
    @media screen and (max-width: 991px) {
        .dynamic-block-center-line.dynamic-block__image-right.dynamic-block__newsletter {
            min-width: 100vw;
            left: 50%;
            transform: translate(-50%, 0);
            flex-direction: column;
        }        
    }


    .btn-form {
        position: absolute !important;
        bottom: 0;
        left: 100%;
    }

    .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content {
        background-color: var(--light-project);
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form {
        z-index: 2;
        position: relative;
        
        margin-top: 15px;
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form input {
        border: none;
        min-height: 50px;
        background-color: var(--white);
        width: 100%;
        height: 65px;
        padding-left: 15px;
        font-size: 18px;
    }

    .newsletter-title {
        font-size: 2.7vw;
        font-weight: 500;
    }
    @media screen and (max-width: 991px) {
        .newsletter-title {
            font-size: 6vw;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content--wrapper {
            margin: 10% auto 0% !important;
            text-align: center;
        }

        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images {
            min-height: 30vh;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images .img-wrapper {
            height: 30vh !important;
        }

        .btn-form {
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .widget.widget_newsletter_chopok_widget {
            margin-bottom: 0 !important;
        }
    }
    @media screen and (max-width: 479px) {
        .newsletter-title {
            font-size: 11vw;
        }
    }

    .dynamic-block_newsletter {
        opacity: 0;
        transform: scale(0.1); /* Začína veľmi malý */
    }

    .ec-v-form-input input[type="checkbox"] + label::before {
        border: 2px solid #333 !important;
    }

    @media (max-width: 991px) {
        .ec-v-form-column div:last-child {
            top: -30px;
            text-align: left;
        }
    }
</style>

<div class="dynamic-block-center-line dynamic-block__image-right dynamic-block__newsletter">

    <div class="dynamic-block-center-line__content">
        <div class="dynamic-block-center-line__content--wrapper" >
                            <h3 class="h3 newsletter-title">News and special offers</h3>
            
            <div class="ecomail-form__wrapper">
                                    <!-- EN form Ecomail -->
                    <script>
                        (function (w,d,s,o,f,js,fjs) {
                            w['ecm-widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                            js.id = '8-0ff8f206695a872edfb6fade7b6458ba'; js.dataset.a = 'hotelchopok'; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                        }(window, document, 'script', 'ecmwidget', 'https://d70shl7vidtft.cloudfront.net/widget.js'));
                    </script>
                    <div id="f-8-0ff8f206695a872edfb6fade7b6458ba"></div>

                
            </div>
        </div>
    </div>
    
    <div class="dynamic-block-center-line__images ">
                    <div class="img-wrapper img-wrapper__up"
                style="background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/66b5fa7b072c3687d4279d86_F-10.jpg');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 100%;
                    height: 100%;
                    ">
            </div>
            </div>

</div>
</div></div></div></div><p>Článok <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/">Wellness stay for seniors</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Romantic stay for two</title>
		<link>https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/</link>
		
		<dc:creator><![CDATA[Jiří Kolínský]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 15:33:33 +0000</pubDate>
				<guid isPermaLink="false">https://www.hotelchopok.sk/pobyty/romantic-getaway-for-two/</guid>

					<description><![CDATA[<p>A romantic getaway for two. Perfect choice for those who wish to spend moments of reunion, relaxation and regeneration in the luxurious surroundings of the Tatras. A romantic stay at Chopok offers a unique opportunity to create beautiful memories in the company of the one you care about most.</p>
<p>Článok <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/">Romantic stay for two</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="pl-2547"  class="panel-layout" ><div id="pg-2547-0"  class="panel-grid panel-has-style" ><div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-2547-0" id="hero-wrapper" data-stretch-type="full-width-stretch" ><div id="pgc-2547-0-0"  class="panel-grid-cell" ><div id="panel-2547-0-0-0" class="so-panel widget widget_sow-hero panel-first-child panel-last-child" data-index="0" ><div class="hero-img panel-widget-style panel-widget-style-for-2547-0-0-0" id="hero-img" ><div
			
			class="so-widget-sow-hero so-widget-sow-hero-default-844de1f37420-2547 so-widget-fittext-wrapper"
			 data-fit-text-compressor="0.85"
		>				<div class="sow-slider-base" style="display: none" tabindex="0">
					<ul
					class="sow-slider-images"
					data-settings="{&quot;pagination&quot;:true,&quot;speed&quot;:400,&quot;timeout&quot;:8000,&quot;paused&quot;:false,&quot;pause_on_hover&quot;:false,&quot;swipe&quot;:true,&quot;nav_always_show_desktop&quot;:&quot;&quot;,&quot;nav_always_show_mobile&quot;:&quot;&quot;,&quot;breakpoint&quot;:&quot;780px&quot;,&quot;unmute&quot;:false,&quot;anchor&quot;:null}"
										data-anchor-id=""
				>		<li class="sow-slider-image  sow-slider-image-cover" style="visibility: visible;;background-color: #333333" >
					<div class="sow-slider-image-container">
			<div class="sow-slider-image-wrapper">
				<h1 style="text-align: center">Romantic stay for two</h1>
			</div>
		</div>
		<div class="sow-slider-image-overlay sow-slider-image-cover" style="opacity: 0.6;background-image: url(https://www.hotelchopok.sk/wp-content/uploads/2025/02/15.webp)"  ></div>		</li>
		</ul>				<ol class="sow-slider-pagination">
											<li><a href="#" data-goto="0" aria-label="Display slide 1"></a></li>
									</ol>

				<div class="sow-slide-nav sow-slide-nav-next">
					<a href="#" data-goto="next" aria-label="Next slide" data-action="next">
						<em class="sow-sld-icon-thin-right"></em>
					</a>
				</div>

				<div class="sow-slide-nav sow-slide-nav-prev">
					<a href="#" data-goto="previous" aria-label="Previous slide" data-action="prev">
						<em class="sow-sld-icon-thin-left"></em>
					</a>
				</div>
				</div></div></div></div></div></div></div><div id="pg-2547-1"  class="panel-grid panel-no-style" ><div id="pgc-2547-1-0"  class="panel-grid-cell" ><div id="panel-2547-1-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="1" ><div
			
			class="so-widget-sow-editor so-widget-sow-editor-base"
			
		><h3 class="widget-title">Treat yourself to a weekend of romance and relaxation that is made just for the two of you. Spend unforgettable moments at Chopok, where the magic of nature is combined with a luxurious wellness experience. </h3>
<div class="siteorigin-widget-tinymce textwidget">
	<p>&nbsp;</p>
<h3>What experiences you can look forward to:</h3>
<ul>
<li>1 x relaxing relaxation massage (20 min.) per person</li>
<li>Prosecco 0,75 l</li>
<li>strawberries/pineapple in the room</li>
<li>1 x Aperol Spritz per person at dinner</li>
<li>unlimited access to the pool and sauna world DANCER</li>
<li>unlimited access to fitness</li>
<li>fun bowling /1 hour/</li>
<li>stylish and cosy rooms /option to choose a room with a fireplace/</li>
<li>experiential gastronomy /buffet breakfast, served dinner/</li>
</ul>
<p>&nbsp;</p>
<p>You can claim a holiday allowance from your employer for all our stays.</p>
</div>
</div></div></div><div id="pgc-2547-1-1"  class="panel-grid-cell" ><div id="panel-2547-1-1-0" class="so-panel widget widget_form_top_offer_widget panel-first-child panel-last-child" data-index="2" ><style>
    /* 
    .input-visitor::before {
        min-width: 30px !important;
        height: 100% !important;
    }
    .input-date::before {
        min-width: 22px !important;
        height: 100% !important;
    } */
    /* 
    #rezervacia-form .btn.btn-yellow,
    #rezervacia-form .btn span {
        max-width: fit-content !important;
    } */
    @media screen and (max-width: 480px) {
        #rezervacia-form .btn.btn-yellow,
        #rezervacia-form .btn span {
            max-width: 100%;
        }
    }

    .booking-engine-container_horizontal {
        background-color: var(--light-project); /* Light background color */
        padding: 30px 0 25px;
        width: 90%;
        max-width: 1440px;
        margin: 0 auto; /* Center the form */
        margin-top: -104px;
        z-index: 99;
        position: relative;
    }
    .booking-engine-container_horizontal > div {
        width: 90%;
        margin: 0 auto;
    }

    .booking-engine-container_horizontal form {
        display: flex;
        flex-wrap: nowrap;
    }

    .booking-engine-container_horizontal label {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        color: var(--text); /* Dark text color */
        position: absolute;
        top: -15px;
        padding-top: 10px;
    }

    .input-wrapper.input-visitor.label-visible label {
        display: block;
    }

    .booking-engine-container_horizontal input[type="text"],
    .booking-engine-container_horizontal input[type="number"] {
        width: 100%;
        font-size: 14px;
        color: var(--text);
        background-color: var(--white);
        transition: border-color 0.3s ease;

        background: transparent;
        border: none;
        border-radius: 0 !important;

        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);

        height: 20px;
        width: 100%;
    }
    .booking-engine-container_horizontal input[type="number"].vek-input {
        border: none;
    }
    .booking-engine-container_horizontal input[name="promocode"] {
        border: none;
    }

    .booking-engine-container_horizontal input[type="text"]:focus,
    .booking-engine-container_horizontal input[type="number"]:focus {
        border-color: var(--project); /* Highlight color when focused */
        outline: none;
    }

    .booking-engine-container_horizontal a {
        display: block;
        margin-top: 20px;
        color: var(--white);
        text-align: center;
        font-size: 14px;
        text-decoration: none;
    }

    .booking-engine-container_horizontal a:hover {
        text-decoration: underline;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 500px) {
        .booking-engine-container_vertical {
            padding: 15px;
        }

        .booking-engine-container_vertical input,
        .booking-engine-container_vertical button {
            font-size: 13px;
        }
    }


    .booking-engine-container_horizontal button span {
        margin: 0 auto;
    }

    .booking-engine-container_horizontal .form-post-contact-wrapper {
        display: flex;
        flex-direction: row;
        /* align-items: flex-start; */
        justify-content: center;
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
            align-items: center;
        }
    }

    .booking-engine-container_vertical a {
        text-align: left;
        box-sizing: border-box;
        white-space: normal;
        height: 45px;
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;

        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .booking-engine-container_vertical a span {
        padding: 0;
    }

    .booking-engine-container_horizontal .input-wrapper {
        position: relative;
        height: 65px;
        flex: 1;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    .booking-engine-container_vertical .input-wrapper::before {
        content: url(); /* Tvoje URL ikony */
        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(0);
        padding-right: 10px;
    }

    .input-hotel label {
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }
    .input-hotel select {
        border: none;
        background: transparent;
        width: fit-content;
        cursor: pointer;
        padding-right: 20px;
        border-right: 1px solid var(--text);
    }

    .input-wrapper select {
        -webkit-appearance: none; /* Pre Chrome, Safari, Edge */
        -moz-appearance: none; /* Pre Firefox */
        appearance: none; /* Štandardné skrytie */
        background: transparent; /* Priehľadné pozadie */
        padding-right: 30px; /* Priestor pre vlastnú ikonu */
    }

    .input-wrapper.input-hotel {
        position: relative;
        /* display: inline-block; */
    }
    .input-wrapper.input-hotel::after {
        content: '';
        background: transparent
         url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5H7z%22%2F%3E%3C%2Fsvg%3E')
         no-repeat center center;
        background-size: 100%;
        position: absolute;
        right: 25px; /* Vzdialenosť od pravej strany */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Nezasahuje do kliknutia na select */
        width: 22px;
        height: 22px;
    }


    @media screen and (max-width: 1280px) {
        .booking-engine-container_horizontal form {
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
    }
    @media screen and (max-width: 991px) {
        .booking-engine-container_horizontal {
            margin-top: 0;
            width: 100vw;
        }
        
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 50%;
            border-bottom: 1px solid var(--text);
        }
        .booking-engine-container_horizontal .input-wrapper.input-present{
            flex-basis: 100%;
        }
        
        .booking-engine-container_horizontal label {
            top: -10px;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
        .input-hotel select,
        .booking-engine-container_horizontal input[type="text"],
        .booking-engine-container_horizontal input[type="number"] {
            border-right:  none;
        }
        .booking-engine-container_horizontal button {
            margin-top: 30px;
        }
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
        }
        .booking-engine-container_horizontal .form-post-contact-wrapper a {
            margin-top: 0;
            height: 45px;
        }
    }
    @media screen and (max-width: 479px) {
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 100%;
        }
    }

    /* Flash messages */
    
    .flash-message-wrapper {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -10px);
        z-index: 9;
    }
    .flash-message-wrapper > div {
        display: none;
        font-size: 13px;
        width: 200px;
        font-weight: 500;
        border-radius: 15px;
        padding: 9px;
       
        color: var(--white);
    }
    .childrens-error {
        background: var(--project);
    }

    .childrens-flash {
        margin-top: 7px;
        background: var(--green);
    }


    /* KALENDAR NOVY */
    /* LEN NOVÉ ŠTÝLY PRE KALENDÁR MODAL - NEOVPLYVŇUJÚ TVOJE ŠTÝLOVANIE */
    .children-modal,
    .calendar-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .children-popup,
    .calendar-popup {
        width: 90vw;
        max-width: 350px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        overflow: hidden;
    }

    .calendar-header {
        background: var(--project);
        color: white;
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-year {
        font-size: 18px;
        font-weight: 600;
    }

    .nav-button {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.2s;
    }

    .nav-button:hover {
        background: rgba(255,255,255,0.2);
    }

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
    }

    .weekday {
        padding: 12px 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }

    .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: #eee;
        padding: 1px;
    }

    .day {
        background: white;
        border: none;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.2s;
        position: relative;
    }

    .day:hover {
        background: #f0f0f0;
    }

    .day.other-month {
        color: #ccc;
        background: #fafafa;
    }

    .day.selected-start {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.selected-end {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.in-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.hover-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.today {
        position: relative;
    }

    .day.today::after {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--project);
        border-radius: 50%;
    }

    .calendar-footer {
        padding: 20px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-footer .button-wrapper {
        width: 50%;
        display: flex;
        justify-content: right;
        gap: 5px;
    }

    .confirm-button {
        background: var(--light-project-2);
        color: var(--text);
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
    }

    .confirm-button:hover {
        background: var(--purple);
        color: var(--white)

    }

    .confirm-button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .cancel-button {
        background: none;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        padding: 10px;
        color: var(--gray);
        box-shadow: none !important
    }

    .date-range-display {
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: lighter;
        color: rgba(0, 0, 0, 0.3);
        background: transparent;
        border: none;
        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);
        height: 20px;
        width: 100%;
    }

    /* ŠTÝLY PRE TLAČIDLÁ */
    .btn {
        display: inline-block;
        padding: 12px 24px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-yellow {
        background-color: #f4c430;
        color: #333;
    }

    .btn-yellow:hover {
        background-color: #e6b82a;
    }

    /* 
    .btn-transparent {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--text);
    } */

    .btn.btn-transparent:hover span {
        background: transparent !important;
        color: var(--white);
    }

    .selection-info {
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
    }

    #dateRangeDisplay {
        white-space: nowrap;
    }

    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    @media screen and (max-width: 991px) {
        .input-hotel select,
        .booking-engine-container_horizontal select,
        .booking-engine-container_horizontal input[type="text"], 
        .booking-engine-container_horizontal input[type="number"],
        .date-range-display {
            border-right: none !important;
        }
    }

    .booking-engine-container_horizontal select {
        font-size: 14px;
        font-weight: bold;
        color: black;
        background: transparent;
        border: none;
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid var(--text);
        cursor: pointer;
        appearance: none; /* odstráni natívny vzhľad */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* fallback ak nepoužiješ ::after */
    }
    .booking-engine-container_horizontal select option {
        font-weight: normal;
        color: var(--text);
    }

    .input-wrapper.active span,
    .input-wrapper.active input,
    .input-wrapper.active select option[selected] {
        font-weight: bold !important;
        color: black !important;
    }


    #booking-button.btn-yellow:hover {
        background: unset;
    }
    #booking-button.btn-yellow:hover span {
        background: var(--project);
    }

    /* Side FORM */
    .single .booking-engine-container_horizontal,
    .single-room .booking-engine-container_horizontal,
    .single-stay .booking-engine-container_horizontal {
        max-width: 400px;
    }
    .single .booking-engine-container_horizontal form,
    .single-room .booking-engine-container_horizontal form,
    .single-stay .booking-engine-container_horizontal form {
        flex-direction: column;
    }
    .single .booking-engine-container_horizontal .input-wrapper,
    .single-room .booking-engine-container_horizontal .input-wrapper,
    .single-stay .booking-engine-container_horizontal .input-wrapper {
        border-bottom: 1px solid black;
        padding-bottom: 35px;
        margin-bottom: 35px;
    }
    .single .date-range-display,
    .single-room .date-range-display,
    .single-stay .date-range-display,
    .single .input-hotel select,
    .single-room .input-hotel select,
    .single-stay .input-hotel select {
        border: none !important;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child {
        margin-top: 0;
    }
    .single .input-wrapper.input-hotel::after,
    .single-room .input-wrapper.input-hotel::after,
    .single-stay .input-wrapper.input-hotel::after {
        transform: translateY(-30px);
    }
    #rezervacia-form h5 {
        display: none;
    }
    .single #rezervacia-form h5,
    .single-room #rezervacia-form h5,
    .single-stay #rezervacia-form h5 {
        display: block;
        margin-bottom: 33px;
    }
</style>

<script>
    /* <![CDATA[ */

    
    // function updateHotelChoice(selectElement) {
    //     const adresa_chopok = "";
    //     const adresa_apartmany = "";

    //     const selectedValue = jQuery(selectElement).val();
    //     const form = jQuery(selectElement).closest("form");

    //     if (selectedValue == "0") {
    //         form.attr("action", adresa_chopok);
    //     } else if (selectedValue == "1") {
    //         form.attr("action", adresa_apartmany);
    //     }
    // } 

    /* ]]&gt; */


    function updateFieldClasses() {
        // DÁTUMY
        const dateDisplay = document.getElementById('dateRangeDisplay');
        const dateWrapper = dateDisplay.closest('.input-wrapper');
        if (dateDisplay.textContent.trim() !== "Vyberte termín") {
            dateWrapper.classList.add('active');
        } else {
            dateWrapper.classList.remove('active');
        }

        // DETI
        const childrenDisplay = document.getElementById('childrens');
        const childrenWrapper = childrenDisplay.closest('.input-wrapper');

        const value = childrenDisplay.textContent.trim();

        // Regex: povoľuje formát ako "1", "1,2", "1, 2", "2, 14", atď.
        const containsAge = /^\d+(,\s*\d+)*$/.test(value);

        if (containsAge) {
            childrenWrapper.classList.add('active');
        } else {
            childrenWrapper.classList.remove('active');
        }


        // DOSPELÍ
        const adultsDisplay = document.getElementById('adultsDisplay');
        const adultsWrapper = adultsDisplay.closest('.input-wrapper');

        if (adultsDisplay) {
            // Získa len čísla (napr. "2" alebo "👤 2", aj s NBSP)
            const digitsOnly = adultsDisplay.textContent.replace(/[^\d]/g, '').trim();
            const adultCount = parseInt(digitsOnly, 10);

            if (!isNaN(adultCount) && adultCount > 0) {
                adultsWrapper.classList.add('active');
            } else {
                adultsWrapper.classList.remove('active');
            }
        }


        // INPUTY (dospelí, promokód atď.)
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            const wrapper = input.closest('.input-wrapper');
            if (!wrapper) return;

            if (input.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });

        // SELECT (hotelchoice)
        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            const wrapper = select.closest('.input-wrapper');
            if (!wrapper) return;

            if (select.value && select.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        updateFieldClasses(); // inicializácia

        // Dynamická aktualizácia pri zmene
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            input.addEventListener('input', updateFieldClasses);
        });

        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            select.addEventListener('change', updateFieldClasses);
        });
    });
</script>


<div class="booking-engine-container_horizontal">
    <div>
        <form id="rezervacia-form" 
            method="POST">

            <h5>Check availability</h5>

            <div class="input-wrapper input-hotel">
                <select name="hotelchoice"><option value="52">Wellness Hotel Chopok ****</option><option value="617">Apartments and Studios Lúčky</option></select>            </div>

            <!-- UPRAVENÝ INPUT PRE DÁTUMY - TERAZ JEDEN NAMIESTO DVOCH -->
            <div class="input-wrapper input-date">
                <!-- <label for="dateRange">Date of stay</label> -->
                <span class="date-range-display" id="dateRangeDisplay" onclick="openCalendar()">Select dates</span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="adults">Number of guests:</label> -->
                <!-- <input placeholder="Adults" 
                    type="number" id="adults" name="1_adultCount" class="booking-input" min="1" value="" required> -->
                <span id="adultsDisplay" class="booking-input date-range-display" onclick="openAdultsModal()">
                    Adults                </span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="childrens">Children's age::</label> -->
                <span 
                    id="childrens" 
                    class="booking-input date-range-display" 
                    onclick="openChildrenModal()"
                >
                    Children                </span>
            </div>

            <div class="input-wrapper input-present">
                <!-- <label for="promo">Promo code:</label> -->
                <input placeholder="Promo code" 
                    type="text" id="promo" name="promocode" class="booking-input">
            </div>

            <button id="booking-button" type="button" class="btn btn-yellow">
                <span>Check the price</span>
            </button>

            <!-- HIDDEN INPUTY S PÔVODNÝMI NAME ATRIBÚTMI -->
            <input type="hidden" id="arrival" name="dateFrom" class="booking-input" required>
            <input type="hidden" id="departure" name="dateTo" class="booking-input" required>

                        <input type="hidden" id="tr-data__r" name="redirect" value="0">
            <input type="hidden" id="tr-data__l" name="lang" value="en">

        </form>


        <!-- Optional link to the contact information or other services -->
        <div class="form-post-contact-wrapper">
            <a href="tel:+421911611386" title="Rezervácie Hotel Chopok telefón" class="btn btn-transparent">
                <span class="post-icon icon-tel">+421 / 911 611 386</span>
            </a>
            <a href="mailto:recepcia@hotelchopok.sk" title="Reception Hotel Chopok mail" class="btn btn-transparent">
                <span class="post-icon icon-mail">recepcia@hotelchopok.sk</span>
            </a>
        </div>
    </div>
</div>

<!-- KALENDÁR MODAL -->
<div class="calendar-modal" id="calendarModal" onclick="closeCalendarOnBackdrop(event)">
    <div class="calendar-popup">
        <div class="calendar-header">
            <button class="nav-button" onclick="changeMonth(-1)">‹</button>
            <div class="month-year" id="monthYear"></div>
            <button class="nav-button" onclick="changeMonth(1)">›</button>
        </div>

        <div class="weekdays">
            <div class="weekday">Mon</div>
            <div class="weekday">Tue</div>
            <div class="weekday">Wed</div>
            <div class="weekday">Thu</div>
            <div class="weekday">Fri</div>
            <div class="weekday">Sat</div>
            <div class="weekday">Sun</div>
        </div>

        <div class="days-grid" id="daysGrid"></div>

        <div class="calendar-footer">
            <div class="selection-datums"></div>
                        <div class="button-wrapper">
                <button class="cancel-button" onclick="closeCalendar()"><span class="icon">✖</span></button>
                <button class="confirm-button" id="confirmButton" onclick="confirmDates()" disabled>
                    Confirm                </button>
            </div>
        </div>
    </div>
    <script>
        // KALENDÁR LOGIKA
        let currentDate = new Date();
        let selectedStart = null;
        let selectedEnd = null;
        let isSelectingEnd = false;

        const monthNames = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];

        const monthNamesShort = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ];

        function formatDate(date) {
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        }

        function formatDateForDisplay(date) {
            const day = date.getDate();
            const monthShort = monthNamesShort[date.getMonth()];
            return `${day} ${monthShort}`;
        }

        function openCalendar() {
            document.getElementById('calendarModal').style.display = 'flex';
            renderCalendar();
        }

        function closeCalendar() {
            document.getElementById('calendarModal').style.display = 'none';
        }

        function closeCalendarOnBackdrop(event) {
            if (event.target === event.currentTarget) {
                closeCalendar();
            }
        }

        function renderCalendar() {
            const monthYear = document.getElementById('monthYear');
            const daysGrid = document.getElementById('daysGrid');

            monthYear.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const firstDayOfWeek = (firstDay.getDay() + 6) % 7;

            daysGrid.innerHTML = '';

            const today = new Date();
            today.setHours(0, 0, 0, 0);

            // Pridáme prázdne bunky pre dni pred 1. dňom mesiaca
            for (let i = 0; i < firstDayOfWeek; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            // Pridáme LEN dni aktuálneho mesiaca
            for (let day = 1; day <= lastDay.getDate(); day++) {
                const cellDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);

                const dayButton = document.createElement('button');
                dayButton.className = 'day';
                dayButton.textContent = day;

                if (cellDate.getTime() === today.getTime()) {
                    dayButton.classList.add('today');
                }

                if (cellDate < today) {
                    dayButton.disabled = true;
                    dayButton.style.color = '#ccc';
                    dayButton.style.cursor = 'not-allowed';
                }

                // Označenie vybraných dátumov - LEN ak sú v aktuálnom mesiaci
                if (selectedStart && 
                    cellDate.getTime() === selectedStart.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-start');
                }
                
                if (selectedEnd && 
                    cellDate.getTime() === selectedEnd.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-end');
                }

                // Označenie rozsahu - LEN ak sú oba dátumy v aktuálnom mesiaci alebo špecifické prípady
                if (selectedStart && selectedEnd) {
                    // Len ak je aktuálny deň medzi start a end a všetko je v tom istom mesiaci
                    if (cellDate > selectedStart && cellDate < selectedEnd) {
                        // EXTRA kontrola - označuj LEN ak sú start a end v rámci tohto mesiaca alebo logicky pokračujú
                        const startInThisMonth = selectedStart.getMonth() === currentDate.getMonth() && selectedStart.getFullYear() === currentDate.getFullYear();
                        const endInThisMonth = selectedEnd.getMonth() === currentDate.getMonth() && selectedEnd.getFullYear() === currentDate.getFullYear();
                        
                        if (startInThisMonth && endInThisMonth) {
                            // Oba v aktuálnom mesiaci
                            dayButton.classList.add('in-range');
                        } else if (startInThisMonth && !endInThisMonth && selectedEnd > cellDate) {
                            // Start v aktuálnom, end v budúcom - označuj od start do konca mesiaca
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && endInThisMonth && selectedStart < cellDate) {
                            // Start v minulom, end v aktuálnom - označuj od začiatku mesiaca po end
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && !endInThisMonth && selectedStart < cellDate && selectedEnd > cellDate) {
                            // Start v minulom, end v budúcom - označuj celý mesiac
                            dayButton.classList.add('in-range');
                        }
                    }
                }

                if (!dayButton.disabled) {
                    dayButton.onclick = () => selectDate(cellDate);
                    dayButton.onmouseenter = () => highlightRange(cellDate);
                    dayButton.onmouseleave = () => clearHoverRange();
                }
                
                daysGrid.appendChild(dayButton);
            }

            // Pridáme prázdne bunky na koniec len ak je potrebné pre grid (LEN neviditeľné)
            const totalCells = daysGrid.children.length;
            const remainingCells = 42 - totalCells;
            for (let i = 0; i < remainingCells; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            updateConfirmButton();
            updateSelectionDisplay();
        }

        function selectDate(date) {
            if (date < new Date().setHours(0, 0, 0, 0)) return;

            if (!selectedStart) {
                // Prvý klik - vyber start dátum
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            } else if (isSelectingEnd && !selectedEnd) {
                // Druhý klik - vyber end dátum
                if (date <= selectedStart) {
                    // Ak klikneme na skorší dátum, resetuj start
                    selectedStart = new Date(date);
                    selectedEnd = null;
                } else {
                    // Normálny výber end dátumy
                    selectedEnd = new Date(date);
                    isSelectingEnd = false;
                }
            } else {
                // Reset - začni odznova
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            }

            renderCalendar();
        }

        function updateSelectionDisplay() {
            // Aktualizuj info v kalendári ak máš vybrané dátumy
            const footerInfo = document.querySelector('.calendar-footer .selection-info');
            if (footerInfo) footerInfo.remove();
            
            if (selectedStart) {
                const footer = document.querySelector('.selection-datums');
                const info = document.createElement('div');
                info.className = 'selection-info';
                
                if (selectedEnd) {
                    info.textContent = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
                } else {
                    info.textContent = `Start: ${formatDateForDisplay(selectedStart)}`;
                }
                
                footer.insertBefore(info, footer.firstChild);
            }
        }

        function highlightRange(hoverDate) {
            if (!selectedStart || selectedEnd || !isSelectingEnd) return;
            if (hoverDate < new Date().setHours(0, 0, 0, 0)) return;
            if (hoverDate <= selectedStart) return;

            clearHoverRange();

            // Hover efekt funguje len v aktuálnom mesiaci
            const allDays = document.querySelectorAll('.day');
            allDays.forEach(day => {
                if (day.style.visibility === 'hidden') return;
                
                const dayText = parseInt(day.textContent);
                if (isNaN(dayText)) return;
                
                const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayText);
                
                // Ak je start v inom mesiaci, zvýrazni od začiatku aktuálneho mesiaca
                if (selectedStart < new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)) {
                    if (dayDate <= hoverDate) {
                        day.classList.add('hover-range');
                    }
                }
                // Normálny hover v rámci mesiaca
                else if (dayDate > selectedStart && dayDate < hoverDate) {
                    day.classList.add('hover-range');
                }
            });
        }

        function clearHoverRange() {
            const hoverDays = document.querySelectorAll('.hover-range');
            hoverDays.forEach(day => {
                day.classList.remove('hover-range');
            });
        }

        function changeMonth(direction) {
            currentDate.setMonth(currentDate.getMonth() + direction);
            renderCalendar();
        }

        function updateConfirmButton() {
            const confirmButton = document.getElementById('confirmButton');
            confirmButton.disabled = !(selectedStart && selectedEnd);
        }

        function confirmDates() {
            if (!selectedStart || !selectedEnd) return;

            // Aktualizácia hidden inputov
            document.getElementById('arrival').value = formatDate(selectedStart);
            document.getElementById('departure').value = formatDate(selectedEnd);

            // Aktualizácia zobrazenia
            const displayText = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
            document.getElementById('dateRangeDisplay').textContent = displayText;

            closeCalendar();
            updateFieldClasses();
        }
    </script>
</div>

<!-- Modal Dospelí -->
<div class="children-modal" id="adultsModal" onclick="closeAdultsOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of adults:</p>

        <div class="deti-counter">
            <button type="button" id="minus-adults">−</button>
            <input type="number" id="adults-count-input" min="1" max="10" value="2" class="vek-input" />
            <button type="button" id="plus-adults">+</button>
        </div>

        <div id="adults-error" style="display:none; color: red; margin-top:10px;">
            Minimum is 1, maximum is 10.        </div>

        <div style="text-align:right; margin-top: 15px;">
            <button type="button" class="cancel-button" onclick="closeAdultsModal()"><span class="icon">✖</span></button>
            <button type="button" class="confirm-button" onclick="saveAdults()">Confirm</button>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const adultsModal = document.getElementById("adultsModal");
            const plusBtn = document.getElementById("plus-adults");
            const minusBtn = document.getElementById("minus-adults");
            const input = document.getElementById("adults-count-input");
            const displaySpan = document.getElementById("adultsDisplay");
            const errorBox = document.getElementById("adults-error");
            const form = document.getElementById("rezervacia-form");

            let adultsCount = 2;
            const minAdults = 1;
            const maxAdults = 10;

            window.openAdultsModal = () => {
                adultsModal.style.display = "flex";
                input.value = adultsCount;
                errorBox.style.display = "none";
            };

            window.closeAdultsModal = () => {
                adultsModal.style.display = "none";
            };

            window.closeAdultsOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                    closeAdultsModal();
                }
            };

            window.showAlertModal = function(message) {
                const modal = document.getElementById("alertModal");
                const text = document.getElementById("alertModalText");

                text.textContent = message;
                modal.style.display = "flex";
            };

            window.closeAlertModal = function() {
                const modal = document.getElementById("alertModal");
                modal.style.display = "none";
            };

            window.closeAlertOnBackdrop = function(event) {
                if (event.target === event.currentTarget) {
                    closeAlertModal();
                }
            };


            plusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val < maxAdults) {
                    val++;
                    input.value = val;
                }
            });

            minusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val > minAdults) {
                    val--;
                    input.value = val;
                }
            });

            input.addEventListener("input", () => {
                let val = parseInt(input.value) || 0;
                if (val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                } else {
                    errorBox.style.display = "none";
                }
            });

            window.saveAdults = () => {
                let val = parseInt(input.value);
                if (isNaN(val) || val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                    return;
                }

                adultsCount = val;

                // Odstrániť predchádzajúci input ak existuje
                form.querySelectorAll("input[name='1_adultCount']").forEach(el => el.remove());

                const hiddenInput = document.createElement("input");
                hiddenInput.type = "hidden";
                hiddenInput.name = "1_adultCount";
                hiddenInput.value = adultsCount;
                form.appendChild(hiddenInput);

                // Aktualizovať span
                displaySpan.textContent = adultsCount;

                closeAdultsModal();
                updateFieldClasses(); // aktualizuje .active class
            };
        });
    </script>
</div>

<!-- ALERT MODAL (napr. pre "Zadajte počet dospelých") -->
<div class="children-modal" id="alertModal" onclick="closeAlertOnBackdrop(event)">
    <div class="children-popup">
        <p id="alertModalText" style="margin-bottom: 15px;">Tu bude hláška</p>
        <div style="text-align: right;">
            <button type="button" class="confirm-button" onclick="closeAlertModal()">OK</button>
        </div>
    </div>
</div>


<!-- Pocet a vek detí -->
<div class="children-modal" id="childrenModal" onclick="closeChildrenOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of children:</p>

        <div class="deti-counter">
            <button type="button" id="minus-btn">−</button>
            <span id="deti-count">0</span>
            <button type="button" id="plus-btn">+</button>
        </div>

        <p style="margin: 0 !important;">Children's age:</p>
        <div id="vek-deti-wrapper"></div>

        <div id="children-error" style="display:none; color: red; margin-top:10px;">
            Maximálny vek dieťaťa je 13 rokov.        </div>

        <div style="text-align:right; margin-top: 15px;">
        <!-- <button type="button" class="btn btn-transparent" onclick="closeChildrenModal()">Cancel</button> -->
        <button type="button" class="cancel-button" onclick="closeChildrenModal()"><span class="icon">✖</span></button>
        <button type="button" class="confirm-button" onclick="saveChildren()">Confirm</button>
        </div>
    </div>
    <style>
        .children-popup {
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            padding: 20px;
            max-width: 350px;
            width: 90vw;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: inherit;
        }

        .deti-counter {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 500;
        }

        .deti-counter button,
        .deti-counter button:focus {
            background: var(--project);
            border: none;
            color: var(--white);
            width: 32px;
            height: 32px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s ease;

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
        }

        .deti-counter button:hover {
            background: var(--light-project-2);
        }

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


        #vek-deti-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
        }

        .vek-input {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            width: 100%;
            box-sizing: border-box;
            background-color: #f9f9f9;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .vek-input:focus {
            outline: none;
            border-color: var(--project);
            background-color: #fff;
        }

        /* Tlačidlá v spodnej časti popupu */
        .children-popup .btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            background: var(--project);
        }

        .btn-yellow {
            background: var(--project);
            color: white;
            border: none;
        }

        .btn-yellow:hover {
            background: var(--purple);
        }

        /* .btn-transparent {
            background: none;
            color: #666;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        .btn-transparent:hover {
            background: #f0f0f0;
        } */

        .vek-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .vek-input {
            flex: 1;
            padding-right: 30px;
        }

        .delete-vek {
            position: absolute;
            right: 10px;
            background: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            color: var(--light-project-2);
            outline: none;
            border: none;
            box-shadow: none;
        }

        .delete-vek:hover {
            color: var(--text);
            background: none !important;
            box-shadow: none !important;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById('childrenModal');
            const plusBtn = document.getElementById("plus-btn");
            const minusBtn = document.getElementById("minus-btn");
            const countSpan = document.getElementById("deti-count");
            const wrapper = document.getElementById("vek-deti-wrapper");
            const errorBox = document.getElementById("children-error");
            const outputInput = document.getElementById("childrens");

            let detiCount = 0;
            const maxDeti = 10;

            plusBtn.addEventListener("click", () => {
                if (detiCount < maxDeti) {
                detiCount++;
                renderInputs();
                }
            });

            minusBtn.addEventListener("click", () => {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const emptyInputs = inputs.filter(el => el.value.trim() === "");

                if (emptyInputs.length > 0 && detiCount > 0) {
                detiCount--;
                renderInputs();
                }
            });

            function updateButtonStates() {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const hasEmpty = inputs.some(el => el.value.trim() === "");

                minusBtn.disabled = detiCount === 0 || !hasEmpty;
                plusBtn.disabled = detiCount >= maxDeti;
            }

            function renderInputs(prefillValues = []) {
                countSpan.textContent = detiCount;

                const currentWrappers = Array.from(wrapper.querySelectorAll(".vek-wrapper"));
                const currentValues = currentWrappers.map(w => w.querySelector("input").value.trim());

                wrapper.innerHTML = "";
                errorBox.style.display = "none";

                const usedValues = prefillValues.length ? prefillValues : currentValues;

                for (let i = 0; i < detiCount; i++) {
                const value = usedValues[i] || "";

                const inputWrapper = document.createElement("div");
                inputWrapper.classList.add("vek-wrapper");

                const input = document.createElement("input");
                input.type = "number";
                input.name = `vek_dieta_${i + 1}`;

                // input.placeholder = `Vek ${i + 1}. dieťaťa`;
                const placeholderTemplate = "Age of child %d.";
                input.placeholder = placeholderTemplate.replace('%d', i + 1);

                input.min = 0;
                input.max = 13;
                input.required = true;
                input.className = "vek-input";
                input.value = value;

                input.addEventListener("input", updateButtonStates);

                const removeBtn = document.createElement("button");
                removeBtn.type = "button";
                removeBtn.innerHTML = "✕";
                removeBtn.className = "delete-vek";
                removeBtn.addEventListener("click", () => {
                    inputWrapper.remove();
                    detiCount--;
                    renderInputs();
                });

                inputWrapper.appendChild(input);
                inputWrapper.appendChild(removeBtn);

                wrapper.appendChild(inputWrapper);
                }

                updateButtonStates();
            }

            window.openChildrenModal = () => {
                modal.style.display = "flex";

                const existing = outputInput.textContent.trim(); // 💥 tu bola chyba (value → textContent)

                if (existing !== "") {
                    const values = existing.split(",").map(v => v.trim());
                    detiCount = values.length;
                    renderInputs(values);
                } else {
                    renderInputs();
                }
            };


            window.closeChildrenModal = () => {
                modal.style.display = "none";
            }

            window.closeChildrenOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                closeChildrenModal();
                }
            }

            window.saveChildren = () => {
                const inputs = wrapper.querySelectorAll("input");
                const values = [];

                for (const input of inputs) {
                    const rawVal = input?.value ?? ''; // ochrana pred undefined
                    const val = rawVal.trim();

                    if (val === "") {
                        errorBox.textContent = "Fill in the child’s age.";
                        errorBox.style.display = "block";
                        return;
                    }

                    const parsed = parseInt(val, 10);
                    if (isNaN(parsed) || parsed > 13 || parsed < 0) {
                        errorBox.textContent = "Maximálny vek dieťaťa je 13 rokov.";
                        errorBox.style.display = "block";
                        return;
                    }

                    values.push(parsed);
                }

                // Zobrazenie textu do <span>
                outputInput.textContent = values.join(", ");

                // Aktivuj label len ak nie je prázdny
                const label = document.querySelector("label[for='childrens']");
                if (label) {
                    label.style.display = "block";
                }

                // Vymazanie predchádzajúcich hidden inputov
                document.querySelectorAll("input[name^='1_child']").forEach(el => el.remove());

                // Vloženie 1_childCount a 1_child1...1_child6
                const form = document.getElementById("rezervacia-form");
                const childCountInput = document.createElement("input");
                childCountInput.type = "hidden";
                childCountInput.name = "1_childCount";
                childCountInput.value = values.length;
                form.appendChild(childCountInput);

                for (let i = 0; i < 6; i++) {
                    const childInput = document.createElement("input");
                    childInput.type = "hidden";
                    childInput.name = `1_child${i + 1}`;
                    childInput.value = values[i] !== undefined ? values[i] : -1;
                    form.appendChild(childInput);
                }

                closeChildrenModal();
                updateFieldClasses();
            };

        });
    </script>
</div>

</div></div></div><div id="pg-2547-2"  class="panel-grid panel-no-style" ><div id="pgc-2547-2-0"  class="panel-grid-cell" ><div id="panel-2547-2-0-0" class="so-panel widget widget_stay_list_widget panel-first-child panel-last-child" data-index="3" ><style>
    .stay-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stay-list-wrapper {
        overflow-x: auto;
        scroll-behavior: smooth;
        width: 100%;
        /* max-width: 800px; /* Adjust based on your design */
    }
    .stay-list-wrapper h4 {
        margin: 13px 0 15px;
    }

    .stay-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .stay-list-horizontal {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .stay-list-horizontal li {
        /* margin: 10px;
        padding: 15px; */
        /* background-color: #f4f4f4; */
        /* border: 1px solid #ddd; */
        /* width: 250px; /* Width of each stay item */
        width: 25.4%;
        flex-shrink: 0;
        text-align: left;
        
    }
    .stay-list-horizontal li .stay-thumbnail {
        overflow: hidden;
    }
    .stay-list-horizontal li .stay-thumbnail > div {
        transition: transform 1.2s ease;
    }
    .stay-list-horizontal li:hover .stay-thumbnail > div {
        transform: scale(1.2);
    }
    .stay-list-horizontal li:not(:last-child) {
        margin-right: 40px;
    }
    @media screen and (max-width: 1280px) {
        .stay-list-horizontal li {
            width: 35%;
        }
    }
    @media screen and (max-width: 767px) {
        .stay-list-horizontal li {
            width: 60%;
        }
    }
    @media screen and (max-width: 479px) {
        .stay-list-horizontal li {
            width: 80%;
        } 
    }

    .stay-list-horizontal li a {
        text-decoration: none;
        color: var(--text);
    }


    .stay-thumbnail img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    @media screen and (max-width: 1280px) {
        .stay-thumbnail {
            aspect-ratio: 1 / 1.5;
        }
    }

    .scroll-button {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        color: var(--text);
        border: none;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        z-index: 10;
        width: 40px;
        border-radius: 50%;
        aspect-ratio: 1;
        background: var(--white);
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--black);
        margin-bottom: 4px;
        font-size: 26px;
        font-weight: 300;

    }

    .scroll-button:hover {
        opacity: 1;
    }

    .scroll-button.left {
        left: -40px;
    }

    .scroll-button.right {
        right: -40px;
    }
    @media screen and (max-width: 479px) {
        .scroll-button.left {
            left: -15px;
        }

        .scroll-button.right {
            right: -15px;
        }
    }

    .scroll-button.disabled {
        display: none;
    }

    .stay-texts-wrapper {
        margin-top: 1vw;
        margin-bottom: 25px;
    }

    .stay-category {
        background-color: var(--light-yellow);
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 9px 15px 10px;
        display: inline-block;
    }
    .stay-category:not(:last-child) {
        margin-right: 10px;
    }

    .info-post-row {
        display: flex;
        align-items: center;
        margin: 25px 0;
    }
    .info-post-row span {
        margin: 0 15px;
    }
    .post-icon {
        display: flex;
        align-items: center;
    }
    /* .post-date::before {
        content: '';
        width: 16px;
        height: 20px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/calendar.png)
            center no-repeat;
        background-size: 100%;
    }
    .post-visitor::before {
        content: '';
        width: 19px;
        height: 22px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/person.png)
            center no-repeat;
        background-size: 100%;
    } */

    .btn.btn-fake span,
    .btn.btn-fake:hover span {
        color: var(--text) !important;
        padding-left: 0;
        background-color: transparent;
    } 
    .stay-list-horizontal li:hover .btn-fake span {
        text-decoration: underline;
    }
    .btn.btn-fake.btn-icon-dark:hover span::before {
        background: transparent url(./wp-content/uploads/2024/09/btn_arr-dark.png) center center no-repeat;
        background-size: cover;
    }
</style>


<section class="headline-container" style="margin-top: 1vw; margin-bottom: 2vw !important;">
    <h2 class="header-animated" style="color: var(--project);">More attractive offers.</h2>
</section>

<div class="stay-container">
    <button class="scroll-button left" id="left-arrow" aria-label="Scroll left">&lt;</button>
    <div class="stay-list-wrapper">
        <ul class="stay-list-horizontal">
            
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/childrens-day-at-chopok/" 
                        title="Children&#8217;s Day on ChopokZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-hotel-Chopok-leto-rodina-2023_74-1024x478.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Children&#8217;s Day on Chopok</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        29. 05. - 31. 05.                                    </div>
                                </div>

                                <p>Celebrate Children's Day at Chopok and treat your children to an unforgettable experience full of fun and adventure with our favourite Chopik. This weekend will be full of joy, laughter and beautiful memories.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/may-weekends-with-animation/" 
                        title="May long weekends with animationsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-34-1024x580.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>May long weekends with animations</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 05. - 03. 05.                                    </div>
                                </div>

                                <p>If you're looking for a place that offers the perfect combination of comfort, first-class wellness, excellent gastronomy and the opportunity to enjoy a fun-filled weekend with family or friends, our May long weekend break is the perfect choice.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:3;">
                    <a href="https://www.hotelchopok.sk/en/stays/summer-family-stays/" 
                        title="Summer Family StaysZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-36-1024x542.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Summer Family Stays</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 07. - 31. 08.                                    </div>
                                </div>

                                <p>Come and experience an unforgettable summer at Chopok, where fun for kids meets perfect relaxation for the whole family. Book your summer family stay now and secure a season full of adventures at the best price with our exclusive FIRST MOMENT offer! </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/" 
                        title="Ladies rideZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_119-1024x587.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Ladies ride</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>This stay is ideal for ladies who want to spend time together and enjoy a wellness experience in luxurious surroundings. Whether you're craving a break from the stress of everyday life or a time of laughter together, the Ladies' Ride package will give you everything you need to revitalise your body and soul.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/" 
                        title="Romantic stay for twoZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/15-1024x562.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Romantic stay for two</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A romantic getaway for two. Perfect choice for those who wish to spend moments of reunion, relaxation and regeneration in the luxurious surroundings of the Tatras. A romantic stay at Chopok offers a unique opportunity to create beautiful memories in the company of the one you care about most.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:8;">
                    <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/" 
                        title="Wellness stay for seniorsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Seniorske-pobyty-1-web.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Wellness stay for seniors</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>Treat yourself to a carefree stay that will fill you with joy and satisfaction. Our care, unique wellness services and quality gastronomy are here to make sure you enjoy every moment of your stay.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:9;">
                    <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/" 
                        title="Cleansing therapyZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_205-1024x611.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Cleansing therapy</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A wellness retreat focused on harmonizing the body and mind includes relaxing treatments that help restore balance between physical and mental well-being. Massages and therapies are designed to relieve physical blockages and restore the natural flow of energy in your body.  </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                        </ul>
    </div>
    <button class="scroll-button right" id="right-arrow" aria-label="Scroll right">&gt;</button>
</div></div></div></div><div id="pg-2547-3"  class="panel-grid panel-no-style" ><div id="pgc-2547-3-0"  class="panel-grid-cell" ><div id="panel-2547-3-0-0" class="so-panel widget widget_newsletter_chopok_widget panel-first-child panel-last-child" data-index="4" ><style>
    .dynamic-block__newsletter .dynamic-block-center-line__content p {
        margin-bottom: 10px;
    }
    /* @media screen and (min-width: 991px) {
        .dynamic-block-center-line.dynamic-block__newsletter {
            height: 60vh;
        }
    } */
    @media screen and (max-width: 991px) {
        .dynamic-block-center-line.dynamic-block__image-right.dynamic-block__newsletter {
            min-width: 100vw;
            left: 50%;
            transform: translate(-50%, 0);
            flex-direction: column;
        }        
    }


    .btn-form {
        position: absolute !important;
        bottom: 0;
        left: 100%;
    }

    .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content {
        background-color: var(--light-project);
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form {
        z-index: 2;
        position: relative;
        
        margin-top: 15px;
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form input {
        border: none;
        min-height: 50px;
        background-color: var(--white);
        width: 100%;
        height: 65px;
        padding-left: 15px;
        font-size: 18px;
    }

    .newsletter-title {
        font-size: 2.7vw;
        font-weight: 500;
    }
    @media screen and (max-width: 991px) {
        .newsletter-title {
            font-size: 6vw;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content--wrapper {
            margin: 10% auto 0% !important;
            text-align: center;
        }

        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images {
            min-height: 30vh;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images .img-wrapper {
            height: 30vh !important;
        }

        .btn-form {
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .widget.widget_newsletter_chopok_widget {
            margin-bottom: 0 !important;
        }
    }
    @media screen and (max-width: 479px) {
        .newsletter-title {
            font-size: 11vw;
        }
    }

    .dynamic-block_newsletter {
        opacity: 0;
        transform: scale(0.1); /* Začína veľmi malý */
    }

    .ec-v-form-input input[type="checkbox"] + label::before {
        border: 2px solid #333 !important;
    }

    @media (max-width: 991px) {
        .ec-v-form-column div:last-child {
            top: -30px;
            text-align: left;
        }
    }
</style>

<div class="dynamic-block-center-line dynamic-block__image-right dynamic-block__newsletter">

    <div class="dynamic-block-center-line__content">
        <div class="dynamic-block-center-line__content--wrapper" >
                            <h3 class="h3 newsletter-title">News and special offers</h3>
            
            <div class="ecomail-form__wrapper">
                                    <!-- EN form Ecomail -->
                    <script>
                        (function (w,d,s,o,f,js,fjs) {
                            w['ecm-widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                            js.id = '8-0ff8f206695a872edfb6fade7b6458ba'; js.dataset.a = 'hotelchopok'; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                        }(window, document, 'script', 'ecmwidget', 'https://d70shl7vidtft.cloudfront.net/widget.js'));
                    </script>
                    <div id="f-8-0ff8f206695a872edfb6fade7b6458ba"></div>

                
            </div>
        </div>
    </div>
    
    <div class="dynamic-block-center-line__images ">
                    <div class="img-wrapper img-wrapper__up"
                style="background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/66b5fa7b072c3687d4279d86_F-10.jpg');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 100%;
                    height: 100%;
                    ">
            </div>
            </div>

</div>
</div></div></div></div><p>Článok <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/">Romantic stay for two</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Ladies ride</title>
		<link>https://www.hotelchopok.sk/en/stays/ladies-getaway/</link>
		
		<dc:creator><![CDATA[Jiří Kolínský]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 15:29:42 +0000</pubDate>
				<guid isPermaLink="false">https://www.hotelchopok.sk/pobyty/ladies-getaway/</guid>

					<description><![CDATA[<p>This stay is ideal for ladies who want to spend time together and enjoy a wellness experience in luxurious surroundings. Whether you're craving a break from the stress of everyday life or a time of laughter together, the Ladies' Ride package will give you everything you need to revitalise your body and soul.</p>
<p>Článok <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/">Ladies ride</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="pl-2549"  class="panel-layout" ><div id="pg-2549-0"  class="panel-grid panel-has-style" ><div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-2549-0" id="hero-wrapper" data-stretch-type="full-width-stretch" ><div id="pgc-2549-0-0"  class="panel-grid-cell" ><div id="panel-2549-0-0-0" class="so-panel widget widget_sow-hero panel-first-child panel-last-child" data-index="0" ><div class="hero-img panel-widget-style panel-widget-style-for-2549-0-0-0" id="hero-img" ><div
			
			class="so-widget-sow-hero so-widget-sow-hero-default-844de1f37420-2549 so-widget-fittext-wrapper"
			 data-fit-text-compressor="0.85"
		>				<div class="sow-slider-base" style="display: none" tabindex="0">
					<ul
					class="sow-slider-images"
					data-settings="{&quot;pagination&quot;:true,&quot;speed&quot;:400,&quot;timeout&quot;:8000,&quot;paused&quot;:false,&quot;pause_on_hover&quot;:false,&quot;swipe&quot;:true,&quot;nav_always_show_desktop&quot;:&quot;&quot;,&quot;nav_always_show_mobile&quot;:&quot;&quot;,&quot;breakpoint&quot;:&quot;780px&quot;,&quot;unmute&quot;:false,&quot;anchor&quot;:null}"
										data-anchor-id=""
				>		<li class="sow-slider-image  sow-slider-image-cover" style="visibility: visible;;background-color: #333333" >
					<div class="sow-slider-image-container">
			<div class="sow-slider-image-wrapper">
				<h1 style="text-align: center">Ladies ride</h1>
			</div>
		</div>
		<div class="sow-slider-image-overlay sow-slider-image-cover" style="opacity: 0.6;background-image: url(https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_119.webp)"  ></div>		</li>
		</ul>				<ol class="sow-slider-pagination">
											<li><a href="#" data-goto="0" aria-label="Display slide 1"></a></li>
									</ol>

				<div class="sow-slide-nav sow-slide-nav-next">
					<a href="#" data-goto="next" aria-label="Next slide" data-action="next">
						<em class="sow-sld-icon-thin-right"></em>
					</a>
				</div>

				<div class="sow-slide-nav sow-slide-nav-prev">
					<a href="#" data-goto="previous" aria-label="Previous slide" data-action="prev">
						<em class="sow-sld-icon-thin-left"></em>
					</a>
				</div>
				</div></div></div></div></div></div></div><div id="pg-2549-1"  class="panel-grid panel-no-style" ><div id="pgc-2549-1-0"  class="panel-grid-cell" ><div id="panel-2549-1-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="1" ><div
			
			class="so-widget-sow-editor so-widget-sow-editor-base"
			
		><h3 class="widget-title">Dear ladies, treat yourself to a wellness stay for women - relax with a FACEDERMA facial wellness treatment, delicious and healthy food and relax in the sauna world. And all this under Chopok in the beautiful surroundings of the Low Tatras.  </h3>
<div class="siteorigin-widget-tinymce textwidget">
	<p>&nbsp;</p>
<h3>What experiences you can look forward to:</h3>
<ul>
<li>1 x FACEDERMA - facial cosmetic wellness treatment (50 min.)</li>
<li>Prosecco 0,75 l in the room</li>
<li>1 x "Sex on the beach" drink per person at the bar</li>
<li>bowling (60 min.)</li>
<li>1 x welcome drink per person</li>
<li>unlimited access to the pool and sauna world DANCER</li>
<li>unlimited access to fitness</li>
<li>stylish and spacious rooms</li>
<li>experiential gastronomy /buffet breakfast, served dinner/</li>
</ul>
<p>&nbsp;</p>
<p>You can claim a holiday allowance from your employer for all our stays.</p>
</div>
</div></div></div><div id="pgc-2549-1-1"  class="panel-grid-cell" ><div id="panel-2549-1-1-0" class="so-panel widget widget_form_top_offer_widget panel-first-child panel-last-child" data-index="2" ><style>
    /* 
    .input-visitor::before {
        min-width: 30px !important;
        height: 100% !important;
    }
    .input-date::before {
        min-width: 22px !important;
        height: 100% !important;
    } */
    /* 
    #rezervacia-form .btn.btn-yellow,
    #rezervacia-form .btn span {
        max-width: fit-content !important;
    } */
    @media screen and (max-width: 480px) {
        #rezervacia-form .btn.btn-yellow,
        #rezervacia-form .btn span {
            max-width: 100%;
        }
    }

    .booking-engine-container_horizontal {
        background-color: var(--light-project); /* Light background color */
        padding: 30px 0 25px;
        width: 90%;
        max-width: 1440px;
        margin: 0 auto; /* Center the form */
        margin-top: -104px;
        z-index: 99;
        position: relative;
    }
    .booking-engine-container_horizontal > div {
        width: 90%;
        margin: 0 auto;
    }

    .booking-engine-container_horizontal form {
        display: flex;
        flex-wrap: nowrap;
    }

    .booking-engine-container_horizontal label {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        color: var(--text); /* Dark text color */
        position: absolute;
        top: -15px;
        padding-top: 10px;
    }

    .input-wrapper.input-visitor.label-visible label {
        display: block;
    }

    .booking-engine-container_horizontal input[type="text"],
    .booking-engine-container_horizontal input[type="number"] {
        width: 100%;
        font-size: 14px;
        color: var(--text);
        background-color: var(--white);
        transition: border-color 0.3s ease;

        background: transparent;
        border: none;
        border-radius: 0 !important;

        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);

        height: 20px;
        width: 100%;
    }
    .booking-engine-container_horizontal input[type="number"].vek-input {
        border: none;
    }
    .booking-engine-container_horizontal input[name="promocode"] {
        border: none;
    }

    .booking-engine-container_horizontal input[type="text"]:focus,
    .booking-engine-container_horizontal input[type="number"]:focus {
        border-color: var(--project); /* Highlight color when focused */
        outline: none;
    }

    .booking-engine-container_horizontal a {
        display: block;
        margin-top: 20px;
        color: var(--white);
        text-align: center;
        font-size: 14px;
        text-decoration: none;
    }

    .booking-engine-container_horizontal a:hover {
        text-decoration: underline;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 500px) {
        .booking-engine-container_vertical {
            padding: 15px;
        }

        .booking-engine-container_vertical input,
        .booking-engine-container_vertical button {
            font-size: 13px;
        }
    }


    .booking-engine-container_horizontal button span {
        margin: 0 auto;
    }

    .booking-engine-container_horizontal .form-post-contact-wrapper {
        display: flex;
        flex-direction: row;
        /* align-items: flex-start; */
        justify-content: center;
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
            align-items: center;
        }
    }

    .booking-engine-container_vertical a {
        text-align: left;
        box-sizing: border-box;
        white-space: normal;
        height: 45px;
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 500;

        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .booking-engine-container_vertical a span {
        padding: 0;
    }

    .booking-engine-container_horizontal .input-wrapper {
        position: relative;
        height: 65px;
        flex: 1;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    .booking-engine-container_vertical .input-wrapper::before {
        content: url(); /* Tvoje URL ikony */
        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(0);
        padding-right: 10px;
    }

    .input-hotel label {
        font-size: 16px;
        font-weight: 500;
        position: relative;
    }
    .input-hotel select {
        border: none;
        background: transparent;
        width: fit-content;
        cursor: pointer;
        padding-right: 20px;
        border-right: 1px solid var(--text);
    }

    .input-wrapper select {
        -webkit-appearance: none; /* Pre Chrome, Safari, Edge */
        -moz-appearance: none; /* Pre Firefox */
        appearance: none; /* Štandardné skrytie */
        background: transparent; /* Priehľadné pozadie */
        padding-right: 30px; /* Priestor pre vlastnú ikonu */
    }

    .input-wrapper.input-hotel {
        position: relative;
        /* display: inline-block; */
    }
    .input-wrapper.input-hotel::after {
        content: '';
        background: transparent
         url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5H7z%22%2F%3E%3C%2Fsvg%3E')
         no-repeat center center;
        background-size: 100%;
        position: absolute;
        right: 25px; /* Vzdialenosť od pravej strany */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Nezasahuje do kliknutia na select */
        width: 22px;
        height: 22px;
    }


    @media screen and (max-width: 1280px) {
        .booking-engine-container_horizontal form {
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
    }
    @media screen and (max-width: 991px) {
        .booking-engine-container_horizontal {
            margin-top: 0;
            width: 100vw;
        }
        
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 50%;
            border-bottom: 1px solid var(--text);
        }
        .booking-engine-container_horizontal .input-wrapper.input-present{
            flex-basis: 100%;
        }
        
        .booking-engine-container_horizontal label {
            top: -10px;
        }
        .booking-engine-container_horizontal button {
            flex-basis: 100%;
        }
        .input-hotel select,
        .booking-engine-container_horizontal input[type="text"],
        .booking-engine-container_horizontal input[type="number"] {
            border-right:  none;
        }
        .booking-engine-container_horizontal button {
            margin-top: 30px;
        }
    }
    @media screen and (max-width: 767px) {
        .booking-engine-container_horizontal .form-post-contact-wrapper {
            flex-direction: column;
            margin-top: 25px;
        }
        .booking-engine-container_horizontal .form-post-contact-wrapper a {
            margin-top: 0;
            height: 45px;
        }
    }
    @media screen and (max-width: 479px) {
        .booking-engine-container_horizontal .input-wrapper {
            flex-basis: 100%;
        }
    }

    /* Flash messages */
    
    .flash-message-wrapper {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -10px);
        z-index: 9;
    }
    .flash-message-wrapper > div {
        display: none;
        font-size: 13px;
        width: 200px;
        font-weight: 500;
        border-radius: 15px;
        padding: 9px;
       
        color: var(--white);
    }
    .childrens-error {
        background: var(--project);
    }

    .childrens-flash {
        margin-top: 7px;
        background: var(--green);
    }


    /* KALENDAR NOVY */
    /* LEN NOVÉ ŠTÝLY PRE KALENDÁR MODAL - NEOVPLYVŇUJÚ TVOJE ŠTÝLOVANIE */
    .children-modal,
    .calendar-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .children-popup,
    .calendar-popup {
        width: 90vw;
        max-width: 350px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        overflow: hidden;
    }

    .calendar-header {
        background: var(--project);
        color: white;
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-year {
        font-size: 18px;
        font-weight: 600;
    }

    .nav-button {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        transition: background 0.2s;
    }

    .nav-button:hover {
        background: rgba(255,255,255,0.2);
    }

    .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background: #f8f8f8;
        border-bottom: 1px solid #eee;
    }

    .weekday {
        padding: 12px 0;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #666;
    }

    .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background: #eee;
        padding: 1px;
    }

    .day {
        background: white;
        border: none;
        padding: 15px 0;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.2s;
        position: relative;
    }

    .day:hover {
        background: #f0f0f0;
    }

    .day.other-month {
        color: #ccc;
        background: #fafafa;
    }

    .day.selected-start {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.selected-end {
        background: var(--project) !important;
        color: white;
        font-weight: 600;
    }

    .day.in-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.hover-range {
        background: var(--light-project-2) !important;
        color: var(--purple-ciary);
    }

    .day.today {
        position: relative;
    }

    .day.today::after {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--project);
        border-radius: 50%;
    }

    .calendar-footer {
        padding: 20px;
        background: #f9f9f9;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-footer .button-wrapper {
        width: 50%;
        display: flex;
        justify-content: right;
        gap: 5px;
    }

    .confirm-button {
        background: var(--light-project-2);
        color: var(--text);
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
    }

    .confirm-button:hover {
        background: var(--purple);
        color: var(--white)

    }

    .confirm-button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .cancel-button {
        background: none;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        padding: 10px;
        color: var(--gray);
        box-shadow: none !important
    }

    .date-range-display {
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: lighter;
        color: rgba(0, 0, 0, 0.3);
        background: transparent;
        border: none;
        padding-top: 0;
        padding-left: 0;
        padding-right: 20px;
        padding-bottom: 0;
        margin-right: 0;
        border-right: 1px solid var(--text);
        height: 20px;
        width: 100%;
    }

    /* ŠTÝLY PRE TLAČIDLÁ */
    .btn {
        display: inline-block;
        padding: 12px 24px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        transition: all 0.3s ease;
    }

    .btn-yellow {
        background-color: #f4c430;
        color: #333;
    }

    .btn-yellow:hover {
        background-color: #e6b82a;
    }

    /* 
    .btn-transparent {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--text);
    } */

    .btn.btn-transparent:hover span {
        background: transparent !important;
        color: var(--white);
    }

    .selection-info {
        color: var(--text);
        font-size: 1rem;
        font-weight: bold;
    }

    #dateRangeDisplay {
        white-space: nowrap;
    }

    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    @media screen and (max-width: 991px) {
        .input-hotel select,
        .booking-engine-container_horizontal select,
        .booking-engine-container_horizontal input[type="text"], 
        .booking-engine-container_horizontal input[type="number"],
        .date-range-display {
            border-right: none !important;
        }
    }

    .booking-engine-container_horizontal select {
        font-size: 14px;
        font-weight: bold;
        color: black;
        background: transparent;
        border: none;
        padding-left: 0;
        padding-right: 20px;
        border-right: 1px solid var(--text);
        cursor: pointer;
        appearance: none; /* odstráni natívny vzhľad */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: none; /* fallback ak nepoužiješ ::after */
    }
    .booking-engine-container_horizontal select option {
        font-weight: normal;
        color: var(--text);
    }

    .input-wrapper.active span,
    .input-wrapper.active input,
    .input-wrapper.active select option[selected] {
        font-weight: bold !important;
        color: black !important;
    }


    #booking-button.btn-yellow:hover {
        background: unset;
    }
    #booking-button.btn-yellow:hover span {
        background: var(--project);
    }

    /* Side FORM */
    .single .booking-engine-container_horizontal,
    .single-room .booking-engine-container_horizontal,
    .single-stay .booking-engine-container_horizontal {
        max-width: 400px;
    }
    .single .booking-engine-container_horizontal form,
    .single-room .booking-engine-container_horizontal form,
    .single-stay .booking-engine-container_horizontal form {
        flex-direction: column;
    }
    .single .booking-engine-container_horizontal .input-wrapper,
    .single-room .booking-engine-container_horizontal .input-wrapper,
    .single-stay .booking-engine-container_horizontal .input-wrapper {
        border-bottom: 1px solid black;
        padding-bottom: 35px;
        margin-bottom: 35px;
    }
    .single .date-range-display,
    .single-room .date-range-display,
    .single-stay .date-range-display,
    .single .input-hotel select,
    .single-room .input-hotel select,
    .single-stay .input-hotel select {
        border: none !important;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .single .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-room .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child,
    .single-stay .booking-engine-container_horizontal .form-post-contact-wrapper a:last-child {
        margin-top: 0;
    }
    .single .input-wrapper.input-hotel::after,
    .single-room .input-wrapper.input-hotel::after,
    .single-stay .input-wrapper.input-hotel::after {
        transform: translateY(-30px);
    }
    #rezervacia-form h5 {
        display: none;
    }
    .single #rezervacia-form h5,
    .single-room #rezervacia-form h5,
    .single-stay #rezervacia-form h5 {
        display: block;
        margin-bottom: 33px;
    }
</style>

<script>
    /* <![CDATA[ */

    
    // function updateHotelChoice(selectElement) {
    //     const adresa_chopok = "";
    //     const adresa_apartmany = "";

    //     const selectedValue = jQuery(selectElement).val();
    //     const form = jQuery(selectElement).closest("form");

    //     if (selectedValue == "0") {
    //         form.attr("action", adresa_chopok);
    //     } else if (selectedValue == "1") {
    //         form.attr("action", adresa_apartmany);
    //     }
    // } 

    /* ]]&gt; */


    function updateFieldClasses() {
        // DÁTUMY
        const dateDisplay = document.getElementById('dateRangeDisplay');
        const dateWrapper = dateDisplay.closest('.input-wrapper');
        if (dateDisplay.textContent.trim() !== "Vyberte termín") {
            dateWrapper.classList.add('active');
        } else {
            dateWrapper.classList.remove('active');
        }

        // DETI
        const childrenDisplay = document.getElementById('childrens');
        const childrenWrapper = childrenDisplay.closest('.input-wrapper');

        const value = childrenDisplay.textContent.trim();

        // Regex: povoľuje formát ako "1", "1,2", "1, 2", "2, 14", atď.
        const containsAge = /^\d+(,\s*\d+)*$/.test(value);

        if (containsAge) {
            childrenWrapper.classList.add('active');
        } else {
            childrenWrapper.classList.remove('active');
        }


        // DOSPELÍ
        const adultsDisplay = document.getElementById('adultsDisplay');
        const adultsWrapper = adultsDisplay.closest('.input-wrapper');

        if (adultsDisplay) {
            // Získa len čísla (napr. "2" alebo "👤 2", aj s NBSP)
            const digitsOnly = adultsDisplay.textContent.replace(/[^\d]/g, '').trim();
            const adultCount = parseInt(digitsOnly, 10);

            if (!isNaN(adultCount) && adultCount > 0) {
                adultsWrapper.classList.add('active');
            } else {
                adultsWrapper.classList.remove('active');
            }
        }


        // INPUTY (dospelí, promokód atď.)
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            const wrapper = input.closest('.input-wrapper');
            if (!wrapper) return;

            if (input.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });

        // SELECT (hotelchoice)
        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            const wrapper = select.closest('.input-wrapper');
            if (!wrapper) return;

            if (select.value && select.value.trim() !== "") {
                wrapper.classList.add('active');
            } else {
                wrapper.classList.remove('active');
            }
        });
    }

    document.addEventListener("DOMContentLoaded", () => {
        updateFieldClasses(); // inicializácia

        // Dynamická aktualizácia pri zmene
        document.querySelectorAll('.booking-engine-container_horizontal input[type="number"], .booking-engine-container_horizontal input[type="text"]').forEach(input => {
            input.addEventListener('input', updateFieldClasses);
        });

        document.querySelectorAll('.booking-engine-container_horizontal select').forEach(select => {
            select.addEventListener('change', updateFieldClasses);
        });
    });
</script>


<div class="booking-engine-container_horizontal">
    <div>
        <form id="rezervacia-form" 
            method="POST">

            <h5>Check availability</h5>

            <div class="input-wrapper input-hotel">
                <select name="hotelchoice"><option value="52">Wellness Hotel Chopok ****</option><option value="617">Apartments and Studios Lúčky</option></select>            </div>

            <!-- UPRAVENÝ INPUT PRE DÁTUMY - TERAZ JEDEN NAMIESTO DVOCH -->
            <div class="input-wrapper input-date">
                <!-- <label for="dateRange">Date of stay</label> -->
                <span class="date-range-display" id="dateRangeDisplay" onclick="openCalendar()">Select dates</span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="adults">Number of guests:</label> -->
                <!-- <input placeholder="Adults" 
                    type="number" id="adults" name="1_adultCount" class="booking-input" min="1" value="" required> -->
                <span id="adultsDisplay" class="booking-input date-range-display" onclick="openAdultsModal()">
                    Adults                </span>
            </div>

            <div class="input-wrapper input-visitor">
                <!-- <label for="childrens">Children's age::</label> -->
                <span 
                    id="childrens" 
                    class="booking-input date-range-display" 
                    onclick="openChildrenModal()"
                >
                    Children                </span>
            </div>

            <div class="input-wrapper input-present">
                <!-- <label for="promo">Promo code:</label> -->
                <input placeholder="Promo code" 
                    type="text" id="promo" name="promocode" class="booking-input">
            </div>

            <button id="booking-button" type="button" class="btn btn-yellow">
                <span>Check the price</span>
            </button>

            <!-- HIDDEN INPUTY S PÔVODNÝMI NAME ATRIBÚTMI -->
            <input type="hidden" id="arrival" name="dateFrom" class="booking-input" required>
            <input type="hidden" id="departure" name="dateTo" class="booking-input" required>

                        <input type="hidden" id="tr-data__r" name="redirect" value="0">
            <input type="hidden" id="tr-data__l" name="lang" value="en">

        </form>


        <!-- Optional link to the contact information or other services -->
        <div class="form-post-contact-wrapper">
            <a href="tel:+421911611386" title="Rezervácie Hotel Chopok telefón" class="btn btn-transparent">
                <span class="post-icon icon-tel">+421 / 911 611 386</span>
            </a>
            <a href="mailto:recepcia@hotelchopok.sk" title="Reception Hotel Chopok mail" class="btn btn-transparent">
                <span class="post-icon icon-mail">recepcia@hotelchopok.sk</span>
            </a>
        </div>
    </div>
</div>

<!-- KALENDÁR MODAL -->
<div class="calendar-modal" id="calendarModal" onclick="closeCalendarOnBackdrop(event)">
    <div class="calendar-popup">
        <div class="calendar-header">
            <button class="nav-button" onclick="changeMonth(-1)">‹</button>
            <div class="month-year" id="monthYear"></div>
            <button class="nav-button" onclick="changeMonth(1)">›</button>
        </div>

        <div class="weekdays">
            <div class="weekday">Mon</div>
            <div class="weekday">Tue</div>
            <div class="weekday">Wed</div>
            <div class="weekday">Thu</div>
            <div class="weekday">Fri</div>
            <div class="weekday">Sat</div>
            <div class="weekday">Sun</div>
        </div>

        <div class="days-grid" id="daysGrid"></div>

        <div class="calendar-footer">
            <div class="selection-datums"></div>
                        <div class="button-wrapper">
                <button class="cancel-button" onclick="closeCalendar()"><span class="icon">✖</span></button>
                <button class="confirm-button" id="confirmButton" onclick="confirmDates()" disabled>
                    Confirm                </button>
            </div>
        </div>
    </div>
    <script>
        // KALENDÁR LOGIKA
        let currentDate = new Date();
        let selectedStart = null;
        let selectedEnd = null;
        let isSelectingEnd = false;

        const monthNames = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];

        const monthNamesShort = [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ];

        function formatDate(date) {
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        }

        function formatDateForDisplay(date) {
            const day = date.getDate();
            const monthShort = monthNamesShort[date.getMonth()];
            return `${day} ${monthShort}`;
        }

        function openCalendar() {
            document.getElementById('calendarModal').style.display = 'flex';
            renderCalendar();
        }

        function closeCalendar() {
            document.getElementById('calendarModal').style.display = 'none';
        }

        function closeCalendarOnBackdrop(event) {
            if (event.target === event.currentTarget) {
                closeCalendar();
            }
        }

        function renderCalendar() {
            const monthYear = document.getElementById('monthYear');
            const daysGrid = document.getElementById('daysGrid');

            monthYear.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;

            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const firstDayOfWeek = (firstDay.getDay() + 6) % 7;

            daysGrid.innerHTML = '';

            const today = new Date();
            today.setHours(0, 0, 0, 0);

            // Pridáme prázdne bunky pre dni pred 1. dňom mesiaca
            for (let i = 0; i < firstDayOfWeek; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            // Pridáme LEN dni aktuálneho mesiaca
            for (let day = 1; day <= lastDay.getDate(); day++) {
                const cellDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);

                const dayButton = document.createElement('button');
                dayButton.className = 'day';
                dayButton.textContent = day;

                if (cellDate.getTime() === today.getTime()) {
                    dayButton.classList.add('today');
                }

                if (cellDate < today) {
                    dayButton.disabled = true;
                    dayButton.style.color = '#ccc';
                    dayButton.style.cursor = 'not-allowed';
                }

                // Označenie vybraných dátumov - LEN ak sú v aktuálnom mesiaci
                if (selectedStart && 
                    cellDate.getTime() === selectedStart.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-start');
                }
                
                if (selectedEnd && 
                    cellDate.getTime() === selectedEnd.getTime() &&
                    cellDate.getMonth() === currentDate.getMonth() &&
                    cellDate.getFullYear() === currentDate.getFullYear()) {
                    dayButton.classList.add('selected-end');
                }

                // Označenie rozsahu - LEN ak sú oba dátumy v aktuálnom mesiaci alebo špecifické prípady
                if (selectedStart && selectedEnd) {
                    // Len ak je aktuálny deň medzi start a end a všetko je v tom istom mesiaci
                    if (cellDate > selectedStart && cellDate < selectedEnd) {
                        // EXTRA kontrola - označuj LEN ak sú start a end v rámci tohto mesiaca alebo logicky pokračujú
                        const startInThisMonth = selectedStart.getMonth() === currentDate.getMonth() && selectedStart.getFullYear() === currentDate.getFullYear();
                        const endInThisMonth = selectedEnd.getMonth() === currentDate.getMonth() && selectedEnd.getFullYear() === currentDate.getFullYear();
                        
                        if (startInThisMonth && endInThisMonth) {
                            // Oba v aktuálnom mesiaci
                            dayButton.classList.add('in-range');
                        } else if (startInThisMonth && !endInThisMonth && selectedEnd > cellDate) {
                            // Start v aktuálnom, end v budúcom - označuj od start do konca mesiaca
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && endInThisMonth && selectedStart < cellDate) {
                            // Start v minulom, end v aktuálnom - označuj od začiatku mesiaca po end
                            dayButton.classList.add('in-range');
                        } else if (!startInThisMonth && !endInThisMonth && selectedStart < cellDate && selectedEnd > cellDate) {
                            // Start v minulom, end v budúcom - označuj celý mesiac
                            dayButton.classList.add('in-range');
                        }
                    }
                }

                if (!dayButton.disabled) {
                    dayButton.onclick = () => selectDate(cellDate);
                    dayButton.onmouseenter = () => highlightRange(cellDate);
                    dayButton.onmouseleave = () => clearHoverRange();
                }
                
                daysGrid.appendChild(dayButton);
            }

            // Pridáme prázdne bunky na koniec len ak je potrebné pre grid (LEN neviditeľné)
            const totalCells = daysGrid.children.length;
            const remainingCells = 42 - totalCells;
            for (let i = 0; i < remainingCells; i++) {
                const emptyDiv = document.createElement('div');
                emptyDiv.className = 'day empty';
                emptyDiv.style.visibility = 'hidden';
                daysGrid.appendChild(emptyDiv);
            }

            updateConfirmButton();
            updateSelectionDisplay();
        }

        function selectDate(date) {
            if (date < new Date().setHours(0, 0, 0, 0)) return;

            if (!selectedStart) {
                // Prvý klik - vyber start dátum
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            } else if (isSelectingEnd && !selectedEnd) {
                // Druhý klik - vyber end dátum
                if (date <= selectedStart) {
                    // Ak klikneme na skorší dátum, resetuj start
                    selectedStart = new Date(date);
                    selectedEnd = null;
                } else {
                    // Normálny výber end dátumy
                    selectedEnd = new Date(date);
                    isSelectingEnd = false;
                }
            } else {
                // Reset - začni odznova
                selectedStart = new Date(date);
                selectedEnd = null;
                isSelectingEnd = true;
            }

            renderCalendar();
        }

        function updateSelectionDisplay() {
            // Aktualizuj info v kalendári ak máš vybrané dátumy
            const footerInfo = document.querySelector('.calendar-footer .selection-info');
            if (footerInfo) footerInfo.remove();
            
            if (selectedStart) {
                const footer = document.querySelector('.selection-datums');
                const info = document.createElement('div');
                info.className = 'selection-info';
                
                if (selectedEnd) {
                    info.textContent = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
                } else {
                    info.textContent = `Start: ${formatDateForDisplay(selectedStart)}`;
                }
                
                footer.insertBefore(info, footer.firstChild);
            }
        }

        function highlightRange(hoverDate) {
            if (!selectedStart || selectedEnd || !isSelectingEnd) return;
            if (hoverDate < new Date().setHours(0, 0, 0, 0)) return;
            if (hoverDate <= selectedStart) return;

            clearHoverRange();

            // Hover efekt funguje len v aktuálnom mesiaci
            const allDays = document.querySelectorAll('.day');
            allDays.forEach(day => {
                if (day.style.visibility === 'hidden') return;
                
                const dayText = parseInt(day.textContent);
                if (isNaN(dayText)) return;
                
                const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayText);
                
                // Ak je start v inom mesiaci, zvýrazni od začiatku aktuálneho mesiaca
                if (selectedStart < new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)) {
                    if (dayDate <= hoverDate) {
                        day.classList.add('hover-range');
                    }
                }
                // Normálny hover v rámci mesiaca
                else if (dayDate > selectedStart && dayDate < hoverDate) {
                    day.classList.add('hover-range');
                }
            });
        }

        function clearHoverRange() {
            const hoverDays = document.querySelectorAll('.hover-range');
            hoverDays.forEach(day => {
                day.classList.remove('hover-range');
            });
        }

        function changeMonth(direction) {
            currentDate.setMonth(currentDate.getMonth() + direction);
            renderCalendar();
        }

        function updateConfirmButton() {
            const confirmButton = document.getElementById('confirmButton');
            confirmButton.disabled = !(selectedStart && selectedEnd);
        }

        function confirmDates() {
            if (!selectedStart || !selectedEnd) return;

            // Aktualizácia hidden inputov
            document.getElementById('arrival').value = formatDate(selectedStart);
            document.getElementById('departure').value = formatDate(selectedEnd);

            // Aktualizácia zobrazenia
            const displayText = `${formatDateForDisplay(selectedStart)} - ${formatDateForDisplay(selectedEnd)}`;
            document.getElementById('dateRangeDisplay').textContent = displayText;

            closeCalendar();
            updateFieldClasses();
        }
    </script>
</div>

<!-- Modal Dospelí -->
<div class="children-modal" id="adultsModal" onclick="closeAdultsOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of adults:</p>

        <div class="deti-counter">
            <button type="button" id="minus-adults">−</button>
            <input type="number" id="adults-count-input" min="1" max="10" value="2" class="vek-input" />
            <button type="button" id="plus-adults">+</button>
        </div>

        <div id="adults-error" style="display:none; color: red; margin-top:10px;">
            Minimum is 1, maximum is 10.        </div>

        <div style="text-align:right; margin-top: 15px;">
            <button type="button" class="cancel-button" onclick="closeAdultsModal()"><span class="icon">✖</span></button>
            <button type="button" class="confirm-button" onclick="saveAdults()">Confirm</button>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const adultsModal = document.getElementById("adultsModal");
            const plusBtn = document.getElementById("plus-adults");
            const minusBtn = document.getElementById("minus-adults");
            const input = document.getElementById("adults-count-input");
            const displaySpan = document.getElementById("adultsDisplay");
            const errorBox = document.getElementById("adults-error");
            const form = document.getElementById("rezervacia-form");

            let adultsCount = 2;
            const minAdults = 1;
            const maxAdults = 10;

            window.openAdultsModal = () => {
                adultsModal.style.display = "flex";
                input.value = adultsCount;
                errorBox.style.display = "none";
            };

            window.closeAdultsModal = () => {
                adultsModal.style.display = "none";
            };

            window.closeAdultsOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                    closeAdultsModal();
                }
            };

            window.showAlertModal = function(message) {
                const modal = document.getElementById("alertModal");
                const text = document.getElementById("alertModalText");

                text.textContent = message;
                modal.style.display = "flex";
            };

            window.closeAlertModal = function() {
                const modal = document.getElementById("alertModal");
                modal.style.display = "none";
            };

            window.closeAlertOnBackdrop = function(event) {
                if (event.target === event.currentTarget) {
                    closeAlertModal();
                }
            };


            plusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val < maxAdults) {
                    val++;
                    input.value = val;
                }
            });

            minusBtn.addEventListener("click", () => {
                let val = parseInt(input.value) || 0;
                if (val > minAdults) {
                    val--;
                    input.value = val;
                }
            });

            input.addEventListener("input", () => {
                let val = parseInt(input.value) || 0;
                if (val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                } else {
                    errorBox.style.display = "none";
                }
            });

            window.saveAdults = () => {
                let val = parseInt(input.value);
                if (isNaN(val) || val < minAdults || val > maxAdults) {
                    errorBox.style.display = "block";
                    return;
                }

                adultsCount = val;

                // Odstrániť predchádzajúci input ak existuje
                form.querySelectorAll("input[name='1_adultCount']").forEach(el => el.remove());

                const hiddenInput = document.createElement("input");
                hiddenInput.type = "hidden";
                hiddenInput.name = "1_adultCount";
                hiddenInput.value = adultsCount;
                form.appendChild(hiddenInput);

                // Aktualizovať span
                displaySpan.textContent = adultsCount;

                closeAdultsModal();
                updateFieldClasses(); // aktualizuje .active class
            };
        });
    </script>
</div>

<!-- ALERT MODAL (napr. pre "Zadajte počet dospelých") -->
<div class="children-modal" id="alertModal" onclick="closeAlertOnBackdrop(event)">
    <div class="children-popup">
        <p id="alertModalText" style="margin-bottom: 15px;">Tu bude hláška</p>
        <div style="text-align: right;">
            <button type="button" class="confirm-button" onclick="closeAlertModal()">OK</button>
        </div>
    </div>
</div>


<!-- Pocet a vek detí -->
<div class="children-modal" id="childrenModal" onclick="closeChildrenOnBackdrop(event)">
    <div class="children-popup">
        <p style="margin-bottom: 0 !important;">Number of children:</p>

        <div class="deti-counter">
            <button type="button" id="minus-btn">−</button>
            <span id="deti-count">0</span>
            <button type="button" id="plus-btn">+</button>
        </div>

        <p style="margin: 0 !important;">Children's age:</p>
        <div id="vek-deti-wrapper"></div>

        <div id="children-error" style="display:none; color: red; margin-top:10px;">
            Maximálny vek dieťaťa je 13 rokov.        </div>

        <div style="text-align:right; margin-top: 15px;">
        <!-- <button type="button" class="btn btn-transparent" onclick="closeChildrenModal()">Cancel</button> -->
        <button type="button" class="cancel-button" onclick="closeChildrenModal()"><span class="icon">✖</span></button>
        <button type="button" class="confirm-button" onclick="saveChildren()">Confirm</button>
        </div>
    </div>
    <style>
        .children-popup {
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            padding: 20px;
            max-width: 350px;
            width: 90vw;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: inherit;
        }

        .deti-counter {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 500;
        }

        .deti-counter button,
        .deti-counter button:focus {
            background: var(--project);
            border: none;
            color: var(--white);
            width: 32px;
            height: 32px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s ease;

            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
        }

        .deti-counter button:hover {
            background: var(--light-project-2);
        }

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


        #vek-deti-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
        }

        .vek-input {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-weight: bold;
            color: var(--text);
            width: 100%;
            box-sizing: border-box;
            background-color: #f9f9f9;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        .vek-input:focus {
            outline: none;
            border-color: var(--project);
            background-color: #fff;
        }

        /* Tlačidlá v spodnej časti popupu */
        .children-popup .btn {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            background: var(--project);
        }

        .btn-yellow {
            background: var(--project);
            color: white;
            border: none;
        }

        .btn-yellow:hover {
            background: var(--purple);
        }

        /* .btn-transparent {
            background: none;
            color: #666;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        .btn-transparent:hover {
            background: #f0f0f0;
        } */

        .vek-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .vek-input {
            flex: 1;
            padding-right: 30px;
        }

        .delete-vek {
            position: absolute;
            right: 10px;
            background: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            color: var(--light-project-2);
            outline: none;
            border: none;
            box-shadow: none;
        }

        .delete-vek:hover {
            color: var(--text);
            background: none !important;
            box-shadow: none !important;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById('childrenModal');
            const plusBtn = document.getElementById("plus-btn");
            const minusBtn = document.getElementById("minus-btn");
            const countSpan = document.getElementById("deti-count");
            const wrapper = document.getElementById("vek-deti-wrapper");
            const errorBox = document.getElementById("children-error");
            const outputInput = document.getElementById("childrens");

            let detiCount = 0;
            const maxDeti = 10;

            plusBtn.addEventListener("click", () => {
                if (detiCount < maxDeti) {
                detiCount++;
                renderInputs();
                }
            });

            minusBtn.addEventListener("click", () => {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const emptyInputs = inputs.filter(el => el.value.trim() === "");

                if (emptyInputs.length > 0 && detiCount > 0) {
                detiCount--;
                renderInputs();
                }
            });

            function updateButtonStates() {
                const inputs = Array.from(wrapper.querySelectorAll("input"));
                const hasEmpty = inputs.some(el => el.value.trim() === "");

                minusBtn.disabled = detiCount === 0 || !hasEmpty;
                plusBtn.disabled = detiCount >= maxDeti;
            }

            function renderInputs(prefillValues = []) {
                countSpan.textContent = detiCount;

                const currentWrappers = Array.from(wrapper.querySelectorAll(".vek-wrapper"));
                const currentValues = currentWrappers.map(w => w.querySelector("input").value.trim());

                wrapper.innerHTML = "";
                errorBox.style.display = "none";

                const usedValues = prefillValues.length ? prefillValues : currentValues;

                for (let i = 0; i < detiCount; i++) {
                const value = usedValues[i] || "";

                const inputWrapper = document.createElement("div");
                inputWrapper.classList.add("vek-wrapper");

                const input = document.createElement("input");
                input.type = "number";
                input.name = `vek_dieta_${i + 1}`;

                // input.placeholder = `Vek ${i + 1}. dieťaťa`;
                const placeholderTemplate = "Age of child %d.";
                input.placeholder = placeholderTemplate.replace('%d', i + 1);

                input.min = 0;
                input.max = 13;
                input.required = true;
                input.className = "vek-input";
                input.value = value;

                input.addEventListener("input", updateButtonStates);

                const removeBtn = document.createElement("button");
                removeBtn.type = "button";
                removeBtn.innerHTML = "✕";
                removeBtn.className = "delete-vek";
                removeBtn.addEventListener("click", () => {
                    inputWrapper.remove();
                    detiCount--;
                    renderInputs();
                });

                inputWrapper.appendChild(input);
                inputWrapper.appendChild(removeBtn);

                wrapper.appendChild(inputWrapper);
                }

                updateButtonStates();
            }

            window.openChildrenModal = () => {
                modal.style.display = "flex";

                const existing = outputInput.textContent.trim(); // 💥 tu bola chyba (value → textContent)

                if (existing !== "") {
                    const values = existing.split(",").map(v => v.trim());
                    detiCount = values.length;
                    renderInputs(values);
                } else {
                    renderInputs();
                }
            };


            window.closeChildrenModal = () => {
                modal.style.display = "none";
            }

            window.closeChildrenOnBackdrop = (event) => {
                if (event.target === event.currentTarget) {
                closeChildrenModal();
                }
            }

            window.saveChildren = () => {
                const inputs = wrapper.querySelectorAll("input");
                const values = [];

                for (const input of inputs) {
                    const rawVal = input?.value ?? ''; // ochrana pred undefined
                    const val = rawVal.trim();

                    if (val === "") {
                        errorBox.textContent = "Fill in the child’s age.";
                        errorBox.style.display = "block";
                        return;
                    }

                    const parsed = parseInt(val, 10);
                    if (isNaN(parsed) || parsed > 13 || parsed < 0) {
                        errorBox.textContent = "Maximálny vek dieťaťa je 13 rokov.";
                        errorBox.style.display = "block";
                        return;
                    }

                    values.push(parsed);
                }

                // Zobrazenie textu do <span>
                outputInput.textContent = values.join(", ");

                // Aktivuj label len ak nie je prázdny
                const label = document.querySelector("label[for='childrens']");
                if (label) {
                    label.style.display = "block";
                }

                // Vymazanie predchádzajúcich hidden inputov
                document.querySelectorAll("input[name^='1_child']").forEach(el => el.remove());

                // Vloženie 1_childCount a 1_child1...1_child6
                const form = document.getElementById("rezervacia-form");
                const childCountInput = document.createElement("input");
                childCountInput.type = "hidden";
                childCountInput.name = "1_childCount";
                childCountInput.value = values.length;
                form.appendChild(childCountInput);

                for (let i = 0; i < 6; i++) {
                    const childInput = document.createElement("input");
                    childInput.type = "hidden";
                    childInput.name = `1_child${i + 1}`;
                    childInput.value = values[i] !== undefined ? values[i] : -1;
                    form.appendChild(childInput);
                }

                closeChildrenModal();
                updateFieldClasses();
            };

        });
    </script>
</div>

</div></div></div><div id="pg-2549-2"  class="panel-grid panel-no-style" ><div id="pgc-2549-2-0"  class="panel-grid-cell" ><div id="panel-2549-2-0-0" class="so-panel widget widget_stay_list_widget panel-first-child panel-last-child" data-index="3" ><style>
    .stay-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stay-list-wrapper {
        overflow-x: auto;
        scroll-behavior: smooth;
        width: 100%;
        /* max-width: 800px; /* Adjust based on your design */
    }
    .stay-list-wrapper h4 {
        margin: 13px 0 15px;
    }

    .stay-thumbnail {
        aspect-ratio: 1 / 1;
    }

    .stay-list-horizontal {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .stay-list-horizontal li {
        /* margin: 10px;
        padding: 15px; */
        /* background-color: #f4f4f4; */
        /* border: 1px solid #ddd; */
        /* width: 250px; /* Width of each stay item */
        width: 25.4%;
        flex-shrink: 0;
        text-align: left;
        
    }
    .stay-list-horizontal li .stay-thumbnail {
        overflow: hidden;
    }
    .stay-list-horizontal li .stay-thumbnail > div {
        transition: transform 1.2s ease;
    }
    .stay-list-horizontal li:hover .stay-thumbnail > div {
        transform: scale(1.2);
    }
    .stay-list-horizontal li:not(:last-child) {
        margin-right: 40px;
    }
    @media screen and (max-width: 1280px) {
        .stay-list-horizontal li {
            width: 35%;
        }
    }
    @media screen and (max-width: 767px) {
        .stay-list-horizontal li {
            width: 60%;
        }
    }
    @media screen and (max-width: 479px) {
        .stay-list-horizontal li {
            width: 80%;
        } 
    }

    .stay-list-horizontal li a {
        text-decoration: none;
        color: var(--text);
    }


    .stay-thumbnail img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    @media screen and (max-width: 1280px) {
        .stay-thumbnail {
            aspect-ratio: 1 / 1.5;
        }
    }

    .scroll-button {
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        color: var(--text);
        border: none;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        z-index: 10;
        width: 40px;
        border-radius: 50%;
        aspect-ratio: 1;
        background: var(--white);
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--black);
        margin-bottom: 4px;
        font-size: 26px;
        font-weight: 300;

    }

    .scroll-button:hover {
        opacity: 1;
    }

    .scroll-button.left {
        left: -40px;
    }

    .scroll-button.right {
        right: -40px;
    }
    @media screen and (max-width: 479px) {
        .scroll-button.left {
            left: -15px;
        }

        .scroll-button.right {
            right: -15px;
        }
    }

    .scroll-button.disabled {
        display: none;
    }

    .stay-texts-wrapper {
        margin-top: 1vw;
        margin-bottom: 25px;
    }

    .stay-category {
        background-color: var(--light-yellow);
        margin-top: 8px;
        margin-bottom: 10px;
        padding: 9px 15px 10px;
        display: inline-block;
    }
    .stay-category:not(:last-child) {
        margin-right: 10px;
    }

    .info-post-row {
        display: flex;
        align-items: center;
        margin: 25px 0;
    }
    .info-post-row span {
        margin: 0 15px;
    }
    .post-icon {
        display: flex;
        align-items: center;
    }
    /* .post-date::before {
        content: '';
        width: 16px;
        height: 20px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/calendar.png)
            center no-repeat;
        background-size: 100%;
    }
    .post-visitor::before {
        content: '';
        width: 19px;
        height: 22px;
        margin-right: 10px;
        background: transparent
            url(../wp-content/themes/hotel-chopok/assets/images/person.png)
            center no-repeat;
        background-size: 100%;
    } */

    .btn.btn-fake span,
    .btn.btn-fake:hover span {
        color: var(--text) !important;
        padding-left: 0;
        background-color: transparent;
    } 
    .stay-list-horizontal li:hover .btn-fake span {
        text-decoration: underline;
    }
    .btn.btn-fake.btn-icon-dark:hover span::before {
        background: transparent url(./wp-content/uploads/2024/09/btn_arr-dark.png) center center no-repeat;
        background-size: cover;
    }
</style>


<section class="headline-container" style="margin-top: 1vw; margin-bottom: 2vw !important;">
    <h2 class="header-animated" style="color: var(--project);">More attractive offers.</h2>
</section>

<div class="stay-container">
    <button class="scroll-button left" id="left-arrow" aria-label="Scroll left">&lt;</button>
    <div class="stay-list-wrapper">
        <ul class="stay-list-horizontal">
            
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/childrens-day-at-chopok/" 
                        title="Children&#8217;s Day on ChopokZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-hotel-Chopok-leto-rodina-2023_74-1024x478.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Children&#8217;s Day on Chopok</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        29. 05. - 31. 05.                                    </div>
                                </div>

                                <p>Celebrate Children's Day at Chopok and treat your children to an unforgettable experience full of fun and adventure with our favourite Chopik. This weekend will be full of joy, laughter and beautiful memories.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:2;">
                    <a href="https://www.hotelchopok.sk/en/stays/may-weekends-with-animation/" 
                        title="May long weekends with animationsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-34-1024x580.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>May long weekends with animations</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 05. - 03. 05.                                    </div>
                                </div>

                                <p>If you're looking for a place that offers the perfect combination of comfort, first-class wellness, excellent gastronomy and the opportunity to enjoy a fun-filled weekend with family or friends, our May long weekend break is the perfect choice.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:3;">
                    <a href="https://www.hotelchopok.sk/en/stays/summer-family-stays/" 
                        title="Summer Family StaysZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/Wellness-Hotel-Chopok-leto-ubytovanie-rodina-36-1024x542.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Summer Family Stays</h4>

                                <span class="stay-category">Animation</span><span class="stay-category">Family Getaway</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        01. 07. - 31. 08.                                    </div>
                                </div>

                                <p>Come and experience an unforgettable summer at Chopok, where fun for kids meets perfect relaxation for the whole family. Book your summer family stay now and secure a season full of adventures at the best price with our exclusive FIRST MOMENT offer! </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/" 
                        title="Ladies rideZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_119-1024x587.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Ladies ride</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>This stay is ideal for ladies who want to spend time together and enjoy a wellness experience in luxurious surroundings. Whether you're craving a break from the stress of everyday life or a time of laughter together, the Ladies' Ride package will give you everything you need to revitalise your body and soul.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:4;">
                    <a href="https://www.hotelchopok.sk/en/stays/romantic-getaway-for-two/" 
                        title="Romantic stay for twoZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/15-1024x562.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Romantic stay for two</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A romantic getaway for two. Perfect choice for those who wish to spend moments of reunion, relaxation and regeneration in the luxurious surroundings of the Tatras. A romantic stay at Chopok offers a unique opportunity to create beautiful memories in the company of the one you care about most.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:8;">
                    <a href="https://www.hotelchopok.sk/en/stays/wellness-retreat-for-seniors/" 
                        title="Wellness stay for seniorsZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/Seniorske-pobyty-1-web.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Wellness stay for seniors</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>Treat yourself to a carefree stay that will fill you with joy and satisfaction. Our care, unique wellness services and quality gastronomy are here to make sure you enjoy every moment of your stay.</p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                
                <!-- Output each stay in a horizontal list -->
                <li style="order:9;">
                    <a href="https://www.hotelchopok.sk/en/stays/cleansing-therapy/" 
                        title="Cleansing therapyZistiť viac o ponuke ">
                        <div class="stay-single-container">
                                                            <div class="stay-thumbnail">
                                    <div style="
                                        background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2025/02/c-Marek-Hajkovsky-foto-hotel-CHOPOK-2022_205-1024x611.webp');
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        background-color: transparent;
                                        width: 100%;
                                        height: 100%;
                                        ">
                                    </div>
                                                                    </div>
                            
                            <div class="stay-texts-wrapper">

                                <h4>Cleansing therapy</h4>

                                <span class="stay-category">Wellness</span>                                                                <div class="info-post-row">
                                    <div class="post-date post-icon"> 
                                        26. 02. - 20. 12.                                    </div>
                                </div>

                                <p>A wellness retreat focused on harmonizing the body and mind includes relaxing treatments that help restore balance between physical and mental well-being. Massages and therapies are designed to relieve physical blockages and restore the natural flow of energy in your body.  </p>

                                <div class="btn btn-fake btn-icon-dark">
                                    <span>To visit</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                        </ul>
    </div>
    <button class="scroll-button right" id="right-arrow" aria-label="Scroll right">&gt;</button>
</div></div></div></div><div id="pg-2549-3"  class="panel-grid panel-no-style" ><div id="pgc-2549-3-0"  class="panel-grid-cell" ><div id="panel-2549-3-0-0" class="so-panel widget widget_newsletter_chopok_widget panel-first-child panel-last-child" data-index="4" ><style>
    .dynamic-block__newsletter .dynamic-block-center-line__content p {
        margin-bottom: 10px;
    }
    /* @media screen and (min-width: 991px) {
        .dynamic-block-center-line.dynamic-block__newsletter {
            height: 60vh;
        }
    } */
    @media screen and (max-width: 991px) {
        .dynamic-block-center-line.dynamic-block__image-right.dynamic-block__newsletter {
            min-width: 100vw;
            left: 50%;
            transform: translate(-50%, 0);
            flex-direction: column;
        }        
    }


    .btn-form {
        position: absolute !important;
        bottom: 0;
        left: 100%;
    }

    .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content {
        background-color: var(--light-project);
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form {
        z-index: 2;
        position: relative;
        
        margin-top: 15px;
    }
    .dynamic-block__newsletter .dynamic-block-center-line__content form input {
        border: none;
        min-height: 50px;
        background-color: var(--white);
        width: 100%;
        height: 65px;
        padding-left: 15px;
        font-size: 18px;
    }

    .newsletter-title {
        font-size: 2.7vw;
        font-weight: 500;
    }
    @media screen and (max-width: 991px) {
        .newsletter-title {
            font-size: 6vw;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__content--wrapper {
            margin: 10% auto 0% !important;
            text-align: center;
        }

        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images {
            min-height: 30vh;
        }
        .dynamic-block-center-line.dynamic-block__newsletter .dynamic-block-center-line__images .img-wrapper {
            height: 30vh !important;
        }

        .btn-form {
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .widget.widget_newsletter_chopok_widget {
            margin-bottom: 0 !important;
        }
    }
    @media screen and (max-width: 479px) {
        .newsletter-title {
            font-size: 11vw;
        }
    }

    .dynamic-block_newsletter {
        opacity: 0;
        transform: scale(0.1); /* Začína veľmi malý */
    }

    .ec-v-form-input input[type="checkbox"] + label::before {
        border: 2px solid #333 !important;
    }

    @media (max-width: 991px) {
        .ec-v-form-column div:last-child {
            top: -30px;
            text-align: left;
        }
    }
</style>

<div class="dynamic-block-center-line dynamic-block__image-right dynamic-block__newsletter">

    <div class="dynamic-block-center-line__content">
        <div class="dynamic-block-center-line__content--wrapper" >
                            <h3 class="h3 newsletter-title">News and special offers</h3>
            
            <div class="ecomail-form__wrapper">
                                    <!-- EN form Ecomail -->
                    <script>
                        (function (w,d,s,o,f,js,fjs) {
                            w['ecm-widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                            js.id = '8-0ff8f206695a872edfb6fade7b6458ba'; js.dataset.a = 'hotelchopok'; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                        }(window, document, 'script', 'ecmwidget', 'https://d70shl7vidtft.cloudfront.net/widget.js'));
                    </script>
                    <div id="f-8-0ff8f206695a872edfb6fade7b6458ba"></div>

                
            </div>
        </div>
    </div>
    
    <div class="dynamic-block-center-line__images ">
                    <div class="img-wrapper img-wrapper__up"
                style="background-image: url('https://www.hotelchopok.sk/wp-content/uploads/2024/09/66b5fa7b072c3687d4279d86_F-10.jpg');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center center;
                    width: 100%;
                    height: 100%;
                    ">
            </div>
            </div>

</div>
</div></div></div></div><p>Článok <a href="https://www.hotelchopok.sk/en/stays/ladies-getaway/">Ladies ride</a> je zobrazený ako prvý na <a href="https://www.hotelchopok.sk/en/">Hotel Chopok</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
