/* ===========================================
   Variables
   =========================================== */
:root {
  --v-primary: #000000;
  --v-secondary: #ffffff;
  --v-gold: #CAAA6D;
  --v-gold-count: #CAAA6D;

  --v-gold-hover: var(--v-gold);
  --v-gold-active: var(--v-gold);

  --v-font-body: "Goia", sans-serif;
  --v-fw-regular: 400;
  --v-fw-medium: 500;
  --v-fw-semibold: 600;

  --v-cell-padding: 10px 20px;
  --v-cell-padding-lg: 16px 20px;
  --v-filter-padding: 8px 18px;
  --v-filter-border: 2px solid var(--v-gold);
  --v-filter-font-size: 14px;
  --v-filter-min-width: 280px;

  --v-section-pt: 70px;
  --v-section-pb: 70px;
  --v-section-pb-sm: 110px;
  --v-table-mt: 42px;
  --v-table-mb: 120px;
}

/* ===========================================
   Reset GridJS mermaid theme defaults
   =========================================== */
#vendeurs-table .gridjs-container {
  padding: 0;
  color: var(--v-secondary);
}

#vendeurs-table .gridjs-wrapper,
#vendeurs-table .gridjs-table,
#vendeurs-table .gridjs-thead .gridjs-th,
#vendeurs-table .gridjs-tbody .gridjs-tr,
#vendeurs-table .gridjs-tbody .gridjs-td {
  border-color: var(--v-secondary) !important;
}

#vendeurs-table .gridjs-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
}

#vendeurs-table .gridjs-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

/* ===========================================
   Thead
   =========================================== */
#vendeurs-table .gridjs-thead {
  background-color: var(--v-primary);
}

#vendeurs-table .gridjs-thead .gridjs-th {
  padding: var(--v-cell-padding);
  background-color: var(--v-primary);
  border: none;
  border-bottom: 1px solid var(--v-secondary);
  color: var(--v-secondary);
  font-family: var(--v-font-body);
  font-weight: var(--v-fw-semibold);
}

#vendeurs-table .gridjs-thead .gridjs-th:first-child {
  min-width: 240px;
}

#vendeurs-table .gridjs-thead .gridjs-th:nth-child(2) span {
  padding: var(--v-cell-padding-lg);
  align-items: center;
  display: flex;
}

#vendeurs-table .gridjs-thead .gridjs-th:nth-child(3) {
  min-width: 150px;
}

#vendeurs-table .gridjs-thead .gridjs-th button {
  display: none;
}

#vendeurs-table .gridjs-thead .gridjs-th .gridjs-th-content {
  text-align: left;
}

/* ===========================================
   Tbody
   =========================================== */
#vendeurs-table .gridjs-tbody {
  background: var(--v-primary);
  font-family: var(--v-font-body);
}

#vendeurs-table .gridjs-tbody .gridjs-tr {
  border: none;
  border-bottom: 1px solid var(--v-secondary);
  background: transparent;
}

#vendeurs-table .gridjs-tbody .gridjs-tr:hover {
  background: var(--v-gold-hover);
}

#vendeurs-table .gridjs-tbody .gridjs-td {
  padding: 0;
  font-weight: var(--v-fw-medium);
  border: none;
  background: transparent;
}

#vendeurs-table .gridjs-tbody .gridjs-td:last-child {
  text-align: center;
}

#vendeurs-table .gridjs-tbody .gridjs-td:nth-child(2) {
  border-left: 1px solid var(--v-secondary);
  border-right: 1px solid var(--v-secondary);
}

/* ===========================================
   Footer / Pagination
   =========================================== */
