/* VERSÃO DO ARQUIVO: 1.0.3 - Separa hover de foco visivel e unifica sombra neutra nos temas */

:root{
--fj-stepper-bg:linear-gradient(135deg,rgba(248,249,250,0.96),rgba(255,255,255,0.98));
--fj-stepper-border:rgba(0,114,188,0.16);
--fj-stepper-border-hover:rgba(0,114,188,0.28);
--fj-stepper-border-focus:rgba(0,166,81,0.28);
--fj-stepper-shadow:0 0.85rem 1.9rem rgba(0,114,188,0.12);
--fj-stepper-focus-shadow:0 0 0 0.22rem rgba(0,166,81,0.08);
--fj-stepper-btn-base-bg:rgba(0,114,188,0.08);
--fj-stepper-btn-base-color:var(--primary-blue);
--fj-stepper-btn-minus-bg:rgba(220,53,69,0.08);
--fj-stepper-btn-minus-bg-hover:rgba(220,53,69,0.16);
--fj-stepper-btn-minus-color:#d9485f;
--fj-stepper-btn-minus-color-hover:#c73349;
--fj-stepper-btn-minus-hover-shadow:0 0.45rem 0.85rem rgba(0,0,0,0.12);
--fj-stepper-btn-plus-bg:rgba(0,166,81,0.1);
--fj-stepper-btn-plus-bg-hover:rgba(0,166,81,0.18);
--fj-stepper-btn-plus-color:var(--primary-green);
--fj-stepper-btn-plus-color-hover:#008f4a;
--fj-stepper-btn-plus-hover-shadow:0 0.45rem 0.85rem rgba(0,0,0,0.12);
--fj-stepper-btn-focus-outline:rgba(0,166,81,0.45);
--fj-stepper-input-color:var(--dark-gray);
--fj-stepper-placeholder-color:var(--medium-gray);
}

[data-theme="dark"]{
--fj-stepper-bg:linear-gradient(135deg,rgba(33,33,33,0.96),rgba(45,45,45,0.98));
--fj-stepper-border:rgba(160,160,160,0.16);
--fj-stepper-border-hover:rgba(160,160,160,0.24);
--fj-stepper-border-focus:rgba(0,166,81,0.28);
--fj-stepper-shadow:0 1rem 2rem rgba(0,0,0,0.28);
--fj-stepper-focus-shadow:0 0 0 0.22rem rgba(0,166,81,0.08);
--fj-stepper-btn-base-bg:rgba(0,114,188,0.1);
--fj-stepper-btn-base-color:#cfe3f1;
--fj-stepper-btn-minus-bg:rgba(220,53,69,0.14);
--fj-stepper-btn-minus-bg-hover:rgba(220,53,69,0.24);
--fj-stepper-btn-minus-color:#ff8a9a;
--fj-stepper-btn-minus-color-hover:#ffb3be;
--fj-stepper-btn-minus-hover-shadow:0 0.45rem 0.85rem rgba(0,0,0,0.18);
--fj-stepper-btn-plus-bg:rgba(0,166,81,0.16);
--fj-stepper-btn-plus-bg-hover:rgba(0,166,81,0.26);
--fj-stepper-btn-plus-color:#6ae3a0;
--fj-stepper-btn-plus-color-hover:#8ef0b8;
--fj-stepper-btn-plus-hover-shadow:0 0.45rem 0.85rem rgba(0,0,0,0.18);
--fj-stepper-btn-focus-outline:rgba(106,227,160,0.55);
--fj-stepper-input-color:#e9ecef;
--fj-stepper-placeholder-color:#adb5bd;
}

