/* ===========================================================================
   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, the footer link, and the
       two consent blocks — the marketing opt-in and the privacy notice both read
       as sentences, so half a column would wrap them into a narrow ribbon. */
    .b2b-page--form .b2b-form__msg,
    .b2b-page--form .b2b-form > button,
    .b2b-page--form .b2b-form__foot,
    .b2b-page--form .b2b-form > .mkt-optin,
    .b2b-page--form .b2b-form > .legal-notice{ 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:.4rem; } /* six cards = two rows of three */
.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; }
/* Card without a counter (recently viewed): only centre it. The label keeps the
   shared styling — giving it the number's weight made that one card shout while
   the rest whispered. */
.b2b-navcard__meta--nonum{ justify-content:center; }

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

    .b2b-hero__id{ flex:1 1 100%; }
    .b2b-nav{ flex:1 1 100%; }

    /* Deliberately no per-count column override here: the base grid is three
       wide, which gives six cards two clean rows. Forcing four or five onto a
       single row squeezed every card and broke the pairing. */
}

@media (max-width:768px){
    .b2b-hero{ padding:1.1rem 1.2rem; }
    .b2b-hero__name{ font-size:1.35rem; }
    .b2b-hero__id{ flex:1 1 100%; }
    .b2b-nav{ grid-template-columns:repeat(2, 1fr); gap:.4rem; }
    .b2b-navcard{ gap:.4rem; padding:.25rem .4rem; }
    .b2b-navcard__ico{ width:32px; height:32px; border-radius:9px; }
    .b2b-navcard__ico svg{ width:17px; height:17px; }
    .b2b-navcard__num{ font-size:1.15rem; }
    .b2b-navcard__label{ font-size:.78rem; }

    /* Order set here, not in the markup, so the desktop rows and the keyboard
       tab order stay as written. Six cards pair up with none left over:
           Favorite      Comparare
           Vizualizate   Filtrele mele
           Cadouri       Conturi de plata                                    */
    .b2b-navcard--cabinet { order:1; }
    .b2b-navcard--compare { order:2; }
    .b2b-navcard--viewed  { order:3; }
    .b2b-navcard--filters { order:4; }
    .b2b-navcard--gifts   { order:5; }
    .b2b-navcard--invoices{ order:6; }

    /* Without the Gifts card there are five, and the last one by that order —
       Conturi de plata — would sit alone. Full row then, and only then. */
    .b2b-nav:has(> .b2b-navcard:nth-child(5)):not(:has(> .b2b-navcard:nth-child(6))) .b2b-navcard--invoices{
        grid-column:1 / -1;
    }
}

.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-page .gr{ line-height:normal; }

.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{
    /* Same gap from the hero the filled states keep (.b2b-table-wrap, .b2b-gifts,
       and the cars grid via its card margins), so a tab does not shift upwards
       just because it happens to be empty. */
    margin-top:1rem;
    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; }
/* That bottom margin reserves room for the call-to-action button under the text
   (the saved-cars tab). Compare has no button, so it would just leave a gap. */
#compare_empty.b2b-empty p{ margin-bottom:0; }

/* 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, UNDER the call/WhatsApp buttons — a
   partner keeps both ways of getting in touch. On desktop those two 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%; margin-top:1rem; }
main > .spc_bx > .doit:has(> .b2b-actions){ flex-wrap:wrap; }

@media (min-width:640px){
    /* Desktop puts call + WhatsApp on floats, and a cleared element's own
       margin is swallowed by the clearance — the panel ends up glued to the
       buttons. The gap has to come from the floats themselves. */
    main > .spc_bx > .doit:has(> .b2b-actions) > .call,
    main > .spc_bx > .doit:has(> .b2b-actions) > .btn-whatsapp{ margin-bottom:1rem; }

    /* .doit carries a 2rem top margin meant for the space under the price. With
       the gift cards in between, that reads as a hole in the column. */
    main > .spc_bx > .b2b-gifts--page-d + .doit{ margin-top:.85rem; }
}

