/* ==========================================================================
   iFura.kz — единый компактный стиль (pro-* эталон, как на site/index2)
   Один файл — никаких конфликтов и дубликатов.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens — палитра логотипа iFURA.kz ---------- */
:root {
    --ifura-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Из лого: насыщенный синий (iFURA), глубокий navy (.kz), голубой motion-blue */
    --cm-primary:         #1976d2;
    --cm-primary-rgb:     25, 118, 210;
    --cm-primary-dark:    #0e3d7a;
    --cm-primary-darker:  #082b5c;
    --cm-primary-light:   #4ba4e0;
    --cm-accent:          #38b6ff;
    --cm-accent-rgb:      56, 182, 255;
    --cm-accent-soft:     #cfe6f8;

    --cm-text:            #0e2747;
    --cm-text-soft:       #2a3a55;
    --cm-muted:           #5e7290;
    --cm-success:         #16a34a;
    --cm-danger:          #dc2626;
    --cm-warning:         #d97706;

    --pro-radius:         14px;
    --pro-radius-sm:      8px;
    --pro-radius-lg:      22px;
    --pro-shadow-sm:      0 1px 2px rgba(14, 61, 122, 0.05), 0 4px 12px rgba(14, 61, 122, 0.05);
    --pro-shadow:         0 8px 22px rgba(14, 61, 122, 0.08);
    --pro-shadow-blue:    0 14px 32px rgba(25, 118, 210, 0.18);
    --pro-border:         #d8e4f1;
    --pro-border-strong:  #b8c9dc;
    --pro-border-blue:    #b8d6f1;
    --pro-soft:           #f0f6fc;
    --pro-soft-2:         #e3eef9;
    --pro-bg:             #f4f8fd;
    --cm-bg:              #f4f8fd;

    --pro-grad-primary:   linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-primary-dark) 100%);
    --pro-grad-accent:    linear-gradient(135deg, var(--cm-accent) 0%, var(--cm-primary) 60%, var(--cm-primary-dark) 100%);
    --pro-grad-soft:      linear-gradient(135deg, #f6fbff 0%, #e6f1fc 60%, #ffffff 100%);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 15px; }

body {
    margin: 0;
    font-family: var(--ifura-font);
    font-weight: 400;
    line-height: 1.55;
    color: var(--cm-text);
    background: var(--pro-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--ifura-font);
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.25;
    color: var(--cm-text);
}
h1 { letter-spacing: -0.025em; line-height: 1.15; }

p { margin: 0; }

a { color: var(--cm-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--cm-primary-dark); }

img { max-width: 100%; height: auto; }

main#main { padding-top: 0; }
.navbar.cm-navbar { display: none !important; }

/* ============================================================
   HEADER (.ih) — sticky, compact
   ============================================================ */
.ih {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pro-border);
    box-shadow: 0 1px 0 rgba(var(--cm-primary-rgb), 0.04);
}
.ih__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.ih__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }

.ih__nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.ih__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; color: var(--cm-text);
    font-size: 13.5px; font-weight: 500; line-height: 1.2;
    border-radius: var(--pro-radius-sm);
    border: 1px solid transparent;
    text-decoration: none; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ih__link i { font-size: 15px; opacity: 0.85; }
.ih__link:hover { background: var(--pro-soft); border-color: var(--pro-border); color: var(--cm-primary); }
.ih__link.is-active { background: var(--pro-soft-2); color: var(--cm-primary); }

.ih__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; background: var(--cm-primary); color: #fff;
    font-size: 13.5px; font-weight: 500; line-height: 1.2;
    border: 1px solid var(--cm-primary);
    border-radius: var(--pro-radius-sm);
    text-decoration: none; flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.ih__cta i { font-size: 15px; }
