/* Smart Buttons – Frontend CSS v1.2 */

.sb-btn, .sb-btn *, .sb-btn::before, .sb-btn::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sb-btn {
    --sb-bg:     #2563eb;
    --sb-color:  #ffffff;
    --sb-border: #2563eb;
    --sb-radius: 8px;

    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.45em;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    text-decoration: none;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight:     600;
    font-style:      normal;
    letter-spacing:  0.02em;
    line-height:     1;
    border-radius:   var(--sb-radius);
    border:          2px solid var(--sb-border);
    transition:      transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-font-smoothing: antialiased;
    text-shadow:     none;
    white-space:     nowrap;
    vertical-align:  middle;
}

/* TAMANHOS */
.sb-size-sm { font-size: 0.78rem; padding: 0.45em 1.0em; }
.sb-size-md { font-size: 0.95rem; padding: 0.65em 1.5em; }
.sb-size-lg { font-size: 1.1rem;  padding: 0.8em  1.9em; }
.sb-size-xl { font-size: 1.3rem;  padding: 1.0em  2.4em; }

/* ESTILOS VISUAIS */
.sb-style-solid   { background: var(--sb-bg); color: var(--sb-color); }
.sb-style-outline { background: transparent;  color: var(--sb-border); border-color: var(--sb-border); }
.sb-style-ghost   { background: transparent;  color: var(--sb-color);  border-color: transparent; }
.sb-style-gradient {
    background: linear-gradient(135deg, var(--sb-bg) 0%, color-mix(in srgb, var(--sb-bg) 60%, var(--sb-border)) 100%);
    color: var(--sb-color);
    border: none;
}

.sb-style-solid:hover    { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--sb-bg) 45%, transparent); }
.sb-style-outline:hover  { background: var(--sb-border); color: #fff; transform: translateY(-2px); }
.sb-style-ghost:hover    { background: color-mix(in srgb, var(--sb-bg) 12%, transparent); transform: translateY(-1px); }
.sb-style-gradient:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--sb-bg) 50%, transparent); }

/* ÍCONE */
.sb-icon { display: inline-flex; align-items: center; line-height: 1; }

/* SHINE */
.sb-shine-effect {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%);
    transform: translateX(-150%); pointer-events: none; border-radius: inherit;
}

/* ANIMAÇÕES */
@keyframes sb-pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-bg) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes sb-shine-pass { 0% { transform: translateX(-150%); } 60% { transform: translateX(150%); } 100% { transform: translateX(150%); } }
@keyframes sb-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } 60% { transform: translateY(-4px); } }
@keyframes sb-shake { 0%, 100% { transform: rotate(0deg); } 10% { transform: rotate(-4deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 50% { transform: rotate(0deg); } }
@keyframes sb-flip { 0%, 100% { transform: perspective(200px) rotateX(0deg); } 30% { transform: perspective(200px) rotateX(15deg); } 60% { transform: perspective(200px) rotateX(-8deg); } }
@keyframes sb-glow { 0%, 100% { box-shadow: 0 0 8px 2px color-mix(in srgb, var(--sb-bg) 50%, transparent); } 50% { box-shadow: 0 0 22px 6px color-mix(in srgb, var(--sb-bg) 70%, transparent); } }

.sb-anim-pulse  { animation: sb-pulse-ring 2s ease infinite; }
.sb-anim-shine .sb-shine-effect { animation: sb-shine-pass 2.5s ease infinite; }
.sb-anim-bounce { animation: sb-bounce 1.8s ease infinite; }
.sb-anim-shake  { animation: sb-shake 3s ease infinite; }
.sb-anim-flip   { animation: sb-flip 3s ease infinite; }
.sb-anim-glow   { animation: sb-glow 2s ease-in-out infinite; }

/* ALINHAMENTO — wrapper em torno do botão */
.sb-align-wrap         { display: block; width: 100%; }
.sb-align-wrap-left    { text-align: left !important; }
.sb-align-wrap-center  { text-align: center !important; }
.sb-align-wrap-right   { text-align: right !important; }