/*
 * WhatsApp-hulp van Visit Kampen (resources/views/includes/whatsapp.blade.php).
 * Huisstijl: blauw #007383 (wit erop 5,6:1), crème #f4e7db, antraciet #3c3c3b, kartelrand zoals rand-onder-creme.
 * Groen: #0b6b3a voor de startknop (wit erop 6,9:1), #168a46 voor de ronde knop (icoon 4,3:1, eis 3:1).
 * Werkt los van theme-k800.css, dus ook in de gewone layout.
 * Vormen zoals op de site: alles recht of net iets scheef, gezichten als ruitjes. Alleen de groene knop rechtsonder is rond.
 */
.vk-wa {
    --wa-blauw: #007383; --wa-creme: #f4e7db; --wa-ink: #3c3c3b; --wa-groen: #0b6b3a; --wa-groen-rond: #168a46; --wa-rood: #cb1226;
    position: fixed; right: 24px; bottom: 24px; z-index: 900;
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
    font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; color: var(--wa-ink); line-height: 1.45;
}
.vk-wa *, .vk-wa *::before, .vk-wa *::after { box-sizing: border-box; }
.vk-wa__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* De knop rechtsonder: tekstwolk + rond icoon */
.vk-wa__knop {
    display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.vk-wa .vk-wa__wolk {
    position: relative; display: block; max-width: 15rem; padding: .65rem 1rem; background: #fff; rotate: -1deg;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-size: 1rem; line-height: 1.3;
    transition: opacity .25s ease, transform .25s ease;
}
.vk-wa .vk-wa__wolk strong { display: block; font-family: "ff-prater-sans-web", "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--wa-blauw); font-size: 1.05rem; }
.vk-wa__rond {
    position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--wa-groen-rond); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}
.vk-wa__rond svg { width: 34px; height: 34px; }
.vk-wa__rond::after { /* zacht pulseren, zodat de knop opvalt */
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--wa-groen-rond);
    animation: vk-wa-puls 2.6s ease-out 1s 1; /* één keer, korter dan 5 seconden (2.2.2) */
}
.vk-wa__knop:hover .vk-wa__rond { transform: scale(1.06); }
.vk-wa__knop:focus-visible { outline: none; }
.vk-wa__knop:focus-visible .vk-wa__rond { outline: 3px solid var(--wa-ink); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.vk-wa--open .vk-wa__wolk { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes vk-wa-puls { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* Het venster */
.vk-wa__venster {
    width: min(23rem, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto;
    background: var(--wa-creme); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    animation: vk-wa-in .25s ease-out;
}
.vk-wa__venster[hidden] { display: none; }
@keyframes vk-wa-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.vk-wa__kop { position: relative; padding: 1.25rem 1.25rem 1rem; background: var(--wa-blauw); color: #fff; }
.vk-wa .vk-wa__sluit {
    position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; background: transparent; color: #fff; cursor: pointer;
}
.vk-wa .vk-wa__sluit svg { width: 22px; height: 22px; }
.vk-wa .vk-wa__sluit:hover { background: rgba(255, 255, 255, .15); }
.vk-wa .vk-wa__sluit:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.vk-wa .vk-wa__gezichten { position: relative; display: flex; margin: .5rem 0 1rem .45rem; }
.vk-wa .vk-wa__gezicht {
    display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid #fff; rotate: 45deg;
    font-family: "ff-prater-sans-web", "Arial Black", sans-serif; font-weight: 900; font-size: 1.4rem; line-height: 1; color: #fff;
}
.vk-wa .vk-wa__gezicht > span { rotate: -45deg; translate: 0 .06em; } /* Prater-kapitalen staan hoog in de regel */
.vk-wa .vk-wa__gezicht + .vk-wa__gezicht { margin-left: 8px; }
.vk-wa .vk-wa__gezicht--rood { background: var(--wa-rood); }
.vk-wa .vk-wa__gezicht--blauw { background: #3c3c3b; }
.vk-wa__online { position: absolute; left: 92px; bottom: -6px; width: 16px; height: 16px; rotate: 45deg; background: #25d366; border: 3px solid #fff; }

.vk-wa .vk-wa__titel {
    margin: 0 2.5rem .35rem 0; padding: 0; max-width: none; font-family: "ff-prater-sans-web", "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase;
    letter-spacing: .02em; font-size: 1.3rem; line-height: 1.1; color: #fff; text-wrap: balance;
}
.vk-wa .vk-wa__titel:focus, .vk-wa .vk-wa__titel:focus-visible { outline: none !important; box-shadow: none !important; } /* krijgt alleen focus als startpunt bij openen */
.vk-wa .vk-wa__intro { margin: 0; font-size: 1rem; line-height: 1.45; color: #fff; max-width: none; }
.vk-wa .vk-wa__intro strong { color: #fff; }

/* Kartelrand: crème driehoeken onder het blauwe kopvlak, net als op de site */
.vk-wa__rand {
    height: 14px;
    background: var(--wa-blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14 H28 L14 0 Z' fill='%23f4e7db'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 14px;
}

.vk-wa__inhoud { padding: .75rem 1.25rem 1.25rem; }
.vk-wa .vk-wa__ballon {
    position: relative; margin: 0 0 1rem; max-width: none; color: var(--wa-ink); line-height: 1.45; padding: .7rem .9rem; background: #fff; font-size: 1rem;
}
.vk-wa .vk-wa__ballon::before { content: ""; position: absolute; left: 0; top: -10px; border: 0 solid transparent; border-width: 0 14px 10px 0; border-bottom-color: #fff; }
.vk-wa .vk-wa__vraag { margin: 0 0 .5rem; color: var(--wa-ink); max-width: none; font-weight: 700; font-size: .95rem; }
.vk-wa .vk-wa__starters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; max-width: none; }
.vk-wa .vk-wa__starters li { margin: 0; padding: 0; list-style: none; }
.vk-wa .vk-wa__starters li::before { content: none; }
.vk-wa .vk-wa__starters a {
    display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .9rem .35rem; border: 2px solid var(--wa-blauw); rotate: -.4deg;
    background: #fff; color: var(--wa-blauw); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.vk-wa .vk-wa__starters li:nth-child(even) a { rotate: .3deg; }
.vk-wa .vk-wa__starters a:hover { background: var(--wa-blauw); color: #fff; }
.vk-wa .vk-wa__start {
    display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .75rem 1rem .6rem;
    background: var(--wa-groen); color: #fff; text-decoration: none;
    font-family: "ff-prater-sans-web", "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; line-height: 1.1;
    clip-path: polygon(0 3%, 100% 0, 99.2% 97%, .6% 100%); rotate: -.3deg;
}
.vk-wa .vk-wa__start:focus-visible { clip-path: none; } /* anders valt de focusrand weg */
.vk-wa .vk-wa__start svg { width: 24px; height: 24px; flex: none; translate: 0 -.08em; }
.vk-wa .vk-wa__start:hover { background: #08522c; }
.vk-wa .vk-wa__starters a:focus-visible, .vk-wa .vk-wa__start:focus-visible { outline: 3px solid var(--wa-ink); outline-offset: 3px; }
.vk-wa .vk-wa__tijd { margin: .75rem 0 0; max-width: none; line-height: 1.4; font-size: .875rem; text-align: center; color: #575756; }

@media (max-width: 480px) {
    .vk-wa { right: 16px; bottom: 16px; }
    /* Op een telefoon alleen de ronde knop, die bedekt minder tekst. De wolk blijft voor schermlezers de naam van de knop (4.1.2). */
    .vk-wa .vk-wa__wolk { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; box-shadow: none; }
    .vk-wa__rond { width: 56px; height: 56px; }
    .vk-wa__rond svg { width: 30px; height: 30px; }
    .vk-wa__venster { max-height: calc(100vh - 100px); }
}
@media (prefers-reduced-motion: reduce) {
    .vk-wa__rond::after { animation: none; display: none; }
    .vk-wa__venster { animation: none; }
    .vk-wa .vk-wa__wolk, .vk-wa__rond { transition: none; }
}

/* Focus niet achter de knop (2.4.11): de browser scrolt een element met focus tot boven de knop.
   De cookiebalk zet zolang hij in beeld is zijn eigen waarde (inline) en valt daarna terug op deze. */
html:has([data-vk-wa]) { scroll-padding-bottom: 104px; }