/* @import url('https://fonts.googleapis.com/css2?family=Mynerve&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); */


body>div {
    height: 100svh;
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-y: auto;
}

header {
    width: 100%;
    max-width: var(--width-max);
    min-height: var(--height-header);
    height: var(--height-header);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 var(--gap-small);
}

header>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 10rem;
    width: 100%;
    justify-content: space-evenly;
}

header>div>a {
    cursor: url('../boeket.cur'), auto;
}

header>div>img {
    height: 6rem;
    width: auto;
}

header svg {
    height: 3rem;
    width: auto;
}

nav {
    font-size: 1.2rem;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
}

nav a {
    border: 1px solid #354604;
    text-decoration: none;
    padding: 0.4rem 0.8rem 0.4rem 0.8rem;
    font-weight: 600;
    background-color: var(--color-fichkes);
    display: inline-flex;
}

nav a:hover{
    background-color: #354604;
        color: #f3e8ca;
}

nav a.actief {
    pointer-events: none;
    background-color: #354604;
    color: #f3e8ca;
}

nav a:first-child {animation: wobble 16s ease-in-out infinite; transform: scale(0.9); }
nav a:nth-child(2) {animation: wobble 20s ease-in-out infinite; transform: translateY(0.8rem);}
nav a:nth-child(3) {animation: wobble 18s ease-in-out alternate-reverse infinite;  transform: translateY(0.2rem) scale(0.9);}

@keyframes wobble {
  0% {border-radius: 45% 19% 50% 70% / 69% 50% 70% 60%;}
  25% {border-radius: 60% 40% 30% 70% / 40% 60% 50% 70%;}
  50% {border-radius: 70% 30% 100% 40% / 50% 70% 30% 60%;}
  75% {border-radius: 50% 60% 40% 30% / 60% 30% 70% 40%;}
  100% {border-radius: 45% 19% 50% 70% / 69% 50% 70% 60%;}
}

body>div>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100svh - var(--height-header)) ;
}

main {
    padding: var(--gap-big) 0 0 0;
    flex-grow: 1;
    width: calc(100% - 2 * var(--gap-small));
    max-width: var(--width-max);
    display: flex;
    flex-direction: column;
}

footer {
    min-height: var(--height-footer);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
footer p { line-height: var(--height-line); font-size: 0.9rem; display: inline; font-family: var(--font2);}
footer>p>a { user-select: none; text-underline-offset: var(--gap-mini); cursor: url('../boeket-pointer2.cur'), auto; font-size: 0.9rem; padding-left: 0.2rem;}
/* a:-webkit-any-link {
    cursor: url('../boeket-pointer2.cur'), pointer;
} */
div#omhoog {
    cursor: url('../boeket-pointer2.cur'), pointer;
    position:fixed; bottom: var(--gap-small); right: var(--gap-medium);
    display: flex;  justify-content: center; align-items:center; 
    border: 1px solid var(--color-text); background-color: var(--color-fichkes);
    animation: wobble 18s ease-in-out alternate-reverse infinite;
    width: var(--gap-big); height: auto; min-height: var(--gap-big); aspect-ratio: 1/1; 

    opacity: 0;                /* start hidden */
    pointer-events: none;
    transition: opacity 0.4s ease;
}
div#omhoog.show{opacity: 1; pointer-events: auto;}

.left-right {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gap-small);
}

.left-right>* {
    margin: 0;
}


/* LANDINGSPAGINA */

main#landing {
    height: calc(100svh - var(--height-header));
    min-height: calc(100svh - var(--height-header));
    overflow-y: auto;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

section.slogan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    margin-bottom: var(--gap-big);
}

section.slogan p {
    font-size: 1.1rem;
    font-family: var(--font2);
    text-align: center;
    font-weight: 600;
    line-height: 2rem;
}

section.slogan a {
    text-underline-offset: 4px;
}

main#landing img {
    z-index: 20;
    width: 90%;
    max-width: var(--width-max);
    max-height: calc(100svh - var(--height-header) - 150px);
    object-fit: contain;
}

img#logo {
    aspect-ratio: 1/1;
    object-fit: contain;
    padding: var(--gap-mini);
    animation: rotate 6s ease-in-out infinite alternate;
    background-color: var(--color-yellow);
    border: 1px solid var(--color-text);
    border-radius: 50%;
}

