/* chain-pill.css — Unified chain logo + name visual.
   Loaded by every page that mentions a supermarket chain via the
   /includes/chain-pill.jsp include OR the chainPill() helper in
   /js/chain-pill.js. Single source of truth — change colours / sizing
   here and every surface follows.

   The .ch-logo <img> tag points at /img/chains/<slug>.png. Until that
   file exists, the inline onerror swaps in a .ch-logo-ph placeholder
   pill ("[LOGO]" on a dashed gold border) so the user sees exactly
   where each logo belongs. Once the PNG lands, the placeholder
   disappears — no JSP edits needed.
*/

.ch-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    vertical-align:middle;
    line-height:1;
}

.ch-pill .ch-logo,
.ch-pill .ch-logo-ph {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e2e8f0;
    box-sizing:border-box;
}

/* Placeholder shown when the PNG is missing.
   Dashed gold border + small uppercase tag so it visibly says "logo goes here". */
.ch-pill .ch-logo-ph {
    background:linear-gradient(135deg, #fdf9ec, #f7eecf);
    border:1px dashed #c8a951;
    color:#8b6a16;
    font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.3px;
    padding:0 4px;
    text-transform:uppercase;
}

/* Size variants — width = height, square logo */
.ch-xs .ch-logo, .ch-xs .ch-logo-ph { width:16px; height:16px; font-size:.5rem; }
.ch-sm .ch-logo, .ch-sm .ch-logo-ph { width:20px; height:20px; font-size:.55rem; }
.ch-md .ch-logo, .ch-md .ch-logo-ph { width:28px; height:28px; font-size:.6rem;  }
.ch-lg .ch-logo, .ch-lg .ch-logo-ph { width:44px; height:44px; font-size:.66rem; }

/* The actual PNG fills its slot — preserve aspect via object-fit: contain */
.ch-pill .ch-logo {
    object-fit:contain;
    padding:1px;
}

.ch-pill .ch-name {
    color:inherit;
    font-size:.92em;
    font-weight:inherit;
    white-space:nowrap;
}

/* When dropped inside a dark surface (e.g. .cb-bar dark navy strip),
   force the placeholder visible against the dark background. */
.cb-bar .ch-pill .ch-logo-ph,
[data-dark] .ch-pill .ch-logo-ph {
    background:#1e293b;
    border-color:#c8a951;
    color:#c8a951;
}

/* Hover state for clickable chain chips (e.g. Featured chains row) */
.ch-pill[data-clickable="1"] {
    cursor:pointer;
    transition:transform .15s ease;
}
.ch-pill[data-clickable="1"]:hover {
    transform:translateY(-1px);
}