/* titlu */
.gs-wrap { margin: 18px 0 10px; clear: both; }
.gs-wrap .gs-head {
  background: #66bb2e;
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 6px;
  display: inline-block;
}

/* card */
.gs-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.gs-card-name { font-weight: 600; display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 6px; }
.gs-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; background: #a1a1a1; }
.gs-card-addr { font-size: 13px; line-height: 1.4; color: #333; min-height: 54px; }
.gs-card-addr p { margin: 2px 0; }
.gs-card-status { margin-top: 6px; font-size: 13px; color: #4caf50; display: inline-flex; align-items: center; gap: 6px; }
.gs-card-status .gs-i { display: inline-block; font-style: normal; font-weight: 700; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; background: #e8f5e9; color: #2e7d32; font-size: 11px; }
.gs-card-price { margin-top: 10px; font-weight: 600; background: #f7f7f7; border: 1px solid #eee; display: inline-block; padding: 6px 10px; border-radius: 6px; }

/* stari */
.gs-card.gs-good .gs-dot { background: #4caf50; }
.gs-card.gs-warn .gs-dot { background: #fd7e14; }
.gs-card.gs-bad  .gs-dot { background: #9e9e9e; }
.gs-card.gs-good .gs-card-status { color: #4caf50; }
.gs-card.gs-warn .gs-card-status { color: #fd7e14; }
.gs-card.gs-bad  .gs-card-status { color: #9e9e9e; }

/* desktop grid */
.gs-scroller {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 14px;
}

/* mobil: slider 2/carduri */
@media (max-width: 768px){
  .gs-scroller{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 2px 2px;
  }
  .gs-scroller .gs-card{
    flex: 0 0 calc(50% - 7px);
    scroll-snap-align: start;
  }
}

/* dots doar pe mobil */
.gs-dots{ display: none; }
@media (max-width: 768px){
  .gs-dots{ display: block; text-align: center; margin-top: 8px; }
  .gs-dots .gs-dotbtn{
    width: 8px; height: 8px; border-radius: 999px; border: 0;
    background: #cfd8dc; display: inline-block; margin: 0 6px; cursor: pointer;
  }
  .gs-dots .gs-dotbtn.is-active{ background: #69b92d; }
}