@keyframes rotate {
    from {
        transform: rotate(1deg);
    }
    to {
        transform: rotate(-1deg);
    }
}



/* SFEER PAGINA */
section.dagen {
    margin-bottom: var(--gap-normal);
}
section.dagen>div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
section.dagen>div>div {
    width: 100%;
}

section.dagen>div p {
    text-align: center;
    padding-bottom: var(--gap-small);
}
section>div>div>div.data {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--color-text);
    background-color:#efe5d9;
    font-size: 0.9rem;
    color: #364604cc;
}

section>div>div>div.data>div>div {

    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    padding: var(--gap-mini);
   cursor: url('../boeket-pointer2.cur'), auto !important;
   padding: var(--gap-small);
}

section>div>div>div.data>div>div:hover{
    background-color: var(--color-green);
    color: var(--color-text);
}

section>div>div>div.data>div>div.active {
    background-color: #364604d2;
    color: #e3dab8;
    text-decoration: none;
}

section>div>div>div.data>div>div:not(.active)>span:first-of-type>span {
    text-decoration: underline;
}


section>div>div>div.data>div.group:not(:last-of-type) {
    border-bottom: 1px solid var(--color-text);
}

/* section>div>div>div.data>div.group { 
    padding: var(--gap-small);
} */

section.fototekst {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: var(--gap-medium);
}

section.fototekst div {
    padding: var(--gap-big);
}

section.fototekst p {
    width: 100%;
}

section.gallerij {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-small);
    margin: 0;
}

img.verticaal {
    width: calc((100% - var(--gap-small))/2);
}





/* AANBODPAGINA */

section#intro p {
    text-align:center; font-size: 0.9rem; font-weight: 600;
    font-family: var(--font2);
}

section.fichkes {
    flex-grow: 1;
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
}

section.fichkes.bonnen {
    flex-direction: column;
}

section.fichkes>div {
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

section.fichkes.bonnen>div {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: var(--gap-big);
}

section.fichkes>div>p {
    font-size: 0.9rem;
    width: 100%;
    height: calc(100% / 3);
    display: inline-block;
    align-content: center;
    text-align: center;
}

.bonnen a {
    width: 60%;
    margin: 0 auto;
}

.bonnen img {
        width: 100%;
    height: 100%;
    object-fit: contain;
}



@keyframes wiggle {
    from {transform: rotate(0.5deg);}
    to {transform: rotate(-0.5deg);}
}

div#shopping-card {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: var(--height-footer);
    line-height: calc(var(--height-footer)/5);

    background-color: var(--color-green);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

div#shopping-card:not(.active) {
    display: none;
}

div#shopping-card>div {
    width: 100%;
    max-width: var(--width-max);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: auto;
    height: 100%;
}

div#shopping-card>div>div:first-of-type {
    
    display: flex;

    flex-grow: 1;
    padding-left: var(--gap-small);
    align-items: stretch;
}

div#shopping-card > div > div:first-of-type,
div#shopping-card > div > div:first-of-type * {
    cursor: url('../boeket-pointer2.cur'), auto !important;
}

div#shopping-card>div>div:first-of-type>div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    font-family: var(--font2);
}

div#shopping-card>div>div:first-of-type>img {
    height: calc(var(--height-footer) / 2);
    width: calc(var(--height-footer) / 2);
    margin-right: var(--gap-small);
}

div#shopping-card>div>div:first-of-type>img:not(.active) {
    display: none;
}

div#shopping-card>div>div:last-of-type {
    font-size: 2rem;
    cursor: url('../boeket-pointer2.cur'), auto;
    padding: 0 var(--gap-small);
}

div#shopping-card p {
    text-align: center;
    width: 100%; 
}

@media screen and (width > 700px) {
    div#shopping-card>div>div:first-of-type {
        justify-content: center;
    }

    div#shopping-card p {
        text-align: center;
        width: 100%; 
    }
}

/* CONTACT */

section#contact {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section#contact p {
    text-align: center;
}

section#kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-medium);
    width: 100%;
}

section#kaart>div {
    height: 100%;
    width: 100%;
}

section#kaart>img {
    max-height: 100%;
    aspect-ratio: 2/3;
    width: auto;
    max-width: 100%;
}

section#kaart a {
    height: 100%;
    display: block;
}

section#kaart>div img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;

    -webkit-user-drag: none;   /* Safari/Chrome */
    -webkit-touch-callout: none; /* Disable save/copy on long-press */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* BESTELLEN */

