/*
 * Diventa Socio — page-scoped styles
 * Scoped entirely to .diventa-socio-page
 * Does NOT redefine .page-header / .path-header / .timeline__* / .w1200
 * (those live in assets/css/forms.css).
 *
 * @package ANMA3
 * @since   0.8.0
 */

/* ── Custom properties (page-scope) ──────────────────── */
/* Scope conflicting vars: global.css :root ribalta primary/secondary
   rispetto alla palette del mockup ANMA. Stesso pattern di t2/t2bis/t3/login. */
.diventa-socio-page {
	--c-primary:   #2E86C1;
	--c-secondary: #7F8C8D;
	--c-border:    #BDC3C7;
	--c-bg:        #F4F6F8;
	--c-green:     #2ECC71;
}

/* ── Page wrapper ─────────────────────────────────────── */
.diventa-socio-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding: 64px 24px;
	min-height: 100vh;
}

/* ── Role section ─────────────────────────────────────── */
.diventa-socio-page .role-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.diventa-socio-page .role-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--c-secondary);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.diventa-socio-page .role-row {
	display: flex;
	gap: 16px;
}

.diventa-socio-page .role-card {
	flex: 1;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.diventa-socio-page .role-card--active {
	background: var(--c-primary-tint);
	border: 2px solid var(--c-primary);
}

.diventa-socio-page .role-card__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.diventa-socio-page .role-badge {
  width: 116px;                 /* Figma 778:884 / 778:893 — i due badge sono allineati */
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.diventa-socio-page .role-badge--active {
	background: var(--c-primary);
	color: white;
}

.diventa-socio-page .role-badge--idle {
	background: var(--c-primary-tint);
	color: var(--c-primary-dark);
}

.diventa-socio-page .role-spacer { flex: 1; }

.diventa-socio-page .role-radio {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	border: 2px solid var(--c-border);
	background: white;
	flex-shrink: 0;
}

.diventa-socio-page .role-radio--selected {
	background: var(--c-primary);
	border-color: var(--c-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.diventa-socio-page .role-radio--selected::after {
	content: '';
	width: 8px;
	height: 8px;
	background: white;
	border-radius: 4px;
}

.diventa-socio-page .role-card__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--c-primary-dark);
	line-height: 1.1;
}

.diventa-socio-page .role-card__desc {
	font-size: 14px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 20px;
}

/* ── Info banner (blue) ───────────────────────────────── */
.diventa-socio-page .info-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--c-primary-tint);
	border-radius: var(--radius-lg);
	padding: 20px;
}

.diventa-socio-page .info-banner__icon {
	flex-shrink: 0;
	width: 28px;
	height: 18px;
	background: var(--c-primary);
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	color: white;
}

.diventa-socio-page .info-banner__text {
	font-size: 14px;
	font-weight: 400;
	color: var(--c-primary-dark);
	line-height: 20px;
}

/* ── Form wrapper ─────────────────────────────────────── */
.diventa-socio-page .form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ── Card (details accordion OR flat div) ─────────────── */
.diventa-socio-page .card {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Flat card head: neutralizza forms.css (.card__head { display:flex; align-items:center; gap:12px; padding:32px; cursor:pointer }) */
.diventa-socio-page .card:not(details) > .card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	cursor: default;
	align-items: stretch;
}

.diventa-socio-page summary.card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.diventa-socio-page summary.card__head::-webkit-details-marker { display: none; }

.diventa-socio-page .card__chevron-wrap {
	flex-shrink: 0;
	width: 32px;
	height: 37px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.diventa-socio-page .card__chevron {
	font-size: 32px;
	font-weight: 700;
	color: var(--c-secondary);
	line-height: 1;
}

.diventa-socio-page .card__chevron::before { content: '▾'; }
.diventa-socio-page details[open] .card__chevron::before { content: '▴'; }

.diventa-socio-page .card__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}

.diventa-socio-page .card__subtitle {
	font-size: 13px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 18px;
	flex: 1;
	min-width: 0;
}

/* ── Card body ────────────────────────────────────────── */
/* padding: 0 resetta forms.css (padding: 0 32px 32px) — qui il padding sta sul wrapper details.card */
.diventa-socio-page .card__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
}

/* ── Form rows ────────────────────────────────────────── */
.diventa-socio-page .form-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.diventa-socio-page .form-row--2col {
	grid-template-columns: repeat(2, 1fr);
}

/* ── Field ────────────────────────────────────────────── */
.diventa-socio-page .field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.diventa-socio-page .field__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--c-gray);
	letter-spacing: 0.5px;
	text-transform: none;
}

