/*
Theme Name: WpRentals Child theme
Theme URI: http://themeforest.net/user/wpestate
Description: Ultimate WordPress Theme created by WpEstate for accommodation booking. WpRentals is clean, flexible, fully responsive and retina Ready. Its smart settings allow you to build outstanding renting websites easily and fast.
Version: 3.13
Author: wpestate.org
Author URI: http://themeforest.net/user/annapx
Tags: white, one-column, two-columns,left-sidebar, right-sidebar, fluid-layout , custom-menu, theme-options, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: wprentals

-------------------------------------------------------------- */
/**
 * YuppieStay — Mobile Half-Map UX
 * Companion stylesheet for ys-mobile-halfmap.js
 */

/* ── Hidden on desktop ───────────────────────────────────────────────────── */

#ys-mob-bar,
#ys-mob-pills,
#ys-sort-sheet,
#ys-sort-overlay {
    display: none;
}

/* Guarantee pills never show on desktop even when JS sets inline style */
@media (min-width: 992px) {
    #ys-mob-pills { display: none !important; }
}

/* ── Logo shine animation (auto-loops every 6s) ───────────────────────── */
@keyframes ys-logo-shine {
    0% { left:-100%; opacity:0; }
    5% { opacity:1; }

    80% { left:125%; opacity:1; }
    81% { opacity:0; }

    100% { left:125%; opacity:0; }
}
.ys-logo-shine {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.ys-logo-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-22deg);
    animation: ys-logo-shine 4s linear infinite;
    z-index: 99;
    pointer-events: none;
}

/* ── Wave animation for CTA buttons ─────────────────────────────────────── */
@keyframes ys-wave-sweep {
    0%   { left: -60%; }
    100% { left: 160%; }
}
.ys-ext-booking-btn,
.ys-sf-btn--search {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ys-wave-btn-wrap {
    position: relative;
    display: block;
    border-radius: 8px;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
}
.ys-wave-btn-wrap input[type=submit],
.ys-wave-btn-wrap input[type=button] {
    position: relative;
    z-index: 2;
    width: 100%;
}
/* Wave element — injected via JS as <span class="ys-shimmer"> */
.ys-shimmer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}
.ys-shimmer::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -60%;
    width: 45%;
    height: 140%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,0.18) 30%,
        rgba(255,255,255,0.72) 50%,
        rgba(255,255,255,0.18) 70%,
        transparent 100%
    );
    transform: skewX(-15deg);
    animation: ys-wave-sweep 2.2s ease-in-out infinite;
}

/* ── No-results ──────────────────────────────────────────────────────────── */

.ys-no-results {
    padding: 32px 16px;
    text-align: center;
    color: #666;
}

.ys-no-results__icon {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
}

.ys-no-results__msg {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px;
}

.ys-no-results__hint {
    font-size: 14px;
    color: #777;
    margin: 0;
}