.ih__cta:hover { background: var(--cm-primary-dark); border-color: var(--cm-primary-dark); color: #fff; }

.ih__divider { width: 1px; height: 20px; background: var(--pro-border); margin: 0 4px; }

.ih__actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ih__action {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 11px; color: var(--cm-text);
    font-size: 13.5px; font-weight: 500; line-height: 1.2;
    border-radius: var(--pro-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ih__action i { font-size: 15px; opacity: 0.85; }
.ih__action:hover { background: var(--pro-soft); color: var(--cm-primary); }
.ih__action.is-strong {
    color: #fff; background: var(--cm-primary); border-color: var(--cm-primary);
}
.ih__action.is-strong:hover { background: var(--cm-primary-dark); border-color: var(--cm-primary-dark); color: #fff; }

.ih__burger {
    display: none; width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-sm); color: var(--cm-text);
    cursor: pointer; padding: 0; flex-shrink: 0;
}
.ih__burger i { font-size: 18px; }

@media (max-width: 991.98px) {
    .ih__nav, .ih__actions, .ih__divider, .ih__cta { display: none; }
    .ih__inner { justify-content: space-between; gap: 12px; padding: 8px 14px; }
    .ih__burger { display: inline-flex; }
}

/* ============================================================
   PAGE / CONTAINER / SECTIONS
   ============================================================ */
.pro-container, .container {
    max-width: 1320px; margin: 0 auto; padding: 0 16px;
}


.pro-section { margin-top: 22px; }
.pro-section:first-child { margin-top: 0; }
.pro-section__head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.pro-section__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 4px; color: var(--cm-primary);
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.pro-section__eyebrow i { font-size: 13px; }
.pro-section__title { font-size: 18px; font-weight: 600; margin: 0; }
.pro-section__title i { color: var(--cm-primary); margin-right: 6px; vertical-align: -2px; }
.pro-section__text {
    max-width: 720px; margin: 5px 0 0;
    color: var(--cm-muted); font-size: 13.5px; line-height: 1.5;
}
.pro-section__more {
    color: var(--cm-primary); font-size: 13px; font-weight: 500;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.pro-section__more:hover { color: var(--cm-primary-dark); }

/* ============================================================
   BUTTONS (.pro-btn)
   ============================================================ */
.pro-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 13px; min-height: 34px;
    background: var(--cm-primary); color: #fff;
    border: 1px solid var(--cm-primary);
    border-radius: var(--pro-radius-sm);
    font-size: 13px; font-weight: 500; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.pro-btn i { font-size: 15px; }
.pro-btn:hover { background: var(--cm-primary-dark); border-color: var(--cm-primary-dark); color: #fff; }
.pro-btn:disabled, .pro-btn.is-disabled { opacity: 0.6; cursor: not-allowed; }

.pro-btn.is-ghost { background: #fff; color: var(--cm-primary); border-color: var(--pro-border-blue); }
.pro-btn.is-ghost:hover { background: var(--pro-soft-2); color: var(--cm-primary-dark); }

.pro-btn.is-light { background: var(--pro-soft); color: var(--cm-text); border-color: var(--pro-border); }
.pro-btn.is-light:hover { background: var(--pro-soft-2); color: var(--cm-primary); border-color: var(--pro-border-blue); }

.pro-btn.is-danger { background: var(--cm-danger); border-color: var(--cm-danger); }
.pro-btn.is-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.pro-btn.is-block { width: 100%; }
.pro-btn.is-lg { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.pro-btn.is-sm { min-height: 28px; padding: 5px 9px; font-size: 12px; }

.pro-actions {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* ============================================================
   FORMS — компактные поля
   ============================================================ */
.pro-form { display: flex; flex-direction: column; gap: 14px; }

.pro-form__grid { display: grid; gap: 10px 12px; }
.pro-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pro-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pro-form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pro-field { display: flex; flex-direction: column; gap: 4px; }
.pro-field--col-2 { grid-column: span 2; }
.pro-field--full   { grid-column: 1 / -1; }
.pro-field--inline { flex-direction: row; align-items: center; gap: 8px; }

.pro-label, .pro-form .form-label, .form-label {
    display: block;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cm-muted); margin-bottom: 4px;
}
.pro-label.is-req::after { content: " *"; color: var(--cm-danger); }

.pro-input, .pro-select, .pro-textarea,
.pro-form .form-control, .pro-form .form-select,
.form-control, .form-select {
    display: block; width: 100%;
    height: 36px; padding: 6px 10px;
    font: inherit; font-size: 13px; color: var(--cm-text);
    background: #fcfdff;
    border: 1px solid var(--pro-border-strong);
    border-radius: var(--pro-radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.form-select { background-image: linear-gradient(45deg, transparent 50%, var(--cm-muted) 50%), linear-gradient(135deg, var(--cm-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.pro-textarea, textarea.form-control { height: auto; min-height: 90px; resize: vertical; line-height: 1.45; padding: 8px 10px; }
.pro-input:focus, .pro-select:focus, .pro-textarea:focus,
.form-control:focus, .form-select:focus {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px rgba(var(--cm-primary-rgb), 0.12);
    background: #fff; outline: 0;
}
.pro-input::placeholder, .pro-textarea::placeholder, .form-control::placeholder { color: #9aa5b8; }

.pro-input.is-invalid, .pro-select.is-invalid,
.form-control.is-invalid, .form-select.is-invalid,
.has-error .form-control, .has-error .form-select { border-color: var(--cm-danger); }
.invalid-feedback, .help-block-error, .error-summary {
    display: block; font-size: 12px; color: var(--cm-danger); margin-top: 4px;
}
.error-summary { padding: 8px 10px; background: #fff5f5; border: 1px solid #fecaca; border-radius: var(--pro-radius-sm); }
.error-summary ul { margin: 0; padding-left: 16px; }

.pro-hint, .help-block { font-size: 12px; color: var(--cm-muted); margin-top: 4px; line-height: 1.4; }

.pro-check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--cm-text); cursor: pointer; user-select: none;
}
.pro-check input[type="checkbox"], .pro-check input[type="radio"],
.form-check-input {
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--cm-primary);
}
.form-check { display: flex; align-items: center; gap: 7px; padding-left: 0; min-height: 22px; }
.form-check .form-check-input { float: none; margin: 0; }
.form-check .form-check-label { font-size: 13px; color: var(--cm-text); margin: 0; cursor: pointer; }

.pro-input-group {
    display: flex; gap: 6px; align-items: center;
}
.pro-input-group .pro-input,
.pro-input-group .form-control { flex: 1; }

.input-group { display: flex; }
.input-group .form-control,
.input-group .form-select { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--pro-radius-sm); border-bottom-left-radius: var(--pro-radius-sm); }
.input-group > :last-child { border-top-right-radius: var(--pro-radius-sm); border-bottom-right-radius: var(--pro-radius-sm); }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group-text {
    display: inline-flex; align-items: center; padding: 6px 10px;
    background: var(--pro-soft); border: 1px solid var(--pro-border-strong);
    color: var(--cm-muted); font-size: 12px;
}

/* search panel — compact horizontal form (same as index2) */
.pro-search {
    position: relative; overflow: hidden;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    padding: 14px;
    box-shadow: var(--pro-shadow-sm);
}
.pro-search::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--pro-grad-accent);
    opacity: 0.85;
}
.pro-search__top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.pro-search__tabs {
    display: inline-flex; background: var(--pro-soft);
    border: 1px solid var(--pro-border); border-radius: 999px;
    padding: 3px; gap: 2px;
}
.pro-search__tabs input { position: absolute; opacity: 0; pointer-events: none; }
.pro-search__tabs label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    color: var(--cm-muted); font-size: 13px; font-weight: 500; cursor: pointer; margin: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pro-search__tabs label i { font-size: 14px; }
.pro-search__tabs input:checked + label {
    background: #fff; color: var(--cm-primary);
    box-shadow: 0 2px 6px rgba(14, 39, 71, 0.08);
}
.pro-search__caption {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cm-muted); font-size: 12px; font-weight: 500;
}
.pro-search__caption i { color: var(--cm-primary); font-size: 15px; }
.pro-search__submit {
    width: 100%; height: 36px;
    background: var(--cm-primary); color: #fff;
    border: 1px solid var(--cm-primary);
    border-radius: var(--pro-radius-sm);
    font-size: 13px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.pro-search__submit:hover { background: var(--cm-primary-dark); border-color: var(--cm-primary-dark); }

/* Bootstrap row/col compatibility for compact forms */
.row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.row > [class^="col"], .row > [class*=" col"] { padding: 0 6px; min-width: 0; }
.g-2 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
.g-3 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.pro-card, .pro-panel {
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    padding: 16px;
    box-shadow: var(--pro-shadow-sm);
}
.pro-card.is-soft { background: var(--pro-bg); }
.pro-card.is-flat { box-shadow: none; }
.pro-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--pro-border);
}
.pro-card__title { font-size: 15px; font-weight: 600; margin: 0; display: inline-flex; align-items: center; gap: 7px; }
.pro-card__title i { color: var(--cm-primary); font-size: 17px; }
.pro-card__sub { font-size: 12.5px; color: var(--cm-muted); margin-top: 2px; }

/* compact item card (for cargo/transport list cards) — выделенный дизайн */
.pro-item-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 14px 18px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.pro-item-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cm-primary) 0%, var(--cm-accent) 100%);
    opacity: 0.85;
    transition: width 0.18s ease, opacity 0.18s ease;
}
.pro-item-card::after {
    content: ""; position: absolute; right: -42px; top: -42px;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--cm-primary-rgb), 0.07), transparent 70%);
    pointer-events: none;
    transition: opacity 0.18s ease;
    opacity: 0;
}
.pro-item-card:hover {
    box-shadow: 0 14px 30px rgba(var(--cm-primary-rgb), 0.13);
    border-color: var(--pro-border-blue);
    transform: translateY(-2px);
    color: inherit;
}
.pro-item-card:hover::before { width: 5px; opacity: 1; }
.pro-item-card:hover::after { opacity: 1; }

.pro-item-card__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
}
.pro-item-card__route {
    font-size: 15.5px; font-weight: 600; line-height: 1.25;
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    color: var(--cm-text);
    letter-spacing: -0.005em;
}
.pro-item-card__route i { color: var(--cm-primary); font-size: 16px; }
.pro-item-card__route i.ti-arrow-right {
    color: var(--cm-accent);
    background: var(--pro-soft-2);
    border-radius: 999px;
    padding: 1px 4px;
    font-size: 13px;
}
.pro-item-card__price {
    font-size: 14px; font-weight: 700; color: var(--cm-primary);
    white-space: nowrap;
    background: var(--pro-soft-2);
    border: 1px solid var(--pro-border-blue);
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
}
.pro-item-card__meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 12px; color: var(--cm-muted);
}
.pro-item-card__meta span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 0;
}
.pro-item-card__meta i { font-size: 13.5px; color: var(--cm-primary); opacity: 0.85; }
.pro-item-card__meta b { color: var(--cm-text); font-weight: 600; }
.pro-item-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-top: 9px;
    border-top: 1px dashed var(--pro-border);
    font-size: 12px;
}
.pro-item-card__foot .pro-actions { gap: 6px; }

/* Roles / quick-action cards */
.pro-roles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.pro-role-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 200px; padding: 16px;
    background: #fff; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pro-role-card.is-blue { background: linear-gradient(145deg, var(--pro-soft) 0%, var(--pro-soft-2) 100%); border-color: var(--pro-border-blue); }
.pro-role-card:hover { transform: translateY(-2px); border-color: var(--pro-border-blue); box-shadow: var(--pro-shadow); }
.pro-role-card::after {
    content: ""; position: absolute; right: -28px; top: -28px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(var(--cm-primary-rgb), 0.06);
}
.pro-role-card__icon, .pro-role-card__title, .pro-role-card__text, .pro-role-card__actions {
    position: relative; z-index: 1;
}
.pro-role-card__icon {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cm-primary), var(--cm-accent));
    color: #fff; box-shadow: 0 8px 18px rgba(var(--cm-primary-rgb), 0.18);
}
.pro-role-card__icon i { font-size: 19px; }
.pro-role-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.pro-role-card__text { flex: 1; margin: 0; font-size: 13px; color: var(--cm-muted); line-height: 1.5; }
.pro-role-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-role-card__actions .pro-btn { min-height: 32px; padding: 7px 11px; font-size: 12px; }