.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; } }
/* The fullscreen photo viewer owns the screen while it is open, but sits at
   z-index:100 against this cluster's 9990 — so without this the cabinet button
   floats over the photo. #show_img is a body-level sibling rendered before the
   float, which is what makes the plain `~` enough here (no JS). */
#show_img.act ~ .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){
}

/* ---------------------------------------------------------------------------
   Gifts granted to the partner.
   An unopened gift is the notification: a dot on the cabinet button (rendered in
   body.php on all three placements) and a highlighted card at the top of the
   list. Once the tab is opened both revert to the plain history look.
   --------------------------------------------------------------------------- */
.b2b-dot{
    position:absolute; top:-5px; right:-6px; z-index:2;
    min-width:16px; height:16px; padding:0 3px;
    box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:#e2001a; border:2px solid #fff;
    color:#fff; font-size:9px; font-weight:800; line-height:1;
    font-family:inherit; letter-spacing:0;
    box-shadow:0 2px 6px rgba(226,0,26,.45);
}
/* Expanding halo: a static dot is easy to walk past, and this is the only
   signal a partner gets that something is waiting for them. The ring is drawn
   on a pseudo-element so it can grow past the badge without moving it. */
.b2b-dot::after{
    content:''; position:absolute; inset:-2px;
    border-radius:inherit; pointer-events:none;
    animation:b2bDotPulse 1.9s ease-out infinite;
}
@keyframes b2bDotPulse{
    0%   { box-shadow:0 0 0 0 rgba(226,0,26,.55); }
    70%  { box-shadow:0 0 0 11px rgba(226,0,26,0); }
    100% { box-shadow:0 0 0 0 rgba(226,0,26,0); }
}
/* Same courtesy the rest of the module extends. */
@media (prefers-reduced-motion:reduce){
    .b2b-dot::after{ animation:none; }
}
/* On the cabinet nav cards the dot carries no number — keep it a clean circle. */
.b2b-navcard__ico .b2b-dot{ min-width:11px; height:11px; padding:0; top:-3px; right:-3px; }
.b2b-header-btn__avatar,
.b2b-navcard__ico{ position:relative; }

/* margin-top matches .b2b-table-wrap so the list isn't glued to the hero, the
   same gap every other cabinet tab keeps. */
.b2b-gifts{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.75rem; }
.b2b-gift{
    /* The icon is centred against the whole text block, not pinned to its first
       line: the body varies from one line to four (services, condition, note,
       date), and a top-aligned emoji drifts visually out of the card. */
    display:flex; gap:0.9rem; align-items:center;
    padding:1rem; border:1px solid #e8e8ee; border-radius:12px; background:#fff;
}
.b2b-gift.is-new{
    border-color:#e69f17;
    background:linear-gradient(0deg, rgba(230,159,23,.06), rgba(230,159,23,.06)), #fff;
}
.b2b-gift__ico{ font-size:2.6rem; line-height:1; display:inline-block; transform-origin:center; }

/* Unopened gifts pulse harder — they are the ones asking for attention — but
   every gift keeps a gentle beat so the section reads as alive. */
.b2b-gift__ico{ animation:b2bGiftPulse 1.9s ease-in-out infinite; }
.b2b-gift.is-new .b2b-gift__ico{ animation:b2bGiftPulseNew 1.5s ease-in-out infinite; }
@keyframes b2bGiftPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.25); }
}
@keyframes b2bGiftPulseNew{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.45); }
}
/* Same courtesy the compare swipe hint already extends. */
@media (prefers-reduced-motion:reduce){
    .b2b-gift__ico,
    .b2b-gift.is-new .b2b-gift__ico{ animation:none; }
}
.b2b-gift__body{ flex:1; min-width:0; }
.b2b-gift__new{
    display:inline-block; margin-bottom:0.35rem; padding:0.1rem 0.5rem;
    border-radius:999px; background:#e69f17; color:#fff;
    font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.b2b-gift__what{ margin:0; font-size:1.05rem; font-weight:700; color:#111827; }
/* The condition under the services: what the gift is actually worth to them. */
.b2b-gift__free{ margin:0.15rem 0 0; color:#15803d; font-weight:600; font-size:0.92rem; }
.b2b-gift__note{ margin:0.25rem 0 0; color:#4b5563; }
.b2b-gift__time{ display:block; margin-top:0.4rem; font-size:0.8rem; color:#9ca3af; }

/* ---------------------------------------------------------------------------
   Gifts on the car page, under the offer countdown. Same .b2b-gift items as the
   cabinet, so both are styled once; only the wrapper differs.
   The page renders both layouts and lets CSS choose, exactly like the countdown
   above it — hence the 640px split, matching .prc.desktop / .prc.pricemobile.
   --------------------------------------------------------------------------- */
.b2b-gifts--car{ margin:0 0 12px; }
.b2b-gifts--car .b2b-gift{ padding:.75rem .9rem; gap:.7rem; }
.b2b-gifts--car .b2b-gift__ico{ font-size:2rem; }
.b2b-gifts--car .b2b-gift__what{ font-size:.98rem; }
.b2b-gifts--car .b2b-gift__free{ font-size:.86rem; }
.b2b-gifts--car .b2b-gift__note{ font-size:.86rem; }

.b2b-gifts--page-m{ display:none; }
@media (min-width:640px){
    .b2b-gifts--page-d{ display:flex; width:100%; clear:both; }
    .b2b-gifts--page-m{ display:none !important; }
}
/* 639.98, not 640: at exactly 640px both queries match and each hides the other
   variant with !important, so neither would render. */
@media (max-width:639.98px){
    .b2b-gifts--page-d{ display:none !important; }
    /* Sits between the title and the price now, so it needs air on both sides. */
    .b2b-gifts--page-m{ display:flex; margin:10px 0; }
}

/* ---------------------------------------------------------------------------
   Saved searches with an alert ("Filtrele mele").
   A filter that has matched something new is highlighted the same amber as an
   unopened gift, so "there is something for you" always looks the same.
   --------------------------------------------------------------------------- */
.b2b-filters{ margin-top:1rem; }

.b2b-fltform{ margin-bottom:1.25rem; padding:1.25rem 1.4rem; }
.b2b-fltform__ttl{ margin:0 0 .35rem; font-size:1.1rem; font-weight:800; }
.b2b-fltform .b2b-hint{ display:block; margin-bottom:1rem; }
.b2b-fltform__grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr));
    gap:.7rem .8rem;
}
.b2b-fltform .b2b-field > span{ font-size:.72rem; }

/* A select left to the browser keeps the platform look — grey box, system
   arrow, blue highlight — next to inputs that are already styled. Strip the
   native appearance and draw our own chevron so the row reads as one control
   set. background-image is the only way to put a mark inside a <select>. */
.b2b-fltform select,
.b2b-fltform input{
    height:2.6rem; padding:0 .75rem;
    border:1.5px solid var(--b2b-line); border-radius:10px;
    background:#fff; font-family:inherit; font-size:.92rem; color:var(--b2b-ink);
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.b2b-fltform select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding-right:2rem; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .75rem center;
}
.b2b-fltform select:hover:not(:disabled),
.b2b-fltform input:hover{ border-color:#c9c9d1; }
.b2b-fltform select:focus,
.b2b-fltform input:focus{
    outline:none; border-color:var(--b2b-brand);
    box-shadow:0 0 0 3px rgba(226,0,26,.12);
}
/* A disabled model select should read as "pick a make first", not as broken. */
.b2b-fltform select:disabled{ background-color:#f7f7f9; color:#9a9a9a; cursor:not-allowed; }
/* Chrome shows spinners on number inputs, which crowd the 10rem column. */
.b2b-fltform input[type=number]::-webkit-outer-spin-button,
.b2b-fltform input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.b2b-fltform input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.b2b-fltform__foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; flex-wrap:wrap; margin-top:1.1rem;
}
.b2b-fltform__acts{ display:flex; align-items:center; gap:.6rem; }
.b2b-fltform__msg{ color:var(--b2b-muted); font-size:.9rem; }
.b2b-fltform__msg.is-error{ color:var(--b2b-brand); }
/* While a saved filter is loaded into it, the form is no longer the "new filter"
   box — the brand border says so before the title is read. */
.b2b-fltform.is-editing{ border-color:var(--b2b-brand); }

.b2b-flt{
    position:relative;   /* anchors the delete button to the card corner */
    /* 1rem is the row-gap the car grid uses between card rows (style.css), so a
       stack of filters keeps the same vertical rhythm as the cars inside them. */
    margin-bottom:1rem; padding:1rem 1.1rem;
    background:#fff; border:1px solid #e8e8ee; border-radius:14px;
}
.b2b-flt.is-new{
    border-color:#e69f17;
    background:linear-gradient(0deg, rgba(230,159,23,.05), rgba(230,159,23,.05)), #fff;
}
/* The whole header is the toggle, so the row reads as one target. */
.b2b-flt__head{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; flex-wrap:wrap; cursor:pointer; list-style:none;
    padding-right:4.4rem;   /* clears the corner edit + delete buttons */
}
.b2b-flt__head::-webkit-details-marker{ display:none; }  /* default triangle */
.b2b-flt__head:hover .b2b-flt__what{ color:var(--b2b-brand); }
.b2b-flt__id{ min-width:0; }

/* Chevron, rotated when the section is open — the only cue that the row folds. */
.b2b-flt__chev{
    width:20px; height:20px; flex:0 0 auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center;
    transition:transform .15s ease;
}
.b2b-flt[open] .b2b-flt__chev{ transform:rotate(180deg); }

/* Cars a filter has caught in total: brand red, so a filter that found
   something reads differently at a glance from one that found nothing
   (.b2b-flt__none, which stays grey). Plain text, not a filled pill — that
   treatment stays reserved for the amber "new since you last looked" badge. */
.b2b-flt__count{ font-size:.85rem; font-weight:700; color:var(--b2b-brand); white-space:nowrap; }
.b2b-flt__what{ margin:0; font-size:1.05rem; font-weight:800; color:#111827; }
.b2b-flt__right{ display:flex; align-items:center; gap:.6rem; }
.b2b-flt__badge{
    padding:.2rem .7rem; border-radius:999px;
    background:#e69f17; color:#fff;
    font-size:.8rem; font-weight:700; white-space:nowrap;
}
.b2b-flt__none{ font-size:.85rem; color:#9ca3af; white-space:nowrap; }
/* Pinned to the card's top-right corner rather than riding in the header row:
   inline, they shifted left or right depending on how long the badge beside them
   was, so they never sat in the same place twice. */
.b2b-flt__edit,
.b2b-flt__del{
    position:absolute; top:.35rem; z-index:2;
    width:28px; height:28px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--b2b-line); border-radius:8px;
    background:#fff; color:var(--b2b-muted);
    font-size:18px; line-height:1; cursor:pointer;
    transition:color .15s, border-color .15s;
}
.b2b-flt__del{ right:.35rem; }
.b2b-flt__edit{ right:2.4rem; }   /* left of delete, same 28px rhythm */
.b2b-flt__edit:hover,
.b2b-flt__del:hover{ color:var(--b2b-brand); border-color:var(--b2b-brand); }

/* The car grid inside a filter card: it already has the card's padding around
   it, so it must not add the panel-level top margin on top. */
.b2b-flt .gr{ float:none; }
.b2b-flt .gr > .cnt.list{ margin-top:1rem; }
/* The row's own bottom padding: without it the last card row touches the edge. */
.b2b-flt[open]{ padding-bottom:1.25rem; }

/* ---------------------------------------------------------------------------
   Styled dropdown (see b2b.js). The native <select> stays in the DOM but is
   taken out of sight: it still holds the value and fires change, while the
   button and list below are ours to style. Only on pointer devices — phones
   keep the OS picker.
   --------------------------------------------------------------------------- */
.b2b-sel{ position:relative; display:block; }
.b2b-sel > select{
    position:absolute; width:1px; height:1px; padding:0; margin:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.b2b-sel__btn{
    width:100%; height:2.6rem; padding:0 2rem 0 .75rem;
    border:1.5px solid var(--b2b-line); border-radius:10px;
    background:#fff; cursor:pointer;
    font-family:inherit; font-size:.92rem; color:var(--b2b-ink);
    text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:border-color .15s, box-shadow .15s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .75rem center;
}
.b2b-sel__btn:hover:not(:disabled){ border-color:#c9c9d1; }
.b2b-sel__btn:focus-visible,
.b2b-sel.is-open .b2b-sel__btn{
    outline:none; border-color:var(--b2b-brand);
    box-shadow:0 0 0 3px rgba(226,0,26,.12);
}
.b2b-sel__btn:disabled{ background-color:#f7f7f9; color:#9a9a9a; cursor:not-allowed; }
/* "Any" / "All" is a default, not a choice — greyed like a placeholder. */
.b2b-sel__btn.is-placeholder{ color:var(--b2b-muted); }

.b2b-sel__list{
    position:absolute; z-index:50; top:calc(100% + .3rem); left:0; right:0;
    max-height:15rem; overflow-y:auto;
    margin:0; padding:.25rem; list-style:none;
    background:#fff; border:1px solid #e8e8ee; border-radius:10px;
    box-shadow:0 12px 28px rgba(20,20,40,.14);
}
.b2b-sel__opt{
    padding:.45rem .6rem; border-radius:7px;
    font-size:.9rem; color:var(--b2b-ink); cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b2b-sel__opt:hover{ background:#f5f5f7; }
/* The selected row in the brand red, not the OS blue that started all this. */
.b2b-sel__opt.is-on{ background:var(--b2b-brand); color:#fff; font-weight:600; }

@media (max-width:768px){
    .b2b-fltform__grid{ grid-template-columns:repeat(2, 1fr); gap:.6rem .6rem; }

    .b2b-fld--br   { order:1; }
    .b2b-fld--mo   { order:2; }
    .b2b-fld--tra  { order:3; }
    .b2b-fld--fl   { order:4; }
    .b2b-fld--yrf  { order:5; }
    .b2b-fld--yrt  { order:6; }
    .b2b-fld--volf { order:7; }
    .b2b-fld--volt { order:8; }
    .b2b-fld--prcf { order:9; }
    .b2b-fld--prct { order:10; }
    .b2b-fld--mlg  { order:11; }
    .b2b-fld--rg   { order:12; }

    /* Two columns on a phone leave ~150px per field: the long labels
       ("Capacitate până la, cm³") need to wrap without pushing one box taller
       than its pair, so they stay aligned. */
    .b2b-fltform .b2b-field > span{
        font-size:.68rem; line-height:1.25; min-height:2.1em;
        display:flex; align-items:flex-end;
    }
}

.b2b-header-btn--user,
.b2b-menu-only--user{ position:relative; overflow:visible; }

.b2b-count{
    position:absolute; top:-6px; right:-6px; z-index:3;
    min-width:18px; height:18px; padding:0 5px;
    box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:#e2001a; color:#fff;
    border:2px solid #fff;
    font-size:10px; font-weight:800; line-height:1; letter-spacing:0;
    box-shadow:0 2px 6px rgba(226,0,26,.4);
}

.b2b-count::after{
    content:''; position:absolute; inset:0;
    border-radius:inherit; pointer-events:none;
    animation:b2bDotPulse 1.9s ease-out infinite;
}
@media (prefers-reduced-motion:reduce){ .b2b-count::after{ animation:none; } }

@media (max-width:768px){
    .b2b-flt__id{ flex:1 1 100%; }
    .b2b-flt__right{ flex:1 1 100%; justify-content:flex-start; margin-top:.35rem; }

    .b2b-flt__what{ font-size:.85rem; line-height:1.35; }
    .b2b-flt__badge{ font-size:.72rem; padding:.15rem .55rem; }
    .b2b-flt__count,
    .b2b-flt__none{ font-size:.75rem; }
}