/* ============================================================
   MutuoClick — Component styles
   Design-system condiviso (brand-agnostic, guidato dai token):
   identico al tema Credipass, il branding cambia solo via tokens.css.
   Components used by the mortgage comparator:
   Button · Badge · Stepper · Input · Select · RangeSlider · Icon
   ============================================================ */

/* -------------------------------------------------- Button */
.cp-btn{
  --_bg:var(--color-primary); --_fg:var(--text-on-brand); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:var(--fw-bold); line-height:1;
  border:var(--border-width-strong) solid var(--_bd); border-radius:var(--radius-control);
  background:var(--_bg); color:var(--_fg); cursor:pointer; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
  -webkit-tap-highlight-color:transparent; text-decoration:none;
}
.cp-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.cp-btn:active{ transform:translateY(1px); }
.cp-btn[disabled],.cp-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }

.cp-btn--sm{ font-size:var(--text-sm); padding:8px 14px; min-height:38px; }
.cp-btn--md{ font-size:var(--text-base); padding:12px 20px; min-height:48px; }
.cp-btn--lg{ font-size:var(--text-md); padding:15px 28px; min-height:56px; }
.cp-btn--block{ width:100%; }

.cp-btn--primary{ --_bg:var(--color-primary); --_fg:var(--text-on-brand); }
.cp-btn--primary:hover:not([disabled]){ --_bg:var(--color-primary-hover); }
.cp-btn--accent{ --_bg:var(--color-accent); --_fg:var(--text-on-accent); }
.cp-btn--accent:hover:not([disabled]){ --_bg:var(--color-accent-hover); }
.cp-btn--secondary{ --_bg:transparent; --_fg:var(--color-primary); --_bd:var(--border-default); }
.cp-btn--secondary:hover:not([disabled]){ --_bg:var(--blue-50); --_bd:var(--color-primary); }
.cp-btn--ghost{ --_bg:transparent; --_fg:var(--color-primary); --_bd:transparent; }
.cp-btn--ghost:hover:not([disabled]){ --_bg:var(--blue-50); }

.cp-btn__spin{ width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:cp-btn-spin .6s linear infinite; }
@keyframes cp-btn-spin{ to{ transform:rotate(360deg); } }

/* -------------------------------------------------- Badge */
.cp-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-weight:var(--fw-bold); border-radius:var(--radius-pill); white-space:nowrap; line-height:1;
  border:1px solid transparent; }
.cp-badge--sm{ font-size:var(--text-3xs); padding:4px 9px; }
.cp-badge--md{ font-size:var(--text-2xs); padding:6px 12px; }
.cp-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.cp-badge--neutral{ background:var(--gray-100); color:var(--gray-700); }
.cp-badge--info{ background:var(--color-info-soft); color:var(--blue-700); }
.cp-badge--success{ background:var(--color-success-soft); color:var(--green-600); }
.cp-badge--warning{ background:var(--color-warning-soft); color:var(--gold-700); }
.cp-badge--danger{ background:var(--color-danger-soft); color:var(--red-600); }
.cp-badge--accent{ background:var(--gold-500); color:var(--blue-900); }
.cp-badge--brand{ background:var(--color-primary); color:#fff; }

/* -------------------------------------------------- Stepper */
.cp-stepper{ display:flex; align-items:center; gap:0; font-family:var(--font-sans); width:100%; }
.cp-stepper__step{ display:flex; align-items:center; gap:10px; }
.cp-stepper__dot{ flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:var(--fw-bold);
  background:var(--gray-100); color:var(--text-subtle); border:2px solid var(--gray-200);
  transition:all var(--duration-base) var(--ease-standard); }
.cp-stepper__label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-subtle); white-space:nowrap; }
.cp-stepper__line{ flex:1 1 auto; height:2px; background:var(--gray-200); margin:0 12px; border-radius:2px;
  transition:background var(--duration-base) var(--ease-standard); }
