/**
 * @file
 * Styles for the artist card grid in the artists directory.
 *
 * Grid uses CSS Grid with responsive columns:
 * - Mobile: 1 column
 * - 480px+: 2 columns
 * - 800px+: 3 columns
 * - 960px+: 4 columns
 */

/* Grid container: applied via .view-artists-directory .view-content */
.view-artists-directory .view-content > .row-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
}

@media (min-width: 480px) {
  .view-artists-directory .view-content > .row-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .view-artists-directory .view-content > .row-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .view-artists-directory .view-content > .row-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Equal height cards: views-row stretches to fill grid cell */
.view-artists-directory .view-content .views-row {
  display: flex;
}

.view-artists-directory .view-content .views-row .artist-card {
  flex: 1;
}

/* Card */
.artist-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.artist-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card image */
.artist-card__image-link {
  display: block;
  text-decoration: none;
}

.artist-card__image {
  width: 100%;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  background-size: cover;
  background-position: center center;
  background-color: #f6f6f6;
}

.artist-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.artist-card__placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  color: #bcbcbc;
}

/* Card content */
.artist-card__content {
  padding: 12px 15px 8px;
  flex-grow: 1;
}

.artist-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 4px;
}

.artist-card__title a {
  color: #000;
  text-decoration: none;
}

.artist-card__title a:hover {
  text-decoration: underline;
}

.artist-card__country {
  font-size: 0.8125rem;
  color: #666;
  margin-bottom: 4px;
}