.ys-featured-fallback {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.ys-featured-fallback__title {
    font-size: 16px;
    font-weight: 700;
    color: #1d3a3a;
    margin: 0 0 16px;
    padding: 0 8px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

    /* ── Sticky Sort | Filter | Map bar ────────────────────────────────────── */

    #ys-mob-bar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 500;
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        box-shadow: 0 1px 6px rgba(0,0,0,.08);
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .ys-mob-bar-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 6px;
        background: none;
        border: none;
        border-right: 1px solid #f0f0f0;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        cursor: pointer;
        transition: background .1s, color .1s;
        line-height: 1;
    }

    .ys-mob-bar-btn:last-child {
        border-right: none;
    }

    .ys-mob-bar-btn svg {
        display: block;
    }

    .ys-mob-bar-btn:active,
    .ys-mob-bar-btn.active {
        background: #f5f0ff;
        color: #7b5ea7;
    }

    /* ── Scrollable feature pills ───────────────────────────────────────────── */

    #ys-mob-pills {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 10px 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0;
    }

    #ys-mob-pills::-webkit-scrollbar {
        display: none;
    }

    .ys-mob-pill {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 14px;
        background: #fff;
        border: 1.5px solid #d8d8d8;
        border-radius: 24px;
        font-size: 13px;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        cursor: pointer;
        transition: all .1s;
    }

    .ys-mob-pill.active {
        background: #7b5ea7;
        border-color: #7b5ea7;
        color: #fff;
        font-weight: 700;
    }

    .ys-mob-pill:active {
        opacity: .8;
    }

    /* ── Sort bottom sheet ──────────────────────────────────────────────────── */

    #ys-sort-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 9050;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }

    body.ys-sort-open #ys-sort-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    #ys-sort-sheet {
        display: block;
        position: fixed;
        bottom: -100%;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        padding: 12px 20px 40px;
        z-index: 9100;
        transition: bottom .28s ease;
        box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    }

    #ys-sort-sheet.open {
        bottom: 0;
    }

    .ys-sort-sheet__handle {
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 16px;
    }

    .ys-sort-sheet__title {
        font-size: 16px;
        font-weight: 700;
        color: #1d3a3a;
        margin: 0 0 4px;
    }

    .ys-sort-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 15px 0;
        background: none;
        border: none;
        border-bottom: 1px solid #f2f2f2;
        text-align: left;
        font-size: 15px;
        color: #333;
        cursor: pointer;
    }

    .ys-sort-option:last-child {
        border-bottom: none;
    }

    .ys-sort-option.active {
        color: #7b5ea7;
        font-weight: 700;
    }

    /* ── Search form area ───────────────────────────────────────────────────── */

    #advanced_search_map_list {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ── Map drawer — JS controls visibility via inline style ─────────────────
       We do NOT try to hide/show via CSS classes here because the theme has
       too many high-specificity rules. The JS sets element.style directly.
       We only provide the drawer's visual appearance when it IS visible.      */

    #google_map_prop_list_wrapper.ys-map-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9000 !important;
        overflow: hidden !important;
        margin: 0 !important;
        transition: none !important;
    }

    #google_map_prop_list_wrapper.ys-map-open #google_map_prop_list {
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
    }

    /* ── Close button inside the map drawer ────────────────────────────────── */

    #ys-map-close {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        border: none;
        border-radius: 24px;
        padding: 10px 24px;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        box-shadow: 0 2px 14px rgba(0,0,0,.25);
        cursor: pointer;
        white-space: nowrap;
    }

    #ys-map-close:active {
        background: #f0f0f0;
    }


    /* ── Bottom padding so last card clears the floating bar ───────────────── */

    #google_map_prop_list_sidebar {
        padding-bottom: 20px !important;
    }

    #gmap-control-list {
        display: none;
    }
}
    /* ── Animations for buttons ───────────────── */
    @property --mask {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.textShine {
    --shimmer-hue-1: 213deg;
    --shimmer-sat-1: 95%;
    --shimmer-lit-1: 91%;
    --shimmer-hue-2: 248deg;
    --shimmer-sat-2: 100%;
    --shimmer-lit-2: 86%;
    --shimmer-hue-3: 293deg;
    --shimmer-sat-3: 78%;
    --shimmer-lit-3: 89%;
    --glow-hue: 222deg;
    --bg: #fff;
    --mask: 0deg;

    color: var(--bg);
    font-weight: 600;
    font-size: 1.2em;
    text-decoration: none;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.8em 1.4em;
    border-radius: 0.66em;
    overflow: visible;
    box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

.textShine:hover {
    transform: scale(1.06);
}

.textShine svg,
.textShine .text {
    position: relative;
    z-index: 2;
}

.textShine .text {
    color: transparent;
    background-color: var(--bg);
    background-image: linear-gradient(
        120deg,
        transparent 0%,
        hsla(var(--shimmer-hue-1), 100%, 80%, 0.66) 40%,
        hsla(var(--shimmer-hue-2), 100%, 90%, 0.9) 50%,
        transparent 52%
    );
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 100% center;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text 4s linear infinite;
}

.shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: plus-lighter;
    z-index: 1;
}

.shimmer::before,
.shimmer::after {
    content: "";
    position: absolute;
    inset: 40px;
    border-radius: inherit;
    opacity: 1;
}

.shimmer::before {
    box-shadow:
        0 0 3px 2px hsl(var(--shimmer-hue-1) 20% 95%),
        0 0 7px 4px hsl(var(--shimmer-hue-1) 20% 80%),
        0 0 13px 4px hsl(var(--shimmer-hue-2) 40% 60%),
        0 0 15px 1px hsl(var(--shimmer-hue-2) 20% 40%);
    z-index: -1;
}

.shimmer::after {
    box-shadow:
        inset 0 0 0 1px hsl(var(--shimmer-hue-2) 70% 95%),
        inset 0 0 3px 1px hsl(var(--shimmer-hue-2) 100% 80%),
        inset 0 0 9px 1px hsl(var(--shimmer-hue-2) 100% 70%);
    z-index: 2;
}

/* DEFAULT EFFECT = SPIN */
.textShine .shimmer {
    -webkit-mask-image: conic-gradient(
        from var(--mask),
        transparent 0%,
        transparent 10%,
        black 36%,
        black 45%,
        transparent 50%,
        transparent 60%,
        black 85%,
        black 95%,
        transparent 100%
    );
    mask-image: conic-gradient(
        from var(--mask),
        transparent 0%,
        transparent 10%,
        black 36%,
        black 45%,
        transparent 50%,
        transparent 60%,
        black 85%,
        black 95%,
        transparent 100%
    );
    -webkit-mask-size: cover;
    mask-size: cover;
    animation: spin 3s linear infinite;
}

/* WIPE */
.textShine[data-effect="wipe"] .shimmer {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 20%,
        black 88%,
        transparent 90%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 20%,
        black 88%,
        transparent 90%
    );
    -webkit-mask-size: 200% 200%;
    mask-size: 200% 200%;
    -webkit-mask-position: 200% center;
    mask-position: 200% center;
    animation: wipe 1.5s linear infinite;
}

