@import url("/tablet-layout.css");
.card-wrap{max-width:510px;margin:auto;container-type:inline-size}
.balm-card-wrap{max-width:510px;margin:12px auto;container-type:inline-size}
.card-control-title{margin:0 0 8px}
.balm-card-wrap .driver-card{background:linear-gradient(135deg,#d4e9fb,#8ebce3);color:#132f50;border-color:#7da9cc}
:is(#managerBalmCard,.tablet-control-front) .card-photo{border-radius:5%;background:#ffffff45}
.driver-card{box-sizing:border-box;position:relative;overflow:hidden;aspect-ratio:85.6/54;color:#172447;
border:1px solid #dfd1e2;border-radius:4%/6%;padding:4.4cqw 4.5cqw;
font:600 3cqw/1.18 system-ui;background:repeating-linear-gradient(128deg,#ffeff12b 0 1px,transparent 1px 7px),
radial-gradient(ellipse at 84% 16%,#e7b7c9 0%,transparent 55%),linear-gradient(130deg,#eee4f2,#f8e3e0 57%,#dbe6fa);
box-shadow:0 14px 28px #0005}
.driver-card::before{content:"";position:absolute;right:8%;bottom:11%;width:34%;height:42%;pointer-events:none;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 84'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 42V14h58v28H12Zm58-21h22l15 15v15H95m-19 0H46m-20 0H12v-9m68-21v15h27M6 77l41-20m66 20L79 57m-21 20 5-7m4-6 3-4'/%3E%3Ccircle cx='36' cy='51' r='8'/%3E%3Ccircle cx='85' cy='51' r='8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
background:currentColor;opacity:.10}
.driver-card:is(:hover,:focus-visible,:active)::before{background:linear-gradient(112deg,#6859ae,#25a9c8,#a8ebde,#e6aa58,#b365a5);
background-size:240% 100%;animation:card-hologram .85s ease both}
@keyframes card-hologram{
0%{background-position:100% 50%;opacity:.12}
55%{opacity:.74}
100%{background-position:0 50%;opacity:.32}
}
:is(.driver-card,.adr-certificate)::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(114deg,transparent 29%,#a99af633 39%,#fff9 46%,#a9edf65e 51%,#ffe3a946 56%,#eea4d326 61%,transparent 68%);
transform:translateX(-105%);transition:transform .8s ease;opacity:.46}
:is(.driver-card,.adr-certificate):is(:hover,:focus-visible,:active)::after{transform:translateX(105%)}
@media(prefers-reduced-motion:reduce){
:is(.driver-card,.adr-certificate)::after{transition:none}
.driver-card:is(:hover,:focus-visible,:active)::before{animation:none;opacity:.32}
}
.driver-card .card-head{display:flex;align-items:center;gap:3cqw;margin-bottom:4cqw}
.country-emblem{flex:none;background:#18468e;color:#fff;border-radius:1cqw;padding:1.9cqw 2.5cqw;font-size:4.2cqw}
.card-head .country-emblem{position:relative;display:grid;place-items:center;width:15cqw;height:10cqw;padding:0;font-size:3.6cqw}
.country-emblem .eu-star{position:absolute;color:#ffdc57;font-size:1.45cqw;line-height:1;transform:translate(-50%,-50%)}
.card-title{font-weight:850;font-size:4.1cqw;letter-spacing:.035em}
.card-subtitle{display:block;font-size:2.65cqw;font-weight:650;letter-spacing:.06em}
.card-grid{display:grid;grid-template-columns:26% minmax(0,1fr);gap:4cqw}
.card-photo{display:grid;place-items:center;overflow:hidden;background:#49335417;border:1px solid #49335430;
border-radius:46% 46% 42% 42% / 32% 32% 34% 34%;aspect-ratio:3/4;color:#4d5269;font-size:2.7cqw}
.card-photo img{width:100%;height:100%;object-fit:cover}
.driver-card .card-grid{position:relative}
:is(:where(.driver-card) .card-grid,.adr-rosette)::after{content:"";position:absolute;top:17cqw;left:19cqw;width:10cqw;height:10cqw;
border-radius:50%;pointer-events:none;opacity:.22;
background:repeating-conic-gradient(from 12deg,#557dac 0deg 5deg,transparent 5deg 13deg);
mask:radial-gradient(circle,transparent 27%,#000 29% 35%,transparent 37% 44%,#000 46% 58%,transparent 61% 67%,#000 69% 72%,transparent 74%)}
:is(.driver-card,.adr-certificate):is(:hover,:focus-visible,:active) :is(.card-grid,.adr-rosette)::after{
background:repeating-conic-gradient(from 12deg,#668ed2 0deg,#5bcfc6 8deg,#e9c875 15deg,#c178b2 22deg,transparent 24deg 30deg);
animation:card-hologram .85s ease both}
@media(prefers-reduced-motion:reduce){:is(.driver-card,.adr-certificate):is(:hover,:focus-visible,:active) :is(.card-grid,.adr-rosette)::after{animation:none;opacity:.32}}
.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.3cqw 2cqw;margin:0}
.card-fields div{min-width:0}
.card-fields .full{grid-column:1/-1}
.card-fields dt{font-size:2.3cqw;color:#4f4a64}
.card-fields dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-fields .card-number{font-family:ui-monospace,monospace;letter-spacing:.07em;font-size:3.5cqw}
:is(#driverFront,.tablet-driver-front) .card-head{margin-bottom:2cqw}
:is(#driverFront,.tablet-driver-front) .card-fields{row-gap:.75cqw}
:is(#driverFront,.tablet-driver-front) .card-number{line-height:1.15}
.card-mark{position:absolute;right:4.5cqw;bottom:2.3cqw;font-size:2.3cqw;letter-spacing:.07em;color:#4d4666}
.card-generation{position:absolute;left:6cqw;bottom:3cqw;color:#724368;font-size:4.8cqw;font-weight:800}
.card-back .card-head{margin-bottom:3.3cqw}
.card-back .back-grid{display:grid;grid-template-columns:22% 1fr;gap:4cqw}
.chip{align-self:start;height:12cqw;border-radius:2cqw;border:1px solid #a58846;background:
linear-gradient(0deg,transparent 33%,#a58846 34% 36%,transparent 37% 63%,#a58846 64% 66%,transparent 67%),
linear-gradient(90deg,transparent 32%,#a58846 33% 35%,transparent 36% 65%,#a58846 66% 68%,transparent 69%),
linear-gradient(140deg,#ffeb9f,#cfad61)}
.card-back dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.9cqw}
.card-back dt{font-size:2.3cqw;color:#4f4a64}
.card-back dd{margin:0}
.card-back p{margin:3cqw 0 0;font-size:2.65cqw;color:#453e5d}