/* ═══════════════════════════════════════════════════════════════
   BUMAGA SERVICE — Shipping Labels Page Styles v1.0
   ═══════════════════════════════════════════════════════════════

   Namespace : lbl-*
   Depends on: tokens.css (--bp-* variables)
   Location  : pages/assets/css/labels.css

   Load order (handled by header.php via $pageStyles):
     1. tokens.css   ← --bp-* SSOT
     2. header.css
     3. labels.css   ← this file
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
   0. RESET / BASE
   ═══════════════════════════════════════════════ */

.lbl-page *,
.lbl-page *::before,
.lbl-page *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--bp-sans);
    background: var(--bp-surface);
    color: var(--bp-text);
}


/* ═══════════════════════════════════════════════
   1. PAGE WRAPPER
   ═══════════════════════════════════════════════ */

.lbl-page {
    max-width: clamp(1280px, 86vw, 1420px);
    margin: 0 auto;
    padding: 40px 20px 60px;
}


/* ═══════════════════════════════════════════════
   2. HERO
   ═══════════════════════════════════════════════ */

.lbl-hero {
    text-align: center;
    margin-bottom: 40px;
}

.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: 14px;
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.3);
    flex-shrink: 0;
}

.lbl-hero__icon svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.lbl-hero__subtitle {
    color: var(--bp-text-secondary);
    font-size: 18px;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════
   2. HERO — RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lbl-page {
        padding: 20px 12px 0;
    }

    .lbl-hero__title {
        font-size: 28px;
        gap: 10px;
    }

    .lbl-hero__icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .lbl-hero__icon svg {
        width: 24px;
        height: 24px;
    }

    .lbl-hero__subtitle {
        font-size: 15px;
    }
}


/* ═══════════════════════════════════════════════
   3. MAIN GRID  (3-column — proxy.php паттерн)
   ═══════════════════════════════════════════════ */

.lbl-main {
    max-width: clamp(1280px, 86vw, 1420px);
    margin: 0 auto;
    padding: 0 20px 40px;
    display: grid;
    grid-template-columns: 22% 52% 26%;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1200px) {
    .lbl-main {
        grid-template-columns: 260px 1fr;
    }

    .lbl-purchase-col {
        display: none;
    }
}

@media (max-width: 900px) {
    .lbl-main {
        grid-template-columns: 1fr;
    }

    /* Sidebar — не sticky на мобиле, иначе перекрывает контент */
    .lbl-sidebar {
        position: static !important;
    }

    /* Country divider — убираем sticky на мобиле,
       иначе вылезает за карточку и налезает на элементы выше */
    .lbl-country-divider {
        position: static;
    }

    /* Country list — ограничиваем высоту на мобиле */
    .lbl-country-list {
        max-height: 260px !important;
    }

    /* Filters sidebar — компактнее на мобиле */
    .lbl-filters-sidebar {
        padding: 12px;
    }
}


/* ═══════════════════════════════════════════════
   4. LEFT SIDEBAR — Country + Carrier tabs
   ═══════════════════════════════════════════════ */

.lbl-sidebar {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.lbl-sidebar__panel {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

/* Carrier tabs */
.lbl-carrier-tabs {
    display: flex;
    gap: 5px;
    padding: 7px;
    background: var(--bp-bg);
    border-radius: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.lbl-carrier-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--bp-transition-fast);
    border: 1px solid transparent;
    background: transparent;
}

.lbl-carrier-tab__icon {
    font-size: 15px;
    margin-bottom: 3px;
    line-height: 1;
}

.lbl-carrier-tab__name {
    font-size: 9px;
    font-weight: 700;
    color: var(--bp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.lbl-carrier-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lbl-carrier-tab.active {
    background: var(--bp-accent-dim);
    box-shadow: inset 0 0 0 1px var(--bp-accent-border-strong);
}

.lbl-carrier-tab.active .lbl-carrier-tab__name {
    color: var(--bp-accent);
}

/* Region toggle */
.lbl-region-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.lbl-region-btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--bp-border);
    background: transparent;
    color: var(--bp-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bp-transition-fast);
    font-family: var(--bp-sans);
    text-align: center;
}

.lbl-region-btn:hover {
    border-color: var(--bp-accent-border-strong);
    color: var(--bp-text);
}

.lbl-region-btn.active {
    background: var(--bp-accent-dim);
    border-color: var(--bp-accent-border-strong);
    color: var(--bp-accent);
}

/* ═══════════════════════════════════════════════
   4b. WEIGHT INPUT (inside form card)
   ═══════════════════════════════════════════════ */

.lbl-weight-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    background: var(--bp-bg);
    border-radius: var(--bp-radius-xs);
    border: 1px solid var(--bp-border);
    transition: border-color var(--bp-transition-fast);
}

.lbl-weight-input-wrap:focus-within {
    border-color: var(--bp-accent-border-strong);
}

.lbl-weight-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--bp-text);
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    outline: none;
    width: 0;
    min-width: 0;
}

.lbl-weight-unit {
    font-size: 14px;
    color: var(--bp-text-secondary);
    font-weight: 600;
}

.lbl-weight-range {
    font-size: 11px;
    color: var(--bp-text-muted);
    margin-top: 4px;
}

/* Grey label warning */
.lbl-grey-warning {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}
.lbl-grey-warning--info {
    background: rgba(74, 158, 255, 0.07);
    border: 1px solid rgba(74, 158, 255, 0.25);
    color: var(--bp-text-muted);
}
.lbl-grey-warning--info strong { color: var(--bp-accent); }
.lbl-grey-warning--error {
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #ff8a8a;
}
.lbl-grey-warning--error strong { color: #ffb3b3; }

/* Weight presets */
.lbl-weight-presets {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.lbl-weight-presets::-webkit-scrollbar { display: none; }

.lbl-weight-preset {
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--bp-border);
    background: var(--bp-bg-card);
    color: var(--bp-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--bp-mono);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.lbl-weight-preset:hover {
    border-color: var(--bp-accent);
    color: var(--bp-accent);
    background: rgba(74, 158, 255, 0.06);
}

.lbl-weight-preset.active {
    border-color: var(--bp-accent);
    background: rgba(74, 158, 255, 0.12);
    color: var(--bp-accent);
}

/* ═══════════════════════════════════════════════
   5. CENTER — Address Form
   ═══════════════════════════════════════════════ */

.lbl-form-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Form card */
.lbl-form-card {
    background: var(--bp-card);
    border-radius: 16px;
    border: 1px solid var(--bp-border);
    overflow: hidden;
}

.lbl-form-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bp-border-light);
}