#vendeurs-table .gridjs-footer {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#vendeurs-table .gridjs-footer .gridjs-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages {
  background-color: var(--v-primary);
  border-radius: 0;
  border: 2px solid var(--v-gold);
  padding: 4px;
  display: flex;
  align-items: center;
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button {
  font-size: 16px;
  font-weight: var(--v-fw-medium);
  color: var(--v-secondary);
  padding: 10px;
  width: 44px;
  border: none;
  background: transparent;
  border-radius: 0;
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button:hover {
  background: transparent;
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  border-radius: 0;
  background: var(--v-gold-active);
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button:first-child {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M15.7336 6.20458L9.43818 12.5L15.7336 18.7955C15.7807 18.8425 15.8218 18.8931 15.857 18.9464C16.1037 19.3201 16.0625 19.8278 15.7336 20.1567C15.3577 20.5325 14.7484 20.5325 14.3724 20.1567L7.39641 13.1806C7.21591 13.0001 7.1145 12.7554 7.1145 12.5C7.1145 12.2447 7.21591 12 7.39641 11.8194L14.3724 4.8434C14.7484 4.46752 15.3577 4.46752 15.7336 4.8434C16.1096 5.21928 16.1096 5.8287 15.7336 6.20458Z" fill="%23ffffff"/></svg>') no-repeat center center;
  color: transparent !important;
}

#vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button:last-child {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M8.27728 18.7955L14.5727 12.5L8.27728 6.20458C8.23029 6.1576 8.18918 6.10697 8.15394 6.0536C7.93179 5.71714 7.94305 5.27193 8.18771 4.9465C8.21472 4.91057 8.24457 4.8761 8.27728 4.84341C8.37776 4.74292 8.49494 4.6693 8.61988 4.62254C8.78704 4.55998 8.9681 4.5455 9.1417 4.57911C9.3237 4.61435 9.4975 4.70245 9.63845 4.84341L16.6145 11.8194C16.795 12 16.8964 12.2448 16.8964 12.5C16.8964 12.7554 16.795 13.0001 16.6145 13.1807L9.63845 20.1567C9.26257 20.5325 8.65315 20.5325 8.27728 20.1567C8.23029 20.1097 8.18918 20.0591 8.15394 20.0057C7.90726 19.6321 7.94838 19.1244 8.27728 18.7955Z" fill="%23ffffff"/></svg>') no-repeat center center;
  color: transparent !important;
}

/* ===========================================
   Vendeur links (full-cell clickable)
   =========================================== */
#vendeurs-table .vendeur-cell-link {
  display: block;
  padding: var(--v-cell-padding);
  color: var(--v-secondary) !important;
  text-decoration: none;
}

#vendeurs-table .vendeur-cell-link:hover {
  color: var(--v-primary) !important;
}

/* ===========================================
   Section layout
   =========================================== */
.vendeurs-section {
  padding-top: var(--v-section-pt);
  padding-bottom: var(--v-section-pb);
}

@media (min-width: 640px) {
  .vendeurs-section {
    padding-bottom: var(--v-section-pb-sm);
  }
}

/* ===========================================
   Controls grid (title + filters + search in one grid)
   =========================================== */
.vendeurs-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .vendeurs-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
  }
}

/* ===========================================
   Title
   =========================================== */
.vendeurs-title {
  font-size: 24px;
  font-weight: var(--v-fw-semibold);
  line-height: 100%;
  color: var(--v-secondary);
}

@media (min-width: 1024px) {
  .vendeurs-title {
    font-size: 34px;
  }
}

#vendeurs-count {
  color: var(--v-gold-count);
}

/* ===========================================
   Table wrapper
   =========================================== */
#vendeurs-table {
  margin-top: var(--v-table-mt);
  margin-bottom: var(--v-table-mb);
}

/* ===========================================
   Filters
   =========================================== */
.vendeurs-controls__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .vendeurs-controls__filters {
    flex-direction: row;
    align-items: center;
  }
}

#localite-filter,
#categorie-filter {
  border: var(--v-filter-border);
  border-radius: 0;
  padding: var(--v-filter-padding);
  background-color: var(--v-primary);
  color: var(--v-secondary);
  font-family: var(--v-font-body);
  font-size: var(--v-filter-font-size);
  font-weight: var(--v-fw-regular);
  outline: none;
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  #localite-filter,
  #categorie-filter {
    width: auto;
    min-width: var(--v-filter-min-width);
  }
}