.fj-stepper{position:relative;display:grid;grid-template-columns:minmax(2.75rem,3rem) minmax(0,1fr) minmax(2.75rem,3rem);align-items:center;gap:.55rem;padding:.42rem;border:1px solid var(--fj-stepper-border);border-radius:.85rem;background:var(--fj-stepper-bg);box-shadow:var(--fj-stepper-shadow);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.fj-stepper:hover{border-color:var(--fj-stepper-border-hover);transform:translateY(-1px)}
.fj-stepper:focus-within{border-color:var(--fj-stepper-border-focus);box-shadow:var(--fj-stepper-focus-shadow),var(--fj-stepper-shadow);transform:translateY(-1px)}
.fj-stepper-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:2.45rem;padding:0;border:none;border-radius:.72rem;font-size:1.3rem;font-weight:700;line-height:0;background:var(--fj-stepper-btn-base-bg);color:var(--fj-stepper-btn-base-color);box-shadow:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,outline-color .2s ease}
.fj-stepper-btn>span{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1;pointer-events:none}
.fj-stepper-btn-decrement>span{transform:translateY(-0.06em)}
.fj-stepper-btn-increment>span{transform:translateY(-0.02em)}
.fj-stepper-btn-decrement{background:var(--fj-stepper-btn-minus-bg);color:var(--fj-stepper-btn-minus-color)}
.fj-stepper-btn-increment{background:var(--fj-stepper-btn-plus-bg);color:var(--fj-stepper-btn-plus-color)}
.fj-stepper-btn-decrement:focus-visible:not(:disabled),.fj-stepper-btn-increment:focus-visible:not(:disabled){outline:2px solid var(--fj-stepper-btn-focus-outline);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
.fj-stepper-btn-decrement:hover:not(:disabled){transform:translateY(-1px);outline:none;background:var(--fj-stepper-btn-minus-bg-hover);color:var(--fj-stepper-btn-minus-color-hover);box-shadow:var(--fj-stepper-btn-minus-hover-shadow)}
.fj-stepper-btn-increment:hover:not(:disabled){transform:translateY(-1px);outline:none;background:var(--fj-stepper-btn-plus-bg-hover);color:var(--fj-stepper-btn-plus-color-hover);box-shadow:var(--fj-stepper-btn-plus-hover-shadow)}
.fj-stepper:has(.fj-stepper-input:focus) .fj-stepper-btn-decrement:not(:hover),.fj-stepper:has(.fj-stepper-input:focus) .fj-stepper-btn-increment:not(:hover),.fj-stepper:has(.fj-stepper-btn-increment:focus) .fj-stepper-btn-decrement:not(:hover),.fj-stepper:has(.fj-stepper-btn-decrement:focus) .fj-stepper-btn-increment:not(:hover){transform:none;box-shadow:none}
.fj-stepper:has(.fj-stepper-input:focus) .fj-stepper-btn-decrement:not(:hover),.fj-stepper:has(.fj-stepper-btn-increment:focus) .fj-stepper-btn-decrement:not(:hover){background:var(--fj-stepper-btn-minus-bg);color:var(--fj-stepper-btn-minus-color)}
.fj-stepper:has(.fj-stepper-input:focus) .fj-stepper-btn-increment:not(:hover),.fj-stepper:has(.fj-stepper-btn-decrement:focus) .fj-stepper-btn-increment:not(:hover){background:var(--fj-stepper-btn-plus-bg);color:var(--fj-stepper-btn-plus-color)}
}
.fj-stepper-btn:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}
.fj-stepper-input{width:100%;min-width:0;padding:0;border:none;background:transparent;box-shadow:none;text-align:center;font-size:1.08rem;font-weight:700;color:var(--fj-stepper-input-color);appearance:textfield;-moz-appearance:textfield}
.fj-stepper-input:hover,.fj-stepper-input:focus{border:none;background:transparent;box-shadow:none;transform:none;outline:none}
.fj-stepper-input::-webkit-outer-spin-button,.fj-stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fj-stepper-input::placeholder{font-size:.82rem;font-weight:500;opacity:.72;color:var(--fj-stepper-placeholder-color)}
.fj-stepper--compact{width:min(216px,100%);margin-left:auto}
@media (max-width:768px){
.fj-stepper{gap:.5rem}
.fj-stepper--compact{width:100%;margin-left:0}
.fj-stepper-btn{min-height:2.3rem;font-size:1.2rem}
.fj-stepper-input{font-size:1rem}
}
@media (max-width:480px){
.fj-stepper{grid-template-columns:2.55rem minmax(0,1fr) 2.55rem;padding:.38rem;gap:.42rem}
.fj-stepper-btn{min-height:2.15rem;font-size:1.1rem}
.fj-stepper-input{font-size:.95rem}
}