.lbl-form-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bp-accent-dim);
    border-radius: 8px;
    flex-shrink: 0;
}

.lbl-form-card__icon svg {
    width: 16px;
    height: 16px;
    color: var(--bp-accent);
}

.lbl-form-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lbl-form-card__body {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lbl-form-card__body--full {
    grid-template-columns: 1fr;
}

/* Form field */
.lbl-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lbl-field--full {
    grid-column: 1 / -1;
}

.lbl-field__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-text-secondary);
    text-transform: none;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Скрыть bubble-спаны — тултип теперь через JS в body */
.lbl-tooltip__bubble {
    display: none !important;
}

.lbl-field__input {
    padding: 10px 12px;
    background: var(--bp-bg);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    color: var(--bp-text);
    font-size: 14px;
    font-family: var(--bp-sans);
    outline: none;
    transition: border-color var(--bp-transition-fast);
    width: 100%;
}

.lbl-field__input::placeholder {
    color: var(--bp-text-muted);
}

.lbl-field__input:focus {
    border-color: var(--bp-accent-border-strong);
}

.lbl-field__input.error {
    border-color: var(--bp-red);
}

/* Required asterisk — тихий, не кричит */
.lbl-field__label--req::after {
    content: ' *';
    color: var(--bp-text-muted, #555);
    font-size: 11px;
    font-weight: 400;
}

/* Secondary label — для опциональных полей */
.lbl-field__label--secondary {
    color: var(--bp-text-muted, #555) !important;
    font-weight: 500;
}

/* Secondary input — чуть тише визуально */
.lbl-field__input--secondary {
    opacity: 0.75;
    border-color: var(--bp-border-subtle, rgba(255,255,255,0.06));
}
.lbl-field__input--secondary:focus {
    opacity: 1;
    border-color: var(--bp-accent, #4a9eff);
}

/* Phone + Email в одну строку */
.lbl-field-row--contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    grid-column: 1 / -1;
}

/* ── Tooltip ─────────────────────────────────────────────────────── */
.lbl-tooltip {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: default;
    flex-shrink: 0;
}
.lbl-tooltip__icon {
    width: 13px;
    height: 13px;
    color: var(--bp-text-muted, #555);
    flex-shrink: 0;
    transition: color 0.15s;
}
.lbl-tooltip:hover .lbl-tooltip__icon {
    color: var(--bp-accent, #4a9eff);
}

/* Глобальный тултип (рендерится в body, не обрезается) */
#lblTooltipGlobal {
    display: none;
    position: fixed;
    background: var(--bp-surface-2, #1e2230);
    border: 1px solid var(--bp-border, #2a2f3a);
    color: var(--bp-text, #e0e0e0);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 7px 11px;
    border-radius: 7px;
    max-width: 220px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: lbl-tip-in 0.15s ease;
}
#lblTooltipGlobal::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bp-border, #2a2f3a);
}
@keyframes lbl-tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Address 2 — subtle, dimmed */
.lbl-field--addr2 .lbl-field__label {
    color: var(--bp-text-muted);
}
.lbl-field--addr2 .lbl-field__input {
    border-style: dashed;
    opacity: 0.8;
}
.lbl-field--addr2 .lbl-field__input:focus {
    border-style: solid;
    opacity: 1;
}

/* Optional badge in label */
.lbl-field__optional {
    font-size: 10px;
    color: var(--bp-text-muted);
    font-weight: 400;
    text-transform: none;
    margin-left: 4px;
    letter-spacing: 0;
}

/* US-only state field — animate in */
.lbl-field--us-only {
    animation: lbl-field-in 0.2s ease;
}
@keyframes lbl-field-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Uppercase input (state codes) */
.lbl-field__input--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lbl-field__error {
    font-size: 11px;
    color: var(--bp-red);
    display: none;
}

.lbl-field.has-error .lbl-field__error {
    display: block;
}


/* ═══════════════════════════════════════════════
   6. RIGHT — Purchase Panel
   ═══════════════════════════════════════════════ */

.lbl-purchase-col {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.lbl-purchase-card {
    background: transparent;
    border: 1px solid var(--bp-border);
    border-radius: 12px;
    padding: 16px;
}

/* Balance row */
.lbl-purchase__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
}

.lbl-purchase__balance-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--bp-accent);
    font-family: var(--bp-mono);
}

.lbl-purchase__balance-add {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-accent-dim);
    border: 1px solid var(--bp-accent-border-strong);
    border-radius: 8px;
    color: var(--bp-accent);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--bp-transition-fast);
}

.lbl-purchase__balance-add:hover {
    background: rgba(74, 158, 255, 0.2);
    transform: scale(1.05);
}

/* Summary row */
.lbl-purchase__summary {
    padding-bottom: 8px;
    margin-bottom: 0;
}

.lbl-purchase__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.lbl-purchase__carrier-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Строка 1: флаг + страна (как SMS) */
.lbl-purchase__flag {
    font-size: 20px;
    flex-shrink: 0;
}
.lbl-purchase__country {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
}

.lbl-purchase__carrier-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
}

.lbl-purchase__params {
    font-size: 12px;
    color: var(--bp-text-secondary);
}

.lbl-purchase__region-badge {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    background: var(--bp-accent-dim);
    color: var(--bp-accent);
    text-transform: uppercase;
}

/* Price block */
.lbl-purchase__price-block {
    text-align: center;
    padding: 8px 0;
}

.lbl-purchase__price {
    font-size: 24px;
    font-weight: 700;
    color: var(--bp-accent);
    font-family: var(--bp-mono);
    line-height: 1;
}

.lbl-purchase__price-empty {
    font-size: 24px;
    font-weight: 700;
    color: var(--bp-text-muted);
    font-family: var(--bp-mono);
}

.lbl-purchase__price-hint {
    font-size: 11px;
    color: var(--bp-text-muted);
    margin-top: 4px;
}

/* CTA button */
.lbl-purchase__cta-wrap {
    padding-top: 12px;
}

