/* =============================================================================
   STRANA: CONTACT (P9) · hero model D „Portal" — forma JE hero.
   Sve vrednosti iz /public/css/tokens.css (var(--mv-*)). Prefiks: .mv-ct-*
   ========================================================================== */

/* ---------- 01 · PORTAL HERO ---------- */
.mv-ct-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--mv-grad-hero);
  color:var(--mv-on-dark);
  padding:calc(var(--mv-header-h) + clamp(48px,6vw,92px)) 0 clamp(72px,9vw,124px)}
/* DOM redosled: uvod → forma → aside (mobilni ritam); na desktopu grid vraća
   aside pod uvod, a forma drži celu desnu kolonu. */
.mv-ct-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:.4fr .6fr;
  column-gap:var(--mv-gap-col);align-items:start}
.mv-ct-hero__in>*{min-width:0}
.mv-ct-say{grid-column:1;grid-row:1}
.mv-ct-aside{grid-column:1;grid-row:2}
.mv-ct-form-col{grid-column:2;grid-row:1/span 2}
.mv-ct-h1{font-size:var(--mv-fs-h2-lg);line-height:var(--mv-lh-tight);letter-spacing:var(--mv-ls-head);
  max-width:13ch;margin-top:var(--mv-sp-e3)}
.mv-ct-sub{margin-top:var(--mv-sp-e4);max-width:var(--mv-measure-lead);
  padding-left:var(--mv-sp-e2);border-left:1px solid var(--mv-line-gold-strong);
  font-size:var(--mv-fs-hero-sub);line-height:var(--mv-lh-lead);color:var(--mv-on-dark-mut)}

.mv-ct-promise{margin-top:var(--mv-sp-e5);padding:var(--mv-sp-5) var(--mv-sp-5) var(--mv-sp-5) 0;
  border-top:1px solid var(--mv-line-gold);border-bottom:1px solid var(--mv-line-dark)}
.mv-ct-promise__t{display:block;margin-top:var(--mv-sp-3);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-title-md);letter-spacing:var(--mv-ls-tight);
  color:var(--mv-accent)}
.mv-ct-promise__p{margin-top:var(--mv-sp-3);font-size:var(--mv-fs-body-sm);
  line-height:var(--mv-lh-prose);color:var(--mv-on-dark-soft);max-width:38ch}

.mv-ct-direct{margin-top:var(--mv-sp-e4)}
.mv-ct-direct__l{display:block;margin-top:var(--mv-sp-3);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-semi);font-size:var(--mv-fs-label-lg);letter-spacing:var(--mv-ls-tight);
  color:var(--mv-on-dark);transition:color var(--mv-dur-base)}
.mv-ct-direct__l:hover{color:var(--mv-accent)}
.mv-ct-direct__a{display:block;margin-top:var(--mv-sp-3);font-size:var(--mv-fs-body-xs);
  line-height:var(--mv-lh-loose);color:var(--mv-on-dark-soft)}

/* ---------- forma — panel ---------- */
.mv-ct-panel{position:relative;background:var(--mv-surface);border:1px solid var(--mv-line-dark);
  border-radius:var(--mv-r4);padding:clamp(26px,3.2vw,50px)}
.mv-ct-panel__seam{position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--mv-grad-seam)}
.mv-ct-panel__t{font-size:var(--mv-fs-title-md);line-height:var(--mv-lh-title);
  letter-spacing:var(--mv-ls-tight)}
.mv-ct-panel__note{margin-top:var(--mv-sp-4);font-size:var(--mv-fs-small);
  line-height:var(--mv-lh-body);color:var(--mv-on-dark-soft)}
.mv-ct-alert{margin-top:var(--mv-sp-5);padding:12px 14px;border-radius:var(--mv-r2);
  border:1px solid rgba(240,149,138,.4);background:rgba(240,149,138,.08);
  font-size:var(--mv-fs-body-sm);color:var(--mv-danger-on-dark)}
.mv-ct-form{margin-top:var(--mv-sp-e3)}
.mv-ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mv-ct-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--mv-sp-4)}

/* ---------- WOW (b) · floating labele + zlatni fokus ---------- */
.mv-ct-f{position:relative;margin-bottom:var(--mv-sp-4);min-width:0}
.mv-ct-in{width:100%;display:block;background:rgba(237,239,242,.04);color:var(--mv-on-dark);
  font-family:var(--mv-font-body);font-size:var(--mv-fs-body-sm);line-height:1.4;
  padding:25px 14px 9px;border:1px solid var(--mv-line-dark-strong);border-radius:var(--mv-r2);
  transition:border-color var(--mv-dur-quick),box-shadow var(--mv-dur-quick),
             background var(--mv-dur-quick)}
