/* ===========================================================================
   B2B module: partner cabinet, authentication, car-page actions.
   Palette follows the site brand (#e2001a) and the card styling of the
   "Pret Moldova" table (parsing_pricing.php) so the module does not look bolted on.
   =========================================================================== */

:root{
    --b2b-brand:#e2001a;
    --b2b-brand-dark:#b30015;
    --b2b-ink:#191919;
    --b2b-muted:#6b6b6b;
    --b2b-line:#e8e8e8;
    --b2b-bg:#fafafa;
    --b2b-ctrl-h:50px;      /* one height for every form control + submit */
}

.b2b-page{
    max-width:560px;
    margin:2.5rem auto 4rem;
    padding:0 1rem;
    color:var(--b2b-ink);
    font-size:1rem;
    line-height:1.5;
}

.b2b-page--wide{ max-width:none; }
@media (min-width:769px){
    .b2b-page--wide{ padding-left:0; padding-right:0; }
}

/* Registration on desktop: a wider (but capped) centered card. Person type takes
   a full row, the remaining fields sit two per row. Same breakpoint as the burger
   menu inverse, so it flips with the header. Mobile keeps the single-column card. */
@media (min-width:1000px) and (orientation:landscape){
    .b2b-page--form{ max-width:760px; --b2b-ctrl-h:44px; }
    .b2b-page--form .b2b-card{ padding:1.75rem 2.25rem; }

    /* .b2b-field-row becomes transparent so every field is a direct grid item;
       the markup stays shared with the mobile layout. */
    .b2b-page--form .b2b-form{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:.65rem 1.1rem;
        align-items:start;
    }
    .b2b-page--form .b2b-field-row{ display:contents; }
    /* A row left with a single field (the name, since signup dropped the login)
       spans both columns instead of pairing up with whatever follows it. */
    .b2b-page--form .b2b-field-row > .b2b-field:only-child{ grid-column:1 / -1; }

    /* Person type is the only field outside a .b2b-field-row, so a child
       selector is enough to give it the full row. */
    .b2b-page--form .b2b-form > .b2b-field{ grid-column:1 / -1; }

    /* Full-width rows: messages, the submit button and the footer link. */
    .b2b-page--form .b2b-form__msg,
    .b2b-page--form .b2b-form > button,
    .b2b-page--form .b2b-form__foot{ grid-column:1 / -1; }

    /* A full-width button across the card looks broken; keep it centred. */
    .b2b-page--form .b2b-btn--block{ width:auto; min-width:320px; justify-self:center; }
}

/* ------------------------------------------------------------------ cards */

.b2b-card{
    background:#fff;
    border:1px solid #efefef;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(20,20,40,.07);
    padding:1.6rem 1.6rem 1.5rem;
}
.b2b-card__head{ margin-bottom:1.75rem; text-align:center; }
.b2b-card__ttl{
    margin:0 0 .5rem;
    font-size:1.5rem; font-weight:700; line-height:1.25;
}
.b2b-card__sub{ margin:0; color:var(--b2b-brand); font-size:1.05rem; line-height:1.4; }

/* ------------------------------------------------------------------- form */

.b2b-form{ display:flex; flex-direction:column; gap:1.1rem; }
.b2b-field{ display:flex; flex-direction:column; gap:.35rem; flex:1 1 0; min-width:0; }
.b2b-field-row{ display:flex; gap:1rem; flex-wrap:wrap; }

.b2b-field label,
.b2b-field__lbl,
.b2b-actions__label{
    font-size:.82rem; font-weight:600;
    color:var(--b2b-muted);
    text-transform:uppercase; letter-spacing:.3px;
}

