#anslagstavla-header .wp-block-cover__inner-container {margin-right: 20%; display: flex; flex-direction: column; align-items: center; z-index: 5;}

#anslagstavla-header #popup_form select,
#anslagstavla-header .radiobuttons,
#anslagstavla-header textarea,
#anslagstavla-header #rubrik {font-size: var(--wp--preset--font-size--body2) !important;}


/* NEW NOTE - CSS TO JAVASCRIPT */
#popup_form {position: fixed; color: var(--wp--preset--color--dark-1); left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90vw; width: max-content; text-align: center; z-index: 2000;}

#popup_form *,
#image::file-selector-button {font-size: var(--wp--preset--font-size--size-1); font-family: var(--wp--preset--font-family--body);}

#popup_form select, #image::file-selector-button {color: var(--wp--preset--color--black);}

/*** STEP 1 ***/
#popup_form #step1 {border-top-left-radius: 8px; border-top-right-radius: 8px;}
#popup_form #step1 #user_name {margin: 0; font-size: var(--wp--preset--font-size--size-1); font-weight: bold;}
#popup_form #step1 .radiobuttons p {margin: 0; font-size: var(--wp--preset--font-size--size-1);}

#popup_form #step1, #popup_form #step2, #popup_form #step3, #popup_form #step4 {background: var(--wp--preset--color--light-1); box-shadow: 2px 2px 2px white; padding:10px;}
#popup_form #step2 input, #popup_form #step3 textarea, .skrivlapp #step4 input, #popup_form #step3 .visibility-options {box-sizing: border-box; width: 100% !important; border-radius: 6px; border: 1px solid gray; padding: 8px;}

/*** STEP 3 ***/
#popup_form #step3 .visibility-options {padding: 12px; margin-top: 1vh;}
#popup_form #step3 .visibility-options p {margin: 0;}

/*** STEP 4 ***/
#popup_form #step4 {display: flex; flex-direction: column; align-items: center; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
#popup_form #step4 p {margin: 0; font-size: var(--wp--preset--font-size--size-1)}
#popup_form #step4 input {width: 54px;}
#popup_form #step4 .wp-element-button {margin-top: var(--wp--preset--spacing--6vh);}

#popup_overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1999; display: flex; align-items: center; justify-content: center;}


#anslagstavla-header .radiobuttons label {display: inline-flex; padding-right: 14px;}
#anslagstavla-header .radiobuttons input {height: 20px; margin-right: 5px; width: 20px; color: var(--wp--preset--color--dark-1);}
input[type="radio"]:checked {accent-color: var(--wp--preset--color--dark-1);}

#anslagstavla-header #popup_form #step4 .wp-element-button {margin-top: 20px;}






/********** Display Full Bulletin Board ***********/
/* Sorting Buttons */

.sorting-buttons {align-items: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0px 1px 14px black; display: flex; padding: 1vh 2vw; position: sticky; top: 0px !important; z-index: 13; max-width: unset;}
.sorting-buttons #write_note svg {height: 40px!important; width: 40px; margin-right: 8px;}

.sorting-buttons button, #filter-my-posts, #toggle-view {background: #ffffff38; border: 2px solid var(--wp--preset--color--black); color: var(--wp--preset--color--black); font-size: var(--wp--preset--font-size--body1); margin: 0 -1px 6px; stroke: var(--wp--preset--color--black); cursor: pointer;}

.sorting-buttons button:hover, #toggle-view:hover, .sorting-buttons button.active  {background: var(--wp--preset--color--light-1);}


#filter-my-posts:hover, #toggle-view:hover {stroke: var(--wp--preset--color--light-1);}

#filter-my-posts,
#toggle-view {border-radius: 6px; margin-right: 8px; padding: 4px 8px; display: flex; align-items: center; justify-content: center;}

#filter-my-posts svg, #toggle-view svg {height: 24px; width: 26px;}



#cat-label { display: block; cursor: pointer; }
.category-buttons { display: none; }
#cat-toggle:checked ~ .category-buttons { 
    display: flex; 
    flex-direction: column;
    position: absolute;
    background: white;
    z-index: 100;
}
.kategorierna.show-all #cat-label { display: none; }
.kategorierna.show-all .category-buttons {display: flex !important; position: static; column-gap: 10px; flex-direction: row;}