/* Audience cards */
.pro-audience {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.pro-aud-card {
    background: #fff; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius); padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--pro-shadow-sm);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.pro-aud-card:hover { box-shadow: var(--pro-shadow); border-color: var(--pro-border-blue); }
.pro-aud-card__head { display: flex; align-items: center; gap: 9px; }
.pro-aud-card__icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--pro-soft-2); color: var(--cm-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.pro-aud-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.pro-aud-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pro-aud-card li {
    font-size: 13px; color: var(--cm-muted);
    padding-left: 16px; position: relative; line-height: 1.5;
}
.pro-aud-card li::before {
    content: ""; position: absolute; left: 4px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cm-primary); opacity: 0.55;
}

/* ============================================================
   ROW LIST (cargo/transport mini list)
   ============================================================ */
.pro-row {
    position: relative;
    display: grid; grid-template-columns: 1fr auto;
    gap: 8px; padding: 10px 12px 10px 14px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-sm);
    text-decoration: none; color: inherit;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pro-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cm-primary); opacity: 0.55;
    transition: opacity 0.15s, width 0.15s;
}
.pro-row:hover {
    border-color: var(--pro-border-blue);
    background: var(--pro-soft);
    color: inherit;
    box-shadow: 0 4px 14px rgba(var(--cm-primary-rgb), 0.08);
    transform: translateX(1px);
}
.pro-row:hover::before { opacity: 1; width: 4px; }
.pro-row__route {
    font-size: 14px; font-weight: 600; color: var(--cm-text);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.pro-row__route .arr { color: var(--cm-primary); }
.pro-row__meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 12px; color: var(--cm-muted);
}
.pro-row__meta span { display: inline-flex; align-items: center; gap: 3px; }
.pro-row__meta b { color: var(--cm-text); font-weight: 500; }
.pro-row__right {
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 4px; min-width: 100px;
}
.pro-row__price { font-size: 14px; font-weight: 600; color: var(--cm-primary); line-height: 1.1; }
.pro-row__contacts {
    font-size: 11px; padding: 2px 8px;
    border-radius: 999px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 3px;
}
.pro-row__contacts.is-open { background: #e9f7ec; color: #1f8a3a; border: 1px solid #c2e8c9; }
.pro-row__contacts.is-locked { background: #fff5e6; color: #b87a14; border: 1px solid #f1d6a2; }

/* Marketplace 2-col board */
.pro-market {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pro-market__col {
    background: #fff; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius); padding: 14px;
    box-shadow: var(--pro-shadow-sm);
}
.pro-market__head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--pro-border);
}
.pro-market__title {
    font-size: 15px; font-weight: 600; margin: 0;
    display: inline-flex; align-items: center; gap: 7px;
}
.pro-market__title i { color: var(--cm-primary); font-size: 17px; }
.pro-market__status { font-size: 11px; color: var(--cm-muted); margin-top: 2px; }
.pro-market__list { display: flex; flex-direction: column; gap: 8px; }
.pro-market-board {
    position: relative; overflow: hidden; padding: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--cm-primary-rgb), 0.08), transparent 30%),
        linear-gradient(135deg, var(--pro-soft) 0%, #ffffff 60%);
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow);
}

/* ============================================================
   GRID LAYOUTS — sidebar / detail
   ============================================================ */
.pro-grid--sidebar {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pro-grid--detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 16px;
    align-items: start;
}
.pro-grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.pro-sticky { position: sticky; top: 80px; }

.pro-results {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.pro-results.is-narrow { grid-template-columns: 1fr; }
@media (max-width: 1199.98px) { .pro-results { grid-template-columns: 1fr; } }

.pro-toolbar-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    margin-bottom: 12px;
    font-size: 13px;
}
.pro-toolbar-strip__count { color: var(--cm-muted); }
.pro-toolbar-strip__count b { color: var(--cm-text); font-weight: 600; }
.pro-toolbar-strip__sort { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pro-toolbar-strip__sort .form-select { width: auto; min-width: 160px; }

/* Cargo/transport list identity */
.pro-page--transport {
    --listing-primary: #1976d2;
    --listing-primary-rgb: 25, 118, 210;
    --listing-accent: #38b6ff;
    --listing-accent-rgb: 56, 182, 255;
    --listing-soft: #eef7ff;
    --listing-soft-2: #dff1ff;
    --listing-border: #b8d6f1;
}
.pro-page--cargo {
    --cm-primary: #1976d2;
    --cm-primary-rgb: 25, 118, 210;
    --cm-primary-dark: #0e3d7a;
    --cm-accent: #38b6ff;
    --cm-accent-rgb: 56, 182, 255;
    --pro-border-blue: #b8d6f1;
    --pro-soft-2: #e3eef9;
    --listing-primary: #1976d2;
    --listing-primary-rgb: 25, 118, 210;
    --listing-accent: #38b6ff;
    --listing-accent-rgb: 56, 182, 255;
    --listing-soft: #eef7ff;
    --listing-soft-2: #dff1ff;
    --listing-border: #b8d6f1;
}
.pro-page--transport .pro-card,
.pro-page--cargo .pro-card,
.pro-page--transport .pro-toolbar-strip,
.pro-page--cargo .pro-toolbar-strip {
    border-color: rgba(var(--listing-primary-rgb), 0.24);
}
.pro-page--transport .pro-toolbar-strip,
.pro-page--cargo .pro-toolbar-strip {
    background:
        linear-gradient(135deg, rgba(var(--listing-primary-rgb), 0.08), transparent 42%),
        linear-gradient(90deg, #fff 0%, rgba(var(--listing-accent-rgb), 0.05) 100%);
}
.pro-page--transport .pro-card__title i,
.pro-page--cargo .pro-card__title i,
.pro-page--transport .pro-toolbar-strip__count b,
.pro-page--cargo .pro-toolbar-strip__count b {
    color: var(--listing-primary);
}
.pro-page--transport .pro-item-card,
.pro-page--cargo .pro-item-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--listing-accent-rgb), 0.07), transparent 34%),
        linear-gradient(135deg, #fff 0%, rgba(var(--listing-primary-rgb), 0.04) 100%);
}
.pro-page--transport .pro-item-card::before,
.pro-page--cargo .pro-item-card::before {
    background: linear-gradient(180deg, var(--listing-primary) 0%, var(--listing-accent) 100%);
}
.pro-page--transport .pro-item-card:hover,
.pro-page--cargo .pro-item-card:hover {
    border-color: rgba(var(--listing-primary-rgb), 0.34);
    box-shadow: 0 14px 30px rgba(var(--listing-primary-rgb), 0.13);
}
.pro-page--transport .pro-item-card__route i,
.pro-page--transport .pro-item-card__meta i,
.pro-page--cargo .pro-item-card__route i,
.pro-page--cargo .pro-item-card__meta i {
    color: var(--listing-primary);
}
.pro-page--transport .pro-item-card__route i.ti-arrow-right,
.pro-page--cargo .pro-item-card__route i.ti-arrow-right {
    color: var(--listing-accent);
    background: rgba(var(--listing-accent-rgb), 0.10);
}
.pro-page--transport .pro-item-card__price,
.pro-page--cargo .pro-item-card__price {
    color: var(--listing-primary);
    background: rgba(var(--listing-primary-rgb), 0.08);
    border-color: rgba(var(--listing-primary-rgb), 0.24);
}

