.wf-form-form {
    width: 100%;
    position:relative;
}

.wf-standard-form .wf-label {
    width: 100%!important;
    float: none !important;
    margin-bottom: 5px;
}

.wf-standard-form .wf-input {
    width: 100%!important;
    float: none !important;
}
.wf-form {
    margin: auto;
    padding: 0px;
    list-style-type: none;
    position:relative;
}

.wf-form fieldset {
    background: white;
    border: 0 none;
    border-radius: 5px;
    padding: 50px 50px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.wf-form input:not([type="button"]):not([type="submit"]):not(.wf-tag-input input), .wf-form select .wf-form textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 13px;
}

.wf-form fieldset:not(:first-of-type){
    display:none;
}

.wf-form .fieldset-condition-inactive {
    display:none!important;
}

.wf-form .conditions {
    text-align: center;
    margin: 20px 0px;
}

.wf-form .condition {
    box-sizing: border-box;
    border-color: #ccc;
    border-radius: 99em;
    color: black;
    outline: none;
}
.wf-form .condition:hover,
.wf-form .condition:focus {
    background-color: white;;
    color: black;
}

.wf-form .condition-active,
.wf-form .condition-active:hover,
.wf-form .condition-active:focus,
.wf-form .condition:active {
    background-color: black;
    color: white;
}

.wf-form .invalid {
    border-color: red!important;
    border-style: solid!important;
    border-width: 2px!important;
}

.wf-progressbar {
    display: flex;
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    overflow: hidden;
    counter-reset:step;
    padding: 0;
}
.wf-progressbar li {
    flex: 1;
	list-style-type: none;
	color: white;
	text-transform: uppercase;
    font-weight: bold;
	font-size: 12px;
    text-align: center;
	float: left;
	position: relative;
}
.wf-progressbar li:before {
	content: counter(step);
	counter-increment: step;
    text-align:center;
    font-weight: bold;
	width: 30px;
	line-height: 30px;
	display: block;
	font-size: 14px;
	color: #333;
	background: white;
	border-radius: 50%;
	margin: 0 auto 5px auto;
    z-index: 2;
}
/*progressbar connectors*/
.wf-progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 14px;
    z-index: -1;
}
.wf-progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.wf-progressbar li.active:before,  .wf-progressbar li.active:after{
	background: black;
	color: white;
}

.wf-progressbar-container h3:not(.last-active) {
     display:none;
 }
 .wf-progressbar-container h3 {
     text-align: center;
 }

.action-buttons {
    text-align: center;
}

.wf-label {
    width: 100%;
}

.wf-input input,
.wf-input {
    width: 100%;
}

.wf-product-submit-class,
.wf-event-submit-class,
.wf-post-submit-class,
.wf-place-submit-class,
.wf-stream-submit-class {
    max-width: 200px !important;
    background-color: #e91e90 !important;
    color: #fff !important;
    border: 2px solid #e91e90 !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}
.wf-product-submit-class:hover,
.wf-event-submit-class:hover,
.wf-post-submit-class:hover,
.wf-place-submit-class:hover,
.wf-stream-submit-class:hover {
    background-color: #d4177f !important;
    border-color: #d4177f !important;
}
#wf-product-submit-draft,
#wf-event-submit-draft,
#wf-post-submit-draft,
#wf-place-submit-draft,
#wf-stream-submit-draft {
    max-width: 200px !important;
    background-color: transparent !important;
    color: #e91e90 !important;
    border: 2px solid #e91e90 !important;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}
#wf-product-submit-draft:hover,
#wf-event-submit-draft:hover,
#wf-post-submit-draft:hover,
#wf-place-submit-draft:hover,
#wf-stream-submit-draft:hover {
    background-color: #e91e90 !important;
    color: #fff !important;
}

/* Action bar holding the Publish/Update (and Save-as-draft) buttons. Cleared
   and full width so it always renders at the BOTTOM of the form, below every
   field — including the conditionally shown subscription/SLA fields — instead
   of floating up to the top. */
.wf-form-actions {
    clear: both;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.wf-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 1px;
    box-sizing: border-box;
}
.wf-label {
    float: left;
    min-height: 1px;
}
.wf-label label {
    font-size: 15px;
    font-weight: bold;
}
.wf-label label span {
    color: red;
}
.wf-input {
    float:left;
    position: relative;
    box-sizing: border-box;
}

.wf-input span {
    font-size: 12px;
    font-style: italic;
    margin: 2px 0px 5px;
    display: block;
}
.wf-field:after {
    clear: both;
    content: "";
    display:table;
}
.img-container {
    position:relative;
    text-align: center;
    cursor: pointer;
}

.wf-image-gallery-container {
    display:flex;
    flex-flow: row wrap;
}

.wf-image-upload-gallery-img > span {
    margin-right: 10px;
}

}

.wf-multi-file-container::-webkit-scrollbar {
    display: none;
}

.wf-multi-file-uploader {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.wf-multi-file-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    gap: 10px;
    padding-bottom: 17px;
    margin: 0 auto;
}

/* Ensure maximum width in context of .media sections */
.media-wf_product_form .wf-multi-file-uploader,
.media-wf_product_form .wf-multi-file-container {
    width: 100% !important;
    max-width: 100% !important;
}
.wf-multi-file-uploader-img {
    width: 150px;
    height: 150px;
}
.wf-multi-file-uploader-img.wf-slot-hidden {
    display: none;
}
.wf-multi-file-uploader-img:first-child {
    width: 200px;
    height: 200px;
}

.wf-file-upload-dropzone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    width: 200px;
    height: 200px;
    border-style: dashed;
    border-width: 3px;
    background: transparent;
    color: white;
}
.wf-file-upload-dropzone i {
    font-size: 2.5em;
    opacity: 0.5;
}
.wf-file-upload-dropzone span {
    font-size: 0.85em;
}
.wf-file-upload-dropzone .wf-upload-max-size {
    font-size: 0.7em;
    opacity: 0.5;
}
.wf-multi-file-uploader-btn {
    display:flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 150px!important;
    height: 150px!important;
    border-style: dashed;
    border-width: 3px;
    position: relative;
    overflow: hidden;
}
.wf-upload-plus {
    font-size: 48px !important;
    font-weight: 300;
    line-height: 1;
    color: white !important;
    opacity: 0.5;
}
.wf-multi-file-uploader-btn > .fa-times {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px !important;
    line-height: 1;
    color: #fff;
    background: rgba(20, 20, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.wf-multi-file-uploader-btn:hover > .fa-times,
.wf-multi-file-uploader-btn:focus-within > .fa-times {
    opacity: 1;
    transform: scale(1);
}
.wf-multi-file-uploader-btn > .fa-times:hover {
    background: #e02424;
    border-color: #e02424;
}
@media (hover: none) {
    .wf-multi-file-uploader-btn > .fa-times {
        opacity: 1;
        transform: scale(1);
    }
}

.wf-multi-file-uploader-btn > img,
.wf-multi-file-uploader-btn > video,
.wf-multi-file-uploader-btn > .wf-thumb-audio {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
}

/* Audio has no visual frame — show a centred music icon instead */
.wf-multi-file-uploader-btn > .wf-thumb-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wf-border, rgba(0, 0, 0, 0.06));
    color: var(--wf-text, #555);
}

.wf-uploader-btn-main {
    width: 200px!important;
    height: 200px!important;
}

/* Tablet: medium thumbnails so several fit per row before wrapping */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .wf-multi-file-uploader-img {
        width: 130px;
        height: 130px;
    }
    .wf-multi-file-uploader-img:first-child {
        width: 170px;
        height: 170px;
    }
    .wf-multi-file-uploader-btn {
        width: 130px !important;
        height: 130px !important;
    }
    .wf-uploader-btn-main {
        width: 170px !important;
        height: 170px !important;
    }
}