fieldset.lijnen input::placeholder {
    font-size: 0.8rem;
    color: var(--color-text);
    opacity: 0.69;
    font-family: var(--font2);
}
fieldset.lijnen>input{
    border: 0;
    border-bottom: 2px dashed var(--color-text);
    border-radius: 0;
    color: var(--color-text);
    margin-bottom: var(--gap-medium);
    background-color: var(--color-bg);
    padding: 0;

    font-family: var(--font);
    font-size: 1.4rem;

    accent-color: var(--color-text);
    caret-color: var(--color-text);
}
textarea:focus, input:focus{
    outline: none;
}

select {
    font-family: var(--font2);
    font-size: 0.9rem;
}
select:focus {
    background-color: #e3dab8;
}



/* WebKit and Blink */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  display: inline-flex;
  align-items: center;
  background-color: #efe5d9;
  -moz-appearance: textfield;
}

.plusmin {
    display: flex;
    height: calc(2 * var(--height-line));
    width: calc(3 * var(--height-line));
    flex-direction: column;
    flex-wrap: wrap;
}

.plusmin div {
    width: var(--height-line);
    height: var(--height-line);
    aspect-ratio: 1/1;
    border: 1px solid var(--color-text);
    border-left: 0;
    text-align: center;
    font-family: var(--font);
}

.plusmin div:first-of-type {
    border-bottom: 0;
}


input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    height: var(--height-line);
    width: var(--height-line);

    margin-bottom: 0;
    margin-right: var(--gap-small);

    border: 1px solid var(--color-text);
    border-radius: 0;
    color: var(--color-text);

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--font);
    font-size: 1.4rem;
}


label.rij {
    display: inline-flex;
}

fieldset.aantal>div {
    display: flex;
    justify-content: space-between;
}

fieldset.aantal>div:not(:first-child) {
    margin-top: var(--gap-medium);
}

fieldset.aantal>div>img {
    height: calc( 2 * var(--height-line));
    width: calc( 2 * var(--height-line));
    margin-right: var(--gap-small);
    animation: wiggle 1s infinite ;
}

fieldset.aantal>div>label {
        flex-grow: 1;
        margin-left: var(--gap-mini);
        font-size: 0.8rem;
}

@media screen and (width > 600px) {
    fieldset.aantal>div>label {
        font-size: 1rem;
}
}

fieldset.aantal input[type="number"] {
    height: calc( 2 * var(--height-line));
    width: calc( 2 * var(--height-line));
    aspect-ratio: 1/1;
    text-align: center;
    font-size: 2rem;
    font-family: var(--font);
    margin-bottom: 0;
    color: var(--color-text);
}
fieldset.aantal input::placeholder {color: var(--color-text);}

fieldset.aantal>div .plusmin {background-color: #efe5d9;}
fieldset.aantal>div:nth-of-type(1) .plusmin>*, .fichkes.boeketten p:nth-child(1) button {border-color: var(--color-schattig);}
fieldset.aantal>div:nth-of-type(2) .plusmin>*, .fichkes.boeketten p:nth-child(2) button {border-color: var(--color-charmant)}
fieldset.aantal>div:nth-of-type(3) .plusmin>*, .fichkes.boeketten p:nth-child(3) button {border-color: var(--color-magnifiek);}

.aantal div.afbeelding {
    height: calc( (2* var(--height-line)));
    aspect-ratio: 1/1;
    z-index: 20;
}

.aantal div:nth-child(1) > div.afbeelding {background-color: var(--color-yellow); transform: rotate(-1deg);}
.aantal div:nth-child(2) > div.afbeelding {background-color: var(--color-green); transform: rotate(0deg) scaleX(-1);}
.aantal div:nth-child(3) > div.afbeelding {background-color: var(--color-purple); transform: rotate(1deg);}

fieldset.vraag>*:not(:last-child) {
    margin-bottom: var(--gap-normal);
}   

label.inzetten, label.mailing {
    display: inline-flex;
    padding-top: var(--gap-small);
    font-size: 0.8rem;
    padding-left: calc(2 * var(--height-line) + var(--gap-small));
}

label.inzetten:not(.active) {display: none;}

fieldset.aantal #cadeau-prijs>input[type="number"] {
    width: calc(3 * var(--height-line));
    border-color: var(--color-cadeau);
}

