/*
 * Polderstad — zwevende "waardebepaling" popup linksonder.
 * Locatie in child theme (Impreza-child): css/polderstad-waarde-popup.css
 *
 * Chique, ingetogen uitstraling passend bij een makelaar: zachte fades en
 * rustige slides (geen speelse bounce). De volledige kaart staat linksonder;
 * na een korte tijd schuift hij weg tot een tabje aan de linkerrand, dat bij
 * hover, focus of klik de kaart weer terughaalt. Zie
 * assets/js/polderstad-waarde-popup.js.
 *
 * Kleuren (Impreza globale kleuren):
 *   rood    #e45641  (knop, tabje-achtergrond)
 *   goud    #f1aa4d  (knop-hover)
 *   donker  #323335  (tabje-icoon/tekst)
 *   tekst   #4d4d4f
 * Kop-lettertype: Buenard (serif), zoals de site-headings.
 * Achtergrond van de kaart: de daken uit het Polderstad-logo (subtiel).
 * De CTA gebruikt de echte themaklassen .w-btn.us-btn-style_1 en is dus
 * automatisch exact gelijk aan de Impreza-knop (incl. hover).
 */

.psw {
    --psw-rood: #e45641;
    --psw-goud: #f1aa4d;
    --psw-donker: #323335;
    --psw-tekst: #4d4d4f;
    --psw-wit: #ffffff;
    --psw-rand: 24px;
    position: fixed;
    left: 0;
    bottom: calc(var(--psw-rand) + env(safe-area-inset-bottom, 0px));
    z-index: 99998;
    font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: none; /* alleen de kaart en het tabje vangen muis/touch */
}

/* ---------- De kaart ---------- */
.psw__card {
    position: relative;
    margin-left: var(--psw-rand);
    width: 344px;
    max-width: calc(100vw - 2 * var(--psw-rand));
    box-sizing: border-box;
    padding: 24px;
    background: var(--psw-wit);
    border-radius: 16px;
    box-shadow:
        0 30px 70px -20px rgba(41, 30, 24, 0.45),
        0 10px 26px rgba(41, 30, 24, 0.16);
    overflow: hidden; /* snijdt de daken-achtergrond netjes af */
    pointer-events: auto;
    transform-origin: left bottom;
    transition:
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease;
    will-change: transform, opacity;
}

/* Ingeklapt: kaart rustig naar links uit beeld, tabje verschijnt */
.psw.is-min .psw__card {
    transform: translateX(calc(-100% - var(--psw-rand) - 30px));
    opacity: 0;
    pointer-events: none;
}

/* Zachte intro bij het eerste bezoek */
.psw__card.is-intro {
    animation: psw-intro 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Beginstand zonder schuif-animatie (JS zet dit kort) */
.psw.geen-anim .psw__card,
.psw.geen-anim .psw__tab {
    transition: none;
}

/* Daken uit het logo als subtiele achtergrond-watermark.
   right:0 zet de SVG-rechterrand (de punt van het rode dak, zie de
   afgekapte viewBox) exact op de rechter kaartrand. */
.psw__deco {
    position: absolute;
    right: 0;
	bottom: 0;
    width: 300px;
    height: auto;
    overflow: hidden; /* kapt de rechterhelft van het rode dak af op de daktop */
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

/* Inhoud boven de daken-achtergrond */
.psw__body,
.psw .psw__cta {
    position: relative;
    z-index: 1;
}

.psw__kop {
    margin: 2px 0 8px;
    font-family: Buenard, Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--psw-rood);
}

.psw__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--psw-tekst);
}

/* CTA op volle breedte — kleuren komen van de themaklasse us-btn-style_1 */
.psw .psw__cta {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

/* ---------- Het ingeklapte tabje ---------- */
.psw__tab {
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 44px;
    padding: 15px 4px 17px;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    background: var(--psw-rood);
    color: var(--psw-donker);
    border-radius: 0 13px 13px 0;
    box-shadow:
        0 14px 30px -8px rgba(41, 30, 24, 0.40),
        0 6px 16px rgba(41, 30, 24, 0.18);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.psw.is-min .psw__tab {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    /* Ingetogen "ademen": alleen een zachte schaduwglow, geen beweging */
    animation: psw-adem 9s ease-in-out 2.5s infinite;
}

.psw__tab:hover,
.psw__tab:focus-visible {
    background: var(--psw-goud);
    outline: none;
}

.psw__tab-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: inherit;
}

.psw__tab-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.psw__tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: inherit;
}

/* ---------- Keyframes ---------- */
@keyframes psw-intro {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes psw-adem {
    0%, 100% {
        box-shadow:
            0 14px 30px -8px rgba(41, 30, 24, 0.40),
            0 6px 16px rgba(41, 30, 24, 0.18);
    }
    50% {
        box-shadow:
            0 16px 38px -6px rgba(228, 86, 65, 0.42),
            0 6px 16px rgba(41, 30, 24, 0.18);
    }
}

/* ---------- Mobiel ---------- */
@media (max-width: 782px) {
    .psw {
        --psw-rand: 16px;
    }

    .psw__card {
        width: 320px;
    }

    .psw__kop { font-size: 20px; }

    .psw__tab {
        width: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psw__card,
    .psw__tab {
        transition: opacity 0.3s ease;
    }
    .psw.is-min .psw__card {
        transform: none;
    }
    .psw__card.is-intro { animation: none; }
    .psw.is-min .psw__tab { animation: none; transform: translateX(0); }
}