/* ===========================================
   Search label + input
   =========================================== */
.vendeurs-controls__label {
  color: var(--v-secondary);
  font-family: var(--v-font-body);
  font-size: var(--v-filter-font-size);
  font-weight: var(--v-fw-medium);
  white-space: nowrap;
}

.vendeurs-controls__input {
  width: 100%;
  box-sizing: border-box;
  border: var(--v-filter-border) !important;
  border-radius: 0;
  padding: var(--v-filter-padding) !important;
  font-family: var(--v-font-body) !important;
  font-size: var(--v-filter-font-size);
  font-weight: var(--v-fw-regular);
  color: var(--v-secondary) !important;
  background-color: var(--v-primary) !important;
  outline: none;
  min-height: 0;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ===========================================
   Select arrow
   =========================================== */
.select-arrow {
  position: relative;
  display: block;
  width: 100%;
}

@media (min-width: 640px) {
  .select-arrow {
    display: inline-block;
    width: auto;
  }
}

.select-arrow select {
  padding-right: 2.5em;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.47498 7.6875L10.2 12.4125L14.925 7.6875" stroke="%23ffffff" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
  transform: translateY(-50%);
}

/* ===========================================
   Map
   =========================================== */
#map {
  height: 50vh;
  min-height: 400px;
  width: 100%;
}

/* Marker clusters – gold theme (override default green/yellow/red) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(202, 170, 109, 0.4) !important;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: #CAAA6D !important;
  color: var(--v-secondary) !important;
  font-weight: var(--v-fw-semibold);
}

/* Custom gold marker pin */
.gold-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================
   Invert mode (swap primary <-> secondary, keep gold)
   Apply by adding class `vendeurs-invert` on `.vendeurs-section`
   =========================================== */
.vendeurs-invert {
  --v-primary: #ffffff;
  --v-secondary: #000000;
}

/* SVG icons with hardcoded white fill/stroke -> black in invert mode */
.vendeurs-invert #vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button:first-child {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M15.7336 6.20458L9.43818 12.5L15.7336 18.7955C15.7807 18.8425 15.8218 18.8931 15.857 18.9464C16.1037 19.3201 16.0625 19.8278 15.7336 20.1567C15.3577 20.5325 14.7484 20.5325 14.3724 20.1567L7.39641 13.1806C7.21591 13.0001 7.1145 12.7554 7.1145 12.5C7.1145 12.2447 7.21591 12 7.39641 11.8194L14.3724 4.8434C14.7484 4.46752 15.3577 4.46752 15.7336 4.8434C16.1096 5.21928 16.1096 5.8287 15.7336 6.20458Z" fill="%23000000"/></svg>') no-repeat center center;
}

.vendeurs-invert #vendeurs-table .gridjs-footer .gridjs-pagination .gridjs-pages button:last-child {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"><path d="M8.27728 18.7955L14.5727 12.5L8.27728 6.20458C8.23029 6.1576 8.18918 6.10697 8.15394 6.0536C7.93179 5.71714 7.94305 5.27193 8.18771 4.9465C8.21472 4.91057 8.24457 4.8761 8.27728 4.84341C8.37776 4.74292 8.49494 4.6693 8.61988 4.62254C8.78704 4.55998 8.9681 4.5455 9.1417 4.57911C9.3237 4.61435 9.4975 4.70245 9.63845 4.84341L16.6145 11.8194C16.795 12 16.8964 12.2448 16.8964 12.5C16.8964 12.7554 16.795 13.0001 16.6145 13.1807L9.63845 20.1567C9.26257 20.5325 8.65315 20.5325 8.27728 20.1567C8.23029 20.1097 8.18918 20.0591 8.15394 20.0057C7.90726 19.6321 7.94838 19.1244 8.27728 18.7955Z" fill="%23000000"/></svg>') no-repeat center center;
}

.vendeurs-invert .select-arrow::after {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.47498 7.6875L10.2 12.4125L14.925 7.6875" stroke="%23000000" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}