/* backend>static>dogs>css>dogs.css */
[hidden]{ display:none !important; }

html, body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{ touch-action: pan-y; }

body.dogs-page{
  --page-w: 27cm;

  /* Header slab geometry */
  --slab-pad-top: 0.5cm;     /* la “fascia” sopra */
  --slab-gap: 10px;
  --slab-row1-h: 64px;       /* topbar approx */
  --slab-row2-h: 64px;       /* quick-actions approx */
  --slab-pad-bottom: 12px;
  --slab-h: calc(var(--slab-pad-top) + var(--slab-row1-h) + var(--slab-gap) + var(--slab-row2-h) + var(--slab-pad-bottom));

    /* Theme tokens (DARK default) */
  --bg: #07070a;
  --panel: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --hint: rgba(255,255,255,.65);
  --shadow: 0 18px 40px rgba(0,0,0,.55);

  background: var(--bg);
  color: var(--text);

  /* spazio sopra: le card scorrono sotto lo slab */
  padding-top: calc(var(--slab-h) + 12px);
}
/* LIGHT mode: override SOLO quando html.light è presente */
html.light body.dogs-page{
  --bg: #f3f4f6;
  --panel: #ffffff;
  --border: #e5e7eb;
  --text: #0f172a;
  --muted: #475569;
  --hint: #64748b;
  --shadow: 0 1px 2px rgba(0,0,0,.03);

  background: var(--bg);
  color: var(--text);
}

