/* ==========================================================
   Account toggle (private / public)
   ========================================================== */

.button-toggle-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.button-toggle-wrap:hover {
  cursor: pointer;
}

.button-toggle-wrap.loading {
  pointer-events: none;
}

.button-toggle {
  display: inline-block;
  background: #bbbbbb;
  border-radius: var(--radius);
  height: 1.75rem;
  padding: 0;
  width: 92px;
  position: relative;
  box-sizing: border-box;
}

.button-toggle .handle {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem; /* Consistent offset */
  right: auto;
  width: calc(50% - 0.5rem); /* 50% minus total horizontal offset */
  height: calc(100% - 0.5rem); /* Full height minus vertical offset */
  background: #fff;
  border-radius: var(--radius);
  transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);
}

.toggler {
  display: none;
}

.toggler:not(:checked) + .button-toggle {
  background: #2ecc71;
}

.toggler:not(:checked) + .button-toggle .handle {
  left: calc(100% - (50% - 0.5rem) - 0.25rem);
}

/* Prevent green color change while loading */
.button-toggle-wrap.loading .button-toggle {
  background: #bbbbbb;
}

/* Focus styles for accessibility */
.toggler:focus + .button-toggle {
  box-shadow: 0 0 0 2px #3273dc;
}

.toggler:focus + .button-toggle .handle {
  outline: 3px solid #3273dc;
}

/* Toggle label text */

.sidville-toggle .my-text.toggle-text {
  font-size: var(--text-s);
  margin: 0;
  margin-top: 0.15em;
  text-align: center;
}

/* Dark / alt color scheme */

.color-scheme--alt .button-toggle {
  background: var(--neutral-semi-dark);
}

.color-scheme--alt .dasheditbut svg {
  color: var(--btn-text-color);
}

.color-scheme--alt .dasheditbut:hover {
  background: var(--primary-dark);
  color: var(--btn-text-color-hover);
  border-color: var(--primary-dark);
}

/* Loading state shimmer bar */

.loading .button-toggle {
  overflow: hidden;
  position: relative;
}

.bar {
  display: none;
}

.loading .button-toggle .bar {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--bg-light);
  background-image: linear-gradient(
    -45deg,
    var(--neutral-dark-trans-20) 25%,
    transparent 25%,
    transparent 50%,
    var(--neutral-dark-trans-20) 50%,
    var(--neutral-dark-trans-20) 75%,
    transparent 75%,
    transparent
  );
  background-size: 30px 30px;
  animation: move 2s linear infinite;
  transition: width 2s ease-out;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 30px;
  }
}

.color-scheme--alt .button-toggle[aria-pressed="true"] .handle,
.color-scheme--alt .toggler:checked + .button-toggle .handle {
  background: var(--white-trans-40);
}

.color-scheme--alt .button-toggle[aria-pressed="false"] .handle,
.color-scheme--alt .toggler + .button-toggle .handle {
  background: var(--neutral-light);
}

/* ==========================================================
   Account Delete toggle button
   ========================================================== */

.buttondelete {
  padding: 0.2em;
  border: 1px solid transparent;
  background: var(--neutral-light-trans-30);
  height: 30px;
  width: auto;
  min-inline-size: auto;
}

.buttondelete:hover {
  background: var(--secondary-ultra-light);
  border-color: transparent;
}

.buttondelete:hover svg {
  color: var(--primary);
}

.btn--xs.confirmButton svg {
  height: 18px;
  width: 18px;
  color: var(--primary);
}

.sidicon {
	display: flex;
	flex-direction: row;
	align-items: center;
	line-height: 1em;
	gap: 4px;
	border-radius: var(--radius);
	padding: 0.5em !important;
	align-content: center;
	justify-content: center;
	width: auto;
	height: 1em !important;
}

.sidicon svg {
  width: 16px;
  height: 16px;
}

.confirmButton.is-light,
.cancelButton.is-danger {
  background: transparent;
}

.is-light .sidicon {
  background: var(--warning-trans-30);
  border-radius: var(--radius);
  width: 100px;
}

.is-danger .sidicon {
  background: var(--danger-trans-30);
  border-radius: var(--radius);
  width: 100px;
}

/* Alt scheme */

.color-scheme--alt .buttondelete {
  background: var(--neutral-semi-dark);
  border: var(--neutral-semi-dark);
}

.color-scheme--alt .btn--xs.confirmButton svg {
  color: var(--neutral-dark);
}

