/* =============================
   Bobo Food - Global Styles
   ============================= */

h1:focus { outline: none; }

/* Scrollbar oculta */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* Autofill override para inputs escuros */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #2C2C2E inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
}

/* Remove tap highlight no mobile */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: .7; }
}

.animate-fade-in  { animation: fadeIn 0.35s ease-out; }
.animate-slide-in { animation: slideInLeft 0.25s ease-out; }
.animate-pulse-dot{ animation: pulse-dot 0.6s ease-in-out; }

/* OTP boxes */
.otp-box {
    width: 60px;
    height: 64px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    background: #2C2C2E;
    border: 1.5px solid #48484A;
    border-radius: 14px;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
    caret-color: #57C457;
}
.otp-box:focus  { border-color: #57C457; }
.otp-box.filled { border-color: #57C457; background: #252A25; }

/* Safe area bottom (iOS) */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Sidebar button — estado ativo (controlado via JS) */
#sidebar-btn.sidebar-active { color: #57C457; }
#sidebar-btn.sidebar-active .sidebar-dot { display: block; }

/* Blazor validation styles */
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { border-color: #FF453A !important; }
.validation-message { color: #FF453A; font-size: 0.75rem; margin-top: 4px; }
.field-validation-error { color: #FF453A; font-size: 0.75rem; margin-top: 4px; display: block; }
.validation-errors, .validation-summary-errors > ul {
    list-style: none; padding: 0; margin: 0;
}
.validation-errors li,
.validation-summary-errors > ul > li { color: #FF453A; font-size: 0.75rem; }
.input-validation-error { border-color: #FF453A !important; }

/* Toggle switch */
.toggle-track {
    width: 48px; height: 26px;
    background: #3A3A3C;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-track.on { background: #57C457; }
.toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: white;
    border-radius: 9999px;
    transition: transform 0.2s;
}
.toggle-track.on .toggle-thumb { transform: translateX(22px); }

/* Blazor reconnect / error */
#components-reconnect-modal { display: none; }
#blazor-error-ui { display: none; }

/* Discount badge */
.badge-discount {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: #FF9F0A22;
    color: #FF9F0A;
    letter-spacing: 0.02em;
}

/* Star rating */
.star { cursor: pointer; transition: transform 0.1s; }
.star:hover { transform: scale(1.15); }