/* ══ BORSA Sport — Dopunski CSS v4 ═══════════════════════════════════ Dodajte NAKON dashboard.css u oba dashboarda ═════════════════════════════════════════════════════════════════════ */ /* ── Live notification toast (top-right) ───────────────────────── */ .bs-live-notif { position: fixed; top: calc(var(--topbar-h) + 12px); right: 16px; z-index: 500; background: var(--blue); color: var(--yellow); font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,53,128,0.3); border: 1px solid rgba(245,196,0,0.3); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* ── New row flash animation ────────────────────────────────────── */ @keyframes bs-row-flash { 0% { background: rgba(245,196,0,0.15); } 100% { background: transparent; } } .bs-row-new { animation: bs-row-flash 2s ease both; } .bs-mini-new { animation: bs-card-in 0.35s cubic-bezier(0.16,1,0.3,1) both, bs-row-flash 3s ease 0.35s both; } /* ── Redemption UI ──────────────────────────────────────────────── */ .bs-redeem-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-top: 16px; animation: bs-card-in 0.35s cubic-bezier(0.16,1,0.3,1) both; } .bs-redeem-header { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #f0f4f8; margin-bottom: 14px; } .bs-redeem-check { width: 44px; height: 44px; border-radius: 12px; background: #F0FFF4; color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0; } .bs-redeem-member { font-size: 16px; font-weight: 800; color: #1a202c; } .bs-redeem-card-id { font-size: 18px; font-weight: 800; letter-spacing: 4px; color: var(--blue); font-family: 'SF Mono', monospace; } .bs-redeem-details { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; } .bs-redeem-pts { font-size: 13px; color: #718096; } .bs-redeem-pts strong { color: #1a202c; } .bs-redeem-discount { display: inline-flex; align-items: center; gap: 6px; background: #FFF5F5; color: var(--red); border: 1px solid #FED7D7; padding: 6px 14px; border-radius: 8px; font-size: 13px; } .bs-redeem-award { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow-pale); color: var(--yellow-d); border: 1px solid #FBD38D; padding: 6px 14px; border-radius: 8px; font-size: 13px; } .bs-redeem-desc { font-size: 12px; color: #718096; font-style: italic; } .bs-redeem-actions { display: flex; gap: 10px; } .bs-redeem-success { text-align: center; padding: 24px; background: linear-gradient(135deg, #F0FFF4, #fff); border: 1px solid #C6F6D5; border-radius: var(--radius-lg); margin-top: 16px; } .bs-redeem-success-icon { font-size: 40px; margin-bottom: 10px; } .bs-redeem-success-title { font-size: 18px; font-weight: 800; color: var(--green); margin-bottom: 6px; } .bs-redeem-success-msg { font-size: 13px; color: #718096; } /* ── Pending redemptions ────────────────────────────────────────── */ .bs-pending-red { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f7f8fa; flex-wrap: wrap; animation: bs-card-in 0.3s ease both; } .bs-pending-red:last-child { border-bottom: none; } .bs-pending-red-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } /* ── QR points badge ────────────────────────────────────────────── */ .bs-qr-pts-badge { display: inline-block; background: linear-gradient(135deg, var(--yellow), #ffd55f); color: var(--blue); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; margin-bottom: 6px; box-shadow: 0 2px 6px rgba(245,196,0,0.3); } /* ── Redemption badge on nav ────────────────────────────────────── */ .bs-redeem-nav-badge { display: none; width: 18px; height: 18px; background: var(--red); color: #fff; border-radius: 50%; font-size: 10px; font-weight: 800; align-items: center; justify-content: center; margin-left: auto; } /* ── Reward type selector ───────────────────────────────────────── */ .bs-reward-type-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .bs-reward-type-btn { padding: 7px 14px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 8px; background: #f8fafc; cursor: pointer; color: #4a5568; transition: all 0.15s; font-family: inherit; } .bs-reward-type-btn:hover { border-color: var(--blue); color: var(--blue); } .bs-reward-type-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); } /* Discount fields (shown conditionally) */ .bs-discount-fields { background: #f8fafc; border-radius: 10px; padding: 14px; border: 1.5px solid var(--border); margin-top: 8px; } /* ── Member per-partner points (member dashboard) ───────────────── */ .bsm-partner-pts-card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); animation: bsm-fadein 0.3s ease both; } .bsm-pp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .bsm-pp-name { font-size: 14px; font-weight: 700; } .bsm-pp-pts { font-size: 20px; font-weight: 800; color: var(--blue); } .bsm-pp-bar-track { height: 6px; background: #edf2f7; border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .bsm-pp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-l)); border-radius: 3px; transition: width 1s ease; } .bsm-pp-rewards { display: flex; flex-wrap: wrap; gap: 6px; } .bsm-pp-reward-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; border: 1px solid; } .bsm-pp-reward-available { background: #F0FFF4; color: var(--green); border-color: #C6F6D5; } .bsm-pp-reward-locked { background: #f7fafc; color: #a0aec0; border-color: #e2e8f0; } .bsm-pp-next { font-size: 11px; color: #a0aec0; margin-top: 6px; } /* ── bs-text-red (partner redemption cost indicator) ────────────── */ .bs-text-red { color: var(--red); font-weight: 600; }