/***********************************************
/* CSS for Wunschbrunnen
/* 
/* Wish Input
/**********************************************/

.is-layout-flex { align-items: stretch !important;}
.wunschitemimage img { width: 50%; max-width:80px; margin: 0 auto 10px auto; display: block }
.singlewish { font-size: small; text-align: justify; 
   border-radius: 5px; padding: 10px !important; line-height: 1.4em;
   max-height:300px; overflow: scroll !important; cursor: pointer;}

 /* navi */
 .wunschnavi { margin: 20px 0 20px 0; text-align: center } 
.curdigit, .digit { font-size: 0.8em; color: rgb(75, 75, 75); padding: 4px 10px; margin: 0 5px 0 5px; background-color: rgb(228, 226, 226); border-radius: 5px;}
.digit { color:rgb(148, 146, 146)}

/*stars */
.wunschstars { width:100%; height:20px; text-align: right; margin-bottom: 20px }
.wunschstars img { width: 20px; padding-right: 3px; float: left;  cursor:pointer }

/* sinlge wish page */
.singlewishpage .wunschstars img { float:none; display:inline-block; padding-right: 3px;  }

/* status text */
.wunschstatustext { font-size: 0.8em; color: rgb(201, 142, 14); margin-top: 10px; margin-bottom: 40px }

.singlewishpage > .wunschitemimage img { width: 150px; max-width: 80%; }
.singlewishpage h1 { text-align: center;  }
.singlewishpage h2 { text-align: justify; font-size: 25px; }

/* comments */
.wunschcomments { font-size: 0.8em; color: rgb(75, 75, 75); padding-top:5px; margin-top: 20px; font-style:italic }
/* comment input */
.commentinput { margin-top: 20px; }
.commentinput textarea { width: 80%; margin: 0 auto 0px auto; height: 80px; padding: 10px; box-sizing: border-box; border-radius: 4px; resize: vertical; border: 1px solid rgb(150, 150, 150) }
#commentposterinput   { padding: 5px; width: 200px; margin-right:20px; margin-top: 10px; font-size: .9em; border-radius: 4px; border: 1px solid rgb(150, 150, 150) }
input.commentsubmit { width: fit-content; padding: 7px 20px; text-align: center; border: 1px solid rgb(150, 150, 150); border-radius: 4px; cursor:pointer }


/* input wish */
.wunschinput { background-color: transparent; margin-bottom: 20px; text-align: center; }
#wunschinputinfo { font-size: 0.8em; color: white; background-color: rgba(250, 175, 61, .3); margin-bottom: 10px; text-align: left; margin: 0 auto 0 auto; display:block; width: calc( 80% - 10px ); font-style: italic; padding: 0 5px; border-radius: 4px; }
textarea#wunschtextinput { width: 80%; margin: 0 auto 0px auto; height: 150px; padding: 10px; box-sizing: border-box; border-radius: 4px; resize: vertical; background-color: transparent; color: white; border: 1px solid rgb(150, 150, 150) }
input#wunschposterinput { padding: 5px; width: 200px; margin-right:20px; margin-top: 10px; font-size: 1.00em; background-color: transparent;border-radius: 4px; color: white; border: 1px solid rgb(150, 150, 150) }
input.wunschsubmit { background-color: rgb(241, 241, 241, .2); width: fit-content; padding: 7px 20px; text-align: center; color: white; border: 1px solid rgb(150, 150, 150); border-radius: 4px; cursor:pointer }


@media screen and ( max-width: 781px ) {
   .singlewishpage h1 { font-size: 24px }
}
@media screen and ( max-width: 500px ) {
   .curdigit, .digit { font-size: 0.6em; padding: 4px 5px; margin: 0 5px 0 5px; }
   .singlewish { padding: 10px !important}
   .singlewishpage h1 { font-size: 18px }
}














#wunschForm textarea#wunschInput { 
   width: 100%; height: 150px; padding: 5px;
   box-sizing: border-box;
   border-radius: 4px;
   resize: vertical;
}
#wunschForm input[type="text"] { padding: 5px; width: 200px; margin-left:10px; font-size: 1.00em;}
#wunschForm p#wunschinputbutton.button { background-color: #b98700; width: fit-content; padding: 15px 15px 15px 15px; text-align: center; }
#wunschForm p#wunschinputbutton.button:hover { background-color: #a0780a;  }
#wunschForm p#wunschinputbutton.button a { color:white; width: 100%; background-color: transparent; }

