/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ══════════════════════════════════════════════════════════════
   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; }
}