.wf-summary-sections {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wf-summary-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
}
.wf-summary-label {
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 6px;
}
.wf-summary-value {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.wf-summary-value.wf-summary-richtext {
    text-align: left;
}
.wf-summary-value.wf-summary-richtext h1,
.wf-summary-value.wf-summary-richtext h2,
.wf-summary-value.wf-summary-richtext h3,
.wf-summary-value.wf-summary-richtext h4 {
    margin: 0.8em 0 0.3em;
}
.wf-summary-value.wf-summary-richtext h1:first-child,
.wf-summary-value.wf-summary-richtext h2:first-child,
.wf-summary-value.wf-summary-richtext h3:first-child {
    margin-top: 0;
}
.wf-summary-value.wf-summary-richtext ul {
    list-style-type: disc !important;
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.wf-summary-value.wf-summary-richtext ol {
    list-style-type: decimal !important;
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.wf-summary-value.wf-summary-richtext li {
    display: list-item;
    list-style: inherit !important;
    margin: 0.2em 0;
}
.wf-summary-value.wf-summary-richtext table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8em 0;
}
.wf-summary-value.wf-summary-richtext th,
.wf-summary-value.wf-summary-richtext td {
    border: 1px solid rgba(255,255,255,0.15);
    padding: 6px 10px;
    text-align: left;
}
.wf-summary-value.wf-summary-richtext blockquote {
    border-left: 3px solid rgba(255,255,255,0.2);
    margin: 0.5em 0;
    padding: 0.3em 1em;
    opacity: 0.85;
}

.submit-summary img {
    max-width: 100px;
}

.wf-card-summary-container {
    display: flex;
    flex-flow: row wrap;
}

.wf-card-summary-container > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.loading {
    border: 4px solid rgba(0, 0, 0, .1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite !important;
    display: none;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
  
.wf-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: transparent;
}
.wf-delete-icon {
    color: red;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.fa-trash:hover {
    color: red;
}
.img-container:hover .wf-overlay {
    opacity: 0.4;
    background-color: transparent;
}
.img-container:hover img {
    opacity: 0.4;
}
.wf-radio {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
}
.wf-radio label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}
.wf-radio input[type=radio] {
    margin: 0;
    width: auto !important;
    flex-shrink: 0;
}
.wf-checkbox {
    display: block;
    clear: both;
    text-align: left;
}
.wf-checkbox-block {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    max-width: 100%;
    word-break: break-word;
    text-align: left;
}
.wf-checkbox-block input[type=checkbox] {
    margin: 0;
    width: auto !important;
    flex-shrink: 0;
}
input[type=url],
select,
input[type=datetime-local] {
    width: 100%;
    padding: 8px 16px;
    height: 44px;
    border: 1px solid #666;
    border-radius: 3px;
    background-color: white;
}

#wf-osm-marker-loading {
    position: absolute;
    z-index: 401;
    right: 10px;
    bottom: 50px;
}

.modal {
    display:none;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    position:   fixed;
    z-index:    10;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background-color: rgba( 255, 255, 255, .6 );
    font-size: 1.5em;
}
.wf-file-too-big {
    margin-left: 5px;
}
.wf-country-dropdown {
    width: 97%;
    background-color: white;
    height: 40px;
    border: 1px solid #ddd;
    color: #666;
    padding: 0px;
    padding-left: 12px;
}

.wf-tag-input {
    cursor: text;
    border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
    margin: 0px 0px 10px;
    display:flex;
    flex-flow: row wrap;
}

.wf-tag-input > input {
	padding: 15px;
	border-radius: 3px;
	box-sizing: border-box;
	color: #2C3E50;
	font-size: 13px;
    border: none;
    width: 0;
}

.wf-tag-container {
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    cursor: default;
}
.wf-tag-container > div > i {
    align-self: flex-start;
    margin-left: 3px;
    color: red;
    cursor: pointer;
}
.wf-tag-container > div > label {
    margin-top: 5px;
    color: white!important;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.wf-tag-container > div {
    display: flex;
    align-items: flex-end;
    margin-left: 5px;
    padding: 5px;
    border: 1px solid #ccc;
	border-radius: 3px;
    background: #18191A;
}

.wf-autocomplete-cards {
    display:flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
    line-height: 1.5;
}

.wf-autocomplete-input li {
    background-color: white;
    border-style: solid;
}

.wf-autocomplete-input td {
    padding-left: 0px!important;
    padding-top: 0px!important;
}
.ui-autocomplete {
    z-index: 100!important;
}
.wf-user-card {
    display: flex;
    align-items: center;
    margin-left: 0px!important;
    background-color: white;
    color: #555555;
    width: 250px;
    height: 60px;
    margin:5px;
}
.wf-user-card .wf-user-card-info {
    width:auto;
    text-align:right;
    padding-top:3px;
    margin-right: 5px;
    font-weight: bold;
    font-size: 15px;
}

.wf-user-card > img {
    border-radius: 50%;
    height: 100%;
    margin-right: 5px;
}

.wf-user-card .wf-user-card-close {
    width:10px;
    height:10px;
    float:right;
    right:-12px;
    top:-5px;
    cursor:pointer;
    font-size:15px;
}

.wf-form h1,
.wf-form h2,
.wf-form h3,
.wf-form h4,
.wf-form h5,
.wf-form h6 {
    font-weight: bold;
}
.wf-forms {
}
.ui-menu {
        list-style:none;
        padding: 0;
        margin: 0;
        display:block;
        width:227px;
        background-color: white;
        border-style: solid;
        border-color: #ddd;
        border-width: 1px;
        cursor: pointer;
        font-size: 14px;
}
.ui-menu-item {
    padding: 10px;
}
.wf-edit-table {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 0px;
}

.wf-edit-table tr {
    border-radius:5px;
}

.wf-edit-table i {
    padding-left: 20px;
}

.wf-edit-table td {
    border-style: none;
}
.wf-edit-table tr:first-child td:first-child {
    border-top-left-radius: 5px;
}
.wf-edit-table tr:first-child td:last-child {
    border-top-right-radius: 5px;
}
.wf-edit-table tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}
.wf-edit-table tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}
.wf-edit-table tr td {
    min-height: 100px!important;
    vertical-align: middle;
    text-align: center;
}

.wf-edit-table tr td:nth-child(1) {
    width: 15%;
}
.wf-edit-table tr td:nth-child(2) {
    text-align:left;
    word-break: break-word;
}

.wf-edit-table a {
    word-break: break-word;
}

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 5px 0;
  border-radius: 6px;
  font-weight: 900;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: calc(100% + 10px);
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.wf-pagination-panel {
    background-color: white;
    border-radius: 5px;
}
.wf-pagination-btn {
    color: black;
    border-style: none;
}
.wf-pagination-btn:hover {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-btn:active {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-btn:focus {
    color: grey;
    border-style: none;
    background-color: transparent;
}
.wf-pagination-panel {
    display: flex;
    align-items: center;
    margin-left: auto;
    width: fit-content;
    float: right;
}
.wf-pagination-panel label {
    position: relative;
    bottom: 5px;
    font-size: 16px;
}

.wf-edit-no-element {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.wf-view-review-table {
    border-collapse: separate;
    border-spacing: 0 5px;
}
.wf-view-review-table tr,
.wf-view-review-table th,
.wf-view-review-table td,
.wf-view-review-table {
    border-style: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content div {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-size: 14px;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.wf-post-type-story-select tr,
.wf-post-type-story-select th,
.wf-post-type-story-select td,
.wf-post-type-story-select table {
    border-style: none;
    vertical-align: middle;
}

.wf-change-post-type-story {
    cursor: pointer;
}
.wf-place-desc > span {
    display: flex;
}
.wf-place-post-list,
#wf-visible-places {
    margin-top: 16px;
    display:grid;
    width:100%;
    grid-column-gap: 5%;
}
.wf-place-details {
    display:flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    border-radius: 3px;
    padding-bottom: 20px;
}

.wf-place-actions {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    margin-left: 5px;
}

.wf-place-action-buttons {
    display: flex;
    width: 90%;
}

.wf-place-action-buttons button {
    font-size: 18px;
    font-weight: bold;
    background-color: #18191A;
    margin-right: 10px;
    padding: 4px 16px;
    border: none;
    border-radius: 0px;
    color: white;
}
.wf-place-action-buttons button:hover {
    text-decoration: underline;
    background-color: #18191A;
    color: white;
    font-weight: bold;
    border-radius: 0px;
}
.wf-place-action-buttons button:active,
.wf-place-action-buttons button:focus {
    border: 2px solid transparent;
    background-color: #18191A;
    color: white;
    border-radius: 0px;
}

.wf-place-tabs {
    position: relative;
    z-index: 1;
    display:flex;
    align-items: flex-start;
    width: 90%;
}
.wf-place-tabs > .tab {
    position: sticky;
    margin-right: 5px;
}
.wf-place-tabs > .tab > button {
    position: relative;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: bold;
    font-size: 18px;
}
.wf-place-tabs > .tab > button > i {
    width: 25px;
}
.wf-place-tabs > .tab label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    z-index: 1;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
.wf-place-details-tab {
    display:flex;
    align-items: flex-start;
}
.wf-place-heading {
    position:relative;
    z-index: 2;
    width: 100%;
    display:flex;
    margin-bottom: 20px;
    background-color: #18191A;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.wf-place-heading h1 {
    color: white;
    font-weight: bold;
    margin: 16px 0 16px;
}
.wf-place-heading > span {
    width: 90%;
    display: flex;
    align-items: flex-start;
    align-items: center;
    position: sticky;
}
.wf-place-icon-and-content {
    display:flex;
}
.wf-place-icon-and-content > i {
    margin-right: 10px;
}
.wf-place-post-item,
.wf-place-desc {
}
.wf-place-image-container {
    background-color: white;
    border-radius: 50%;
    position:relative;
    width:100%;
    padding-top: 100%;
    border: 1px solid black;
}
.wf-place-image-container img {
}
.wf-place-new::after {
    position:absolute;
    top: 0;
    right: 0;
    content: "NEW";
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 5px;
}
.wf-place-image {
    position:relative;
    width: 10%;
    overflow:hidden;
    margin: 3px 10px;
}
.wf-place-image:before {
    content: "";
    display:block;
    padding-top: 100%;
}
.wf-place-image-container > a > img,
.wf-place-image > img,
.wf-marker-popup-text img {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}
.leaflet-popup-tip{
    box-shadow: none;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}
.wf-new-marker-popup,
.wf-new-marker-popup .leaflet-popup-content-wrapper,
.wf-place-marker-tooltip  {
    background-color: transparent;
    border: none;
}

.wf-place-marker-tooltip::before {
    border-top-color: #18191A;
}
.wf-place-marker-tooltip .leaflet-popup-tip,
.wf-new-marker-popup .leaflet-popup-tip {
    background-color: #18191A;
}
.wf-place-marker-tooltip .leaflet-popup-content,
.wf-new-marker-popup .leaflet-popup-content {
    margin: 0;
    background-color: transparent;
    border-radius: 10px;

}
.wf-new-marker-content {
    margin: 0px;
    background-color: transparent;
}
.wf-new-marker-text {
    padding: 10px 10px;
    margin: 0;
    color: #18191A99;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    background-color: #18191A;
    color: white;
    border-bottom: 1px solid #18191A;
}

/* .wf-new-marker-text:after {
    margin-top: 10px;
    content: "";
    display: relative;
    width: 80%;
    border-bottom: 1px solid #18191A99;
} */

.wf-new-marker-circle {
    padding-top: 10px;
    display: flex;
    align-items: center;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.wf-new-marker-choose {
    padding: 10px 0;
    text-align: center;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.wf-new-marker-choose a {
    font-size: 16px;
    color: #18191A;
}

.wf-new-marker-circle > div {
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0px;
    text-align: center;
    font-weight: bold;
    flex-grow: 1;
    color: #18191A99;
}
.wf-marker-popup-content {
    background-color: white;
    border-radius: 10px;
}

.wf-marker-popup-text {
    display:flex;
    align-items: center;
    margin-bottom: 5px;
    background-color: #18191A;
    border-bottom: 1px solid #18191A;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.wf-marker-popup-text h6 {
    margin-left:10px;
    margin-bottom: 0.5rem;
    color: white;
    white-space: initial;
    text-align: center;
    width: 100%;

}
.wf-marker-popup-text > div:first-child {
    background-color: white;
    border-radius: 50%;
    position:relative;
    width: 50px;
    height: 50px;
    min-width: 50px;
}

.wf-selected-address {
    position: absolute;
    color: #18191A;
    font-weight: bold;
    z-index: 999;
    padding: 5px 5px;
}

.wf-place-post-item > h5,
.wf-place-post-item > div,
.wf-place-content > h5,
.wf-place-content > div {
    text-align: center;
}

.wf-place-count-labels {
    display: flex;
    align-items: flex-end;
    padding: 5px;
}
.wf-place-child-label > i {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    color: #18191A;
}
.wf-place-child-label > span {
    position:relative;
    top: 5px;
    right: -2px;
}

.wf-place-child-label > label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    position: relative;
    top: -14px;
    right: 12px;
    padding: 5px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-place-child-label {
    flex-grow: 1;
    display:flex;
    justify-content: center;
    padding: 8px 0px;
    font-weight: bold;
    font-size: 14px;
}

.wf-unread-posts {
    font-weight: bold;
}

.leaflet-marker-icon > div > label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    position: relative;
    top: -40px;
    right: -20px;
    padding: 5px;
    animation: mypulse 2s infinite;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-place-pin > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid white;
}
.wf-place-pin-large > span {
    cursor: pointer;
    background-color: #18191A;
    width: 3rem;
    height: 3rem;
    display: block;
    left: -1.5rem;
    top: -1.5rem;
    position: relative;
    border-radius: 3rem 3rem 0;
    transform: rotate(45deg);
    border: 1px solid white;
}

@-webkit-keyframes mypulse {
	0% {
		-webkit-transform: scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

    70% {
		-webkit-transform: scale(1.05);
		-webkit-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.0);
	}

	100% {
		-webkit-transform: scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}
@keyframes mypulse {
	0% {
		transform: scale(1);
		-moz-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

    70% {
		transform: scale(1.05);
		-moz-transform: scale(1.05);
		box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
	}

	100% {
		transform: scale(1);
		-moz-transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}

.wf-place-pin > span > img,
.wf-place-pin-large > span > img {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: black;
    font-size: 1.5rem;
    border-radius: 50%;
    border: 1px solid #18191A;
}

.wf-popup-loading,
.wf-popup-checked,
.wf-place-pin label,
.wf-place-pin-large label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: bold;
    background-color: red;
    color: white!important;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    right: 2px;
    top: -16px;
    padding: 5px;
    animation: mypulse2 2s infinite;
    transform: rotate(-45deg) scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
	-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}

.wf-popup-loading,
.wf-popup-checked {
    animation: none!important;
    transform: rotate(0deg) scale(1)!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    display:none;
    right: -8px;
    top: -8px;
}

.wf-place-loading {
    animation: none!important;
    transform: rotate(-45deg) scale(1)!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
}
@-webkit-keyframes mypulse2 {
	0% {
        -webkit-transform: rotate(-45deg) scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

	70% {
        -webkit-transform: rotate(-45deg) scale(1.05);
		-webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.2);
	}

	100% {
        -webkit-transform: rotate(-45deg) scale(1);
		-webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}
@keyframes mypulse2 {
	0% {
        transform: rotate(-45deg) scale(1);
        -moz-box-transform: rotate(-45deg) scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
	}

	70% {
        transform: rotate(-45deg) scale(1.05);
        -moz-box-transform: rotate(-45deg) scale(1.05);
		box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
	}

	100% {
        transform: rotate(-45deg) scale(1);
        -moz-box-transform: rotate(-45deg) scale(1);
		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
		-moz-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
	}
}

.wf-place-pin-small label {
    font-size: 1rem;
}

.wf-place-pin-loading > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF
}
.wf-place-pin-loading > span::after {
    cursor: pointer;
    display: table-cell;
    font-style: normal;
    font-variant: normal;
    font-size: 1rem;
    color: white;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position:relative;
    text-align:center;
    vertical-align:middle;
    animation: fa-spin 2s ease-in-out infinite;
}

.wf-place-pin-checked > span {
    cursor: pointer;
    background-color: #18191A;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF
}

.wf-place-pin-checked > span::after {
    cursor: pointer;
    display: table-cell;
    font-style: normal;
    font-variant: normal;
    font-size: 1rem;
    color: white;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    content: "\f00c";
    transform: rotate(-45deg);
    width: 2rem;
    height: 2rem;
    position:relative;
    text-align:center;
    vertical-align:middle;
}

.wf-place-pin-small > span {
    cursor: pointer;
    background-color: #18191A;
    width: 20px;
    height: 20px;
    display: block;
    left: -10px;
    top: -10px;
    position: relative;
    border-radius: 20px 20px 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-place-pin-smaller > span {
    cursor: pointer;
    background-color: #18191A;
    width: 1.0rem;
    height: 1.0rem;
    display: block;
    left: -0.5rem;
    top: -0.5rem;
    position: relative;
    border-radius: 1rem 1rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-place-pin-new > span {
    visibility: hidden;
    cursor: pointer;
    background-color: #AAAAAA;
    width: 2rem;
    height: 2rem;
    display: block;
    left: -1rem;
    top: -1rem;
    position: relative;
    border-radius: 2rem 2rem 0;
    transform: rotate(45deg);
    border: 1px solid #FFFFFF;
}

.wf-map-filter-container {
    display:flex;
    margin-bottom: 10px;
}
.wf-map-filter-button {
    margin-right: 5px;
    min-width: 100px;
    height: 40px;
    background-color: white;
    border-radius: 20px;
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.wf-map-filter-button-active {
    background-color: black;
    color: white;
}

#osm-map-select,
#osm-map {
    background-color: #18191A;
    z-index: 0;
}
.wf-image-with-modal {
    position: relative;
    z-index: 4;
}
.wf-image-with-modal > img {
  cursor: pointer;
  transition: 0.3s;
}

.wf-image-with-modal > img:hover {opacity: 0.7;}

/* The Modal (background) */
.img-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.img-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


/* Add Animation */
.img-modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.img-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1!important;
  font-size: 40px!important;
  font-weight: bold;
  font-style: normal!important;
  font-family: Arial, sans-serif!important;
  line-height: 1!important;
  transition: 0.3s;
}

.img-modal-close:hover,
.img-modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .img-modal-content {
    width: 100%;
  }
}

@media (min-width: 600px) {
    .wf-place-post-list,
	#wf-visible-places {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 1024px) {
    .wf-place-post-list,
	#wf-visible-places {
		grid-template-columns: repeat( 4, 1fr );
	}
    .wf-new-marker-circle > div:hover {
        transform: scale(1.2);
        color: #18191A;
    }

    .wf-place-marker-tooltip  {
        min-width: 300px;
        max-width: 300px;
        border-radius: 10px;
        padding: 0px;
    }
}
@media only screen and (max-width: 600px) {

    .wf-place-marker-tooltip .leaflet-popup-content-wrapper{
        background-color: #18191A;
        border: none;
        border-radius: 10px;
    }
    .wf-place-marker-tooltip .leaflet-popup-tip {
        background-color: #18191A;
    }
    .wf-place-marker-tooltip .leaflet-popup-content {
        background-color: white;
        border-radius: 10px;
        margin: 0;
    }
    .wf-place-marker-tooltip  {
        border-radius: 10px;
    }
    .wf-place-details {
        flex-flow: column nowrap;
    }
    .wf-place-details > .wf-place-image {
        margin: 0px;
        width: 80%;
    }
  .wf-form,
  .wf-popup > div {
    width: 100%!important;
    max-width: 100%!important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .wf-form-form {
    width: 100%!important;
    max-width: 100%!important;
    padding: 0 6px !important;
    box-sizing: border-box;
  }

  /* Override any theme page container that constrains form width */
  body:has(.wf-form-form) > .sidebar,
  body:has(.wf-form-form) > div > .sidebar {
    display: none !important;
  }
  .default-page:has(.wf-form-form),
  .default-page-content:has(.wf-form-form),
  .entry-content:has(.wf-form-form),
  .site-main:has(.wf-form-form),
  .content-area:has(.wf-form-form),
  article:has(.wf-form-form) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .wf-form fieldset {
    padding: 5px 0;
  }

  .wf-form,
  .entry-content .wf-form {
    padding: 0 !important;
    margin: 0;
    padding-left: 0 !important;
  }

  .wf-field {
    padding: 5px 0;
  }

  .wf-progressbar {
      margin-bottom: 5px;
  }

  .wf-progressbar li:not(.last-active):before {
      content: "";
      width:10px;
      height:10px;
      position:relative;
      top: 10px;
  }

  .wf-label,
  .wf-standard-form .wf-label {
      width: 100%!important;
      float: none;
      margin-bottom: 5px;
  }
  .wf-input,
  .wf-standard-form .wf-input {
      width: 100%!important;
      float: none;
  }

  /* Mobile-friendly TinyMCE toolbar buttons */
  .mce-toolbar .mce-btn {
      min-width: 48px;
      min-height: 48px;
      border: 1px solid rgba(128, 128, 128, 0.3) !important;
      border-radius: 6px !important;
      margin: 2px !important;
  }
  .mce-toolbar .mce-btn button {
      min-width: 48px;
      min-height: 48px;
      padding: 10px !important;
  }
  .mce-toolbar .mce-btn .mce-ico {
      font-size: 20px;
  }
  .mce-toolbar .mce-btn-group {
      padding: 2px !important;
  }
  .mce-toolbar-grp .mce-flow-layout {
      overflow-x: auto;
  }

  .wf-edit-table i {
      padding-left:0px;
  }
  .wf-multi-file-container {
      width: 100%;
      justify-content: center;
  }
  .wf-multi-file-uploader-img {
      width: 100px;
      height: 100px;
  }
  .wf-multi-file-uploader-img:first-child {
      width: 140px;
      height: 140px;
  }
  .wf-multi-file-uploader-btn {
      width: 100px !important;
      height: 100px !important;
  }
  .wf-uploader-btn-main {
      width: 140px !important;
      height: 140px !important;
  }

  .wf-place-tabs {
      flex-flow: column nowrap;
      width: 100%;
      align-items: stretch;
  }
  .wf-place-tabs > .tab {
      z-index: 1;
      display: flex;
      margin-bottom: 20px;
  }
  .wf-place-tabs > .tab > button {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      border-radius: 5px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
  }
  .wf-place-tabs > .tab label {
      top: 5px;
      left: 20px;
  }
  .wf-place-tabs > .tabcontent {
      width: 100%;
  }
  .wf-place-tabs .tablinks > span {
      display:none;
  }
  .wf-place-heading {
      position: sticky;
      margin-bottom: 0px;
  }
  .wf-place-actions h1 {
      font-size: 15px!important;
  }
  .wf-place-image {
      width: 20%;
  }

  .wf-place-actions-dropdown {
      position: relative;
  }

  .wf-place-actions-dropdown > button:hover,
  .wf-place-actions-dropdown > button:active,
  .wf-place-actions-dropdown > button:focus,
  .wf-place-actions-dropdown > button {
      background-color: white!important;
      color: #18191A!important;
  }

  .wf-place-action-buttons {
      display: none;
      position: absolute;
      width: auto;
      right: 5px;
      background-color: #f1f1f1;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .wf-place-action-button {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .show {
      display:block;
  }
  #wf-osm-marker-loading {
        right: -3px;
        bottom: 50px;
    }

}
/* Style the tab */
.tab {
  float: left;
  background-color: white;
  height: 100%;
  top: 0;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 16px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  margin: 4px 0;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #18191A99;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #18191A;
  color: white;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 90%;
  height: 100%;
}


#comments {
    margin: 50px 0;
}

.wp-block-video {
    margin-top: 29px;
    margin-bottom: 29px;
}

fieldset.wf-fieldset {
    border: solid 1px #aaa;
}

/* ========== Dark Mode Support ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --wf-bg: #1a1a1a;
        --wf-bg-alt: #2d2d2d;
        --wf-text: #e0e0e0;
        --wf-border: #404040;
    }
}
body.dark-mode {
    --wf-bg: #1a1a1a;
    --wf-bg-alt: #2d2d2d;
    --wf-text: #e0e0e0;
    --wf-border: #404040;
}

@media (prefers-color-scheme: dark) {
    .wf-form fieldset,
    .wf-form .condition:hover,
    .wf-form .condition:focus,
    .wf-autocomplete-input li,
    .wf-pagination-panel,
    .wf-edit-no-element,
    .wf-place-image-container,
    .wf-marker-popup-content,
    .wf-marker-popup-text > div:first-child,
    .wf-country-dropdown,
    .tab {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }

    .wf-form .condition {
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    .wf-pagination-btn,
    .dropdown-content div,
    .tablinks {
        color: var(--wf-text, #e0e0e0) !important;
    }

    .wf-map-filter-button {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    /* WP Editor */
    .wp-editor-wrap,
    .wp-editor-container,
    .wp-editor-tools {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        border-color: var(--wf-border, #404040) !important;
    }
    .wp-editor-area {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .wp-switch-editor {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    /* TinyMCE toolbar and all wrappers */
    .mce-tinymce,
    .mce-container,
    .mce-panel,
    .mce-stack-layout,
    .mce-stack-layout-item,
    .mce-edit-area,
    .mce-toolbar .mce-btn-group,
    .mce-container-body,
    .mce-menubar,
    .mce-toolbar-grp,
    .mce-flow-layout,
    .mce-statusbar {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        border-color: var(--wf-border, #404040) !important;
    }
    .mce-container-body button,
    .mce-widget button,
    .mce-btn button {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .mce-container-body button:hover,
    .mce-container-body button:active,
    .mce-btn:hover button {
        background-color: var(--wf-border, #404040) !important;
    }
    .mce-ico {
        color: var(--wf-text, #e0e0e0) !important;
    }

    /* Upload dropzone */
    .wf-file-upload-dropzone,
    .wf-multi-file-uploader-btn {
        border-color: var(--wf-border, #404040) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .img-container {
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }

    /* Form inputs */
    .wf-form input:not([type="button"]):not([type="submit"]),
    .wf-form select,
    .wf-form textarea {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
        border-color: var(--wf-border, #404040) !important;
    }

    .wf-form label,
    .wf-label label,
    .wf-help,
    .wf-form p,
    .wf-form span,
    .wf-form .wf-field,
    .wf-form h1, .wf-form h2, .wf-form h3, .wf-form h4 {
        color: var(--wf-text, #e0e0e0) !important;
    }

    fieldset.wf-fieldset,
    .wf-form fieldset,
    .wf-form-form fieldset {
        border-color: var(--wf-border, #404040) !important;
        background-color: var(--wf-bg-alt, #2d2d2d) !important;
    }

    /* Popup containers */
    .wf-popup [class*="popup-contents-"] {
        background-color: var(--wf-bg, #1a1a1a) !important;
        color: var(--wf-text, #e0e0e0) !important;
    }
    .wf-popup {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
}

body.dark-mode .wf-form fieldset,
body.dark-mode .wf-form .condition:hover,
body.dark-mode .wf-form .condition:focus,
body.dark-mode .wf-autocomplete-input li,
body.dark-mode .wf-pagination-panel,
body.dark-mode .wf-edit-no-element,
body.dark-mode .wf-place-image-container,
body.dark-mode .wf-marker-popup-content,
body.dark-mode .wf-marker-popup-text > div:first-child,
body.dark-mode .wf-country-dropdown,
body.dark-mode .tab {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-form .condition {
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wf-pagination-btn,
body.dark-mode .dropdown-content div,
body.dark-mode .tablinks {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-map-filter-button {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wp-editor-wrap,
body.dark-mode .wp-editor-container,
body.dark-mode .wp-editor-tools {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wp-editor-area {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wp-switch-editor {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-tinymce,
body.dark-mode .mce-container,
body.dark-mode .mce-panel,
body.dark-mode .mce-stack-layout,
body.dark-mode .mce-stack-layout-item,
body.dark-mode .mce-edit-area,
body.dark-mode .mce-toolbar .mce-btn-group,
body.dark-mode .mce-container-body,
body.dark-mode .mce-menubar,
body.dark-mode .mce-toolbar-grp,
body.dark-mode .mce-flow-layout,
body.dark-mode .mce-statusbar {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-container-body button,
body.dark-mode .mce-widget button,
body.dark-mode .mce-btn button {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .mce-container-body button:hover,
body.dark-mode .mce-container-body button:active,
body.dark-mode .mce-btn:hover button {
    background-color: var(--wf-border, #404040) !important;
}
body.dark-mode .mce-ico {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-file-upload-dropzone,
body.dark-mode .wf-multi-file-uploader-btn {
    border-color: var(--wf-border, #404040) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .img-container {
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-form input:not([type="button"]):not([type="submit"]),
body.dark-mode .wf-form select,
body.dark-mode .wf-form textarea {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
    border-color: var(--wf-border, #404040) !important;
}
body.dark-mode .wf-form label,
body.dark-mode .wf-label label,
body.dark-mode .wf-help,
body.dark-mode .wf-form p,
body.dark-mode .wf-form span,
body.dark-mode .wf-form .wf-field,
body.dark-mode .wf-form h1,
body.dark-mode .wf-form h2,
body.dark-mode .wf-form h3,
body.dark-mode .wf-form h4 {
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode fieldset.wf-fieldset,
body.dark-mode .wf-form fieldset,
body.dark-mode .wf-form-form fieldset {
    border-color: var(--wf-border, #404040) !important;
    background-color: var(--wf-bg-alt, #2d2d2d) !important;
}
body.dark-mode .wf-popup [class*="popup-contents-"] {
    background-color: var(--wf-bg, #1a1a1a) !important;
    color: var(--wf-text, #e0e0e0) !important;
}
body.dark-mode .wf-popup {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* When edit form is open, collapse table spacing so there's no gap */
.wf-edit-table:has(.wf-edit-form-row) {
    border-spacing: 0 !important;
}
/* Edit form row injected after the clicked table row */
.wf-edit-form-row {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* Remove any spacing from wrapper divs and popup inside the edit row */
.wf-edit-form-row > td > div,
.wf-edit-form-row .wf-popup {
    padding: 0 !important;
    margin: 0 !important;
}
.wf-edit-form-row > td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}
.wf-edit-form-row:hover {
    background: transparent !important;
}

/* Edit popups: inline flow instead of fixed overlay */
#popup-wf_post_edit,
#popup-wf_product_edit,
#popup-wf_event_edit {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    z-index: auto !important;
    background-color: transparent !important;
}
/* Remove end filler inside inline edit popups */
#popup-wf_post_edit .wf-popup-end-filler,
#popup-wf_product_edit .wf-popup-end-filler,
#popup-wf_event_edit .wf-popup-end-filler {
    display: none !important;
}
.popup-contents-wf_post_edit,
.popup-contents-wf_product_edit,
.popup-contents-wf_event_edit {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 48px 10px 20px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    background-color: inherit !important;
    border: none !important;
    border-radius: 0 !important;
}
/* Consistent dark header bar across all edit forms */
.popup-contents-wf_post_edit::before,
.popup-contents-wf_product_edit::before,
.popup-contents-wf_event_edit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: 1;
}
/* Close button: top-right inside dark bar for all edit forms */
.popup-contents-wf_post_edit > [class*="popup-close-"],
.popup-contents-wf_product_edit > [class*="popup-close-"],
.popup-contents-wf_event_edit > [class*="popup-close-"] {
    position: absolute !important;
    top: 4px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 2;
    cursor: pointer;
}
#popup-wf_post_edit .wf-form,
#popup-wf_product_edit .wf-form,
#popup-wf_event_edit .wf-form {
    background: inherit !important;
}
#popup-wf_post_edit .wf-form fieldset,
#popup-wf_product_edit .wf-form fieldset,
#popup-wf_event_edit .wf-form fieldset {
    background: inherit !important;
    border-color: inherit !important;
}
#popup-wf_post_edit .wf-form fieldset legend,
#popup-wf_product_edit .wf-form fieldset legend,
#popup-wf_event_edit .wf-form fieldset legend {
    background: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}
#popup-wf_post_edit .wf-popup-end-filler,
#popup-wf_product_edit .wf-popup-end-filler,
#popup-wf_event_edit .wf-popup-end-filler {
    display: none !important;
}

/* Service fields builder */
#wm-service-fields-builder .wm-service-field-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#wm-service-fields-builder .wm-service-field-row input[type="text"] {
    flex: 1;
    min-width: 150px;
}
#wm-service-fields-builder .wm-service-field-row select {
    min-width: 100px;
}
#wm-service-fields-builder .wm-service-field-row label {
    white-space: nowrap;
    font-size: 0.9em;
}
#wm-service-fields-builder .wm-remove-service-field {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#wm-add-service-field {
    margin-top: 8px;
    cursor: pointer;
}

/* Variations builder */
#wf-variations-builder .wf-variation-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#wf-variations-builder .wf-variation-row input[type="text"] {
    flex: 2;
    min-width: 150px;
}
#wf-variations-builder .wf-variation-row input[type="number"],
#wf-variations-builder .wf-variation-row input[inputmode="decimal"] {
    flex: 1;
    min-width: 100px;
}
#wf-variations-builder .wm-price-wrap {
    flex: 1;
    min-width: 100px;
}
#wf-variations-builder .wm-price-wrap input {
    width: 100%;
}
#wf-variations-builder .wf-remove-variation {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#wf-add-variation {
    margin-top: 8px;
    cursor: pointer;
}

/* Category builder */
#wf-new-categories-builder {
    width: 100%;
}
.wf-new-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.wf-new-cat-inputs {
    flex: 1;
    display: flex;
    gap: 8px;
}
.wf-new-cat-inputs input[type="text"] {
    flex: 1;
}
.wf-new-cat-inputs select {
    flex: 1;
}
.wf-new-cat-remove {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
#wf-add-new-cat {
    margin-top: 4px;
    cursor: pointer;
}

/* Category tabs */
.wf-category-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 5px;
}
.wf-form .wf-category-tabs button.wf-cat-tab,
button.wf-cat-tab {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #ccc !important;
    border-bottom: 2px solid #ccc !important;
    background: #f0f0f0 !important;
    color: #888 !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    outline: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    line-height: 1.4;
}
.wf-form .wf-category-tabs button.wf-cat-tab:first-child,
button.wf-cat-tab:first-child {
    border-right: 1px solid #ccc !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab:last-child,
button.wf-cat-tab:last-child {
    border-left: 1px solid #ccc !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab:hover,
button.wf-cat-tab:hover {
    background: #e4e4e4 !important;
    color: #555 !important;
}
.wf-form .wf-category-tabs button.wf-cat-tab.active,
button.wf-cat-tab.active {
    background: #fff !important;
    color: #333 !important;
    border-bottom-color: #fff !important;
    border-top-color: #999 !important;
    border-left-color: #999 !important;
    border-right-color: #999 !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .wf-form .wf-category-tabs button.wf-cat-tab,
    button.wf-cat-tab {
        background: #1a1a1a !important;
        color: #777 !important;
        border-color: #404040 !important;
    }
    .wf-form .wf-category-tabs button.wf-cat-tab:hover,
    button.wf-cat-tab:hover {
        background: #252525 !important;
        color: #bbb !important;
    }
    .wf-form .wf-category-tabs button.wf-cat-tab.active,
    button.wf-cat-tab.active {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-bottom-color: #2d2d2d !important;
        border-top-color: #555 !important;
        border-left-color: #555 !important;
        border-right-color: #555 !important;
    }
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab,
body.dark-mode button.wf-cat-tab {
    background: #1a1a1a !important;
    color: #777 !important;
    border-color: #404040 !important;
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab:hover,
body.dark-mode button.wf-cat-tab:hover {
    background: #252525 !important;
    color: #bbb !important;
}
body.dark-mode .wf-form .wf-category-tabs button.wf-cat-tab.active,
body.dark-mode button.wf-cat-tab.active {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-bottom-color: #2d2d2d !important;
    border-top-color: #555 !important;
    border-left-color: #555 !important;
    border-right-color: #555 !important;
}

/* Status label beneath title */
.wf-status-label {
    font-size: 0.75em;
    opacity: 0.6;
    letter-spacing: 0.02em;
}

/* Portrait mode — post overview table full width */
@media (orientation: portrait) {
    .wf_edit_posts_overview {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .wf-edit-table {
        width: 100% !important;
    }

    .wf-edit-table tr td:nth-child(1) {
        width: 44px;
    }

    .wf-edit-table tr:not(.wf-edit-form-row) td:nth-child(1) img {
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 6px;
    }

    /* Actions column — fixed width, right-aligned */
    .wf-edit-table tr td:last-child {
        width: 90px;
        text-align: right !important;
        white-space: nowrap;
    }

    .wf-edit-table tr td {
        min-height: 50px !important;
        padding: 4px !important;
    }
}

/* Both orientations — full width table with buttons on right */
.wf_edit_posts_overview,
.wf_edit_products_overview,
.wf_edit_events_overview {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.wf-edit-table {
    width: 100% !important;
    max-width: 100vw !important;
    table-layout: auto !important;
    display: block !important;
    overflow-x: hidden !important;
}

.wf-edit-table > tbody {
    display: block !important;
    width: 100% !important;
}

.wf-edit-table > tbody > tr {
    display: table !important;
    width: 100% !important;
    table-layout: auto;
}

.wf-edit-table > tbody > tr.wf-edit-form-row {
    display: block !important;
    overflow-x: hidden !important;
}

.wf-edit-table > tbody > tr.wf-edit-form-row > td {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Prevent description text from overflowing form container */
.wf-form p.description,
.wf-form .wf-help,
.wf-form .wf-input span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

.wf-form p.description {
    font-size: 12px;
    font-style: italic;
}

/* Constrain edit form wrappers to prevent overflow */
.wf-edit-form-row td > div,
.wf-edit-form-row td > div > div {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.wf-edit-table tr td:last-child {
    text-align: right !important;
    white-space: nowrap;
    padding-right: 0 !important;
}

/* ============================================================
   Modernized story editor (TinyMCE) toolbar
   Flat, rounded buttons + consistent accent-tinted icons.
   Themed through custom properties that flip for BOTH dark
   triggers: the plugin's manual body.dark-mode toggle AND the
   theme's prefers-color-scheme: dark (rtsb_theme follows the OS
   scheme and never sets a body.dark-mode class). The vars live
   on .wp-editor-wrap so the toolbar AND the Visuell/Code tabs
   (which are siblings of the editor) both inherit them.
   ============================================================ */
.wf-form .wp-editor-wrap {
    --wf-tb-surface: #faf6f7;
    --wf-tb-border: #ece3e6;
    --wf-tb-shadow: rgba(91, 44, 44, .08);
    --wf-tb-ico: #5b2c2c;
    --wf-tb-ico-active: #a8204e;
    --wf-tb-ico-disabled: #cdbfc4;
    --wf-tb-hover: rgba(168, 32, 78, .12);
    --wf-tb-tab-active: #ffffff;
}
body.dark-mode .wf-form .wp-editor-wrap {
    --wf-tb-surface: #303033;
    --wf-tb-border: #45454c;
    --wf-tb-shadow: rgba(0, 0, 0, .45);
    --wf-tb-ico: #e4e4e7;
    --wf-tb-ico-active: #ff7ba8;
    --wf-tb-ico-disabled: #6c6c74;
    --wf-tb-hover: rgba(255, 255, 255, .10);
    --wf-tb-tab-active: #1f1f22;
}
@media (prefers-color-scheme: dark) {
    .wf-form .wp-editor-wrap {
        --wf-tb-surface: #303033;
        --wf-tb-border: #45454c;
        --wf-tb-shadow: rgba(0, 0, 0, .45);
        --wf-tb-ico: #e4e4e7;
        --wf-tb-ico-active: #ff7ba8;
        --wf-tb-ico-disabled: #6c6c74;
        --wf-tb-hover: rgba(255, 255, 255, .10);
        --wf-tb-tab-active: #1f1f22;
    }
}

/* Frame */
.wf-form .mce-tinymce.mce-container {
    border: 1px solid var(--wf-tb-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px var(--wf-tb-shadow) !important;
    overflow: hidden;
}
.wf-form .mce-tinymce .mce-toolbar-grp,
.wf-form .mce-tinymce .mce-menubar,
.wf-form .mce-tinymce .mce-statusbar {
    background: var(--wf-tb-surface) !important;
    border: 0 !important;
}
.wf-form .mce-tinymce .mce-toolbar-grp,
.wf-form .mce-tinymce .mce-menubar {
    border-bottom: 1px solid var(--wf-tb-border) !important;
    padding: 4px 6px !important;
}
.wf-form .mce-tinymce .mce-statusbar {
    border-top: 1px solid var(--wf-tb-border) !important;
}
.wf-form .mce-tinymce .mce-toolbar .mce-btn-group {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
}
.wf-form .mce-tinymce .mce-toolbar .mce-btn-group + .mce-btn-group {
    border-left: 1px solid var(--wf-tb-border) !important;
}

/* Flat, rounded buttons */
.wf-form .mce-tinymce .mce-btn,
.wf-form .mce-tinymce .mce-btn button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.wf-form .mce-tinymce .mce-btn {
    border-radius: 8px !important;
    margin: 1px !important;
    transition: background-color .15s ease;
}
.wf-form .mce-tinymce .mce-btn button {
    padding: 7px 8px !important;
}
.wf-form .mce-tinymce .mce-btn:hover,
.wf-form .mce-tinymce .mce-btn.mce-active {
    background: var(--wf-tb-hover) !important;
}

/* Consistent icon colour (also unifies the otherwise-teal link icons) */
.wf-form .mce-tinymce .mce-ico {
    font-size: 18px;
    color: var(--wf-tb-ico) !important;
}
.wf-form .mce-tinymce .mce-btn:hover .mce-ico,
.wf-form .mce-tinymce .mce-btn.mce-active .mce-ico {
    color: var(--wf-tb-ico-active) !important;
}
.wf-form .mce-tinymce .mce-btn.mce-disabled .mce-ico {
    color: var(--wf-tb-ico-disabled) !important;
}

/* Custom inline-image icon — tinted like the font icons via CSS mask
   (currentColor follows the .mce-ico colour, so it flips with the theme
   and tints on hover/active automatically) */
.wf-form .mce-tinymce .mce-i-wfimage {
    width: 20px !important;
    height: 20px !important;
    background-image: none !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='15'%20height='13'%20rx='2'/%3E%3Ccircle%20cx='7'%20cy='8'%20r='1.5'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M3%2014l4.5-4%203%202.5L14%209l3%203.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='15'%20height='13'%20rx='2'/%3E%3Ccircle%20cx='7'%20cy='8'%20r='1.5'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M3%2014l4.5-4%203%202.5L14%209l3%203.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Modern "Visuell / Code" switch tabs */
.wf-form .wp-editor-tabs {
    margin-bottom: -1px;
}
.wf-form .wp-switch-editor {
    border: 1px solid var(--wf-tb-border) !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--wf-tb-surface) !important;
    color: var(--wf-tb-ico) !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    margin: 0 0 0 4px !important;
}
.wf-form .wp-switch-editor:hover {
    color: var(--wf-tb-ico-active) !important;
}
.wf-form .wp-editor-wrap.tmce-active .switch-tmce,
.wf-form .wp-editor-wrap.html-active .switch-html {
    background: var(--wf-tb-tab-active) !important;
    color: var(--wf-tb-ico-active) !important;
}

/* ===========================================================================
   Inline edit-form readability + layout polish.
   Structure/spacing only — the light/dark palette comes from the active theme.
   Colour uses translucent overlays so it adapts to either mode.
   =========================================================================== */

/* (1) Group each field into a subtly darker card so the long edit form is
   easy to scan and sections stand apart. Translucent so it darkens on a dark
   theme and reads as a light-grey card on a light theme. */
.popup-contents-wf_post_edit .wf-field,
.popup-contents-wf_product_edit .wf-field,
.popup-contents-wf_event_edit .wf-field {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(128, 128, 128, 0.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* (2) Remove the 100px top gap on an open edit form. The shared popup rule
   (.wf-popup [class*="popup-contents-"]) adds margin-top:100px for centred
   modal popups; the inline edit popups must not inherit it. Id selectors win
   the specificity battle without !important games elsewhere. */
#popup-wf_post_edit > [class*="popup-contents-"],
#popup-wf_product_edit > [class*="popup-contents-"],
#popup-wf_event_edit > [class*="popup-contents-"] {
    margin-top: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    box-shadow: none !important;
}

/* (3) A little breathing room below an open edit form so it doesn't butt up
   against the next list item. Overrides the earlier padding:0 on this row. */
.wf-edit-form-row > td {
    padding-bottom: 30px !important;
}

/* (4) Keep the Edit and Delete tooltips consistent: both centred above their
   icon. The shared rule fixes the tooltip at 120px, which made the right-most
   Delete tooltip overflow the container and clip. Size the action tooltips to
   their (short) label instead, so the centred tooltip stays narrow enough to
   sit above the icon without spilling past the edge. */
.wf-edit-product.tooltip .tooltiptext,
.wf-delete-product.tooltip .tooltiptext,
.wf-edit-event.tooltip .tooltiptext,
.wf-delete-event.tooltip .tooltiptext,
.wf-edit-post.tooltip .tooltiptext,
.wf-delete-post.tooltip .tooltiptext,
.wf-edit-place.tooltip .tooltiptext,
.wf-delete-place.tooltip .tooltiptext {
    width: auto !important;
    white-space: nowrap;
    padding: 5px 12px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
    bottom: calc(100% + 10px) !important;
    top: auto !important;
}

/* (5) Consistent text alignment. The edit form sits in a table cell that is
   text-align:right (.wf-edit-table td:last-child), so labels and help text
   inherited right alignment while checkbox rows read left — mismatched. Pin
   every label, field and help text in an open edit form to the left so all
   elements line up the same way. */
.popup-contents-wf_post_edit,
.popup-contents-wf_product_edit,
.popup-contents-wf_event_edit,
.popup-contents-wf_post_edit .wf-field,
.popup-contents-wf_product_edit .wf-field,
.popup-contents-wf_event_edit .wf-field,
.popup-contents-wf_post_edit .wf-label,
.popup-contents-wf_product_edit .wf-label,
.popup-contents-wf_event_edit .wf-label,
.popup-contents-wf_post_edit .wf-label label,
.popup-contents-wf_product_edit .wf-label label,
.popup-contents-wf_event_edit .wf-label label,
.popup-contents-wf_post_edit .wf-input,
.popup-contents-wf_product_edit .wf-input,
.popup-contents-wf_event_edit .wf-input,
.popup-contents-wf_post_edit .wf-help,
.popup-contents-wf_product_edit .wf-help,
.popup-contents-wf_event_edit .wf-help,
.popup-contents-wf_post_edit .description,
.popup-contents-wf_product_edit .description,
.popup-contents-wf_event_edit .description {
    text-align: left !important;
}