/* ═══════════════════════════════════════════════════════════════
   COMPONENTS.CSS - UI Components
   Max 300 Lines | GrowTycoon
   ═══════════════════════════════════════════════════════════════ */

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-smooth);
}

.btn-primary {
    background: var(--neon-green);
    color: var(--dark-bg);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    background: white;
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-primary:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
}

.btn-secondary:hover {
    background: var(--neon-green);
    color: var(--dark-bg);
}

/* ─── Upgrade Card ─── */
.upgrade-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: border-color var(--duration-fast);
}

.upgrade-card:hover {
    border-color: var(--neon-green);
}

.upgrade-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.upgrade-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    background: var(--gray-200);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    overflow: hidden;
}

.upgrade-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.upgrade-info {
    flex: 1;
    min-width: 0;
}

.upgrade-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: white;
    margin-bottom: var(--space-1);
}

.upgrade-effect {
    font-size: var(--text-sm);
    color: var(--neon-green);
}

.upgrade-owned {
    font-size: var(--text-xs);
    color: var(--gray-400);
}

.upgrade-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.upgrade-price {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--neon-green);
}

.upgrade-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

/* ─── Toast Notifications ─── */
.toast-container {
    position: fixed;
    top: calc(var(--hud-height) + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--space-8));
    max-width: calc(var(--container-max) - var(--space-8));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    padding: var(--space-3) var(--space-4);
    background: var(--dark-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: white;
    animation: slideIn var(--duration-normal) var(--ease-bounce);
    pointer-events: auto;
}

.toast.success { border-color: var(--success); }
.toast.warning { border-color: var(--warning); }
.toast.error { border-color: var(--error); }

/* ─── Reddington Bubble ─── */
.reddington-bubble {
    position: fixed;
    bottom: calc(var(--nav-height) + var(--space-4));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--space-8));
    max-width: calc(var(--container-max) - var(--space-8));
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--dark-elevated);
    border: 2px solid var(--neon-orange);
    border-radius: var(--radius-lg);
    z-index: var(--z-modal);
    animation: slideUp var(--duration-normal) var(--ease-bounce);
}

.reddington-bubble[hidden] {
    display: none;
}

.reddington-avatar {
    font-size: var(--text-3xl);
    flex-shrink: 0;
}

.reddington-text {
    font-size: var(--text-sm);
    color: var(--gray-500);
    line-height: 1.6;
}

/* ─── Achievement Badge ─── */
.achievement {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.achievement.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.achievement-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    background: var(--gray-200);
    border-radius: var(--radius-full);
}

.achievement.unlocked .achievement-icon {
    background: var(--neon-green);
    box-shadow: var(--shadow-glow);
}

.achievement-info {
    flex: 1;
}

.achievement-name {
    font-weight: var(--font-semibold);
    color: white;
    margin-bottom: var(--space-1);
}

.achievement-desc {
    font-size: var(--text-xs);
    color: var(--gray-400);
}

/* ─── Floating Numbers ─── */
.floating-numbers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.float-num {
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
    animation: floatUp 1s var(--ease-smooth) forwards;
    pointer-events: none;
}

.float-num.bonus {
    color: var(--neon-purple);
    text-shadow: 0 0 10px var(--neon-purple);
}