/* ML Media — D mockups: shared chrome (flags, language switcher, legal row, cookie banner, forms, legal pages) */

/* ---------- flags + language switcher ---------- */
.flag{display:inline-block;width:20px;height:14px;border-radius:2px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(239,233,223,.18)}
.flag svg{display:block;width:100%;height:100%}
.langsw{position:relative}
.langbtn{display:flex;align-items:center;gap:8px;color:var(--white);padding:8px 2px;opacity:.85;transition:opacity .3s}
.langbtn:hover,.langsw.open .langbtn{opacity:1}
.langmenu{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:var(--black-2);border:1px solid var(--line);padding:6px;display:grid;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .3s;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.langsw.open .langmenu{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.langmenu a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--dim);font-size:15px;transition:background .25s,color .25s}
.langmenu a:hover,.langmenu a:focus-visible{background:var(--black-3);color:var(--white)}
.langmenu a[aria-current]{color:var(--white)}
.langmenu a[aria-current]::after{content:"";margin-left:auto;flex:none;width:6px;height:6px;border-radius:50%;background:var(--red)}
.langmenu a.all{border-top:1px solid var(--line);margin-top:4px;padding-top:12px;font-size:10.5px;color:var(--faint)}
.toast{position:fixed;left:50%;top:84px;z-index:70;transform:translate(-50%,-10px);display:flex;align-items:center;gap:10px;background:var(--black-2);border:1px solid var(--line);padding:12px 16px;color:var(--dim);opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease);max-width:calc(100% - 32px);pointer-events:none}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* ---------- footer legal row ---------- */
.contact .legal{align-items:center}
.contact .legal nav{display:flex;flex-wrap:wrap;gap:18px}
.contact .legal nav a,.contact .legal nav button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--faint);transition:color .3s}
.contact .legal nav a:hover,.contact .legal nav button:hover{color:var(--white)}
.contact .legal .co{color:rgba(239,233,223,.3)}

/* ---------- cookie banner ---------- */
.cookie{position:fixed;left:var(--gut);right:var(--gut);bottom:18px;z-index:96;max-width:980px;margin:0 auto;background:rgba(19,18,17,.98);border:1px solid var(--line);padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:end;box-shadow:0 40px 80px -30px rgba(0,0,0,.95);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .45s}
.cookie.in{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ck-t{font-family:var(--display);font-size:clamp(22px,1.8vw,28px);line-height:1.1;margin-bottom:6px}
.ck-b{color:var(--dim);font-size:15px;max-width:62ch}
.ck-b a{color:var(--white);border-bottom:1px solid var(--red)}
.ck-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ck-btns .btn{padding:11px 14px}
.ck-opts[hidden]{display:none}
.ck-opts{display:grid;gap:4px;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:8px 0;cursor:pointer;position:relative}
.ck-row b{display:block;font-weight:500;font-size:15px}
.ck-row small{display:block;color:var(--faint);font-size:13px}
.ck-row input{position:absolute;opacity:0;pointer-events:none}
.ck-row i{flex:none;width:38px;height:22px;border-radius:99px;background:var(--black-3);border:1px solid var(--line);position:relative;transition:background .3s,border-color .3s}
.ck-row i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:transform .35s var(--ease),background .3s}
.ck-row input:checked + i{background:var(--red);border-color:var(--red)}
.ck-row input:checked + i::after{transform:translateX(16px);background:var(--white)}
.ck-row input:disabled + i{opacity:.55}
.ck-row input:focus-visible + i{outline:1px solid var(--red-hot);outline-offset:3px}

/* ---------- contact page ---------- */
.cform{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,96px);padding:0 var(--gut);align-items:start}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.f{display:grid;gap:8px;position:relative}
.f.full{grid-column:1/-1}
.f label,.f .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.f label small,.f .lbl small{color:var(--faint);letter-spacing:.08em;text-transform:none;font-family:var(--sans);font-size:12px;margin-left:6px}
.f input,.f textarea,.f select{font:inherit;font-size:17px;color:var(--white);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0 12px;border-radius:0;transition:border-color .3s;width:100%;caret-color:var(--red-hot)}
.f textarea{min-height:140px;resize:vertical;line-height:1.5}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.f select option{background:var(--black-2);color:var(--white)}
.f input::placeholder,.f textarea::placeholder{color:rgba(239,233,223,.3)}
.f input:hover,.f textarea:hover,.f select:hover{border-color:var(--faint)}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--white)}
.f.bad input,.f.bad textarea,.f.bad select{border-color:var(--red-hot)}
.f .err{font-size:13px;color:var(--red-hot);min-height:1.2em;opacity:0;transform:translateY(-4px);transition:.3s var(--ease)}
.f.bad .err{opacity:1;transform:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--dim);padding:9px 14px;border:1px solid var(--line);border-radius:99px;transition:border-color .25s,color .25s,background .25s}
.chips label:hover span{border-color:var(--faint);color:var(--white)}
.chips input:checked + span{background:var(--white);border-color:var(--white);color:var(--black)}
.chips input:focus-visible + span{outline:1px solid var(--red-hot);outline-offset:3px}
.consent{display:flex;gap:12px;align-items:flex-start;color:var(--dim);font-size:15px;cursor:pointer}
.consent input{appearance:none;flex:none;width:18px;height:18px;border:1px solid var(--faint);margin-top:3px;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.consent input:checked{background:var(--red);border-color:var(--red)}
.consent input:checked::after{content:"";width:9px;height:5px;border-left:1.6px solid var(--white);border-bottom:1.6px solid var(--white);transform:rotate(-45deg) translate(1px,-1px)}
.consent a{color:var(--white);border-bottom:1px solid var(--red)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.submit .btn[disabled]{opacity:.55;cursor:progress}
.submit .note-s{color:var(--faint);font-size:14px}
.demo{border:1px dashed var(--line);padding:10px 14px;color:var(--faint);font-size:14px}
.done{display:none;border:1px solid var(--line);padding:clamp(28px,5vh,48px);gap:12px}
.done h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,4vw,64px);line-height:1}
.done p{color:var(--dim);max-width:52ch}
.cform.sent form{display:none}.cform.sent .done{display:grid}
.side-c{display:grid;gap:30px;position:sticky;top:110px}
.side-c h3{font-family:var(--caps);font-weight:800;text-transform:uppercase;font-size:clamp(18px,1.5vw,24px);line-height:1.05;margin-bottom:10px}
.side-c .ch{display:grid;border-top:1px solid var(--line)}
.side-c .ch a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);color:var(--white);transition:padding .4s var(--ease),color .3s}
.side-c .ch a:hover{padding-left:10px;color:var(--red-hot)}
.side-c .ch a span{color:var(--faint);font-size:15px}
.steps{list-style:none;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;color:var(--dim);font-size:15px}
.steps li b{display:block;color:var(--white);font-weight:500}