.pro-list-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 18px;
    align-items: stretch;
    min-height: 166px;
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.22);
    border-radius: var(--pro-radius);
    background:
        radial-gradient(circle at 84% 12%, rgba(var(--listing-accent-rgb), 0.18), transparent 34%),
        linear-gradient(135deg, var(--listing-soft) 0%, #fff 58%, rgba(var(--listing-accent-rgb), 0.07) 100%);
}
.pro-list-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--listing-primary-rgb), 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--listing-primary-rgb), 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.28) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}
.pro-list-hero__content,
.pro-list-hero__visual {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.pro-list-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--listing-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.pro-list-hero__eyebrow i { font-size: 14px; }
.pro-list-hero__title {
    margin: 0;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
}
.pro-list-hero__sub {
    max-width: 660px;
    margin: 6px 0 0;
    color: var(--cm-muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.pro-list-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.pro-list-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.16);
    border-radius: var(--pro-radius-sm);
    background: rgba(255, 255, 255, 0.74);
    color: var(--cm-text);
    font-size: 12px;
    line-height: 1.2;
}
.pro-list-chip i {
    color: var(--listing-primary);
    font-size: 14px;
    flex: 0 0 auto;
}
.pro-list-chip b {
    color: var(--cm-muted);
    font-weight: 600;
}
.pro-list-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.pro-list-hero__visual {
    min-height: 128px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.14);
    border-radius: var(--pro-radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)),
        radial-gradient(circle at 18% 22%, rgba(var(--listing-primary-rgb), 0.16), transparent 30%);
}
.pro-list-hero__visual::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: var(--pro-radius-sm);
    background-image:
        linear-gradient(rgba(var(--listing-primary-rgb), 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--listing-primary-rgb), 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.7;
}
.pro-info-line {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 55%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--listing-primary-rgb), 0.15), rgba(var(--listing-accent-rgb), 0.48));
}
.pro-info-line::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -12px;
    height: 28px;
    border-top: 1px dashed rgba(var(--listing-primary-rgb), 0.25);
    border-radius: 50%;
}
.pro-info-node {
    position: absolute;
    top: calc(55% - 15px);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--listing-primary);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(var(--listing-primary-rgb), 0.22);
}
.pro-info-node i { font-size: 15px; }
.pro-info-node.is-start { left: 18px; }
.pro-info-node.is-end { right: 18px; color: var(--listing-accent); }
.pro-info-vehicle {
    position: absolute;
    right: 76px;
    top: 43%;
    width: 74px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.18);
    border-radius: var(--pro-radius-sm);
    background: rgba(255, 255, 255, 0.56);
    color: rgba(var(--listing-primary-rgb), 0.62);
    box-shadow: 0 10px 24px rgba(var(--listing-primary-rgb), 0.08);
}
.pro-info-vehicle i { font-size: 31px; }
.pro-info-stat {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 68px;
    padding: 6px 8px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.14);
    border-radius: var(--pro-radius-sm);
    background: rgba(255, 255, 255, 0.56);
    color: rgba(14, 39, 71, 0.72);
    font-size: 11px;
    line-height: 1.1;
}
.pro-info-stat b {
    color: var(--listing-primary);
    font-size: 14px;
    font-weight: 800;
}
.pro-info-stat span { color: var(--cm-muted); }
.pro-info-stat.is-top { left: 28px; top: 18px; }
.pro-info-stat.is-bottom { right: 30px; bottom: 18px; }
.pro-cargo-box {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 42px;
    border: 1px solid rgba(var(--listing-primary-rgb), 0.18);
    border-radius: var(--pro-radius-sm);
    background:
        linear-gradient(135deg, rgba(var(--listing-primary-rgb), 0.10), rgba(255, 255, 255, 0.64)),
        rgba(255, 255, 255, 0.5);
    color: rgba(var(--listing-primary-rgb), 0.68);
    box-shadow: 0 10px 24px rgba(var(--listing-primary-rgb), 0.08);
}
.pro-cargo-box i { font-size: 23px; }
.pro-cargo-box.is-one { left: 88px; top: 30px; }
.pro-cargo-box.is-two { left: 128px; top: 58px; color: rgba(var(--listing-accent-rgb), 0.68); }
.pro-cargo-box.is-three { left: 168px; top: 30px; }

/* Pagination */
.pro-pagination {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 14px; justify-content: center;
}
.pro-pagination a, .pro-pagination span,
.pagination li a, .pagination li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-sm);
    background: #fff; color: var(--cm-text);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pro-pagination a:hover, .pagination li a:hover { background: var(--pro-soft); border-color: var(--pro-border-blue); color: var(--cm-primary); }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 14px 0 0; list-style: none; justify-content: center; }
.pagination .active span,
.pagination .active a { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }
.pagination .disabled span { opacity: 0.45; }

/* ============================================================
   KPIS
   ============================================================ */
.pro-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.pro-kpi {
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    padding: 12px 14px;
    box-shadow: var(--pro-shadow-sm);
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.pro-kpi b { font-size: 20px; font-weight: 600; color: var(--cm-text); letter-spacing: -0.02em; line-height: 1.1; }
.pro-kpi span { font-size: 12px; color: var(--cm-muted); }
.pro-kpi i { color: var(--cm-primary); font-size: 16px; margin-right: 4px; vertical-align: -2px; }

.pro-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px;
}
.pro-stat {
    position: relative; overflow: hidden;
    padding: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--pro-border-blue);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
}
.pro-stat::after {
    content: ""; position: absolute; right: -22px; top: -22px;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(var(--cm-primary-rgb), 0.08);
}
.pro-stat b { display: block; font-size: 20px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.pro-stat span { display: block; margin-top: 3px; color: var(--cm-muted); font-size: 12px; line-height: 1.25; }

/* ============================================================
   PILLS / BADGES / TAGS
   ============================================================ */
.pro-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    background: var(--pro-soft-2);
    border: 1px solid var(--pro-border-blue);
    border-radius: 999px;
    color: var(--cm-text); font-size: 12px; font-weight: 500;
}
.pro-pill i { color: var(--cm-primary); font-size: 13px; }