/* WAVE */
.textShine[data-effect="wave"] .shimmer {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 15%,
        black 45%,
        black 55%,
        transparent 85%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 15%,
        black 45%,
        black 55%,
        transparent 85%
    );
    -webkit-mask-size: 200% 200%;
    mask-size: 200% 200%;
    -webkit-mask-position: 200% center;
    mask-position: 200% center;
    animation: wipe 3s linear infinite;
}

/* THROB */
.textShine[data-effect="throb"] .shimmer {
    -webkit-mask-image: none;
    mask-image: none;
    animation: pulse 3s ease infinite;
}

/* PULSE */
.textShine[data-effect="pulse"] .shimmer {
    -webkit-mask-image: none;
    mask-image: none;
    animation: pulse2 3s ease infinite;
}

/* FLICKER */
.textShine[data-effect="flicker"] .shimmer {
    -webkit-mask-image: none;
    mask-image: none;
    animation: flicker 3.33s ease infinite;
}

@keyframes spin {
    0% {
        --mask: 0deg;
    }
    100% {
        --mask: 360deg;
    }
}

@keyframes wipe {
    0% {
        -webkit-mask-position: 200% center;
        mask-position: 200% center;
    }
    100% {
        -webkit-mask-position: 0% center;
        mask-position: 0% center;
    }
}

@keyframes pulse {
    0%,
    90%,
    100% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
}

@keyframes pulse2 {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes flicker {
    0% {
        opacity: 0.1;
        -webkit-mask-image: none;
        mask-image: none;
    }
    1% {
        opacity: 1;
    }
    2% {
        opacity: 0.5;
    }
    3% {
        opacity: 0.1;
    }
    4% {
        opacity: 0.7;
    }
    5% {
        opacity: 1;
    }
    7% {
        opacity: 0.7;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 15%,
            black 45%,
            black 55%,
            transparent 85%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 15%,
            black 45%,
            black 55%,
            transparent 85%
        );
    }
    8% {
        opacity: 0.1;
    }
    10% {
        opacity: 0.4;
    }
    13% {
        opacity: 1;
    }
    15% {
        opacity: 0.1;
        -webkit-mask-image: linear-gradient(
            45deg,
            rgba(0,0,0,0.4) 25%,
            transparent 45%,
            black 65%,
            black 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            45deg,
            rgba(0,0,0,0.4) 25%,
            transparent 45%,
            black 65%,
            black 90%,
            transparent 100%
        );
    }
    17% {
        opacity: 0.8;
    }
    19% {
        opacity: 0.3;
    }
    21.5% {
        opacity: 0;
    }
    23% {
        opacity: 1;
    }
    39% {
        opacity: 0.7;
    }
    45% {
        opacity: 0.2;
    }
    49% {
        opacity: 0.9;
    }
    52% {
        opacity: 0.7;
    }
    53.5% {
        opacity: 0.2;
        -webkit-mask-image: linear-gradient(
            90deg,
            black 15%,
            black 45%,
            rgba(0,0,0,0.4) 75%,
            transparent 85%
        );
        mask-image: linear-gradient(
            90deg,
            black 15%,
            black 45%,
            rgba(0,0,0,0.4) 75%,
            transparent 85%
        );
    }
    57% {
        opacity: 0.8;
    }
    63% {
        opacity: 1;
    }
    75% {
        opacity: 0.85;
    }
    77% {
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    82% {
        opacity: 0.95;
    }
    83% {
        opacity: 0.85;
    }
    86% {
        opacity: 1;
    }
    89% {
        opacity: 0.85;
    }
    91% {
        opacity: 1;
    }
    92% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

@keyframes text {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: -100% center;
    }
}
#submit_booking_front_instant_wrap button.ys-booking-visual-btn.textShine {
    width: 100%;
    background: #7b5ea7;
    margin-top: 15px;
    border: 0px;
}
.modal-body .ys-pf-widget {
    clear: both!important;
}

.woo_pay {
    width: 100%!important;
    margin-bottom: 10px!important;
}
div#instant_booking_modal .modal-header {
    background: #7b5ea7;
}