.loco-discount-fab[hidden] { display: none !important; }
.loco-discount-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    color: #1d4ed8;
    padding: 11px 15px;
    box-shadow: 0 8px 24px rgba(30, 64, 175, .14);
    font: 650 14px/1.2 sans-serif;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.loco-discount-fab:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(30, 64, 175, .2);
}
.loco-discount-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 3px #dbeafe;
}
.loco-discount-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    background: rgba(15, 23, 42, .45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.loco-discount-backdrop.is-open { display: flex; }
.loco-discount-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    color: #1f2937;
    font-family: sans-serif;
}
.loco-discount-modal h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; }
.loco-discount-modal p { margin: 8px 0; color: #4b5563; font-size: 14px; line-height: 1.65; }
.loco-discount-modal strong { color: #111827; }
.loco-discount-qr { display: block; width: min(260px, 75vw); height: auto; margin: 18px auto 8px; border-radius: 8px; }
.loco-discount-close { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; color: #6b7280; font-size: 25px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.loco-discount-note { text-align: center; color: #6b7280 !important; font-size: 13px !important; }
.loco-ratio-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #fafafa;
    color: #4b5563;
    font: 12px/1.45 sans-serif;
}
.loco-ratio-hint-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: #262626;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.loco-ratio-hint-contact { color: #6b7280; }
@media (max-width: 600px) {
    .loco-discount-fab { right: 14px; bottom: 14px; padding: 10px 13px; font-size: 13px; }
    .loco-discount-modal { padding: 24px 18px 18px; }
}