.pro-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: var(--pro-soft-2); color: var(--cm-primary);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
}
.pro-badge.is-success { background: #e9f7ec; color: #1f8a3a; }
.pro-badge.is-warning { background: #fff5e6; color: #b87a14; }
.pro-badge.is-danger  { background: #ffe9ea; color: var(--cm-danger); }
.pro-badge.is-muted   { background: var(--pro-soft); color: var(--cm-muted); }

.pro-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   ROUTES (chips)
   ============================================================ */
.pro-routes-wrap {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
}
.pro-routes { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-route {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; background: var(--pro-soft);
    border: 1px solid var(--pro-border);
    border-radius: 999px;
    color: var(--cm-text); text-decoration: none;
    font-size: 12.5px; font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pro-route:hover { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }
.pro-route i { color: var(--cm-primary); font-size: 13px; }
.pro-route:hover i { color: #fff; }

/* ============================================================
   AUTH SPLIT (.pro-auth)
   ============================================================ */
.pro-auth {
    max-width: 880px; margin: 24px auto;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow);
    overflow: hidden;
}
.pro-auth__grid {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.pro-auth__aside {
    padding: 28px 24px;
    background:
        radial-gradient(circle at 80% 12%, rgba(var(--cm-primary-rgb), 0.18), transparent 38%),
        linear-gradient(160deg, var(--pro-soft) 0%, var(--pro-soft-2) 100%);
    border-right: 1px solid var(--pro-border);
    display: flex; flex-direction: column; gap: 12px;
}
.pro-auth__brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--cm-text); font-size: 15px;
}
.pro-auth__brand i { color: var(--cm-primary); font-size: 18px; }
.pro-auth__title { font-size: 22px; font-weight: 600; margin: 4px 0 4px; letter-spacing: -0.018em; line-height: 1.2; }
.pro-auth__sub { color: var(--cm-muted); font-size: 13.5px; line-height: 1.5; }
.pro-auth__bullets { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pro-auth__bullets li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--cm-text); line-height: 1.45;
}
.pro-auth__bullets i { color: var(--cm-primary); font-size: 15px; margin-top: 1px; }
.pro-auth__content { padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.pro-auth__steps { display: flex; gap: 6px; flex-wrap: wrap; }
.pro-auth__step {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--pro-soft);
    border: 1px solid var(--pro-border);
    border-radius: 999px;
    color: var(--cm-muted); font-size: 11.5px; font-weight: 500;
}
.pro-auth__step.is-active { background: var(--pro-soft-2); color: var(--cm-primary); border-color: var(--pro-border-blue); }
.pro-auth__foot {
    margin-top: 6px; padding-top: 12px;
    border-top: 1px dashed var(--pro-border);
    font-size: 12.5px; color: var(--cm-muted);
    display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between;
}
.pro-auth__foot a { color: var(--cm-primary); font-weight: 500; }

@media (max-width: 767.98px) {
    .pro-auth__grid { grid-template-columns: 1fr; }
    .pro-auth__aside { border-right: 0; border-bottom: 1px solid var(--pro-border); padding: 22px 18px; }
    .pro-auth__content { padding: 22px 18px; }
}

/* ============================================================
   DETAIL LIST (key-value)
   ============================================================ */
.pro-dl {
    display: grid; grid-template-columns: 140px 1fr;
    gap: 6px 12px;
    font-size: 13.5px;
}
.pro-dl dt {
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cm-muted); padding-top: 3px;
}
.pro-dl dd { margin: 0; color: var(--cm-text); font-weight: 500; line-height: 1.45; }
.pro-dl dd b { color: var(--cm-text); }

/* ============================================================
   COPY (static text pages)
   ============================================================ */
.pro-copy { font-size: 14px; line-height: 1.65; color: var(--cm-text); }
.pro-copy h2 { font-size: 18px; font-weight: 600; margin: 18px 0 8px; }
.pro-copy h3 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.pro-copy p { margin: 0 0 10px; }
.pro-copy ul, .pro-copy ol { margin: 0 0 10px; padding-left: 22px; }
.pro-copy li { margin-bottom: 4px; }
.pro-copy a { color: var(--cm-primary); }
.pro-copy a:hover { color: var(--cm-primary-dark); text-decoration: underline; }

/* ============================================================
   TABLES
   ============================================================ */
.pro-table-wrap {
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    overflow: hidden;
}
.pro-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pro-table th, .pro-table td {
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid var(--pro-border);
    vertical-align: middle;
}
.pro-table th {
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cm-muted);
    background: var(--pro-soft);
}
.pro-table tbody tr:last-child td { border-bottom: 0; }
.pro-table tbody tr:hover td { background: var(--pro-bg); }
.pro-table .actions { text-align: right; white-space: nowrap; }

table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.table th, table.table td { padding: 10px 12px; border-bottom: 1px solid var(--pro-border); }
table.table th { font-weight: 500; color: var(--cm-muted); background: var(--pro-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================
   FLOW STEPS
   ============================================================ */
.pro-flow {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; padding: 14px;
    background: linear-gradient(135deg, var(--cm-primary-darker) 0%, var(--cm-primary-dark) 45%, var(--cm-primary) 100%);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow-blue);
}
.pro-flow::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px; opacity: 0.7;
}
.pro-flow-step {
    position: relative; z-index: 1;
    padding: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--pro-radius);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pro-flow-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    margin-bottom: 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cm-primary);
    font-size: 12px; font-weight: 700;
}
.pro-flow-step__title { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: #fff; }
.pro-flow-step__text { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 12.5px; line-height: 1.5; }

/* ============================================================
   ACCESS BLOCK
   ============================================================ */
.pro-access {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pro-access-card {
    background: #fff; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius); padding: 18px;
    box-shadow: var(--pro-shadow-sm);
    display: flex; flex-direction: column; gap: 12px;
}
.pro-access-card.is-pro {
    background: linear-gradient(135deg, var(--pro-soft) 0%, var(--pro-soft-2) 100%);
    border-color: var(--pro-border-blue);
}
.pro-access-card__head { display: flex; align-items: center; gap: 10px; }
.pro-access-card__icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--pro-soft-2); color: var(--cm-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.pro-access-card.is-pro .pro-access-card__icon { background: var(--cm-primary); color: #fff; }
.pro-access-card__title { font-size: 16px; font-weight: 600; margin: 0; }
.pro-access-card__sub { font-size: 12px; color: var(--cm-muted); margin-top: 2px; }
.pro-access-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pro-access-card li { font-size: 13px; color: var(--cm-text); display: flex; gap: 8px; line-height: 1.45; }
.pro-access-card li i { color: var(--cm-primary); font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.pro-cta {
    position: relative; overflow: hidden;
    margin: 24px 0 16px;
    padding: 22px 24px;
    background: var(--pro-grad-primary);
    border-radius: var(--pro-radius);
    color: #fff;
    display: grid; grid-template-columns: 1fr auto;
    gap: 16px; align-items: center;
    box-shadow: var(--pro-shadow-blue);
}
.pro-cta::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
    pointer-events: none;
}
.pro-cta__title { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: #fff; }
.pro-cta__text { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 13px; line-height: 1.5; }
.pro-cta__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-cta__actions .pro-btn { background: #fff; color: var(--cm-primary); border-color: #fff; }
.pro-cta__actions .pro-btn:hover { background: var(--pro-soft-2); color: var(--cm-primary-dark); }
.pro-cta__actions .pro-btn.is-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.pro-cta__actions .pro-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.pro-empty {
    text-align: center; padding: 26px 14px;
    border: 1px dashed var(--pro-border-strong);
    border-radius: var(--pro-radius);
    background: var(--pro-bg);
}
.pro-empty__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--pro-soft-2); color: var(--cm-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 8px;
}
.pro-empty__title { font-weight: 500; color: var(--cm-text); margin-bottom: 4px; font-size: 14px; }
.pro-empty__text { font-size: 12.5px; color: var(--cm-muted); margin-bottom: 10px; line-height: 1.45; }

/* ============================================================
   ERROR PAGE
   ============================================================ */
.pro-error {
    max-width: 640px; margin: 40px auto;
    padding: 30px 24px; text-align: center;
    background: #fff; border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow);
}
.pro-error__code {
    display: inline-block; font-size: 56px; font-weight: 700;
    line-height: 1; letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--cm-primary), var(--cm-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pro-error__title { font-size: 22px; font-weight: 600; margin: 14px 0 6px; }
.pro-error__text { color: var(--cm-muted); margin: 0 0 18px; font-size: 14px; }

/* ============================================================
   HERO (compact + blueprint variant)
   ============================================================ */
.pro-landing { color: var(--cm-text); }

.pro-hero { padding: 14px 0 18px; }
.pro-hero__head {
    display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px;
}
.pro-hero__title { font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; margin: 0; }
.pro-hero__title span { color: var(--cm-primary); }
.pro-hero__sub { color: var(--cm-muted); font-size: 14px; margin: 0; max-width: 760px; line-height: 1.5; }
.pro-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 10px; padding: 5px 11px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--pro-border-blue);
    border-radius: 999px;
    color: var(--cm-primary); font-size: 12px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(14, 39, 71, 0.05);
}
.pro-hero__eyebrow i { font-size: 14px; }
.pro-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* simple page hero (used on most pages) */
.pro-pagehero {
    position: relative; overflow: hidden;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 90% 8%, rgba(var(--cm-accent-rgb), 0.18), transparent 38%),
        radial-gradient(circle at 8% 95%, rgba(var(--cm-primary-rgb), 0.10), transparent 40%),
        var(--pro-grad-soft);
    border: 1px solid var(--pro-border-blue);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow);
    margin-bottom: 16px;
}
.pro-pagehero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--pro-grad-accent);
    opacity: 0.85;
}
.pro-pagehero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pro-pagehero__title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; margin: 0; }
.pro-pagehero__sub { color: var(--cm-muted); font-size: 13.5px; margin: 4px 0 0; max-width: 720px; line-height: 1.5; }

/* blueprint hero (only used on landings, kept compact) */
.pro-hero--blueprint {
    position: relative; overflow: hidden;
    border-radius: var(--pro-radius-lg);
    padding: 28px;
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--cm-primary-rgb), 0.18), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(var(--cm-accent-rgb), 0.16), transparent 32%),
        var(--pro-grad-soft);
    border: 1px solid var(--pro-border-blue);
    box-shadow: 0 18px 50px rgba(14, 39, 71, 0.10);
}
.pro-hero--blueprint::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--cm-primary-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--cm-primary-rgb), 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18) 76%, transparent 100%);
    pointer-events: none;
}
.pro-hero--blueprint .pro-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 24px; align-items: center;
}
.pro-hero__content { min-width: 0; }
.pro-hero--blueprint .pro-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px; margin-top: 18px; max-width: 760px;
}

