/* ============================================================
   GPW — Cartao de SERVICO (partilhado)
   Extraido de services.html em 2026-08-08 para o dashboard poder mostrar
   os mesmos cards na aba "Saved Services" sem duplicar CSS.
   Usado por: services.html, dashboard.html
   NAO inclui o modal de contratacao (.hire-*) — esse vive so em services.html.
   ============================================================ */

.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
/* Uma coluna no telemovel. Isto VIVE AQUI, e nao na pagina, porque a grelha e
   partilhada: a /services tinha a sua propria copia desta regra e o
   "Saved Services" do dashboard, que usa a mesma classe, nao tinha — ficava
   com 2 cartoes de 164px e o botao "HIRE A CUSTOM SERVICE" a sair de dentro
   do cartao. Qualquer pagina nova que use .svc-grid ja nasce corrigida. */
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: rgba(20,20,22,0.72); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
  padding: 0.8rem 1.15rem; display: flex; flex-direction: column; gap: 5px;
  transition: all 0.25s ease; text-decoration: none; color: inherit; position: relative; overflow: hidden;
}
.svc-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.6); transform: translateY(-3px); }
.svc-card > * { position: relative; z-index: 1; }
.svc-card.has-bnr::before {
  content: ''; position: absolute; inset: -18px; z-index: 0;
  background: var(--svc-bnr) center/cover no-repeat;
  filter: blur(6px) brightness(0.62) saturate(1.15); opacity: 0.9;
}
.svc-card.has-bnr::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.4) 0%, rgba(8,8,10,0.74) 100%);
}
.svc-card.has-bnr:hover::before { filter: blur(6px) brightness(0.72) saturate(1.2); opacity: 1; }
.svc-prod { display: flex; align-items: center; gap: 10px; }
.svc-avatar { width: 44px; height: 44px; border-radius: 50%; background: #272727 center/cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 17px; color: #fff; overflow: hidden; }
.svc-prod-name { font-size: 13.5px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; text-decoration: none; width: fit-content; }
.svc-prod-name:hover { color: var(--y); }
.svc-prod-meta { font-size: 11px; color: var(--tm); }
.svc-title { font-size: 15px; font-weight: 700; color: #fff; font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; line-height: 1.2; }

/* Corpo do card: DAWs (linha de cima) + estilos (linha de baixo) do serviço
   selecionado — texto simples, sem pills. A descrição já não vive aqui:
   aparece como tooltip ao passar o rato no tipo de serviço (tab) — ver
   .svc-tip mais abaixo, é um elemento único fora dos cards. */
.svc-body { position: relative; min-height: 4.5em; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.svc-daws { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.svc-daw { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.svc-daw img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.svc-styles { font-size: 13px; color: #b9b9b9; line-height: 1.45; }
/* Tooltip da descrição — vidro real (translúcido + blur). Um SÓ elemento
   partilhado, anexado a document.body (não vive dentro do card): o hover do
   card aplica `transform` (translateY -3px), e transform num ancestral vira
   containing block de `position: fixed` — dentro do card o tooltip ficava
   preso e cortado pelo overflow:hidden do banner. Posição (sempre ACIMA da
   tab) calculada em JS — ver _svcTip()/GPW_svcTip() em gpw-services.js. */
.svc-tip {
  position: fixed; z-index: 150;
  width: fit-content; max-width: 260px;
  padding: 7px 11px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 26px rgba(0,0,0,0.3);
  font-size: 12.5px; color: #f2f2f2; line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, visibility .16s;
}
.svc-tip.show { opacity: 1; visibility: visible; pointer-events: auto; }
.svc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.06); }
.svc-price { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 700; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 5px; }
.svc-price small { font-size: 13px; color: var(--tm); font-weight: 600; font-family: 'Poppins', sans-serif; text-transform: none; }
.svc-delivery { font-size: 14.5px; color: var(--tm); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 21px; }
/* Linha do delivery + coração à direita. O coração vive FORA do #svcDeliv-*,
   que é reescrito ao trocar de tab — lá dentro desaparecia ao primeiro clique. */
.svc-deliv-row { display: flex; align-items: center; gap: 10px; }
.svc-deliv-row .svc-delivery { flex: 1; min-width: 0; }
.svc-like {
  flex-shrink: 0; background: none; border: none; padding: 2px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 0;
  color: var(--tm); transition: color 0.18s, transform 0.18s;
}
.svc-like svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.svc-like:hover { color: var(--error); transform: scale(1.12); }
.svc-like.active { color: var(--error); }
.svc-like.active svg { fill: var(--error); }
.svc-addon-pill { color: var(--tm); font-size: 13.5px; white-space: nowrap; }
.svc-addon-pill b { color: #fff; font-weight: 700; }
/* Cabeçalho: avatar + nome (clicável) + tabs de tipos de serviço AO LADO do nome
   (empurradas p/ a direita; passam p/ baixo em ecrãs estreitos). */
.svc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-head-info { min-width: 0; }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.svc-tab {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-size: 13.2px; font-weight: 600;
  color: #fff; opacity: 0.5; transition: opacity 0.18s;
}
/* No telemovel: o coracao tinha 22x22 e as abas 20px de altura — pequenos
   demais para o polegar. So cresce a area clicavel; o icone e o texto ficam
   iguais, porque ambos ja centram o conteudo. */
@media (max-width: 768px) {
  .svc-like { min-width: 36px; min-height: 36px; padding: 6px; }
  .svc-tab { min-height: 34px; padding: 0 4px; }
}
.svc-tab:hover { opacity: 0.85; }
.svc-tab.active { opacity: 1; font-weight: 700; }
.svc-hire {
  background: #3a3a3a; color: #fff; border: none; font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.svc-hire:hover { background: var(--y); color: #000; transform: translateY(-1px); }
.svc-empty { text-align: center; color: var(--tm); padding: 4rem 1rem; grid-column: 1 / -1; }
.svc-empty a { color: var(--y); }