.artist-card__genres {
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Streaming link icons */
.artist-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.artist-card__link {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.artist-card__link:hover {
  opacity: 1;
}

/* SVG data URIs for streaming icons in black/white */
.artist-card__link--spotify {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E");
}

.artist-card__link--bandcamp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M0 18.75l7.437-13.5H24l-7.438 13.5H0z'/%3E%3C/svg%3E");
}

.artist-card__link--youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.artist-card__link--soundcloud {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.057-.05-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.283c.013.06.045.094.104.094.057 0 .09-.037.104-.094l.194-1.283-.194-1.332c-.014-.057-.045-.094-.104-.094m1.794-1.065c-.066 0-.104.049-.112.109l-.209 2.39.209 2.257c.008.063.046.109.112.109.065 0 .104-.046.114-.109l.238-2.257-.238-2.39c-.011-.06-.049-.109-.114-.109m.893-.372c-.079 0-.117.059-.126.119l-.189 2.762.189 2.318c.009.068.047.119.126.119.075 0 .116-.051.126-.119l.214-2.318-.214-2.762c-.01-.06-.051-.119-.126-.119m.9-.335c-.09 0-.131.068-.139.131l-.168 3.097.168 2.358c.008.078.049.131.139.131.086 0 .13-.053.139-.131l.189-2.358-.189-3.097c-.009-.063-.053-.131-.139-.131m.899-.191c-.101 0-.143.078-.148.143l-.15 3.288.15 2.391c.005.088.047.143.148.143.1 0 .143-.055.15-.143l.168-2.391-.168-3.288c-.007-.065-.05-.143-.15-.143m.901-.119c-.111 0-.154.088-.159.155l-.131 3.407.131 2.4c.005.098.048.155.159.155.108 0 .154-.057.16-.155l.15-2.4-.15-3.407c-.006-.067-.052-.155-.16-.155m.9-.043c-.119 0-.166.098-.17.168l-.112 3.45.112 2.4c.004.104.051.168.17.168.117 0 .166-.064.172-.168l.127-2.4-.127-3.45c-.006-.07-.055-.168-.172-.168m2.706-.256c-.035-.088-.092-.131-.175-.131-.084 0-.141.043-.177.131l-.1 3.706.1 2.373c.036.088.093.131.177.131.083 0 .14-.043.175-.131l.112-2.373-.112-3.706m.89-.376c-.044-.098-.105-.147-.193-.147-.086 0-.148.049-.193.147l-.084 4.082.084 2.363c.045.098.107.147.193.147.088 0 .149-.049.193-.147l.095-2.363-.095-4.082m.883-.449c-.053-.109-.119-.162-.211-.162-.093 0-.16.053-.213.162l-.066 4.531.066 2.35c.053.109.12.162.213.162.092 0 .158-.053.211-.162l.076-2.35-.076-4.531m.883-.486c-.061-.117-.132-.177-.229-.177-.098 0-.168.06-.229.177l-.049 5.017.049 2.33c.061.117.131.177.229.177.097 0 .168-.06.229-.177l.057-2.33-.057-5.017m.883-.485c-.07-.127-.143-.191-.245-.191-.104 0-.176.064-.247.191l-.033 5.502.033 2.314c.071.127.143.191.247.191.102 0 .175-.064.245-.191l.039-2.314-.039-5.502m1.791.398c-.123 0-.226.088-.234.209l-.032 4.895.032 2.283c.008.121.111.209.234.209.121 0 .225-.088.232-.209l.038-2.283-.038-4.895c-.007-.121-.111-.209-.232-.209m.901-.169c-.131 0-.237.098-.244.221l-.012 5.064.012 2.261c.007.131.113.221.244.221.131 0 .237-.09.244-.221l.018-2.261-.018-5.064c-.007-.123-.113-.221-.244-.221m4.006 1.587c-.373 0-.727.069-1.055.193-.217-2.45-2.281-4.369-4.791-4.369-.617 0-1.208.126-1.744.348-.199.082-.252.166-.254.332v8.605c.002.174.14.321.314.334h7.53c1.652 0 2.994-1.349 2.994-3.01s-1.342-3.01-2.994-3.01'/%3E%3C/svg%3E");
}

.artist-card__link--apple-music {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043A5.022 5.022 0 0019.7.175C18.99.06 18.27.018 17.55.007 17.414 0 17.28 0 17.145 0H6.855C6.72 0 6.585 0 6.45.007c-.72.01-1.44.053-2.15.168A5.022 5.022 0 002.426.891 5.453 5.453 0 00.91 2.388c-.337.732-.506 1.51-.575 2.31a22.38 22.38 0 00-.076 1.45V17.85c0 .255.007.51.022.765.04.727.108 1.45.312 2.148.317 1.096.917 2.012 1.8 2.724.573.46 1.222.79 1.937.985.61.162 1.233.257 1.866.29.374.018.747.03 1.12.036h10.72c.374-.006.748-.018 1.12-.036.633-.033 1.257-.128 1.866-.29.715-.195 1.364-.525 1.937-.985.883-.712 1.483-1.628 1.8-2.724.204-.698.272-1.42.312-2.148a40.8 40.8 0 00.022-.765V6.124zM17.515 17.91c0 .37-.077.724-.22 1.055a2.478 2.478 0 01-.693.882c-.48.375-1.04.58-1.65.612-.074.004-.148.005-.222.005-.638 0-1.196-.222-1.663-.583a2.456 2.456 0 01-.78-1.053c-.12-.327-.17-.67-.14-1.022.05-.558.296-1.022.675-1.393.375-.37.832-.6 1.345-.68.264-.04.527-.035.787.013.18.033.354.082.522.147V9.39l-5.534 1.654v6.863c0 .37-.077.724-.22 1.055a2.478 2.478 0 01-.693.882c-.48.375-1.04.58-1.65.612-.074.004-.148.005-.222.005-.638 0-1.196-.222-1.663-.583a2.456 2.456 0 01-.78-1.053c-.12-.327-.17-.67-.14-1.022.05-.558.296-1.022.675-1.393.375-.37.832-.6 1.345-.68.264-.04.527-.035.787.013.18.033.354.082.522.147V8.38c0-.45.142-.843.416-1.165.274-.322.614-.537 1.01-.64l5.592-1.583c.11-.032.222-.04.334-.04.285.013.533.108.74.28.207.172.34.397.407.665.03.12.045.242.045.37v11.64z'/%3E%3C/svg%3E");
}

.artist-card__link--deezer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M18.81 4.16v3.03H24V4.16h-5.19zM6.27 8.38v3.027h5.189V8.38H6.27zm12.54 0v3.027H24V8.38h-5.19zM6.27 12.594v3.027h5.189v-3.027H6.27zm6.271 0v3.027h5.19v-3.027h-5.19zm6.27 0v3.027H24v-3.027h-5.19zM0 16.81v3.029h5.19V16.81H0zm6.27 0v3.029h5.189V16.81H6.27zm6.271 0v3.029h5.19V16.81h-5.19zm6.27 0v3.029H24V16.81h-5.19z'/%3E%3C/svg%3E");
}

