widget.css

/* ─── Floating Nutrition Widget ──────────────────────────────────────── */
.nutrition-widget {
    position: absolute; bottom: -2rem; right: 2rem; background: var(--surface);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px;
    padding: 1.5rem; width: 320px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid var(--border); z-index: 3;
    animation: floatUp 1s ease-out;
}
@keyframes floatUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.widget-header h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.widget-header svg { color: var(--text-muted); }
.widget-content { display: flex; align-items: center; gap: 1.5rem; }

.donut-chart { position: relative; width: 90px; height: 90px; }
.circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; }
.circle-bg { fill: none; stroke: rgba(0,0,0,0.05); stroke-width: 3.5; }
[data-theme="dark"] .circle-bg { stroke: rgba(255,255,255,0.05); }

.circular-chart path:not(.circle-bg) { fill: none; stroke-width: 3.5; stroke-linecap: round; animation: donut-fill 1s ease-out forwards; }
@keyframes donut-fill { from { stroke-dasharray: 0, 100; } }

.circle-protein { stroke: #28a745; }
.circle-carbs   { stroke: #ffc107; }
.circle-fats    { stroke: #6f42c1; }
.circle-fiber   { stroke: #20c997; }

.donut-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; }
.donut-title { font-size: 0.75rem; font-weight: 700; color: var(--green-dark); }
[data-theme="dark"] .donut-title { color: var(--green-accent); }
.donut-subtitle { font-size: 0.6rem; color: var(--text-secondary); }

.macro-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.macro-list li { display: flex; align-items: center; font-size: 0.8rem; color: var(--text-secondary); }
.macro-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; }
.dot-protein { background: #28a745; }
.dot-carbs   { background: #ffc107; }
.dot-fats    { background: #6f42c1; }
.dot-fiber   { background: #20c997; }
.macro-name { flex: 1; }
.macro-val { font-weight: 700; color: var(--text-primary); }

.widget-footer { margin-top: 1.25rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ─── Bottom Trust Bar ──────────────────────────────────────────────── */
.bottom-trust-bar {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem;
    background: var(--surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border); padding: 1rem 2.5rem; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 5;
    animation: floatUp 1.2s ease-out;
}
.trust-item { display: flex; align-items: center; gap: 0.75rem; }
.trust-item svg { width: 20px; height: 20px; color: var(--green-dark); }
[data-theme="dark"] .trust-item svg { color: var(--green-accent); }
.trust-text { display: flex; flex-direction: column; }
.trust-text strong { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.trust-text span { font-size: 0.75rem; color: var(--text-secondary); }

@media (max-width: 1200px) {
    .nutrition-widget { display: none; }
    .bottom-trust-bar { display: none; }
}