/* ---------- legal pages ---------- */
.legaldoc{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,5vw,96px);padding:0 var(--gut) clamp(40px,8vh,80px);align-items:start}
.legaldoc aside{position:sticky;top:110px;display:grid;gap:4px}
.legaldoc aside a{color:var(--faint);font-size:15px;padding:6px 0 6px 12px;border-left:1px solid var(--line);transition:color .3s,border-color .3s}
.legaldoc aside a:hover{color:var(--white)}
.legaldoc aside a.on{color:var(--white);border-color:var(--red)}
.legaldoc article{max-width:72ch}
.legaldoc .warn{border:1px dashed rgba(255,59,51,.5);color:var(--dim);padding:14px 16px;margin-bottom:36px;font-size:15px}
.legaldoc .warn b{color:var(--red-hot);font-weight:500}
.legaldoc h2{font-family:var(--caps);font-weight:800;font-size:clamp(18px,1.6vw,26px);line-height:1.15;text-transform:uppercase;letter-spacing:.01em;margin:44px 0 12px;scroll-margin-top:110px}
.legaldoc h2:first-of-type{margin-top:0}
.legaldoc p,.legaldoc li{color:var(--dim);line-height:1.7}
.legaldoc p + p{margin-top:12px}
.legaldoc ul{padding-left:1.1em;display:grid;gap:6px;margin-top:10px}
.legaldoc article a{color:var(--white);border-bottom:1px solid var(--red)}
.legaldoc table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.legaldoc th,.legaldoc td{text-align:left;padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.legaldoc th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
.legaldoc td{color:var(--dim)}
.legaldoc td code{font-family:var(--mono);font-size:13px;color:var(--white)}
.legaldoc .upd{color:var(--faint);margin-bottom:26px}
.legaldoc .actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.legaldoc .state{margin-top:12px;color:var(--faint);font-size:14px}

@media (max-width:980px){
  .cform{grid-template-columns:1fr}.side-c{position:static}
  .legaldoc{grid-template-columns:minmax(0,1fr)}.legaldoc aside{display:none}
  .legaldoc article{min-width:0;max-width:100%;overflow-wrap:break-word}   /* phones: never wider than the screen */
  .legaldoc table.kv th,.legaldoc table.kv td{display:block;white-space:normal;padding-right:0}
  .legaldoc table.kv th{border-bottom:0;padding-bottom:2px}.legaldoc table.kv td{padding-top:0}
  /* phones: each row of a data table becomes a card, every value under its column name */
  .legaldoc .tscroll table,.legaldoc .tscroll tbody,.legaldoc .tscroll tr,.legaldoc .tscroll td{display:block;width:100%}
  .legaldoc .tscroll thead{display:none}
  .legaldoc .tscroll tr{border-bottom:1px solid var(--line);padding:6px 0 14px}
  .legaldoc .tscroll td{border:0;padding:8px 0 0;overflow-wrap:break-word}
  .legaldoc .tscroll td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .legaldoc .tscroll td:first-child{color:var(--white);font-size:17px}
}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr} }
@media (max-width:760px){ .cookie{grid-template-columns:1fr;bottom:0;left:0;right:0;border-left:0;border-right:0} .ck-btns{justify-content:stretch} .ck-btns .btn{flex:1;justify-content:center} }

/* phones: bigger logo (80/54px) + switcher + CTA must fit one row */
@media (max-width:640px){ .langbtn{font-size:0;gap:0} .langbtn .flag{width:22px;height:15px} .hdr .cta{padding:9px 11px;font-size:10px;letter-spacing:.1em} .hdr nav{gap:12px} }

/* grid items holding inputs must be allowed to shrink below the inputs' intrinsic width */
.cform > *, .fgrid > *, .f, .f input, .f select, .f textarea{min-width:0}
.chips input{width:1px;height:1px;left:0;top:0}