/* ═══════════════════════════════════════════════════════════════
   BUMAGA LABELS — Public Page Styles v3.0
   Location: /assets/css/labels.css
   ═══════════════════════════════════════════════════════════════
   
   v3.0 — "Expandable Premium Catalog Card" redesign
   Single unified method list, inline expand, no flyout.
   
   Namespace: lbl-*
   Dependencies: tokens.css (--bp-* variables)
   Zero hardcoded colors — all via design tokens.
   ═══════════════════════════════════════════════════════════════ */

.lbl-container { max-width:1300px; margin:0 auto; padding:40px 24px 60px; }

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.lbl-hero { text-align:center; margin-bottom:48px; }
.lbl-hero-title { font-size:42px; font-weight:900; margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:15px; color:var(--bp-text); }
.lbl-hero-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg, var(--bp-accent) 0%, #2d7cd6 100%); border-radius:var(--bp-radius); box-shadow:var(--bp-shadow-accent); }
.lbl-hero-icon svg { width:32px; height:32px; color:#fff; }
.lbl-hero-subtitle { color:var(--bp-text-secondary); font-size:18px; max-width:600px; margin:0 auto; line-height:1.6; }

/* ══════════════════════════════════════════════════════════════
   FILTERS
   ══════════════════════════════════════════════════════════════ */
.lbl-filters { display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:36px; }
.lbl-filter-tabs { display:flex; align-items:center; gap:0; background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:var(--bp-radius-sm); overflow:hidden; }
.lbl-filter-tab { padding:11px 28px; font-size:0.88rem; font-weight:600; border:none; background:transparent; color:var(--bp-text-secondary); cursor:pointer; transition:all var(--bp-transition); text-decoration:none; position:relative; }
.lbl-filter-tab:not(:last-child)::after { content:''; position:absolute; right:0; top:20%; height:60%; width:1px; background:var(--bp-border); }
.lbl-filter-tab:hover { color:var(--bp-text); background:rgba(255,255,255,0.03); }
.lbl-filter-tab.active { background:var(--bp-accent-dim); color:var(--bp-accent); }
.lbl-filter-tab.active::after { display:none; }
.lbl-search-wrap { display:flex; align-items:center; gap:10px; }
.lbl-search-input { background:var(--bp-surface); border:1px solid var(--bp-border); color:var(--bp-text); padding:11px 20px; border-radius:var(--bp-radius-sm); font-size:0.9rem; font-family:var(--bp-sans); width:340px; transition:border-color var(--bp-transition); }
.lbl-search-input::placeholder { color:var(--bp-text-muted); }
.lbl-search-input:focus { border-color:var(--bp-accent); outline:none; box-shadow:0 0 0 3px var(--bp-accent-dim); }
.lbl-search-reset { padding:11px 20px; border-radius:var(--bp-radius-sm); font-size:0.82rem; font-weight:500; border:1px solid var(--bp-red); background:transparent; color:var(--bp-red); cursor:pointer; text-decoration:none; transition:all var(--bp-transition); font-family:var(--bp-sans); }
.lbl-search-reset:hover { background:var(--bp-red-dim); }

/* ── Client-Side Search States ── */
.lbl-card--dimmed {
    opacity:0.2;
    pointer-events:none;
    transition:opacity 0.3s ease;
}
.lbl-card--search-match {
    border-color:rgba(74,158,255,0.25);
}
.lbl-method-row--search-hit {
    background:rgba(74,158,255,0.1) !important;
    box-shadow:inset 3px 0 0 var(--bp-accent);
}
.lbl-method-row--search-hit .lbl-method-name {
    color:var(--bp-accent);
    font-weight:600;
}

/* ── Filter Tab Count Badge ── */
.lbl-filter-count {
    font-size:0.7rem;
    font-weight:700;
    color:var(--bp-text-muted);
    background:rgba(255,255,255,0.06);
    padding:2px 7px;
    border-radius:var(--bp-radius-xs);
    margin-left:4px;
}
.lbl-filter-tab.active .lbl-filter-count {
    color:var(--bp-accent);
    background:rgba(74,158,255,0.12);
}

/* ── Context Bar ── */
.lbl-context-bar {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:16px;
    font-size:0.82rem;
    color:var(--bp-text-muted);
}
.lbl-context-item {
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.lbl-context-value {
    color:var(--bp-accent);
    font-weight:700;
    font-family:var(--bp-mono);
}
.lbl-context-label {
    color:var(--bp-text-muted);
}
.lbl-context-sep {
    color:rgba(255,255,255,0.15);
    font-weight:300;
}

/* ══════════════════════════════════════════════════════════════
   COVERAGE MAP — style 1:1 from sms-coverage (numbers.php)
   ══════════════════════════════════════════════════════════════ */
.lbl-map-block {
    margin:0 auto;
    padding:20px 0 40px;
    max-width:100%;
    text-align:center;
}
.lbl-map-title {
    font-size:13px;
    font-weight:700;
    color:#555;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:8px;
}
.lbl-map-subtitle {
    font-size:14px;
    color:#666;
    margin-bottom:32px;
}

/* Map container */
.lbl-map-wrap {
    position:relative;
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
}
.lbl-map-wrap svg {
    width:100%;
    height:auto;
    display:block;
    position:relative;
    z-index:1;
}

/* Base country style — dark grey */
.lbl-map-wrap svg path {
    fill:#1e2230;
    stroke:#2a2f40;
    stroke-width:0.3;
    transition:fill 0.3s ease;
}

/* Active coverage — glowing blue */
.lbl-map-wrap svg path.has-labels {
    fill:rgba(74,158,255,0.35);
    stroke:rgba(74,158,255,0.5);
    stroke-width:0.5;
}
.lbl-map-wrap svg path.has-labels:hover {
    fill:rgba(74,158,255,0.55);
    stroke:rgba(74,158,255,0.8);
    cursor:pointer;
    filter:brightness(1.3);
}

/* Clicked state — scroll-to-card feedback */
.lbl-map-wrap svg path.has-labels.lbl-map-active {
    fill:rgba(74,158,255,0.65);
    stroke:rgba(74,158,255,0.9);
    filter:brightness(1.4);
}

/* Subtle glow effect behind map */
.lbl-map-glow {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:60%;
    height:60%;
    background:radial-gradient(ellipse, rgba(74,158,255,0.06) 0%, transparent 70%);
    pointer-events:none;
    z-index:0;
}

/* ── Tooltip — matching sms-map-tooltip ── */
.lbl-map-tooltip {
    position:fixed;
    z-index:9999;
    pointer-events:none;
    background:rgba(13,17,23,0.95);
    border:1px solid rgba(74,158,255,0.3);
    border-radius:10px;
    padding:10px 14px;
    min-width:160px;
    max-width:240px;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 15px rgba(74,158,255,0.1);
    opacity:0;
    transform:translateY(4px);
    transition:opacity 0.15s ease, transform 0.15s ease;
}
.lbl-map-tooltip.visible {
    opacity:1;
    transform:translateY(0);
}
.lbl-map-tooltip-header {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}
.lbl-map-tooltip-flag {
    font-size:18px;
    line-height:1;
}
.lbl-map-tooltip-name {
    font-size:14px;
    font-weight:600;
    color:#fff;
}
.lbl-map-tooltip-meta {
    font-size:12px;
    color:#4a9eff;
    font-weight:600;
}

/* ── Coverage stat ── */
.lbl-map-stat {
    margin-top:20px;
    font-size:13px;
    color:#555;
}
.lbl-map-stat span {
    color:#4a9eff;
    font-weight:700;
}

/* ── Loading state ── */
.lbl-map-wrap--loading {
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lbl-map-wrap--loading::after {
    content:'';
    width:28px;
    height:28px;
    border:2px solid #2a2f40;
    border-top-color:#4a9eff;
    border-radius:50%;
    animation:lbl-map-spin 0.8s linear infinite;
}
@keyframes lbl-map-spin {
    to { transform:rotate(360deg); }
}

/* ── Responsive — hide on mobile (same as SMS) ── */
@media (max-width:600px) {
    .lbl-map-block { display:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   ECOSYSTEM — Additional Services
   ══════════════════════════════════════════════════════════════ */
.lbl-ecosystem {
    max-width:1100px;
    margin:0 auto 48px;
    padding:32px 24px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
}
.lbl-ecosystem-header {
    text-align:center;
    margin-bottom:28px;
}
.lbl-ecosystem-title {
    font-size:1.2rem;
    font-weight:800;
    color:var(--bp-text);
    margin-bottom:8px;
}
.lbl-ecosystem-subtitle {
    font-size:0.85rem;
    color:var(--bp-text-muted);
}

/* Grid: 3 cards */
.lbl-ecosystem-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

/* Card base */
.lbl-eco-card {
    position:relative;
    padding:24px 20px;
    background:var(--bp-card);
    border:1px solid var(--bp-border);
    border-radius:var(--bp-radius);
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    transition:border-color var(--bp-transition), box-shadow var(--bp-transition);
}
.lbl-eco-card:hover {
    border-color:var(--bp-accent-border);
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

/* Active card — stronger border */
a.lbl-eco-card {
    cursor:pointer;
}
a.lbl-eco-card:hover {
    border-color:var(--bp-accent);
    box-shadow:0 0 0 1px var(--bp-accent-border), 0 4px 20px rgba(0,0,0,0.3);
}

/* Coming soon card */
.lbl-eco-card--soon {
    opacity:0.7;
}
.lbl-eco-card--soon:hover {
    opacity:0.85;
}

/* Badge */
.lbl-eco-badge {
    position:absolute;
    top:12px;
    right:12px;
    font-size:0.62rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:3px 8px;
    border-radius:var(--bp-radius-xs);
    background:rgba(74,158,255,0.12);
    color:var(--bp-accent);
}

/* Icon */
.lbl-eco-icon {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(74,158,255,0.1);
    border-radius:10px;
    margin-bottom:14px;
}
.lbl-eco-icon svg {
    width:22px;
    height:22px;
    color:var(--bp-accent);
}

/* Text */
.lbl-eco-name {
    font-size:0.95rem;
    font-weight:700;
    color:var(--bp-text);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.lbl-eco-desc {
    font-size:0.78rem;
    color:var(--bp-text-muted);
    line-height:1.5;
    flex:1;
}

/* Action link */
.lbl-eco-action {
    margin-top:16px;
    font-size:0.8rem;
    font-weight:600;
    color:var(--bp-accent);
}
.lbl-eco-action a {
    color:var(--bp-accent);
    text-decoration:none;
}
.lbl-eco-action a:hover {
    text-decoration:underline;
}

/* Tracking links row */
.lbl-eco-action--links {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.lbl-eco-action--links a {
    font-size:0.72rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:6px;
    background:rgba(74,158,255,0.08);
    border:1px solid rgba(74,158,255,0.15);
    transition:all var(--bp-transition);
}
.lbl-eco-action--links a:hover {
    background:rgba(74,158,255,0.15);
    text-decoration:none;
}

/* Telegram action */
.lbl-eco-action--tg a {
    font-size:0.78rem;
}

/* Responsive */
@media (max-width:900px) {
    .lbl-ecosystem-grid { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:600px) {
    .lbl-ecosystem { padding:20px 16px; margin-bottom:32px; }
    .lbl-ecosystem-title { font-size:1rem; }
}

/* ══════════════════════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════════════════════ */
.lbl-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:48px; }

/* ══════════════════════════════════════════════════════════════
   CARD — Base container
   ══════════════════════════════════════════════════════════════ */
.lbl-card {
    background:var(--bp-card);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--bp-radius);
    overflow:hidden;
    transition:border-color var(--bp-transition), box-shadow var(--bp-transition), opacity 0.3s ease;
    display:flex;
    flex-direction:column;
    position:relative;
}
.lbl-card:hover {
    border-color:rgba(255,255,255,0.12);
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
}

/* Expanded state */
.lbl-card--expanded {
    border-color:var(--bp-accent-border);
    box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--bp-accent-border);
}

/* Map click → scroll highlight pulse */
.lbl-card--map-highlight {
    animation:lbl-card-pulse 1.5s ease;
}
@keyframes lbl-card-pulse {
    0%   { box-shadow:0 0 0 0 rgba(74,158,255,0.5); }
    30%  { box-shadow:0 0 0 6px rgba(74,158,255,0.3), 0 4px 24px rgba(0,0,0,0.3); border-color:var(--bp-accent-border); }
    100% { box-shadow:0 0 0 0 rgba(74,158,255,0); }
}

/* Deep-link hash scroll highlight */
.lbl-card--deep-highlight {
    border-color:var(--bp-accent-border) !important;
    animation:lbl-deep-pulse 2.5s ease forwards;
}
@keyframes lbl-deep-pulse {
    0%   { box-shadow:0 0 0 0 rgba(74,158,255,0.7); }
    20%  { box-shadow:0 0 0 10px rgba(74,158,255,0.3), 0 8px 32px rgba(0,0,0,0.4); }
    100% { box-shadow:0 0 0 0 rgba(74,158,255,0); border-color:var(--bp-border); }
}

/* Toast notification */
.lbl-toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
    background:var(--bp-surface-2); color:var(--bp-text);
    padding:10px 20px; border-radius:var(--bp-radius-sm);
    font-size:0.82rem; font-weight:500;
    border:1px solid var(--bp-border);
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
    opacity:0; pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:9999; white-space:nowrap;
}
.lbl-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════
   ZONE 1 — Card Header
   ══════════════════════════════════════════════════════════════ */
.lbl-card-head { padding:16px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--bp-border); flex-shrink:0; }
.lbl-card-flag { font-size:1.75rem; line-height:1; }
.lbl-card-info { flex:1; min-width:0; }
.lbl-card-name { font-size:1rem; font-weight:700; color:var(--bp-text); }
.lbl-card-meta { font-size:0.72rem; color:var(--bp-text-muted); margin-top:1px; }
.lbl-card-count { font-size:0.72rem; padding:3px 9px; border-radius:var(--bp-radius-xs); background:rgba(255,255,255,0.06); color:var(--bp-text-secondary); font-weight:700; flex-shrink:0; }
.lbl-card-share { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border:1px solid var(--bp-border); border-radius:var(--bp-radius-xs); background:transparent; color:var(--bp-text-secondary); cursor:pointer; padding:0; transition:all var(--bp-transition); }
.lbl-card-share:hover { border-color:var(--bp-accent-border); color:var(--bp-accent); background:var(--bp-accent-dim); }
.lbl-card-share svg { width:13px; height:13px; pointer-events:none; }

/* ══════════════════════════════════════════════════════════════
   ZONE 2 — Single Unified Methods List
   ══════════════════════════════════════════════════════════════ */

/* Outer wrapper — holds scroll area + fade */
.lbl-card-methods-wrap { position:relative; flex:1; min-height:252px; }

/* Scrollable methods container */
.lbl-card-methods { padding:0; }

/* Expanded state: constrained scroll */
.lbl-card--expanded .lbl-card-methods {
    max-height:336px;
    overflow-y:auto;
    scroll-behavior:smooth;
}

/* Custom scrollbar — thin, premium */
.lbl-card--expanded .lbl-card-methods::-webkit-scrollbar { width:4px; }
.lbl-card--expanded .lbl-card-methods::-webkit-scrollbar-track { background:transparent; }
.lbl-card--expanded .lbl-card-methods::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }
.lbl-card--expanded .lbl-card-methods::-webkit-scrollbar-thumb:hover { background:rgba(74,158,255,0.4); }

/* Firefox scrollbar */
.lbl-card--expanded .lbl-card-methods {
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.15) transparent;
}

/* Fade gradient — sits on wrapper, outside scroll */
.lbl-methods-fade {
    position:absolute;
    bottom:0;
    left:0;
    right:4px;
    height:40px;
    background:linear-gradient(to bottom, transparent, var(--bp-card));
    pointer-events:none;
    opacity:0;
    transition:opacity var(--bp-transition);
    z-index:1;
}
/* Active fade when content is scrollable */
.lbl-card--expanded .lbl-methods-fade.lbl-methods-fade--active {
    opacity:1;
}

/* Method row — FIXED HEIGHT for grid alignment */
.lbl-method-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 18px;
    gap:8px;
    height:42px;
    transition:background var(--bp-transition-fast);
}
.lbl-method-row:nth-child(odd) { background:rgba(255,255,255,0.02); }
.lbl-method-row:hover {
    background:rgba(74,158,255,0.06);
    box-shadow:inset 2px 0 0 var(--bp-accent);
}

/* Hidden rows — collapsed state */
.lbl-method-row--hidden {
    display:none;
}
/* Revealed on expand */
.lbl-method-row--hidden.lbl-method-row--visible {
    display:flex;
}

.lbl-method-info { flex:1; min-width:0; line-height:1.2; }
.lbl-method-name {
    font-size:0.8rem;
    font-weight:500;
    color:var(--bp-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lbl-method-risk {
    font-size:0.62rem;
    color:var(--bp-orange);
    font-style:italic;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
    line-height:1;
}
.lbl-method-risk.safe { color:var(--bp-green); }
.lbl-method-price { font-size:0.88rem; font-weight:700; color:var(--bp-text); font-family:var(--bp-mono); white-space:nowrap; flex-shrink:0; }

/* All method rows are clickable for detail */
.lbl-method-row { cursor:pointer; }
.lbl-method-row--active {
    background:rgba(74,158,255,0.08) !important;
    box-shadow:inset 2px 0 0 var(--bp-accent);
}

/* ── Inline Method Detail (accordion inside scroll) ── */
.lbl-method-detail {
    padding:10px 18px 12px;
    background:rgba(74,158,255,0.04);
    border-top:1px solid rgba(74,158,255,0.1);
    border-bottom:1px solid rgba(74,158,255,0.1);
    display:flex;
    gap:12px;
    align-items:flex-start;
    animation:lbl-detail-in 0.2s ease;
}
@keyframes lbl-detail-in {
    from { opacity:0; max-height:0; padding-top:0; padding-bottom:0; }
    to { opacity:1; max-height:200px; }
}

/* Thumbnail in detail */
.lbl-detail-thumb-wrap {
    position:relative;
    width:110px;
    height:80px;
    flex-shrink:0;
    cursor:pointer;
    border-radius:var(--bp-radius-xs);
    overflow:hidden;
}
.lbl-detail-thumb {
    width:100%;
    height:100%;
    object-fit:cover;
    border:1px solid var(--bp-border);
    border-radius:var(--bp-radius-xs);
    transition:border-color var(--bp-transition);
}
.lbl-detail-thumb-wrap:hover .lbl-detail-thumb {
    border-color:var(--bp-accent);
}
.lbl-detail-thumb-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity var(--bp-transition);
    border-radius:var(--bp-radius-xs);
}
.lbl-detail-thumb-wrap:hover .lbl-detail-thumb-overlay { opacity:1; }
.lbl-detail-thumb-overlay svg { width:24px; height:24px; color:#fff; }

/* Detail info area */
.lbl-detail-info { flex:1; min-width:0; }
.lbl-detail-name { font-size:0.82rem; font-weight:600; color:var(--bp-text); margin-bottom:3px; }
.lbl-detail-price { font-size:0.78rem; color:var(--bp-text-secondary); font-family:var(--bp-mono); margin-bottom:4px; }
.lbl-detail-risk {
    font-size:0.68rem;
    font-style:italic;
    margin-bottom:4px;
}
.lbl-detail-risk.warn { color:var(--bp-orange); }
.lbl-detail-risk.safe { color:var(--bp-green); }

.lbl-detail-notes { margin-top:4px; }
.lbl-detail-note-item {
    font-size:0.68rem;
    color:var(--bp-text-secondary);
    padding-left:10px;
    position:relative;
    line-height:1.4;
    white-space:pre-line;
    margin:2px 0;
}
.lbl-detail-note-item::before {
    content:'·';
    position:absolute;
    left:0;
    color:var(--bp-orange);
    font-weight:700;
}

/* View image button */
.lbl-detail-view-btn {
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:6px;
    padding:4px 10px;
    font-size:0.68rem;
    font-weight:600;
    font-family:var(--bp-sans);
    color:rgba(74,158,255,0.8);
    background:rgba(74,158,255,0.08);
    border:1px solid rgba(74,158,255,0.15);
    border-radius:6px;
    cursor:pointer;
    transition:all var(--bp-transition);
}
.lbl-detail-view-btn:hover {
    background:rgba(74,158,255,0.15);
    color:var(--bp-accent);
}
.lbl-detail-view-btn svg { width:12px; height:12px; }

/* No-image detail — full width notes */
.lbl-method-detail--no-image { }

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX — Full-size image viewer
   ══════════════════════════════════════════════════════════════ */
.lbl-lightbox {
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(0,0,0,0.85);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease;
    cursor:pointer;
}
.lbl-lightbox.open { opacity:1; visibility:visible; }

.lbl-lightbox-close {
    position:absolute;
    top:16px;
    right:20px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:1.4rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all var(--bp-transition);
    z-index:2;
}
.lbl-lightbox-close:hover {
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.4);
}

.lbl-lightbox-img {
    max-width:90vw;
    max-height:80vh;
    border-radius:var(--bp-radius);
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    cursor:default;
    object-fit:contain;
    transform:scale(0.95);
    transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lbl-lightbox.open .lbl-lightbox-img { transform:scale(1); }

.lbl-lightbox-caption {
    margin-top:14px;
    text-align:center;
    color:rgba(255,255,255,0.7);
    font-size:0.85rem;
    cursor:default;
}
.lbl-lightbox-caption-name { font-weight:600; color:#fff; }
.lbl-lightbox-caption-price { font-family:var(--bp-mono); margin-left:8px; }
.lbl-lightbox-caption-note { display:block; font-size:0.72rem; color:rgba(255,255,255,0.4); margin-top:3px; }

/* ══════════════════════════════════════════════════════════════
   ZONE 3 — Expand Trigger
   ══════════════════════════════════════════════════════════════ */
.lbl-expand-trigger {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:10px 18px;
    font-size:0.8rem;
    font-weight:600;
    font-family:var(--bp-sans);
    color:rgba(74,158,255,0.8);
    background:transparent;
    border:none;
    border-top:1px solid var(--bp-border);
    cursor:pointer;
    transition:all var(--bp-transition);
}
.lbl-expand-trigger:hover {
    background:rgba(74,158,255,0.06);
    color:var(--bp-accent);
    text-shadow:0 0 12px rgba(74,158,255,0.3);
}

.lbl-expand-trigger-count {
    font-size:0.68rem;
    padding:2px 7px;
    border-radius:var(--bp-radius-xs);
    background:rgba(74,158,255,0.08);
    color:rgba(74,158,255,0.7);
    font-weight:700;
}

.lbl-expand-arrow {
    width:16px; height:16px;
    color:rgba(74,158,255,0.5);
    transition:transform var(--bp-transition);
    flex-shrink:0;
}

/* Arrow rotates when expanded */
.lbl-card--expanded .lbl-expand-arrow { transform:rotate(180deg); }

/* ══════════════════════════════════════════════════════════════
   ZONE 4 — Card Meta (weight + notes)
   ══════════════════════════════════════════════════════════════ */
.lbl-card-meta-zone { flex-shrink:0; }

/* Weight price — compact inline bar */
.lbl-card-weight {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 18px;
    background:rgba(255,255,255,0.03);
    border-top:1px solid var(--bp-border);
}
.lbl-card-weight-label {
    font-size:0.7rem;
    font-weight:600;
    color:var(--bp-text-secondary);
    text-transform:uppercase;
    letter-spacing:0.3px;
}
.lbl-card-weight-value {
    font-size:0.8rem;
    font-weight:600;
    color:var(--bp-text);
    font-family:var(--bp-mono);
}

/* Notes wrapper — independent toggle */
.lbl-card-notes-wrap {
    border-top:1px solid var(--bp-border);
}

/* Notes teaser — clickable button */
.lbl-card-notes-teaser {
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    padding:7px 18px;
    font-size:0.72rem;
    color:var(--bp-text-secondary);
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:var(--bp-sans);
    text-align:left;
    transition:background var(--bp-transition);
}
.lbl-card-notes-teaser:hover { background:var(--bp-orange-dim); }
.lbl-notes-icon { font-size:0.8rem; flex-shrink:0; }
.lbl-notes-teaser-text {
    flex:1; min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lbl-notes-more-badge {
    font-size:0.62rem;
    padding:1px 6px;
    border-radius:var(--bp-radius-xs);
    background:var(--bp-orange-dim);
    color:var(--bp-orange);
    font-weight:700;
    flex-shrink:0;
}

/* Notes arrow */
.lbl-notes-arrow {
    width:14px; height:14px;
    color:var(--bp-text-muted);
    transition:transform var(--bp-transition);
    flex-shrink:0;
    margin-left:auto;
}
.lbl-card-notes-wrap.open .lbl-notes-arrow {
    transform:rotate(180deg);
    color:var(--bp-orange);
}

/* Full country notes — toggled by .open on wrapper (independent of card expand) */
.lbl-card-notes-full {
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease, padding 0.3s ease;
    padding:0 18px;
    background:var(--bp-orange-dim);
}
.lbl-card-notes-wrap.open .lbl-card-notes-full {
    max-height:2000px;
    padding:8px 18px 10px;
}

.lbl-card-note-item {
    font-size:0.72rem;
    color:var(--bp-text-secondary);
    margin:3px 0;
    padding-left:12px;
    position:relative;
    line-height:1.4;
    white-space:pre-line;
}
.lbl-card-note-item::before {
    content:'·';
    position:absolute;
    left:0;
    color:var(--bp-orange);
    font-weight:700;
}

/* ══════════════════════════════════════════════════════════════
   ZONE 5 — Primary CTA
   ══════════════════════════════════════════════════════════════ */
.lbl-card-cta { padding:12px 14px; margin-top:auto; }
.lbl-order-btn {
    display:block;
    width:100%;
    padding:12px;
    text-align:center;
    font-size:0.85rem;
    font-weight:600;
    color:#fff;
    background:linear-gradient(135deg, #4a9eff 0%, #2d7cd6 100%);
    border:none;
    border-radius:var(--bp-radius-sm);
    cursor:pointer;
    transition:all var(--bp-transition);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.lbl-order-btn:hover {
    background:linear-gradient(135deg, #5eadff 0%, #3d8be5 100%);
    box-shadow:0 4px 20px rgba(74,158,255,0.3), 0 1px 6px rgba(74,158,255,0.15) inset;
    transform:translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════ */
.lbl-empty { grid-column:1/-1; text-align:center; padding:60px 20px; }
.lbl-empty-icon { font-size:3rem; margin-bottom:12px; }
.lbl-empty-title { font-size:1.1rem; font-weight:600; color:var(--bp-text); margin-bottom:6px; }
.lbl-empty-text { font-size:0.88rem; color:var(--bp-text-muted); }

/* ══════════════════════════════════════════════════════════════
   FAQ — 1:1 with SMS-style (numbers.php), namespace lbl-faq-*
   ══════════════════════════════════════════════════════════════ */
.lbl-faq-section {
    max-width:900px;
    margin:64px auto 40px;
    padding:28px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
}

.lbl-faq-header {
    margin-bottom:24px;
}

.lbl-faq-title {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    font-weight:600;
    color:#fff;
    margin:0 0 8px 0;
    text-transform:none;
    letter-spacing:normal;
}
.lbl-faq-title::before {
    content:'❓';
    font-size:20px;
}

.lbl-faq-subtitle {
    color:#888;
    font-size:14px;
    margin:0;
}

.lbl-faq-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.lbl-faq-item {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    overflow:hidden;
    transition:all 0.2s;
    cursor:pointer;
}
.lbl-faq-item:hover {
    border-color:rgba(74,158,255,0.3);
    background:rgba(255,255,255,0.04);
}
.lbl-faq-item.active {
    border-color:rgba(74,158,255,0.4);
    background:rgba(74,158,255,0.05);
}

.lbl-faq-question {
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    transition:all 0.2s ease;
}
.lbl-faq-question:hover {
    background:transparent;
}
.lbl-faq-question span {
    font-size:14px;
    font-weight:500;
    color:#e0e0e0;
    line-height:1.5;
}

/* SVG chevron */
.lbl-faq-question svg {
    width:12px;
    height:12px;
    color:#666;
    flex-shrink:0;
    transition:transform 0.3s ease, color 0.3s ease;
}
.lbl-faq-item.active .lbl-faq-question svg {
    transform:rotate(180deg);
    color:#4a9eff;
}

.lbl-faq-answer {
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
}
.lbl-faq-item.active .lbl-faq-answer {
    max-height:500px;
}

.lbl-faq-answer-inner {
    padding:0 20px 20px 20px;
    font-size:13px;
    color:#a0a0a0;
    line-height:1.7;
    border-top:1px solid rgba(255,255,255,0.06);
    padding-top:16px;
    margin-top:0;
}
.lbl-faq-answer-inner strong {
    color:#4a9eff;
    font-weight:600;
}
.lbl-faq-answer-inner p {
    margin:0 0 12px 0;
}
.lbl-faq-answer-inner p:last-child {
    margin-bottom:0;
}

/* P22B_LABELS_FAQ_CLEAN_ANCHOR */
.lbl-faq-section[data-anchor="faq"] {
    scroll-margin-top: 96px;
}
/* P22C_LABELS_FAQ_ANCHOR_NO_NATIVE_JUMP */
/* /P22B_LABELS_FAQ_CLEAN_ANCHOR */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
    .lbl-grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:900px) {
    .lbl-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
    .lbl-hero-title { font-size:32px; }
    .lbl-hero-subtitle { font-size:16px; }
    .lbl-filter-tab { padding:9px 18px; font-size:0.82rem; }
    .lbl-search-input { width:260px; }

    /* Context bar — tighter */
    .lbl-context-bar { font-size:0.78rem; gap:5px; }

    /* Method detail — smaller thumb */
    .lbl-detail-thumb-wrap { width:90px; height:65px; }

    /* Lightbox — safe margins */
    .lbl-lightbox-img { max-width:92vw; max-height:75vh; }
}

@media (max-width:600px) {
    .lbl-container { padding:24px 16px 40px; }
    .lbl-grid { grid-template-columns:1fr; gap:14px; }

    /* ── Hero ── */
    .lbl-hero { margin-bottom:32px; }
    .lbl-hero-title { font-size:26px; gap:10px; }
    .lbl-hero-icon { width:44px; height:44px; }
    .lbl-hero-icon svg { width:24px; height:24px; }
    .lbl-hero-subtitle { font-size:14px; }

    /* ── Filters ── */
    .lbl-filters { gap:12px; margin-bottom:24px; }
    /* ── Filter tabs: horizontal swipe scroll on mobile (v197.1 — fix overflow) ── */
    .lbl-filter-tabs {
        width: 100%;              /* ← КРИТИЧНО: иначе контейнер растёт под контент */
        max-width: 100%;
        min-width: 0;             /* разрешить сжиматься внутри flex-родителя */
        box-sizing: border-box;

        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: var(--bp-radius-xs);

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .lbl-filter-tabs::-webkit-scrollbar { display: none; }

    .lbl-filter-tab {
        padding: 8px 14px;
        font-size: 0.78rem;
        flex-shrink: 0;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    .lbl-search-wrap { width:100%; }
    .lbl-search-input { width:100%; }

    /* ── Context bar — wrap on small screens ── */
    .lbl-context-bar {
        flex-wrap:wrap;
        font-size:0.75rem;
        gap:4px 6px;
        margin-top:10px;
    }

    /* ── Card header (Zone 1) ── */
    .lbl-card-head { padding:12px 14px; gap:8px; }
    .lbl-card-flag { font-size:1.5rem; }
    .lbl-card-name { font-size:0.95rem; }
    .lbl-card-meta { font-size:0.68rem; }
    .lbl-card-count { font-size:0.68rem; padding:2px 7px; }
    .lbl-card-share { width:26px; height:26px; }

    /* ── Methods list (Zone 2) ── */
    .lbl-card-methods-wrap { min-height:210px; }
    .lbl-method-row { padding:6px 14px; height:40px; }
    .lbl-method-name { font-size:0.78rem; }
    .lbl-method-price { font-size:0.82rem; }
    .lbl-method-risk { font-size:0.6rem; }

    /* ── Method detail — stack vertically on mobile ── */
    .lbl-method-detail { flex-direction:column; padding:10px 14px 12px; gap:10px; }
    .lbl-detail-thumb-wrap { width:100%; height:120px; }
    .lbl-detail-thumb { object-fit:contain; background:rgba(0,0,0,0.2); }
    .lbl-detail-name { font-size:0.8rem; }
    .lbl-detail-view-btn { width:100%; justify-content:center; padding:8px 12px; font-size:0.72rem; }

    /* ── Expand trigger (Zone 3) ── */
    .lbl-expand-trigger { padding:10px 14px; font-size:0.78rem; min-height:44px; }

    /* ── Card meta (Zone 4) ── */
    .lbl-card-weight { padding:8px 14px; }
    .lbl-card-weight-label { font-size:0.68rem; }
    .lbl-card-weight-value { font-size:0.76rem; }
    .lbl-card-notes-teaser { padding:7px 14px; font-size:0.7rem; min-height:44px; }

    /* ── Card CTA (Zone 5) ── */
    .lbl-card-cta { padding:10px 12px; }
    .lbl-order-btn { padding:14px; font-size:0.82rem; min-height:48px; }

    /* ── Ecosystem ── */
    .lbl-ecosystem { padding:20px 16px; margin-bottom:32px; }
    .lbl-ecosystem-title { font-size:1rem; }
    .lbl-ecosystem-subtitle { font-size:0.78rem; }
    .lbl-eco-card { padding:20px 16px; }
    .lbl-eco-name { font-size:0.88rem; }
    .lbl-eco-desc { font-size:0.75rem; }
    .lbl-eco-action { font-size:0.78rem; }
    .lbl-eco-action--links { gap:8px; }
    .lbl-eco-action--links a { font-size:0.7rem; padding:6px 10px; min-height:36px; display:inline-flex; align-items:center; }

    /* ── Lightbox ── */
    .lbl-lightbox-close { top:12px; right:12px; width:36px; height:36px; font-size:1.2rem; }
    .lbl-lightbox-img { max-width:95vw; max-height:70vh; border-radius:8px; }
    .lbl-lightbox-caption { font-size:0.78rem; padding:0 16px; }
    .lbl-lightbox-caption-note { font-size:0.68rem; }

    /* ── Empty state ── */
    .lbl-empty { padding:40px 16px; }
    .lbl-empty-icon { font-size:2.5rem; }
    .lbl-empty-title { font-size:1rem; }
    .lbl-empty-text { font-size:0.82rem; }

    /* ── FAQ mobile ── */
    .lbl-faq-section { margin-top:16px; padding:16px 0; background:none; border:none; border-radius:0; }
    .lbl-faq-title { font-size:18px; }
    .lbl-faq-subtitle { font-size:13px; }
    .lbl-faq-item { border-radius:10px; }
    .lbl-faq-question { padding:14px 16px; }
    .lbl-faq-question span { font-size:13px; }
    .lbl-faq-answer-inner { padding:12px 16px; font-size:13px; line-height:1.6; }
}

/* ═══════════════════════════════════════════════
   P15B — Labels lightbox close: clean SVG button
   Font-independent, no pseudo-element cross, no duplicate strokes.
   ═══════════════════════════════════════════════ */
.lbl-lightbox .lbl-lightbox-close#lblLightboxClose {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;

    background-color: rgba(26, 26, 26, 0.96) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%206L18%2018M18%206L6%2018'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000000 !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

.lbl-lightbox .lbl-lightbox-close#lblLightboxClose::before,
.lbl-lightbox .lbl-lightbox-close#lblLightboxClose::after {
    content: none !important;
    display: none !important;
}

.lbl-lightbox .lbl-lightbox-close#lblLightboxClose:hover {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background-color: rgba(34, 34, 34, 0.98) !important;
    transform: none !important;
}

@media (max-width: 768px) {
    .lbl-lightbox .lbl-lightbox-close#lblLightboxClose {
        top: 12px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        background-size: 21px 21px !important;
    }
}

/* ═══════════════════════════════════════════════
   P17B — Labels production lightbox UX layer
   Mobile + desktop zoom/pan, clean SVG close icon.
   Sentinel: P17B_LABELS_PRODUCTION_LIGHTBOX_UX
   ═══════════════════════════════════════════════ */

.lbl-lightbox#lblLightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 999999 !important;
    isolation: isolate !important;

    background: rgba(0,0,0,0.92) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow: hidden !important;
    cursor: default !important;
}

.lbl-lightbox#lblLightbox.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.lbl-lightbox-stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 58px 20px 72px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    touch-action: none !important;
    user-select: none !important;
    cursor: zoom-in;
}

.lbl-lightbox-stage.is-dragging {
    cursor: grabbing !important;
}

.lbl-lightbox#lblLightbox .lbl-lightbox-img#lblLightboxImg {
    max-width: 92vw !important;
    max-height: 84vh !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
    border-radius: var(--bp-radius-sm) !important;

    transform-origin: center center !important;
    transform: translate3d(0,0,0) scale(1);
    will-change: transform !important;

    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    touch-action: none !important;

    cursor: inherit !important;
}

.lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose {
    position: fixed !important;
    top: 16px !important;
    right: 20px !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: block !important;
    box-sizing: border-box !important;

    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.30) !important;

    background-color: rgba(26,26,26,.94) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207L17%2017M17%207L7%2017%27%20stroke%3D%27white%27%20stroke-width%3D%272.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 22px 22px !important;

    box-shadow: 0 8px 24px rgba(0,0,0,.42) !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;

    cursor: pointer !important;
    z-index: 1000000 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    overflow: hidden !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

.lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose::before,
.lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose::after,
.lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose * {
    content: none !important;
    display: none !important;
}

.lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose:hover {
    border-color: rgba(255,255,255,.46) !important;
    background-color: rgba(34,34,34,.98) !important;
}

.lbl-lightbox#lblLightbox .lbl-lightbox-caption#lblLightboxCaption {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    text-align: center !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .85rem !important;

    pointer-events: none !important;
    z-index: 1000000 !important;
}

@media (max-width: 768px) {
    .lbl-lightbox-stage {
        padding: calc(58px + env(safe-area-inset-top)) 8px calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .lbl-lightbox#lblLightbox .lbl-lightbox-img#lblLightboxImg {
        max-width: 96vw !important;
        max-height: 78vh !important;
        border-radius: 10px !important;
    }

    .lbl-lightbox#lblLightbox .lbl-lightbox-close#lblLightboxClose {
        top: calc(12px + env(safe-area-inset-top)) !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        background-size: 22px 22px !important;
    }

    .lbl-lightbox#lblLightbox .lbl-lightbox-caption#lblLightboxCaption {
        font-size: .78rem !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }
}

/* /P17B_LABELS_PRODUCTION_LIGHTBOX_UX */

/* ═══════════════════════════════════════════════
   P17C — Labels lightbox hard scroll lock
   Stops background scroll leak on iOS Safari / Telegram WebView.
   Sentinel: P17C_LABELS_LIGHTBOX_HARD_SCROLL_LOCK
   ═══════════════════════════════════════════════ */

html.lbl-lightbox-scroll-locked,
body.lbl-lightbox-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

body.lbl-lightbox-scroll-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Keep the lightbox itself interactive while body is locked */
html.lbl-lightbox-scroll-locked .lbl-lightbox#lblLightbox,
html.lbl-lightbox-scroll-locked .lbl-lightbox#lblLightbox * {
    touch-action: none !important;
}

/* /P17C_LABELS_LIGHTBOX_HARD_SCROLL_LOCK */


/* ============================================================
   P19A — Labels copy-link toast visibility fix
   Reason: existing copy toast was too transparent on dark card grid.
   Sentinel: P19A_LABELS_COPY_TOAST_VISIBILITY_FIX
   ============================================================ */
.lbl-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: max(28px, env(safe-area-inset-bottom, 0px) + 18px) !important;
    transform: translateX(-50%) translateY(18px) !important;
    z-index: 2147483000 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 168px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 13px 22px !important;

    background: rgba(18, 18, 18, 0.98) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    white-space: nowrap !important;

    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease !important;
}

.lbl-toast.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 640px) {
    .lbl-toast {
        bottom: max(22px, env(safe-area-inset-bottom, 0px) + 14px) !important;
        min-width: 156px !important;
        padding: 12px 18px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }
}
/* /P19A_LABELS_COPY_TOAST_VISIBILITY_FIX */