.diventa-socio-page .field__input,
.diventa-socio-page .field__select {
	height: 48px;
	padding: 0 16px;
	font-family: var(--font);
	font-size: 15px;
	color: var(--c-text);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	outline: none;
	width: 100%;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.diventa-socio-page .field__input::placeholder { color: var(--c-secondary); }

.diventa-socio-page .field__input:focus,
.diventa-socio-page .field__select:focus {
	border-color: var(--c-primary);
	box-shadow: var(--shadow-focus);
}

.diventa-socio-page .field__select-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.diventa-socio-page .field__select-wrap select {
	padding-right: 32px;
	appearance: none;
}

.diventa-socio-page .field__arrow {
	position: absolute;
	right: 14px;
	font-size: 14px;
	color: var(--c-secondary);
	pointer-events: none;
}

.diventa-socio-page .field__helper {
	font-size: 12px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 1.4;
}

/* ── Section label ────────────────────────────────────── */
.diventa-socio-page .section-label {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 11px;
	color: var(--c-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.diventa-socio-page .section-label strong { font-weight: 700; }
.diventa-socio-page .section-label span   { font-weight: 400; text-transform: none; }

/* ── Upload box ───────────────────────────────────────── */
.diventa-socio-page .upload-box {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: 16px 20px;
}

.diventa-socio-page .upload-box--dashed { border-style: dashed; }

.diventa-socio-page .upload-box__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: var(--c-primary-tint);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.diventa-socio-page .upload-box__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.diventa-socio-page .upload-box__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
}

.diventa-socio-page .upload-box__meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--c-secondary);
}

.diventa-socio-page .upload-box__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ── Button outline small ─────────────────────────────── */
.diventa-socio-page .btn-outline-sm {
	height: 31px;
	padding: 0 16px;
	border-radius: var(--radius-md);
	background: transparent;
	border: 1px solid var(--c-primary);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-primary);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.diventa-socio-page .btn-outline-sm:hover {
	background: var(--c-primary);
	color: white;
}

/* ── Chips ────────────────────────────────────────────── */
.diventa-socio-page .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.diventa-socio-page .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--c-border);
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text);
	cursor: pointer;
	transition: all var(--transition);
}

.diventa-socio-page .chip input { display: none; }

.diventa-socio-page .chip--selected {
	background: var(--c-primary-tint);
	border-color: var(--c-primary);
	color: var(--c-primary);
	font-weight: 600;
}

.diventa-socio-page .chip__check {
	display: none;
	width: 13px;
	height: 13px;
	background: var(--c-primary);
	border-radius: 6.5px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.diventa-socio-page .chip--selected .chip__check { display: inline-flex; }

.diventa-socio-page .chip__check::after {
	content: '';
	display: block;
	width: 6px;
	height: 4px;
	border-left: 1.5px solid white;
	border-bottom: 1.5px solid white;
	transform: rotate(-45deg) translateY(-1px);
}

/* ── Inline box ───────────────────────────────────────── */
.diventa-socio-page .inline-box {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	padding: 10px 16px;
	height: 46px;
}

.diventa-socio-page .inline-box__text {
	flex: 1;
	font-size: 14px;
	font-weight: 400;
	color: var(--c-text);
}

/* ── Time row ─────────────────────────────────────────── */
.diventa-socio-page .time-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.diventa-socio-page .time-row .field__input {
	height: 41px;
	width: 120px;
	flex-shrink: 0;
}

.diventa-socio-page .time-unit-select {
	flex: 1;
	height: 41px;
	padding: 0 12px;
	appearance: none;
	font-family: var(--font);
	font-size: 15px;
	color: var(--c-text);
	background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237F8C8D'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	outline: none;
}

.diventa-socio-page .time-unit-select:focus {
	border-color: var(--c-primary);
	box-shadow: var(--shadow-focus);
}

/* ── Toggle ───────────────────────────────────────────── */
.diventa-socio-page .toggle {
	display: inline-block;
	cursor: pointer;
	flex-shrink: 0;
}

.diventa-socio-page .toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.diventa-socio-page .toggle__track {
	display: flex;
	align-items: center;
	width: 48px;
	height: 26px;
	background: var(--c-border);
	border-radius: var(--radius-pill);
	padding: 3px;
	justify-content: flex-start;
	transition: background var(--transition);
}

.diventa-socio-page .toggle input:checked + .toggle__track {
	background: var(--c-green);
	justify-content: flex-end;
}

.diventa-socio-page .toggle__knob {
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 10px;
	flex-shrink: 0;
}

/* ── Consent rows ─────────────────────────────────────── */
.diventa-socio-page .consent-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 0;
}

.diventa-socio-page .consent-row__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.diventa-socio-page .consent-row__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1;
}

.diventa-socio-page .consent-row__sub {
	font-size: 13px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 18px;
}

.diventa-socio-page .consent-row__sub a { color: var(--c-primary); }

.diventa-socio-page .consent-divider {
	height: 1px;
	background: var(--c-border);
}

/* ── Free banner (verde — SPEC) ───────────────────────── */
.diventa-socio-page .free-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #E6F8ED;
	border: 1px solid #2ECC71;
	border-radius: var(--radius-lg);
	padding: 20px;
}