.mv-ct-in:hover{border-color:var(--mv-line-gold-strong)}
.mv-ct-in:focus{outline:none;border-color:var(--mv-accent);box-shadow:var(--mv-focus-ring)}
.mv-ct-in:-webkit-autofill{-webkit-text-fill-color:var(--mv-on-dark);
  -webkit-box-shadow:0 0 0 1000px var(--mv-anth-2) inset;caret-color:var(--mv-on-dark)}
.mv-ct-f>label{position:absolute;left:15px;top:16px;transform-origin:left top;pointer-events:none;
  font-size:var(--mv-fs-body-sm);line-height:1;color:var(--mv-on-dark-soft);
  transition:transform var(--mv-dur-fast) var(--mv-ease),color var(--mv-dur-fast)}
.mv-ct-in:focus+label,
.mv-ct-in:not(:placeholder-shown)+label{transform:translateY(-8px) scale(.74);color:var(--mv-accent)}
.mv-ct-area{min-height:132px;resize:vertical;line-height:var(--mv-lh-body);padding-top:28px}
.mv-ct-f--area>label{top:18px}
/* Topic je <select> — nema :placeholder-shown, pa label stoji trajno podignuta.
   :not(:placeholder-shown) se kod select-a uvek poklapa (nema placeholder stanja),
   pa opšte pravilo iznad boji label trajno u accent — override na sivu dok nije fokusiran. */
.mv-ct-f--sel>label{transform:translateY(-8px) scale(.74)}
.mv-ct-f--sel .mv-ct-in:not(:focus)+label{color:var(--mv-on-dark-soft)}
.mv-ct-f--sel .mv-ct-in:focus+label{color:var(--mv-accent)}
.mv-ct-f--sel .mv-ct-in{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mv-accent) 50%),
                   linear-gradient(135deg,var(--mv-accent) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 4px),calc(100% - 16px) calc(50% + 4px);
  background-size:6px 6px;background-repeat:no-repeat}
.mv-ct-f--sel option{background:var(--mv-anth-2);color:var(--mv-on-dark)}
.mv-ct-err{display:block;margin-top:6px;font-size:var(--mv-fs-small);color:var(--mv-danger-on-dark)}
.mv-ct-err--block{margin-bottom:var(--mv-sp-4)}
.mv-ct-f.has-err .mv-ct-in,
.mv-ct-in:user-invalid{border-color:var(--mv-danger-on-dark)}

/* ---------- interes — 5 stubova, multi ---------- */
.mv-ct-fs{margin:var(--mv-sp-2) 0 var(--mv-sp-5);padding:var(--mv-sp-5) 0 0;border:0;
  border-top:1px solid var(--mv-line-dark)}
.mv-ct-fs__t{display:block;font-family:var(--mv-font-body);font-size:var(--mv-fs-micro);
  font-weight:var(--mv-fw-semi);letter-spacing:var(--mv-ls-micro);text-transform:uppercase;
  color:var(--mv-on-dark-mut)}
.mv-ct-fs__h{display:block;margin-top:6px;font-size:var(--mv-fs-small);color:var(--mv-on-dark-soft)}
.mv-ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--mv-sp-4)}
.mv-ct-chip{position:relative;display:inline-flex}
.mv-ct-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mv-ct-chip>span{display:inline-flex;align-items:center;padding:9px 14px;
  border:1px solid var(--mv-line-dark-strong);border-radius:var(--mv-r1);
  font-size:var(--mv-fs-body-xs);line-height:1.2;color:var(--mv-on-dark-mut);
  transition:border-color var(--mv-dur-fast),color var(--mv-dur-fast),background var(--mv-dur-fast)}
.mv-ct-chip:hover>span{border-color:var(--mv-line-gold-strong);color:var(--mv-on-dark)}
.mv-ct-chip input:checked+span{background:var(--mv-accent-soft);border-color:var(--mv-accent);
  color:var(--mv-accent)}
.mv-ct-chip input:focus-visible+span{outline:var(--mv-focus-w) solid var(--mv-accent);
  outline-offset:var(--mv-focus-offset)}

/* ---------- privacy ---------- */
.mv-ct-priv{display:flex;align-items:flex-start;gap:var(--mv-sp-3);cursor:pointer;
  margin:var(--mv-sp-2) 0 var(--mv-sp-5);font-size:var(--mv-fs-body-xs);
  line-height:var(--mv-lh-prose);color:var(--mv-on-dark-soft)}
