Al-Baseera

/* FAB Styles */ .fab-container { position: fixed; bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px); right: 16px; z-index: 1001; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; } .fab-main-btn { width: 56px; height: 56px; border-radius: 28px; background: var(--primary); color: white; border: none; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-tap-highlight-color: transparent; } .fab-main-btn:active { transform: scale(0.95); } .fab-container.active .fab-main-btn { transform: rotate(45deg); background: var(--danger); } .fab-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; } .fab-container.active .fab-actions { opacity: 1; pointer-events: auto; transform: translateY(0); } .fab-action-btn { display: flex; align-items: center; gap: 12px; text-decoration: none; transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-delay: var(--delay, 0ms); } .fab-container.active .fab-action-btn { transform: scale(1); } .fab-label { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .fab-icon { width: 44px; height: 44px; border-radius: 22px; background: var(--bg-card); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--primary); } /* Utility Colors */ .bg-green-100 { background-color: #dcfce7; } .text-green-600 { color: #16a34a; } .bg-blue-100 { background-color: #dbeafe; } .text-blue-600 { color: #2563eb; } .bg-purple-100 { background-color: #f3e8ff; } .text-purple-600 { color: #9333ea; } .bg-orange-100 { background-color: #ffedd5; } .text-orange-600 { color: #ea580c; }