.color-scheme--alt .btn--xs.confirmButton:hover svg {
  color: var(--neutral-semi-dark);
}

.color-scheme--alt .buttondelete:hover {
  background: var(--neutral-dark);
  border: var(--neutral-dark);
  color: var(--neutral-semi-dark);
}

/* ==========================================================
   Account / Vendor wrapper & profile blocks
   ========================================================== */

.sid-vendor-wrapper,
.sid-profile-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

.userboxoutline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  text-decoration: none;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: var(--space-xs);
  padding-left: 0;
  row-gap: var(--content-gap);
  position: relative;
}

/*
.userboxoutline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--neutral-dark-trans-50);
  bottom: calc(var(--content-gap) / -2);
  left: 0;
  right: 0;
}

.userboxoutline:last-child::after {
  display: none;
}
*/

.color-scheme--alt .userboxoutline {
  background: var(--neutral-light);
  border-color: var(--neutral-ultra-dark-trans-10);
}

.profiledetails {
  display: flex;
  width: 100%;
  gap: 1em;
  box-sizing: border-box;
  background: var(--neutral-light-trans-30);
  padding: var(--space-xs);
  border-radius: var(--radius-xl);
}

/* First div: takes remaining space */
.profiledetails--title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  justify-content: center;
}

/* Second div: fit-content controls */
.listcontrollers {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5em;
  white-space: nowrap;
  padding: 1em;
  background: var(--white);
  border-radius: var(--radius);
  align-items: flex-start;
  box-shadow: 0 0 4px 0 var(--neutral-trans-10);
  width: auto;
  max-width: 100%;
  height: fit-content;
}

.profiledetails--title a {
  line-height: 1.4em;
}

.profilecontroller {
  order: 3;
}

.profiledetails .order-title {
  font-size: var(--text-s);
  margin-top: 0;
}

.dashshowtitle {
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  align-content: flex-start;
  gap: 0.5em;
  align-items: center;
}

.dashshowtitle span {
  font-size: var(--text-s);
}

.color-scheme--alt .dashshowtitle svg {
  color: var(--text-dark-muted);
}

.dashedit a {
  display: flex;
  align-content: center;
  gap: 0.25em;
  align-items: center;
  border-radius: var(--radius);
  padding: 0 0.5em;
  background: var(--neutral-light-trans-30);
}

.dasheditbut:hover {
  background: var(--secondary-ultra-light);
}

.dashedit svg {
  color: var(--primary);
  transition: var(--btn-transition, var(--transition));
}

.dasheditbut:hover svg {
  color: var(--btn-text-color-hover);
}

.containerdelete {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-right: 0;
}

/* ==========================================================
   Responsive profile layout
   ========================================================== */

