/* ============================================================
   ENI Group Corporate KYC form -- brand styling.
   Palette/typography per the ENI Brand Guidelines 2019 (v4.0) and the
   Relevate Brand Guidelines (see CLAUDE.md §5): ENI green family, brand
   black, Gotham with system fallback, UPPERCASE titles and highlights,
   sentence-case body copy. Tokens (--eni-green-*, --eni-black, --radius)
   come from the :root block in index.html.
   ============================================================ */

body.cf-page{background:#f4f6f4;}
body.cf-page header{border-bottom:4px solid var(--eni-green-3);}
body.cf-page footer{color:#6b7570;}

.cf{
  --cf-border:#d5dcd8;
  --cf-border-strong:#9fb3aa;
  --cf-surface:#ffffff;
  --cf-tint:#eef3f0;
  --cf-tint-strong:#dfe9e4;
  --cf-error:#b3261e;
  --cf-error-bg:#fdecea;
  --cf-ok:#1e7e34;
  --cf-focus:rgba(77,125,107,.38);
  color:var(--eni-black);
}
.cf *{box-sizing:border-box;}

/* ---------- Progress / stepper ---------- */
.cf-stepper{
  display:flex; gap:0; margin:0 0 22px; padding:0; list-style:none;
  counter-reset:cfstep;
}
.cf-stepper li{
  flex:1 1 0; position:relative; text-align:center; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#8a9690; padding-top:34px;
}
.cf-stepper li::before{
  counter-increment:cfstep; content:counter(cfstep);
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:26px; line-height:24px; border-radius:50%;
  border:2px solid var(--cf-border-strong); background:#fff; color:#8a9690; font-size:12px;
}
.cf-stepper li::after{ /* connector */
  content:""; position:absolute; top:12px; left:calc(-50% + 16px); width:calc(100% - 32px);
  height:2px; background:var(--cf-border);
}
.cf-stepper li:first-child::after{display:none;}
.cf-stepper li.is-done{color:var(--eni-green-2);}
.cf-stepper li.is-done::before{content:"\2713"; background:var(--eni-green-2); border-color:var(--eni-green-2); color:#fff;}
.cf-stepper li.is-done::after, .cf-stepper li.is-current::after{background:var(--eni-green-2);}
.cf-stepper li.is-current{color:var(--eni-green-1);}
.cf-stepper li.is-current::before{background:var(--eni-green-1); border-color:var(--eni-green-1); color:#fff;}
.cf-stepper li button{
  all:unset; position:absolute; inset:0; cursor:pointer;
}
.cf-stepper li button:focus-visible{outline:3px solid var(--cf-focus); outline-offset:2px; border-radius:6px;}
.cf-stepper-compact{display:none; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--eni-green-1); margin:0 0 14px;}

/* ---------- Cards & headings ---------- */
.cf-card{
  background:var(--cf-surface); border:1px solid var(--cf-border); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(9,85,64,.05), 0 6px 18px rgba(9,85,64,.05);
  padding:26px 28px; margin-bottom:18px;
}
.cf-title{
  margin:0 0 6px; font-size:21px; line-height:1.25; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--eni-green-1);
}
.cf-title:focus{outline:none;}
.cf-subtitle{margin:0 0 4px; color:#5b6560; font-size:14px;}
.cf-formref{
  display:inline-block; margin:2px 0 12px; padding:3px 10px; border-radius:20px;
  background:var(--cf-tint); color:var(--eni-green-1); font-size:11.5px; font-weight:700; letter-spacing:.05em;
}
.cf-section-head{
  display:flex; align-items:center; gap:12px; margin:0 0 4px;
  padding-bottom:12px; border-bottom:2px solid var(--cf-tint-strong);
}
.cf-section-num{
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--eni-green-1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.cf-section-title{
  margin:0; font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--eni-green-1);
}
.cf-section-body{padding-top:16px;}
.cf-subheading{
  margin:22px 0 10px; font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--eni-green-2); display:flex; align-items:center; gap:10px;
}
.cf-subheading::after{content:""; flex:1; height:1px; background:var(--cf-border);}

/* ---------- Layout grid ---------- */
.cf-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 20px;}
.cf-field{min-width:0; margin-bottom:12px;}
.cf-field--full, .cf-info, .cf-subheading, .cf-statements, .cf-table, .cf-upload, .cf-signature{grid-column:1 / -1;}
.cf [hidden]{display:none !important;}

.cf-label, .cf legend{
  display:block; font-size:13px; font-weight:700; color:#2f3a35; margin:0 0 6px; padding:0; line-height:1.35;
}
.cf-req{color:var(--cf-error); margin-left:3px;}
.cf-hint{font-size:12.5px; color:#66736c; margin:6px 0 0; line-height:1.45;}
.cf-info{
  background:var(--cf-tint); border-left:4px solid var(--eni-green-2); border-radius:6px;
  padding:11px 14px; margin:2px 0 14px; font-size:13.5px; line-height:1.5; color:#34423b;
}

/* ---------- Inputs ---------- */
.cf input[type=text], .cf input[type=email], .cf input[type=tel], .cf input[type=url],
.cf input[type=number], .cf input[type=date], .cf textarea, .cf select{
  width:100%; padding:11px 12px; border:1px solid var(--cf-border-strong); border-radius:8px;
  font:inherit; font-size:15px; color:var(--eni-black); background:#fff; min-height:44px;
  transition:border-color .15s, box-shadow .15s;
}
.cf textarea{min-height:92px; resize:vertical; line-height:1.4;}
.cf select{
  appearance:none; padding-right:36px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5750' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
}
.cf input:focus, .cf textarea:focus, .cf select:focus{
  outline:none; border-color:var(--eni-green-1); box-shadow:0 0 0 3px var(--cf-focus);
}
.cf input[readonly]{background:var(--cf-tint); color:#4a5750; border-color:var(--cf-border);}
.cf .cf-other{margin-top:8px;}

/* "On file" (CRM) beside "Your update" -- stacks on narrow screens */
.cf-compare{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start;}
.cf-onfile, .cf-now{display:flex; flex-direction:column; gap:5px; min-width:0;}
.cf-onfile-label, .cf-now-label{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6b7872;}
.cf-onfile-value{
  min-height:44px; padding:11px 12px; border:1px dashed var(--cf-border); border-radius:8px;
  background:var(--cf-tint); color:#4a5750; font-size:15px; overflow-wrap:anywhere;
}
.cf-changed{
  margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; letter-spacing:.03em;
  background:#fff4d6; color:#7a5600; border:1px solid #e9cf86; text-transform:uppercase;
}
@media (max-width:640px){ .cf-compare{grid-template-columns:minmax(0,1fr);} }
.cf .is-invalid{border-color:var(--cf-error) !important; box-shadow:0 0 0 3px rgba(179,38,30,.14);}
.cf-error{color:var(--cf-error); font-size:12.5px; font-weight:600; margin-top:5px; min-height:0;}
.cf-error:empty{display:none;}
.cf-counter{font-size:11.5px; color:#8a9690; text-align:right; margin-top:3px;}
.cf-ocrnote{
  margin-top:6px; font-size:12px; font-weight:600; color:var(--eni-green-1);
  background:var(--cf-tint); border-radius:4px; padding:3px 8px; display:inline-block;
}

/* radios / checkboxes as selectable chips */
.cf fieldset{border:0; margin:0; padding:0; min-width:0;}
.cf-options{display:flex; flex-wrap:wrap; gap:8px;}
.cf-option{position:relative;}
.cf-option input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; inset:0;}
.cf-option span{
  display:flex; align-items:center; gap:8px; padding:9px 14px; min-height:42px;
  border:1px solid var(--cf-border-strong); border-radius:8px; background:#fff; font-size:14px; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.cf-option span::before{
  content:""; flex:none; width:16px; height:16px; border:2px solid var(--cf-border-strong); background:#fff;
  border-radius:50%;
}
.cf-option.is-check span::before{border-radius:4px;}
.cf-option input:checked + span{background:var(--cf-tint); border-color:var(--eni-green-1); font-weight:700;}
.cf-option input:checked + span::before{background:var(--eni-green-1); border-color:var(--eni-green-1); box-shadow:inset 0 0 0 2px #fff;}
.cf-option.is-check input:checked + span::before{
  box-shadow:none; background:var(--eni-green-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cf-option input:focus-visible + span{outline:3px solid var(--cf-focus); outline-offset:1px;}

/* consent */
.cf-consent{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--cf-border-strong);
  border-radius:8px; background:var(--cf-tint); cursor:pointer; font-size:14px; font-weight:600; line-height:1.45;
}
.cf-consent input{flex:none; width:20px; height:20px; margin-top:1px; accent-color:var(--eni-green-1);}

/* ---------- Statements (declaration / authorization) ---------- */
.cf-statements{
  margin:0 0 14px; padding:16px 20px 16px 38px; background:#fafbfa; border:1px solid var(--cf-border);
  border-radius:8px; font-size:13.5px; line-height:1.55; color:#34423b;
}
.cf-statements li{margin-bottom:8px;}
.cf-statements li:last-child{margin-bottom:0;}
.cf-statements.is-plain{list-style:none; padding-left:20px;}

/* ---------- Repeating tables ---------- */
.cf-table{margin:0 0 14px;}
.cf-trow{
  border:1px solid var(--cf-border); border-radius:8px; padding:12px 14px 4px; margin-bottom:10px; background:#fbfcfb;
}
.cf-trow-head{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--eni-green-2); margin-bottom:8px;}
.cf-trow .cf-cells{display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:2px 16px;}
.cf-tactions{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.cf-btn{
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  padding:12px 26px; border-radius:8px; border:1px solid var(--eni-green-1); min-height:44px;
  transition:background .15s, box-shadow .15s, opacity .15s;
}
.cf-btn:focus-visible{outline:3px solid var(--cf-focus); outline-offset:2px;}
.cf-btn--primary{background:var(--eni-green-1); color:#fff;}
.cf-btn--primary:hover:not(:disabled){background:#0b6a50;}
.cf-btn--secondary{background:#fff; color:var(--eni-green-1);}
.cf-btn--secondary:hover:not(:disabled){background:var(--cf-tint);}
.cf-btn--quiet{
  background:transparent; border:1px dashed var(--eni-green-2); color:var(--eni-green-1);
  padding:9px 16px; font-size:12.5px; text-transform:none; letter-spacing:0;
}
.cf-btn:disabled{opacity:.55; cursor:not-allowed;}
.cf-nav{display:flex; justify-content:space-between; gap:12px; margin-top:8px;}

/* ---------- Upload dropzone ---------- */
.cf-upload{margin-bottom:16px; padding:14px 16px; border:1px solid var(--cf-border); border-radius:8px; background:#fbfcfb;}
.cf-upload .cf-label{margin-bottom:8px;}
.cf-dz{
  position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:64px;
  border:2px dashed var(--cf-border-strong); border-radius:8px; background:#fff; cursor:pointer;
  font-size:14px; color:#4a5750; transition:background .15s, border-color .15s;
}
.cf-dz:hover, .cf-dz.is-drag{background:var(--cf-tint); border-color:var(--eni-green-2);}
.cf-dz input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
.cf-dz:focus-within{outline:3px solid var(--cf-focus); outline-offset:2px;}
.cf-dz-icon{flex:none; font-size:22px; line-height:1;}
.cf-dz-main{font-weight:700; color:var(--eni-green-1);}
.cf-dz-sub{font-size:12px; color:#7a8680;}
.cf-dz[data-state=done]{border-style:solid; border-color:var(--cf-ok); background:#f1f9f2;}
.cf-dz[data-state=done] .cf-dz-main{color:var(--cf-ok);}
.cf-dz[data-state=error]{border-color:var(--cf-error); background:var(--cf-error-bg);}
.cf-dz[data-state=error] .cf-dz-main{color:var(--cf-error);}
.cf-dz[data-state=uploading]{cursor:progress; opacity:.85;}
.cf-spin{
  flex:none; width:20px; height:20px; border-radius:50%; border:3px solid var(--cf-tint-strong);
  border-top-color:var(--eni-green-1); animation:cfspin .8s linear infinite;
}
@keyframes cfspin{to{transform:rotate(360deg);}}
.cf-upload .cf-field{margin:12px 0 0;}
.cf-ref{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;}
.cf-ref .cf-badge{font-size:12px; padding:3px 10px; border-radius:20px; background:var(--cf-tint); color:var(--eni-green-1);}
.cf-ref .cf-badge.is-ok{background:#e4f4e7; color:var(--cf-ok);}
.cf-ref .cf-badge.is-missing{background:var(--cf-error-bg); color:var(--cf-error);}

/* ---------- Signature pad ---------- */
.cf-signature{margin:6px 0 14px;}
.cf-sigwrap{
  position:relative; border:2px dashed var(--cf-border-strong); border-radius:8px; background:#fff; touch-action:none;
}
.cf-sigwrap canvas{display:block; width:100%; height:170px; border-radius:6px; cursor:crosshair;}
.cf-sigwrap.is-invalid{border-color:var(--cf-error);}
.cf-sigtools{display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
.cf-sigline{
  position:absolute; left:18px; right:18px; bottom:34px; border-bottom:1px solid #cfd6d2; pointer-events:none;
}
.cf-sigcap{
  position:absolute; left:18px; bottom:12px; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:#9aa5a0; pointer-events:none;
}

/* ---------- Review ---------- */
.cf-review-sec{border:1px solid var(--cf-border); border-radius:8px; margin-bottom:14px; overflow:hidden; background:#fff;}
.cf-review-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px;
  background:var(--cf-tint); border-bottom:1px solid var(--cf-border);
}
.cf-review-head h4{margin:0; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--eni-green-1);}
.cf-link{all:unset; cursor:pointer; color:var(--eni-green-1); font-size:12.5px; font-weight:700; text-decoration:underline;}
.cf-link:focus-visible{outline:3px solid var(--cf-focus); outline-offset:2px; border-radius:3px;}
.cf-rrow{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:14px; padding:9px 16px; border-bottom:1px solid #eef1ef; font-size:13.5px;}
.cf-rrow:last-child{border-bottom:0;}
.cf-rrow .k{color:#55625b;}
.cf-rrow .v{font-weight:700; overflow-wrap:anywhere;}
.cf-rrow .v.is-missing{color:var(--cf-error);}

/* ---------- Alerts / welcome / confirmation ---------- */
.cf-alert{
  background:var(--cf-error-bg); color:var(--cf-error); border:1px solid #f1b9b4; border-radius:8px;
  padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600; line-height:1.45;
}
.cf-alert:empty{display:none;}
.cf-alert:focus{outline:3px solid var(--cf-focus);}
.cf-checklist{margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 18px;}
.cf-checklist li{
  position:relative; padding:8px 12px 8px 34px; background:var(--cf-tint); border-radius:6px; font-size:13.5px; line-height:1.4;
}
.cf-checklist li::before{content:"\2713"; position:absolute; left:12px; top:8px; color:var(--eni-green-1); font-weight:800;}
.cf-meta{display:flex; flex-wrap:wrap; gap:6px 22px; margin:14px 0 4px; font-size:13.5px;}
.cf-meta b{color:var(--eni-green-1);}
.cf-confirm{text-align:center; padding:34px 14px;}
.cf-confirm .cf-tick{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--eni-green-1); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:32px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cf-trow .cf-cells{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:760px){
  .cf-trow .cf-cells{grid-template-columns:minmax(0,1fr);}
  .cf-card{padding:20px 16px;}
  .cf-grid{grid-template-columns:minmax(0,1fr);}
  .cf-stepper{display:none;}
  .cf-stepper-compact{display:block;}
  .cf-checklist{grid-template-columns:minmax(0,1fr);}
  .cf-rrow{grid-template-columns:minmax(0,1fr); gap:2px;}
  .cf-nav{flex-direction:column-reverse;}
  .cf-nav .cf-btn{width:100%;}
  .cf-title{font-size:18px;}
}
@media (prefers-reduced-motion:reduce){
  .cf-spin{animation-duration:2.4s;}
  .cf *{transition:none !important;}
}