/* CHECKOUT */
ul{
    list-style-position: outside;
    margin-left: 1.4rem;
    margin-bottom: var(--gap-small);
    font-size: 0.9rem;
}

li#boeketten {
    list-style-type: '❀ ';
}

li#cadeaubon {
    list-style-type: '▩ ';
}

li#kaarten {
    list-style-type: '▰ ';
}

li {margin-top: var(--gap-small);}

li span {
    display: inline-block;
}
ul p {
    margin-top: var(--gap-mini);
}
button {
    height: var(--height-field);

    border: 1px solid var(--color-text);
    border-radius: 0;
    background-color: var(--color-bg);
    color: var(--color-text);

    font-size: 1.1rem;
    font-family: var(--font);
    padding: 0 var(--gap-mini);
}

.code {
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 0;
}

.code input {
    flex-grow: 1;
    margin-bottom: 0;
    font-family: var(--font2);
    border-right: 0;
    font-size: 0.9rem;
}

.code button {
    background-color: var(--color-green);
    color: var(--color-text);
    font-family: var(--font2);
    cursor: url('../boeket-pointer2.cur'), auto;
}

.totaal {
    padding: var(--gap-small);
    margin: var(--gap-normal) 0;
    border: 1px solid var(--color-text);

    font-weight: 600;

    display: flex;
    justify-content: space-between;
}

div[data-name] {
    font-size: 0.9rem;
    margin-bottom: var(--gap-normal);
}

div[data-name]>div {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}

form.verwijderen {
    display: inline;
    width: auto;
    margin: 0;
    line-height: 0.9rem;
}

form.verwijderen input[type='submit'] {
    border: none;
    background-color: transparent;
    width: auto;
    font-family: var(--font);
    text-decoration: none;
    font-size: 0.9rem;
    height: auto;
    line-height: normal;
}


@media screen and (min-width: 700px) {
    a:hover {
        text-underline-offset: 4px;
        transition: 0.2s;
    }
    .slogan a:hover {
        text-underline-offset: 6px;
        transition: 0.1s;
    }
    .mobile {display: none;}
    .desktop {display: flex;}
    span.desktop {display: inline;}
    section#aanbod, section.fichkes {
        flex-direction: column;
    }

    section.fichkes>div {
        flex-direction: row;
        width: 100%;
    }

    section.fichkes a {
            width: calc(100% / 3);
    }

    section.fichkes.bonnen a {
            width: 40%;
    }

section.dagen>div>div {
    width: 100%;
}

    section#kaart {
        height: 300px;
        flex-direction: row;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    section.fichkes>div>p {
        padding-bottom: var(--gap-small);
        height: 100%;
        width: calc(100% / 3);
    }

    section.fichkes.bonnen>div>p {
        width: 60%;
    }

    .fichkes img[data-aanbod="boeket_A"]:hover {
        content: url("/media/winkel/fiche_schattig3.png");
    }

    .fichkes img[data-aanbod="boeket_B"]:hover {
        content: url("/media/winkel/fiche_charmant3.png");
    }

    .fichkes img[data-aanbod="boeket_C"]:hover {
        content: url("/media/winkel/fiche_magnifiek3.png");
    }

    .fichkes a[data-aanbod="cadeau"]:hover img {
        content: url("/media/winkel/cadeaubon2.png");
    }

    .fichkes a[data-aanbod="kaart_A"]:hover img {
        content: url("/media/winkel/kaart_schattig2.png");
    }

    .fichkes a[data-aanbod="kaart_B"]:hover img {
        content: url("/media/winkel/kaart_charmant2.png");
    }

    .fichkes a[data-aanbod="kaart_C"]:hover img {
        content: url("/media/winkel/kaart_magnifiek2.png");
    }

    section.fototekst {
        flex-direction: row;

    }

    section.fototekst img {
        width: 50%;
    }

    section.fototekst>div{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding: var(--gap-big);
    }

    section.fototekst p {
        font-size: 1.1rem;
    }

    section.gallerij {
        flex-wrap: nowrap;
        gap: var(--gap-medium);
    }

    img.horizontaal {
        width: calc((100% - 2 * var(--gap-medium)) / 2) !important;
    }

    img.verticaal {
        width: calc((100% - 2 * var(--gap-medium)) / 4);
    }

    li span {
    display: inline;
}


    
}