p#wunschinputresult { 
   color: white !important; font-size: large; font-weight:bold; text-align:center; animation: bounceInDown 2s;
   background-color: #b98700; padding: 10px; filter: drop-shadow( 1px 1px 2px rgb(0, 0, 0, .3) );
   margin-bottom: 20px;
}


/***********************************************
/* Columns leftwishlist
/**********************************************/
.wp-block-columns.leftwishlist { display: flex; flex-wrap: wrap !important; align-items:center; gap:15px;  padding-bottom: 10px !important }
.wp-block-columns.leftwishlist .wp-block-column  { 
   flex-basis: calc( 25% - 62px ); filter: drop-shadow( 1px 1px 2px rgb(0, 0, 0, .3) );
   font-size: 14px; text-align: justify; border-radius: 5px;
   background-color: #fffcf6; margin-bottom: 3px; 
   }
.wp-block-columns.leftwishlist .wp-block-column img { max-width: 90%; max-height: 150px; margin: 0 auto 0 auto; display: block }
@media screen and ( max-width: 781px ) {
   .wp-block-columns.leftwishlist { gap: 15px }
   .wp-block-columns:not(.is-not-stacked-on-mobile).leftwishlist > .wp-block-column { flex-basis: calc( 30% - 30px ) !important; }
}
@media screen and ( max-width: 500px ) {
   .wp-block-columns.leftwishlist { gap: 15px }
   .wp-block-columns:not(.is-not-stacked-on-mobile).leftwishlist > .wp-block-column { flex-basis: calc( 50% - 30px ) !important; margin-bottom: 0 }
}

/***********************************************
/* Wish Preview
/**********************************************/
.wp-block-columns.leftwishlist .wp-block-column a.wish_more_link { font-size: 11px; color: rgb(75, 75, 75); margin-left: 10px; cursor:pointer }
.wp-block-columns.leftwishlist .wp-block-column a.wish_comment_link { font-size: 11px; color: rgb(75, 75, 75); margin-left: 10px; float:right; white-space: nowrap; }

/* Stars --------------------------------------------------------------------------- */
p.wunschstars { text-align:left; margin: 3px 0 10px 0 }
.wp-block-columns.leftwishlist p.wunschstars img.wunschstar { width: 20px; padding-right: 3px; float:left; cursor:pointer }
div.wishcomments { width: 30px; height: 30px; float:right; background-image: url('../includes/images/comment.png'); 
                   background-size: 30px 30px; text-align:center; padding-top: 0px; 
                   color: black !important; margin-top: -5px; cursor:pointer }
div.wishclear { clear:right; height: 1px; margin:0; padding:0 }
img.wunschstar { cursor: pointer }

/***********************************************
/* Wish Details page
/**********************************************/
.wunschdetails h2 { text-align: center; } 
.wunschdetails p.wishpinned { text-align: center; margin: 20px 10px 20px 10px; background-color: #a0780a; padding: 20px; color:white !important;
                              background: linear-gradient(to right,  #c16c2f 0%,#ca5430 50%,#dc8034 100%); 
                              -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); box-shadow:  0px 0px 8px rgba(0, 0, 0, 0.8); 
 } 

.wunschdetails .wunschwrites { text-align: center; padding-bottom: 10px; border-bottom: 1px solid lightgray; margin-bottom: 40px } 
.wunschdetails .wunschtext { text-align: justify; padding-bottom: 30px; border-bottom: 1px solid lightgray; margin-bottom: 40px } 
.wunschdetails img { width: 200px; max-width: 80%; margin: 0 auto 0 auto; display: block } 
.wunschdetails p.wunschstars { text-align: center; } 
.wunschdetails p.wunschstars img.wunschstar { width: 30px; display: inline-block; padding-right: 3px; max-width: 19%; } 
.wunschdetails p.wunschstarsdescription { padding-bottom: 40px; border-bottom: 1px solid lightgray; } 
.wunschdetails > .buttonalternate { margin-top: 50px }