body.dogs-page.dogs-dark{
  --bg: #07070a;
  --panel: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --hint: rgba(255,255,255,.65);
  --shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* width allineata per contenuti */
.dogs-page .dog-card{
  width: min(var(--page-w), calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   HEADER SLAB (fisso)
   ========================================================= */
.dogs-page .dogs-header-slab{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  width: min(var(--page-w), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;

  height: var(--slab-h);
  padding: var(--slab-pad-top) 16px var(--slab-pad-bottom);

  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--slab-gap);

  background: var(--bg);     /* piatto come BG (sia light che dark) */
  z-index: 2000;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.dogs-page .dogs-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  background: var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 22px;
  box-shadow: var(--shadow);
}

.dogs-page .dogs-topbar .topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.dogs-page .dogs-topbar .account-line{
  font-size:14px;
  color:#2563eb; /* blu come richiesto */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dogs-page .dogs-topbar .topbar-right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding-right:4px;
}

/* bottoni menu */
.dogs-page .topnav-btn{
  appearance:none;
  -webkit-appearance:none;

  border:1px solid var(--border);
  border-radius:10px;
  background: transparent;       /* niente box “pesanti” */
  color: var(--text);
  text-decoration:none;

  font-weight:600;
  font-size:14px;
  line-height:1;
  padding:8px 12px;
  cursor:pointer;

  transition: transform .08s ease, border-color .18s ease, color .18s ease;
}
.dogs-page .topnav-btn:hover{ transform: translateY(-1px); }
.dogs-page .topnav-btn:active{ transform:none; }
.dogs-page .topnav-btn:focus-visible{ outline:2px solid rgba(99,102,241,.35); outline-offset:2px; }

/* hover light leggero */
body.dogs-page:not(.dogs-dark) .topnav-btn:hover{
  border-color: rgba(15,23,42,.25);
}
/* hover dark: solo movimento, border appena */
body.dogs-page.dogs-dark .topnav-btn:hover{
  border-color: rgba(255,255,255,.22);
}

/* =========================================================
   TOPBAR TOOLTIP (solo testo sotto, no box)
   ========================================================= */
.dogs-page .topnav-btn[data-tooltip]{ position:relative; }

.dogs-page .topnav-btn[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  top: calc(100% + 3px);
  transform: translateX(-50%);
  white-space: nowrap;

  font-size:12px;
  font-weight:400;

  color: var(--text);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
}
.dogs-page .topnav-btn[data-tooltip]:hover::after,
.dogs-page .topnav-btn[data-tooltip]:focus-visible::after{
  opacity:1;
}

/* in dark il testo è già chiaro dai token */
body.dogs-page.dogs-dark .topnav-btn[data-tooltip]::after{
  color: rgba(255,255,255,.92);
}

/* =========================================================
   QUICK ACTIONS (sotto topbar, dentro slab)
   ========================================================= */
.dogs-page .quick-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  /* nessuna card: continuità dello slab */
  background: transparent;
}

/* wrapper desktop */
@media (min-width: 900px){
  .dogs-page .add-dog-wrap{ flex:0 0 auto; }
  .dogs-page .search-dog-wrap{ flex:0 0 7cm; min-width:7cm; }
}

/* Bottone aggiungi */
.dogs-page .btn-add-dog{
  display:flex;
  align-items:center;
  gap:12px;

  height:44px;
  padding:0 14px;

  border:1px solid var(--border);
  border-radius:8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration:none;

  transition: transform .08s ease;
}
.dogs-page .btn-add-dog:hover{ transform: translateY(-1px); }
.dogs-page .btn-add-dog:active{ transform:none; }

.dogs-page .btn-add-dog .add-dog-ico{
  width:32px; height:32px;
  object-fit:cover;
  border-radius:6px;
  flex:0 0 auto;
}
.dogs-page .btn-add-dog .add-dog-label{
  font-weight:700;
  font-size:1rem;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Search */
.dogs-page .search-field{
  --h:44px;
  position:relative;
  display:flex;
  align-items:center;
  height:var(--h);

  border:1px solid var(--border);
  border-radius:10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.dogs-page .search-go{
  position:absolute; left:8px; top:50%;
  transform:translateY(-50%);

  width:32px; height:32px;
  display:grid; place-items:center;

  border:0;
  border-radius:8px;
  background: rgba(99,102,241,.12);
  color: var(--text);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.dogs-page .search-input{
  flex:1 1 auto;
  height:100%;
  border:0;
  outline:0;
  background:transparent;

  padding:0 40px 0 40px;
  font-size:14px;
  color: var(--text);
  min-width:0;
}
.dogs-page .search-input::placeholder{ color: var(--hint); }

.dogs-page .search-clear{
  position:absolute; right:8px; top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;

  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  opacity:.75;
  color: var(--text);
}
.dogs-page .search-clear:hover{ opacity:1; }

.dogs-page .search-hint{
  min-height:1em;
  color: var(--muted);
  font-size:.9rem;
  margin-top:4px;
}

/* MOBILE: colonna e larghezze uguali (add = search) */
@media (max-width: 640px){
  body.dogs-page{
    --slab-pad-top: 10px;
    --slab-row1-h: 120px;   /* topbar a 2 righe */
    --slab-row2-h: 130px;   /* quick-actions in colonna + hint */
    --slab-pad-bottom: 10px;
  }

  .dogs-page .dogs-topbar{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 22px;
  }
  .dogs-page .dogs-topbar .topbar-left{
    width: 100%;
    display:flex;
    align-items:center;
  }
.dogs-page .dogs-topbar .account-line{
    margin-left:auto;
    text-align:right;
    max-width:60vw;
  }

  .dogs-page .dogs-topbar .topbar-right{
    width:100%;
    justify-content:center;
    gap:10px;
  }

  .dogs-page .quick-actions{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
  }

  .dogs-page .add-dog-wrap,
  .dogs-page .search-dog-wrap{
    width: 100%;
    width: min(92vw, 360px);
  }

  .dogs-page .btn-add-dog{
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================================
   DOG CARD + LAYOUT
   ========================================================= */
.dogs-page .dog-card{
  position: relative;
  display:block;

  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  padding:14px;
  margin:14px auto;
  box-shadow: var(--shadow);
  max-width: 100%;
}

.dog-layout{
  display:grid;
  grid-template-columns: 4.4cm 1fr 420px;
  gap:16px;
  align-items:start;
}

.dog-media-col{ width:4.4cm; }
.dog-main{ min-width:0; }
.dog-side{ min-width:0; }

@media (max-width: 980px){
  .dog-layout{ grid-template-columns:1fr; }
  .dog-side{ order:3; }
}

.dogs-page .dog-card h2{ margin:0 0 6px; color:#2563eb; }
.dogs-page .dog-card p{ margin:.25rem 0; color: var(--muted); }

/* Media */
.dogs-page .dog-card .dog-media,
.dogs-page .dog-card .dog-photo{
  width:4.4cm; height:4.4cm;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.dogs-page .dog-card .placeholder{
  width:4.4cm; height:4.4cm;
  border-radius:12px;
  background: rgba(0,0,0,.04);
  display:grid;
  place-items:center;
  color: rgba(127,127,127,.9);
}
body.dogs-page.dogs-dark .dog-card .placeholder{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
}

@media (max-width: 768px){
  .dog-media-col{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .dogs-page .dog-card .dog-media{ margin:0 auto; }
}

/* Flag */
.dogs-page .flag-icon{
  width:20px;
  height:14px;
  object-fit:cover;
  border-radius:2px;
  margin-right:4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  vertical-align:-2px;
}
.dogs-page .flag-code{
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  background: rgba(99,102,241,.12);
  color: #3730a3;
  padding:0 6px;
  border-radius:4px;
  margin-right:4px;
}

/* Pills no link style */
.id-pill,
.id-pill:link,
.id-pill:visited,
.id-pill:hover,
.id-pill:active{
  color: inherit;
  text-decoration:none;
}
.id-pill{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
}
body.dogs-page.dogs-dark .id-pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Edit row: niente underline */
.dogs-page .edit-row a,
.dogs-page .edit-row a:link,
.dogs-page .edit-row a:visited,
.dogs-page .edit-row a:hover,
.dogs-page .edit-row a:active{
  text-decoration:none;
  color: inherit;
}
.dogs-page .edit-row button{
  background: transparent;
  border:0;
  box-shadow:none;
  padding:0;
  color: inherit;
  cursor:pointer;
}

/* =========================================================
   REACTIONS + COMMENTI
   ========================================================= */
.dogs-page .dog-actions .reactions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:7px;
}

/* i numeri devono seguire il tema */
.dogs-page .btn-react{
  background: transparent;
  border:0;
  box-shadow:none;
  padding:0;
  color: var(--text);
  cursor:pointer;
}
.dogs-page .btn-react span{ color: inherit; }

.dogs-page .comments-block{ margin-top:4px; }

.dogs-page .comments-list{
  display:grid;
  gap:.4rem;
  margin:.5rem 0;
}

.dogs-page .comment-item{
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  padding:.5rem;
  color: var(--text);
}
body.dogs-page.dogs-dark .comment-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.dogs-page .comment-meta{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:space-between;
  font-size:.9rem;
  color: var(--hint);
  margin-top:.25rem;
}
body.dogs-page.dogs-dark .comment-meta{ color: rgba(255,255,255,.65); }

.comment-author{
  background:none;
  border:0;
  padding:0;
  font: inherit;
  font-weight:800;
  cursor:pointer;
  text-decoration: none; /* niente underline */
  color: inherit;
  opacity: .85;
}

.dogs-page .comment-actions{
  display:inline-flex;
  gap:.35rem;
}
.dogs-page .comment-actions button{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 4px 8px;
  cursor:pointer;
}
.dogs-page .comment-actions button:hover{
  background: rgba(0,0,0,.03);
}
body.dogs-page.dogs-dark .comment-actions button:hover{
  background: rgba(255,255,255,.06);
}

.dogs-page .comments-block .comment-form textarea{
  width:100%;
  box-sizing:border-box;
  resize: vertical;

  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}
.dogs-page .comments-block .comment-form textarea::placeholder{
  color: var(--hint);
}

.dogs-page .comments-block .comment-form button{
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  font-weight: 800;
  cursor:pointer;
}
.dogs-page .comments-block .comment-form button:hover{
  background: rgba(0,0,0,.03);
}
body.dogs-page.dogs-dark .comments-block .comment-form button:hover{
  background: rgba(255,255,255,.06);
}

/* =========================================================
   DOG PROFILE (bio + tabs + tiles)
   - bio "nuda"
   - separatore sottile
   - tabs come testo (no pill) in entrambe le versioni
   ========================================================= */
.dogs-page .dog-profile{ margin-top: 10px; }

.dogs-page .dog-bio-row{
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
  border: 0;
}
.dogs-page .dog-bio-title{
  font-weight: 800;
  font-size: 13px;
  color: var(--hint);
  margin-bottom: 6px;
}
.dogs-page .dog-bio{
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
  white-space: pre-wrap;
}

.dogs-page .profile-sep{
  border:0;
  border-top:1px solid var(--border);
  margin: 10px 0 12px;
}

/* Tabs: testo */
.dogs-page .dog-tabs{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}
.dogs-page .dog-tab{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;

  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  cursor:pointer;

  color: rgba(0,0,0,.45);
  transition: color .12s ease;
}
body.dogs-page.dogs-dark .dog-tab{
  color: rgba(255,255,255,.45);
}
.dogs-page .dog-tab:hover{
  color: rgba(0,0,0,.78);
}
body.dogs-page.dogs-dark .dog-tab:hover{
  color: rgba(255,255,255,.78);
}
.dogs-page .dog-tab.is-active{
  color: rgba(0,0,0,.95);
}
body.dogs-page.dogs-dark .dog-tab.is-active{
  color: rgba(255,255,255,.95);
}

/* Grid: 7 in riga, NO wrap */
.dogs-page .dog-media-grid{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow:hidden;
  width:100%;
}

.dogs-page .dog-media-empty{
  color: var(--hint);
}

/* Tile base */
.dogs-page .dog-tile{
  flex:0 0 auto;
  width:45px;
  border-radius: 4px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.02);
  position:relative;
}
body.dogs-page.dogs-dark .dog-tile{
  background: rgba(255,255,255,.03);
}

.dogs-page .dog-tile.is-square{ height:45px; }
.dogs-page .dog-tile.is-portrait{ height:60px; }

.dogs-page .dog-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor: zoom-in;
}

/* Delete cover (owner) */
.dogs-page .dog-tile .cover-del{
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  cursor:pointer;
}
body.dogs-page.dogs-dark .dog-tile .cover-del{
  background: rgba(0,0,0,.45);
}
.dogs-page .dog-tile .cover-del:hover{
  background: rgba(0,0,0,.55);
}

/* Chip (se arrivano stringhe) */
.dogs-page .dog-chip{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: transparent;
  font-weight:700;
  font-size:13px;
  color: var(--text);
}

/* =========================================================
   LIGHTBOX (zoom corretto)
   ========================================================= */
#imgLightbox{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 99999;

  background: rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#imgLightbox.open{ display:flex; }
#imgLightbox img{
  max-width: 94vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  cursor: zoom-out;
}
body.lb-open{ overflow:hidden; }
@media (max-width: 640px){
  .dogs-page .dog-card{
    width: calc(100% - 24px);
  }
}
/* =========================================================
   PATCH FINALE (metti in FONDO al file) — PULITO
   ========================================================= */

/* Base: distanza contenuto sotto lo slab */
body.dogs-page{
  --content-gap: 0.8cm;
  padding-top: calc(var(--slab-h) + var(--content-gap));
}
body.dogs-page .dog-card:first-of-type{ margin-top: 0; }

/* StoreID: niente underline + colore coerente */
.dogs-page a.cs-pill.cs-store{
  text-decoration: none;
  color: inherit;
}
body.dogs-page.dogs-dark a.cs-pill.cs-store{
  color: rgba(255,255,255,.92);
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 641px){

  /* topbar più bassa */
  body.dogs-page .dogs-topbar{ padding: 12px 22px; }

  /* slab/topbar più largo per lato (se lo vuoi davvero così) */
  body.dogs-page .dogs-header-slab{
    width: min(calc(var(--page-w) + 10mm), calc(100% - 22px));
    margin-left:auto;
    margin-right:auto;
    padding-bottom: var(--slab-pad-bottom); /* no extra nero in desktop */
  }

  /* + spazio tra scheda menu e barra di ricerca */
  body.dogs-page{ --slab-gap: 6mm; }

  /* riduci altezza slab (come avevi) */
  body.dogs-page{ --slab-row2-h: calc(64px - 1cm); }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 640px){

  /* account-line in alto a destra */
  body.dogs-page .dogs-topbar .topbar-left{
    width:100%;
    display:flex;
    align-items:center;
  }
  body.dogs-page .dogs-topbar .account-line{
    margin-left:auto;
    text-align:right;
    max-width:60vw;
  }

  /* wrapper bottone + search */
  body.dogs-page .add-dog-wrap,
  body.dogs-page .search-dog-wrap{
    width:100%;
    max-width:min(92vw, 360px);
    margin-left:auto;
    margin-right:auto;
  }

  /* quick-actions (colonna + larghezze coerenti) */
  body.dogs-page .quick-actions{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding-bottom: 18px;
  }

  /* spazio tra scheda menu e bottone aggiungi */
  body.dogs-page .add-dog-wrap{
    display:flex;
    justify-content:center;
    margin-top: 1.5mm; /* qui i tuoi 3–5mm se vuoi: metti 3mm o 5mm */
  }

  /* bottone 50% centrato */
  body.dogs-page .btn-add-dog{
    width:50%;
    max-width:180px;
    justify-content:center;
  }

  /* search full width */
  body.dogs-page .search-dog-card,
  body.dogs-page .search-field{
    width:100%;
    box-sizing:border-box;
  }

  /* hint */
  body.dogs-page .search-hint{ padding-bottom: 10px; }

  /* dog-card con aria laterale */
  body.dogs-page .dog-card{
    width: min(92vw, 360px);
    margin-left:auto;
    margin-right:auto;
  }

  /* micro-extend nero sotto la search (solo mobile) */
  body.dogs-page .dogs-header-slab{
    padding-bottom: calc(var(--slab-pad-bottom) + 5mm);
  }
}
/* =========================================================
   DESKTOP: sposta Aggiungi Account +2cm a destra
           e la Search -2cm (verso sinistra)
   ========================================================= */
@media (min-width: 641px){

  /* Aggiungi Account: 2cm verso destra */
  body.dogs-page .add-dog-wrap{
    transform: translateX(1cm);
  }

  /* Barra di ricerca: 2cm verso sinistra */
  body.dogs-page .search-dog-wrap{
    transform: translateX(-1cm);
  }
}
/* =========================================================
   Tooltip BOX (con sfondo) per StoreID + Reazioni + Flag
   ========================================================= */

/* ancoraggio */
.dogs-page .btn-react[data-tooltip],
.dogs-page a.cs-pill.cs-store[data-tooltip],
.dogs-page .flag-tip[data-tooltip]{
  position: relative;
}

/* flag wrapper: serve perché ::after non funziona su <img> */
.dogs-page .flag-tip[data-tooltip]{
  display: inline-flex;
  align-items: center;
}

/* box tooltip */
.dogs-page .btn-react[data-tooltip]::after,
.dogs-page a.cs-pill.cs-store[data-tooltip]::after,
.dogs-page .flag-tip[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;

  font-size: 12px;
  font-weight: 400;
  line-height: 1;

  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
}

/* show */
.dogs-page .btn-react[data-tooltip]:hover::after,
.dogs-page .btn-react[data-tooltip]:focus-visible::after,
.dogs-page a.cs-pill.cs-store[data-tooltip]:hover::after,
.dogs-page a.cs-pill.cs-store[data-tooltip]:focus-visible::after,
.dogs-page .flag-tip[data-tooltip]:hover::after,
.dogs-page .flag-tip[data-tooltip]:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(1px);
}

/* dark: sfondo più leggibile */
body.dogs-page.dogs-dark .btn-react[data-tooltip]::after,
body.dogs-page.dogs-dark a.cs-pill.cs-store[data-tooltip]::after,
body.dogs-page.dogs-dark .flag-tip[data-tooltip]::after{
  background: rgba(0,0,0,.65);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}


/* audio più corto (larghezza) */
.dogs-page .audio-row audio{
  height: 32px;
  width: 160px;
  max-width: 100%;
}

/* Cestino audio: trasparente, niente bordo/sfondo */
.dogs-page .btn-audio-del{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;

  line-height: 1;
  cursor: pointer;
  color: #111827; /* light: nero */
}

/* hover leggero */
.dogs-page .btn-audio-del:hover{
  opacity: .85;
}

/* dark: bianco */
html.dark .dogs-page .btn-audio-del{
  color: rgba(255,255,255,.92);
}