/* Notes container */
.notes {display: flex; flex-wrap: wrap; justify-content: space-evenly; padding: 2vw; position: relative; margin: 0; max-width: unset; min-height: 300px; background-image: url('../assets/kork-anslagstavla.webp');}

.notes::before {background-image: url('../assets/ram-left.webp'); background-repeat: repeat-y; background-size: contain; content: ""; box-shadow: 3px 5px 12px black; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; z-index: 2;}

.notes::after {background-image: url('../assets/ram-right.webp'); background-repeat: repeat-y; background-size: contain; content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; z-index: 2;}

.ram-botten {height: 22px; min-width: -webkit-fill-available; position: absolute; bottom: -22px; left: 0; z-index: 1;}






/******* Individual Note Display ********/
.notes .note {border: 2px solid var(--wp--preset--color--dark-1); border-radius: 8px; box-shadow: 3px 3px 16px var(--wp--preset--color--dark-1); margin: 8px; max-height: 530px; overflow: hidden; padding: 8px; position: relative; width: 250px;}

.note-category {text-transform: uppercase; font-size: 16px; font-weight: 700; margin: 0.6vh 0; line-height: 1.1;}

.note .uppsatt {font-size: 11px; margin: 0;}
.note .post-title {margin: 0; line-height: 1;}

.note .uppsatt span {display: inline;}

.bild-text-knapp {margin-bottom: 25px; width: inherit;}

.note .post-excerpt {margin: 0 auto 54px;; line-height: 1; font-size: var(--wp--preset--font-size--size-2);}




.read-knapp {display: flex; justify-content: center; position: absolute; bottom: 10px; left: 0; right: 0; font-size: var(--wp--preset--font-size--size-1); font-weight: 700;}


.note .readmore {white-space: nowrap;}

.note img {width: inherit; object-fit: cover; height: 180px;}

.colorcover {width: 100%; height: 38px; position: absolute; bottom: 0px; left: 0;}

.visibility-options, .discussion-options {margin-top: 3vh;}

/* Comment Bubble */
.comment-bubble {padding: 2px 8px; border-radius: 15px; font-size: 11px; position: absolute; top: 2px; right: 2px;}

.comment-bubble::after {content: '◄'; position: absolute; left: -5px; top: 37%; transform: rotate(-30deg); font-size: 12px;}



.datum {display: block;}






/**** List View Styles ****/
.notes.list-view {flex-direction: column;}

.notes.list-view .note {display: grid; grid-template-columns: 100px 1fr auto; grid-template-rows: auto auto; width: 94%; column-gap: 10px;}

/* Column 1: Image */
.notes.list-view .note .post-image {grid-row: 1 / -1; height: 100px; width: 100px; object-fit: cover;margin-right: 8px;}

/* Column 2: note-meta (överst) */
.notes.list-view .note .note-meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.notes.list-view .note .note-category {
  font-weight: 200;
  margin: 0;
}

.notes.list-view .uppsatt {
  margin: 0;
}

/* Column 2: Post content (under note-meta) */
.notes.list-view .note .post-content {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

.notes.list-view .post-title {
  font-size: 16px;
  margin: 0 0 5px 0;
}

.notes.list-view .post-excerpt {
  font-size: 14px;
  margin: 0;
}

/* Column 3: Button */
.notes.list-view .read-knapp {position: unset;
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
}

.notes.list-view .liten-knapp {
  font-size: 11px;
  padding: 6px 12px;
  white-space: nowrap;
}


/* Responsive */
@media screen and (max-width: 650px) {
.notes {padding: 10px;}
.ram-botten {height: 13px;}
.notes::before, .notes::after {width: 13px; box-shadow: unset;}
.notes.list-view .note {grid-template-columns: 88px 1fr auto;}

.note {box-shadow:unset; border: unset; margin: 4px;}
.note .bild-text-knapp img {width: 80px !important;}
}



@media screen and (max-width: 600px) {
.notes .note, .notes .note > * {display: flex; align-items: center; flex-direction: column!important; text-align: center; gap: 0;}
.notes .note-meta {gap: 0!important;}
.notes .bild-text-knapp img {width: 150px!important; height: 70px!important; }

}