.pro-hero-visual {
    position: relative; min-height: 360px; padding: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(227, 238, 249, 0.6));
    border: 1px solid var(--pro-border-blue);
    border-radius: var(--pro-radius-lg);
    box-shadow: 0 18px 50px rgba(14, 39, 71, 0.10);
}
.pro-map-blueprint { position: absolute; inset: 16px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(197, 216, 242, 0.7); }
.pro-map-line { position: absolute; left: 18%; right: 16%; top: 47%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--cm-primary-rgb), 0.22), rgba(var(--cm-accent-rgb), 0.82), rgba(var(--cm-primary-rgb), 0.24)); transform: rotate(-12deg); }
.pro-map-line::before, .pro-map-line::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--cm-primary); box-shadow: 0 0 0 5px rgba(var(--cm-primary-rgb), 0.12); }
.pro-map-line::before { left: -3px; }
.pro-map-line::after { right: -3px; }
.pro-map-node { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--pro-border-blue); border-radius: 999px; color: var(--cm-text); font-size: 12px; font-weight: 600; box-shadow: 0 6px 18px rgba(14, 39, 71, 0.08); }
.pro-map-node i { color: var(--cm-primary); font-size: 13px; }
.pro-map-node.is-from { left: 7%; top: 44%; }
.pro-map-node.is-to { right: 7%; top: 28%; }
.pro-route-card, .pro-mini-card, .pro-visual-search { position: absolute; z-index: 2; background: rgba(255, 255, 255, 0.88); border: 1px solid var(--pro-border-blue); border-radius: var(--pro-radius); box-shadow: 0 14px 32px rgba(14, 39, 71, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pro-route-card { left: 22px; top: 22px; width: min(320px, calc(100% - 44px)); padding: 14px; }
.pro-route-card__top, .pro-mini-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pro-route-card__label, .pro-mini-card__label { display: inline-flex; align-items: center; gap: 5px; color: var(--cm-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.pro-route-card__badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; background: #e8f8ed; border: 1px solid rgba(31, 138, 58, 0.22); border-radius: 999px; color: #1f8a3a; font-size: 11px; font-weight: 600; }
.pro-route-card__route { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.pro-route-card__route i { color: var(--cm-primary); font-size: 15px; }
.pro-route-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.pro-mini-card { width: 220px; padding: 12px; }
.pro-mini-card.is-truck { right: 22px; top: 130px; }
.pro-mini-card.is-contact { left: 50px; bottom: 28px; }
.pro-mini-card__title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.pro-mini-card__text { margin: 5px 0 0; color: var(--cm-muted); font-size: 12.5px; line-height: 1.45; }
.pro-mini-card__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, var(--cm-primary), var(--cm-accent)); color: #fff; box-shadow: 0 8px 18px rgba(var(--cm-primary-rgb), 0.18); }
.pro-mini-card__icon i { font-size: 16px; }
.pro-visual-search { right: 22px; bottom: 28px; width: 240px; padding: 10px; }
.pro-visual-search__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; background: var(--pro-bg); border: 1px solid var(--pro-border-blue); border-radius: 999px; color: var(--cm-muted); font-size: 12px; font-weight: 600; }
.pro-visual-search__bar i { color: var(--cm-primary); font-size: 14px; }
.pro-search-wrap { position: relative; z-index: 5; margin-top: -28px; padding: 0 18px; }

/* ============================================================
   FOOTER (.pro-footer) — компактный
   ============================================================ */
.pro-footer {
    margin-top: 36px !important;
    padding: 22px 0 16px;
    background: linear-gradient(180deg, #ffffff 0%, var(--pro-soft) 100%);
    border-top: 1px solid var(--pro-border);
    color: var(--cm-text);
}
.pro-footer__inner {
    max-width: 1320px; margin: 0 auto; padding: 0 18px;
}
.pro-footer__top {
    display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
    gap: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--pro-border);
}
.pro-footer__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; text-decoration: none; }
.pro-footer__brand img { display: block; height: 32px; width: auto; }
.pro-footer__copy { color: var(--cm-muted); font-size: 13px; line-height: 1.55; max-width: 420px; margin: 0; }
.pro-footer__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pro-footer__chips span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: var(--pro-soft);
    border: 1px solid var(--pro-border);
    border-radius: 999px;
    color: var(--cm-text); font-size: 11.5px; font-weight: 500;
}
.pro-footer__chips i { color: var(--cm-primary); font-size: 13px; }
.pro-footer__title {
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cm-text); margin: 0 0 8px;
}
.pro-footer__nav { display: flex; flex-direction: column; gap: 5px; }
.pro-footer__nav a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--cm-muted); font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, transform 0.15s;
}
.pro-footer__nav a:hover { color: var(--cm-primary); transform: translateX(2px); }
.pro-footer__nav a i { color: var(--cm-primary); font-size: 14px; opacity: 0.85; }