.artist-card__link--discogs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 0C5.384 0 0 5.384 0 12s5.384 12 12 12 12-5.384 12-12S18.616 0 12 0zm0 2.4c5.299 0 9.6 4.301 9.6 9.6s-4.301 9.6-9.6 9.6-9.6-4.301-9.6-9.6S6.701 2.4 12 2.4zm0 3.6c-3.313 0-6 2.687-6 6s2.687 6 6 6 6-2.687 6-6-2.687-6-6-6zm0 2.4c1.988 0 3.6 1.612 3.6 3.6s-1.612 3.6-3.6 3.6-3.6-1.612-3.6-3.6 1.612-3.6 3.6-3.6zm0 1.2c-1.325 0-2.4 1.075-2.4 2.4s1.075 2.4 2.4 2.4 2.4-1.075 2.4-2.4-1.075-2.4-2.4-2.4z'/%3E%3C/svg%3E");
}

.artist-card__link--website {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E");
}

/* Card footer */
.artist-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px 12px;
  border-top: 1px solid #ededed;
  min-height: 40px;
}

.artist-card__recommendations {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: #FF7159;
  cursor: default;
}

.artist-card__heart {
  color: #FF7159;
  flex-shrink: 0;
}

.artist-card__rec-count {
  font-weight: 600;
  color: #FF7159;
}

.artist-card__flag {
  font-size: 0.8125rem;
}

/* Recommend button: Liveurope brand style */
.artist-card .artist-card__flag .flag a,
.artist-card__flag .flag a {
  display: inline-block;
  padding: 5px 14px;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  border: 1px solid #000;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.artist-card .artist-card__flag .flag a:hover,
.artist-card__flag .flag a:hover {
  background: #000;
  color: #fff;
}

/* Already recommended: red brand variant */
.artist-card .artist-card__flag .flag.action-unflag a,
.artist-card__flag .flag.action-unflag a {
  background: #FF7159;
  color: #fff;
  border-color: #FF7159;
}

.artist-card .artist-card__flag .flag.action-unflag a:hover,
.artist-card__flag .flag.action-unflag a:hover {
  background: #e55a42;
  border-color: #e55a42;
  color: #fff;
}

/* Flag modal dialog styling */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-title {
  color: #000 !important;
}

/* Hide duplicate submit button inside modal form body (jQuery UI adds one in the buttonpane) */
.ui-dialog .ui-dialog-content .form-actions {
  display: none !important;
}

/* Recommend button in modal dialog: brand style */
.ui-dialog .form-actions .button,
.ui-dialog .form-actions input[type="submit"],
.ui-dialog form .form-actions input.form-submit,
.ui-dialog form .form-actions .button--primary {
  display: inline-block !important;
  padding: 8px 30px !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ui-dialog .form-actions .button:hover,
.ui-dialog .form-actions input[type="submit"]:hover,
.ui-dialog form .form-actions input.form-submit:hover,
.ui-dialog form .form-actions .button--primary:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Recommendation popup */
.artist-card__recommendations {
  position: relative;
  cursor: pointer;
}

.artist-card__rec-popup {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 380px;
  max-width: 500px;
  max-height: 300px;
  overflow-y: auto;
}

.artist-card__recommendations.is-open .artist-card__rec-popup {
  display: block;
}

.artist-card__rec-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  font-size: 0.8125rem;
  color: #000;
}

.artist-card__rec-popup-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
  line-height: 1;
}

.artist-card__rec-popup-close:hover {
  color: #000;
}

.artist-card__rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.artist-card__rec-table th {
  background: #f6f6f6;
  text-align: left;
  padding: 6px 10px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
}