.mv-ct-priv input{appearance:none;flex:0 0 auto;width:18px;height:18px;margin-top:1px;cursor:pointer;
  background:rgba(237,239,242,.04);border:1px solid var(--mv-line-dark-strong);
  border-radius:var(--mv-r2);transition:background var(--mv-dur-quick),border-color var(--mv-dur-quick)}
.mv-ct-priv input:checked{background:var(--mv-accent);border-color:var(--mv-accent);
  background-image:linear-gradient(45deg,transparent 46%,var(--mv-navy) 46%,var(--mv-navy) 54%,transparent 54%),
                   linear-gradient(-45deg,transparent 46%,var(--mv-navy) 46%,var(--mv-navy) 54%,transparent 54%);
  background-size:11px 11px;background-position:center;background-repeat:no-repeat}
.mv-ct-priv input:focus-visible{outline:var(--mv-focus-w) solid var(--mv-accent);
  outline-offset:var(--mv-focus-offset)}
.mv-ct-priv a{color:var(--mv-accent);text-decoration:underline;text-underline-offset:3px}
.mv-ct-priv a:hover{color:var(--mv-accent-hover)}

/* ---------- WOW (a) · submit se puni zlatom sleva ---------- */
.mv-ct-submit{width:100%;justify-content:center}
/* DesignTokensService ubacuje inline `form button[type=submit]{background:…!important}`
   (narandžasta iz starih design tokena) — vraćamo brend zlatnu, veća specifičnost. */
form button[type="submit"].mv-ct-submit{background-color:var(--mv-accent)!important;
  border-color:var(--mv-accent)!important;color:var(--mv-on-accent)!important}
form button[type="submit"].mv-ct-submit:hover{background-color:var(--mv-accent)!important;
  border-color:var(--mv-accent-hover)!important;color:var(--mv-on-accent)!important}
.mv-ct-fill{position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;
  background:var(--mv-gold-light)}
.mv-ct-lbl--send{display:none}
.mv-ct-submit.is-sending .mv-ct-lbl{display:none}
.mv-ct-submit.is-sending .mv-ct-lbl--send{display:inline}
/* Livewire sam postavlja [disabled] na submit tokom wire:submit — ne sme da zatamni dugme */
.mv-btn.mv-ct-submit[disabled],
.mv-btn.mv-ct-submit.is-sending{opacity:1;transform:none;cursor:progress}
.mv-btn.mv-ct-submit.is-sending .mv-ct-fill{animation:mvCtFill 1200ms var(--mv-ease) forwards}
.mv-btn.mv-ct-submit.is-sending .mv-ar{opacity:.4}
@keyframes mvCtFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- WOW (a) · panel prelazi u potvrdu ---------- */
.mv-ct-done{transform-origin:top center;animation:mvCtFlip var(--mv-dur-reveal) var(--mv-ease) both}
@keyframes mvCtFlip{
  from{opacity:0;transform:perspective(900px) rotateX(-8deg) translateY(14px)}
  to{opacity:1;transform:none}}
.mv-ct-done__mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:var(--mv-r-circle);border:1px solid var(--mv-line-gold-strong);
  background:var(--mv-accent-soft)}
