/*
Theme Name: Powder Child
Template: powder-main
*/
/* Scope to the Search page (WordPress typically outputs body.page-{slug}, e.g. body.page-search) */



body.page-search .wp-block-post-content,
body.page-search .entry-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  align-items: start;
   
}

/* Each filter list from the shortcodes */
body.page-search .artist-terms h3,
.artist-terms h3 {
  margin: 0 0 8px;
  font-size: 1rem;
 
}
body.page-search .artist-terms--links,
.artist-terms--links {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-search .artist-terms--links li,
.artist-terms--links li { margin: 6px 0; }
body.page-search .artist-terms--links a,
.artist-terms--links a {
  text-decoration: none;
  color: #4b2a8f;
}
body.page-search .artist-terms--links a.is-active,
.artist-terms--links a.is-active {
  font-weight: 600;
  text-decoration: underline;
}

body.page-search .artist-terms--dropdown select,
.artist-terms--dropdown select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

body.page-search .artist-terms--disclosure details,
.artist-terms--disclosure details {
  width: 100%;
}

body.page-search .artist-terms--disclosure summary,
.artist-terms--disclosure summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

body.page-search .artist-terms--disclosure summary::-webkit-details-marker,
.artist-terms--disclosure summary::-webkit-details-marker {
  display: none;
}

body.page-search .artist-terms--disclosure .artist-terms__panel,
.artist-terms--disclosure .artist-terms__panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

body.page-search .artist-terms--disclosure .artist-terms__options,
.artist-terms--disclosure .artist-terms__options {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 10px;
}

/* Make disclosure panels overlay content instead of pushing layout */
.artist-terms--disclosure { position: relative; }
.artist-terms--disclosure .artist-terms__panel {
  top: calc(100% + 8px);
  left: 0;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  margin-top: 0; /* remove previous flow margin */
}

@media (max-width: 640px) {
  .artist-terms--disclosure .artist-terms__panel { left: 8px; right: 8px; width: auto; }
}

body.page-search .artist-terms--disclosure .artist-terms__option,
.artist-terms--disclosure .artist-terms__option {
  display: block;
  margin: 6px 0;
  font-size: 14px;
}

body.page-search .artist-terms .artist-terms__apply,
.artist-terms .artist-terms__apply {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #76153C;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

/* Includes equipment toggle */
body.page-search .artist-flag--equipment,
.artist-flag--equipment { justify-self: end; }

/* Toggle button for "Med utrustning" */
.artist-flag--equipment { display: flex; align-items: center; gap: 10px; }
.artist-flag--equipment strong { font-weight: 600; margin-right: 6px; }
.artist-toggle { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.artist-toggle .artist-toggle__track { width: 44px; height: 24px; background: #e6e6e6; border-radius: 9999px; position: relative; display: inline-block; transition: background .18s ease; }
.artist-toggle .artist-toggle__thumb { width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: left .18s ease, transform .18s ease; }
.artist-toggle.is-active .artist-toggle__track { background: #76153c; }
.artist-toggle.is-active .artist-toggle__thumb { left: calc(100% - 3px - 18px); }
.artist-toggle__label { font-size: 0.95rem; color: #333; }
.artist-toggle[aria-pressed="true"] .artist-toggle__label { color: #76153c; font-weight: 600; }

/* Make the results block span the full grid width */
body.page-search .results,
.results {
  grid-column: 1 / -1;
  margin-top: 16px;
}

/* Results cards */
body.page-search .results .artist-list,
.results .artist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 2em;
  margin: 0;
  width: 100%;
  max-width: 1400px;
  justify-self: center;
}
/* Carousel / horizontal layout: keep items on a single row and remove the max-width constraint */
.results .artist-list.artist-list--horizontal,
body.page-search .results .artist-list.artist-list--horizontal {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 1em 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: start !important;
}
.results .artist-list.artist-list--horizontal .artist-card,
body.page-search .results .artist-list.artist-list--horizontal .artist-card {
  flex: 0 0 260px !important;
  max-width: 260px !important;
}
/* Make the whole artist card a styled container (anchor now wraps only media/title)
   Keep anchors inside minimal. */
body.page-search .results .artist-card,
.results .artist-card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px;
  color: inherit;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.123);
}
body.page-search .results .artist-card a,
.results .artist-card a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
body.page-search .results .artist-card img,
.results .artist-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.8s ease;
}

body.page-search .results .artist-card a:hover img,
.results .artist-card a:hover img {
  transform: scale(1.03);
}
body.page-search .results .artist-card h3,
.results .artist-card h3 {
  font-size: 1.1rem;
  margin: 8px 0 6px;
}
body.page-search .results .artist-card p,
.results .artist-card p { margin: 0; color: #555; }

body.page-search .results .artist-card .artist-service,
.results .artist-card .artist-service {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 6px;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 9999px;
  font-size: 0.9rem;
  color: #76153c;
}

body.page-search .results .artist-card .artist-price,
.results .artist-card .artist-price {
  font-size: 14px;
  font-weight: 400;
}

/* Pagination */
body.page-search .results .pagination,
.results .pagination {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-search .results .pagination a,
body.page-search .results .pagination span,
.results .pagination a,
.results .pagination span {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
}
body.page-search .results .pagination .current,
.results .pagination .current {
  background: #4b2a8f;
  color: #fff;
  border-color: #4b2a8f;
}

.search-results-text {
  font-size: 24px;
  color: #333;
  margin-bottom: 16px;
  justify-self: center;
}

.artist-flag__title {
  font-weight: 500;
  margin-right: 6px;
  font-size: 14px;
}
/* Ninja Forms submit buttons */
.nf-form-cont input[type="submit"],
.nf-form-cont button[type="submit"],
.nf-form-cont .nf-form-content input[type="submit"],
.nf-form-cont .nf-form-content button[type="submit"] {
  display: inline-block;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: #7b1538;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,0.06);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}

/* Hover / focus */
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont button[type="submit"]:hover,
.nf-form-cont input[type="submit"]:focus,
.nf-form-cont button[type="submit"]:focus {
  background: #5c0f2a;
  outline: none;
}

/* Disabled state */
.nf-form-cont input[type="submit"]:disabled,
.nf-form-cont button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inputs / selects / textareas — slightly rounded, softer border */
.nf-form-cont .nf-field-element input,
.nf-form-cont .nf-field-element select,
.nf-form-cont .nf-field-element textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;          
  border-radius: 6px;                 
  background: #ffffff;                
  color: #222222;
  font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-appearance: none;           /* removes default iOS styling for inputs/selects */
}

.nf-field-label .nf-label-span, .nf-field-label label {
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.nf-error-msg, .ninja-forms-req-symbol {
    color: #e80000;
    font-size: 14px;
}

.nf-form-fields-required {
    font-size: 14px;
    display: none;
}

.nf-response-msg {
   font-size: 14px;
    display: none;
}

/* Placeholder color */
.nf-form-cont .nf-field-element ::placeholder {
  color: #9ea6ad;
  opacity: 1;
}

.label-above .nf-field-element, .label-below .nf-field-element {
    margin: 0;
    width: 100%;
    font-size: 16px;
}


/* Focus (accessible, subtle glow using your button color) */
.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element select:focus,
.nf-form-cont .nf-field-element textarea:focus {
  outline: none;
  border-color: rgba(123,21,56,0.55); /* uses your button color with opacity */
  box-shadow: 0 0 0 4px rgba(123,21,56,0.06);
}

/* Disabled fields */
.nf-form-cont .nf-field-element input[disabled],
.nf-form-cont .nf-field-element textarea[disabled],
.nf-form-cont .nf-field-element select[disabled] {
  background: #f7f7f7;
  opacity: 0.9;
  cursor: not-allowed;
}

/* Validation / error state (if Ninja Forms marks error fields) */
.nf-form-cont .nf-error .nf-field-element input,
.nf-form-cont .nf-error .nf-field-element textarea,
.nf-form-cont .nf-error .nf-field-element select {
  border-color: #e14b4b;
  box-shadow: 0 0 0 4px rgba(225,75,75,0.06);
}


@media (max-width: 600px) {
  body.page-search .results .artist-card .artist-service,
  .results .artist-card .artist-service {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* Minimal styles for JS-only floating term panel */
.js-artist-panel { box-shadow: 0 8px 30px rgba(0,0,0,.12); font-size: 16px; }
.js-artist-panel .js-artist-panel__list label { cursor: pointer; }
.js-artist-panel .js-artist-apply {
  background: #76153C;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

/* hide original disclosure panel to avoid duplicate visuals */
.artist-terms--disclosure .artist-terms__panel { display: none !important; }

/* subtle open animation */
.js-artist-panel {
  opacity: 0;
  transform: translateY(-6px) scale(0.995);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.js-artist-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.filter-section {
  position: sticky;
  top: 16px;
  z-index: 10;
}

.footer-link {
font-size:330px;
text-decoration: none;

}

@media (max-width: 640px) {
  .filter-section {
    position: static;
    top: auto;
    z-index: auto;
  }
}

/* Custom checkbox / radio styling inside the JS panel */
.js-artist-panel input[type="checkbox"],
.js-artist-panel input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  display: inline-block;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  position: relative;
}

.js-artist-panel input[type="checkbox"]:focus,
.js-artist-panel input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(118,21,60,0.08);
}

.js-artist-panel input[type="checkbox"]:hover,
.js-artist-panel input[type="radio"]:hover { transform: translateY(-1px); }

/* Checked state: use SVG checkmark (white) and theme color background */
.js-artist-panel input[type="checkbox"]:checked,
.js-artist-panel input[type="radio"]:checked {
  background: #76153c;
  border-color: #76153c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.193 9.2-3.176-3.176a1 1 0 1 0-1.414 1.414l3.96 3.96a1 1 0 0 0 1.414 0l9.523-9.98z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Keep labels aligned */
.js-artist-panel label { display: flex; align-items: center; gap: 8px; }