@media (max-width: 992px) {
  .profiledetails {
    flex-direction: column;
  }

  .profiledetails--title {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .listcontrollers {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .containerdelete {
    flex-direction: row;
  }

  .listcontrollers {
    flex: 0 0 100%;
    max-width: 100%;
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 340px) {
  .listcontrollers {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-start;
    width: auto;
    flex: 0 0 auto;
  }

  /* Row 1: left */
  .dashedit {
    order: 1;
    flex: 0 0 auto;
  }

  /* Row 1: right */
  .profileviewbuts {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .control-listing-nav a {
    width: 100%;
  }
}

/* ==========================================================
   SureCart overrides
   ========================================================== */

.carticonheader {
  position: relative;
}

.wp-block-surecart-cart-icon__count {
  background: var(--danger);
}

.wp-block-surecart-cart-icon__icon {
  cursor: pointer;
  font-size: var(--sc-cart-icon-size, 1.1em);
  display: flex;
  align-content: center;
  align-items: center;
}

.wp-block-surecart-cart-icon__icon svg {
  color: var(--neutral-dark);
  width: 1.7em;
  height: 1.7em;
}

.sid_cartcount {
  position: absolute;
  width: 0.7em;
  height: 0.7em;
  background: var(--danger);
  border-radius: 50%;
  right: -3px;
  top: 0;
}

/* ==========================================================
   WSForm – general / select2 / icons / dropzone
   ========================================================== */

.sidinvalid .wsf-invalid-feedback {
  display: none;
}

.wsf-form.wsf-form
  .wsf-label-position-inside
  input.wsf-field[placeholder]
  + label {
  top: 10px;
}

.wsf-form.wsf-form
  select.wsf-field
  ~ .select2-container
  .select2-selection--multiple
  .select2-selection__choice {
  line-height: 2.1em;
}

/* Shared styles for all icons */

[class^="wsicon-"] {
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
}

/* Individual icon backgrounds */

.wsicon-email {
  background-image: url('images/wsemail.svg');
}

.wsicon-phone {
  background-image: url('images/wsphone.svg');
}

.wsicon-location {
  background-image: url('images/wslocation.svg');
}

.wsicon-map {
  background-image: url('images/wsmap.svg');
}

/* light */

.wsicon-next,
.wsicon-submit {
  background-image: url('images/wsnext.svg');
}

.wsicon-prev {
  background-image: url('images/wsback.svg');
}

/* dark
.form--light .wsf-form button.wsf-button[data-action="wsf-tab_next"]:hover .wsicon-next,
*/

/* Submit button icon default = dark, hover = light */

.wsf-form button.wsf-button[type="submit"] .wsicon-submit {
  background-image: url('images/nextdark.svg');
}

.wsf-form button.wsf-button[type="submit"]:hover .wsicon-submit {
  background-image: url('images/wsnext.svg');
}

.wsf-form
  button.wsf-button[data-action="wsf-tab_previous"]:hover
  .wsicon-prev {
  background-image: url('images/wsback.svg');
}

/* Textarea defaults */

textarea.wsf-field {
  min-height: 100px;
  height: 356px;
  overflow: auto;
  resize: vertical;
  line-height: 1.6em !important;
  padding: var(--space-m) !important;
}

/* Dropzone */

input[type='text'].wsf-field ~ .dropzone {
  background-color: #ffffff !important;
  border: 2px dashed var(--neutral-light-trans-60) !important;
  border-radius: var(--radius) !important;
}

.dz-message {
  font-size: var(--text-s);
}

.dz-message p {
  line-height: 1.2em;
  margin-bottom: 1em;
}

[data-dz-name],
[data-dz-size] {
  display: none !important;
}

.wsf-dropzonejs-preview {
  text-align: center;
}

input[type='text'].wsf-field
  ~ .dropzone
  .wsf-dropzonejs-previews {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-items: center;
  gap: calc(var(--space-xs) / 2);
}

.wsf-dropzonejs-preview {
  margin: 0 !important;
  margin-inline-end: 0 !important;
  -webkit-margin-end: 0 !important;
  display: block !important;
  margin-bottom: 20px !important;
}

input[type='text'].wsf-field
  ~ .dropzone
  .wsf-invalid-feedback {
  line-height: 1.2em;
  font-size: 12px;
}

.wsf-form
  input[type='text'].wsf-field[data-file-type='dropzonejs']
  ~ .dropzone
  .wsf-dropzonejs-preview
  img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover;
  overflow: clip;
}

/* Hide Dropzone preview <img> when src is empty or missing */

.wsf-form .wsf-dropzonejs-preview img[data-dz-thumbnail][src=''],
.wsf-form .wsf-dropzonejs-preview img[data-dz-thumbnail]:not([src]) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hide failed previews */

.sid-ws-dz-images
  .wsf-dropzonejs-previews
  .wsf-dropzonejs-preview.dz-error {
  display: none !important;
}

/* Show by default (empty or only errors) */

.sid-ws-dz-images .dz-message {
  display: block !important;
}

/* Hide when any non-error preview exists */

.sid-ws-dz-images:has(
    .wsf-dropzonejs-previews .wsf-dropzonejs-preview:not(.dz-error)
  )
  .dz-message {
  display: none !important;
}

/* Select2 pills / chips */

select.wsf-field
  ~ .select2-container
  .select2-selection--multiple
  .select2-selection__clear {
  color: var(--danger);
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered
  li {
  height: 37px !important;
}

body .sidselectpills .select2-selection__choice:hover {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

body .sidselectpills .select2-selection__choice {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: var(--text-dark);
  padding: 0.25em 1.5em 0.25em 32px !important;
  line-height: 2.1em;
}

.sidselectpills .select2-selection__clear {
  font-size: 2.2em;
  line-height: 1em;
}

.sidselectpills .select2-selection__choice__remove {
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  padding-left: 4px;
  font-size: 1.5em;
  font-weight: 400 !important;
  left: 5px;
  top: 3px;
  color: var(--neutral-dark) !important;
}

.sidselectpills .select2-selection__choice {
  position: relative !important;
}

.select2-selection.select2-selection--multiple {
  min-height: 3.45em !important;
}

.sidselectpills
  select.wsf-field
  ~ .select2-container
  .select2-search--inline
  .select2-search__field {
  line-height: 1em !important;
  height: 30px;
  top: 4px !important;
  position: relative;
  left: 4px;
  width: 100% !important;
}

select.wsf-field
  ~ .select2-container
  .select2-search--inline
  .select2-search__field {
  outline-color: var(--neutral-dark-trans-10) !important;
  padding-left: 5px;
}

.form--light
  .wsf-form
  .wsf-select2-dropdown
  .select2-results
  .select2-results__option {
  border-top: none;
  padding-left: 20px;
}








/* ==========================================================
   WSForm date/time pickers and repeaters
   ========================================================== */

.xdsoft_datetimepicker .xdsoft_calendar td > div {
  padding: 10px !important;
  text-align: center;
  font-size: var(--text-m) !important;
}

div[id^='wsf-'][id$='-map'] {
  border-radius: 12px !important;
}

div[id^='wsf-'][id$='-datetime-picker'].xdsoft_datetimepicker
  .xdsoft_calendar
  td.xdsoft_current {
  background: #ace355 !important;
  color: #000 !important;
}

.showhoursrepeater .wsf-grid {
  padding: 0;
  background: var(--secondary-light-trans-20);
  border-radius: 8px;
  margin: 0;
  border: 2px solid transparent;
  left: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 10px;
}

.afterrepeater {
  margin-top: calc(var(--f-grid-gutter, 2rem) / 2) !important;
}

.wsfsmallheadmarg h3 {
  margin-bottom: 15px;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
  width: 400px !important;
}

.wsf-dropzonejs-previews .dz-image-preview {
  padding: 10px;
  width: fit-content !important;
}

.highlightfirstimage
  .wsf-dropzonejs-previews
  .dz-image-preview {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--white);
}

.locatebut span {
  height: 28px;
  width: 28px;
}

.locatebut .wsf-button,
.locatebut .wsf-button:active,
.locatebut .wsf-button:focus {
  background: none !important;
  border: none !important;
  color: var(--text-dark) !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-block !important;
  width: auto !important;
  --focus-color: none !important;
  box-shadow: none !important;
}

.locatebut.wsf-bottom {
  align-self: flex-start !important;
}

.showhoursrepeater .wsf-tile {
  padding: 0 !important;
}

.sidrepbuts {
  position: absolute !important;
  bottom: 0;
  top: auto;
  right: 0.6em;
}

.sidrepbuts svg {
  border-radius: var(--radius) !important;
  background: #fff;
}

.form--light
  .wsf-form
  .showhoursrepeater
  .wsf-label-position-inside
  input.wsf-field[placeholder]
  + label {
  left: 1.1em !important;
}

body .xdsoft_datetimepicker .xdsoft_timepicker {
  min-width: 196px !important;
}

.showhoursrepeater {
  margin-bottom: 0.5em !important;
  margin-top: 1em !important;
}

.brxe-ws-form-form {
  width: 100%;
}

.wsf-form .showhoursrepeater .wsf-field-wrapper:not(.wsf-alert) {
  margin-block-end: 0;
}

/* ==========================================================
   WSForm styles for TinyMCE
   ========================================================== */

.mce-tinymce.mce-panel {
  border-top-width: var(--f-input-border-top-size, 0.0625rem) !important;
  border-right-width: var(--f-input-border-right-size, 0.0875rem) !important;
  border-bottom-width: var(--f-input-border-bottom-size, 0.125rem) !important;
  border-left-width: var(--f-input-border-left-size, 0.0875rem) !important;
  border-style: var(--f-input-border-style, solid) !important;
  border-color: var(--f-light-input-border-color, var(--neutral-light)) !important;
  border-radius: var(--radius) !important;
}

div.mce-toolbar-grp {
  border-bottom: none !important;
  background: transparent !important;
}

iframe #tinymce {
  padding: 0.5em 1em !important;
}

.mce-edit-area {
  padding: 0 1em 0.5em 1em !important;
}

.mce-top-part::before {
  box-shadow: none !important;
}

div.mce-statusbar {
  border-top: none !important;
  background: transparent !important;
}

.mce-toolbar .mce-btn-group .mce-btn.mce-active,
.mce-toolbar .mce-btn-group .mce-btn:active,
.qt-dfw.active {
  background: var(--neutral-light-trans-20) !important;
  border-color: var(--neutral-light-trans-20) !important;
  border-radius: var(--radius) !important;
}

.mce-toolbar .mce-btn-group .mce-btn,
.qt-dfw {
  margin: 2px 6px !important;
  border-radius: var(--radius) !important;
  padding: 4px !important;
}

.mce-toolbar .mce-btn-group .mce-btn:hover,
.qt-dfw:focus,
.qt-dfw:hover {
  background: #f6f7f7;
  color: #1d2327;
  box-shadow: none !important;
  outline: none !important;
}

.mce-toolbar .mce-btn-group .mce-btn:focus,
.mce-toolbar .mce-btn-group .mce-btn :focus-visible {
  box-shadow: none !important;
  outline-style: solid;
  outline-color: var(--focus-color) !important;
  outline-width: var(--focus-width) !important;
  outline-offset: var(--focus-offset) !important;
}

/* ==========================================================
   Quill editor
   ========================================================== */

#quilleditor .ql-editor {
  min-height: 250px;
  max-height: 250px;
  overflow: auto;
  padding: 2em 2em 4em 2em;
}

.ql-toolbar.ql-snow {
  border-radius: var(--radius) var(--radius) 0 0;
}

.ql-container.ql-snow {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ==========================================================
   Responsive tweaks
   ========================================================== */

@media screen and (max-width: 767px) {
  /*
  .sidrepbuts {
    margin-top: 0;
    position: relative !important;
    bottom: auto;
    right: auto;
  }

  .form--light .wsf-form .showhoursrepeater .wsf-field-wrapper:not(.wsf-alert) {
    margin-block-end: 1em;
  }
  */

  .wsf-form .showhoursrepeater .wsf-field-wrapper:last-child,
  .wsf-form .showhoursrepeater .wsf-field-wrapper:nth-child(3) {
    margin-block-end: 0;
  }
}

/* At the top level of your code */

@media screen and (max-width: 575px) {
  .hidden-xs {
    display: none !important;
  }

  .xdsoft_datetimepicker .xdsoft_datepicker {
    width: auto !important;
  }

  .wsf-group-tabs.wsf-tabs {
    display: none !important;
  }

  .sidrepbuts {
    margin-top: 10px;
  }
}

@media screen and (max-width: 480px) {
  .mce-toolbar .mce-btn-group .mce-btn,
  .qt-dfw {
    margin: 2px 2px !important;
    border-radius: var(--radius) !important;
    padding: 0 !important;
  }
}






/* =========================
   WS Form + Dropzone (Profile Image)
   ========================= */

.profileimgupload input[type="text"].wsf-field ~ .dropzone {
	width: fit-content;
	padding: 0 !important;
}

.profileimgupload label {
	margin: var(--space-xs) 0 !important;
}

/* Preview grid */
.profileimgupload input[type="text"].wsf-field ~ .dropzone .wsf-dropzonejs-previews {
	display: grid;
	justify-content: flex-start;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	justify-items: flex-start;
	gap: calc(var(--space-xs) / 2);
	width: fit-content;
}

.wsf-dropzonejs-previews .dz-image-preview {
	padding: 0;
	border: none !important;
}

.highlightfirstimage.profileimgupload .wsf-dropzonejs-previews .dz-image-preview {
	border: none;
	margin-bottom: 0 !important;
	width: fit-content !important;
}

/* Image styling */
.wsf-form .profileimgupload input[type="text"].wsf-field[data-file-type="dropzonejs"]
~ .dropzone .wsf-dropzonejs-preview img {
	object-fit: cover;
	aspect-ratio: 1/1;
	border-radius: var(--radius);
}

/* Message styling (default state) */
.wsf-form .profileimgupload input[type="text"].wsf-field[data-file-type="dropzonejs"]
~ .dropzone .dz-message {
	color: var(--wsf-field-color-placeholder);
	margin-bottom: 0;
	text-align: center;
	padding: var(--space-xs);
	width: 150px;
	height: 150px;
	flex-direction: column;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ✅ Hide Upload Picture message when there is at least one NON-error preview */
.wsf-form .profileimgupload
input[type="text"].wsf-field[data-file-type="dropzonejs"]
~ .dropzone:has(
  .wsf-dropzonejs-previews :is(.wsf-dropzonejs-preview, .dz-preview, .dz-image-preview):not(.dz-error)
)
.dz-message{
	display: none !important;
}

/* ✅ Remove Dropzone border once a SUCCESS preview exists */

.wsf-form .profileimgupload
input[type="text"].wsf-field[data-file-type="dropzonejs"]
~ .dropzone:has(
  .wsf-dropzonejs-previews :is(.wsf-dropzonejs-preview, .dz-preview, .dz-image-preview).dz-success
){
	border: none !important;
}


/* =========================
   Other styles you included
   ========================= */

.wsformsidtext h4 {
	font-size: var(--text-m);
	font-weight: 600 !important;
	margin-bottom: var(--space-s);
}

.mce-btn-group:not(:first-child) {
	border-left: none !important;
}


@supports selector(:has(*)) {
	
	.sidgalleryupload:has(.dropzone .dz-error):not(:has(.dropzone .dz-success)) .wsf-invalid-feedback, 
  .profileimgupload:has(.dropzone .dz-error):not(:has(.dropzone .dz-success)) .wsf-invalid-feedback{
    display: block !important;
    color: var(--primary);
  }
}







/* -------------------------------
   Vendor single / map popup card
   ------------------------------- */

.vendor-template-default .wpgb-map-facet .leaflet-popup-content {
  min-width: 300px !important;
  width: 300px !important;
}

.popupmapcontainerp {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4em;
  margin-top: .5em !important;
  margin-bottom: .5em !important;
}

/* GridBuilder market card for map */

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-xl) !important;
}

/* Reset WP Grid Builder resets inside our popup market card */
.main-map-market-card,
.main-map-market-card * {
  white-space: normal !important;
}

.wp-grid-builder .wpgb-card [class*="wpgb-block-"].main-map-market-card {
  display: block;
  font-size: inherit;
  line-height: inherit;
  position: relative;
  padding: calc(var(--space-xs) / 2);
}

.main-map-market-card .popup-marketcard {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: var(--space-xs) !important;
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform .2s ease, box-shadow .2s ease;
	padding: 0;
	box-sizing: border-box !important;
	width: 100%;
	position: relative;
}

.popup-marketcard.no-card-image {
  padding: calc(var(--space-xs) / 2) !important;
}

/* Left side – image */

.main-map-market-card .popup-marketcard__image {
  flex: 0 0 auto !important;
  width: 80px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: clip !important;
  border-radius: 10px !important;
  display: block !important;
  position: relative !important;
  margin: 0 !important;
}

.main-map-market-card .popup-marketcard__image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

.main-map-market-card .popup-marketcard__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.main-map-market-card .popup-marketcard__image .no-image {
  background: #f2f2f2;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: .9rem;
  border-radius: 8px;
  text-align: center;
}

/* Right side – content */

.main-map-market-card .popup-marketcard__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box !important;
  gap: calc(var(--space-xs) / 2);
}

.main-map-market-card .popup-marketcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: var(--space-m) !important;
}

