/* ==========================================================================
   Alfa Tech — "Quero vender meu aparelho" (07/10/2026)
   Complementa o modal .alfa-modal do alfa-fase1.css. Só o que é novo:
   chips de estado, a grade das 4 fotos, preview e o estado "enviando".
   ========================================================================== */
#alfa-sell .alfa-modal__box { max-width: 560px; }

/* chips de estado */
.alfa-sell-states { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.alfa-chip {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	margin: 0; padding: 9px 13px; border: 2px solid #e6dcd2; border-radius: 999px;
	background: #faf7f4; font-size: 13px; font-weight: 700; color: #555; cursor: pointer;
	-webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: 1;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.alfa-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.alfa-chip.is-on { border-color: var(--alfa-o, #FF6A00); background: #fff3ea; color: var(--alfa-d, #14110F); }
.alfa-chip:focus-within { outline: 2px solid var(--alfa-o, #FF6A00); outline-offset: 2px; }

/* grade das 4 fotos */
.alfa-sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 4px; }
.alfa-shot {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 5px; min-height: 122px; padding: 10px; text-align: center; cursor: pointer; overflow: hidden;
	border: 2px dashed #d9cdc0; border-radius: 14px; background: #faf7f4;
	transition: border-color .15s ease, background .15s ease; margin: 0;
}
.alfa-shot:hover { border-color: var(--alfa-o, #FF6A00); background: #fff; }
.alfa-shot input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.alfa-shot__ico { font-size: 26px; line-height: 1; }
.alfa-shot__lb { font-size: 12.5px; font-weight: 800; color: #555; line-height: 1.2; }
.alfa-shot__hint { font-size: 11px; color: #9a9088; line-height: 1.2; }
.alfa-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.alfa-shot.is-set { border-style: solid; border-color: #2ea043; background: #000; }
.alfa-shot.is-set .alfa-shot__ico,
.alfa-shot.is-set .alfa-shot__lb,
.alfa-shot.is-set .alfa-shot__hint { display: none; }
.alfa-shot__tag {
	position: absolute; left: 6px; top: 6px; z-index: 2; display: none;
	background: rgba(0,0,0,.62); color: #fff; border-radius: 8px; font-size: 10.5px; font-weight: 800; padding: 3px 7px;
}
.alfa-shot.is-set .alfa-shot__tag { display: block; }
.alfa-shot__redo {
	position: absolute; right: 6px; bottom: 6px; z-index: 3; display: none;
	background: rgba(0,0,0,.62); color: #fff; border: 0; border-radius: 8px;
	font-size: 11px; font-weight: 700; padding: 5px 9px; cursor: pointer;
}
.alfa-shot.is-set .alfa-shot__redo { display: block; }
.alfa-shot.is-loading { border-color: var(--alfa-o, #FF6A00); }
.alfa-shot.is-loading::after {
	content: "…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 34px; color: var(--alfa-o, #FF6A00); background: rgba(250,247,244,.8); z-index: 4;
}
.alfa-sell-help { font-size: 11.5px; color: #9a9088; margin: 4px 0 14px; line-height: 1.4; }

/* aviso de pré-avaliação sem compromisso */
.alfa-sell-disc {
	font-size: 12px; line-height: 1.5; color: #2f5d33;
	background: #f0f7ef; border: 1px solid #cfe6cf; border-radius: 12px; padding: 10px 12px; margin: 2px 0 14px;
}

/* botão enviando */
.alfa-btn[aria-busy=true] { opacity: .72; pointer-events: none; }

@media (max-width: 767px) {
	.alfa-sell-grid { gap: 8px; }
	.alfa-shot { min-height: 108px; }
}