.lbl-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: var(--bp-accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bp-transition-fast);
    text-decoration: none;
    font-family: var(--bp-sans);
    gap: 8px;
}

.lbl-cta-btn:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.35);
}

.lbl-cta-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bp-border);
    color: var(--bp-text-secondary);
    box-shadow: none;
    transform: none;
}

.lbl-cta-btn .lbl-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lblSpin 0.8s linear infinite;
}

.lbl-cta-btn.loading .lbl-spinner {
    display: block;
}

.lbl-cta-btn.loading .lbl-cta-btn__text {
    opacity: 0.7;
}

@keyframes lblSpin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════
   7. STATUS BADGES
   ═══════════════════════════════════════════════ */

.lbl-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lbl-status--pending    { background: var(--bp-orange-dim); color: var(--bp-orange); }
.lbl-status--processing { background: var(--bp-accent-dim); color: var(--bp-accent); }
.lbl-status--completed  { background: var(--bp-green-dim);  color: var(--bp-green);  }
.lbl-status--cancelled  { background: var(--bp-red-dim);    color: var(--bp-red);    }


/* ═══════════════════════════════════════════════
   8. TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */

.lbl-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    white-space: nowrap;
}

.lbl-toast__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bp-card-raised);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--bp-shadow);
    animation: lblToastIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: auto;
}

.lbl-toast__item.success { border-color: rgba(52, 211, 153, 0.3); }
.lbl-toast__item.error   { border-color: rgba(248, 113, 113, 0.3); }

@keyframes lblToastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}


/* ═══════════════════════════════════════════════
   9. EMPTY STATE
   ═══════════════════════════════════════════════ */

.lbl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.lbl-empty__icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.lbl-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bp-text);
    margin-bottom: 6px;
}

.lbl-empty__text {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════
   10. SKELETON LOADING
   ═══════════════════════════════════════════════ */

.lbl-skel {
    height: 16px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--bp-border) 25%,
        var(--bp-border-hover) 50%,
        var(--bp-border) 75%
    );
    background-size: 200% 100%;
    animation: lblSkelShimmer 1.5s infinite;
}

@keyframes lblSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════
   11. COUNTRY LIST (left sidebar)
   ═══════════════════════════════════════════════ */

.lbl-country-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bp-bg);
    border-radius: 10px;
    border: 1px solid var(--bp-border);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.lbl-country-search__icon {
    width: 16px;
    height: 16px;
    color: var(--bp-text-muted);
    flex-shrink: 0;
}

.lbl-country-search__input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--bp-text);
    font-size: 13px;
    outline: none;
    font-family: var(--bp-sans);
}

.lbl-country-search__input::placeholder { color: var(--bp-text-muted); }

.lbl-country-list {
    flex: 1;
    overflow-y: auto;
    min-height: 180px;
    max-height: 280px;
    margin: 0 -4px;
    padding: 0 4px;
}

.lbl-country-list::-webkit-scrollbar { width: 4px; }
.lbl-country-list::-webkit-scrollbar-track { background: transparent; }
.lbl-country-list::-webkit-scrollbar-thumb { background: var(--bp-border-hover); border-radius: 2px; }

.lbl-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--bp-transition-fast);
    border: 1px solid transparent;
    margin-bottom: 2px;
}

.lbl-country-item:hover {
    background: var(--bp-accent-dim);
    border-color: var(--bp-accent-border);
}

.lbl-country-item.active {
    background: var(--bp-accent-dim);
    border-color: var(--bp-accent-border-strong);
}

.lbl-country-item__flag { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

.lbl-country-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lbl-country-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lbl-country-item__sub {
    font-size: 10px;
    color: var(--bp-text-muted);
    font-weight: 500;
}

.lbl-country-item.active .lbl-country-item__name { color: var(--bp-accent); }
.lbl-country-item.active .lbl-country-item__sub  { color: var(--bp-accent-border-strong); }

.lbl-country-empty {
    padding: 20px;
    text-align: center;
    color: var(--bp-text-muted);
    font-size: 13px;
}

.lbl-country-skel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════
   12. CARRIER WRAP (inside sidebar)
   ═══════════════════════════════════════════════ */

.lbl-sidebar__divider {
    height: 1px;
    background: var(--bp-border-light);
    margin: 12px 0;
    flex-shrink: 0;
}

.lbl-carrier-wrap { flex-shrink: 0; }

.lbl-carrier-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.lbl-carrier-empty {
    padding: 10px;
    text-align: center;
    color: var(--bp-text-muted);
    font-size: 12px;
    background: var(--bp-bg);
    border-radius: 8px;
    border: 1px dashed var(--bp-border);
}

.lbl-carrier-loading { padding: 4px 0; }

/* Grey label badge on carrier tab */
.lbl-carrier-tab__grey {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bp-orange-dim);
    color: var(--bp-orange);
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* Grey notice block */
.lbl-grey-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bp-orange-dim);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: var(--bp-radius-xs);
    margin-top: 8px;
}

.lbl-grey-notice span:first-child { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.lbl-grey-notice span:last-child  { font-size: 11px; color: var(--bp-orange); line-height: 1.4; }

/* Weight error state */
.lbl-weight-input-wrap.error { border-color: var(--bp-red); }


/* ═══════════════════════════════════════════════
   13. ADDRESS ROW — sender + recipient 2-col
   ═══════════════════════════════════════════════ */

.lbl-addr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .lbl-addr-row {
        grid-template-columns: 1fr;
    }
}

/* Density pass — compact form cards */
.lbl-form-card__head {
    padding: 11px 14px;
}

.lbl-form-card__body {
    padding: 12px 14px;
    gap: 10px;
}

/* Shipment details body — 3-col: weight / value / description */
.lbl-form-card__body--shipment {
    display: block;
}

@media (max-width: 1100px) {
    .lbl-form-card__body--shipment {
        grid-template-columns: 1fr 1fr;
    }
    .lbl-form-card__body--shipment .lbl-field--full {
        grid-column: 1 / -1;
    }
}

/* Field gap reduction inside addr cards */
.lbl-addr-row .lbl-field__input {
    padding: 8px 11px;
    font-size: 13px;
}

.lbl-addr-row .lbl-field__label {
    font-size: 10px;
    margin-bottom: 4px;
}