.diventa-socio-page .free-banner__icon {
	flex-shrink: 0;
	width: 28px;
	height: 18px;
	background: #2ECC71;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	color: white;
}

.diventa-socio-page .free-banner__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.diventa-socio-page .free-banner__title {
	font-size: 17px;
	font-weight: 700;
	color: #229954;
	line-height: 1.2;
}

.diventa-socio-page .free-banner__body {
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text);
	line-height: 18px;
}

/* ── Fatt-head (toggle fatturazione SPEC) ─────────────── */
.diventa-socio-page .fatt-head {
	display: flex;
	align-items: center;
	gap: 24px;
}

.diventa-socio-page .fatt-head__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.diventa-socio-page .fatt-head__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1.2;
}

.diventa-socio-page .fatt-head__sub {
	font-size: 13px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 18px;
}

.diventa-socio-page .card__note {
	font-size: 12px;
	font-weight: 400;
	color: var(--c-secondary);
	line-height: 18px;
	text-align: center;
}

/* ── Submit block ─────────────────────────────────────── */
.diventa-socio-page .submit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.diventa-socio-page .btn-primary {
	width: 100%;
	height: 56px;
	background: var(--c-primary-dark);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-family: var(--font);
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition);
}

.diventa-socio-page .btn-primary:hover { background: #144765; }
.diventa-socio-page .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.diventa-socio-page .submit__note {
	font-size: 12px;
	font-weight: 400;
	color: var(--c-secondary);
	text-align: center;
	line-height: 18px;
}

.diventa-socio-page .submit__note a { color: var(--c-primary); }

/* ── Status badge card head (verbatim Figma 778/779) — 2026-07-15 ──────────
   "Da compilare" = valori Figma esatti. Parziale/Completato derivati dalla
   palette ANMA (Figma documenta la progressione ma disegna solo lo stato
   iniziale). Vedi badge-diventa-socio.js. */
.diventa-socio-page .card__badge {
	flex-shrink: 0;
	margin-left: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
}
.diventa-socio-page .card__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.diventa-socio-page .card__badge-label {
	font-family: var(--f);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.025em;
	line-height: 1;
	white-space: nowrap;
}
.diventa-socio-page .card__badge--todo { background: #FEF5E7; }
.diventa-socio-page .card__badge--todo .card__badge-dot { background: #80BD1B; }
.diventa-socio-page .card__badge--todo .card__badge-label { color: #B97A0E; }
.diventa-socio-page .card__badge--partial { background: #EAF4FB; }
.diventa-socio-page .card__badge--partial .card__badge-dot { background: #2E86C1; }
.diventa-socio-page .card__badge--partial .card__badge-label { color: #1A5276; }
.diventa-socio-page .card__badge--done { background: #DCFCE7; }
.diventa-socio-page .card__badge--done .card__badge-dot { background: #2ECC71; }
.diventa-socio-page .card__badge--done .card__badge-label { color: #1E8449; }

/* ================================================================
   RESPONSIVE — 2026-08-14
   diventa-socio.css non aveva alcuna media query: le due role-card
   affiancate e il wrapper centrato portavano il contenuto a ~504px.
   Gutter 20px come il frame mobile Figma 359:37.
================================================================ */
@media (max-width:767px){
  .diventa-socio-page{align-items:stretch;gap:32px;padding:40px 20px}
  .diventa-socio-page .role-row{flex-direction:column;gap:12px}
  .diventa-socio-page .role-card{width:100%}
  .diventa-socio-page .role-card__top{flex-wrap:wrap;gap:8px}
  .diventa-socio-page .role-badge{white-space:normal}
  .diventa-socio-page .card__badge{white-space:normal;flex-shrink:1;min-width:0}
  .diventa-socio-page .card__badge-label{white-space:normal}
}

/* ---- Responsive mobile 2026-08-14 (secondo giro) ----
   diventa-socio.css ridefinisce .form-row scoped (0,2,0), quindi la
   regola non scoped di forms.css non basta: le 3 colonne restavano.
   La testata a fisarmonica schiacciava il sottotitolo a 8px perche'
   il badge di stato non andava a capo. */
@media (max-width:767px){
  .diventa-socio-page .form-row,
  .diventa-socio-page .form-row--2col{grid-template-columns:1fr;gap:16px}
  .diventa-socio-page summary.card__head{flex-wrap:wrap}
  /* riga 1: chevron + titolo + badge; riga 2: sottotitolo a piena larghezza */
  .diventa-socio-page summary.card__head .card__subtitle{flex:1 1 100%;min-width:100%;order:1}
  .diventa-socio-page summary.card__head .card__badge{margin-left:auto}
  .diventa-socio-page .field__input,
  .diventa-socio-page .field__select{min-width:0}
  .diventa-socio-page .time-row{flex-wrap:wrap}
  .diventa-socio-page .time-row .field__input{width:100%}
}