/* Person type: two pill choices instead of a select, so both are visible. */
.b2b-radios{ display:flex; gap:.6rem; flex-wrap:wrap; }
.b2b-radio{
    box-sizing:border-box;
    /* Basis wide enough for the longest label ("Юридическое лицо"): where two of
       them no longer fit side by side, the line wraps and each option takes the
       full width — instead of squeezing the text out of its box. */
    flex:1 1 13rem; min-width:0;
    min-height:var(--b2b-ctrl-h);
    display:flex; align-items:center; gap:.5rem;
    /* Small enough that one line stays exactly --b2b-ctrl-h, like every other
       control; it only matters when a long label wraps to two lines. */
    padding:.3rem .9rem;
    border:1.5px solid var(--b2b-line);
    border-radius:10px;
    background:#fff;
    cursor:pointer;
    transition:border-color .15s, background .15s;
}
.b2b-radio input[type="radio"]{
    /* `.b2b-field input` below styles every input in a field, including this one:
       reset the parts that would turn the radio circle into a full-size control.
       `height` matters most — without it the radio is --b2b-ctrl-h tall and drags
       its whole label box past the height of the other fields. */
    flex:0 0 auto; width:auto; height:auto; margin:0; padding:0;
    border:0; border-radius:0; background:none; box-shadow:none;
    accent-color:var(--b2b-accent, #e2001a);
}
/* No nowrap: on the narrowest phones the label wraps inside its box rather than
   overflowing it. */
.b2b-radio span{ font-size:.95rem; font-weight:600; line-height:1.2; }
.b2b-radio:hover{ border-color:var(--b2b-muted); }
.b2b-radio:has(input:checked){ border-color:var(--b2b-accent, #e2001a); background:#fff5f6; }
.b2b-radio input[type="radio"]:focus{ outline:none; box-shadow:none; border:0; }
.b2b-radio:focus-within{ border-color:var(--b2b-accent, #e2001a); box-shadow:0 0 0 3px rgba(226,0,26,.12); }
.b2b-field input,
.b2b-field select,
.b2b-actions__amount input,
.b2b-actions__amount select{
    box-sizing:border-box;
    width:100%;
    height:var(--b2b-ctrl-h);
    padding:0 .9rem;
    border:1.5px solid var(--b2b-line);
    border-radius:10px;
    background:#fff;
    font-family:inherit; font-size:1rem; color:var(--b2b-ink);
    transition:border-color .15s, box-shadow .15s;
}
.b2b-field input:focus,
.b2b-field select:focus,
.b2b-actions__amount input:focus,
.b2b-actions__amount select:focus{
    outline:none;
    border-color:var(--b2b-brand);
    box-shadow:0 0 0 3px rgba(226,0,26,.12);
}
.b2b-field input.is-invalid{ border-color:var(--b2b-brand); background:#fff7f8; }
.b2b-hint{ color:#9a9a9a; font-size:.76rem; }

/* Amount field with a fixed MDL suffix (the document is always issued in lei). */
.b2b-money{ position:relative; display:block; }
.b2b-money input{ padding-right:3.4rem; }
.b2b-money input::-webkit-outer-spin-button,
.b2b-money input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.b2b-money input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.b2b-money__cur{
    position:absolute; top:0; right:0; height:100%;
    display:flex; align-items:center; padding:0 .9rem;
    font-weight:800; font-size:.9rem; color:var(--b2b-muted, #8a8a8a);
    pointer-events:none;
}

/* Password field: eye toggle to show/hide the value. */
.b2b-pass-wrap{ position:relative; display:block; }
.b2b-pass-wrap input{ padding-right:2.7rem; }
.b2b-pass-toggle{
    position:absolute; top:0; right:.25rem; height:100%;
    display:flex; align-items:center; justify-content:center;
    width:2.3rem; padding:0;
    border:0; background:none; cursor:pointer; color:var(--b2b-muted);
    transition:color .15s;
}
.b2b-pass-toggle:hover{ color:var(--b2b-ink); }
.b2b-pass-toggle:focus-visible{ outline:2px solid var(--b2b-brand); outline-offset:2px; border-radius:6px; }
.b2b-pass-toggle .b2b-eye{ width:20px; height:20px; display:block; }
.b2b-pass-toggle .ico-eye-off{ display:none; }
.b2b-pass-toggle.is-on .ico-eye{ display:none; }
.b2b-pass-toggle.is-on .ico-eye-off{ display:block; }
/* Phone field: fixed +373 prefix glued to the national number. */
.b2b-phone{ display:flex; align-items:stretch; height:var(--b2b-ctrl-h); }
.b2b-phone__dial{
    display:flex; align-items:center;
    padding:0 .5rem 0 .9rem;
    border:1.5px solid var(--b2b-line); border-right:none;
    border-radius:10px 0 0 10px;
    background:#fafafa;
    font-size:1rem; font-weight:600; color:var(--b2b-muted);
    white-space:nowrap; user-select:none;
}
.b2b-phone input{
    border-top-left-radius:0; border-bottom-left-radius:0;
    border-left:none; min-width:0;
    letter-spacing:.02em;
}

/* The focus ring wraps the whole control, not just the input. */
.b2b-phone:focus-within{ border-radius:10px; box-shadow:0 0 0 3px rgba(226,0,26,.12); }
.b2b-phone:focus-within .b2b-phone__dial,
.b2b-phone:focus-within input{ border-color:var(--b2b-brand); }
.b2b-phone:focus-within input{ box-shadow:none; }

.b2b-form__msg{ display:none; font-size:.88rem; border-radius:10px; padding:.7rem .9rem; }
.b2b-form__msg.is-error{ display:block; background:#fdeef0; color:#b30015; }
.b2b-form__msg.is-ok{ display:block; background:#eafaf0; color:#0f7a3d; }

.b2b-form__foot{ margin:.25rem 0 0; text-align:center; font-size:.9rem; color:var(--b2b-muted); }
.b2b-form__foot a{ color:var(--b2b-brand); font-weight:600; text-decoration:none; }
.b2b-form__foot a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------- buttons */

.b2b-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    box-sizing:border-box; /* so a width:100% button stays inside its panel */
    padding:.8rem 1.5rem;
    border:1.5px solid transparent; border-radius:10px;
    font-family:inherit; font-size:.95rem; font-weight:600; line-height:1;
    text-decoration:none; cursor:pointer;
    transition:background .15s, color .15s, transform .1s, box-shadow .15s;
}
.b2b-btn--primary{ background:var(--b2b-brand); color:#fff; }
.b2b-btn--primary:hover{ background:var(--b2b-brand-dark); }
.b2b-btn--ghost{ background:#fff; border-color:var(--b2b-line); color:var(--b2b-ink); }
.b2b-btn--ghost:hover{ border-color:var(--b2b-brand); color:var(--b2b-brand); }
.b2b-btn--icon{ padding:.8rem 1rem; background:#fff; border-color:var(--b2b-line); color:#c9a227; font-size:1.05rem; }
.b2b-btn--icon.is-saved{ background:#fffbe8; border-color:#e8cf6a; }
.b2b-btn--block{ width:100%; height:var(--b2b-ctrl-h); }
.b2b-btn--sm{ padding:.5rem 1rem; font-size:.85rem; }
.b2b-btn:active{ transform:translateY(1px); }
.b2b-btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }

.b2b-link{
    background:none; border:none; padding:0;
    color:var(--b2b-brand); font-family:inherit; font-size:.88rem; font-weight:600;
    cursor:pointer; text-decoration:underline;
}
.b2b-link[disabled]{ color:#b0b0b0; cursor:not-allowed; text-decoration:none; }

/* ----------------------------------------------------------- success / OTP */

.b2b-success{ text-align:center; padding:1rem 0; }
.b2b-success__ico{
    width:64px; height:64px; margin:0 auto 1.25rem;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#eafaf0; color:#0f7a3d; font-size:2rem;
}
.b2b-success__ttl{ margin:0 0 .75rem; font-size:1.25rem; font-weight:700; }
.b2b-success__txt{ margin:0 0 1.75rem; color:var(--b2b-muted); }


/* -------------------------------------------------- cabinet hero + nav cards */

/* Hero: a normal block (NOT a <header>, which the site-wide header{} rule would
   hijack with an 80vw width + 10vw margin). Avatar + greeting + name + status. */
.b2b-hero{
    display:flex; flex-direction:row; align-items:center; gap:1.5rem; flex-wrap:wrap;
    padding:1.2rem 1.6rem;
    background:#fff; border:1px solid #efefef; border-radius:20px;
    box-shadow:0 12px 34px rgba(20,20,40,.08);
}
.b2b-hero__id{ display:flex; align-items:center; gap:1rem; min-width:0; flex:0 1 auto; }
.b2b-hero__avatar{
    flex:0 0 auto; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #e2001a, #a1000f); color:#fff;
    font-weight:800; font-size:1.2rem; letter-spacing:.02em;
    box-shadow:0 6px 16px rgba(226,0,26,.30);
}
.b2b-hero__text{ min-width:0; flex:1 1 auto; }
/* Greeting left, change-password button right, on one line. */
.b2b-hero__toprow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.15rem; }
.b2b-hero__greet{ margin:0; color:var(--b2b-muted); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.b2b-hero__name{ margin:0 0 .5rem; font-size:1.55rem; font-weight:800; line-height:1.05; letter-spacing:-.01em; }

/* Nav cards double as section counters (Cars / Requests / Invoices). They sit on
   the same row as the identity (taking the remaining width), flat segments so it
   does not read as card-in-card. */
.b2b-nav{ flex:1 1 380px; display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; }
.b2b-navcard{
    display:flex; align-items:center; gap:.95rem;
    padding:.85rem 1rem;
    background:#fafafb; border:1px solid #eef0f3; border-radius:14px;
    text-decoration:none; color:var(--b2b-ink);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.b2b-navcard:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,20,40,.10); }
.b2b-navcard.is-active{ background:#fff; border-color:var(--b2b-brand); box-shadow:0 8px 22px rgba(226,0,26,.14); }
.b2b-navcard__ico{
    flex:0 0 auto; width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background:#fff1f2; color:var(--b2b-brand);
    transition:background .15s ease, color .15s ease;
}
.b2b-navcard.is-active .b2b-navcard__ico{ background:var(--b2b-brand); color:#fff; }
.b2b-navcard__ico svg{ width:22px; height:22px; }
.b2b-navcard__meta{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.b2b-navcard__num{ font-size:1.4rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.b2b-navcard__label{ color:var(--b2b-muted); font-size:.82rem; font-weight:600; }

/* Desktop: the button sits above the hero card, right-aligned with its edge —
   lifted out of the flow, with room reserved by the card's own top margin so it
   cannot collide with whatever precedes it on the page. */
@media (min-width:769px){
    .b2b-hero{ position:relative; margin-top:2.8rem; }
    .b2b-hero__pw{ position:absolute; bottom:calc(100% + .55rem); right:0; }
}

@media (max-width:768px){
    .b2b-nav{ grid-template-columns:1fr; }
    .b2b-hero{ padding:1.1rem 1.2rem; }
    .b2b-hero__name{ font-size:1.35rem; }
    /* Identity takes the whole row, so the button reaches the right edge next to
       the greeting instead of hugging it. */
    .b2b-hero__id{ flex:1 1 100%; }
}

.b2b-chips{ display:inline-flex; gap:.35rem; flex-wrap:wrap; }
.b2b-chip{
    display:inline-block; padding:.22rem .65rem;
    border-radius:999px; background:#f2f4f7; color:#42484f;
    font-size:.78rem; font-weight:600;
}
.b2b-chip--muted{ color:#9a9a9a; }

.b2b-badge{
    display:inline-block; padding:.22rem .7rem;
    border-radius:999px; font-size:.78rem; font-weight:700;
    background:#f2f4f7; color:#42484f;
}
.b2b-badge--active,
.b2b-badge--approved,
.b2b-badge--paid{ background:#eafaf0; color:#0f7a3d; }
.b2b-badge--pending,
.b2b-badge--new,
.b2b-badge--issued{ background:#fff6e6; color:#96650a; }
.b2b-badge--blocked,
.b2b-badge--rejected,
.b2b-badge--cancelled{ background:#fdeef0; color:#b30015; }
.b2b-badge--seen,
.b2b-badge--sent{ background:#eaf1fd; color:#1b4f9c; }

/* ------------------------------------------------------------------- tabs */

.b2b-tabs{ display:flex; justify-content:center; gap:.4rem; margin:1.5rem 0 1rem; flex-wrap:wrap; }
.b2b-tab{
    padding:.6rem 1.15rem;
    border:1.5px solid var(--b2b-line); border-radius:999px;
    background:#fff; color:var(--b2b-ink);
    font-size:.9rem; font-weight:600; text-decoration:none;
    transition:background .15s, color .15s, border-color .15s;
}
.b2b-tab:hover{ border-color:var(--b2b-brand); color:var(--b2b-brand); }
.b2b-tab.is-active{ background:var(--b2b-brand); border-color:var(--b2b-brand); color:#fff; }

.b2b-panel{ min-height:220px; display:flow-root; }  /* contains the .gr float from the cars grid */

.b2b-form__foot--forgot{ margin-bottom:.35rem; }

/* "Change password" toggle button, on the greeting line of the hero. */
.b2b-hero__pw{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.34rem .7rem;
    background:#fafafb; border:1px solid #eef0f3; border-radius:9px;
    color:var(--b2b-muted); font-size:.8rem; font-weight:600; cursor:pointer;
    transition:background .15s, color .15s, border-color .15s;
}
.b2b-hero__pw:hover, .b2b-hero__pw.is-open{ background:#fff; color:var(--b2b-brand); border-color:var(--b2b-brand); }
.b2b-hero__pw svg{ width:15px; height:15px; }

.b2b-legend{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }

/* -------------------------------------------------------- empty / tables */

.b2b-empty{
    padding:3rem 1.5rem; text-align:center;
    background:#fff; border:1px dashed var(--b2b-line); border-radius:18px;
    color:var(--b2b-muted);
}
.b2b-empty p{ margin:0 0 1.25rem; }

/* Tables scroll on their own; the page must never scroll sideways. */
.b2b-table-wrap{
    /* Match the saved-cars grid gap from the hero (its .it cards use margin:1rem 0),
       so the invoices table isn't glued to the hero. */
    margin-top:1rem;
    overflow-x:auto;
    background:#fff; border:1px solid #efefef; border-radius:18px;
    box-shadow:0 10px 30px rgba(20,20,40,.07);
}
.b2b-table{ width:100%; border-collapse:collapse; min-width:680px; }
.b2b-table th,
.b2b-table td{ padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid #f2f2f2; font-size:.9rem; }
.b2b-table th{
    color:var(--b2b-muted); font-size:.75rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px; background:#fafafa;
}
.b2b-table tbody tr:last-child td{ border-bottom:none; }
.b2b-table tbody tr:hover{ background:#fdfdfd; }
.b2b-table a{ color:var(--b2b-brand); text-decoration:none; }
.b2b-table a:hover{ text-decoration:underline; }
.b2b-td--strong{ font-weight:700; white-space:nowrap; }
.b2b-td--wrap{ max-width:320px; }

/* Mobile: each invoice becomes a card — invoice number + status pill on top, the
   details as tight "LABEL  value" rows, and a full-width open button. Cells are
   placed with grid, independent of their source order. */
@media (max-width:700px){
    .b2b-table-wrap{ overflow:visible; background:none; border:0; box-shadow:none; border-radius:0; }
    .b2b-table{ min-width:0; }
    .b2b-table thead{ display:none; }
    .b2b-table tbody{ display:block; }
    .b2b-table tr{
        display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:.8rem;
        background:#fff; border:1px solid #eef0f3; border-radius:16px;
        padding:1rem 1.15rem; margin-bottom:.9rem;
        box-shadow:0 6px 20px rgba(20,20,40,.06);
    }
    .b2b-table td{ display:block; padding:0; border:0; text-align:left; white-space:normal; }
    .b2b-table td::before{ content:none; }
    /* header: invoice no (title) + status pill */
    .b2b-table td:nth-child(1){ grid-row:1; grid-column:1; font-weight:800; font-size:1.08rem; }
    .b2b-table td:nth-child(4){ grid-row:1; grid-column:2; justify-self:end; }
    /* body rows: label on the left, its value aligned to the right. */
    .b2b-table td:nth-child(2), .b2b-table td:nth-child(3), .b2b-table td:nth-child(5){
        grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:.15rem .8rem;
        align-items:baseline; padding:.5rem 0; border-top:1px solid var(--b2b-line);
        text-align:right;
    }
    .b2b-table td:nth-child(2){ grid-row:2; margin-top:.7rem; }
    .b2b-table td:nth-child(3){ grid-row:3; font-weight:800; }
    .b2b-table td:nth-child(5){ grid-row:4; }
    .b2b-table td:nth-child(2)::before,
    .b2b-table td:nth-child(3)::before,
    .b2b-table td:nth-child(5)::before{
        content:attr(data-label); justify-self:start; text-align:left; color:var(--b2b-muted);
        font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.5px; padding-top:.15rem;
    }
    .b2b-table td:nth-child(2) a{ text-decoration:underline; text-underline-offset:2px; }
    /* footer: full-width open button */
    .b2b-table td.b2b-td--action{ grid-row:5; grid-column:1 / -1; margin-top:.85rem; }
    .b2b-table td.b2b-td--action .b2b-btn{ display:block; width:100%; text-align:center; padding:.7rem; font-size:.95rem; }
    .b2b-td--strong{ white-space:normal; }
}

/* -------------------------------------------------------------- timeline */

.b2b-timeline{
    list-style:none; margin:0; padding:1.5rem 1.75rem;
    background:#fff; border:1px solid #efefef; border-radius:18px;
    box-shadow:0 10px 30px rgba(20,20,40,.07);
}
.b2b-timeline__item{ display:flex; gap:1rem; padding:.7rem 0; border-bottom:1px solid #f5f5f5; }
.b2b-timeline__item:last-child{ border-bottom:none; }
.b2b-timeline__dot{
    flex:0 0 9px; width:9px; height:9px; margin-top:.5rem;
    border-radius:50%; background:var(--b2b-brand);
}
.b2b-timeline__body{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; flex:1; }
.b2b-timeline__action{ font-weight:600; font-size:.9rem; }
.b2b-timeline__link{ color:var(--b2b-brand); font-size:.85rem; text-decoration:none; }
.b2b-timeline__time{ margin-left:auto; color:#a0a0a0; font-size:.8rem; white-space:nowrap; }

/* -------------------------------------------- car page action panel ------ */

/* Sits inside .doit on the car page, replacing the call/WhatsApp buttons.
   On desktop those are floated, so clear before rendering.
   On mobile cars_gallery.css turns .doit into a `nowrap` flex row built for
   those two side-by-side buttons. A flex item is sized by its content, so the
   panel would shrink to its text and sit pushed to the left — narrower on the
   variant with the shorter hint. Take a full line of the row instead. */
.doit > .b2b-actions{ clear:both; width:100%; flex:0 0 100%; }
main > .spc_bx > .doit:has(> .b2b-actions){ flex-wrap:wrap; }

.b2b-actions{
    margin:0;
    padding:1.25rem 1.5rem 1.5rem;
    /* Branded, eye-catching panel so a logged-in partner spots the reserve
       action immediately against the otherwise white car page. */
    background:linear-gradient(150deg, #fff5f6 0%, #ffe9ec 100%);
    border:1.5px solid rgba(226,0,26,.28);
    border-radius:18px;
    box-shadow:0 12px 34px rgba(226,0,26,.14);
    box-sizing:border-box;
    font-size:1rem; color:#191919;
}
.b2b-actions__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.b2b-actions__badge{
    padding:.2rem .6rem; border-radius:999px;
    background:#eafaf0; color:#0f7a3d;
    font-size:.72rem; font-weight:800; letter-spacing:.4px;
}
.b2b-actions__company{ color:#6b6b6b; font-size:.85rem; font-weight:600; }
.b2b-actions__ttl{ margin:0; font-size:1.15rem; font-weight:800; line-height:1.2; color:#191919; }
.b2b-actions__hint{ margin:0 0 1rem; color:#6b6b6b; font-size:.9rem; line-height:1.35; }

/* Advance figure: "Аванс  70 800 MDL" with a small "10% of the car price" note. */
.b2b-actions__adv{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem;
    margin:0 0 1.1rem; padding:.7rem .9rem;
    background:#fff; border:1px solid rgba(226,0,26,.18); border-radius:12px;
}
.b2b-actions__adv-lbl{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--b2b-muted); }
.b2b-actions__adv-val{ font-size:1.2rem; font-weight:800; color:var(--b2b-brand); line-height:1; }
.b2b-actions__adv-note{ flex-basis:100%; font-size:.82rem; color:var(--b2b-muted); }
.b2b-actions__cta{ width:100%; }
.b2b-actions__row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }

/* Payment-invoice form page (/b2b/cont-plata). */
.b2b-cp{ max-width:640px; }
.b2b-cp-back{ display:inline-block; margin-bottom:.9rem; color:var(--b2b-muted); font-size:.9rem; font-weight:600; text-decoration:none; }
.b2b-cp-back:hover{ color:var(--b2b-brand); }
.b2b-cp-sec{ margin:1.5rem 0 .1rem; padding-bottom:.35rem; border-bottom:1px solid var(--b2b-line); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--b2b-brand); }
.b2b-cp-lock{ width:13px; height:13px; fill:currentColor; vertical-align:-2px; margin-right:.4rem; opacity:.8; }
.b2b-cp-note{ margin:.85rem 0 0; text-align:center; color:var(--b2b-muted); font-size:.82rem; line-height:1.4; }

/* Locked fields: only the buyer section is editable, so the document + car
   fields are read-only and clearly greyed out (no info text, just the effect). */
.b2b-cp .b2b-field input[readonly]{
    background:#f1f1f4;
    color:var(--b2b-muted);
    border-color:var(--b2b-line);
    cursor:not-allowed;
}
.b2b-cp .b2b-field input[readonly]:focus{ border-color:var(--b2b-line); box-shadow:none; }
.b2b-cp .b2b-money:has(input[readonly]) .b2b-money__cur{ color:#b8b8bf; }
.b2b-actions__amount{ display:flex; gap:.6rem; }
.b2b-actions__amount input{ flex:1 1 auto; min-width:0; }
.b2b-actions__amount select{ flex:0 0 6.5rem; }
.b2b-actions__btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.b2b-actions__btns .b2b-btn{ flex:1 1 auto; }
.b2b-actions__btns .b2b-btn--icon{ flex:0 0 auto; }
.b2b-actions__msg{ display:none; margin-top:.9rem; padding:.7rem .9rem; border-radius:10px; font-size:.88rem; }
.b2b-actions__msg.is-error{ display:block; background:#fdeef0; color:#b30015; }
.b2b-actions__msg.is-ok{ display:block; background:#eafaf0; color:#0f7a3d; }
.b2b-actions__msg a{ color:inherit; font-weight:700; }

/* ------------------------------------------------------------------ modal */

.b2b-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.b2b-modal[hidden]{ display:none; }
/* Lock the page scroll while a modal is open (class set on <html> by b2b.js). */
.b2b-modal-open{ overflow:hidden; }
.b2b-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.b2b-modal__box{
    position:relative; width:100%; max-width:460px;
    padding:1.75rem; background:#fff; border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.b2b-modal__ttl{ margin:0 0 .5rem; font-size:1.15rem; font-weight:700; }
.b2b-modal__hint{ margin:0 0 1rem; color:#6b6b6b; font-size:.88rem; }
.b2b-modal__comment{
    width:100%; padding:.75rem .9rem;
    border:1.5px solid #e8e8e8; border-radius:10px;
    font-family:inherit; font-size:.95rem; resize:vertical;
}
.b2b-modal__comment:focus{ outline:none; border-color:#e2001a; box-shadow:0 0 0 3px rgba(226,0,26,.12); }
.b2b-modal__check{ display:flex; align-items:center; gap:.5rem; margin:.9rem 0 1.25rem; font-size:.88rem; color:#6b6b6b; }
.b2b-modal__btns{ display:flex; gap:.6rem; justify-content:flex-end; }
/* Close (×) button, top-right of the modal box. */
.b2b-modal__x{
    position:absolute; top:.55rem; right:.6rem;
    width:32px; height:32px; padding:0; border:0; border-radius:8px;
    background:transparent; color:#9a9a9a; font-size:24px; line-height:1; cursor:pointer;
    transition:background .15s, color .15s;
}
.b2b-modal__x:hover{ background:#f4f4f4; color:#111; }

/* ----------------------------------------------------------- restricted */

.b2b-restricted{
    max-width:560px; margin:4rem auto; padding:3rem 2rem;
    background:#fff; border:1px solid #efefef; border-radius:18px;
    box-shadow:0 10px 30px rgba(20,20,40,.07);
    text-align:center; color:#191919;
}
.b2b-restricted__ico{ font-size:3rem; line-height:1; margin-bottom:1rem; }
.b2b-restricted__ttl{ margin:0 0 .75rem; font-size:1.4rem; font-weight:700; }
.b2b-restricted__txt{ margin:0 0 1.75rem; color:#6b6b6b; }

/* ---------------------------------------------------------- header link */

.b2b-nav-link{ display:inline-flex; align-items:center; gap:.35rem; }

/* Header button, desktop only: outlined so it does not compete with the filled
   "call" CTA sitting next to it. */
.b2b-header-btn{
    box-sizing:border-box;
    display:inline-flex; align-items:center; gap:.45rem;
    margin-left:.75rem; height:40px; padding:0 1.15rem;
    border:1.5px solid #e2001a; border-radius:999px;
    color:#e2001a; background:#fff;
    font-size:.92rem; font-weight:700; line-height:1.2;
    text-decoration:none; white-space:nowrap;
    transition:background .15s, color .15s, box-shadow .15s;
}
.b2b-header-btn:hover{ background:#e2001a; color:#fff; box-shadow:0 6px 16px rgba(226,0,26,.25); }
.b2b-header-btn.is-active{ background:#e2001a; color:#fff; }

/* Secondary auth action shown for guests: a plain text link before the outlined
   "register" pill, so the pair reads as login | register without two competing
   buttons. Desktop only, like .b2b-header-btn. */
.b2b-header-login{
    box-sizing:border-box;
    display:inline-flex; align-items:center;
    margin-left:.75rem; height:40px; padding:0 .45rem;
    color:#e2001a; background:transparent;
    font-size:.92rem; font-weight:700; line-height:1.2;
    text-decoration:none; white-space:nowrap;
    transition:color .15s, opacity .15s;
}
.b2b-header-login:hover{ text-decoration:underline; }
.b2b-header-login.is-active{ text-decoration:underline; text-underline-offset:3px; }

/* "Fly to cabinet": the red heart flies from the card to the cabinet button (the
   floating one while scrolled, the header one at the top) on save. No shrink. */
.fav-fly{
    position:fixed; z-index:99999; pointer-events:none;
    transition:transform 1.1s cubic-bezier(.45,-0.05,.25,1), opacity 1.1s ease;
    will-change:transform, opacity;
}
.fav-fly svg{ width:100%; height:100%; display:block; fill:#e2001a; filter:drop-shadow(0 4px 10px rgba(226,0,26,.45)); }
/* Stroked variant (e.g. the "compare" balance icon), which must not be filled. */
.fav-fly--stroke svg{ fill:none; stroke:#e2001a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes b2bCartBump{ 0%{transform:scale(1)} 30%{transform:scale(1.22)} 55%{transform:scale(.9)} 100%{transform:scale(1)} }
.b2b-cart-bump{ animation:b2bCartBump .5s ease; }
@media (prefers-reduced-motion:reduce){ .fav-fly{ display:none; } .b2b-cart-bump{ animation:none; } }

/* Logged-in variant: an initials avatar (like the hero) sits before the label. */
.b2b-header-btn--user{ padding-left:.35rem; }
.b2b-header-btn__avatar{
    box-sizing:border-box; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:29px; height:29px; border-radius:50%;
    background:#e2001a; color:#fff;
    font-weight:800; font-size:.86rem; letter-spacing:.02em;
}
.b2b-header-btn:hover .b2b-header-btn__avatar,
.b2b-header-btn.is-active .b2b-header-btn__avatar{ background:#fff; color:#e2001a; }

/* Logout icon, next to the cabinet button when logged in (desktop). */
.b2b-header-out{
    box-sizing:border-box;
    flex:0 0 auto; align-self:center;
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:.45rem;
    width:40px; height:40px; min-width:40px;
    aspect-ratio:1 / 1;
    padding:0;
    border:1.5px solid #e2001a; border-radius:50%;
    color:#e2001a; background:#fff;
    text-decoration:none;
    transition:background .15s, color .15s, box-shadow .15s;
}
.b2b-header-out:hover{ background:#e2001a; color:#fff; box-shadow:0 6px 16px rgba(226,0,26,.25); }
.b2b-header-out svg{ width:18px; height:18px; }

/* Fixed cabinet + logout cluster (desktop, logged-in): fades in once the header
   scrolls out of view, so those two actions are always one tap away. */
.b2b-float{
    position:fixed; top:14px; right:26px; z-index:9990;
    display:flex; align-items:center;
    opacity:0; transform:translateY(-14px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}
.b2b-float.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.b2b-float .b2b-header-btn{ margin-left:0; box-shadow:0 6px 18px rgba(0,0,0,.14); }
.b2b-float .b2b-header-out{ box-shadow:0 6px 18px rgba(0,0,0,.14); }
@media (max-width:999px), (orientation: portrait){ .b2b-float{ display:none !important; } }

/* One placement visible at a time. Same breakpoint the burger menu uses
   (content/site/css/media.css). */
.b2b-menu-only{ display:none !important; }
/* The menu-entries wrapper is transparent on desktop (its children are hidden
   there); the mobile CSS turns it into the top pill row. */
.b2b-menu-top{ display:contents; }

@media (max-width:999px), (orientation: portrait){
    .b2b-header-btn,
    .b2b-header-login,
    .b2b-header-out{ display:none; }
    .b2b-menu-only{ display:flex !important; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width:768px){
    .b2b-page{ margin:1.5rem auto 3rem; }
    .b2b-card{ padding:1.75rem 1.25rem 1.5rem; }
    .b2b-field-row{ flex-direction:column; gap:1.1rem; }
    .b2b-head{ padding:1.35rem 1.25rem; }
    .b2b-head__side{ width:100%; }
    .b2b-actions__btns .b2b-btn{ flex:1 1 100%; }
    .b2b-timeline{ padding:1rem 1.1rem; }
    .b2b-timeline__time{ margin-left:0; width:100%; }
}

@media (max-width:400px){
}