/* Prefix input (declared value) */
.lbl-field__input-prefix {
    display: flex;
    align-items: center;
    background: var(--bp-bg);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    transition: border-color var(--bp-transition-fast);
    overflow: hidden;
}

.lbl-field__input-prefix:focus-within {
    border-color: var(--bp-accent-border-strong);
}

.lbl-field__prefix {
    padding: 0 10px;
    color: var(--bp-text-muted);
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid var(--bp-border-light);
    line-height: 38px;
    flex-shrink: 0;
}

.lbl-field__input--prefixed {
    border: none !important;
    background: transparent;
    border-radius: 0;
    padding: 8px 11px;
}

.lbl-field__input--prefixed:focus {
    border: none;
    outline: none;
}

/* Textarea */
.lbl-field__textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--bp-bg);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xs);
    color: var(--bp-text);
    font-size: 13px;
    font-family: var(--bp-sans);
    outline: none;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
    transition: border-color var(--bp-transition-fast);
}

.lbl-field__textarea::placeholder {
    color: var(--bp-text-muted);
}

.lbl-field__textarea:focus {
    border-color: var(--bp-accent-border-strong);
}

/* Hint text under field */
.lbl-field__hint {
    font-size: 10px;
    color: var(--bp-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════
   14. SIDEBAR — proxy.php pattern 1:1
   ═══════════════════════════════════════════════ */

/* Sidebar variables — exact from proxy.php */
.lbl-filters-sidebar {
    --lbl-item-h: 62px;
    --lbl-sidebar-head: 140px;
    display: flex;
    flex-direction: column;
    height: calc(var(--lbl-sidebar-head) + var(--lbl-item-h) * 8);
    background: transparent;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--bp-border);
}

/* Country search — proxy.php exact */
.lbl-country-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bp-bg);
    border-radius: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.lbl-cs-icon {
    color: var(--bp-text-muted);
    flex-shrink: 0;
    display: flex;
}

.lbl-cs-icon svg { width: 16px; height: 16px; }

.lbl-country-search input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--bp-text);
    font-size: 14px;
    outline: none;
    font-family: var(--bp-sans);
}

.lbl-country-search input::placeholder { color: var(--bp-text-muted); }

/* Country list — proxy.php exact */
.lbl-country-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
    min-height: 0;
}

.lbl-country-list::-webkit-scrollbar { width: 6px; }
.lbl-country-list::-webkit-scrollbar-track { background: transparent; }
.lbl-country-list::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* Country item — proxy.php exact */
.lbl-country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 2px;
}

.lbl-country-item:hover {
    background: rgba(74, 158, 255, 0.08);
    border-color: rgba(74, 158, 255, 0.2);
}

.lbl-country-item.active {
    background: rgba(74, 158, 255, 0.12);
    border-color: rgba(74, 158, 255, 0.3);
}

.lbl-country-item__flag {
    font-size: 24px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.lbl-country-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lbl-country-item__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lbl-country-item.active .lbl-country-item__name {
    color: var(--bp-accent);
}

/* "от $X.XX" subtext — green like proxy.php */
.lbl-country-item__price {
    font-size: 11px;
    color: var(--bp-green);
    font-weight: 600;
    font-family: var(--bp-mono);
}

.lbl-country-item.active .lbl-country-item__price {
    color: rgba(74, 158, 255, 0.7);
}

/* Country section divider */
.lbl-country-divider {
    padding: 6px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
    background: var(--bp-bg-card);
    border-bottom: 1px solid var(--bp-border);
    position: sticky;
    top: 0;
    z-index: 1;
    user-select: none;
}

.lbl-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    color: var(--bp-text-muted);
    font-size: 13px;
    text-align: center;
}

/* Divider */
.lbl-sidebar-divider {
    height: 1px;
    background: var(--bp-border);
    margin: 12px 0;
    flex-shrink: 0;
}

/* Carrier tabs — proxy.php tier-tabs pattern exact */
.lbl-tier-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bp-bg);
    border-radius: 12px;
    flex-shrink: 0;
}

.lbl-tier-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
}

.lbl-tier-tab__icon { font-size: 16px; margin-bottom: 4px; line-height: 1; }