.pro-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; padding-top: 14px;
}
.pro-footer__copyright { color: var(--cm-muted); font-size: 12.5px; }
.pro-footer__bottom-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-footer__bottom-actions a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    color: var(--cm-text); font-size: 12.5px; font-weight: 500;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius-sm);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pro-footer__bottom-actions a i { color: var(--cm-primary); font-size: 14px; opacity: 0.85; }
.pro-footer__bottom-actions a:hover { color: var(--cm-primary); border-color: var(--pro-border-blue); background: var(--pro-soft); }
.pro-footer__bottom-actions a.is-register { background: var(--cm-primary); color: #fff; border-color: var(--cm-primary); }
.pro-footer__bottom-actions a.is-register i { color: #fff; }
.pro-footer__bottom-actions a.is-register:hover { background: var(--cm-primary-dark); border-color: var(--cm-primary-dark); color: #fff; }

/* ============================================================
   ALERTS / breadcrumbs (Yii defaults compact)
   ============================================================ */
.cf-breadcrumbs { margin-bottom: 12px; font-size: 12.5px; }
.cf-breadcrumbs__list, .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; color: var(--cm-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 6px; color: var(--cm-muted); }
.breadcrumb-item a { color: var(--cm-primary); }
.breadcrumb-item.active { color: var(--cm-text); }

.alert {
    padding: 9px 12px; margin-bottom: 12px; border-radius: var(--pro-radius-sm);
    border: 1px solid var(--pro-border); background: #fff;
    font-size: 13px; color: var(--cm-text);
}
.alert-success, .alert.alert-success { background: #e9f7ec; border-color: #c2e8c9; color: #1f8a3a; }
.alert-danger,  .alert.alert-danger  { background: #ffe9ea; border-color: #f5c2c5; color: var(--cm-danger); }
.alert-warning, .alert.alert-warning { background: #fff5e6; border-color: #f1d6a2; color: #b87a14; }
.alert-info,    .alert.alert-info    { background: var(--pro-soft-2); border-color: var(--pro-border-blue); color: var(--cm-primary); }

/* ============================================================
   MODAL (compact Bootstrap override)
   ============================================================ */
.modal-content { border: 1px solid var(--pro-border); border-radius: var(--pro-radius); box-shadow: var(--pro-shadow); }
.modal-header { padding: 12px 16px; border-bottom: 1px solid var(--pro-border); }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 16px; }
.modal-footer { padding: 10px 16px; border-top: 1px solid var(--pro-border); display: flex; gap: 6px; justify-content: flex-end; }

/* ============================================================
   UTILITIES
   ============================================================ */
.pro-text-muted { color: var(--cm-muted); }
.pro-text-primary { color: var(--cm-primary); }
.pro-text-success { color: var(--cm-success); }
.pro-text-danger  { color: var(--cm-danger); }
.pro-text-center  { text-align: center; }
.pro-text-right   { text-align: right; }
.pro-mt-0  { margin-top: 0; }
.pro-mt-1  { margin-top: 6px; }
.pro-mt-2  { margin-top: 12px; }
.pro-mt-3  { margin-top: 18px; }
.pro-mt-4  { margin-top: 24px; }
.pro-mb-0  { margin-bottom: 0; }
.pro-mb-1  { margin-bottom: 6px; }
.pro-mb-2  { margin-bottom: 12px; }
.pro-mb-3  { margin-bottom: 18px; }
.pro-gap   { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-divider { height: 1px; background: var(--pro-border); margin: 14px 0; }

/* keep some Bootstrap utility classes in tight form */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-muted { color: var(--cm-muted); }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
    .pro-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-grid--sidebar { grid-template-columns: 1fr; }
    .pro-grid--detail  { grid-template-columns: 1fr; }
    .pro-sticky { position: static; }
    .pro-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
    .pro-market   { grid-template-columns: 1fr; }
    .pro-audience { grid-template-columns: 1fr; }
    .pro-access   { grid-template-columns: 1fr; }
    .pro-cta      { grid-template-columns: 1fr; }
    .pro-flow     { grid-template-columns: 1fr; }
    .pro-kpis     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-stats    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-form__grid--3, .pro-form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-list-hero { grid-template-columns: 1fr; }
    .pro-list-hero__visual { min-height: 112px; }
    .pro-info-vehicle { right: 96px; }
    .pro-cargo-box.is-one { left: 28%; }
    .pro-cargo-box.is-two { left: 42%; }
    .pro-cargo-box.is-three { left: 56%; }
}
@media (max-width: 767.98px) {
    .pro-hero--blueprint { padding: 22px 18px; }
    .pro-search-wrap { margin-top: -16px; padding: 0 12px; }
    .pro-hero-visual { min-height: 280px; padding: 14px; }
    .pro-map-blueprint { inset: 12px; }
    .pro-route-card { left: 12px; right: 12px; width: auto; top: 12px; }
    .pro-mini-card { width: auto; max-width: calc(100% - 24px); }
    .pro-mini-card.is-truck { top: auto; right: 12px; bottom: 78px; }
    .pro-mini-card.is-contact { left: 12px; bottom: 12px; }
    .pro-visual-search { display: none; }
    .pro-list-hero {
        min-height: 0;
        padding: 12px;
        margin-bottom: 10px;
    }
    .pro-list-hero::before { opacity: 0.55; }
    .pro-list-hero__visual { display: none; }
    .pro-list-hero__eyebrow { margin-bottom: 7px; padding: 4px 9px; font-size: 11.5px; }
    .pro-list-hero__title { font-size: 18px; }
    .pro-list-hero__sub { font-size: 12.5px; }
    .pro-list-hero__chips { gap: 6px; margin-top: 10px; }
    .pro-list-chip {
        flex: 1 1 calc(50% - 6px);
        padding: 7px 8px;
        font-size: 11.5px;
    }
    .pro-list-chip b { display: none; }
    .pro-footer__top { grid-template-columns: 1fr; }
    .pro-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .pro-hero--blueprint .pro-stats, .pro-roles, .pro-kpis, .pro-stats { grid-template-columns: 1fr; }
    .pro-form__grid--2, .pro-form__grid--3, .pro-form__grid--4 { grid-template-columns: 1fr; }
    .pro-row { grid-template-columns: 1fr; }
    .pro-row__right { align-items: flex-start; min-width: 0; flex-direction: row; gap: 8px; }
    .pro-cta { padding: 18px; }
    .pro-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .pro-dl dt { padding-top: 6px; }
}

/* ============================================================
   FORM BUILDER (3-col: side nav + panel + live preview)
   ============================================================ */
.pro-builder {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}
.pro-builder__nav {
    position: sticky; top: 80px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.pro-builder__nav-head {
    padding: 8px 10px 6px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cm-muted);
}
.pro-builder__nav-item {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pro-radius-sm);
    color: var(--cm-text);
    font: inherit; font-size: 13.5px; font-weight: 500;
    text-align: left; cursor: pointer; width: 100%;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pro-builder__nav-item:hover {
    background: var(--pro-soft);
    border-color: var(--pro-border);
    color: var(--cm-primary);
}
.pro-builder__nav-item.is-active {
    background: var(--pro-soft-2);
    color: var(--cm-primary);
    border-color: var(--pro-border-blue);
}
.pro-builder__nav-num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--pro-soft);
    color: var(--cm-muted);
    font-size: 12px; font-weight: 700;
}
.pro-builder__nav-item.is-active .pro-builder__nav-num {
    background: var(--cm-primary); color: #fff;
}
.pro-builder__nav-item.is-done .pro-builder__nav-num {
    background: #e9f7ec; color: #1f8a3a;
}
.pro-builder__nav-item.is-done .pro-builder__nav-num::after {
    content: "✓"; font-size: 14px;
}
.pro-builder__nav-item.is-done .pro-builder__nav-num > span { display: none; }
.pro-builder__nav-tick {
    color: var(--cm-success);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s;
}
.pro-builder__nav-item.is-done .pro-builder__nav-tick { opacity: 1; }

.pro-builder__main { min-width: 0; }

.pro-builder__panel {
    display: none;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    padding: 18px;
}
.pro-builder__panel.is-active { display: block; }
.pro-builder__panel-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pro-border);
}
.pro-builder__panel-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cm-primary);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    margin-bottom: 4px;
}
.pro-builder__panel-eyebrow i { font-size: 13px; }
.pro-builder__panel-title { font-size: 18px; font-weight: 600; margin: 0; }
.pro-builder__panel-sub { font-size: 13px; color: var(--cm-muted); margin: 4px 0 0; line-height: 1.5; }

.pro-builder__bar {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: var(--pro-radius);
    box-shadow: var(--pro-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pro-builder__bar-progress {
    display: flex; align-items: center; gap: 8px;
    color: var(--cm-muted); font-size: 12.5px;
    flex: 1; min-width: 200px;
}
.pro-builder__bar-progress-bar {
    flex: 1; height: 6px; background: var(--pro-soft);
    border-radius: 999px; overflow: hidden;
}
.pro-builder__bar-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cm-primary), var(--cm-accent));
    border-radius: 999px;
    transition: width 0.25s ease;
}
.pro-builder__bar-actions { display: flex; gap: 6px; }

.pro-builder__preview {
    position: sticky; top: 80px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--cm-primary-rgb), 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, var(--pro-bg) 100%);
    border: 1px solid var(--pro-border-blue);
    border-radius: var(--pro-radius-lg);
    box-shadow: var(--pro-shadow);
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.pro-builder__preview-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--pro-border);
}
.pro-builder__preview-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--cm-text);
}
.pro-builder__preview-title i { color: var(--cm-primary); font-size: 16px; }
.pro-builder__preview-section { display: flex; flex-direction: column; gap: 4px; }
.pro-builder__preview-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cm-muted);
}
.pro-builder__preview-label i { font-size: 12px; color: var(--cm-primary); }
.pro-builder__preview-value {
    font-size: 13.5px; font-weight: 500; color: var(--cm-text);
    line-height: 1.45; word-break: break-word;
}
.pro-builder__preview-value.is-muted {
    color: var(--cm-muted); font-style: italic; font-weight: 400;
}
.pro-builder__preview-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--cm-text);
}
.pro-builder__preview-row i { color: var(--cm-primary); font-size: 13px; }

.pro-builder__quick-tip {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px dashed var(--pro-border-blue);
    border-radius: var(--pro-radius-sm);
    font-size: 12px; color: var(--cm-muted);
    line-height: 1.45;
}
.pro-builder__quick-tip i {
    color: var(--cm-primary); font-size: 14px; margin-right: 4px; vertical-align: -2px;
}

.pro-builder__panel .pro-section__eyebrow {
    margin: 14px 0 8px;
}

@media (max-width: 1199.98px) {
    .pro-builder { grid-template-columns: 220px minmax(0, 1fr); }
    .pro-builder__preview { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767.98px) {
    .pro-builder { grid-template-columns: 1fr; }
    .pro-builder__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 6px;
    }
    .pro-builder__nav-head { display: none; }
    .pro-builder__nav-item {
        grid-template-columns: 22px auto;
        flex-shrink: 0;
        min-width: 130px;
        scroll-snap-align: start;
        padding: 7px 9px;
        font-size: 12.5px;
    }
    .pro-builder__nav-item .pro-builder__nav-tick { display: none; }
    .pro-builder__nav-num { width: 22px; height: 22px; font-size: 11px; }
    .pro-builder__panel { padding: 14px; }
}

/* ============================================================
   SELECT2 — стилизация под нашу дизайн-систему
   ============================================================ */
.select2-container--krajee-bs5,
.select2-container--default,
.select2-container--bootstrap-5 {
    width: 100% !important;
}

/* Сам "input" (selection box) — выглядит как .form-control */
.select2-container--krajee-bs5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: #fcfdff;
    border: 1px solid var(--pro-border-strong);
    border-radius: var(--pro-radius-sm);
    font-family: var(--ifura-font);
    font-size: 13px;
    color: var(--cm-text);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    padding: 0 32px 0 11px;
    color: var(--cm-text);
    font-weight: 500;
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9aa5b8;
    font-weight: 400;
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--cm-muted);
    font-size: 16px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    transition: color 0.12s;
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--cm-danger);
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    width: 28px;
    right: 4px;
    top: 0;
}
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--cm-muted) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}
.select2-container--krajee-bs5.select2-container--open .select2-selection--single .select2-selection__arrow b,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--cm-primary) transparent;
    border-width: 0 4px 5px 4px;
}

/* Focus и open — primary рамка с halo */
.select2-container--krajee-bs5.select2-container--focus .select2-selection,
.select2-container--krajee-bs5.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px rgba(var(--cm-primary-rgb), 0.12);
    background: #fff;
    outline: 0;
}

/* Invalid */
.has-error .select2-container--default .select2-selection--single,
.has-error .select2-container--krajee-bs5 .select2-selection,
.is-invalid + .select2-container .select2-selection {
    border-color: var(--cm-danger);
}

/* Dropdown */
.select2-container--default .select2-dropdown,
.select2-container--krajee-bs5 .select2-dropdown {
    background: #fff;
    border: 1px solid var(--pro-border);
    border-radius: 0;
    box-shadow: var(--pro-shadow);
    overflow: hidden;
    margin-top: 4px;
    font-family: var(--ifura-font);
}
.select2-container--default .select2-dropdown--above,
.select2-container--krajee-bs5 .select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
}

/* Search input в dropdown */
.select2-container--default .select2-search--dropdown,
.select2-container--krajee-bs5 .select2-search--dropdown {
    padding: 8px;
    background: var(--pro-soft);
    border-bottom: 1px solid var(--pro-border);
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--pro-border-strong);
    border-radius: var(--pro-radius-sm);
    font-size: 13px;
    color: var(--cm-text);
    box-shadow: none;
    outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px rgba(var(--cm-primary-rgb), 0.12);
}

/* Список результатов */
.select2-container--default .select2-results__options,
.select2-container--krajee-bs5 .select2-results__options {
    max-height: 320px;
    padding: 4px;
}
.select2-container--default .select2-results__option,
.select2-container--krajee-bs5 .select2-results__option {
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--cm-text);
    border-radius: var(--pro-radius-sm);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--krajee-bs5 .select2-results__option--highlighted {
    background: var(--pro-soft-2);
    color: var(--cm-primary);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--krajee-bs5 .select2-results__option--selected {
    background: var(--cm-primary);
    color: #fff;
    font-weight: 600;
}
.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__message,
.select2-container--krajee-bs5 .select2-results__message {
    color: var(--cm-muted);
    font-size: 13px;
    padding: 10px;
    text-align: center;
}

/* Кастомный шаблон элемента (city-s2__opt) */
.city-s2__opt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    gap: 1px;
}
.city-s2__name {
    font-weight: 500;
    color: inherit;
}
.city-s2__sub {
    font-size: 11.5px;
    color: var(--cm-muted);
    font-weight: 400;
}
.select2-results__option--highlighted .city-s2__sub,
.select2-results__option--selected .city-s2__sub {
    color: rgba(255, 255, 255, 0.85);
}
.select2-results__option--highlighted .city-s2__sub {
    color: var(--cm-muted);
}
.select2-results__option[aria-selected=true] .city-s2__sub,
.select2-results__option--selected .city-s2__sub {
    color: rgba(255, 255, 255, 0.85);
}

/* Disabled */
.select2-container--disabled .select2-selection {
    background: var(--pro-soft);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============================================================
   LOCKED CONTACTS — гостям показываем маски + CTA «Войти»
   ============================================================ */
.pro-card.is-locked {
    border-color: var(--pro-border-blue);
    background: linear-gradient(180deg, #fff 0%, var(--pro-soft) 100%);
}
.pro-dl.is-locked dd.is-masked {
    color: var(--cm-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    background: var(--pro-soft);
    border: 1px dashed var(--pro-border-strong);
    border-radius: var(--pro-radius-sm);
    padding: 4px 8px;
    display: inline-flex;
    width: fit-content;
    user-select: none;
    filter: blur(0.4px);
}

.pro-locked-cta {
    margin-top: 14px;
    padding: 18px 16px;
    background: var(--pro-grad-soft);
    border: 1px solid var(--pro-border-blue);
    border-radius: var(--pro-radius);
    text-align: center;
    box-shadow: var(--pro-shadow-sm);
}
.pro-locked-cta__icon {
    width: 42px; height: 42px;
    margin: 0 auto 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pro-grad-primary);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(var(--cm-primary-rgb), 0.28);
}
.pro-locked-cta__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cm-text);
    margin-bottom: 4px;
}
.pro-locked-cta__text {
    margin: 0 0 12px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 1.5;
}
.pro-locked-cta .pro-actions { gap: 8px; }

@media (max-width: 767.98px) {
    .pro-locked-cta { padding: 16px 14px; }
    .pro-locked-cta__title { font-size: 14px; }
    .pro-locked-cta__text { font-size: 12.5px; }
    .pro-locked-cta .pro-actions .pro-btn { flex: 1; min-height: 44px; }
}

/* ============================================================
   PRO-BTN: WhatsApp variant + loading spinner
   ============================================================ */
.pro-btn.is-wa { background: #25d366; border-color: #1ebe57; color: #fff; }
.pro-btn.is-wa:hover { background: #1ebe57; border-color: #1aa84e; color: #fff; }
.pro-btn.is-wa:disabled, .pro-btn.is-wa.is-loading { opacity: 1; cursor: progress; }

.pro-btn__spinner { display: none; font-size: 15px; line-height: 1; }
.pro-btn.is-loading { cursor: progress; }
.pro-btn.is-loading .pro-btn__label { display: none; }
.pro-btn.is-loading .pro-btn__spinner {
    display: inline-flex;
    animation: pro-wa-spin 0.7s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes pro-wa-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   WHATSAPP verify flow (cargo form)
   ============================================================ */
.pro-wa-feedback { font-size: 12px; margin-top: 4px; line-height: 1.4; }
.pro-wa-feedback.is-success { color: var(--cm-success); }
.pro-wa-feedback.is-error   { color: var(--cm-danger); }
.pro-wa-feedback.is-pending { color: var(--cm-muted); }

.pro-wa-verify { margin-top: 8px; animation: pro-wa-fade-in 0.18s ease-out; }
.pro-wa-verify__input { letter-spacing: 0.4em; font-weight: 600; text-align: center; font-size: 15px; }

.pro-wa-verified {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 5px 10px; border-radius: 999px;
    background: #e8f8ed; border: 1px solid rgba(31, 138, 58, 0.22);
    color: #1f8a3a; font-size: 12.5px; font-weight: 600;
    animation: pro-wa-fade-in 0.2s ease-out;
}
.pro-wa-verified i { font-size: 16px; }

@keyframes pro-wa-fade-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TRUCK CONSTRUCTION OPTIONS (transport form)
   ============================================================ */
.pro-truck-options {
    display: flex; flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--pro-border);
    padding-top: 8px;
}
.pro-truck-option {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px;
    margin: 0;
    border-radius: var(--pro-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.pro-truck-option:hover { background: var(--pro-soft); }

.pro-truck-option > input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px;
    margin: 0; padding: 0;
    border: 2px solid var(--pro-border-strong);
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s;
}
.pro-truck-option > input[type="radio"]:checked {
    border-color: var(--cm-primary);
}
.pro-truck-option > input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--cm-primary);
}

.pro-truck-option__label {
    flex: 1; min-width: 0;
    color: var(--cm-muted);
    font-size: 14px; font-weight: 500;
    transition: color 0.15s;
}
.pro-truck-option > input[type="radio"]:checked + .pro-truck-option__label {
    color: var(--cm-primary);
    font-weight: 600;
}

.pro-truck-option__icon {
    flex-shrink: 0;
    width: 44px; height: 17px;
    color: #8a9aae;
    transition: color 0.15s;
}
.pro-truck-option > input[type="radio"]:checked ~ .pro-truck-option__icon {
    color: var(--cm-primary);
}