/* assets/css/ui.css */

/* ---------- Tokens / base ---------- */
:root{
  --mp-primary: #11b3cf;
  --mp-primary-dark: #0ea2bb;
  --mp-muted: #6c7a89;
  --mp-darkbtn: #3a4a5c;
  --mp-darkbtn-hover: #2f3e4f;
}

.mp-link{ color: var(--mp-primary); text-decoration: none; }
.mp-link:hover{ color: var(--mp-primary-dark); text-decoration: underline; }

/* ---------- Tabs (Figma-like) ---------- */
.mp-tabs{
  display: flex;
  gap: 6px;
  background: rgba(0,0,0,.04);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 14px;
}

.mp-tab{
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 14px;
  color: var(--mp-primary);
  cursor: pointer;
}

.mp-tab.is-active{
  background: var(--mp-primary);
  color: #fff;
}

/* ---------- Inputs with icon ---------- */
.mp-input{
  position: relative;
  margin-bottom: 10px;
}

.mp-input .form-control{
  padding-left: 38px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: rgba(0,0,0,.04); /* effetto “campo chiaro” come figma */
}

.mp-input .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(17,179,207,.18);
  background: rgba(0,0,0,.03);
}

.mp-input .mp-ico{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: .9;
  color: var(--mp-primary);
}

/* ---------- Primary button ---------- */
.btn-mp{
  background: var(--mp-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  height: 44px;
  font-weight: 800;
}

.btn-mp:hover{
  background: var(--mp-primary-dark);
  color: #fff;
}

/* ---------- Register option (50% text / 50% image) ---------- */
.mp-option{
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--mp-darkbtn);
  color: #fff;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden; /* IMPORTANT: taglia l’immagine a filo */
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: transform .08s ease, background .15s ease;
  min-height: 66px;
}

.mp-option:hover{
  background: var(--mp-darkbtn-hover);
  transform: translateY(-1px);
}

.mp-option-left{
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.mp-option-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}

.mp-option-right{
  flex: 0 0 50%;
}

.mp-option-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Helpers ---------- */
.mp-hidden{ display:none !important; }













/* ---------- Registration shared components ---------- */

/* Topbar: back + pill title centered */
.mp-topbar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 10px;
}

.mp-back{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.55);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mp-back svg{
  width: 22px;
  height: 22px;
}


/* Subtitle like figma */
.mp-subtitle{
  text-align: center;
  font-size: 12px;
  color: rgba(0,0,0,.35);
  font-weight: 600;
  margin-top: 2px;
}

/* Outline button like figma */
.btn-mp-outline{
  background: #fff;
  color: var(--mp-primary);
  border: 1.5px solid var(--mp-primary);
  border-radius: 12px;
  height: 44px;
  font-weight: 800;
}
.btn-mp-outline:hover{
  background: rgba(17,179,207,.06);
  color: var(--mp-primary-dark);
  border-color: var(--mp-primary-dark);
}

/* Select look with caret */
.mp-select{
  position: relative;
}
.mp-select select.form-control{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
}
.mp-select-caret{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: .65;
  background: no-repeat center/contain;
  /* caret down (inline svg) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2311b3cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* OTP boxes */
.mp-otp{
  display: flex;
  gap: 10px;
}
.mp-otp-box{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: rgba(0,0,0,.06);
  text-align: center;
  font-weight: 800;
  color: rgba(0,0,0,.70);
  outline: none;
}
.mp-otp-box:focus{
  box-shadow: 0 0 0 .2rem rgba(17,179,207,.18);
  background: rgba(17,179,207,.06);
}

/* Progress dots (3) */
.mp-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.mp-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.mp-dot.is-on{
  background: var(--mp-primary);
}

/* Checkbox line like figma */
.mp-check{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(0,0,0,.45);
}
.mp-check input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mp-check-box{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid rgba(17,179,207,.70);
  display: inline-block;
  flex: 0 0 auto;
  background: #fff;
}
.mp-check input:checked + .mp-check-box{
  background: rgba(17,179,207,.18);
  box-shadow: inset 0 0 0 3px #fff;
  border-color: var(--mp-primary);
}
.mp-check-text{
  line-height: 1.2;
}









/* Evidenziazione tipo figma */
.mp-highlight{
  background: rgba(17,179,207,.18);
  color: var(--mp-primary);
  font-weight: 800;
  padding: 0px;
  border-radius: 6px;
}

/* versione “soft” (per parole parziali) */
.mp-highlight-soft{
  background: rgba(17,179,207,.18);
  color: var(--mp-primary);
  font-weight: 800;
  padding: 0px;
  border-radius: 6px;
}