/* Authentication cover illustrations (Views/Shared/_AuthArt.cshtml).
   The wrapper takes exactly the box the template's <img class="auth-illustration"> took (at most 65% of the
   cover's width and height, aspect ratio kept), and every prop is placed in percentages of it and sized in
   container units, so the composition scales as one picture. */

.tms-auth-art {
    position: relative;
    z-index: 1;
    inline-size: min(65%, calc(65vh * var(--tms-art-ratio)));
    aspect-ratio: var(--tms-art-ratio);
    container-type: inline-size;
}
.auth-multisteps-bg-height > .tms-auth-art { inline-size: min(280px, 100%); }
.tms-auth-art-img { display: block; inline-size: 100%; block-size: 100%; }

/* Floating product cards (login) — same size, place, padding and type scale as the template's cards. */
.tms-art-card {
    position: absolute;
    inline-size: 26.45%;
    padding: 3.6cqw 3.7cqw 3.2cqw;
    border-radius: .85cqw;
    background: var(--bs-paper-bg, #fff);
    box-shadow: 0 .45cqw 1.8cqw rgba(47, 43, 61, .14);
    color: var(--bs-heading-color, #444050);
    line-height: 1.25;
}
[data-bs-theme="dark"] .tms-art-card { box-shadow: 0 .45cqw 1.8cqw rgba(0, 0, 0, .35); }
.tms-art-card--a { inset-inline-start: 2.96%; inset-block-start: 2.34%; }
.tms-art-card--b { inset-inline-start: 70.7%; inset-block-start: 24.8%; }
.tms-art-title { font-size: 2.45cqw; font-weight: 500; }
.tms-art-sub { font-size: 1.85cqw; color: var(--bs-secondary-color, #acaab1); margin-block-start: .5cqw; }
.tms-art-line { display: block; inline-size: 100%; block-size: 10cqw; margin-block: 2.4cqw 2.6cqw; color: var(--bs-heading-color, #444050); overflow: visible; }
.tms-art-bars { display: flex; justify-content: space-between; block-size: 10.5cqw; margin-block: 2.4cqw 2.6cqw; }
.tms-art-bars span { position: relative; inline-size: .95cqw; border-radius: 1cqw; background: rgba(115, 103, 240, .12); }
.tms-art-bars i { position: absolute; inset-inline: 0; inset-block-end: 0; border-radius: 1cqw; background: #7367f0; }
.tms-art-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; white-space: nowrap; }
.tms-art-big { font-size: 3cqw; font-weight: 500; }
.tms-art-good { display: inline-flex; align-items: center; gap: .6cqw; font-size: 1.75cqw; color: #28c76f; }
.tms-art-dot { inline-size: 1cqw; block-size: 1cqw; border-radius: 50%; background: #28c76f; box-shadow: 0 0 0 .45cqw rgba(40, 199, 111, .2); }

/* Round prop badges (forgot / reset / register) — the template's grey disc with a hairline ring. */
.tms-art-badge {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 19.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(76, 76, 102, .04);
    border: 1px solid rgb(220, 219, 223);
}
[data-bs-theme="dark"] .tms-art-badge { background: rgba(136, 153, 204, .06); border-color: rgb(74, 80, 113); }
.tms-art-badge img { inline-size: 62%; block-size: auto; filter: drop-shadow(0 .4cqw .6cqw rgba(47, 43, 61, .12)); }
.tms-art-badge img[src*="badge-truck"] { inline-size: 76%; }
.tms-art-badge--a { inset-inline-start: .15%; inset-block-start: 7.4%; }
.tms-art-badge--b { inset-inline-start: 79.9%; inset-block-start: 39.3%; }
.tms-auth-art--register .tms-art-badge { inline-size: 34%; background: var(--bs-paper-bg, #fff); box-shadow: 0 .8cqw 3cqw rgba(47, 43, 61, .12); }
.tms-art-badge--r1 { inset-inline-start: 74%; inset-block-start: 14%; }
.tms-art-badge--r2 { inset-inline-start: -14%; inset-block-start: 46%; }