.artist-card__rec-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #444;
  vertical-align: top;
}

.artist-card__rec-table tr:last-child td {
  border-bottom: none;
}

/* ===== Exposed filters (Liveurope brand style) ===== */
.view-artists-directory .view-filters {
  margin-bottom: 2rem;
  border-bottom: 1px solid #000;
  padding-bottom: 1.5rem;
}

.view-artists-directory .views-exposed-form .form--inline {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 0;
  align-items: flex-end;
}

.view-artists-directory .views-exposed-form .form--inline > .form-item {
  flex: 1 1 auto;
  min-width: 140px;
  margin: 0;
  padding: 0 12px 0 0;
  border-right: 1px solid #ededed;
}

.view-artists-directory .views-exposed-form .form--inline > .form-item:first-child {
  padding-left: 0;
}

.view-artists-directory .views-exposed-form .form--inline > .form-item:last-of-type {
  border-right: none;
}

/* When filters wrap to a second row, the first item on the new row should
   not have a left border gap. We remove the right border on the last visible
   item per row via nth-child, but since the number of items per row is
   dynamic, we rely on border-right only and accept the visual break at wrap. */

.view-artists-directory .views-exposed-form .form-item label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
  white-space: nowrap;
}

.view-artists-directory .views-exposed-form .form-text,
.view-artists-directory .views-exposed-form input[type="text"] {
  width: 100%;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-family: 'Poppins', sans-serif;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.view-artists-directory .views-exposed-form select,
.view-artists-directory .views-exposed-form .form-select,
.view-artists-directory .views-exposed-form .shs-select {
  width: 100%;
  padding: 6px 28px 6px 12px;
  font-size: 0.8125rem;
  font-family: 'Poppins', sans-serif;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff url('/themes/liveurope/images/icons/arrow-down-filter.svg') no-repeat calc(100% - 8px) center;
  background-size: 12px;
  color: #000;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.view-artists-directory .views-exposed-form .form-text:focus,
.view-artists-directory .views-exposed-form select:focus,
.view-artists-directory .views-exposed-form .shs-select:focus {
  box-shadow: 0 0 0 1px #000;
  outline: none;
}

/* Year filter fieldset: reset fieldset styling to match other filters */
.view-artists-directory .views-exposed-form .form--inline > fieldset {
  flex: 1 1 auto;
  min-width: 200px;
  margin: 0;
  padding: 0 12px 0 0;
  border: none;
  border-right: 1px solid #ededed;
}

.view-artists-directory .views-exposed-form .form--inline > fieldset > legend {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
  padding: 0;
  float: none;
  width: auto;
  white-space: nowrap;
}

.view-artists-directory .views-exposed-form .form--inline > fieldset .fieldset-wrapper {
  display: flex;
  gap: 6px;
}

.view-artists-directory .views-exposed-form .form--inline > fieldset .fieldset-wrapper > .form-item {
  flex: 1;
  margin: 0;
}

.view-artists-directory .views-exposed-form .form--inline > fieldset .fieldset-wrapper > .form-item.form-no-label select {
  width: 100%;
}

/* Apply button: Liveurope brand style */
.view-artists-directory .views-exposed-form .form-actions {
  flex: 0 0 auto;
  margin: 0;
  padding-left: 12px;
  align-self: flex-end;
}

.view-artists-directory .views-exposed-form .form-actions .button,
.view-artists-directory .views-exposed-form .form-actions input[type="submit"] {
  display: inline-block;
  padding: 6px 40px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  letter-spacing: 0;
}

.view-artists-directory .views-exposed-form .form-actions .button:hover,
.view-artists-directory .views-exposed-form .form-actions input[type="submit"]:hover {
  background: #fff;
  color: #000;
}

/* Reset search button: outline variant next to Apply */
.view-artists-directory .views-exposed-form .form-actions .button--reset {
  display: inline-block;
  padding: 6px 40px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-size: 0.8125rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  margin-left: 8px;
}

.view-artists-directory .views-exposed-form .form-actions .button--reset:hover {
  background: #000;
  color: #fff;
}

/* ===== Sort toggle ===== */
.artist-sort-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
}

.artist-sort-toggle__link {
  display: inline-block;
  padding: 6px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #000;
  color: #000;
  background: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.artist-sort-toggle__link + .artist-sort-toggle__link {
  border-left: none;
}

.artist-sort-toggle__link:hover {
  background: #f6f6f6;
  color: #000;
}

.artist-sort-toggle__link.is-active {
  background: #000;
  color: #fff;
}

.artist-sort-toggle__link.is-active:hover {
  background: #000;
  color: #fff;
}

/* Add new artist button: positioned at the end of the sort toggle row */
.artist-add-new-button {
  margin-left: auto;
  background: #FF7159 !important;
  color: #fff !important;
  border-color: #FF7159 !important;
}

.artist-add-new-button:hover {
  background: #e55a42 !important;
  border-color: #e55a42 !important;
  color: #fff !important;
}

/* Recommendations section on artist detail page */
.artist-recommendations-section {
  margin-top: 0;
  padding-top: 0;
}

.artist-recommendations-section h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.artist-recommendations-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.artist-recommendations-table th {
  background: #f6f6f6;
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #ddd;
}

.artist-recommendations-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

/* SHS container: remove extra wrapper spacing */
.view-artists-directory .shs-container {
  width: 100%;
}

.view-artists-directory .shs-field-container {
  margin-bottom: 0;
}

/* Medium screens: filters on two rows to prevent label overlap */
@media (max-width: 1200px) and (min-width: 769px) {
  .view-artists-directory .views-exposed-form .form--inline > .form-item,
  .view-artists-directory .views-exposed-form .form--inline > fieldset {
    flex: 1 1 30%;
    min-width: 0;
    margin-bottom: 0;
  }

  .view-artists-directory .views-exposed-form .form--inline > .form-item:nth-child(n+4),
  .view-artists-directory .views-exposed-form .form--inline > fieldset:nth-child(n+4) {
    border-right: 1px solid #ededed;
  }

  /* Remove border-right on last item of each visual row */
  .view-artists-directory .views-exposed-form .form--inline > .form-item:nth-child(3) {
    border-right: none;
  }

  .view-artists-directory .views-exposed-form .form-actions {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .view-artists-directory .views-exposed-form .form--inline {
    flex-direction: column;
    gap: 12px;
  }

  .view-artists-directory .views-exposed-form .form--inline > .form-item,
  .view-artists-directory .views-exposed-form .form--inline > fieldset {
    flex: 1 1 100%;
    min-width: 0;
    border-right: none;
    padding-right: 0;
  }

  .view-artists-directory .views-exposed-form .form-actions {
    padding-left: 0;
    width: 100%;
  }

  .view-artists-directory .views-exposed-form .form-actions .button,
  .view-artists-directory .views-exposed-form .form-actions input[type="submit"] {
    width: 100%;
  }

  .view-artists-directory .views-exposed-form .form-actions .button--reset {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* Responsive: recommendation popup on small screens */
@media (max-width: 480px) {
  .artist-card__rec-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    margin-bottom: 0;
    min-width: 0;
    max-width: none;
    max-height: 60vh;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  }

  .artist-card__rec-table {
    font-size: 0.6875rem;
  }

  .artist-card__rec-table th,
  .artist-card__rec-table td {
    padding: 5px 6px;
  }
}

/* ============================================================
   Artist profile page: recommend button (KAN-12)
   Matches the card button style on the /artists listing.
   ============================================================ */
.node--type-artist .flag-recommend-artist a {
  display: inline-block;
  padding: 5px 14px;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  border: 1px solid #000;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.node--type-artist .flag-recommend-artist a:hover {
  background: #000;
  color: #fff;
}

.node--type-artist .flag-recommend-artist.action-unflag a {
  background: #FF7159;
  color: #fff;
  border-color: #FF7159;
}

.node--type-artist .flag-recommend-artist.action-unflag a:hover {
  background: #e55a42;
  border-color: #e55a42;
  color: #fff;
}

/* Flag confirmation dialog: label must be dark on light background (KAN-16) */
.ui-dialog .flagging-form .form-item label {
  color: #000;
}