/* ============================================
   Vendor Search Table — Mobile Card Accordion
   @author Fudo
   ============================================ */

/* Hide the full table on mobile, show cards */
@media (max-width: 768px) {

  /* Hide the desktop table entirely */
  .vendor-search-table .dt-scroll,
  .vendor-search-table .dt-layout-row:first-child,
  .vendor-search-table .dt-paging {
    display: none !important;
  }

  /* Card list container injected by JS */
  .vst-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }

  /* Individual card */
  .vst-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
  }

  /* Card header — always visible */
  .vst-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .vst-card-header::-webkit-details-marker {
    display: none;
  }

  .vst-card-header:hover,
  .vst-card[open] .vst-card-header {
    background: #f5f7fa;
  }

  /* Business name */
  .vst-card-name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    flex: 1;
    line-height: 1.3;
  }

  .vst-card-name a {
    color: inherit;
    text-decoration: none;
  }

  /* Sticker badge pills shown in header */
  .vst-card-stickers {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-end;
    max-width: 130px;
  }

  .vst-sticker-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #deeaf8;
    color: #1a4e82;
    letter-spacing: 0.03em;
    line-height: 1.5;
  }

  /* Chevron icon */
  .vst-card-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #888;
    transition: transform 0.2s ease;
  }

  .vst-card[open] .vst-card-chevron {
    transform: rotate(180deg);
  }

  /* Expanded body */
  .vst-card-body {
    border-top: 1px solid #ebebeb;
    padding: 12px 14px 14px;
    background: #f9fafb;
  }

  /* 2-column grid of service rows */
  .vst-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 12px;
  }

  .vst-service-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .vst-service-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    line-height: 1.2;
  }

  .vst-service-value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }

  .vst-service-value.yes {
    color: #1a7a4e;
  }

  .vst-service-value.no {
    color: #aaa;
    font-weight: 400;
  }

  /* Map link button */
  .vst-map-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #185FA5;
    border: 1px solid #b5d4f4;
    border-radius: 6px;
    padding: 5px 10px;
    text-decoration: none;
    background: #fff;
  }

  .vst-map-link:hover {
    background: #e6f1fb;
  }

  /* Search/length controls stay visible and stack */
  .vendor-search-table .dt-layout-row.dt-layout-table {
    display: none !important;
  }

}

/* Mobile pagination bar */
.vst-mobile-pagination {
  margin-top: 12px;
  padding: 0 4px;
}

.vst-mobile-pagination nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.vst-mobile-pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}

.vst-mobile-pagination button:hover:not(:disabled) {
  background: #f0f4f8;
  border-color: #aab4be;
}

.vst-mobile-pagination button.current {
  background: #185FA5;
  color: #fff;
  border-color: #185FA5;
}

.vst-mobile-pagination button.disabled,
.vst-mobile-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

.vst-mobile-pagination .ellipsis {
  font-size: 13px;
  color: #888;
  padding: 0 4px;
  line-height: 36px;
}

@media (max-width: 768px) {

  /* Hide the desktop table chrome — but NOT the search row */
  .vendor-search-table .dt-scroll,
  .vendor-search-table .dt-paging {
    display: none !important;
  }

  /* Hide only the page-length dropdown, keep search */
  .vendor-search-table .dt-length {
    display: none !important;
  }

  /* Promote the search to a full-width bar */
  .vendor-search-table .dt-layout-row:first-child {
    display: block !important;
    margin-bottom: 10px;
  }

  .vendor-search-table .dt-search {
    width: 100%;
  }

  .vendor-search-table .dt-search .dt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 16px; /* 16px stops iOS from zooming on focus */
  }