.lbl-tier-tab__name {
    font-size: 9px;
    font-weight: 700;
    color: var(--bp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.lbl-tier-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lbl-tier-tab.active {
    background: var(--bp-accent-dim);
    box-shadow: inset 0 0 0 1px var(--bp-accent-border-strong);
}

.lbl-tier-tab.active .lbl-tier-tab__name {
    color: var(--bp-accent);
}

/* Grey tab special */
.lbl-tier-tab.grey-tab.active {
    background: var(--bp-orange-dim);
    box-shadow: inset 0 0 0 1px rgba(251,191,36,0.3);
}

.lbl-tier-tab.grey-tab.active .lbl-tier-tab__name {
    color: var(--bp-orange);
}

.lbl-carrier-placeholder {
    width: 100%;
    padding: 10px;
    text-align: center;
    color: var(--bp-text-muted);
    font-size: 12px;
    background: var(--bp-bg);
    border-radius: 8px;
    border: 1px dashed var(--bp-border);
}



/* ═══════════════════════════════════════════════
   15. DENSITY PASS — make it look like proxy.php
   ═══════════════════════════════════════════════ */

/* ── Left sidebar: shorter, tighter ── */
.lbl-filters-sidebar {
    --lbl-item-h: 54px;
    --lbl-sidebar-head: 110px;
    height: calc(var(--lbl-sidebar-head) + var(--lbl-item-h) * 7);
    padding: 12px;
}

.lbl-country-search {
    padding: 9px 12px;
    margin-bottom: 8px;
    border-radius: 9px;
}

.lbl-country-item {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 1px;
}

.lbl-country-item__flag { font-size: 20px; width: 26px; }
.lbl-country-item__name { font-size: 13px; }
.lbl-country-item__price { font-size: 11px; }

.lbl-sidebar-divider { margin: 8px 0; }

/* Carrier tabs: tighter */
.lbl-tier-tabs {
    padding: 6px;
    border-radius: 10px;
    gap: 4px;
}

.lbl-tier-tab {
    padding: 7px 4px;
    border-radius: 7px;
}

.lbl-tier-tab__icon { font-size: 14px; margin-bottom: 3px; }
.lbl-tier-tab__name { font-size: 8px; }

/* ── Center: tighter cards ── */
.lbl-form-col { gap: 10px; }

.lbl-form-card {
    border-radius: 12px;
}

.lbl-form-card__head {
    padding: 10px 14px;
}

.lbl-form-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.lbl-form-card__icon svg { width: 14px; height: 14px; }

.lbl-form-card__title { font-size: 11px; }

.lbl-form-card__body {
    padding: 12px 14px;
    gap: 9px;
}

.lbl-field { gap: 4px; }

.lbl-field__label {
    font-size: 10px;
    letter-spacing: 0.3px;
}

.lbl-field__input {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 7px;
}

/* Shipment details: extra compact */
.lbl-form-card__body--shipment {
    padding: 10px 14px;
    gap: 8px;
}

.lbl-weight-input { font-size: 14px; }

/* ── Right panel: stronger hierarchy ── */
.lbl-purchase-card {
    border-radius: 12px;
    padding: 14px;
}

.lbl-purchase__balance {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
}

.lbl-purchase__balance-val { font-size: 20px; }

.lbl-purchase__summary {
    padding-bottom: 8px;
    margin-bottom: 0;
}

.lbl-purchase__row { margin-bottom: 3px; gap: 6px; }

.lbl-purchase__carrier-icon { font-size: 16px; }

.lbl-purchase__carrier-name { font-size: 15px; font-weight: 700; }

.lbl-purchase__params { font-size: 11px; }

/* Price block */
.lbl-purchase__price-block {
    padding: 8px 0;
}

.lbl-purchase__price {
    font-size: 24px;
    letter-spacing: 0;
}

.lbl-purchase__price-empty {
    font-size: 24px;
    color: var(--bp-border-hover);
}

.lbl-purchase__price-hint { font-size: 10px; margin-top: 3px; }

.lbl-purchase__cta-wrap { padding-top: 10px; }

.lbl-cta-btn {
    padding: 12px;
    font-size: 13px;
    border-radius: 8px;
    font-weight: 600;
}

/* addr-row gap tighter */
.lbl-addr-row { gap: 10px; }



/* ═══════════════════════════════════════════════
   16. INLINE CARRIER CHIPS + CONTEXT BAR
   ═══════════════════════════════════════════════ */

/* Inline carrier chips — appear under selected country */
.lbl-inline-carriers {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px 10px 46px; /* align with country name */
    animation: lbl-fade-in 0.15s ease;
}

@keyframes lbl-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lbl-inline-carriers__loading { padding: 6px 10px 8px 46px; width: 100%; }

.lbl-inline-carriers__empty {
    padding: 4px 0;
    font-size: 11px;
    color: var(--bp-text-muted);
}

.lbl-inline-carriers__grey-hint {
    width: 100%;
    font-size: 10px;
    color: var(--bp-orange);
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid var(--bp-border-light);
}

/* Carrier chip */
.lbl-carrier-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--bp-border);
    background: var(--bp-bg);
    color: var(--bp-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--bp-transition-fast);
    font-family: var(--bp-sans);
}

.lbl-carrier-chip:hover {
    border-color: var(--bp-accent-border-strong);
    color: var(--bp-text);
    background: var(--bp-accent-dim);
}

.lbl-carrier-chip.active {
    border-color: var(--bp-accent-border-strong);
    background: var(--bp-accent-dim);
    color: var(--bp-accent);
}

.lbl-carrier-chip__icon { font-size: 13px; }
.lbl-carrier-chip__name { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }

.lbl-carrier-chip__grey {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bp-orange-dim);
    color: var(--bp-orange);
    letter-spacing: 0.3px;
}

.lbl-carrier-chip.grey-chip.active {
    border-color: rgba(251,191,36,0.3);
    background: var(--bp-orange-dim);
    color: var(--bp-orange);
}

/* Context bar — like proxy.php tier description bar */
.lbl-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: 10px;
    gap: 12px;
    animation: lbl-fade-in 0.2s ease;
}

.lbl-context-bar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lbl-context-bar__flag { font-size: 18px; }

.lbl-context-bar__carrier {
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-accent);
}

.lbl-context-bar__sep {
    color: var(--bp-text-muted);
    font-size: 12px;
}

.lbl-context-bar__country {
    font-size: 13px;
    color: var(--bp-text);
    font-weight: 500;
}

.lbl-context-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.lbl-context-bar__region {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bp-accent-dim);
    color: var(--bp-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lbl-context-bar__price {
    font-size: 12px;
    color: var(--bp-green);
    font-weight: 600;
    font-family: var(--bp-mono);
}

/* ═══════════════════════════════════════════════
   17. UNIFIED FORM BLOCK
   ═══════════════════════════════════════════════ */

.lbl-form-block {
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: 14px;
    overflow: hidden;
}

.lbl-form-block__section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--bp-border-light);
}

.lbl-form-block__section-icon { font-size: 13px; }

.lbl-form-block__section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--bp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.lbl-form-block__divider {
    height: 1px;
    background: var(--bp-border-light);
    margin: 0;
}

/* addr-row inside form block */
.lbl-form-block .lbl-addr-row {
    padding: 0;
    gap: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lbl-form-block .lbl-form-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 14px;
}

.lbl-form-block .lbl-form-card:first-child {
    border-right: 1px solid var(--bp-border-light);
}

.lbl-form-block .lbl-form-card__head {
    background: transparent;
    border-bottom: 1px solid var(--bp-border-light);
    padding: 0 0 8px 0;
    margin-bottom: 10px;
}

.lbl-form-block .lbl-form-card__body {
    padding: 0;
}

/* Shipment body inside form block */
.lbl-form-block .lbl-form-card__body--shipment {
    padding: 14px;
}

@media (max-width: 900px) {
    .lbl-form-block .lbl-addr-row {
        grid-template-columns: 1fr;
    }
    .lbl-form-block .lbl-form-card:first-child {
        border-right: none;
        border-bottom: 1px solid var(--bp-border-light);
    }
}



/* ═══════════════════════════════════════════════
   18. POLISH PASS — carrier chips + density + right panel
   ═══════════════════════════════════════════════ */

/* ── 1. Carrier chips — stronger, primary selector feel ── */
.lbl-carrier-chip {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid var(--bp-border-hover);
    background: var(--bp-card);
    gap: 6px;
}

.lbl-carrier-chip__icon { font-size: 15px; }
.lbl-carrier-chip__name { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--bp-text); }