.main-map-market-card .popup-marketcard__title a {
	color: var(--primary) !important;
	text-decoration: none;
	font-weight: 600 !important;
	font-size: var(--text-s) !important;
	text-transform: capitalize;
}

.main-map-market-card .popup-marketcard__title a:hover {
  color: var(--text-dark-muted)  !important;
}

.main-map-market-card .popup-marketcard__dates {
  font-size: var(--text-m);
  color: var(--text-dark-muted) !important;
  text-transform: uppercase;
  font-weight: 600  !important;
}

.main-map-market-card .popup-marketcard__author {
  font-size: var(--text-s);
}

/* Close button */

.leaflet-container a.leaflet-popup-close-button {
  font-size: var(--text-xl) !important;
  width: auto !important;
  line-height: 1em !important;
  height: auto !important;
  top: 0 !important;
  background: var(--neutral-ultra-light) !important;
  opacity: 1 !important;
  box-shadow: none;
  border-radius: 0 var(--radius-xl) 0 var(--radius);
  right: 0 !important;
  color: var(--primary) !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--secondary-ultra-light) !important;
}


.leaflet-popup .wp-grid-builder.wpgb-marker-content {
	max-width: 260px !important;
}

/* Only for the active cluster */
.sid-cluster--active .wpgb-cluster-icon span{
  visibility: hidden;    /* keep layout so nothing jumps */
}

/* Add a dot indicator */
.sid-cluster--active .wpgb-cluster-icon{
  position: relative;
}

.sid-cluster--active .wpgb-cluster-icon::after{
  content: "";
  position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
  width: 10px;          /* dot size */
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}






.wsf-form.wsf-form .wsf-label-position-inside input.wsf-field[placeholder] + label{
	color: var(--neutral-dark-trans-50);
}

.wsf-form.wsf-form  .wsf-label-position-inside input.wsf-field[placeholder]:focus + label{
	color: var(--wsf-field-color);
}
.pswp.brx .pswp__img{
	border-radius: var(--radius-xl);	
}