.cp-stepper__step--active .cp-stepper__dot{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.cp-stepper__step--active .cp-stepper__label{ color:var(--color-primary); }
.cp-stepper__step--done .cp-stepper__dot{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.cp-stepper__step--done .cp-stepper__label{ color:var(--text-body); }
.cp-stepper__line--done{ background:var(--color-primary); }
.cp-stepper--compact .cp-stepper__label{ display:none; }

/* -------------------------------------------------- Input */
.cp-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.cp-field__label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.cp-field__req{ color:var(--color-danger); margin-left:2px; }
.cp-field__wrap{ position:relative; display:flex; align-items:center; }
.cp-field__icon{ position:absolute; left:14px; color:var(--text-subtle); display:flex; pointer-events:none; }
.cp-field__affix{ position:absolute; right:16px; color:var(--text-muted); font-weight:var(--fw-semibold); font-size:var(--text-sm); }
.cp-input{
  width:100%; font-family:inherit; font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-control); padding:13px 16px; min-height:50px;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.cp-input::placeholder{ color:var(--text-subtle); }
.cp-input:hover:not(:disabled){ border-color:var(--border-strong); }
.cp-input:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.cp-input:disabled{ background:var(--surface-sunken); color:var(--text-subtle); cursor:not-allowed; }
.cp-input--icon{ padding-left:42px; }
.cp-input--affix{ padding-right:48px; }
.cp-input--error{ border-color:var(--color-danger); }
.cp-input--error:focus{ box-shadow:0 0 0 3px var(--color-danger-soft); }
.cp-field__help{ font-size:var(--text-xs); color:var(--text-muted); }
.cp-field__help--error{ color:var(--color-danger); }

/* -------------------------------------------------- Select */
.cp-select-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.cp-select-field__label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.cp-select-wrap{ position:relative; display:flex; align-items:center; }
.cp-select{
  appearance:none; -webkit-appearance:none; width:100%; cursor:pointer;
  font-family:inherit; font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:var(--border-width) solid var(--border-default);
  border-radius:var(--radius-control); padding:13px 44px 13px 16px; min-height:50px;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.cp-select:hover:not(:disabled){ border-color:var(--border-strong); }
.cp-select:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--focus-ring); }
.cp-select:disabled{ background:var(--surface-sunken); color:var(--text-subtle); cursor:not-allowed; }
.cp-select--placeholder{ color:var(--text-subtle); }
.cp-select-caret{ position:absolute; right:15px; color:var(--text-muted); pointer-events:none; display:flex; }

/* -------------------------------------------------- RangeSlider */
.cp-range{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:14px; }
.cp-range__head{ display:flex; align-items:baseline; justify-content:space-between; }
.cp-range__label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.cp-range__value{ font-size:var(--text-lg); font-weight:var(--fw-extrabold); color:var(--color-primary); font-variant-numeric:tabular-nums; }
.cp-range__input{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:var(--radius-pill);
  background:var(--gray-200); outline:none; cursor:pointer; }
.cp-range__input:focus-visible{ box-shadow:var(--focus-ring); }
.cp-range__input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--white); border:3px solid var(--color-primary); box-shadow:var(--shadow-sm); cursor:grab; margin-top:0; }
.cp-range__input::-webkit-slider-thumb:active{ cursor:grabbing; }
.cp-range__input::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--white);
  border:3px solid var(--color-primary); box-shadow:var(--shadow-sm); cursor:grab; }
.cp-range__ends{ display:flex; justify-content:space-between; font-size:var(--text-2xs); color:var(--text-subtle); font-variant-numeric:tabular-nums; }

/* -------------------------------------------------- Icon */
.cp-icon{ flex:0 0 auto; display:inline-block; vertical-align:middle; }

/* -------------------------------------------------- Page motion */
@keyframes cmp-spin { to { transform: rotate(360deg); } }
@keyframes cmp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }