/**
 * Shared CSS for TB Counter — used by both frontend and admin
 * Include BEFORE page-specific styles.
 */

/* Toast notifications */
.toast-container { position:fixed; top:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:8px; }
.toast { display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px; color:#fff; font-size:0.88rem; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,0.15); animation:toastIn 0.3s ease; min-width:220px; }
.toast-success { background:linear-gradient(135deg,#27ae60,#2ecc71); }
.toast-error { background:linear-gradient(135deg,#c0392b,#e74c3c); }
.toast-info { background:linear-gradient(135deg,#2c3e50,#34495e); }
.toast.leaving { opacity:0; transform:translateX(20px); transition:all 0.3s; }
@keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }

/* Overlay / Loading spinner */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99998; align-items:center; justify-content:center; }
.overlay.visible { display:flex; }
.overlay-box { background:#fff; border-radius:14px; padding:32px 40px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.spinner { width:36px; height:36px; border:4px solid #e0e0e0; border-top-color:#2563eb; border-radius:50%; animation:sharedSpin 0.8s linear infinite; margin:0 auto 12px; }
@keyframes sharedSpin { to { transform:rotate(360deg); } }

/* Badge styles */
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.badge-active { background:rgba(39,174,96,0.15); color:#27ae60; }
.badge-inactive { background:rgba(149,165,166,0.15); color:#7f8c8d; }
.badge-pinned { background:rgba(52,152,219,0.15); color:#2980b9; }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:24px; transition:0.2s; }
.toggle .slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
.toggle input:checked + .slider { background:#2563eb; }
.toggle input:checked + .slider:before { transform:translateX(20px); }