.mv-ct-done__mark svg{width:26px;height:26px;fill:none;stroke:var(--mv-accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:mvCtTick var(--mv-dur-hero) var(--mv-ease) .25s forwards}
@keyframes mvCtTick{to{stroke-dashoffset:0}}
.mv-ct-done__t{margin-top:var(--mv-sp-5);font-size:var(--mv-fs-title-md);
  line-height:var(--mv-lh-title);letter-spacing:var(--mv-ls-tight)}
.mv-ct-done__p{margin-top:var(--mv-sp-5);font-size:var(--mv-fs-body-sm);
  line-height:var(--mv-lh-prose);color:var(--mv-on-dark-mut);max-width:46ch}
.mv-ct-done__p--mut{color:var(--mv-on-dark-soft)}
.mv-ct-done .mv-btn{margin-top:var(--mv-sp-e3)}

/* ---------- 02 · direct details ---------- */
.mv-ct-val{display:block;margin-top:var(--mv-sp-3);font-family:var(--mv-font-display);
  font-weight:var(--mv-fw-semi);font-size:var(--mv-fs-title-sm);letter-spacing:var(--mv-ls-tight);
  color:var(--mv-accent-deep);transition:color var(--mv-dur-base);overflow-wrap:anywhere}
a.mv-ct-val:hover{color:var(--mv-on-light)}
.mv-ct-val--plain{color:var(--mv-on-light);max-width:22ch}

/* ---------- 03 · what happens next ---------- */
.mv-ct-next{padding:calc(var(--mv-section-y) + var(--mv-cut)) 0 var(--mv-section-y-end)}
.mv-ct-step{transition:background var(--mv-dur-row) var(--mv-ease)}
.mv-ct-step.is-lit{background:linear-gradient(90deg,var(--mv-accent-soft),rgba(212,175,55,0) 62%)}
.mv-ct-step.is-lit .mv-numlist__n{color:var(--mv-gold-light)}

/* ---------- 04 · mini FAQ ---------- */
.mv-ct-faq{display:grid;grid-template-columns:.4fr .6fr;gap:var(--mv-gap-col);
  align-items:start;margin-top:var(--mv-sp-e5);interpolate-size:allow-keywords}
.mv-ct-faq>*{min-width:0}
.mv-ct-faq__list{border-top:1px solid var(--mv-line-light)}
.mv-ct-faq__it{border-bottom:1px solid var(--mv-line-light)}
.mv-ct-faq__it summary{display:flex;align-items:center;justify-content:space-between;gap:var(--mv-sp-5);
  padding:var(--mv-sp-5) 0;cursor:pointer;list-style:none;
  font-family:var(--mv-font-display);font-weight:var(--mv-fw-bold);font-size:var(--mv-fs-title-sm);
  letter-spacing:var(--mv-ls-tight);color:var(--mv-on-light);
  transition:color var(--mv-dur-base)}
.mv-ct-faq__it summary::-webkit-details-marker{display:none}
.mv-ct-faq__it summary:hover{color:var(--mv-accent-deep)}
.mv-ct-faq__it summary:focus-visible{outline:var(--mv-focus-w) solid var(--mv-accent-deep);
  outline-offset:var(--mv-focus-offset)}
.mv-ct-faq__it summary i{position:relative;flex:0 0 auto;width:14px;height:14px}
.mv-ct-faq__it summary i::before,.mv-ct-faq__it summary i::after{content:"";position:absolute;
  left:0;top:6px;width:14px;height:1.5px;background:var(--mv-accent-deep);
  transition:transform var(--mv-dur-base) var(--mv-ease)}
.mv-ct-faq__it summary i::after{transform:rotate(90deg)}
.mv-ct-faq__it[open] summary i::after{transform:rotate(0)}
.mv-ct-faq__a{padding:0 var(--mv-sp-8) var(--mv-sp-5) 0;font-size:var(--mv-fs-body-sm);
  line-height:var(--mv-lh-prose);color:var(--mv-on-light-mut);max-width:56ch}
.mv-ct-faq__it::details-content{block-size:0;overflow:hidden;content-visibility:hidden;
  transition:block-size var(--mv-dur-base) var(--mv-ease),
             content-visibility var(--mv-dur-base) allow-discrete}
.mv-ct-faq__it[open]::details-content{block-size:auto;content-visibility:visible}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .mv-ct-hero__in{grid-template-columns:.44fr .56fr}
}
@media(max-width:1000px){
  .mv-ct-hero__in,.mv-ct-faq{grid-template-columns:1fr;gap:var(--mv-sp-e5)}
  .mv-ct-say,.mv-ct-aside,.mv-ct-form-col{grid-column:auto;grid-row:auto}
  .mv-ct-promise{margin-top:0}
  .mv-ct-hero{padding-top:calc(var(--mv-header-h-solid) + clamp(40px,6vw,72px))}
  .mv-ct-h1{max-width:18ch}
  .mv-ct-promise__p{max-width:52ch}
}
@media(max-width:640px){
  .mv-ct-row{grid-template-columns:1fr;gap:0}
  .mv-ct-panel{padding:22px 18px}
  .mv-ct-faq__a{padding-right:0}
  .mv-ct-next{padding-top:var(--mv-section-y)}
}
@media(prefers-reduced-motion:reduce){
  .mv-ct-done,.mv-ct-done__mark svg,.mv-btn.mv-ct-submit.is-sending .mv-ct-fill{animation:none}
  .mv-ct-done{opacity:1;transform:none}
  .mv-ct-done__mark svg{stroke-dashoffset:0}
  .mv-btn.mv-ct-submit.is-sending .mv-ct-fill{transform:scaleX(1)}
}