/*!
* Hello Rodolfo — Quantity Pill Styles
*
* Stili del counter pill [− qty +] per vista card e vista lista.
* Replica esatta del design approvato: cerchi 48px, bordo sottile,
* pulsante "+" pieno colore terra, numero centrale serif.
*
* Copyright © 2026 Ivanov Hristo. All rights reserved.
* Proprietary license — Unauthorized use prohibited.
*/

/* ═══════════════════════════════════════════════════════════════
* PILL CONTAINER (vista card #mp-cam + vista lista .lista-qty-pill)
* ═══════════════════════════════════════════════════════════════ */

#mp-cam.is-pill,
.lista-qty-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 6px 10px;
border: 1px solid rgba(77, 75, 54, 0.22);
border-radius: 999px;
background: transparent;
min-width: 180px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#mp-cam.is-pill {
/* Sovrascrive gli stili button quando in modalità pill */
background: transparent !important;
color: inherit;
cursor: default;
padding: 8px !important;
min-width: 0 !important;
font-size: inherit;
letter-spacing: 0;
text-transform: none;
}

#mp-cam.is-pill:hover {
border-color: rgba(77, 75, 54, 0.4);
box-shadow: 0 2px 8px rgba(77, 75, 54, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
* VARIANTE COMPATTA — vista lista
* Pill ridotto per non dominare le card item
* ═══════════════════════════════════════════════════════════════ */

.lista-qty-pill {
gap: var(--sp-2, 10px);
padding: 4px 6px;
min-width: 130px;
max-width: 170px;
margin-top: 4px;
}

.lista-qty-pill .mp-qty-btn {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 16px;
}

.lista-qty-pill .mp-qty-num {
font-size: 16px;
min-width: 20px;
}

/* ═══════════════════════════════════════════════════════════════
* BOTTONI CIRCOLARI − / +
* ═══════════════════════════════════════════════════════════════ */

.mp-qty-btn {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
border: 1px solid rgba(77, 75, 54, 0.3);
background: transparent;
color: var(--grafite, #2c2c2c);
font-size: 22px;
font-weight: 400;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.15s ease;
font-family: inherit;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.mp-qty-btn:hover:not(:disabled) {
transform: scale(1.06);
border-color: rgba(77, 75, 54, 0.5);
}

.mp-qty-btn:active:not(:disabled) {
transform: scale(0.94);
}

.mp-qty-btn:focus-visible {
outline: 2px solid var(--terra, #4d4b36);
outline-offset: 3px;
}

/* ── Pulsante MINUS: cerchio vuoto, bordo sottile ── */
.mp-qty-btn.minus {
background: transparent;
color: var(--grafite, #2c2c2c);
}

.mp-qty-btn.minus:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}

/* ── Pulsante PLUS: cerchio pieno color terra/oliva ── */
.mp-qty-btn.plus {
background: var(--terra, #4d4b36);
color: #fff;
border-color: var(--terra, #4d4b36);
font-weight: 500;
}

.mp-qty-btn.plus:hover:not(:disabled) {
background: var(--terra-scuro, #3d3b2a);
border-color: var(--terra-scuro, #3d3b2a);
}

/* ═══════════════════════════════════════════════════════════════
* NUMERO CENTRALE
* ═══════════════════════════════════════════════════════════════ */

.mp-qty-num {
font-family: 'OptimaLTPro', Georgia, 'Times New Roman', serif;
font-size: 22px;
font-weight: 400;
color: var(--grafite, #2c2c2c);
min-width: 32px;
text-align: center;
line-height: 1;
letter-spacing: 0.02em;
flex: 0;
user-select: none;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animazione pulse quando il numero cambia */
.mp-qty-num.is-pulse {
animation: qtyPulse 0.35s ease;
}

@keyframes qtyPulse {
0%   { transform: scale(1); }
40%  { transform: scale(1.25); color: var(--terra, #4d4b36); }
100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
* ANIMAZIONE SWAP BUTTON ↔ PILL
* ═══════════════════════════════════════════════════════════════ */

#mp-cam {
transition: all 0.25s ease;
}

#mp-cam.is-pill {
animation: pillIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pillIn {
0%   { transform: scale(0.92); opacity: 0.6; }
60%  { transform: scale(1.03); opacity: 1; }
100% { transform: scale(1);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
* RESPONSIVE
* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
#mp-cam.is-pill {
	min-width: 160px;
	gap: var(--sp-2, 12px);
	padding: 5px 8px;
}

#mp-cam.is-pill .mp-qty-btn {
	width: 44px;
	height: 44px;
	min-width: 44px;
	font-size: 20px;
}

#mp-cam.is-pill .mp-qty-num {
	font-size: 20px;
	min-width: 28px;
}

.lista-qty-pill {
	min-width: 120px;
	max-width: 160px;
	gap: 8px;
	padding: 3px 5px;
}

.lista-qty-pill .mp-qty-btn {
	width: 30px;
	height: 30px;
	min-width: 30px;
	font-size: 15px;
}

.lista-qty-pill .mp-qty-num {
	font-size: 15px;
}
}

/* ═══════════════════════════════════════════════════════════════
* ACCESSIBILITY
* ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
#mp-cam,
.mp-qty-btn,
.mp-qty-num {
	transition: none;
	animation: none;
}

#mp-cam.is-pill {
	animation: none;
}

.mp-qty-num.is-pulse {
	animation: none;
}
}