.lbl-carrier-chip:hover {
    border-color: var(--bp-accent-border-strong);
    background: var(--bp-accent-dim);
}
.lbl-carrier-chip:hover .lbl-carrier-chip__name { color: var(--bp-accent); }

.lbl-carrier-chip.active {
    border-color: var(--bp-accent-border-strong);
    background: var(--bp-accent-dim);
    box-shadow: inset 0 0 0 1px var(--bp-accent-border-strong);
}
.lbl-carrier-chip.active .lbl-carrier-chip__name { color: var(--bp-accent); }

.lbl-carrier-chip.grey-chip.active {
    border-color: rgba(251,191,36,0.35);
    background: var(--bp-orange-dim);
    box-shadow: inset 0 0 0 1px rgba(251,191,36,0.35);
}
.lbl-carrier-chip.grey-chip.active .lbl-carrier-chip__name { color: var(--bp-orange); }

.lbl-inline-carriers {
    padding: 6px 10px 12px 44px;
    gap: 6px;
}

/* ── 2. Left sidebar — hint at bottom, less empty ── */
.lbl-filters-sidebar::after {
    content: 'Выберите страну и перевозчика';
    display: block;
    font-size: 10px;
    color: var(--bp-text-muted);
    text-align: center;
    padding: 8px 0 2px;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

/* ── 3. Center — tighter rhythm ── */
.lbl-form-col { gap: 8px; }

.lbl-form-block .lbl-form-card { padding: 12px; }
.lbl-form-block .lbl-form-card:first-child { padding-right: 10px; }
.lbl-form-block .lbl-form-card__head { padding: 0 0 7px 0; margin-bottom: 8px; }

.lbl-form-card__body { gap: 8px; }
.lbl-field { gap: 3px; }
.lbl-field__input { padding: 7px 10px; font-size: 13px; }
.lbl-field__label { font-size: 10px; }

/* ── 4. Shipment Details — stronger as final step ── */
.lbl-form-block__section-head:last-of-type {
    background: rgba(251,191,36,0.04);
    border-top: 1px solid rgba(251,191,36,0.12);
}

.lbl-form-block .lbl-form-card__body--shipment {
    padding: 12px;
}

.lbl-weight-input { font-size: 14px; }

/* ── 5. Right panel ── */
.lbl-purchase__price-block {
    padding: 8px 0;
}

.lbl-purchase__carrier-name { font-size: 16px; font-weight: 700; }

.lbl-purchase__cta-wrap { padding-top: 8px; }

.lbl-cta-btn {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Context bar tighter */
.lbl-context-bar {
    padding: 8px 14px;
    border-radius: 9px;
}
.lbl-context-bar__carrier { font-size: 14px; font-weight: 700; }
.lbl-context-bar__country { font-size: 13px; }



/* ═══════════════════════════════════════════════
   19. MICRO POLISH — final 4 fixes
   ═══════════════════════════════════════════════ */

/* 1. Carrier chips — stronger active state */
.lbl-carrier-chip.active {
    border-color: var(--bp-accent);
    background: rgba(74,158,255,0.15);
    box-shadow: inset 0 0 0 1px var(--bp-accent), 0 0 8px rgba(74,158,255,0.12);
}
.lbl-carrier-chip.active .lbl-carrier-chip__name { color: var(--bp-accent); font-weight: 800; }
.lbl-carrier-chip:hover { border-color: var(--bp-accent-border-strong); }

/* 2. Gap between chips and next country item */
.lbl-inline-carriers {
    margin-bottom: 6px;
}
.lbl-country-item { margin-bottom: 1px; }

/* 3. Shipment block — stronger final step feel */
.lbl-form-block__section-head:last-of-type {
    background: rgba(251,191,36,0.05);
    border-top: 1px solid rgba(251,191,36,0.15);
    padding: 11px 16px;
}
.lbl-form-block__section-head:last-of-type .lbl-form-block__section-title {
    color: var(--bp-orange);
    letter-spacing: 0.7px;
}
.lbl-form-block__section-head:last-of-type .lbl-form-block__section-icon {
    font-size: 14px;
}

.lbl-purchase__summary { padding-bottom: 8px; border-bottom: none; }
.lbl-purchase__cta-wrap { padding-top: 6px; }



/* ═══════════════════════════════════════════════
   20. SIDEBAR FIX — country list fills all space
   ═══════════════════════════════════════════════ */

/* Sidebar panel — fill parent height */
.lbl-sidebar { align-self: stretch; }

.lbl-filters-sidebar {
    height: auto;
    min-height: 100%;
}

/* Country list — stretch to fill all remaining space */
.lbl-country-list {
    flex: 1;
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
}

/* Override previous max-height rules */
.lbl-country-list { max-height: unset !important; }

/* Carrier chips — tighter to their country */
.lbl-inline-carriers {
    margin-top: 2px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bp-border-light);
}

/* Last inline carriers — no bottom border */
.lbl-inline-carriers:last-child { border-bottom: none; }



/* ═══════════════════════════════════════════════
   21. SIDEBAR RESTORE — proxy.php exact pattern
       Reverts section 20 mistake
   ═══════════════════════════════════════════════ */

/* Sidebar — sticky, fixed height like proxy.php (desktop only) */
.lbl-sidebar {
    align-self: start;
    position: sticky;
    top: 80px;
}

/* Panel — compact card, NOT auto-height */
.lbl-filters-sidebar {
    height: auto !important;
    min-height: unset !important;
    display: flex;
    flex-direction: column;
}

/* Country list — bounded scroll area, ~7 items visible */
.lbl-country-list {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   HISTORY PANEL (lbl-hp-*)
   Паттерн: numbers.php docked panel
   ═══════════════════════════════════════════════════════════════ */

/* Toggle button */
.lbl-hp-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #666;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}
.lbl-hp-toggle-btn:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
    color: #888;
    opacity: 1;
}
.lbl-hp-toggle-btn svg {
    opacity: 0.5;
}

/* History card */
.lbl-hp-card {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 520px;
    background: var(--bp-card);
    border: 1px solid var(--bp-border);
    border-radius: 12px;
}

/* Header — 1в1 SMS */
.lbl-hp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bp-card);
    border-bottom: 1px solid var(--bp-border);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
    z-index: 2;
}
.lbl-hp-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.lbl-hp-back:hover { background: rgba(255,255,255,0.1); color: #fff; }
.lbl-hp-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    min-width: 0;
}
.lbl-hp-title svg { color: var(--bp-accent); flex-shrink: 0; }
.lbl-hp-total {
    background: rgba(74, 158, 255, 0.15);
    color: var(--bp-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Screens */
.lbl-hp-screen { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.lbl-hp-list {
    flex: 1;
    overflow-y: auto;
    background: var(--bp-card);
    border-left: 1px solid var(--bp-border);
    border-right: 1px solid var(--bp-border);
    border-bottom: 1px solid var(--bp-border);
    border-radius: 0 0 12px 12px;
    min-height: 0;
}
.lbl-hp-list::-webkit-scrollbar { width: 4px; }
.lbl-hp-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* Skeleton */
.lbl-hp-skeleton { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.lbl-hp-skeleton-row {
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--bp-border) 25%, rgba(255,255,255,0.04) 50%, var(--bp-border) 75%);
    background-size: 200% 100%;
    animation: lbl-shimmer 1.4s infinite;
}
@keyframes lbl-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Empty */
.lbl-hp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 8px;
    color: #555;
}
.lbl-hp-empty p { font-size: 12px; margin: 0; }

/* List rows */
.lbl-hp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bp-border);
    transition: background 0.12s;
}
.lbl-hp-row:hover { background: rgba(255,255,255,0.04); }
.lbl-hp-row:last-child { border-bottom: none; }

