/* RNR Barcode Scanner - (c) RNR Solutions */
#rnrbs-fab {
    position: fixed;
    bottom: 24px;
    z-index: 1030;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: var(--rnrbs-color, #e6007e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease;
}
#rnrbs-fab:hover, #rnrbs-fab:focus-visible { transform: scale(1.06); }
#rnrbs-fab:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
#rnrbs-fab.rnrbs-right { right: 20px; }
#rnrbs-fab.rnrbs-left { left: 20px; }
@media (min-width: 992px) and (hover: hover) {
    #rnrbs-fab.rnrbs-mobile-only { display: none; }
}

html.rnrbs-open, html.rnrbs-open body { overflow: hidden; }

#rnrbs-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 20, 40, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#rnrbs-modal[hidden] { display: none; }
#rnrbs-modal, #rnrbs-modal *, #rnrbs-modal *::before, #rnrbs-modal *::after { box-sizing: border-box; }
#rnrbs-modal [hidden] { display: none !important; }

.rnrbs-sheet {
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    color: #222;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    font-size: 16px;
    line-height: 1.4;
}
@media (min-width: 576px) {
    #rnrbs-modal { align-items: center; }
    .rnrbs-sheet { border-radius: 16px; max-height: 92vh; }
}

.rnrbs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rnrbs-head h2 { margin: 0; font-size: 1.3rem; font-weight: 600; }
.rnrbs-close {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #f1f2f6; color: #333; font-size: 28px; line-height: 1; cursor: pointer;
}

.rnrbs-video {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 55vh;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}
.rnrbs-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rnrbs-frame {
    position: absolute; inset: 7%;
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: 8px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .18);
}
.rnrbs-laser {
    position: absolute; left: 10%; right: 10%; top: 50%; height: 2px;
    background: var(--rnrbs-color, #e6007e);
    box-shadow: 0 0 8px var(--rnrbs-color, #e6007e);
    animation: rnrbs-laser 2s ease-in-out infinite;
}
@keyframes rnrbs-laser { 0%, 100% { top: 18%; } 50% { top: 82%; } }
@media (prefers-reduced-motion: reduce) { .rnrbs-laser { animation: none; } }

.rnrbs-hint { text-align: center; color: #555; margin: 12px 0 4px; }
.rnrbs-message { text-align: center; color: #b00020; margin: 8px 0 0; font-weight: 500; }
.rnrbs-or { display: flex; align-items: center; gap: 12px; color: #888; margin: 16px 0; }
.rnrbs-or::before, .rnrbs-or::after { content: ""; flex: 1; border-top: 1px solid #ddd; }

.rnrbs-manual { display: flex; gap: 8px; }
.rnrbs-manual input {
    flex: 1; min-width: 0; height: 48px; padding: 0 14px;
    border: 1px solid #ccd; border-radius: 10px; font-size: 16px;
}
.rnrbs-manual button, .rnrbs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px;
    background: var(--rnrbs-color, #e6007e); color: #fff !important;
    font-weight: 600; font-size: 15px; text-decoration: none !important; cursor: pointer;
}
.rnrbs-btn:disabled { opacity: .6; }
.rnrbs-btn-ghost { background: #fff; color: #222 !important; border: 1px solid #ccd; }

.rnrbs-card { border: 1px solid #e3e4ea; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.rnrbs-top { display: flex; gap: 12px; }
.rnrbs-top img, .rnrbs-noimg {
    width: 84px; height: 84px; flex: none; object-fit: contain; border-radius: 8px; background: #f5f6f8;
}
.rnrbs-info { min-width: 0; }
.rnrbs-name { display: block; color: #222 !important; font-weight: 600; word-break: break-word; }
.rnrbs-sku { color: #777; font-size: 13px; }
.rnrbs-price { font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.rnrbs-stock { font-size: 13px; color: #777; }
.rnrbs-stock-2 { color: #1e8e3e; }
.rnrbs-stock-1 { color: #c77700; }
.rnrbs-stock-0 { color: #b00020; }
.rnrbs-note { color: #555; font-size: 14px; margin: 10px 0; }
.rnrbs-card > .rnrbs-btn { width: 100%; }

.rnrbs-buy { display: flex; gap: 8px; margin-top: 12px; }
.rnrbs-buy .rnrbs-btn { flex: 1; }
.rnrbs-qty { display: flex; border: 1px solid #ccd; border-radius: 10px; overflow: hidden; }
.rnrbs-qty button { width: 40px; border: 0; background: #f1f2f6; font-size: 20px; cursor: pointer; color: #222; }
.rnrbs-qty input {
    width: 56px; border: 0; text-align: center; font-size: 16px; -moz-appearance: textfield; appearance: textfield;
}
.rnrbs-qty input::-webkit-outer-spin-button, .rnrbs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rnrbs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rnrbs-count, .rnrbs-empty { margin: 4px 0 12px; }
.rnrbs-empty { text-align: center; padding: 16px 0; }

.rnrbs-success { text-align: center; padding: 12px 0; }
.rnrbs-check {
    width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%;
    background: #1e8e3e; color: #fff; font-size: 30px; line-height: 56px;
}

.rnrbs-spinner {
    width: 40px; height: 40px; margin: 40px auto;
    border: 4px solid #e3e4ea; border-top-color: var(--rnrbs-color, #e6007e); border-radius: 50%;
    animation: rnrbs-spin .8s linear infinite;
}
@keyframes rnrbs-spin { to { transform: rotate(360deg); } }