.lbl-hp-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.lbl-hp-row-info { flex: 1; min-width: 0; }
.lbl-hp-row-top  { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #e0e0e0; margin-bottom: 2px; }
.lbl-hp-row-carrier { font-size: 12px; font-weight: 600; color: #e0e0e0; }
.lbl-hp-row-route   { font-size: 12px; color: var(--bp-text-muted); }
.lbl-hp-row-bottom  { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #777; }
.lbl-hp-row-weight  { font-size: 11px; color: var(--bp-text-muted); font-family: var(--bp-mono); }

.lbl-hp-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.lbl-hp-row-price { font-size: 12px; font-weight: 600; color: #e0e0e0; font-family: var(--bp-mono); }
.lbl-hp-row-time  { font-size: 10px; color: #666; }

/* Status badges */
.lbl-hp-status { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.lbl-hp-status--pending    { background: rgba(255,152,0,0.15);   color: #FF9800; }
.lbl-hp-status--processing { background: rgba(0,162,255,0.15);   color: #00a2ff; }
.lbl-hp-status--fulfilled  { background: rgba(76,175,80,0.15);   color: #4CAF50; }
.lbl-hp-status--cancelled  { background: rgba(255,152,0,0.15);   color: #FF9800; }

/* Load more */
.lbl-hp-load-more {
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--bp-border);
    color: var(--bp-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.lbl-hp-load-more:hover { background: rgba(74,158,255,0.06); }

/* Detail view */
.lbl-hp-detail-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lbl-hp-detail-hero {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lbl-hp-detail-carrier-icon { font-size: 26px; }
.lbl-hp-detail-hero-info { flex: 1; }
.lbl-hp-detail-carrier-name { font-size: 15px; font-weight: 700; color: var(--bp-text); margin-bottom: 3px; }
.lbl-hp-detail-price { font-size: 18px; font-weight: 800; color: var(--bp-green); font-family: var(--bp-mono); }

.lbl-hp-detail-date {
    font-size: 11px;
    color: var(--bp-text-muted);
    margin-top: -6px;
}

.lbl-hp-detail-track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(74,158,255,0.06);
    border: 1px solid rgba(74,158,255,0.2);
    border-radius: 8px;
}
.lbl-hp-detail-label  { font-size: 10px; font-weight: 700; color: var(--bp-text-muted); text-transform: uppercase; flex-shrink: 0; }
.lbl-hp-detail-track-val { font-size: 12px; font-family: var(--bp-mono); color: var(--bp-accent); word-break: break-all; }

.lbl-hp-detail-addresses {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-border);
    border-radius: 10px;
    padding: 12px;
}
.lbl-hp-addr-block { flex: 1; min-width: 0; }
.lbl-hp-addr-label   { font-size: 10px; font-weight: 700; color: var(--bp-text-muted); text-transform: uppercase; margin-bottom: 5px; }
.lbl-hp-addr-name    { font-size: 12px; font-weight: 600; color: var(--bp-text); }
.lbl-hp-addr-line    { font-size: 11px; color: var(--bp-text-muted); margin-top: 2px; }
.lbl-hp-addr-country { font-size: 11px; font-weight: 600; color: var(--bp-accent); margin-top: 3px; }
.lbl-hp-addr-arrow   { color: var(--bp-text-muted); font-size: 16px; padding-top: 18px; flex-shrink: 0; }

.lbl-hp-detail-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--bp-text-muted);
}

/* Autofill button */
.lbl-hp-autofill-btn {
    width: 100%;
    padding: 10px 16px;
    background: rgba(74,158,255,0.1);
    border: 1px solid rgba(74,158,255,0.3);
    border-radius: 10px;
    color: var(--bp-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 4px;
}
.lbl-hp-autofill-btn:hover {
    background: rgba(74,158,255,0.18);
    border-color: var(--bp-accent);
}

/* ── Адрес 2 — collapsible toggle ── */
.lbl-addr2-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--bp-text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 1px 0;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
    text-align: left;
}
.lbl-addr2-toggle:hover { opacity: 1; color: var(--bp-accent); }

.lbl-addr2-field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.lbl-addr2-field .lbl-field__input {
    flex: 1;
    padding: 7px 10px;
    font-size: 13px;
}
.lbl-addr2-clear {
    background: none;
    border: none;
    color: var(--bp-text-muted);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s;
}
.lbl-addr2-clear:hover { opacity: 1; color: var(--bp-red); }

/* ── Вес + страховка симметрично ── */
.lbl-shipment-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
}
.lbl-shipment-row .lbl-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
/* Одинаковая высота инпутов — weight-wrap и declared value prefix */
.lbl-shipment-row .lbl-weight-input-wrap,
.lbl-shipment-row .lbl-field__input-prefix {
    height: 38px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}
.lbl-shipment-row .lbl-weight-input-wrap {
    padding-left: 11px;
    padding-right: 11px;
}
.lbl-shipment-row .lbl-field__prefix {
    line-height: 38px;
}
@media (max-width: 600px) {
    .lbl-shipment-row { flex-direction: column; }
}

/* ============================================================
   LABELS — HOW IT WORKS  (lbl-hiw-*)
   Паттерн 1:1 с proxy-hiw-*, только namespace переименован
   ============================================================ */

.lbl-how-it-works {
    position: relative;
    margin-top: 80px;
    padding: 64px 0 24px;
    border-top: 1px solid rgba(255,255,255,0.04);
    background: transparent;
}

.lbl-hiw-header {
    text-align: center;
    margin-bottom: 36px;
}

.lbl-hiw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4a9eff;
    opacity: 0.55;
    margin-bottom: 14px;
}

.lbl-hiw-kicker::before,
.lbl-hiw-kicker::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #4a9eff;
    opacity: 0.4;
}

.lbl-hiw-title {
    font-size: 23px;
    font-weight: 500;
    color: #ddd;
    margin: 0 0 8px 0;
}

.lbl-hiw-subtitle {
    color: #666;
    font-size: 14px;
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.55;
}

.lbl-hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

.lbl-hiw-step {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: default;
}

.lbl-hiw-step:hover {
    border-color: rgba(74,158,255,0.18);
    box-shadow: 0 0 24px rgba(74,158,255,0.04);
}

.lbl-hiw-step-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #4a9eff;
    opacity: 0.6;
    margin-bottom: 10px;
    font-family: 'Roboto Mono', monospace;
}

.lbl-hiw-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(74,158,255,0.06);
    border: 1px solid rgba(74,158,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a9eff;
    margin-bottom: 14px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.lbl-hiw-step:hover .lbl-hiw-step-icon {
    border-color: rgba(74,158,255,0.3);
    box-shadow: 0 0 16px rgba(74,158,255,0.08);
}

.lbl-hiw-step-icon svg {
    width: 16px;
    height: 16px;
}

.lbl-hiw-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #bbb;
    margin: 0 0 6px 0;
    transition: color 0.35s ease;
}

.lbl-hiw-step:hover .lbl-hiw-step-title { color: #ddd; }

.lbl-hiw-step-text {
    font-size: 11.5px;
    color: #555;
    line-height: 1.55;
    margin: 0;
    transition: color 0.35s ease;
}

.lbl-hiw-step:hover .lbl-hiw-step-text { color: #666; }

.lbl-hiw-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.lbl-hiw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(76,175,80,0.2);
    background: rgba(76,175,80,0.05);
    color: #4CAF50;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: default;
}

.lbl-hiw-pill:hover {
    border-color: rgba(76,175,80,0.35);
    box-shadow: 0 0 20px rgba(76,175,80,0.06);
}

.lbl-hiw-pill svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .lbl-how-it-works  { margin-top: 56px; padding-top: 40px; }
    .lbl-hiw-title     { font-size: 20px; }
    .lbl-hiw-subtitle  { font-size: 13px; }
    .lbl-hiw-steps     { max-width: 100%; grid-template-columns: 1fr; gap: 10px; }
    .lbl-hiw-step      { padding: 16px 14px; }
    .lbl-hiw-step-title{ font-size: 12px; }
    .lbl-hiw-step-text { font-size: 11px; }
    .lbl-hiw-pills     { max-width: 100%; gap: 8px; margin-top: 24px; }
    .lbl-hiw-pill      { font-size: 11px; height: 28px; padding: 0 10px; }
}

/* ============================================================
   LABELS — WHY US  (lbl-why-*)
   Паттерн 1:1 с proxy-why-*, только namespace переименован
   ============================================================ */

.lbl-why-section {
    margin-top: 80px;
    padding: 64px 0 48px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.lbl-why-header {
    text-align: center;
    margin-bottom: 36px;
}

.lbl-why-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4a9eff;
    opacity: 0.55;
    margin-bottom: 14px;
}

.lbl-why-kicker::before,
.lbl-why-kicker::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #4a9eff;
    opacity: 0.4;
}

.lbl-why-title {
    font-size: 23px;
    font-weight: 500;
    color: #ddd;
    margin: 0 0 8px 0;
}

.lbl-why-subtitle {
    color: #666;
    font-size: 14px;
    margin: 0 auto;
    max-width: 620px;
    line-height: 1.55;
}

.lbl-why-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.lbl-why-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
    cursor: default;
}

.lbl-why-row:hover {
    border-color: rgba(74,158,255,0.18);
    box-shadow: 0 0 24px rgba(74,158,255,0.04);
}

.lbl-why-row-num {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    color: rgba(74,158,255,0.15);
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
    padding-top: 2px;
}

.lbl-why-row-body {
    flex: 1;
    min-width: 0;
}

.lbl-why-row-title {
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
    margin: 0 0 4px 0;
    transition: color 0.35s ease;
}

.lbl-why-row:hover .lbl-why-row-title { color: #fff; }

.lbl-why-row-text {
    font-size: 12.5px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    transition: color 0.35s ease;
}

.lbl-why-row:hover .lbl-why-row-text { color: #777; }

@media (max-width: 768px) {
    .lbl-why-section { margin-top: 56px; padding-top: 40px; padding-bottom: 32px; }
    .lbl-why-title   { font-size: 20px; }
    .lbl-why-row     { padding: 16px; gap: 14px; }
    .lbl-why-row-num { font-size: 22px; width: 30px; }
}

@media (max-width: 480px) {
    .lbl-why-row-num { display: none; }
}


/* ═══════════════════════════════════════════════
   FAQ SECTION — lbl-faq-* (1:1 proxy-faq-* pattern)
   ═══════════════════════════════════════════════ */

.lbl-faq-section {
    margin-top: 32px;
    padding: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
}

.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;
}

.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;
}

@media (max-width: 768px) {
    .lbl-faq-section {
        margin-top: 16px !important;
        padding: 16px 0 !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .lbl-faq-section .lbl-faq-title {
        font-size: 18px !important;
    }
    .lbl-faq-section .lbl-faq-subtitle {
        font-size: 13px !important;
    }
    .lbl-faq-item {
        border-radius: 10px !important;
    }
    .lbl-faq-question {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }
    .lbl-faq-answer-inner {
        padding: 12px 16px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}